diff --git a/.angular-cli.json b/.angular-cli.json index 8e74396f..6abee645 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -9,6 +9,7 @@ "outDir": "dist", "assets": [ "assets", + "app/main/content/components/angular-material", "favicon.ico" ], "index": "index.html", diff --git a/package-lock.json b/package-lock.json index f863b5a9..b2008473 100644 --- a/package-lock.json +++ b/package-lock.json @@ -446,15 +446,24 @@ "integrity": "sha1-etcMMQmUsPmA9A04Lc5ZlG/jDc8=" }, "angular-in-memory-web-api": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.3.2.tgz", - "integrity": "sha1-iDbZ4lNNN7co88taHK9v4ef7vs0=" + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.4.6.tgz", + "integrity": "sha1-EB9Zo4XrFTnH+TB1uv0MHLd061g=" }, "angular-resizable-element": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-1.2.0.tgz", "integrity": "sha512-i5xCl4n2VMgGK4gY6Jtho0K5aazbsqNw1bmPYpI9RwlKK+dIOcsMRuMl1JPWzrznHsm4qEsfYg+9KLkYsYy+/g==" }, + "angular2-markdown": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/angular2-markdown/-/angular2-markdown-1.6.0.tgz", + "integrity": "sha1-hja/narXD8NWMxJnB/+zPmhPurE=", + "requires": { + "marked": "0.3.6", + "prismjs": "1.8.1" + } + }, "ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", @@ -1349,6 +1358,17 @@ "source-map": "0.5.6" } }, + "clipboard": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz", + "integrity": "sha1-Ng1taUbpmnof7zleQrqStem1oWs=", + "optional": true, + "requires": { + "good-listener": "1.2.2", + "select": "1.1.2", + "tiny-emitter": "2.0.2" + } + }, "cliui": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", @@ -2351,6 +2371,12 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.1.3.tgz", + "integrity": "sha1-moJRp3fXAl+qVXN7w7BxdCEnqf0=", + "optional": true + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -3469,6 +3495,15 @@ "minimatch": "3.0.4" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "optional": true, + "requires": { + "delegate": "3.1.3" + } + }, "graceful-fs": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", @@ -5060,6 +5095,11 @@ "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", "dev": true }, + "marked": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.6.tgz", + "integrity": "sha1-ssbGGPzOzk74bE/Gy4p8v1rtqNc=" + }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", @@ -6564,6 +6604,14 @@ "utila": "0.4.0" } }, + "prismjs": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.8.1.tgz", + "integrity": "sha1-vQzcMumlYcHIw8lzN2Wn8ew7VO4=", + "requires": { + "clipboard": "1.7.1" + } + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -7227,6 +7275,12 @@ } } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "optional": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -8052,6 +8106,12 @@ "setimmediate": "1.0.5" } }, + "tiny-emitter": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz", + "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==", + "optional": true + }, "tmp": { "version": "0.0.31", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz", diff --git a/package.json b/package.json index 6ed77a6a..03720323 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,8 @@ "@swimlane/ngx-datatable": "9.3.1", "@swimlane/ngx-dnd": "3.0.0", "angular-calendar": "0.19.0", - "angular-in-memory-web-api": "0.3.2", + "angular-in-memory-web-api": "0.4.6", + "angular2-markdown": "1.6.0", "classlist.js": "1.1.20150312", "core-js": "2.5.0", "d3": "4.10.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3a0d4fbb..ad6fbdb6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,6 +19,8 @@ import { FuseConfigService } from './core/services/config.service'; import { FuseNavigationService } from './core/components/navigation/navigation.service'; import { ComponentsThirdPartyModule } from './main/content/components-third-party/components-third-party.module'; import { ServicesModule } from './main/content/services/services.module'; +import { FuseAngularMaterialModule } from './main/content/components/angular-material/angular-material.module'; +import { MarkdownModule } from 'angular2-markdown'; const appRoutes: Routes = [ { @@ -66,8 +68,12 @@ const appRoutes: Routes = [ BrowserAnimationsModule, RouterModule.forRoot(appRoutes), SharedModule, + MarkdownModule.forRoot(), - InMemoryWebApiModule.forRoot(FuseFakeDbService, {delay: 0}), + InMemoryWebApiModule.forRoot(FuseFakeDbService, { + delay : 0, + passThruUnknownUrl: true + }), FuseMainModule, @@ -77,6 +83,7 @@ const appRoutes: Routes = [ UIModule, ServicesModule, ComponentsModule, + FuseAngularMaterialModule, ComponentsThirdPartyModule ], providers : [ diff --git a/src/app/core/components/copier/copier.service.ts b/src/app/core/components/copier/copier.service.ts new file mode 100644 index 00000000..42ce0483 --- /dev/null +++ b/src/app/core/components/copier/copier.service.ts @@ -0,0 +1,60 @@ +/** + * This class is based on the code in the following projects: + * + * - https://github.com/zenorocha/select + * - https://github.com/zenorocha/clipboard.js/ + * + * Both released under MIT license - © Zeno Rocha + */ +import {Injectable} from '@angular/core'; + +@Injectable() +export class CopierService { + + private textarea: HTMLTextAreaElement; + + /** Copy the text value to the clipboard. */ + copyText(text: string): boolean { + this.createTextareaAndSelect(text); + + const copySuccessful = document.execCommand('copy'); + this.removeFake(); + + return copySuccessful; + } + + /** + * Creates a hidden textarea element, sets its value from `text` property, + * and makes a selection on it. + */ + private createTextareaAndSelect(text: string) { + // Create a fake element to hold the contents to copy + this.textarea = document.createElement('textarea'); + + // Prevent zooming on iOS + this.textarea.style.fontSize = '12pt'; + + // Hide the element + this.textarea.classList.add('cdk-visually-hidden'); + + // Move element to the same position vertically + const yPosition = window.pageYOffset || document.documentElement.scrollTop; + this.textarea.style.top = yPosition + 'px'; + + this.textarea.setAttribute('readonly', ''); + this.textarea.value = text; + + document.body.appendChild(this.textarea); + + this.textarea.select(); + this.textarea.setSelectionRange(0, this.textarea.value.length); + } + + /** Remove the text area from the DOM. */ + private removeFake() { + if (this.textarea) { + document.body.removeChild(this.textarea); + this.textarea = null; + } + } +} diff --git a/src/app/core/modules/material.module.ts b/src/app/core/modules/material.module.ts index 663fabd1..f4a3d895 100644 --- a/src/app/core/modules/material.module.ts +++ b/src/app/core/modules/material.module.ts @@ -27,6 +27,7 @@ import { MdSliderModule, MdSlideToggleModule, MdSnackBarModule, + MdStepperModule, MdSortModule, MdTableModule, MdTabsModule @@ -60,6 +61,7 @@ import { CdkTableModule } from '@angular/cdk/table'; MdSliderModule, MdSlideToggleModule, MdSnackBarModule, + MdStepperModule, MdSortModule, MdTableModule, MdTabsModule, @@ -93,6 +95,7 @@ import { CdkTableModule } from '@angular/cdk/table'; MdSliderModule, MdSlideToggleModule, MdSnackBarModule, + MdStepperModule, MdSortModule, MdTableModule, MdTabsModule, diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 8e83073b..472dbfbe 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -21,6 +21,7 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component'; import { Md2Module } from 'md2'; import { CookieService } from 'ngx-cookie-service'; +import { MarkdownModule } from 'angular2-markdown'; @NgModule({ declarations : [ @@ -43,7 +44,8 @@ import { CookieService } from 'ngx-cookie-service'; ColorPickerModule, NgxDnDModule, NgxDatatableModule, - Md2Module + Md2Module, + MarkdownModule ], exports : [ FlexLayoutModule, @@ -62,7 +64,8 @@ import { CookieService } from 'ngx-cookie-service'; NgxDatatableModule, FuseIfOnDomDirective, FuseMaterialColorPickerComponent, - Md2Module + Md2Module, + MarkdownModule ], entryComponents: [ FuseConfirmDialogComponent diff --git a/src/app/core/scss/partials/plugins/_plugins.scss b/src/app/core/scss/partials/plugins/_plugins.scss index 6e4ef192..f9d4c979 100644 --- a/src/app/core/scss/partials/plugins/_plugins.scss +++ b/src/app/core/scss/partials/plugins/_plugins.scss @@ -1,4 +1,5 @@ @import "highlight"; +@import "prism"; @import "perfect-scrollbar"; @import "ngx-datatable"; @import "ngx-color-picker"; diff --git a/src/app/core/scss/partials/plugins/_prism.scss b/src/app/core/scss/partials/plugins/_prism.scss new file mode 100644 index 00000000..40eb6fec --- /dev/null +++ b/src/app/core/scss/partials/plugins/_prism.scss @@ -0,0 +1,269 @@ +// Edit the sixteen color-value variables, and create your own syntax highlighter colorscheme + +$base00: #263238; +$base01: #2C393F; +$base02: #37474F; +$base03: #707880; +$base04: #C9CCD3; +$base05: #CDD3DE; +$base06: #D5DBE5; +$base07: #FFFFFF; +$base08: #EC5F67; +$base09: #EA9560; +$base0A: #FFCC00; +$base0B: #8BD649; +$base0C: #80CBC4; +$base0D: #89DDFF; +$base0E: #82AAFF; +$base0F: #EC5F67; + +$red: $base08; +$orange: $base09; +$yellow: $base0A; +$green: $base0B; +$cyan: $base0C; +$blue: $base0D; +$violet: $base0E; +$magenta: $base0F; + +$code-font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; +$code-font-size: 14px; +$code-line-height: 1.6; +$code-background: $base00; +$code-color: $base05; +$code-color-fade: $base05; +// $code-text-shadow: none; +$code-color-comment: $base02; +$code-color-keyword: $base0B; +$code-color-value: $base0C; +$code-color-attr-name: $base09; +$code-color-string: $base0C; +$code-color-name: $base0A; +$code-color-number: $base09; +$code-color-variable: $base0D; +$code-color-selector: $base0E; +$code-color-property: $base0A; +$code-color-important: $base08; +$code-color-tag: $base0D; +$code-color-atrule: $base0C; + +// @import "../partials/prism"; +/** + * Prism base code highlighter theme using Sass + * + * @author @MoOx + * https://github.com/MoOx/sass-prism-theme-base/blob/master/_prism.scss + * slightly adapted by me, Bram de Haan + */ + +// prism selector +$code-selector: "code[class*=\"language-\"], pre[class*=\"language-\"]"; +$code-selector-block: "pre[class*=\"language-\"]"; +$code-selector-inline: ":not(pre) > code[class*=\"language-\"]"; + +// generic stuff +$code-font-family: Menlo, Monaco, "Courier New", monospace !default; +$code-font-size: 14px !default; +$code-line-height: 1.6 !default; + +$code-tab-size: 4 !default; +$code-hyphens: none !default; + +$code-block-padding: 12px !default; +$code-inline-padding: 2px 6px !default; +$code-border-radius: 0 !default; + +$code-border: none !default; +$code-background: #2A2A2A !default; +$code-color: #FFF !default; +$code-color-fade: #BEBEC5 !default; +// $code-text-shadow: 0 1px 0 #000 !default; +$code-box-shadow: none !default; +$code-color-property: #B58900 !default; +$code-color-important: #CB4B16 !default; +$code-color-tag: #268BD2 !default; +$code-color-atrule: #2AA198 !default; +$code-color-attr-name: #B65611 !default; + +// $code-linenums-padding: 7px !default; +// $code-linenums-width: 40px !default; +// $code-linenums-background: #444 !default; +// $code-linenums-border-color: #555 !default; +// $code-linenums-border-width: 1px !default; + +@if $code-selector != null { + #{$code-selector} { + -moz-tab-size: $code-tab-size; + -o-tab-size: $code-tab-size; + tab-size: $code-tab-size; + + -webkit-hyphens: $code-hyphens; + -moz-hyphens: $code-hyphens; + -ms-hyphens: $code-hyphens; + hyphens: $code-hyphens; + + // whitespace management + white-space: pre; // fallback + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; + + font-family: $code-font-family; + font-size: $code-font-size; + line-height: $code-line-height; + + color: $code-color; + // text-shadow: $code-text-shadow; + background: $code-background; + } +} + +%code-background { + border-radius: $code-border-radius; + border: $code-border; + box-shadow: $code-box-shadow; +} + +@if $code-selector-block != null { + #{$code-selector-block} { + @extend %code-background; + padding: $code-block-padding; + } +} + +@if $code-selector-inline != null { + #{$code-selector-inline} { + @extend %code-background; + padding: $code-inline-padding; + } +} + +// pre[class*="language-"], +// :not(pre) > code[class*="language-"] { +// background: $code-background; +// } + +// prism tokens +// +$code-color-comment: null !default; +$code-color-keyword: null !default; +$code-color-value: null !default; +$code-color-string: null !default; +$code-color-name: null !default; +$code-color-number: null !default; +$code-color-variable: null !default; +$code-color-selector: null !default; +$code-color-punctuation: $code-color-fade !default; + +#{$code-selector} { + .namespace { + opacity: .7; + } + + .token { + &.comment, + &.prolog, + &.doctype, + &.cdata { + color: $code-color-comment; + } + + &.null, + &.operator, + &.boolean, + &.number { + color: $code-color-number; + } + + &.string { + color: $code-color-string; + } + &.attr-name { + color: $code-color-attr-name; + } + + &.entity, + &.url, + .language-css &.string, + .style &.string { + color: $code-color-string; + } + + &.selector { + color: $code-color-selector; + } + + &.attr-value, + &.keyword, + &.control, + &.directive, + &.unit { + color: $code-color-keyword; + } + &.important { + color: $code-color-important; + } + &.atrule { + color: $code-color-atrule; + } + + &.regex, + &.statement { + color: $code-color-value; + } + + &.placeholder, + &.variable { + color: $code-color-variable; + } + + &.property, + &.tag { + // font-style: italic; + } + + &.property { + color: $code-color-property; + } + &.tag { + color: $code-color-tag; + } + + &.important, + &.statement { + font-weight: bold; + } + + // todo ? + // &.mixin + // &.gradient + // &.abslength + // &.easing + // &.time + // &.angle + // &.fontfamily + + // ruby/vim https://github.com/LeaVerou/prism/pull/18 + // &.inst-var + // &.builtin + // &.const + // &.symbol + // + // php https://github.com/LeaVerou/prism/pull/20 + // &.deliminator + // &.function + + &.punctuation { + color: $code-color-punctuation; + } + + &.entity { + cursor: help; + } + + // for dev :) + &.debug { + color: red + } + } +} \ No newline at end of file diff --git a/src/app/main/content/apps/calendar/calendar.service.ts b/src/app/main/content/apps/calendar/calendar.service.ts index 6774fb45..1a9ae423 100644 --- a/src/app/main/content/apps/calendar/calendar.service.ts +++ b/src/app/main/content/apps/calendar/calendar.service.ts @@ -1,8 +1,8 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; import { Subject } from 'rxjs/Subject'; +import { HttpClient } from '@angular/common/http'; @Injectable() export class CalendarService implements Resolve @@ -10,7 +10,7 @@ export class CalendarService implements Resolve events: any; onEventsUpdated = new Subject(); - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -34,8 +34,8 @@ export class CalendarService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/calendar/events') - .subscribe(response => { - this.events = response.json().data.data; + .subscribe((response: any) => { + this.events = response.data.data; this.onEventsUpdated.next(this.events); resolve(this.events); }, reject); @@ -49,7 +49,7 @@ export class CalendarService implements Resolve id : 'events', data: [...events] }) - .subscribe(response => { + .subscribe((response: any) => { this.getEvents(); }, reject); }); diff --git a/src/app/main/content/apps/chat/chat.service.ts b/src/app/main/content/apps/chat/chat.service.ts index e06d4eaa..3337b080 100644 --- a/src/app/main/content/apps/chat/chat.service.ts +++ b/src/app/main/content/apps/chat/chat.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { Subject } from 'rxjs/Subject'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { FuseUtils } from '../../../../core/fuseUtils'; @@ -19,7 +19,7 @@ export class ChatService implements Resolve onLeftSidenavViewChanged = new Subject(); onRightSidenavViewChanged = new Subject(); - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -47,8 +47,8 @@ export class ChatService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/chat-chats/' + chatItem.id) - .subscribe(response => { - const chat = response.json().data; + .subscribe((response: any) => { + const chat = response.data; const chatContact = this.contacts.find((contact) => { return contact.id === contactId; @@ -105,7 +105,7 @@ export class ChatService implements Resolve * Post the created chat */ this.http.post('api/chat-chats', {...chat}) - .subscribe(response => { + .subscribe((response: any) => { /** * Post the new the user data @@ -150,7 +150,7 @@ export class ChatService implements Resolve updateUserData(userData) { this.http.post('api/chat-user/' + this.user.id, userData) - .subscribe(response => { + .subscribe((response: any) => { this.user = userData; } ); @@ -211,8 +211,8 @@ export class ChatService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/chat-contacts') - .subscribe(response => { - resolve(response.json().data); + .subscribe((response: any) => { + resolve(response.data); }, reject); }); } @@ -225,8 +225,8 @@ export class ChatService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/chat-chats') - .subscribe(response => { - resolve(response.json().data); + .subscribe((response: any) => { + resolve(response.data); }, reject); }); } @@ -239,8 +239,8 @@ export class ChatService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/chat-user') - .subscribe(response => { - resolve(response.json().data[0]); + .subscribe((response: any) => { + resolve(response.data[0]); }, reject); }); } diff --git a/src/app/main/content/apps/contacts/contacts.service.ts b/src/app/main/content/apps/contacts/contacts.service.ts index 925b05e8..7774f65a 100644 --- a/src/app/main/content/apps/contacts/contacts.service.ts +++ b/src/app/main/content/apps/contacts/contacts.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { Contact } from './contact.model'; import { FuseUtils } from '../../../../core/fuseUtils'; @@ -23,7 +23,7 @@ export class ContactsService implements Resolve searchText: string; filterBy: string; - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -65,9 +65,9 @@ export class ContactsService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/contacts-contacts') - .subscribe(response => { + .subscribe((response: any) => { - this.contacts = response.json().data; + this.contacts = response.data; if ( this.filterBy === 'starred' ) { @@ -103,8 +103,8 @@ export class ContactsService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/contacts-user/5725a6802d10e277a0f35724') - .subscribe(response => { - this.user = response.json().data; + .subscribe((response: any) => { + this.user = response.data; this.onUserDataChanged.next(this.user); resolve(this.user); }, reject); diff --git a/src/app/main/content/apps/dashboards/project/projects.service.ts b/src/app/main/content/apps/dashboards/project/projects.service.ts index f267d028..1b103613 100644 --- a/src/app/main/content/apps/dashboards/project/projects.service.ts +++ b/src/app/main/content/apps/dashboards/project/projects.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; @Injectable() export class ProjectsDashboardService implements Resolve @@ -10,7 +10,7 @@ export class ProjectsDashboardService implements Resolve widgets: any[]; constructor( - private http: Http + private http: HttpClient ) { } @@ -42,9 +42,9 @@ export class ProjectsDashboardService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/projects-dashboard-projects') - .subscribe(response => { - this.projects = response.json().data; - resolve(response.json().data); + .subscribe((response: any) => { + this.projects = response.data; + resolve(response.data); }, reject); }); } @@ -53,9 +53,9 @@ export class ProjectsDashboardService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/projects-dashboard-widgets') - .subscribe(response => { - this.widgets = response.json().data; - resolve(response.json().data); + .subscribe((response: any) => { + this.widgets = response.data; + resolve(response.data); }, reject); }); } diff --git a/src/app/main/content/apps/file-manager/file-manager.service.ts b/src/app/main/content/apps/file-manager/file-manager.service.ts index d2a72364..82e33c53 100644 --- a/src/app/main/content/apps/file-manager/file-manager.service.ts +++ b/src/app/main/content/apps/file-manager/file-manager.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() @@ -10,7 +10,7 @@ export class FileManagerService implements Resolve onFilesChanged: BehaviorSubject = new BehaviorSubject({}); onFileSelected: BehaviorSubject = new BehaviorSubject({}); - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -40,10 +40,10 @@ export class FileManagerService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/file-manager') - .subscribe(response => { - this.onFilesChanged.next(response.json().data); - this.onFileSelected.next(response.json().data[0]); - resolve(response.json().data); + .subscribe((response: any) => { + this.onFilesChanged.next(response.data); + this.onFileSelected.next(response.data[0]); + resolve(response.data); }, reject); }); } diff --git a/src/app/main/content/apps/mail/mail.service.ts b/src/app/main/content/apps/mail/mail.service.ts index d789da52..95d793cd 100644 --- a/src/app/main/content/apps/mail/mail.service.ts +++ b/src/app/main/content/apps/mail/mail.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { Mail } from './mail.model'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { FuseUtils } from 'app/core/fuseUtils'; @@ -28,7 +28,7 @@ export class MailService implements Resolve onLabelsChanged: BehaviorSubject = new BehaviorSubject([]); onSearchTextChanged: BehaviorSubject = new BehaviorSubject(''); - constructor(private http: Http) + constructor(private http: HttpClient) { this.selectedMails = []; } @@ -88,8 +88,8 @@ export class MailService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/mail-folders') - .subscribe(response => { - this.folders = response.json().data; + .subscribe((response: any) => { + this.folders = response.data; this.onFoldersChanged.next(this.folders); resolve(this.folders); }, reject); @@ -104,8 +104,8 @@ export class MailService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/mail-filters') - .subscribe(response => { - this.filters = response.json().data; + .subscribe((response: any) => { + this.filters = response.data; this.onFiltersChanged.next(this.filters); resolve(this.filters); }, reject); @@ -120,8 +120,8 @@ export class MailService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/mail-labels') - .subscribe(response => { - this.labels = response.json().data; + .subscribe((response: any) => { + this.labels = response.data; this.onLabelsChanged.next(this.labels); resolve(this.labels); }, reject); @@ -157,14 +157,14 @@ export class MailService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/mail-folders?handle=' + handle) - .subscribe(folders => { + .subscribe((folders: any) => { - const folderId = folders.json().data[0].id; + const folderId = folders.data[0].id; this.http.get('api/mail-mails?folder=' + folderId) - .subscribe(mails => { + .subscribe((mails: any) => { - this.mails = mails.json().data.map(mail => { + this.mails = mails.data.map(mail => { return new Mail(mail); }); @@ -189,9 +189,9 @@ export class MailService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/mail-mails?' + handle + '=true') - .subscribe(mails => { + .subscribe((mails: any) => { - this.mails = mails.json().data.map(mail => { + this.mails = mails.data.map(mail => { return new Mail(mail); }); @@ -214,14 +214,14 @@ export class MailService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/mail-labels?handle=' + handle) - .subscribe(labels => { + .subscribe((labels: any) => { - const labelId = labels.json().data[0].id; + const labelId = labels.data[0].id; this.http.get('api/mail-mails?labels=' + labelId) - .subscribe(mails => { + .subscribe((mails: any) => { - this.mails = mails.json().data.map(mail => { + this.mails = mails.data.map(mail => { return new Mail(mail); }); diff --git a/src/app/main/content/apps/scrumboard/scrumboard.service.ts b/src/app/main/content/apps/scrumboard/scrumboard.service.ts index f26c3e9e..b4221bab 100644 --- a/src/app/main/content/apps/scrumboard/scrumboard.service.ts +++ b/src/app/main/content/apps/scrumboard/scrumboard.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() @@ -14,7 +14,7 @@ export class ScrumboardService implements Resolve onBoardsChanged: BehaviorSubject = new BehaviorSubject([]); onBoardChanged: BehaviorSubject = new BehaviorSubject([]); - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -44,8 +44,8 @@ export class ScrumboardService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/scrumboard-boards') - .subscribe(response => { - this.boards = response.json().data; + .subscribe((response: any) => { + this.boards = response.data; this.onBoardsChanged.next(this.boards); resolve(this.boards); }, reject); @@ -56,8 +56,8 @@ export class ScrumboardService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/scrumboard-boards/' + boardId) - .subscribe(response => { - this.board = response.json().data; + .subscribe((response: any) => { + this.board = response.data; this.onBoardChanged.next(this.board); resolve(this.board); }, reject); diff --git a/src/app/main/content/apps/todo/todo.service.ts b/src/app/main/content/apps/todo/todo.service.ts index bae4a873..087c7211 100644 --- a/src/app/main/content/apps/todo/todo.service.ts +++ b/src/app/main/content/apps/todo/todo.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { Todo } from './todo.model'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { FuseUtils } from '../../../../core/fuseUtils'; @@ -30,7 +30,7 @@ export class TodoService implements Resolve onNewTodoClicked: Subject = new Subject(); constructor( - private http: Http, + private http: HttpClient, private location: Location // Set current todo ) { @@ -91,8 +91,8 @@ export class TodoService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/todo-filters') - .subscribe(response => { - this.filters = response.json().data; + .subscribe((response: any) => { + this.filters = response.data; this.onFiltersChanged.next(this.filters); resolve(this.filters); }, reject); @@ -107,8 +107,8 @@ export class TodoService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/todo-tags') - .subscribe(response => { - this.tags = response.json().data; + .subscribe((response: any) => { + this.tags = response.data; this.onTagsChanged.next(this.tags); resolve(this.tags); }, reject); @@ -144,8 +144,8 @@ export class TodoService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/todo-todos') - .subscribe(todos => { - this.todos = todos.json().data.map(todo => { + .subscribe((todos: any) => { + this.todos = todos.data.map(todo => { return new Todo(todo); }); @@ -176,9 +176,9 @@ export class TodoService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/todo-todos?' + param) - .subscribe(todos => { + .subscribe((todos: any) => { - this.todos = todos.json().data.map(todo => { + this.todos = todos.data.map(todo => { return new Todo(todo); }); @@ -201,14 +201,14 @@ export class TodoService implements Resolve { return new Promise((resolve, reject) => { this.http.get('api/todo-tags?handle=' + handle) - .subscribe(tags => { + .subscribe((tags: any) => { - const tagId = tags.json().data[0].id; + const tagId = tags.data[0].id; this.http.get('api/todo-todos?tags=' + tagId) - .subscribe(todos => { + .subscribe((todos: any) => { - this.todos = todos.json().data.map(todo => { + this.todos = todos.data.map(todo => { return new Todo(todo); }); diff --git a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts index 1de22a63..5dd80a29 100644 --- a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts +++ b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; @Component({ selector : 'fuse-ngx-datatable', @@ -12,7 +12,7 @@ export class FuseNgxDatatableComponent implements OnInit loadingIndicator = true; reorderable = true; - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -20,8 +20,8 @@ export class FuseNgxDatatableComponent implements OnInit ngOnInit() { this.http.get('api/contacts-contacts') - .subscribe(contacts => { - this.rows = contacts.json().data; + .subscribe((contacts: any) => { + this.rows = contacts.data; this.loadingIndicator = false; }); } diff --git a/src/app/main/content/components/angular-material/angular-material.component.html b/src/app/main/content/components/angular-material/angular-material.component.html new file mode 100644 index 00000000..53eac738 --- /dev/null +++ b/src/app/main/content/components/angular-material/angular-material.component.html @@ -0,0 +1,31 @@ +
+ + +
+ +
+
+ home + chevron_right + Components + chevron_right + Angular Material Elements +
+
{{title}}
+
+ + + link + Reference + +
+ + + +
+
+ +
+
+
+ diff --git a/src/app/main/content/components/angular-material/angular-material.component.scss b/src/app/main/content/components/angular-material/angular-material.component.scss new file mode 100644 index 00000000..9e33d642 --- /dev/null +++ b/src/app/main/content/components/angular-material/angular-material.component.scss @@ -0,0 +1,9 @@ +:host { + + .angular-material-element { + + > .content { + max-width: 940px; + } + } +} \ No newline at end of file diff --git a/src/app/main/content/components/angular-material/angular-material.component.ts b/src/app/main/content/components/angular-material/angular-material.component.ts new file mode 100644 index 00000000..ebf277ba --- /dev/null +++ b/src/app/main/content/components/angular-material/angular-material.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { COMPONENT_MAP } from './example-components'; + +@Component({ + selector : 'fuse-angular-material', + templateUrl: './angular-material.component.html', + styleUrls : ['./angular-material.component.scss'] +}) +export class FuseAngularMaterialComponent implements OnInit +{ + id: string; + title: string; + examples: any; + + constructor( + private route: ActivatedRoute + ) + { + } + + ngOnInit() + { + this.route.params.subscribe(params => { + this.id = params['id']; + const _title = this.id.replace('-', ' '); + this.title = _title.charAt(0).toUpperCase() + _title.substring(1); + this.examples = COMPONENT_MAP[this.id]; + }); + } +} + diff --git a/src/app/main/content/components/angular-material/angular-material.module.ts b/src/app/main/content/components/angular-material/angular-material.module.ts new file mode 100644 index 00000000..ae4ee2c1 --- /dev/null +++ b/src/app/main/content/components/angular-material/angular-material.module.ts @@ -0,0 +1,40 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { SharedModule } from '../../../../core/modules/shared.module'; +import { FuseWidgetModule } from '../../../../core/components/widget/widget.module'; +import { FuseAngularMaterialComponent } from 'app/main/content/components/angular-material/angular-material.component'; +import { FuseExampleViewerComponent } from './example-viewer/example-viewer'; +import { EXAMPLE_LIST } from './example-components'; + +const routes: Routes = [ + { + path : 'components/angular-material', + children: [ + { + path : ':id', + component: FuseAngularMaterialComponent + } + ] + } +]; + +@NgModule({ + imports : [ + SharedModule, + RouterModule.forChild(routes), + FuseWidgetModule + ], + exports : [ + SharedModule + ], + entryComponents: EXAMPLE_LIST, + declarations : [ + [...EXAMPLE_LIST], + FuseAngularMaterialComponent, + FuseExampleViewerComponent + ] +}) +export class FuseAngularMaterialModule +{ +} + diff --git a/src/app/main/content/components/angular-material/example-components.ts b/src/app/main/content/components/angular-material/example-components.ts new file mode 100644 index 00000000..708b8278 --- /dev/null +++ b/src/app/main/content/components/angular-material/example-components.ts @@ -0,0 +1,759 @@ +import { AutocompleteDisplayExample } from '../../../../../assets/angular-material-examples/autocomplete-display/autocomplete-display-example'; +import { AutocompleteFilterExample } from '../../../../../assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example'; +import { AutocompleteOverviewExample } from '../../../../../assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example'; +import { AutocompleteSimpleExample } from '../../../../../assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example'; +import { ButtonOverviewExample } from '../../../../../assets/angular-material-examples/button-overview/button-overview-example'; +import { ButtonToggleExclusiveExample } from '../../../../../assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example'; +import { ButtonToggleOverviewExample } from '../../../../../assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example'; +import { ButtonTypesExample } from '../../../../../assets/angular-material-examples/button-types/button-types-example'; +import { CardFancyExample } from '../../../../../assets/angular-material-examples/card-fancy/card-fancy-example'; +import { CardOverviewExample } from '../../../../../assets/angular-material-examples/card-overview/card-overview-example'; +import { CdkTableBasicExample } from '../../../../../assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example'; +import { CheckboxConfigurableExample } from '../../../../../assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example'; +import { CheckboxOverviewExample } from '../../../../../assets/angular-material-examples/checkbox-overview/checkbox-overview-example'; +import { ChipsInputExample } from '../../../../../assets/angular-material-examples/chips-input/chips-input-example'; +import { ChipsOverviewExample } from '../../../../../assets/angular-material-examples/chips-overview/chips-overview-example'; +import { ChipsStackedExample } from '../../../../../assets/angular-material-examples/chips-stacked/chips-stacked-example'; +import { DatepickerApiExample } from '../../../../../assets/angular-material-examples/datepicker-api/datepicker-api-example'; +import { DatepickerFilterExample } from '../../../../../assets/angular-material-examples/datepicker-filter/datepicker-filter-example'; +import { DatepickerMinMaxExample } from '../../../../../assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example'; +import { DatepickerOverviewExample } from '../../../../../assets/angular-material-examples/datepicker-overview/datepicker-overview-example'; +import { DatepickerStartViewExample } from '../../../../../assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example'; +import { DatepickerTouchExample } from '../../../../../assets/angular-material-examples/datepicker-touch/datepicker-touch-example'; +import { DialogContentExampleDialog, DialogContentExample } from '../../../../../assets/angular-material-examples/dialog-content/dialog-content-example'; +import { DialogDataExampleDialog, DialogDataExample } from '../../../../../assets/angular-material-examples/dialog-data/dialog-data-example'; +import { DialogElementsExampleDialog, DialogElementsExample } from '../../../../../assets/angular-material-examples/dialog-elements/dialog-elements-example'; +import { DialogOverviewExampleDialog, DialogOverviewExample } from '../../../../../assets/angular-material-examples/dialog-overview/dialog-overview-example'; +import { ExpansionOverviewExample } from '../../../../../assets/angular-material-examples/expansion-overview/expansion-overview-example'; +import { ExpansionStepsExample } from '../../../../../assets/angular-material-examples/expansion-steps/expansion-steps-example'; +import { GridListDynamicExample } from '../../../../../assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example'; +import { GridListOverviewExample } from '../../../../../assets/angular-material-examples/grid-list-overview/grid-list-overview-example'; +import { IconOverviewExample } from '../../../../../assets/angular-material-examples/icon-overview/icon-overview-example'; +import { IconSvgExample } from '../../../../../assets/angular-material-examples/icon-svg-example/icon-svg-example'; +import { InputClearableExample } from '../../../../../assets/angular-material-examples/input-clearable/input-clearable-example'; +import { InputErrorsExample } from '../../../../../assets/angular-material-examples/input-errors/input-errors-example'; +import { InputFormExample } from '../../../../../assets/angular-material-examples/input-form/input-form-example'; +import { InputHintExample } from '../../../../../assets/angular-material-examples/input-hint/input-hint-example'; +import { InputOverviewExample } from '../../../../../assets/angular-material-examples/input-overview/input-overview-example'; +import { InputPrefixSuffixExample } from '../../../../../assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example'; +import { ListOverviewExample } from '../../../../../assets/angular-material-examples/list-overview/list-overview-example'; +import { ListSectionsExample } from '../../../../../assets/angular-material-examples/list-sections/list-sections-example'; +import { ListSelectionExample } from '../../../../../assets/angular-material-examples/list-selection/list-selection-example'; +import { MenuIconsExample } from '../../../../../assets/angular-material-examples/menu-icons/menu-icons-example'; +import { MenuOverviewExample } from '../../../../../assets/angular-material-examples/menu-overview/menu-overview-example'; +import { NestedMenuExample } from '../../../../../assets/angular-material-examples/nested-menu/nested-menu-example'; +import { PaginatorConfigurableExample } from '../../../../../assets/angular-material-examples/paginator-configurable/paginator-configurable-example'; +import { PaginatorOverviewExample } from '../../../../../assets/angular-material-examples/paginator-overview/paginator-overview-example'; +import { ProgressBarConfigurableExample } from '../../../../../assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example'; +import { ProgressBarOverviewExample } from '../../../../../assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example'; +import { ProgressSpinnerConfigurableExample } from '../../../../../assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example'; +import { ProgressSpinnerOverviewExample } from '../../../../../assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example'; +import { RadioNgModelExample } from '../../../../../assets/angular-material-examples/radio-ng-model/radio-ng-model-example'; +import { RadioOverviewExample } from '../../../../../assets/angular-material-examples/radio-overview/radio-overview-example'; +import { SelectFormExample } from '../../../../../assets/angular-material-examples/select-form/select-form-example'; +import { SelectOverviewExample } from '../../../../../assets/angular-material-examples/select-overview/select-overview-example'; +import { SidenavFabExample } from '../../../../../assets/angular-material-examples/sidenav-fab/sidenav-fab-example'; +import { SidenavOverviewExample } from '../../../../../assets/angular-material-examples/sidenav-overview/sidenav-overview-example'; +import { SlideToggleConfigurableExample } from '../../../../../assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example'; +import { SlideToggleFormsExample } from '../../../../../assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example'; +import { SlideToggleOverviewExample } from '../../../../../assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example'; +import { SliderConfigurableExample } from '../../../../../assets/angular-material-examples/slider-configurable/slider-configurable-example'; +import { SliderOverviewExample } from '../../../../../assets/angular-material-examples/slider-overview/slider-overview-example'; +import { PizzaPartyComponent, SnackBarComponentExample } from '../../../../../assets/angular-material-examples/snack-bar-component/snack-bar-component-example'; +import { SnackBarOverviewExample } from '../../../../../assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example'; +import { SortOverviewExample } from '../../../../../assets/angular-material-examples/sort-overview/sort-overview-example'; +import { StepperOverviewExample } from '../../../../../assets/angular-material-examples/stepper-overview/stepper-overview-example'; +import { TableBasicExample } from '../../../../../assets/angular-material-examples/table-basic/table-basic-example'; +import { TableFilteringExample } from '../../../../../assets/angular-material-examples/table-filtering/table-filtering-example'; +import { TableHttpExample } from '../../../../../assets/angular-material-examples/table-http/table-http-example'; +import { TableOverviewExample } from '../../../../../assets/angular-material-examples/table-overview/table-overview-example'; +import { TablePaginationExample } from '../../../../../assets/angular-material-examples/table-pagination/table-pagination-example'; +import { TableSortingExample } from '../../../../../assets/angular-material-examples/table-sorting/table-sorting-example'; +import { TabsOverviewExample } from '../../../../../assets/angular-material-examples/tabs-overview/tabs-overview-example'; +import { TabsTemplateLabelExample } from '../../../../../assets/angular-material-examples/tabs-template-label/tabs-template-label-example'; +import { ToolbarMultirowExample } from '../../../../../assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example'; +import { ToolbarOverviewExample } from '../../../../../assets/angular-material-examples/toolbar-overview/toolbar-overview-example'; +import { TooltipOverviewExample } from '../../../../../assets/angular-material-examples/tooltip-overview/tooltip-overview-example'; +import { TooltipPositionExample } from '../../../../../assets/angular-material-examples/tooltip-position/tooltip-position-example'; + +export const COMPONENT_MAP = { + 'autocomplete' : [ + 'autocomplete-simple', + 'autocomplete-filter', + 'autocomplete-display', + 'autocomplete-overview' + ], + 'checkbox' : [ + 'checkbox-overview', + 'checkbox-configurable' + ], + 'datepicker' : [ + 'datepicker-overview', + 'datepicker-start-view', + 'datepicker-min-max', + 'datepicker-filter', + 'datepicker-touch', + 'datepicker-api' + ], + 'input' : [ + 'input-overview', + 'input-errors', + 'input-prefix-suffix', + 'input-hint', + 'input-clearable', + 'input-form' + ], + 'radio-button' : [ + 'radio-overview', + 'radio-ng-model' + ], + 'select' : [ + 'select-overview', + 'select-form' + ], + 'slider' : [ + 'slider-overview', + 'slider-configurable' + ], + 'slide-toggle' : [ + 'slide-toggle-overview', + 'slide-toggle-configurable', + 'slide-toggle-forms' + ], + 'menu' : [ + 'menu-overview', + 'nested-menu', + 'menu-icons' + ], + 'sidenav' : [ + 'sidenav-overview', + 'sidenav-fab' + ], + 'toolbar' : [ + 'toolbar-overview', + 'toolbar-multirow' + ], + 'list' : [ + 'list-overview', + 'list-sections', + 'list-selection' + ], + 'grid-list' : [ + 'grid-list-overview', + 'grid-list-dynamic' + ], + 'card' : [ + 'card-overview', + 'card-fancy' + ], + 'stepper' : [ + 'stepper-overview' + ], + 'tabs' : [ + 'tabs-overview', + 'tabs-template-label' + ], + 'expansion-panel' : [ + 'expansion-overview', + 'expansion-steps' + ], + 'button' : [ + 'button-overview', + 'button-types' + ], + 'button-toggle' : [ + 'button-toggle-overview', + 'button-toggle-exclusive' + ], + 'chips' : [ + 'chips-overview', + 'chips-input' + ], + 'icon' : [ + 'icon-overview', + 'icon-svg' + ], + 'progress-spinner': [ + 'progress-spinner-overview', + 'progress-spinner-configurable' + ], + 'progress-bar' : [ + 'progress-bar-overview', + 'progress-bar-configurable' + ], + 'dialog' : [ + 'dialog-overview', + 'dialog-content', + 'dialog-data', + 'dialog-elements' + ], + 'tooltip' : [ + 'tooltip-overview', + 'tooltip-position' + ], + 'snackbar' : [ + 'snack-bar-overview' + ], + 'data-table' : [ + 'table-overview', + 'table-basic', + 'table-filtering', + 'table-http' + ], + 'sort-header' : [ + 'sort-overview', + 'table-sorting' + ], + 'paginator' : [ + 'table-pagination' + ] +}; + +export const EXAMPLE_COMPONENTS = { + 'autocomplete-display' : { + title : 'Display value autocomplete', + component : AutocompleteDisplayExample, + additionalFiles: null, + selectorName : null + }, + 'autocomplete-filter' : { + title : 'Filter autocomplete', + component : AutocompleteFilterExample, + additionalFiles: null, + selectorName : null + }, + 'autocomplete-overview' : { + title : 'Autocomplete overview', + component : AutocompleteOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'autocomplete-simple' : { + title : 'Simple autocomplete', + component : AutocompleteSimpleExample, + additionalFiles: null, + selectorName : null + }, + 'button-overview' : { + title : 'Basic buttons', + component : ButtonOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'button-toggle-exclusive' : { + title : 'Exclusive selection', + component : ButtonToggleExclusiveExample, + additionalFiles: null, + selectorName : null + }, + 'button-toggle-overview' : { + title : 'Basic button-toggles', + component : ButtonToggleOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'button-types' : { + title : 'Button varieties', + component : ButtonTypesExample, + additionalFiles: null, + selectorName : null + }, + 'card-fancy' : { + title : 'Card with multiple sections', + component : CardFancyExample, + additionalFiles: null, + selectorName : null + }, + 'card-overview' : { + title : 'Basic cards', + component : CardOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'cdk-table-basic' : { + title : 'Basic CDK data-table', + component : CdkTableBasicExample, + additionalFiles: null, + selectorName : null + }, + 'checkbox-configurable' : { + title : 'Configurable checkbox', + component : CheckboxConfigurableExample, + additionalFiles: null, + selectorName : null + }, + 'checkbox-overview' : { + title : 'Basic checkboxes', + component : CheckboxOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'chips-input' : { + title : 'Chips with input', + component : ChipsInputExample, + additionalFiles: null, + selectorName : null + }, + 'chips-overview' : { + title : 'Basic chips', + component : ChipsOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'chips-stacked' : { + title : 'Stacked chips', + component : ChipsStackedExample, + additionalFiles: null, + selectorName : null + }, + 'datepicker-api' : { + title : 'Datepicker API', + component : DatepickerApiExample, + additionalFiles: null, + selectorName : null + }, + 'datepicker-filter' : { + title : 'Datepicker Filter', + component : DatepickerFilterExample, + additionalFiles: null, + selectorName : null + }, + 'datepicker-min-max' : { + title : 'Datepicker Min Max', + component : DatepickerMinMaxExample, + additionalFiles: null, + selectorName : null + }, + 'datepicker-overview' : { + title : 'Basic datepicker', + component : DatepickerOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'datepicker-start-view' : { + title : 'Datepicker start date', + component : DatepickerStartViewExample, + additionalFiles: null, + selectorName : null + }, + 'datepicker-touch' : { + title : 'Datepicker Touch', + component : DatepickerTouchExample, + additionalFiles: null, + selectorName : null + }, + 'dialog-content' : { + title : 'Dialog with header, scrollable content and actions', + component : DialogContentExample, + additionalFiles: ['dialog-content-example-dialog.html'], + selectorName : 'DialogContentExample, DialogContentExampleDialog' + }, + 'dialog-data' : { + title : 'Injecting data when opening a dialog', + component : DialogDataExample, + additionalFiles: ['dialog-data-example-dialog.html'], + selectorName : 'DialogDataExample, DialogDataExampleDialog' + }, + 'dialog-elements' : { + title : 'Dialog elements', + component : DialogElementsExample, + additionalFiles: ['dialog-elements-example-dialog.html'], + selectorName : 'DialogElementsExample, DialogElementsExampleDialog' + }, + 'dialog-overview' : { + title : 'Dialog Overview', + component : DialogOverviewExample, + additionalFiles: ['dialog-overview-example-dialog.html'], + selectorName : 'DialogOverviewExample, DialogOverviewExampleDialog' + }, + 'expansion-overview' : { + title : 'Basic expansion panel', + component : ExpansionOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'expansion-steps' : { + title : 'Expansion panel as accordion', + component : ExpansionStepsExample, + additionalFiles: null, + selectorName : null + }, + 'grid-list-dynamic' : { + title : 'Dynamic grid-list', + component : GridListDynamicExample, + additionalFiles: null, + selectorName : null + }, + 'grid-list-overview' : { + title : 'Basic grid-list', + component : GridListOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'icon-overview' : { + title : 'Basic icons', + component : IconOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'icon-svg' : { + title : 'SVG icons', + component : IconSvgExample, + additionalFiles: null, + selectorName : null + }, + 'input-clearable' : { + title : 'Input Clearable', + component : InputClearableExample, + additionalFiles: null, + selectorName : null + }, + 'input-errors' : { + title : 'Input Errors', + component : InputErrorsExample, + additionalFiles: null, + selectorName : null + }, + 'input-form' : { + title : 'Inputs in a form', + component : InputFormExample, + additionalFiles: null, + selectorName : null + }, + 'input-hint' : { + title : 'Input hints', + component : InputHintExample, + additionalFiles: null, + selectorName : null + }, + 'input-overview' : { + title : 'Basic Inputs', + component : InputOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'input-prefix-suffix' : { + title : 'Input Prefixes and Suffixes', + component : InputPrefixSuffixExample, + additionalFiles: null, + selectorName : null + }, + 'list-overview' : { + title : 'Basic list', + component : ListOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'list-sections' : { + title : 'List with sections', + component : ListSectionsExample, + additionalFiles: null, + selectorName : null + }, + 'list-selection' : { + title : 'List with selection', + component : ListSelectionExample, + additionalFiles: null, + selectorName : null + }, + 'menu-icons' : { + title : 'Menu with icons', + component : MenuIconsExample, + additionalFiles: null, + selectorName : null + }, + 'menu-overview' : { + title : 'Basic menu', + component : MenuOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'nested-menu' : { + title : 'Nested menu', + component : NestedMenuExample, + additionalFiles: null, + selectorName : null + }, + 'paginator-configurable' : { + title : 'Configurable paginator', + component : PaginatorConfigurableExample, + additionalFiles: null, + selectorName : null + }, + 'paginator-overview' : { + title : 'Paginator', + component : PaginatorOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'progress-bar-configurable' : { + title : 'Configurable progress-bar', + component : ProgressBarConfigurableExample, + additionalFiles: null, + selectorName : null + }, + 'progress-bar-overview' : { + title : 'Basic progress-bar', + component : ProgressBarOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'progress-spinner-configurable': { + title : 'Configurable progress spinner', + component : ProgressSpinnerConfigurableExample, + additionalFiles: null, + selectorName : null + }, + 'progress-spinner-overview' : { + title : 'Basic progress-spinner', + component : ProgressSpinnerOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'radio-ng-model' : { + title : 'Radios with ngModel', + component : RadioNgModelExample, + additionalFiles: null, + selectorName : null + }, + 'radio-overview' : { + title : 'Basic radios', + component : RadioOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'select-form' : { + title : 'Select in a form', + component : SelectFormExample, + additionalFiles: null, + selectorName : null + }, + 'select-overview' : { + title : 'Basic select', + component : SelectOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'sidenav-fab' : { + title : 'Sidenav with a FAB', + component : SidenavFabExample, + additionalFiles: null, + selectorName : null + }, + 'sidenav-overview' : { + title : 'Basic sidenav', + component : SidenavOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'slide-toggle-configurable' : { + title : 'Configurable slide-toggle', + component : SlideToggleConfigurableExample, + additionalFiles: null, + selectorName : null + }, + 'slide-toggle-forms' : { + title : 'Slide-toggle with forms', + component : SlideToggleFormsExample, + additionalFiles: null, + selectorName : null + }, + 'slide-toggle-overview' : { + title : 'Basic slide-toggles', + component : SlideToggleOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'slider-configurable' : { + title : 'Configurable slider', + component : SliderConfigurableExample, + additionalFiles: null, + selectorName : null + }, + 'slider-overview' : { + title : 'Basic slider', + component : SliderOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'snack-bar-component' : { + title : 'Snack-bar with a custom component', + component : SnackBarComponentExample, + additionalFiles: ['snack-bar-component-example-snack.html'], + selectorName : 'SnackBarComponentExample, PizzaPartyComponent' + }, + 'snack-bar-overview' : { + title : 'Basic snack-bar', + component : SnackBarOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'sort-overview' : { + title : 'Sorting overview', + component : SortOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'stepper-overview' : { + title : 'Stepper overview', + component : StepperOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'table-basic' : { + title : 'Basic table', + component : TableBasicExample, + additionalFiles: null, + selectorName : null + }, + 'table-filtering' : { + title : 'Table with filtering', + component : TableFilteringExample, + additionalFiles: null, + selectorName : null + }, + 'table-http' : { + title : 'Table retrieving data through HTTP', + component : TableHttpExample, + additionalFiles: null, + selectorName : null + }, + 'table-overview' : { + title : 'Feature-rich data table', + component : TableOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'table-pagination' : { + title : 'Table with pagination', + component : TablePaginationExample, + additionalFiles: null, + selectorName : null + }, + 'table-sorting' : { + title : 'Table with sorting', + component : TableSortingExample, + additionalFiles: null, + selectorName : null + }, + 'tabs-overview' : { + title : 'Basic tabs', + component : TabsOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'tabs-template-label' : { + title : 'Complex Example', + component : TabsTemplateLabelExample, + additionalFiles: null, + selectorName : null + }, + 'toolbar-multirow' : { + title : 'Multi-row toolbar', + component : ToolbarMultirowExample, + additionalFiles: null, + selectorName : null + }, + 'toolbar-overview' : { + title : 'Basic toolbar', + component : ToolbarOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'tooltip-overview' : { + title : 'Basic tooltip', + component : TooltipOverviewExample, + additionalFiles: null, + selectorName : null + }, + 'tooltip-position' : { + title : 'Tooltip with custom position', + component : TooltipPositionExample, + additionalFiles: null, + selectorName : null + } +}; + +export const EXAMPLE_LIST = [ + AutocompleteDisplayExample, + AutocompleteFilterExample, + AutocompleteOverviewExample, + AutocompleteSimpleExample, + ButtonOverviewExample, + ButtonToggleExclusiveExample, + ButtonToggleOverviewExample, + ButtonTypesExample, + CardFancyExample, + CardOverviewExample, + CdkTableBasicExample, + CheckboxConfigurableExample, + CheckboxOverviewExample, + ChipsInputExample, + ChipsOverviewExample, + ChipsStackedExample, + DatepickerApiExample, + DatepickerFilterExample, + DatepickerMinMaxExample, + DatepickerOverviewExample, + DatepickerStartViewExample, + DatepickerTouchExample, + DialogContentExampleDialog, + DialogContentExample, + DialogDataExampleDialog, + DialogDataExample, + DialogElementsExampleDialog, + DialogElementsExample, + DialogOverviewExampleDialog, + DialogOverviewExample, + ExpansionOverviewExample, + ExpansionStepsExample, + GridListDynamicExample, + GridListOverviewExample, + IconOverviewExample, + IconSvgExample, + InputClearableExample, + InputErrorsExample, + InputFormExample, + InputHintExample, + InputOverviewExample, + InputPrefixSuffixExample, + ListOverviewExample, + ListSectionsExample, + ListSelectionExample, + MenuIconsExample, + MenuOverviewExample, + NestedMenuExample, + PaginatorConfigurableExample, + PaginatorOverviewExample, + ProgressBarConfigurableExample, + ProgressBarOverviewExample, + ProgressSpinnerConfigurableExample, + ProgressSpinnerOverviewExample, + RadioNgModelExample, + RadioOverviewExample, + SelectFormExample, + SelectOverviewExample, + SidenavFabExample, + SidenavOverviewExample, + SlideToggleConfigurableExample, + SlideToggleFormsExample, + SlideToggleOverviewExample, + SliderConfigurableExample, + SliderOverviewExample, + PizzaPartyComponent, SnackBarComponentExample, + SnackBarOverviewExample, + SortOverviewExample, + StepperOverviewExample, + TableBasicExample, + TableFilteringExample, + TableHttpExample, + TableOverviewExample, + TablePaginationExample, + TableSortingExample, + TabsOverviewExample, + TabsTemplateLabelExample, + ToolbarMultirowExample, + ToolbarOverviewExample, + TooltipOverviewExample, + TooltipPositionExample +]; diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html new file mode 100644 index 00000000..916086d0 --- /dev/null +++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html @@ -0,0 +1,58 @@ +
+ +
+ +
{{exampleData?.title}}
+ + +
+ +
+ + + + + + +
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+ + +
+
+
diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss b/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss new file mode 100644 index 00000000..8186c4e8 --- /dev/null +++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.scss @@ -0,0 +1,75 @@ +@import "src/app/core/scss/fuse"; + +fuse-example-viewer { + display: block; + padding: 24px 0; + + .example-viewer-wrapper { + border: 1px solid rgba(mat-color($foreground, secondary-text), .03); + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12); + margin: 4px; + h3 { + margin-top: 10px; + } + } + + .example-viewer-header { + align-content: center; + align-items: center; + display: flex; + justify-content: center; + padding: 8px 20px; + color: mat-color($foreground, secondary-text); + background: rgba(mat-color($foreground, secondary-text), .03); + flex: 1 1 auto; + + .example-viewer-title { + flex: 1 1 auto; + } + } + + .example-viewer-source { + + .tab-content { + background: #263238; + + .tab { + position: relative; + + .example-source-copy { + position: absolute; + top: 8px; + display: none; + right: 8px; + + md-icon { + color: rgba(255, 255, 255, 0.87); + } + } + + &:hover { + .example-source-copy { + display: inline-block; + } + } + + .example-source { + display: flex; + padding: 0; + margin: 0; + min-height: 150px; + border-bottom: 1px solid mat-color($foreground, divider); + + > pre { + width: 100%; + } + } + } + } + + } + + .example-viewer-body { + padding: 24px; + } +} diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts b/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts new file mode 100644 index 00000000..8c5f178b --- /dev/null +++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.ts @@ -0,0 +1,110 @@ +import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; +import { MdSnackBar } from '@angular/material'; +import 'rxjs/add/operator/first'; +import { CopierService } from '../../../../../core/components/copier/copier.service'; +import { EXAMPLE_COMPONENTS } from '../example-components'; +import 'prismjs/components/prism-scss'; +import 'prismjs/components/prism-typescript'; +import { fuseAnimations } from '../../../../../core/animations'; + +export interface LiveExample +{ + title: string; + component: any; + additionalFiles?: string[]; + selectorName?: string; +} + +@Component({ + selector : 'fuse-example-viewer', + templateUrl : './example-viewer.html', + styleUrls : ['./example-viewer.scss'], + providers : [CopierService], + encapsulation: ViewEncapsulation.None, + animations : fuseAnimations +}) +export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy +{ + previewRef: ComponentRef; + selectedIndex = 0; + + get container(): ViewContainerRef + { + return this._previewContainer; + } + + set container(value: ViewContainerRef) + { + this._previewContainer = value; + } + + @ViewChild('previewContainer', {read: ViewContainerRef}) private _previewContainer: ViewContainerRef; + + /** String key of the currently displayed example. */ + _example: string; + + exampleData: LiveExample; + + /** Whether the source for the example is being displayed. */ + showSource = false; + + constructor( + private snackbar: MdSnackBar, + private copier: CopierService, + private _resolver: ComponentFactoryResolver + ) + { + } + + get example() + { + return this._example; + } + + @Input() + set example(example: string) + { + if ( example && EXAMPLE_COMPONENTS[example] ) + { + this._example = example; + this.exampleData = EXAMPLE_COMPONENTS[example]; + } + else + { + console.log('MISSING EXAMPLE: ', example); + } + } + + toggleSourceView(): void + { + this.showSource = !this.showSource; + } + + copySource(text: string) + { + if ( this.copier.copyText(text) ) + { + this.snackbar.open('Code copied', '', {duration: 2500}); + } + else + { + this.snackbar.open('Copy failed. Please try again!', '', {duration: 2500}); + } + } + + ngAfterViewInit() + { + setTimeout(() => { + const cmpFactory = this._resolver.resolveComponentFactory(this.exampleData.component); + this.previewRef = this._previewContainer.createComponent(cmpFactory); + }, 0); + } + + ngOnDestroy() + { + if ( this.previewRef ) + { + this.previewRef.destroy(); + } + } +} diff --git a/src/app/main/content/pages/invoices/invoice.service.ts b/src/app/main/content/pages/invoices/invoice.service.ts index b9576806..a0644ad1 100644 --- a/src/app/main/content/pages/invoices/invoice.service.ts +++ b/src/app/main/content/pages/invoices/invoice.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() @@ -11,7 +11,7 @@ export class InvoiceService implements Resolve invoiceOnChanged: BehaviorSubject = new BehaviorSubject({}); - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -43,8 +43,8 @@ export class InvoiceService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/invoice') - .subscribe(timeline => { - this.invoice = timeline.json().data; + .subscribe((timeline: any) => { + this.invoice = timeline.data; this.invoiceOnChanged.next(this.invoice); resolve(this.invoice); }, reject); diff --git a/src/app/main/content/pages/profile/profile.service.ts b/src/app/main/content/pages/profile/profile.service.ts index f623648d..828e4c78 100644 --- a/src/app/main/content/pages/profile/profile.service.ts +++ b/src/app/main/content/pages/profile/profile.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() @@ -15,7 +15,7 @@ export class ProfileService implements Resolve aboutOnChanged: BehaviorSubject = new BehaviorSubject({}); photosVideosOnChanged: BehaviorSubject = new BehaviorSubject({}); - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -49,8 +49,8 @@ export class ProfileService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/profile-timeline') - .subscribe(timeline => { - this.timeline = timeline.json().data; + .subscribe((timeline: any) => { + this.timeline = timeline.data; this.timelineOnChanged.next(this.timeline); resolve(this.timeline); }, reject); @@ -65,8 +65,8 @@ export class ProfileService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/profile-about') - .subscribe(about => { - this.about = about.json().data; + .subscribe((about: any) => { + this.about = about.data; this.aboutOnChanged.next(this.about); resolve(this.about); }, reject); @@ -81,8 +81,8 @@ export class ProfileService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/profile-photos-videos') - .subscribe(photosVideos => { - this.photosVideos = photosVideos.json().data; + .subscribe((photosVideos: any) => { + this.photosVideos = photosVideos.data; this.photosVideosOnChanged.next(this.photosVideos); resolve(this.photosVideos); }, reject); diff --git a/src/app/main/content/pages/search/search.service.ts b/src/app/main/content/pages/search/search.service.ts index 4232f856..1f12303a 100644 --- a/src/app/main/content/pages/search/search.service.ts +++ b/src/app/main/content/pages/search/search.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs/Observable'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() @@ -13,7 +13,7 @@ export class SearchService implements Resolve classicOnChanged: BehaviorSubject = new BehaviorSubject({}); tableOnChanged: BehaviorSubject = new BehaviorSubject({}); - constructor(private http: Http) + constructor(private http: HttpClient) { } @@ -46,8 +46,8 @@ export class SearchService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/search-classic') - .subscribe(classic => { - this.classic = classic.json().data; + .subscribe((classic: any) => { + this.classic = classic.data; this.classicOnChanged.next(this.classic); resolve(this.classic); }, reject); @@ -62,8 +62,8 @@ export class SearchService implements Resolve return new Promise((resolve, reject) => { this.http.get('api/search-table') - .subscribe(table => { - this.table = table.json().data; + .subscribe((table: any) => { + this.table = table.data; this.tableOnChanged.next(this.table); resolve(this.table); }, reject); diff --git a/src/app/main/content/ui/icons/icons.component.html b/src/app/main/content/ui/icons/icons.component.html index a3189c2b..653b4d82 100644 --- a/src/app/main/content/ui/icons/icons.component.html +++ b/src/app/main/content/ui/icons/icons.component.html @@ -12,7 +12,7 @@
Icons
- + link Reference diff --git a/src/app/main/content/ui/icons/icons.component.ts b/src/app/main/content/ui/icons/icons.component.ts index 71c68256..8cd6f752 100644 --- a/src/app/main/content/ui/icons/icons.component.ts +++ b/src/app/main/content/ui/icons/icons.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; @Component({ selector : 'fuse-icons', @@ -12,16 +12,15 @@ export class FuseIconsComponent implements OnInit filteredIcons: string[]; loading = true; - constructor(private http: Http) + constructor(private http: HttpClient) { - } ngOnInit() { this.http.get('api/icons') - .subscribe(icons => { - this.icons = icons.json().data; + .subscribe((icons: any) => { + this.icons = icons.data; this.filteredIcons = this.icons; this.loading = false; }); diff --git a/src/app/main/quick-panel/quick-panel.component.ts b/src/app/main/quick-panel/quick-panel.component.ts index 33ce41bf..b28e2f20 100644 --- a/src/app/main/quick-panel/quick-panel.component.ts +++ b/src/app/main/quick-panel/quick-panel.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { Http } from '@angular/http'; +import { HttpClient } from '@angular/common/http'; @Component({ selector : 'fuse-quick-panel', @@ -14,7 +14,7 @@ export class FuseQuickPanelComponent implements OnInit notes: any[]; events: any[]; - constructor(private http: Http) + constructor(private http: HttpClient) { this.date = new Date(); this.settings = { @@ -28,13 +28,13 @@ export class FuseQuickPanelComponent implements OnInit ngOnInit() { this.http.get('api/quick-panel-notes') - .subscribe(response => { - this.notes = response.json().data; + .subscribe((response: any) => { + this.notes = response.data; }); this.http.get('api/quick-panel-events') - .subscribe(response => { - this.events = response.json().data; + .subscribe((response: any) => { + this.events = response.data; }); } diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts index 9c1210fc..8b22de2d 100644 --- a/src/app/navigation.model.ts +++ b/src/app/navigation.model.ts @@ -343,6 +343,194 @@ export class NavigationModel 'type' : 'group', 'icon' : 'settings_input_component', 'children': [ + { + 'title' : 'Angular Material Elements', + 'type' : 'collapse', + 'icon' : 'layers', + 'children': [ + { + 'title' : 'Form Controls', + 'type' : 'group', + 'children': [ + { + 'title': 'Autocomplete', + 'type' : 'item', + 'url' : '/components/angular-material/autocomplete' + }, + { + 'title': 'Checkbox', + 'type' : 'item', + 'url' : '/components/angular-material/checkbox' + }, + { + 'title': 'Datepicker', + 'type' : 'item', + 'url' : '/components/angular-material/datepicker' + }, + { + 'title': 'Input', + 'type' : 'item', + 'url' : '/components/angular-material/input' + }, + { + 'title': 'Radio button', + 'type' : 'item', + 'url' : '/components/angular-material/radio-button' + }, + { + 'title': 'Select', + 'type' : 'item', + 'url' : '/components/angular-material/select' + }, + { + 'title': 'Slider', + 'type' : 'item', + 'url' : '/components/angular-material/slider' + }, + { + 'title': 'Slide toggle', + 'type' : 'item', + 'url' : '/components/angular-material/slide-toggle' + } + ] + }, + { + 'title' : 'Navigation', + 'type' : 'group', + 'children': [ + { + 'title': 'Menu', + 'type' : 'item', + 'url' : '/components/angular-material/menu' + }, + { + 'title': 'Sidenav', + 'type' : 'item', + 'url' : '/components/angular-material/sidenav' + }, + { + 'title': 'Toolbar', + 'type' : 'item', + 'url' : '/components/angular-material/toolbar' + } + ] + }, + { + 'title' : 'Layout', + 'type' : 'group', + 'children': [ + { + 'title': 'List', + 'type' : 'item', + 'url' : '/components/angular-material/list' + }, + { + 'title': 'Grid list', + 'type' : 'item', + 'url' : '/components/angular-material/grid-list' + }, + { + 'title': 'Card', + 'type' : 'item', + 'url' : '/components/angular-material/card' + }, + { + 'title': 'Stepper', + 'type' : 'item', + 'url' : '/components/angular-material/stepper' + }, + { + 'title': 'Tabs', + 'type' : 'item', + 'url' : '/components/angular-material/tabs' + }, + { + 'title': 'Expansion Panel', + 'type' : 'item', + 'url' : '/components/angular-material/expansion-panel' + } + ] + }, + { + 'title' : 'Buttons & Indicators', + 'type' : 'group', + 'children': [ + { + 'title': 'Button', + 'type' : 'item', + 'url' : '/components/angular-material/button' + }, + { + 'title': 'Button toggle', + 'type' : 'item', + 'url' : '/components/angular-material/button-toggle' + }, + { + 'title': 'Chips', + 'type' : 'item', + 'url' : '/components/angular-material/chips' + }, + { + 'title': 'Icon', + 'type' : 'item', + 'url' : '/components/angular-material/icon' + }, + { + 'title': 'Progress spinner', + 'type' : 'item', + 'url' : '/components/angular-material/progress-spinner' + }, + { + 'title': 'Progress bar', + 'type' : 'item', + 'url' : '/components/angular-material/progress-bar' + } + ] + }, + { + 'title' : 'Popups & Modals', + 'type' : 'group', + 'children': [ + { + 'title': 'Dialog', + 'type' : 'item', + 'url' : '/components/angular-material/dialog' + }, + { + 'title': 'Tooltip', + 'type' : 'item', + 'url' : '/components/angular-material/tooltip' + }, + { + 'title': 'Snackbar', + 'type' : 'item', + 'url' : '/components/angular-material/snackbar' + } + ] + }, + { + 'title' : 'Data table', + 'type' : 'group', + 'children': [ + { + 'title': 'Table', + 'type' : 'item', + 'url' : '/components/angular-material/data-table' + }, + { + 'title': 'Sort header', + 'type' : 'item', + 'url' : '/components/angular-material/sort-header' + }, + { + 'title': 'Paginator', + 'type' : 'item', + 'url' : '/components/angular-material/paginator' + } + ] + } + ] + }, { 'title': 'Countdown', 'type' : 'item', diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html new file mode 100644 index 00000000..176d13dc --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html @@ -0,0 +1,10 @@ +
+ + + + + {{ option.name }} + + + +
diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts new file mode 100644 index 00000000..aaeeb5ce --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts @@ -0,0 +1,49 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/operator/map'; + +export class User { + constructor(public name: string) { } +} + +/** + * @title Display value autocomplete + */ +@Component({ + selector: 'autocomplete-display-example', + templateUrl: 'autocomplete-display-example.html', + styleUrls: ['autocomplete-display-example.css'] +}) +export class AutocompleteDisplayExample { + + myControl = new FormControl(); + + options = [ + new User('Mary'), + new User('Shelley'), + new User('Igor') + ]; + + filteredOptions: Observable; + + ngOnInit() { + this.filteredOptions = this.myControl.valueChanges + .startWith(null) + .map(user => user && typeof user === 'object' ? user.name : user) + .map(name => name ? this.filter(name) : this.options.slice()); + } + + filter(name: string): User[] { + return this.options.filter(option => + option.name.toLowerCase().indexOf(name.toLowerCase()) === 0); + } + + displayFn(user: User): string { + if (user){ + return user.name; + } + } + +} diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html new file mode 100644 index 00000000..13c64139 --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html @@ -0,0 +1,10 @@ +
+ + + + + {{ option }} + + + +
diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts new file mode 100644 index 00000000..dde59515 --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts @@ -0,0 +1,38 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/operator/map'; + +/** + * @title Filter autocomplete + */ +@Component({ + selector: 'autocomplete-filter-example', + templateUrl: 'autocomplete-filter-example.html', + styleUrls: ['autocomplete-filter-example.css'] +}) +export class AutocompleteFilterExample { + + myControl: FormControl = new FormControl(); + + options = [ + 'One', + 'Two', + 'Three' + ]; + + filteredOptions: Observable; + + ngOnInit() { + this.filteredOptions = this.myControl.valueChanges + .startWith(null) + .map(val => val ? this.filter(val) : this.options.slice()); + } + + filter(val: string): string[] { + return this.options.filter(option => + option.toLowerCase().indexOf(val.toLowerCase()) === 0); + } + +} diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html new file mode 100644 index 00000000..78370e44 --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html @@ -0,0 +1,20 @@ +
+ + + + + + {{ state.name }} | + Population: {{state.population}} + + + + +
+ + + Disable Input? + +
diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts new file mode 100644 index 00000000..ee2a166b --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts @@ -0,0 +1,59 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; + +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/operator/map'; + +/** + * @title Autocomplete overview + */ +@Component({ + selector: 'autocomplete-overview-example', + templateUrl: 'autocomplete-overview-example.html', + styleUrls: ['autocomplete-overview-example.css'] +}) +export class AutocompleteOverviewExample { + stateCtrl: FormControl; + filteredStates: Observable; + + states: any[] = [ + { + name: 'Arkansas', + population: '2.978M', + // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg + flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg' + }, + { + name: 'California', + population: '39.14M', + // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg + flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg' + }, + { + name: 'Florida', + population: '20.27M', + // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg + flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg' + }, + { + name: 'Texas', + population: '27.47M', + // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg + flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg' + } + ]; + + constructor() { + this.stateCtrl = new FormControl(); + this.filteredStates = this.stateCtrl.valueChanges + .startWith(null) + .map(state => state ? this.filterStates(state) : this.states.slice()); + } + + filterStates(name: string) { + return this.states.filter(state => + state.name.toLowerCase().indexOf(name.toLowerCase()) === 0); + } + +} diff --git a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html new file mode 100644 index 00000000..3c440f4b --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html @@ -0,0 +1,10 @@ +
+ + + + + {{ option }} + + + +
diff --git a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts new file mode 100644 index 00000000..c3f1bcb6 --- /dev/null +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts @@ -0,0 +1,22 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; + +/** + * @title Simple autocomplete + */ +@Component({ + selector: 'autocomplete-simple-example', + templateUrl: 'autocomplete-simple-example.html', + styleUrls: ['autocomplete-simple-example.css'] +}) +export class AutocompleteSimpleExample { + + myControl: FormControl = new FormControl(); + + options = [ + 'One', + 'Two', + 'Three' + ]; + +} diff --git a/src/assets/angular-material-examples/button-overview/button-overview-example.css b/src/assets/angular-material-examples/button-overview/button-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/button-overview/button-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/button-overview/button-overview-example.html b/src/assets/angular-material-examples/button-overview/button-overview-example.html new file mode 100644 index 00000000..56f6fa44 --- /dev/null +++ b/src/assets/angular-material-examples/button-overview/button-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/angular-material-examples/button-overview/button-overview-example.ts b/src/assets/angular-material-examples/button-overview/button-overview-example.ts new file mode 100644 index 00000000..9dbde687 --- /dev/null +++ b/src/assets/angular-material-examples/button-overview/button-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic buttons + */ +@Component({ + selector: 'button-overview-example', + templateUrl: 'button-overview-example.html', +}) +export class ButtonOverviewExample {} diff --git a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css new file mode 100644 index 00000000..d21ca3ce --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.css @@ -0,0 +1,3 @@ +.example-selected-value { + margin: 15px 0; +} diff --git a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html new file mode 100644 index 00000000..dd5cd277 --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html @@ -0,0 +1,15 @@ + + + format_align_left + + + format_align_center + + + format_align_right + + + format_align_justify + + +
Selected value: {{group.value}}
diff --git a/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts new file mode 100644 index 00000000..efe1c7cc --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Exclusive selection + */ +@Component({ + selector: 'button-toggle-exclusive-example', + templateUrl: 'button-toggle-exclusive-example.html', + styleUrls: ['button-toggle-exclusive-example.css'], +}) +export class ButtonToggleExclusiveExample {} diff --git a/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.css b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html new file mode 100644 index 00000000..bb215d5b --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.html @@ -0,0 +1 @@ +Toggle me! diff --git a/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts new file mode 100644 index 00000000..c8afb437 --- /dev/null +++ b/src/assets/angular-material-examples/button-toggle-overview/button-toggle-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic button-toggles + */ +@Component({ + selector: 'button-toggle-overview-example', + templateUrl: 'button-toggle-overview-example.html', +}) +export class ButtonToggleOverviewExample {} diff --git a/src/assets/angular-material-examples/button-types/button-types-example.css b/src/assets/angular-material-examples/button-types/button-types-example.css new file mode 100644 index 00000000..9771bda6 --- /dev/null +++ b/src/assets/angular-material-examples/button-types/button-types-example.css @@ -0,0 +1,5 @@ +.example-button-row { + display: flex; + align-items: center; + justify-content: space-around; +} diff --git a/src/assets/angular-material-examples/button-types/button-types-example.html b/src/assets/angular-material-examples/button-types/button-types-example.html new file mode 100644 index 00000000..1a9b5b20 --- /dev/null +++ b/src/assets/angular-material-examples/button-types/button-types-example.html @@ -0,0 +1,64 @@ +

Basic Buttons

+
+ + + + + + Link +
+ +

Raised Buttons

+
+ + + + + + Link +
+ +

Icon Buttons

+
+ + + + + +
+ +

Fab Buttons

+
+ + + + + + + Link +
+ +

Mini Fab Buttons

+
+ + + + + + + Link +
diff --git a/src/assets/angular-material-examples/button-types/button-types-example.ts b/src/assets/angular-material-examples/button-types/button-types-example.ts new file mode 100644 index 00000000..525729b2 --- /dev/null +++ b/src/assets/angular-material-examples/button-types/button-types-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Button varieties + */ +@Component({ + selector: 'button-types-example', + templateUrl: 'button-types-example.html', + styleUrls: ['button-types-example.css'], +}) +export class ButtonTypesExample {} diff --git a/src/assets/angular-material-examples/card-fancy/card-fancy-example.css b/src/assets/angular-material-examples/card-fancy/card-fancy-example.css new file mode 100644 index 00000000..e0d1c50e --- /dev/null +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.css @@ -0,0 +1,8 @@ +.example-card { + width: 400px; +} + +.example-header-image { + background-image: url('/assets/images/examples/shiba1.jpg'); + background-size: cover; +} diff --git a/src/assets/angular-material-examples/card-fancy/card-fancy-example.html b/src/assets/angular-material-examples/card-fancy/card-fancy-example.html new file mode 100644 index 00000000..d7001d5d --- /dev/null +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.html @@ -0,0 +1,19 @@ + + +
+ Shiba Inu + Dog Breed + + Photo of a Shiba Inu + +

+ The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. + A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally + bred for hunting. +

+ + + + + + diff --git a/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts b/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts new file mode 100644 index 00000000..92826ad0 --- /dev/null +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Card with multiple sections + */ +@Component({ + selector: 'card-fancy-example', + templateUrl: 'card-fancy-example.html', + styleUrls: ['card-fancy-example.css'], +}) +export class CardFancyExample {} diff --git a/src/assets/angular-material-examples/card-overview/card-overview-example.css b/src/assets/angular-material-examples/card-overview/card-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/card-overview/card-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/card-overview/card-overview-example.html b/src/assets/angular-material-examples/card-overview/card-overview-example.html new file mode 100644 index 00000000..5e0c2b6d --- /dev/null +++ b/src/assets/angular-material-examples/card-overview/card-overview-example.html @@ -0,0 +1 @@ +Simple card diff --git a/src/assets/angular-material-examples/card-overview/card-overview-example.ts b/src/assets/angular-material-examples/card-overview/card-overview-example.ts new file mode 100644 index 00000000..f87f9401 --- /dev/null +++ b/src/assets/angular-material-examples/card-overview/card-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic cards + */ +@Component({ + selector: 'card-overview-example', + templateUrl: 'card-overview-example.html', +}) +export class CardOverviewExample {} diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css new file mode 100644 index 00000000..527bb2a3 --- /dev/null +++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.css @@ -0,0 +1,39 @@ +/* Structure */ +.example-container { + display: flex; + flex-direction: column; + min-width: 300px; +} + +/* + * Styles to make the demo's cdk-table match the material design spec + * https://material.io/guidelines/components/data-tables.html + */ +.example-table { + flex: 1 1 auto; + overflow: auto; + max-height: 500px; +} + +.example-header-row, .example-row { + display: flex; + border-bottom: 1px solid #ccc; + align-items: center; + height: 32px; + padding: 0 8px; +} + +.example-cell, .example-header-cell { + flex: 1; +} + +.example-header-cell { + font-size: 12px; + font-weight: bold; + color: rgba(0, 0, 0, 0.54); +} + +.example-cell { + font-size: 13px; + color: rgba(0, 0, 0, 0.87); +} diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html new file mode 100644 index 00000000..df20a4d1 --- /dev/null +++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html @@ -0,0 +1,36 @@ +
+ + + + + + ID + {{row.id}} + + + + + Progress + {{row.progress}}% + + + + + Name + {{row.name}} + + + + + Color + + {{row.color}} + + + + + + +
diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts new file mode 100644 index 00000000..80975595 --- /dev/null +++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts @@ -0,0 +1,92 @@ +import {Component} from '@angular/core'; +import {DataSource} from '@angular/cdk/collections'; +import {BehaviorSubject} from 'rxjs/BehaviorSubject'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/observable/merge'; +import 'rxjs/add/operator/map'; + +/** + * @title Basic CDK data-table + */ +@Component({ + selector: 'cdk-table-basic-example', + styleUrls: ['cdk-table-basic-example.css'], + templateUrl: 'cdk-table-basic-example.html', +}) +export class CdkTableBasicExample { + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; + + ngOnInit() { + this.dataSource = new ExampleDataSource(this.exampleDatabase); + } +} + +/** Constants used to fill up our data base. */ +const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; +const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; + +export interface UserData { + id: string; + name: string; + progress: string; + color: string; +} + +/** An example database that the data source uses to retrieve data for the table. */ +export class ExampleDatabase { + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); + get data(): UserData[] { return this.dataChange.value; } + + constructor() { + // Fill up the database with 100 users. + for (let i = 0; i < 100; i++) { this.addUser(); } + } + + /** Adds a new user to the database. */ + addUser() { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } + + /** Builds and returns a new User. */ + private createNewUser() { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id: (this.data.length + 1).toString(), + name: name, + progress: Math.round(Math.random() * 100).toString(), + color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } +} + +/** + * Data source to provide what data should be rendered in the table. Note that the data source + * can retrieve its data in any way. In this case, the data source is provided a reference + * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage + * the underlying data. Instead, it only needs to take the data and send the table exactly what + * should be rendered. + */ +export class ExampleDataSource extends DataSource { + constructor(private _exampleDatabase: ExampleDatabase) { + super(); + } + + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable { + return this._exampleDatabase.dataChange; + } + + disconnect() {} +} diff --git a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css new file mode 100644 index 00000000..558293fb --- /dev/null +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 0 10px; +} diff --git a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html new file mode 100644 index 00000000..7b8fb4c2 --- /dev/null +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html @@ -0,0 +1,40 @@ + + +

Checkbox configuration

+ +
+ Checked + Indeterminate +
+ +
+ + + Start + End + +
+ +
+ Disabled +
+ + + + + +

Result

+ +
+ + I'm a checkbox + +
+ + + diff --git a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts new file mode 100644 index 00000000..f4bdf570 --- /dev/null +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts @@ -0,0 +1,16 @@ +import {Component} from '@angular/core'; + +/** + * @title Configurable checkbox + */ +@Component({ + selector: 'checkbox-configurable-example', + templateUrl: 'checkbox-configurable-example.html', + styleUrls: ['checkbox-configurable-example.css'], +}) +export class CheckboxConfigurableExample { + checked = false; + indeterminate = false; + align = 'start'; + disabled = false; +} diff --git a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.css b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html new file mode 100644 index 00000000..c301bbe5 --- /dev/null +++ b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html @@ -0,0 +1 @@ +Check me! diff --git a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts new file mode 100644 index 00000000..2c822582 --- /dev/null +++ b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic checkboxes + */ +@Component({ + selector: 'checkbox-overview-example', + templateUrl: 'checkbox-overview-example.html', +}) +export class CheckboxOverviewExample {} diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.css b/src/assets/angular-material-examples/chips-input/chips-input-example.css new file mode 100644 index 00000000..505a4c66 --- /dev/null +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.css @@ -0,0 +1,3 @@ +.demo-chip-list { + width: 100%; +} diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.html b/src/assets/angular-material-examples/chips-input/chips-input-example.html new file mode 100644 index 00000000..f80ef315 --- /dev/null +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.html @@ -0,0 +1,14 @@ + + + + {{fruit.name}} + cancel + + + + diff --git a/src/assets/angular-material-examples/chips-input/chips-input-example.ts b/src/assets/angular-material-examples/chips-input/chips-input-example.ts new file mode 100644 index 00000000..0e96d086 --- /dev/null +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.ts @@ -0,0 +1,52 @@ +import {Component} from '@angular/core'; +import {MdChipInputEvent, ENTER} from '@angular/material'; + +const COMMA = 188; + +/** + * @title Chips with input + */ +@Component({ + selector: 'chips-input-example', + templateUrl: 'chips-input-example.html', + styleUrls: ['chips-input-example.css'] +}) +export class ChipsInputExample { + visible: boolean = true; + selectable: boolean = true; + removable: boolean = true; + addOnBlur: boolean = true; + + // Enter, comma + separatorKeysCodes = [ENTER, COMMA]; + + fruits = [ + { name: 'Lemon' }, + { name: 'Lime' }, + { name: 'Apple' }, + ]; + + + add(event: MdChipInputEvent): void { + let input = event.input; + let value = event.value; + + // Add our person + if ((value || '').trim()) { + this.fruits.push({ name: value.trim() }); + } + + // Reset the input value + if (input) { + input.value = ''; + } + } + + remove(fruit: any): void { + let index = this.fruits.indexOf(fruit); + + if (index >= 0) { + this.fruits.splice(index, 1); + } + } +} diff --git a/src/assets/angular-material-examples/chips-overview/chips-overview-example.css b/src/assets/angular-material-examples/chips-overview/chips-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/chips-overview/chips-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/chips-overview/chips-overview-example.html b/src/assets/angular-material-examples/chips-overview/chips-overview-example.html new file mode 100644 index 00000000..bb041056 --- /dev/null +++ b/src/assets/angular-material-examples/chips-overview/chips-overview-example.html @@ -0,0 +1,6 @@ + + One fish + Two fish + Primary fish + Accent fish + diff --git a/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts b/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts new file mode 100644 index 00000000..68c8c63d --- /dev/null +++ b/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic chips + */ +@Component({ + selector: 'chips-overview-example', + templateUrl: 'chips-overview-example.html', + styleUrls: ['chips-overview-example.css'], +}) +export class ChipsOverviewExample {} diff --git a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css new file mode 100644 index 00000000..dfb2f8c0 --- /dev/null +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css @@ -0,0 +1,3 @@ +md-chip { + max-width: 200px; +} diff --git a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html new file mode 100644 index 00000000..27677b1c --- /dev/null +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html @@ -0,0 +1,7 @@ + + + {{chipColor.name}} + + diff --git a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts new file mode 100644 index 00000000..816c2264 --- /dev/null +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts @@ -0,0 +1,20 @@ +import {Component} from '@angular/core'; + +/** + * @title Stacked chips + */ +@Component({ + selector: 'chips-stacked-example', + templateUrl: 'chips-stacked-example.html', + styleUrls: ['chips-stacked-example.css'], +}) +export class ChipsStackedExample { + color: string; + + availableColors = [ + { name: 'none', color: '' }, + { name: 'Primary', color: 'primary' }, + { name: 'Accent', color: 'accent' }, + { name: 'Warn', color: 'warn' } + ]; +} diff --git a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html new file mode 100644 index 00000000..a41723d8 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts new file mode 100644 index 00000000..cf4ce8ad --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; + +/** + * @title Datepicker API + */ +@Component({ + selector: 'datepicker-api-example', + templateUrl: 'datepicker-api-example.html', + styleUrls: ['datepicker-api-example.css'], +}) +export class DatepickerApiExample { +} diff --git a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.css b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html new file mode 100644 index 00000000..4fc367db --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts new file mode 100644 index 00000000..a2fe6d13 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts @@ -0,0 +1,17 @@ +import {Component} from '@angular/core'; + +/** + * @title Datepicker Filter + */ +@Component({ + selector: 'datepicker-filter-example', + templateUrl: 'datepicker-filter-example.html', + styleUrls: ['datepicker-filter-example.css'], +}) +export class DatepickerFilterExample { + myFilter = (d: Date): boolean => { + const day = d.getDay(); + // Prevent Saturday and Sunday from being selected. + return day !== 0 && day !== 6; + } +} diff --git a/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.css b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html new file mode 100644 index 00000000..216fcd26 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts new file mode 100644 index 00000000..fea707bb --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; + +/** + * @title Datepicker Min Max + */ +@Component({ + selector: 'datepicker-min-max-example', + templateUrl: 'datepicker-min-max-example.html', + styleUrls: ['datepicker-min-max-example.css'], +}) +export class DatepickerMinMaxExample { + minDate = new Date(2000, 0, 1); + maxDate = new Date(2020, 0, 1); +} diff --git a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.css b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html new file mode 100644 index 00000000..41a2ba3c --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts new file mode 100644 index 00000000..b9dde7ca --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic datepicker + */ +@Component({ + selector: 'datepicker-overview-example', + templateUrl: 'datepicker-overview-example.html', + styleUrls: ['datepicker-overview-example.css'], +}) +export class DatepickerOverviewExample {} diff --git a/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.css b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html new file mode 100644 index 00000000..0391c9be --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts new file mode 100644 index 00000000..cb76dba2 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +/** + * @title Datepicker start date + */ +@Component({ + selector: 'datepicker-start-view-example', + templateUrl: 'datepicker-start-view-example.html', + styleUrls: ['datepicker-start-view-example.css'], +}) +export class DatepickerStartViewExample { + startDate = new Date(1990, 0, 1); +} diff --git a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.css b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html new file mode 100644 index 00000000..a9579710 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts new file mode 100644 index 00000000..df5daa92 --- /dev/null +++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; + +/** + * @title Datepicker Touch + */ +@Component({ + selector: 'datepicker-touch-example', + templateUrl: 'datepicker-touch-example.html', + styleUrls: ['datepicker-touch-example.css'], +}) +export class DatepickerTouchExample { +} diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html b/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html new file mode 100644 index 00000000..46c978da --- /dev/null +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html @@ -0,0 +1,25 @@ +

Install Angular

+ +

DEVELOP ACROSS ALL PLATFORMS

+

Learn one way to build applications with Angular and reuse your code and abilities to build + apps for any deployment target. For web, mobile web, native mobile and native desktop.

+ +

SPEED & PERFORMANCE

+

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web + Workers and server-side rendering. Angular puts you in control over scalability. Meet huge data requirements + by building data models on RxJS, Immutable.js or another push-model.

+ +

INCREDIBLE TOOLING

+

Build features quickly with simple, declarative templates. Extend the template language with your own + components and use a wide array of existing components. Get immediate Angular-specific help and feedback + with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather + than trying to make the code work.

+ +

LOVED BY MILLIONS

+

From prototype through global deployment, Angular delivers the productivity and scalable infrastructure + that supports Google's largest applications.

+ + + + + diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example.css b/src/assets/angular-material-examples/dialog-content/dialog-content-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example.html b/src/assets/angular-material-examples/dialog-content/dialog-content-example.html new file mode 100644 index 00000000..176a3c41 --- /dev/null +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts new file mode 100644 index 00000000..39b0d453 --- /dev/null +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts @@ -0,0 +1,29 @@ +import {Component} from '@angular/core'; +import {MdDialog} from '@angular/material'; + +/** + * @title Dialog with header, scrollable content and actions + */ +@Component({ + selector: 'dialog-content-example', + templateUrl: 'dialog-content-example.html', +}) +export class DialogContentExample { + constructor(public dialog: MdDialog) {} + + openDialog() { + const dialogRef = this.dialog.open(DialogContentExampleDialog, { + height: '350px' + }); + + dialogRef.afterClosed().subscribe(result => { + console.log(`Dialog result: ${result}`); + }); + } +} + +@Component({ + selector: 'dialog-content-example-dialog', + templateUrl: 'dialog-content-example-dialog.html', +}) +export class DialogContentExampleDialog {} diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html b/src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html new file mode 100644 index 00000000..aa9b428e --- /dev/null +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example-dialog.html @@ -0,0 +1,15 @@ +

Favorite Animal

+
+ My favorite animal is: +
    +
  • + ✓ Panda +
    • +
  • + ✓ Unicorn +
    • +
  • + ✓ Lion +
    • +
+
diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example.css b/src/assets/angular-material-examples/dialog-data/dialog-data-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example.html b/src/assets/angular-material-examples/dialog-data/dialog-data-example.html new file mode 100644 index 00000000..176a3c41 --- /dev/null +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts new file mode 100644 index 00000000..bdd0f4bc --- /dev/null +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts @@ -0,0 +1,29 @@ +import {Component, Inject} from '@angular/core'; +import {MdDialog, MD_DIALOG_DATA} from '@angular/material'; + +/** + * @title Injecting data when opening a dialog + */ +@Component({ + selector: 'dialog-data-example', + templateUrl: 'dialog-data-example.html', +}) +export class DialogDataExample { + constructor(public dialog: MdDialog) {} + + openDialog() { + this.dialog.open(DialogDataExampleDialog, { + data: { + animal: 'panda' + } + }); + } +} + +@Component({ + selector: 'dialog-data-example-dialog', + templateUrl: 'dialog-data-example-dialog.html', +}) +export class DialogDataExampleDialog { + constructor(@Inject(MD_DIALOG_DATA) public data: any) {} +} diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html new file mode 100644 index 00000000..5238b0eb --- /dev/null +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example-dialog.html @@ -0,0 +1,5 @@ +

Dialog with elements

+
This dialog showcases the title, close, content and actions elements.
+
+ +
diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.css b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html new file mode 100644 index 00000000..40637c4b --- /dev/null +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts new file mode 100644 index 00000000..37f3703e --- /dev/null +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts @@ -0,0 +1,24 @@ +import {Component} from '@angular/core'; +import {MdDialog} from '@angular/material'; + +/** + * @title Dialog elements + */ +@Component({ + selector: 'dialog-elements-example', + templateUrl: 'dialog-elements-example.html', +}) +export class DialogElementsExample { + constructor(public dialog: MdDialog) { } + + openDialog() { + this.dialog.open(DialogElementsExampleDialog); + } +} + + +@Component({ + selector: 'dialog-elements-example-dialog', + templateUrl: 'dialog-elements-example-dialog.html', +}) +export class DialogElementsExampleDialog { } diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example-dialog.html b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example-dialog.html new file mode 100644 index 00000000..b4214fbf --- /dev/null +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example-dialog.html @@ -0,0 +1,11 @@ +

Hi {{data.name}}

+
+

What's your favorite animal?

+ + + +
+
+ + +
diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.css b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html new file mode 100644 index 00000000..b6911190 --- /dev/null +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html @@ -0,0 +1,13 @@ +
    +
  1. + + + +
    2. +
  2. + +
    3. +
  3. + You chose: {{animal}} +
    4. +
diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts new file mode 100644 index 00000000..5dec934d --- /dev/null +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts @@ -0,0 +1,46 @@ +import {Component, Inject} from '@angular/core'; +import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; + +/** + * @title Dialog Overview + */ +@Component({ + selector: 'dialog-overview-example', + templateUrl: 'dialog-overview-example.html' +}) +export class DialogOverviewExample { + + animal: string; + name: string; + + constructor(public dialog: MdDialog) {} + + openDialog(): void { + let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { + width: '250px', + data: { name: this.name, animal: this.animal } + }); + + dialogRef.afterClosed().subscribe(result => { + console.log('The dialog was closed'); + this.animal = result; + }); + } + +} + +@Component({ + selector: 'dialog-overview-example-dialog', + templateUrl: 'dialog-overview-example-dialog.html', +}) +export class DialogOverviewExampleDialog { + + constructor( + public dialogRef: MdDialogRef, + @Inject(MD_DIALOG_DATA) public data: any) { } + + onNoClick(): void { + this.dialogRef.close(); + } + +} diff --git a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.css b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html new file mode 100644 index 00000000..48c0cc50 --- /dev/null +++ b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html @@ -0,0 +1,18 @@ + + + + Personal data + + + Type your name and age + + + + + + + + + + + diff --git a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts new file mode 100644 index 00000000..75cff7cc --- /dev/null +++ b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic expansion panel + */ +@Component({ + selector: 'expansion-overview-example', + templateUrl: 'expansion-overview-example.html', +}) +export class ExpansionOverviewExample {} diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css new file mode 100644 index 00000000..7a97afef --- /dev/null +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css @@ -0,0 +1,9 @@ +.example-headers-align .mat-expansion-panel-header-title, +.example-headers-align .mat-expansion-panel-header-description { + flex-basis: 0; +} + +.example-headers-align .mat-expansion-panel-header-description { + justify-content: space-between; + align-items: center; +} diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html new file mode 100644 index 00000000..e81ede44 --- /dev/null +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html @@ -0,0 +1,69 @@ + + + + + Personal data + + + Type your name and age + account_circle + + + + + + + + + + + + + + + + + + + + Destination + + + Type the country name + map + + + + + + + + + + + + + + + + + Day of the trip + + + Inform the date you wish to travel + date_range + + + + + + + + + + + + + + + diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts new file mode 100644 index 00000000..e302175f --- /dev/null +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts @@ -0,0 +1,25 @@ +import {Component} from '@angular/core'; + +/** + * @title Expansion panel as accordion + */ +@Component({ + selector: 'expansion-steps-example', + templateUrl: 'expansion-steps-example.html', + styleUrls: ['expansion-steps-example.css'] +}) +export class ExpansionStepsExample { + step = 0; + + setStep(index: number) { + this.step = index; + } + + nextStep() { + this.step++; + } + + prevStep() { + this.step--; + } +} diff --git a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.css b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.html b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.html new file mode 100644 index 00000000..19c84dd5 --- /dev/null +++ b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.html @@ -0,0 +1,9 @@ + + + {{tile.text}} + + diff --git a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts new file mode 100644 index 00000000..21dc729a --- /dev/null +++ b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts @@ -0,0 +1,17 @@ +import {Component} from '@angular/core'; + +/** + * @title Dynamic grid-list + */ +@Component({ + selector: 'grid-list-dynamic-example', + templateUrl: 'grid-list-dynamic-example.html', +}) +export class GridListDynamicExample { + tiles = [ + {text: 'One', cols: 3, rows: 1, color: 'lightblue'}, + {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'}, + {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, + {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'}, + ]; +} diff --git a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.css b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.css new file mode 100644 index 00000000..2598f58f --- /dev/null +++ b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.css @@ -0,0 +1,3 @@ +md-grid-tile { + background: lightblue; +} diff --git a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.html b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.html new file mode 100644 index 00000000..6651887f --- /dev/null +++ b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.html @@ -0,0 +1,6 @@ + + 1 + 2 + 3 + 4 + diff --git a/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.ts b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.ts new file mode 100644 index 00000000..dd03daef --- /dev/null +++ b/src/assets/angular-material-examples/grid-list-overview/grid-list-overview-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic grid-list + */ +@Component({ + selector: 'grid-list-overview-example', + styleUrls: ['grid-list-overview-example.css'], + templateUrl: 'grid-list-overview-example.html', +}) +export class GridListOverviewExample {} diff --git a/src/assets/angular-material-examples/icon-overview/icon-overview-example.css b/src/assets/angular-material-examples/icon-overview/icon-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/icon-overview/icon-overview-example.html b/src/assets/angular-material-examples/icon-overview/icon-overview-example.html new file mode 100644 index 00000000..dd46af80 --- /dev/null +++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.html @@ -0,0 +1 @@ +home diff --git a/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts b/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts new file mode 100644 index 00000000..f81416f3 --- /dev/null +++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic icons + */ +@Component({ + selector: 'icon-overview-example', + templateUrl: 'icon-overview-example.html', +}) +export class IconOverviewExample {} diff --git a/src/assets/angular-material-examples/icon-svg/icon-svg-example.css b/src/assets/angular-material-examples/icon-svg/icon-svg-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/icon-svg/icon-svg-example.html b/src/assets/angular-material-examples/icon-svg/icon-svg-example.html new file mode 100644 index 00000000..ac74cf79 --- /dev/null +++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts b/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts new file mode 100644 index 00000000..7bf6a01a --- /dev/null +++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; +import {DomSanitizer} from '@angular/platform-browser'; +import {MdIconRegistry} from '@angular/material'; + +/** + * @title SVG icons + */ +@Component({ + selector: 'icon-svg-example', + templateUrl: 'icon-svg-example.html', +}) +export class IconSvgExample { + constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) { + iconRegistry.addSvgIcon( + 'thumbs-up', + sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg')); + } +} diff --git a/src/assets/angular-material-examples/input-clearable/input-clearable-example.css b/src/assets/angular-material-examples/input-clearable/input-clearable-example.css new file mode 100644 index 00000000..55dcc576 --- /dev/null +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.css @@ -0,0 +1,3 @@ +.example-form-field { + width: 200px; +} diff --git a/src/assets/angular-material-examples/input-clearable/input-clearable-example.html b/src/assets/angular-material-examples/input-clearable/input-clearable-example.html new file mode 100644 index 00000000..c8be13f9 --- /dev/null +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.html @@ -0,0 +1,6 @@ + + + + diff --git a/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts b/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts new file mode 100644 index 00000000..3b469528 --- /dev/null +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +/** + * @title Input Clearable + */ +@Component({ + selector: 'input-clearable-example', + templateUrl: './input-clearable-example.html', + styleUrls: ['./input-clearable-example.css'], +}) +export class InputClearableExample { + value = 'Clear me'; +} diff --git a/src/assets/angular-material-examples/input-errors/input-errors-example.css b/src/assets/angular-material-examples/input-errors/input-errors-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/input-errors/input-errors-example.html b/src/assets/angular-material-examples/input-errors/input-errors-example.html new file mode 100644 index 00000000..4434b6ea --- /dev/null +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.html @@ -0,0 +1,11 @@ +
+ + + + Please enter a valid email address + + + Email is required + + +
diff --git a/src/assets/angular-material-examples/input-errors/input-errors-example.ts b/src/assets/angular-material-examples/input-errors/input-errors-example.ts new file mode 100644 index 00000000..8a2dbb86 --- /dev/null +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.ts @@ -0,0 +1,20 @@ +import {Component} from '@angular/core'; +import {FormControl, Validators} from '@angular/forms'; + +const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; + +/** + * @title Input Errors + */ +@Component({ + selector: 'input-errors-example', + templateUrl: 'input-errors-example.html', + styleUrls: ['input-errors-example.css'], +}) +export class InputErrorsExample { + + emailFormControl = new FormControl('', [ + Validators.required, + Validators.pattern(EMAIL_REGEX)]); + +} diff --git a/src/assets/angular-material-examples/input-form/input-form-example.css b/src/assets/angular-material-examples/input-form/input-form-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/input-form/input-form-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/input-form/input-form-example.html b/src/assets/angular-material-examples/input-form/input-form-example.html new file mode 100644 index 00000000..f7abf808 --- /dev/null +++ b/src/assets/angular-material-examples/input-form/input-form-example.html @@ -0,0 +1,36 @@ +
+ + + + + + + +
+ + + +
+ +

+ + + + + + +

+ + + + + +
+ + + + + + {{postalCode.value.length}} / 5 +
+
diff --git a/src/assets/angular-material-examples/input-form/input-form-example.ts b/src/assets/angular-material-examples/input-form/input-form-example.ts new file mode 100644 index 00000000..192f9cae --- /dev/null +++ b/src/assets/angular-material-examples/input-form/input-form-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Inputs in a form + */ +@Component({ + selector: 'input-form-example', + templateUrl: 'input-form-example.html', + styleUrls: ['input-form-example.css'], +}) +export class InputFormExample {} diff --git a/src/assets/angular-material-examples/input-hint/input-hint-example.css b/src/assets/angular-material-examples/input-hint/input-hint-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/input-hint/input-hint-example.html b/src/assets/angular-material-examples/input-hint/input-hint-example.html new file mode 100644 index 00000000..f7e36d1d --- /dev/null +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.html @@ -0,0 +1,9 @@ +
+ + + + Don't disclose personal info + {{message.value.length}} / 256 + + +
diff --git a/src/assets/angular-material-examples/input-hint/input-hint-example.ts b/src/assets/angular-material-examples/input-hint/input-hint-example.ts new file mode 100644 index 00000000..3b3a5ebc --- /dev/null +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Input hints + */ +@Component({ + selector: 'input-hint-example', + templateUrl: 'input-hint-example.html', + styleUrls: ['input-hint-example.css'], +}) +export class InputHintExample { } diff --git a/src/assets/angular-material-examples/input-overview/input-overview-example.css b/src/assets/angular-material-examples/input-overview/input-overview-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/input-overview/input-overview-example.html b/src/assets/angular-material-examples/input-overview/input-overview-example.html new file mode 100644 index 00000000..cae5b1f0 --- /dev/null +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/src/assets/angular-material-examples/input-overview/input-overview-example.ts b/src/assets/angular-material-examples/input-overview/input-overview-example.ts new file mode 100644 index 00000000..b7d1f30b --- /dev/null +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic Inputs + */ +@Component({ + selector: 'input-overview-example', + styleUrls: ['input-overview-example.css'], + templateUrl: 'input-overview-example.html', +}) +export class InputOverviewExample {} diff --git a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.css b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.css new file mode 100644 index 00000000..08fa6753 --- /dev/null +++ b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.css @@ -0,0 +1,9 @@ +.example-form { + min-width: 150px; + max-width: 500px; + width: 100%; +} + +.example-full-width { + width: 100%; +} diff --git a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.html b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.html new file mode 100644 index 00000000..25485d1f --- /dev/null +++ b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.html @@ -0,0 +1,9 @@ +
+ + + +1   + + mode_edit + + +
diff --git a/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts new file mode 100644 index 00000000..00ed164c --- /dev/null +++ b/src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Input Prefixes and Suffixes + */ +@Component({ + selector: 'input-prefix-suffix-example', + templateUrl: 'input-prefix-suffix-example.html', + styleUrls: ['input-prefix-suffix-example.css'], +}) +export class InputPrefixSuffixExample { } diff --git a/src/assets/angular-material-examples/list-overview/list-overview-example.css b/src/assets/angular-material-examples/list-overview/list-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/list-overview/list-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/list-overview/list-overview-example.html b/src/assets/angular-material-examples/list-overview/list-overview-example.html new file mode 100644 index 00000000..ada715ee --- /dev/null +++ b/src/assets/angular-material-examples/list-overview/list-overview-example.html @@ -0,0 +1,5 @@ + + Item 1 + Item 2 + Item 3 + diff --git a/src/assets/angular-material-examples/list-overview/list-overview-example.ts b/src/assets/angular-material-examples/list-overview/list-overview-example.ts new file mode 100644 index 00000000..7912329c --- /dev/null +++ b/src/assets/angular-material-examples/list-overview/list-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic list + */ +@Component({ + selector: 'list-overview-example', + templateUrl: 'list-overview-example.html', +}) +export class ListOverviewExample {} diff --git a/src/assets/angular-material-examples/list-sections/list-sections-example.css b/src/assets/angular-material-examples/list-sections/list-sections-example.css new file mode 100644 index 00000000..487bd8d4 --- /dev/null +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.css @@ -0,0 +1,3 @@ +.mat-list-icon { + color: rgba(0, 0, 0, 0.54); +} diff --git a/src/assets/angular-material-examples/list-sections/list-sections-example.html b/src/assets/angular-material-examples/list-sections/list-sections-example.html new file mode 100644 index 00000000..38d20f97 --- /dev/null +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.html @@ -0,0 +1,15 @@ + +

Folders

+ + folder +

{{folder.name}}

+

{{folder.updated | date}}

+ + +

Notes

+ + note +

{{note.name}}

+

{{note.updated | date}}

+ + diff --git a/src/assets/angular-material-examples/list-sections/list-sections-example.ts b/src/assets/angular-material-examples/list-sections/list-sections-example.ts new file mode 100644 index 00000000..63e7e4c6 --- /dev/null +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.ts @@ -0,0 +1,36 @@ +import {Component} from '@angular/core'; + +/** + * @title List with sections + */ +@Component({ + selector: 'list-sections-example', + styleUrls: ['list-sections-example.css'], + templateUrl: 'list-sections-example.html', +}) +export class ListSectionsExample { + folders = [ + { + name: 'Photos', + updated: new Date('1/1/16'), + }, + { + name: 'Recipes', + updated: new Date('1/17/16'), + }, + { + name: 'Work', + updated: new Date('1/28/16'), + } + ]; + notes = [ + { + name: 'Vacation Itinerary', + updated: new Date('2/20/16'), + }, + { + name: 'Kitchen Remodel', + updated: new Date('1/18/16'), + } + ]; +} diff --git a/src/assets/angular-material-examples/list-selection/list-selection-example.css b/src/assets/angular-material-examples/list-selection/list-selection-example.css new file mode 100644 index 00000000..7949471c --- /dev/null +++ b/src/assets/angular-material-examples/list-selection/list-selection-example.css @@ -0,0 +1 @@ +/** No styles for this example. */ diff --git a/src/assets/angular-material-examples/list-selection/list-selection-example.html b/src/assets/angular-material-examples/list-selection/list-selection-example.html new file mode 100644 index 00000000..cd1d9f07 --- /dev/null +++ b/src/assets/angular-material-examples/list-selection/list-selection-example.html @@ -0,0 +1,9 @@ + + + {{shoe}} + + + +

+ Options selected: {{shoes.selectedOptions.selected.length}} +

diff --git a/src/assets/angular-material-examples/list-selection/list-selection-example.ts b/src/assets/angular-material-examples/list-selection/list-selection-example.ts new file mode 100644 index 00000000..644d3d8a --- /dev/null +++ b/src/assets/angular-material-examples/list-selection/list-selection-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +/** + * @title List with selection + */ +@Component({ + selector: 'list-selection-example', + styleUrls: ['list-selection-example.css'], + templateUrl: 'list-selection-example.html', +}) +export class ListSelectionExample { + typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; +} diff --git a/src/assets/angular-material-examples/menu-icons/menu-icons-example.css b/src/assets/angular-material-examples/menu-icons/menu-icons-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/menu-icons/menu-icons-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/menu-icons/menu-icons-example.html b/src/assets/angular-material-examples/menu-icons/menu-icons-example.html new file mode 100644 index 00000000..e1494245 --- /dev/null +++ b/src/assets/angular-material-examples/menu-icons/menu-icons-example.html @@ -0,0 +1,17 @@ + + + + + + diff --git a/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts b/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts new file mode 100644 index 00000000..6c474a57 --- /dev/null +++ b/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Menu with icons + */ +@Component({ + selector: 'menu-icons-example', + templateUrl: 'menu-icons-example.html', + styleUrls: ['menu-icons-example.css'], +}) +export class MenuIconsExample {} diff --git a/src/assets/angular-material-examples/menu-overview/menu-overview-example.css b/src/assets/angular-material-examples/menu-overview/menu-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/menu-overview/menu-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/menu-overview/menu-overview-example.html b/src/assets/angular-material-examples/menu-overview/menu-overview-example.html new file mode 100644 index 00000000..2b5d246c --- /dev/null +++ b/src/assets/angular-material-examples/menu-overview/menu-overview-example.html @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts b/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts new file mode 100644 index 00000000..2858d3e7 --- /dev/null +++ b/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic menu + */ +@Component({ + selector: 'menu-overview-example', + templateUrl: 'menu-overview-example.html', + styleUrls: ['menu-overview-example.css'], +}) +export class MenuOverviewExample {} diff --git a/src/assets/angular-material-examples/nested-menu/nested-menu-example.css b/src/assets/angular-material-examples/nested-menu/nested-menu-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/nested-menu/nested-menu-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/nested-menu/nested-menu-example.html b/src/assets/angular-material-examples/nested-menu/nested-menu-example.html new file mode 100644 index 00000000..bbfde3b9 --- /dev/null +++ b/src/assets/angular-material-examples/nested-menu/nested-menu-example.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts b/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts new file mode 100644 index 00000000..d9d7b81e --- /dev/null +++ b/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Nested menu + */ +@Component({ + selector: 'nested-menu-example', + templateUrl: 'nested-menu-example.html', + styleUrls: ['nested-menu-example.css'] +}) +export class NestedMenuExample {} diff --git a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.css b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html new file mode 100644 index 00000000..e1ce734f --- /dev/null +++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html @@ -0,0 +1,28 @@ + + List length: + + + + + Page size: + + + + Page size options: + + + + + + +
+
Page Change Event Properties
+
List length: {{pageEvent.length}}
+
Page size: {{pageEvent.pageSize}}
+
Page index: {{pageEvent.pageIndex}}
+
diff --git a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts new file mode 100644 index 00000000..ba3df8db --- /dev/null +++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts @@ -0,0 +1,23 @@ +import {Component} from '@angular/core'; +import {PageEvent} from '@angular/material'; + +/** + * @title Configurable paginator + */ +@Component({ + selector: 'paginator-configurable-example', + templateUrl: 'paginator-configurable-example.html', +}) +export class PaginatorConfigurableExample { + // MdPaginator Inputs + length = 100; + pageSize = 10; + pageSizeOptions = [5, 10, 25, 100]; + + // MdPaginator Output + pageEvent: PageEvent; + + setPageSizeOptions(setPageSizeOptionsInput: string) { + this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str); + } +} diff --git a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.css b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html new file mode 100644 index 00000000..010a9e5d --- /dev/null +++ b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html @@ -0,0 +1,4 @@ + + diff --git a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts new file mode 100644 index 00000000..b2d305e1 --- /dev/null +++ b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Paginator + */ +@Component({ + selector: 'paginator-overview-example', + templateUrl: 'paginator-overview-example.html', +}) +export class PaginatorOverviewExample {} diff --git a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.css b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.css new file mode 100644 index 00000000..558293fb --- /dev/null +++ b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 0 10px; +} diff --git a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html new file mode 100644 index 00000000..93937b77 --- /dev/null +++ b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html @@ -0,0 +1,63 @@ + + +

Progress bar configuration

+ +
+ + + + Primary + + + Accent + + + Warn + + +
+ +
+ + + + Determinate + + + Indeterminate + + + Buffer + + + Query + + +
+ +
+ + +
+
+ + +
+ + + + + +

Result

+ +
+ + +
+ + diff --git a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.ts b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.ts new file mode 100644 index 00000000..101408dc --- /dev/null +++ b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.ts @@ -0,0 +1,16 @@ +import {Component} from '@angular/core'; + +/** + * @title Configurable progress-bar + */ +@Component({ + selector: 'progress-bar-configurable-example', + templateUrl: 'progress-bar-configurable-example.html', + styleUrls: ['progress-bar-configurable-example.css'], +}) +export class ProgressBarConfigurableExample { + color = 'primary'; + mode = 'determinate'; + value = 50; + bufferValue = 75; +} diff --git a/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.css b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html new file mode 100644 index 00000000..8ab16e9c --- /dev/null +++ b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts new file mode 100644 index 00000000..67a6c94d --- /dev/null +++ b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic progress-bar + */ +@Component({ + selector: 'progress-bar-overview-example', + templateUrl: 'progress-bar-overview-example.html', +}) +export class ProgressBarOverviewExample {} diff --git a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.css b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.css new file mode 100644 index 00000000..558293fb --- /dev/null +++ b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 0 10px; +} diff --git a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html new file mode 100644 index 00000000..1ba3183a --- /dev/null +++ b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html @@ -0,0 +1,49 @@ + + +

Progress spinner configuration

+ +
+ + + + Primary + + + Accent + + + Warn + + +
+ +
+ + + + Determinate + + + Indeterminate + + +
+ +
+ + +
+ + + + +

Result

+ + + + + diff --git a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts new file mode 100644 index 00000000..ed1ca870 --- /dev/null +++ b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.ts @@ -0,0 +1,15 @@ +import {Component} from '@angular/core'; + +/** + * @title Configurable progress spinner + */ +@Component({ + selector: 'progress-spinner-configurable-example', + templateUrl: 'progress-spinner-configurable-example.html', + styleUrls: ['progress-spinner-configurable-example.css'], +}) +export class ProgressSpinnerConfigurableExample { + color = 'primary'; + mode = 'determinate'; + value = 50; +} diff --git a/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.css b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.html b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.html new file mode 100644 index 00000000..cd768c67 --- /dev/null +++ b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.ts b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.ts new file mode 100644 index 00000000..67ada8ad --- /dev/null +++ b/src/assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic progress-spinner + */ +@Component({ + selector: 'progress-spinner-overview-example', + templateUrl: 'progress-spinner-overview-example.html', +}) +export class ProgressSpinnerOverviewExample {} diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css new file mode 100644 index 00000000..f70c1b3b --- /dev/null +++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css @@ -0,0 +1,12 @@ +.example-radio-group { + display: inline-flex; + flex-direction: column; +} + +.example-radio-button { + margin: 5px; +} + +.example-selected-value { + margin: 15px 0; +} diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html new file mode 100644 index 00000000..108971b5 --- /dev/null +++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html @@ -0,0 +1,6 @@ + + + {{season}} + + +
Your favorite season is: {{favoriteSeason}}
diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts new file mode 100644 index 00000000..52fc5157 --- /dev/null +++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts @@ -0,0 +1,20 @@ +import {Component} from '@angular/core'; + +/** + * @title Radios with ngModel + */ +@Component({ + selector: 'radio-ng-model-example', + templateUrl: 'radio-ng-model-example.html', + styleUrls: ['radio-ng-model-example.css'], +}) +export class RadioNgModelExample { + favoriteSeason: string; + + seasons = [ + 'Winter', + 'Spring', + 'Summer', + 'Autumn', + ]; +} diff --git a/src/assets/angular-material-examples/radio-overview/radio-overview-example.css b/src/assets/angular-material-examples/radio-overview/radio-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/radio-overview/radio-overview-example.html b/src/assets/angular-material-examples/radio-overview/radio-overview-example.html new file mode 100644 index 00000000..4038381c --- /dev/null +++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.html @@ -0,0 +1,4 @@ + + Option 1 + Option 2 + diff --git a/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts b/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts new file mode 100644 index 00000000..916ce663 --- /dev/null +++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic radios + */ +@Component({ + selector: 'radio-overview-example', + templateUrl: 'radio-overview-example.html', +}) +export class RadioOverviewExample {} diff --git a/src/assets/angular-material-examples/select-form/select-form-example.css b/src/assets/angular-material-examples/select-form/select-form-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/select-form/select-form-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/select-form/select-form-example.html b/src/assets/angular-material-examples/select-form/select-form-example.html new file mode 100644 index 00000000..6dea33cc --- /dev/null +++ b/src/assets/angular-material-examples/select-form/select-form-example.html @@ -0,0 +1,9 @@ +
+ + + {{food.viewValue}} + + + +

Selected value: {{selectedValue}}

+
diff --git a/src/assets/angular-material-examples/select-form/select-form-example.ts b/src/assets/angular-material-examples/select-form/select-form-example.ts new file mode 100644 index 00000000..0bb2c305 --- /dev/null +++ b/src/assets/angular-material-examples/select-form/select-form-example.ts @@ -0,0 +1,18 @@ +import {Component} from '@angular/core'; + +/** + * @title Select in a form + */ +@Component({ + selector: 'select-form-example', + templateUrl: 'select-form-example.html', +}) +export class SelectFormExample { + selectedValue: string; + + foods = [ + {value: 'steak-0', viewValue: 'Steak'}, + {value: 'pizza-1', viewValue: 'Pizza'}, + {value: 'tacos-2', viewValue: 'Tacos'} + ]; +} diff --git a/src/assets/angular-material-examples/select-overview/select-overview-example.css b/src/assets/angular-material-examples/select-overview/select-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/select-overview/select-overview-example.html b/src/assets/angular-material-examples/select-overview/select-overview-example.html new file mode 100644 index 00000000..a4017ca5 --- /dev/null +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.html @@ -0,0 +1,5 @@ + + + {{ food.viewValue }} + + diff --git a/src/assets/angular-material-examples/select-overview/select-overview-example.ts b/src/assets/angular-material-examples/select-overview/select-overview-example.ts new file mode 100644 index 00000000..a6a2ff82 --- /dev/null +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.ts @@ -0,0 +1,16 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic select + */ +@Component({ + selector: 'select-overview-example', + templateUrl: 'select-overview-example.html', +}) +export class SelectOverviewExample { + foods = [ + {value: 'steak-0', viewValue: 'Steak'}, + {value: 'pizza-1', viewValue: 'Pizza'}, + {value: 'tacos-2', viewValue: 'Tacos'} + ]; +} diff --git a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css new file mode 100644 index 00000000..6d58f0f2 --- /dev/null +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css @@ -0,0 +1,26 @@ +.example-sidenav-fab-container { + width: 500px; + height: 300px; + border: 1px solid rgba(0, 0, 0, 0.5); +} + +.example-sidenav-fab-container md-sidenav { + max-width: 200px; +} + +.example-sidenav-fab-container .mat-sidenav-content, +.example-sidenav-fab-container md-sidenav { + display: flex; + overflow: visible; +} + +.example-scrolling-content { + overflow: auto; + height: 100%; +} + +.example-fab.mat-mini-fab { + position: absolute; + right: 20px; + bottom: 10px; +} diff --git a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html new file mode 100644 index 00000000..f194c098 --- /dev/null +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html @@ -0,0 +1,32 @@ + + + +
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, + fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam + nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna + aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor + vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, + ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu + enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, + tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. + Taciti dui, sapien consectetuer. +
+ + +
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce + vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id, + neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna. + Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat + cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui + sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu + erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh + ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien + consectetuer. +
+ diff --git a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts new file mode 100644 index 00000000..4af25f47 --- /dev/null +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts @@ -0,0 +1,13 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + +/** + * @title Sidenav with a FAB + */ +@Component({ + selector: 'sidenav-fab-example', + templateUrl: 'sidenav-fab-example.html', + styleUrls: ['sidenav-fab-example.css'], + encapsulation: ViewEncapsulation.None, + preserveWhitespaces: false, +}) +export class SidenavFabExample {} diff --git a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css new file mode 100644 index 00000000..8ab00588 --- /dev/null +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css @@ -0,0 +1,16 @@ +.example-container { + width: 500px; + height: 300px; + border: 1px solid rgba(0, 0, 0, 0.5); +} + +.example-sidenav-content { + display: flex; + height: 100%; + align-items: center; + justify-content: center; +} + +.example-sidenav { + padding: 20px; +} diff --git a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html new file mode 100644 index 00000000..757e4b2d --- /dev/null +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html @@ -0,0 +1,12 @@ + + + Jolly good! + + +
+ +
+ + diff --git a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts new file mode 100644 index 00000000..5496f3f4 --- /dev/null +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic sidenav + */ +@Component({ + selector: 'sidenav-overview-example', + templateUrl: 'sidenav-overview-example.html', + styleUrls: ['sidenav-overview-example.css'], +}) +export class SidenavOverviewExample {} diff --git a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css new file mode 100644 index 00000000..060532ee --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.css @@ -0,0 +1,14 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 10px; +} diff --git a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html new file mode 100644 index 00000000..88099f4b --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html @@ -0,0 +1,44 @@ + + +

Slider configuration

+ +
+ + + + Primary + + + Accent + + + Warn + + +
+ +
+ Checked +
+ +
+ Disabled +
+ + + + + +

Result

+ +
+ + Slide me! + +
+ + diff --git a/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts new file mode 100644 index 00000000..17835efb --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example.ts @@ -0,0 +1,15 @@ +import {Component} from '@angular/core'; + +/** + * @title Configurable slide-toggle + */ +@Component({ + selector: 'slide-toggle-configurable-example', + templateUrl: 'slide-toggle-configurable-example.html', + styleUrls: ['slide-toggle-configurable-example.css'], +}) +export class SlideToggleConfigurableExample { + color = 'accent'; + checked = false; + disabled = false; +} diff --git a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.css b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.css new file mode 100644 index 00000000..8567e7f8 --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.css @@ -0,0 +1,4 @@ +.example-form md-slide-toggle { + margin: 8px 0; + display: block; +} diff --git a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html new file mode 100644 index 00000000..0a2b897d --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html @@ -0,0 +1,25 @@ +

Slide Toggle using a simple NgModel.

+ +Slide Toggle Checked: {{ isChecked }} + +

Slide Toggle inside of a Template-driven form

+ +
+ + Enable Wifi + Accept Terms of Service + + +
+ +

Slide Toggle inside of a Reactive form

+ +
+ + Enable Wifi + Accept Terms of Service + +

Form Group Status: {{ formGroup.status}}

+ + +
diff --git a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts new file mode 100644 index 00000000..2636c474 --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts @@ -0,0 +1,26 @@ +import {Component} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; + +/** + * @title Slide-toggle with forms + */ +@Component({ + selector: 'slide-toggle-forms-example', + templateUrl: './slide-toggle-forms-example.html', + styleUrls: ['./slide-toggle-forms-example.css'], +}) +export class SlideToggleFormsExample { + isChecked = true; + formGroup: FormGroup; + + constructor(formBuilder: FormBuilder) { + this.formGroup = formBuilder.group({ + enableWifi: '', + acceptTerms: ['', Validators.requiredTrue] + }); + } + + onFormSubmit(formValue: any) { + alert(JSON.stringify(formValue, null, 2)); + } +} diff --git a/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.css b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.html b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.html new file mode 100644 index 00000000..6b9586e1 --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.html @@ -0,0 +1 @@ +Slide me! diff --git a/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.ts b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.ts new file mode 100644 index 00000000..6ed08696 --- /dev/null +++ b/src/assets/angular-material-examples/slide-toggle-overview/slide-toggle-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic slide-toggles + */ +@Component({ + selector: 'slide-toggle-overview-example', + templateUrl: 'slide-toggle-overview-example.html', +}) +export class SlideToggleOverviewExample {} diff --git a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css new file mode 100644 index 00000000..1f954ba8 --- /dev/null +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css @@ -0,0 +1,22 @@ +.example-h2 { + margin: 10px; +} + +.example-section { + display: flex; + align-content: center; + align-items: center; + height: 60px; +} + +.example-margin { + margin: 10px; +} + +.mat-slider-horizontal { + width: 300px; +} + +.mat-slider-vertical { + height: 300px; +} diff --git a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html new file mode 100644 index 00000000..5eb3214f --- /dev/null +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html @@ -0,0 +1,63 @@ + + +

Slider configuration

+ +
+ + + + + + + + + + + + +
+ +
+ Show ticks + + Auto ticks + + + + +
+ +
+ Show thumb label +
+ +
+ Vertical + Inverted +
+ +
+ Disabled +
+ + + + + + +

Result

+ + + + + diff --git a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts new file mode 100644 index 00000000..caee9ab5 --- /dev/null +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts @@ -0,0 +1,32 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + +/** + * @title Configurable slider + */ +@Component({ + selector: 'slider-configurable-example', + templateUrl: 'slider-configurable-example.html', + styleUrls: ['slider-configurable-example.css'], + encapsulation: ViewEncapsulation.None, + preserveWhitespaces: false, +}) +export class SliderConfigurableExample { + autoTicks = false; + disabled = false; + invert = false; + max = 100; + min = 0; + showTicks = false; + step = 1; + thumbLabel = false; + value = 0; + vertical = false; + + get tickInterval(): number | 'auto' { + return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : 0; + } + set tickInterval(v) { + this._tickInterval = Number(v); + } + private _tickInterval = 1; +} diff --git a/src/assets/angular-material-examples/slider-overview/slider-overview-example.css b/src/assets/angular-material-examples/slider-overview/slider-overview-example.css new file mode 100644 index 00000000..8dfe08cc --- /dev/null +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.css @@ -0,0 +1,4 @@ +/** No CSS for this example */ +md-slider { + width: 300px; +} diff --git a/src/assets/angular-material-examples/slider-overview/slider-overview-example.html b/src/assets/angular-material-examples/slider-overview/slider-overview-example.html new file mode 100644 index 00000000..9a92c8f8 --- /dev/null +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts b/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts new file mode 100644 index 00000000..3284b3ae --- /dev/null +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic slider + */ +@Component({ + selector: 'slider-overview-example', + templateUrl: 'slider-overview-example.html', + styleUrls: ['slider-overview-example.css'], +}) +export class SliderOverviewExample {} diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.css b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.css new file mode 100644 index 00000000..fa7dc674 --- /dev/null +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.css @@ -0,0 +1,3 @@ +.example-pizza-party { + color: hotpink; +} diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.html b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.html new file mode 100644 index 00000000..cfba7c45 --- /dev/null +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example-snack.html @@ -0,0 +1,3 @@ + + Pizza party!!! 🍕 + diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html new file mode 100644 index 00000000..69fe01bc --- /dev/null +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html @@ -0,0 +1,3 @@ + diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts new file mode 100644 index 00000000..8aac00a1 --- /dev/null +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts @@ -0,0 +1,27 @@ +import {Component} from '@angular/core'; +import {MdSnackBar} from '@angular/material'; + +/** + * @title Snack-bar with a custom component + */ +@Component({ + selector: 'snack-bar-component-example', + templateUrl: 'snack-bar-component-example.html', +}) +export class SnackBarComponentExample { + constructor(public snackBar: MdSnackBar) {} + + openSnackBar() { + this.snackBar.openFromComponent(PizzaPartyComponent, { + duration: 500, + }); + } +} + + +@Component({ + selector: 'snack-bar-component-example-snack', + templateUrl: 'snack-bar-component-example-snack.html', + styleUrls: ['snack-bar-component-example-snack.css'], +}) +export class PizzaPartyComponent {} diff --git a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.css b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.html b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.html new file mode 100644 index 00000000..757612c1 --- /dev/null +++ b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts new file mode 100644 index 00000000..4d1980dc --- /dev/null +++ b/src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; +import {MdSnackBar} from '@angular/material'; + +/** + * @title Basic snack-bar + */ +@Component({ + selector: 'snack-bar-overview-example', + templateUrl: 'snack-bar-overview-example.html', +}) +export class SnackBarOverviewExample { + constructor(public snackBar: MdSnackBar) {} + + openSnackBar(message: string, action: string) { + this.snackBar.open(message, action, { + duration: 2000, + }); + } +} diff --git a/src/assets/angular-material-examples/sort-overview/sort-overview-example.css b/src/assets/angular-material-examples/sort-overview/sort-overview-example.css new file mode 100644 index 00000000..5d2cd6d6 --- /dev/null +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.css @@ -0,0 +1,3 @@ +.mat-sort-header-container { + align-items: center; +} diff --git a/src/assets/angular-material-examples/sort-overview/sort-overview-example.html b/src/assets/angular-material-examples/sort-overview/sort-overview-example.html new file mode 100644 index 00000000..342f3855 --- /dev/null +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.html @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + +
Dessert (100g)CaloriesFat (g)Carbs (g)Protein (g)
{{dessert.name}}{{dessert.calories}}{{dessert.fat}}{{dessert.carbs}}{{dessert.protein}}
diff --git a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts new file mode 100644 index 00000000..58b19b39 --- /dev/null +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts @@ -0,0 +1,50 @@ +import {Component} from '@angular/core'; +import {Sort} from '@angular/material'; + +/** + * @title Sorting overview + */ +@Component({ + selector: 'sort-overview-example', + templateUrl: 'sort-overview-example.html', + styleUrls: ['sort-overview-example.css'], +}) +export class SortOverviewExample { + desserts = [ + {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'}, + {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'}, + {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'}, + {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'}, + {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'}, + ]; + + sortedData; + + constructor() { + this.sortedData = this.desserts.slice(); + } + + sortData(sort: Sort) { + const data = this.desserts.slice(); + if (!sort.active || sort.direction == '') { + this.sortedData = data; + return; + } + + this.sortedData = data.sort((a, b) => { + let isAsc = sort.direction == 'asc'; + switch (sort.active) { + case 'name': return compare(a.name, b.name, isAsc); + case 'calories': return compare(+a.calories, +b.calories, isAsc); + case 'fat': return compare(+a.fat, +b.fat, isAsc); + case 'carbs': return compare(+a.carbs, +b.carbs, isAsc); + case 'protein': return compare(+a.protein, +b.protein, isAsc); + default: return 0; + } + }); + } +} + +function compare(a, b, isAsc) { + return (a < b ? -1 : 1) * (isAsc ? 1 : -1); +} diff --git a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.css b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html new file mode 100644 index 00000000..4e4408a1 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html @@ -0,0 +1,33 @@ + + + +
+ Fill out your name + + + +
+ +
+
+ + +
+ Fill out your address + + + +
+ + +
+
+ + + Done + You are now done. +
+ +
+ + diff --git a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts new file mode 100644 index 00000000..717dcb5d --- /dev/null +++ b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts @@ -0,0 +1,27 @@ +import {Component} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; + +/** + * @title Stepper overview + */ +@Component({ + selector: 'stepper-overview-example', + templateUrl: 'stepper-overview-example.html', + styleUrls: ['stepper-overview-example.css'] +}) +export class StepperOverviewExample { + isLinear = false; + firstFormGroup: FormGroup; + secondFormGroup: FormGroup; + + constructor(private _formBuilder: FormBuilder) { } + + ngOnInit() { + this.firstFormGroup = this._formBuilder.group({ + firstCtrl: ['', Validators.required] + }); + this.secondFormGroup = this._formBuilder.group({ + secondCtrl: ['', Validators.required] + }); + } +} diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.css b/src/assets/angular-material-examples/table-basic/table-basic-example.css new file mode 100644 index 00000000..8b311e6d --- /dev/null +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.css @@ -0,0 +1,11 @@ +.example-container { + display: flex; + flex-direction: column; + max-height: 500px; + min-width: 300px; +} + +.mat-table { + overflow: auto; + max-height: 500px; +} diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.html b/src/assets/angular-material-examples/table-basic/table-basic-example.html new file mode 100644 index 00000000..66dd020c --- /dev/null +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.html @@ -0,0 +1,34 @@ +
+ + + + + + + No. + {{element.position}} + + + + + Name + {{element.name}} + + + + + Weight + {{element.weight}} + + + + + Symbol + {{element.symbol}} + + + + + +
diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.ts b/src/assets/angular-material-examples/table-basic/table-basic-example.ts new file mode 100644 index 00000000..41f41c7e --- /dev/null +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.ts @@ -0,0 +1,62 @@ +import {Component} from '@angular/core'; +import {DataSource} from '@angular/cdk/collections'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/observable/of'; + +/** + * @title Basic table + */ +@Component({ + selector: 'table-basic-example', + styleUrls: ['table-basic-example.css'], + templateUrl: 'table-basic-example.html', +}) +export class TableBasicExample { + displayedColumns = ['position', 'name', 'weight', 'symbol']; + dataSource = new ExampleDataSource(); +} + +export interface Element { + name: string; + position: number; + weight: number; + symbol: string; +} + +const data: Element[] = [ + {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, + {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, + {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, + {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'}, + {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}, + {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'}, + {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'}, + {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'}, + {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, + {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, + {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'}, + {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'}, + {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'}, + {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'}, + {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'}, + {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'}, + {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'}, + {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'}, + {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'}, + {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'}, +]; + +/** + * Data source to provide what data should be rendered in the table. The observable provided + * in connect should emit exactly the data that should be rendered by the table. If the data is + * altered, the observable should emit that new set of data on the stream. In our case here, + * we return a stream that contains only one set of data that doesn't change. + */ +export class ExampleDataSource extends DataSource { + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable { + return Observable.of(data); + } + + disconnect() {} +} diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.css b/src/assets/angular-material-examples/table-filtering/table-filtering-example.css new file mode 100644 index 00000000..51287a08 --- /dev/null +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.css @@ -0,0 +1,26 @@ +/* Structure */ +.example-container { + display: flex; + flex-direction: column; + min-width: 300px; +} + +.example-header { + min-height: 64px; + display: flex; + align-items: baseline; + padding: 8px 24px 0; + font-size: 20px; + justify-content: space-between; +} + +.mat-form-field { + font-size: 14px; + flex-grow: 1; + margin-left: 32px; +} + +.mat-table { + overflow: auto; + max-height: 500px; +} diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.html b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html new file mode 100644 index 00000000..c3d8ca1d --- /dev/null +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html @@ -0,0 +1,40 @@ +
+
+ + + +
+ + + + + + + + ID + {{row.id}} + + + + + Progress + {{row.progress}}% + + + + + Name + {{row.name}} + + + + + Color + {{row.color}} + + + + + +
diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts new file mode 100644 index 00000000..8404f0c1 --- /dev/null +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts @@ -0,0 +1,118 @@ +import {Component, ElementRef, ViewChild} from '@angular/core'; +import {DataSource} from '@angular/cdk/collections'; +import {BehaviorSubject} from 'rxjs/BehaviorSubject'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/observable/merge'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/debounceTime'; +import 'rxjs/add/operator/distinctUntilChanged'; +import 'rxjs/add/observable/fromEvent'; + +/** + * @title Table with filtering + */ +@Component({ + selector: 'table-filtering-example', + styleUrls: ['table-filtering-example.css'], + templateUrl: 'table-filtering-example.html', +}) +export class TableFilteringExample { + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; + + @ViewChild('filter') filter: ElementRef; + + ngOnInit() { + this.dataSource = new ExampleDataSource(this.exampleDatabase); + Observable.fromEvent(this.filter.nativeElement, 'keyup') + .debounceTime(150) + .distinctUntilChanged() + .subscribe(() => { + if (!this.dataSource) { return; } + this.dataSource.filter = this.filter.nativeElement.value; + }); + } +} + +/** Constants used to fill up our data base. */ +const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; +const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; + +export interface UserData { + id: string; + name: string; + progress: string; + color: string; +} + +/** An example database that the data source uses to retrieve data for the table. */ +export class ExampleDatabase { + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); + get data(): UserData[] { return this.dataChange.value; } + + constructor() { + // Fill up the database with 100 users. + for (let i = 0; i < 100; i++) { this.addUser(); } + } + + /** Adds a new user to the database. */ + addUser() { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } + + /** Builds and returns a new User. */ + private createNewUser() { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id: (this.data.length + 1).toString(), + name: name, + progress: Math.round(Math.random() * 100).toString(), + color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } +} + +/** + * Data source to provide what data should be rendered in the table. Note that the data source + * can retrieve its data in any way. In this case, the data source is provided a reference + * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage + * the underlying data. Instead, it only needs to take the data and send the table exactly what + * should be rendered. + */ +export class ExampleDataSource extends DataSource { + _filterChange = new BehaviorSubject(''); + get filter(): string { return this._filterChange.value; } + set filter(filter: string) { this._filterChange.next(filter); } + + constructor(private _exampleDatabase: ExampleDatabase) { + super(); + } + + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable { + const displayDataChanges = [ + this._exampleDatabase.dataChange, + this._filterChange, + ]; + + return Observable.merge(...displayDataChanges).map(() => { + return this._exampleDatabase.data.slice().filter((item: UserData) => { + let searchStr = (item.name + item.color).toLowerCase(); + return searchStr.indexOf(this.filter.toLowerCase()) != -1; + }); + }); + } + + disconnect() {} +} diff --git a/src/assets/angular-material-examples/table-http/table-http-example.css b/src/assets/angular-material-examples/table-http/table-http-example.css new file mode 100644 index 00000000..185ff44b --- /dev/null +++ b/src/assets/angular-material-examples/table-http/table-http-example.css @@ -0,0 +1,57 @@ +/* Structure */ +.example-container { + display: flex; + flex-direction: column; + max-height: 500px; + min-width: 300px; + position: relative; +} + +.example-header { + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; +} + +.example-table { + overflow: auto; + min-height: 300px; +} + +.mat-column-title { + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + overflow: hidden; +} + +/* Column Widths */ +.mat-column-number, +.mat-column-state { + max-width: 64px; +} + +.mat-column-created { + max-width: 124px; +} + +.example-loading-shade { + position: absolute; + top: 0; + left: 0; + bottom: 56px; + right: 0; + background: rgba(0, 0, 0, 0.15); + z-index: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.example-rate-limit-reached { + color: #980000; + max-width: 360px; + text-align: center; +} diff --git a/src/assets/angular-material-examples/table-http/table-http-example.html b/src/assets/angular-material-examples/table-http/table-http-example.html new file mode 100644 index 00000000..b74b898a --- /dev/null +++ b/src/assets/angular-material-examples/table-http/table-http-example.html @@ -0,0 +1,51 @@ +
+
+ +
+ GitHub's API rate limit has been reached. It will be reset in one minute. +
+
+ + + + + + + + # + {{ row.number }} + + + + + Title + {{ row.title }} + + + + + State + {{ row.state }} + + + + + + Created + + {{ row.created_at | date }} + + + + + + + + +
diff --git a/src/assets/angular-material-examples/table-http/table-http-example.ts b/src/assets/angular-material-examples/table-http/table-http-example.ts new file mode 100644 index 00000000..7331462b --- /dev/null +++ b/src/assets/angular-material-examples/table-http/table-http-example.ts @@ -0,0 +1,121 @@ +import {Component, OnInit, ViewChild} from '@angular/core'; +import {Http} from '@angular/http'; +import {DataSource} from '@angular/cdk/collections'; +import {MdPaginator, MdSort} from '@angular/material'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/observable/merge'; +import 'rxjs/add/observable/of'; +import 'rxjs/add/operator/catch'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/operator/switchMap'; + +/** + * @title Table retrieving data through HTTP + */ +@Component({ + selector: 'table-http-example', + styleUrls: ['table-http-example.css'], + templateUrl: 'table-http-example.html', +}) +export class TableHttpExample implements OnInit { + displayedColumns = ['created_at', 'state', 'number', 'title']; + exampleDatabase: ExampleHttpDao | null; + dataSource: ExampleDataSource | null; + + @ViewChild(MdPaginator) paginator: MdPaginator; + @ViewChild(MdSort) sort: MdSort; + + constructor(private http: Http) {} + + ngOnInit() { + this.exampleDatabase = new ExampleHttpDao(this.http); + this.dataSource = new ExampleDataSource( + this.exampleDatabase!, this.paginator, this.sort); + } +} + +export interface GithubApi { + items: GithubIssue[]; + total_count: number; +} + +export interface GithubIssue { + created_at: string; + number: string; + state: string; + title: string; +} + +/** An example database that the data source uses to retrieve data for the table. */ +export class ExampleHttpDao { + constructor(private http: Http) {} + + getRepoIssues(sort: string, order: string, page: number): Observable { + const href = 'https://api.github.com/search/issues'; + const requestUrl = + `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`; + + return this.http.get(requestUrl) + .map(response => response.json() as GithubApi); + } +} + +/** + * Data source to provide what data should be rendered in the table. Note that the data source + * can retrieve its data in any way. In this case, the data source is provided a reference + * to a common data base, ExampleHttpDao. It is not the data source's responsibility to manage + * the underlying data. Instead, it only needs to take the data and send the table exactly what + * should be rendered. + */ +export class ExampleDataSource extends DataSource { + // The number of issues returned by github matching the query. + resultsLength = 0; + isLoadingResults = false; + isRateLimitReached = false; + + constructor(private exampleDatabase: ExampleHttpDao, + private paginator: MdPaginator, + private sort: MdSort) { + super(); + } + + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable { + const displayDataChanges = [ + this.sort.sortChange, + this.paginator.page + ]; + + // If the user changes the sort order, reset back to the first page. + this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0); + + return Observable.merge(...displayDataChanges) + .startWith(null) + .switchMap(() => { + setTimeout(() => { + this.isLoadingResults = true; + }); + return this.exampleDatabase.getRepoIssues( + this.sort.active, this.sort.direction, this.paginator.pageIndex); + }) + .map(data => { + // Flip flag to show that loading has finished. + this.isLoadingResults = false; + this.isRateLimitReached = false; + this.resultsLength = data.total_count; + + return data.items; + }) + .catch(() => { + // Catch if the GitHub API has reached its rate limit. Return empty data. + setTimeout(() => { + this.isLoadingResults = false; + this.isRateLimitReached = true; + }); + return Observable.of([]); + }); + } + + disconnect() {} +} diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.css b/src/assets/angular-material-examples/table-overview/table-overview-example.css new file mode 100644 index 00000000..c5c27f6f --- /dev/null +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.css @@ -0,0 +1,53 @@ +/* Structure */ +.example-container { + display: flex; + flex-direction: column; + min-width: 300px; +} + +.example-header { + min-height: 56px; + max-height: 56px; + display: flex; + align-items: center; + padding: 8px 24px 0; + font-size: 20px; + justify-content: space-between; + border-bottom: 1px solid transparent; +} + +.mat-form-field { + font-size: 14px; + flex-grow: 1; + margin-top: 8px; +} + +.example-no-results { + display: flex; + justify-content: center; + padding: 24px; + font-size: 12px; + font-style: italic; +} + +/** Selection styles */ +.example-selection-header { + font-size: 18px; +} + +.mat-column-select { + max-width: 54px; +} + +.mat-row:hover, .example-selected-row { + background: #f5f5f5; +} + +.mat-row:active, .mat-row.example-selected-row { + background: #eaeaea; +} + +.mat-table { + overflow: auto; + max-height: 500px; +} diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.html b/src/assets/angular-material-examples/table-overview/table-overview-example.html new file mode 100644 index 00000000..35a12176 --- /dev/null +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.html @@ -0,0 +1,78 @@ +
+ + + +
+
+ {{selection.selected.length}} + {{selection.selected.length == 1 ? 'user' : 'users'}} + selected +
+ +
+ + + + + + + + + + + + + + + + + + + + ID + {{row.id}} + + + + + Progress + {{row.progress}}% + + + + + Name + {{row.name}} + + + + + Color + {{row.color}} + + + + + + + +
+ No users found matching filter. +
+ + + +
diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.ts b/src/assets/angular-material-examples/table-overview/table-overview-example.ts new file mode 100644 index 00000000..f0f9fcd4 --- /dev/null +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.ts @@ -0,0 +1,190 @@ +import {Component, ElementRef, ViewChild} from '@angular/core'; +import {DataSource} from '@angular/cdk/collections'; +import {MdPaginator, MdSort} from '@angular/material'; +import {SelectionModel} from '@angular/cdk/collections'; +import {BehaviorSubject} from 'rxjs/BehaviorSubject'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/observable/merge'; +import 'rxjs/add/observable/fromEvent'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/distinctUntilChanged'; +import 'rxjs/add/operator/debounceTime'; + +/** + * @title Feature-rich data table + */ +@Component({ + selector: 'table-overview-example', + styleUrls: ['table-overview-example.css'], + templateUrl: 'table-overview-example.html', +}) +export class TableOverviewExample { + displayedColumns = ['select', 'userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + selection = new SelectionModel(true, []); + dataSource: ExampleDataSource | null; + + @ViewChild(MdPaginator) paginator: MdPaginator; + @ViewChild(MdSort) sort: MdSort; + @ViewChild('filter') filter: ElementRef; + + ngOnInit() { + this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator, this.sort); + Observable.fromEvent(this.filter.nativeElement, 'keyup') + .debounceTime(150) + .distinctUntilChanged() + .subscribe(() => { + if (!this.dataSource) { return; } + this.dataSource.filter = this.filter.nativeElement.value; + }); + } + + isAllSelected(): boolean { + if (!this.dataSource) { return false; } + if (this.selection.isEmpty()) { return false; } + + if (this.filter.nativeElement.value) { + return this.selection.selected.length == this.dataSource.renderedData.length; + } else { + return this.selection.selected.length == this.exampleDatabase.data.length; + } + } + + masterToggle() { + if (!this.dataSource) { return; } + + if (this.isAllSelected()) { + this.selection.clear(); + } else if (this.filter.nativeElement.value) { + this.dataSource.renderedData.forEach(data => this.selection.select(data.id)); + } else { + this.exampleDatabase.data.forEach(data => this.selection.select(data.id)); + } + } +} + +/** Constants used to fill up our data base. */ +const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; +const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; + +export interface UserData { + id: string; + name: string; + progress: string; + color: string; +} + +/** An example database that the data source uses to retrieve data for the table. */ +export class ExampleDatabase { + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); + get data(): UserData[] { return this.dataChange.value; } + + constructor() { + // Fill up the database with 100 users. + setTimeout(() => { + for (let i = 0; i < 100; i++) { this.addUser(); } + }); + } + + /** Adds a new user to the database. */ + addUser() { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } + + /** Builds and returns a new User. */ + private createNewUser() { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id: (this.data.length + 1).toString(), + name: name, + progress: Math.round(Math.random() * 100).toString(), + color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } +} + +/** + * Data source to provide what data should be rendered in the table. Note that the data source + * can retrieve its data in any way. In this case, the data source is provided a reference + * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage + * the underlying data. Instead, it only needs to take the data and send the table exactly what + * should be rendered. + */ +export class ExampleDataSource extends DataSource { + _filterChange = new BehaviorSubject(''); + get filter(): string { return this._filterChange.value; } + set filter(filter: string) { this._filterChange.next(filter); } + + filteredData: UserData[] = []; + renderedData: UserData[] = []; + + constructor(private _exampleDatabase: ExampleDatabase, + private _paginator: MdPaginator, + private _sort: MdSort) { + super(); + + // Reset to the first page when the user changes the filter. + this._filterChange.subscribe(() => this._paginator.pageIndex = 0); + } + + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable { + // Listen for any changes in the base data, sorting, filtering, or pagination + const displayDataChanges = [ + this._exampleDatabase.dataChange, + this._sort.sortChange, + this._filterChange, + this._paginator.page, + ]; + + return Observable.merge(...displayDataChanges).map(() => { + // Filter data + this.filteredData = this._exampleDatabase.data.slice().filter((item: UserData) => { + let searchStr = (item.name + item.color).toLowerCase(); + return searchStr.indexOf(this.filter.toLowerCase()) != -1; + }); + + // Sort filtered data + const sortedData = this.sortData(this.filteredData.slice()); + + // Grab the page's slice of the filtered sorted data. + const startIndex = this._paginator.pageIndex * this._paginator.pageSize; + this.renderedData = sortedData.splice(startIndex, this._paginator.pageSize); + return this.renderedData; + }); + } + + disconnect() {} + + /** Returns a sorted copy of the database data. */ + sortData(data: UserData[]): UserData[] { + if (!this._sort.active || this._sort.direction == '') { return data; } + + return data.sort((a, b) => { + let propertyA: number|string = ''; + let propertyB: number|string = ''; + + switch (this._sort.active) { + case 'userId': [propertyA, propertyB] = [a.id, b.id]; break; + case 'userName': [propertyA, propertyB] = [a.name, b.name]; break; + case 'progress': [propertyA, propertyB] = [a.progress, b.progress]; break; + case 'color': [propertyA, propertyB] = [a.color, b.color]; break; + } + + let valueA = isNaN(+propertyA) ? propertyA : +propertyA; + let valueB = isNaN(+propertyB) ? propertyB : +propertyB; + + return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); + }); + } +} diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.css b/src/assets/angular-material-examples/table-pagination/table-pagination-example.css new file mode 100644 index 00000000..5b9032d1 --- /dev/null +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.css @@ -0,0 +1,19 @@ +/* Structure */ +.example-container { + display: flex; + flex-direction: column; + min-width: 300px; +} + +.example-header { + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; +} + +.mat-table { + overflow: auto; + max-height: 500px; +} diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.html b/src/assets/angular-material-examples/table-pagination/table-pagination-example.html new file mode 100644 index 00000000..6fa6eaad --- /dev/null +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.html @@ -0,0 +1,42 @@ +
+ + + + + + + + ID + {{row.id}} + + + + + Progress + {{row.progress}}% + + + + + Name + {{row.name}} + + + + + Color + {{row.color}} + + + + + + + + +
diff --git a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts new file mode 100644 index 00000000..1434c8f6 --- /dev/null +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts @@ -0,0 +1,106 @@ +import {Component, ViewChild} from '@angular/core'; +import {DataSource} from '@angular/cdk/collections'; +import {MdPaginator} from '@angular/material'; +import {BehaviorSubject} from 'rxjs/BehaviorSubject'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/observable/merge'; +import 'rxjs/add/operator/map'; + +/** + * @title Table with pagination + */ +@Component({ + selector: 'table-pagination-example', + styleUrls: ['table-pagination-example.css'], + templateUrl: 'table-pagination-example.html', +}) +export class TablePaginationExample { + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; + + @ViewChild(MdPaginator) paginator: MdPaginator; + + ngOnInit() { + this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator); + } +} + +/** Constants used to fill up our data base. */ +const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; +const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; + +export interface UserData { + id: string; + name: string; + progress: string; + color: string; +} + +/** An example database that the data source uses to retrieve data for the table. */ +export class ExampleDatabase { + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); + get data(): UserData[] { return this.dataChange.value; } + + constructor() { + // Fill up the database with 100 users. + for (let i = 0; i < 100; i++) { this.addUser(); } + } + + /** Adds a new user to the database. */ + addUser() { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } + + /** Builds and returns a new User. */ + private createNewUser() { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id: (this.data.length + 1).toString(), + name: name, + progress: Math.round(Math.random() * 100).toString(), + color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } +} + +/** + * Data source to provide what data should be rendered in the table. Note that the data source + * can retrieve its data in any way. In this case, the data source is provided a reference + * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage + * the underlying data. Instead, it only needs to take the data and send the table exactly what + * should be rendered. + */ +export class ExampleDataSource extends DataSource { + constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MdPaginator) { + super(); + } + + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable { + const displayDataChanges = [ + this._exampleDatabase.dataChange, + this._paginator.page, + ]; + + return Observable.merge(...displayDataChanges).map(() => { + const data = this._exampleDatabase.data.slice(); + + // Grab the page's slice of data. + const startIndex = this._paginator.pageIndex * this._paginator.pageSize; + return data.splice(startIndex, this._paginator.pageSize); + }); + } + + disconnect() {} +} diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.css b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css new file mode 100644 index 00000000..0ff9559b --- /dev/null +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css @@ -0,0 +1,23 @@ +/* Structure */ +.example-container { + display: flex; + flex-direction: column; + min-width: 300px; +} + +.example-header { + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; +} + +.mat-table { + overflow: auto; + max-height: 500px; +} + +.mat-header-cell .mat-sort-header-sorted { + color: black; +} diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html new file mode 100644 index 00000000..cde414b6 --- /dev/null +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html @@ -0,0 +1,34 @@ +
+ + + + + + + ID + {{row.id}} + + + + + Progress + {{row.progress}}% + + + + + Name + {{row.name}} + + + + + Color + {{row.color}} + + + + + +
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts new file mode 100644 index 00000000..36df1764 --- /dev/null +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts @@ -0,0 +1,125 @@ +import {Component, ViewChild} from '@angular/core'; +import {DataSource} from '@angular/cdk/collections'; +import {MdSort} from '@angular/material'; +import {BehaviorSubject} from 'rxjs/BehaviorSubject'; +import {Observable} from 'rxjs/Observable'; +import 'rxjs/add/operator/startWith'; +import 'rxjs/add/observable/merge'; +import 'rxjs/add/operator/map'; + +/** + * @title Table with sorting + */ +@Component({ + selector: 'table-sorting-example', + styleUrls: ['table-sorting-example.css'], + templateUrl: 'table-sorting-example.html', +}) +export class TableSortingExample { + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; + + @ViewChild(MdSort) sort: MdSort; + + ngOnInit() { + this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort); + } +} + +/** Constants used to fill up our data base. */ +const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; +const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; + +export interface UserData { + id: string; + name: string; + progress: string; + color: string; +} + +/** An example database that the data source uses to retrieve data for the table. */ +export class ExampleDatabase { + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); + get data(): UserData[] { return this.dataChange.value; } + + constructor() { + // Fill up the database with 100 users. + for (let i = 0; i < 100; i++) { this.addUser(); } + } + + /** Adds a new user to the database. */ + addUser() { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } + + /** Builds and returns a new User. */ + private createNewUser() { + const name = + NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + + NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; + + return { + id: (this.data.length + 1).toString(), + name: name, + progress: Math.round(Math.random() * 100).toString(), + color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] + }; + } +} + +/** + * Data source to provide what data should be rendered in the table. Note that the data source + * can retrieve its data in any way. In this case, the data source is provided a reference + * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage + * the underlying data. Instead, it only needs to take the data and send the table exactly what + * should be rendered. + */ +export class ExampleDataSource extends DataSource { + constructor(private _exampleDatabase: ExampleDatabase, private _sort: MdSort) { + super(); + } + + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable { + const displayDataChanges = [ + this._exampleDatabase.dataChange, + this._sort.sortChange, + ]; + + return Observable.merge(...displayDataChanges).map(() => { + return this.getSortedData(); + }); + } + + disconnect() {} + + /** Returns a sorted copy of the database data. */ + getSortedData(): UserData[] { + const data = this._exampleDatabase.data.slice(); + if (!this._sort.active || this._sort.direction == '') { return data; } + + return data.sort((a, b) => { + let propertyA: number|string = ''; + let propertyB: number|string = ''; + + switch (this._sort.active) { + case 'userId': [propertyA, propertyB] = [a.id, b.id]; break; + case 'userName': [propertyA, propertyB] = [a.name, b.name]; break; + case 'progress': [propertyA, propertyB] = [a.progress, b.progress]; break; + case 'color': [propertyA, propertyB] = [a.color, b.color]; break; + } + + let valueA = isNaN(+propertyA) ? propertyA : +propertyA; + let valueB = isNaN(+propertyB) ? propertyB : +propertyB; + + return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); + }); + } +} diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.css b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html new file mode 100644 index 00000000..173ece5d --- /dev/null +++ b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html @@ -0,0 +1,4 @@ + + Content 1 + Content 2 + diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts new file mode 100644 index 00000000..96f70260 --- /dev/null +++ b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic tabs + */ +@Component({ + selector: 'tabs-overview-example', + templateUrl: 'tabs-overview-example.html', +}) +export class TabsOverviewExample {} diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css new file mode 100644 index 00000000..71d3d8b2 --- /dev/null +++ b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css @@ -0,0 +1,7 @@ +.demo-tab-group { + border: 1px solid #e8e8e8; +} + +.demo-tab-content { + padding: 16px; +} diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html new file mode 100644 index 00000000..75b5b19d --- /dev/null +++ b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html @@ -0,0 +1,48 @@ + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. +
+ + + + ⭐ + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. +
+ + + No content + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. + Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. + In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, + feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, + orci enim rutrum enim, vel tempor sapien arcu a tellus. +
+ + + No content + + + No content + + \ No newline at end of file diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts new file mode 100644 index 00000000..0f103327 --- /dev/null +++ b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Complex Example + */ +@Component({ + selector: 'tabs-template-label-example', + templateUrl: 'tabs-template-label-example.html', + styleUrls: ['./tabs-template-label-example.css'] +}) +export class TabsTemplateLabelExample {} diff --git a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css new file mode 100644 index 00000000..d7c40156 --- /dev/null +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css @@ -0,0 +1,7 @@ +.example-icon { + padding: 0 14px; +} + +.example-spacer { + flex: 1 1 auto; +} diff --git a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html new file mode 100644 index 00000000..9b178a21 --- /dev/null +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html @@ -0,0 +1,16 @@ + + Custom Toolbar + + + Second Line + + verified_user + + + + Third Line + + favorite + delete + + diff --git a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts new file mode 100644 index 00000000..3ad53173 --- /dev/null +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Multi-row toolbar + */ +@Component({ + selector: 'toolbar-multirow-example', + templateUrl: 'toolbar-multirow-example.html', + styleUrls: ['toolbar-multirow-example.css'], +}) +export class ToolbarMultirowExample {} diff --git a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.css b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html new file mode 100644 index 00000000..bf8cc399 --- /dev/null +++ b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html @@ -0,0 +1 @@ +My App diff --git a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts new file mode 100644 index 00000000..5d543043 --- /dev/null +++ b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic toolbar + */ +@Component({ + selector: 'toolbar-overview-example', + templateUrl: 'toolbar-overview-example.html', +}) +export class ToolbarOverviewExample {} diff --git a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.css b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.css new file mode 100644 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html new file mode 100644 index 00000000..8319a854 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html @@ -0,0 +1 @@ +I have a tooltip diff --git a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts new file mode 100644 index 00000000..ffb53c02 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts @@ -0,0 +1,10 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic tooltip + */ +@Component({ + selector: 'tooltip-overview-example', + templateUrl: 'tooltip-overview-example.html', +}) +export class TooltipOverviewExample {} diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css new file mode 100644 index 00000000..04ec59dd --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css @@ -0,0 +1,9 @@ +.example-tooltip-host { + display: inline-flex; + align-items: center; + margin: 50px; +} + +.example-select { + margin: 0 10px; +} diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html new file mode 100644 index 00000000..156a5bf6 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html @@ -0,0 +1,11 @@ +
+ Show tooltip + + Before + After + Above + Below + Left + Right + +
diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts new file mode 100644 index 00000000..12741b77 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +/** + * @title Tooltip with custom position + */ +@Component({ + selector: 'tooltip-position-example', + templateUrl: 'tooltip-position-example.html', + styleUrls: ['tooltip-position-example.css'], +}) +export class TooltipPositionExample { + position = 'before'; +} diff --git a/src/assets/images/examples/shiba1.jpg b/src/assets/images/examples/shiba1.jpg new file mode 100644 index 00000000..86c2fbe5 Binary files /dev/null and b/src/assets/images/examples/shiba1.jpg differ diff --git a/src/assets/images/examples/shiba2.jpg b/src/assets/images/examples/shiba2.jpg new file mode 100644 index 00000000..ace9d404 Binary files /dev/null and b/src/assets/images/examples/shiba2.jpg differ diff --git a/src/assets/images/examples/thumbup-icon.svg b/src/assets/images/examples/thumbup-icon.svg new file mode 100644 index 00000000..2391a9f6 --- /dev/null +++ b/src/assets/images/examples/thumbup-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/test.html b/src/assets/test.html new file mode 100644 index 00000000..3666e2a8 --- /dev/null +++ b/src/assets/test.html @@ -0,0 +1 @@ +

HEEYYY HO

\ No newline at end of file