diff --git a/package-lock.json b/package-lock.json index 4fb35baf..2828f048 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,17 +43,17 @@ } }, "@angular/animations": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.3.tgz", - "integrity": "sha1-OWxKW/sihH+eRYJFuplfnBMMDPM=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.4.tgz", + "integrity": "sha1-ovk1NgQ0er4V35gpIFiEL1Lwi8I=", "requires": { "tslib": "1.7.1" } }, "@angular/cdk": { - "version": "2.0.0-beta.11", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.11.tgz", - "integrity": "sha512-sbOqPoC439SDmpLiMq2XjidMMCJ6ofToDew4IXd9ne0jLSd0gGU20tTrRHf79HMTmlAySP7PBOq4Wv1eOFu/8A==", + "version": "2.0.0-beta.12", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz", + "integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=", "requires": { "tslib": "1.7.1" } @@ -124,32 +124,41 @@ } }, "@angular/common": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.3.tgz", - "integrity": "sha1-+SrGiwK+xfDm02A6hDKU3JbJYHQ=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.4.tgz", + "integrity": "sha1-rgqBiqoMaj8JAee4C9lOHCLrk2U=", "requires": { "tslib": "1.7.1" } }, "@angular/compiler": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.3.tgz", - "integrity": "sha1-jwEWPa19s0CEl9mdOHVUtrGFrWY=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.4.tgz", + "integrity": "sha1-Mm6wAp2aNUGqyhJN75rcUcNvK0E=", "requires": { "tslib": "1.7.1" } }, "@angular/compiler-cli": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.3.tgz", - "integrity": "sha1-GDr4HxQRhrjWYLBkKVktQLdUCko=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.4.tgz", + "integrity": "sha1-BjCApJfZF1OWglBQIixxfaGE9s8=", "dev": true, "requires": { - "@angular/tsc-wrapped": "4.4.3", + "@angular/tsc-wrapped": "4.4.4", "minimist": "1.2.0", "reflect-metadata": "0.1.10" }, "dependencies": { + "@angular/tsc-wrapped": { + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.4.tgz", + "integrity": "sha1-mEGCHlVha4JsoWAlD+heFfx0/8M=", + "dev": true, + "requires": { + "tsickle": "0.21.6" + } + }, "minimist": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", @@ -159,9 +168,9 @@ } }, "@angular/core": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.3.tgz", - "integrity": "sha1-5x0rB76qy6tIq39R1OIobqXXDhU=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.4.tgz", + "integrity": "sha1-vTfs9UFY+XSJmWyThr0iL4CjL1w=", "requires": { "tslib": "1.7.1" } @@ -175,68 +184,59 @@ } }, "@angular/forms": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.3.tgz", - "integrity": "sha1-JbQburWL8dqHJBHIUXwQ18U3PY4=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.4.tgz", + "integrity": "sha1-TbN5BQm2sQ8duKfBt/Uhh89kz9Q=", "requires": { "tslib": "1.7.1" } }, "@angular/http": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.3.tgz", - "integrity": "sha1-tVftJBRKrMRLE2zUd+hNL1eAiQM=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.4.tgz", + "integrity": "sha1-Zn+vYWu2JBaOr65u6S5euiOp0fI=", "requires": { "tslib": "1.7.1" } }, "@angular/language-service": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.3.tgz", - "integrity": "sha1-RScBGllJZ6OW7/PAXtFb1MhtUbc=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.4.tgz", + "integrity": "sha1-D2hgUuOVDBkSjxO3Qp/BS6/mm9Q=", "dev": true }, "@angular/material": { - "version": "2.0.0-beta.11", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.11.tgz", - "integrity": "sha512-k4eyil3n8aHqqS3Fq4N77XvF3bcXA2Ttgf9ujDZwXmMd2NlR4XL+LJrguPLwNSQ6i3EYT+ovE2p4XUu2nkHVeQ==", + "version": "2.0.0-beta.12", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz", + "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=", "requires": { "tslib": "1.7.1" } }, "@angular/platform-browser": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.3.tgz", - "integrity": "sha1-I/mkW9Pcf0TZeHf7+OYDLez8ncs=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.4.tgz", + "integrity": "sha1-o4mOLnup2E/6DUcUTGlxF5x1ruY=", "requires": { "tslib": "1.7.1" } }, "@angular/platform-browser-dynamic": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.3.tgz", - "integrity": "sha1-5B3dglJDJ3UxDqtZQM3Y3wYY8IQ=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.4.tgz", + "integrity": "sha1-w8nrhUpShVagcFQSeTLlJ/qTLhQ=", "requires": { "tslib": "1.7.1" } }, "@angular/router": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.3.tgz", - "integrity": "sha1-JsyUd1o4YJRq6vHC6PYPTUTpCZE=", + "version": "4.4.4", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.4.tgz", + "integrity": "sha1-e+ORCW6EPLPgT58F0dZaiN+bx88=", "requires": { "tslib": "1.7.1" } }, - "@angular/tsc-wrapped": { - "version": "4.4.3", - "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.3.tgz", - "integrity": "sha1-LT84IQodTbA/yG3PHglYErhc0Rk=", - "dev": true, - "requires": { - "tsickle": "0.21.6" - } - }, "@angularclass/hmr": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/@angularclass/hmr/-/hmr-2.1.3.tgz", @@ -7882,6 +7882,15 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", @@ -7909,15 +7918,6 @@ } } }, - "string_decoder": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", - "dev": true, - "requires": { - "safe-buffer": "5.1.1" - } - }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", diff --git a/package.json b/package.json index 5bf77528..624f43d3 100644 --- a/package.json +++ b/package.json @@ -15,18 +15,18 @@ }, "private": true, "dependencies": { - "@angular/animations": "4.4.3", - "@angular/cdk": "2.0.0-beta.11", - "@angular/common": "4.4.3", - "@angular/compiler": "4.4.3", - "@angular/core": "4.4.3", + "@angular/animations": "4.4.4", + "@angular/cdk": "2.0.0-beta.12", + "@angular/common": "4.4.4", + "@angular/compiler": "4.4.4", + "@angular/core": "4.4.4", "@angular/flex-layout": "2.0.0-beta.9", - "@angular/forms": "4.4.3", - "@angular/http": "4.4.3", - "@angular/material": "2.0.0-beta.11", - "@angular/platform-browser": "4.4.3", - "@angular/platform-browser-dynamic": "4.4.3", - "@angular/router": "4.4.3", + "@angular/forms": "4.4.4", + "@angular/http": "4.4.4", + "@angular/material": "2.0.0-beta.12", + "@angular/platform-browser": "4.4.4", + "@angular/platform-browser-dynamic": "4.4.4", + "@angular/router": "4.4.4", "@swimlane/ngx-charts": "6.0.2", "@swimlane/ngx-datatable": "9.3.1", "@swimlane/ngx-dnd": "3.0.0", @@ -39,7 +39,6 @@ "hammerjs": "2.0.8", "highlight.js": "9.12.0", "intl": "1.2.5", - "md2": "0.0.28", "moment": "2.18.1", "ngx-color-picker": "4.3.1", "ngx-cookie-service": "1.0.7", @@ -51,8 +50,8 @@ }, "devDependencies": { "@angular/cli": "1.4.2", - "@angular/compiler-cli": "4.4.3", - "@angular/language-service": "4.4.3", + "@angular/compiler-cli": "4.4.4", + "@angular/language-service": "4.4.4", "@angularclass/hmr": "2.1.3", "@ngtools/webpack": "1.7.1", "@types/jasmine": "2.6.0", diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.html b/src/app/core/components/confirm-dialog/confirm-dialog.component.html index d7d60191..0f971757 100644 --- a/src/app/core/components/confirm-dialog/confirm-dialog.component.html +++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.html @@ -1,6 +1,6 @@ -

Confirm

-
{{confirmMessage}}
-
- - +

Confirm

+
{{confirmMessage}}
+
+ +
diff --git a/src/app/core/components/confirm-dialog/confirm-dialog.component.ts b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts index 08bb4600..24e22d35 100644 --- a/src/app/core/components/confirm-dialog/confirm-dialog.component.ts +++ b/src/app/core/components/confirm-dialog/confirm-dialog.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { MdDialogRef } from '@angular/material'; +import { MatDialogRef } from '@angular/material'; @Component({ selector : 'fuse-confirm-dialog', @@ -10,7 +10,7 @@ export class FuseConfirmDialogComponent implements OnInit { public confirmMessage: string; - constructor(public dialogRef: MdDialogRef) + constructor(public dialogRef: MatDialogRef) { } diff --git a/src/app/core/components/copier/copier.service.ts b/src/app/core/components/copier/copier.service.ts index 42ce0483..03227fc4 100644 --- a/src/app/core/components/copier/copier.service.ts +++ b/src/app/core/components/copier/copier.service.ts @@ -6,55 +6,60 @@ * * Both released under MIT license - © Zeno Rocha */ -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; @Injectable() -export class CopierService { +export class CopierService +{ - private textarea: HTMLTextAreaElement; + private textarea: HTMLTextAreaElement; - /** Copy the text value to the clipboard. */ - copyText(text: string): boolean { - this.createTextareaAndSelect(text); + /** Copy the text value to the clipboard. */ + copyText(text: string): boolean + { + this.createTextareaAndSelect(text); - const copySuccessful = document.execCommand('copy'); - this.removeFake(); + 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; + 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/components/demo/demo-sidenav/demo-sidenav.component.html b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html index 069cf67a..9c1b47a4 100644 --- a/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html +++ b/src/app/core/components/demo/demo-sidenav/demo-sidenav.component.html @@ -1,100 +1,100 @@
- -

Sidenav Demo

+ +

Sidenav Demo

- + Sidenav Item 1 - + - + - + Sidenav Item 2 - + - + - + Sidenav Item 3 - + - + - + Sidenav Item 4 - + - + - + Sidenav Item 5 - + - + - + Sidenav Item 6 - + - + - + Sidenav Item 7 - + - + - + Sidenav Item 8 - + - + - + Sidenav Item 9 - + - + - + Sidenav Item 10 - + - + - + Sidenav Item 11 - + - + - + Sidenav Item 12 - + - + - + Sidenav Item 13 - + - + - + Sidenav Item 14 - + - + - + Sidenav Item 15 - + - + - + Sidenav Item 16 - + - +
diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.html b/src/app/core/components/material-color-picker/material-color-picker.component.html index e305b812..a1209174 100644 --- a/src/app/core/components/material-color-picker/material-color-picker.component.html +++ b/src/app/core/components/material-color-picker/material-color-picker.component.html @@ -1,23 +1,23 @@ - - + -
- @@ -28,11 +28,11 @@ Select Color -
@@ -47,10 +47,10 @@ fxLayoutAlign="start start" class="colors" fusePerfectScrollbar>
+ fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple> {{color.key}} @@ -67,16 +67,16 @@
+ fxLayout="row" fxLayoutAlign="start end" mat-ink-ripple> {{hue}} - check + check
- + diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.scss b/src/app/core/components/material-color-picker/material-color-picker.component.scss index fc5b4fab..9a4647bb 100644 --- a/src/app/core/components/material-color-picker/material-color-picker.component.scss +++ b/src/app/core/components/material-color-picker/material-color-picker.component.scss @@ -11,7 +11,7 @@ overflow: hidden; min-height: 258px; height: 308px; - background-color: #f7f7f7; + background-color: #F7F7F7; .view { position: absolute; @@ -39,7 +39,7 @@ font-size: 10px; } - md-icon { + mat-icon { position: absolute; top: 2px; right: 2px; diff --git a/src/app/core/components/material-color-picker/material-color-picker.component.ts b/src/app/core/components/material-color-picker/material-color-picker.component.ts index 786ce470..317c829d 100644 --- a/src/app/core/components/material-color-picker/material-color-picker.component.ts +++ b/src/app/core/components/material-color-picker/material-color-picker.component.ts @@ -129,7 +129,7 @@ export class FuseMaterialColorPickerComponent implements OnInit, OnChanges { this.selectedBg = MatColors.getColor(this.selectedPalette)[this.selectedHue]; this.selectedFg = MatColors.getColor(this.selectedPalette).contrast[this.selectedHue]; - this.selectedClass = 'md-' + this.selectedPalette + '-' + this.selectedHue + '-bg'; + this.selectedClass = 'mat-' + this.selectedPalette + '-' + this.selectedHue + '-bg'; } else { diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html index 9fcef7d6..4712628d 100644 --- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html +++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html @@ -1,7 +1,7 @@ - - {{item.icon}} + + {{item.icon}} {{item.title}} - keyboard_arrow_right + keyboard_arrow_right
diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html index 54045a83..c3c95b34 100644 --- a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html +++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html @@ -1,6 +1,6 @@ - - {{item.icon}} + {{item.icon}} {{item.title}} {{item.badge.title}} \ No newline at end of file diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html index a55711f1..5a255b6f 100644 --- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html +++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html @@ -1,7 +1,7 @@ - - {{item.icon}} + + {{item.icon}} {{item.title}} - keyboard_arrow_right + keyboard_arrow_right
diff --git a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html index 2767e8dd..443dd326 100644 --- a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html +++ b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html @@ -1,6 +1,6 @@ - - {{item.icon}} + {{item.icon}} {{item.title}} {{item.badge.title}} diff --git a/src/app/core/components/search-bar/search-bar.component.html b/src/app/core/components/search-bar/search-bar.component.html index a2ce08c3..c78502a7 100644 --- a/src/app/core/components/search-bar/search-bar.component.html +++ b/src/app/core/components/search-bar/search-bar.component.html @@ -1,20 +1,20 @@
-
diff --git a/src/app/core/components/shortcuts/shortcuts.component.html b/src/app/core/components/shortcuts/shortcuts.component.html index ad98a338..109418ca 100644 --- a/src/app/core/components/shortcuts/shortcuts.component.html +++ b/src/app/core/components/shortcuts/shortcuts.component.html @@ -2,8 +2,8 @@
-
@@ -16,8 +16,8 @@
- - {{shortcutItem.icon}} + + {{shortcutItem.icon}} {{shortcutItem.title.substr(0, 1).toUpperCase()}} @@ -25,64 +25,64 @@
-
-
- + - - - + + + - - + + - +
- {{shortcutItem.icon}} + {{shortcutItem.icon}} {{shortcutItem.title.substr(0, 1).toUpperCase()}} -

{{shortcutItem.title}}

- star +

{{shortcutItem.title}}

+ star
- - + +

No shortcuts yet!

- - + + - - + +
- {{navigationItem.icon}} + {{navigationItem.icon}} {{navigationItem.title.substr(0, 1).toUpperCase()}} -

{{navigationItem.title}}

- star +

{{navigationItem.title}}

+ star
- - - + + +
diff --git a/src/app/core/components/theme-options/theme-options.component.html b/src/app/core/components/theme-options/theme-options.component.html index e49e995b..9cc7b003 100644 --- a/src/app/core/components/theme-options/theme-options.component.html +++ b/src/app/core/components/theme-options/theme-options.component.html @@ -1,50 +1,50 @@ -
-
+
-

Navigation:

- - Top - Left - Right - None - + + Top + Left + Right + None +

Toolbar:

- - Below - Above - None - + + Below + Above + None +

Footer:

- - Below - Above - None - + + Below + Above + None +

Layout Mode:

- - Boxed - Fullwidth - + + Boxed + Fullwidth + - +

Colors:

@@ -69,29 +69,29 @@
- +

Router Animation:

- - + + None - - + + Slide up - - + + Slide down - - + + Slide right - - + + Slide left - - + + Fade in - - + +
diff --git a/src/app/core/components/theme-options/theme-options.component.scss b/src/app/core/components/theme-options/theme-options.component.scss index f01c54f4..bc116a3c 100644 --- a/src/app/core/components/theme-options/theme-options.component.scss +++ b/src/app/core/components/theme-options/theme-options.component.scss @@ -14,6 +14,7 @@ display: block; right: 0; top: 160px; + z-index: 998; &.bar-closed .theme-options-panel { display: none; @@ -48,7 +49,7 @@ color: rgba(0, 0, 0, 0.54); } - .mat-divider{ + .mat-divider { display: block !important; width: 100%; margin: 24px 0 16px 0; @@ -102,7 +103,7 @@ opacity: .75; z-index: 998; - md-icon { + mat-icon { animation: rotating 3s linear infinite; } diff --git a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts index b7042968..403bce13 100644 --- a/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts +++ b/src/app/core/directives/fuse-if-on-dom/fuse-if-on-dom.directive.ts @@ -21,7 +21,7 @@ export class FuseIfOnDomDirective implements AfterContentChecked { setTimeout(() => { this.viewContainer.createEmbeddedView(this.templateRef); - }, 350); + }, 300); this.isCreated = true; } else if ( this.isCreated && !document.body.contains(this.element.nativeElement) ) diff --git a/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts new file mode 100644 index 00000000..55161597 --- /dev/null +++ b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.directive.ts @@ -0,0 +1,99 @@ +import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core'; +import { MatSidenav } from '@angular/material'; +import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service'; +import { FuseMatchMedia } from '../../services/match-media.service'; +import { ObservableMedia } from '@angular/flex-layout'; +import { Subscription } from 'rxjs/Subscription'; + +@Directive({ + selector: '[fuseMatSidenavHelper]' +}) +export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy +{ + matchMediaSubscription: Subscription; + + @HostBinding('class.mat-is-locked-open') isLockedOpen = true; + @HostBinding('class.mat-stop-transition') stopTransition = true; + + @Input('fuseMatSidenavHelper') id: string; + @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string; + + constructor( + private fuseMatSidenavService: FuseMatSidenavHelperService, + private fuseMatchMedia: FuseMatchMedia, + private observableMedia: ObservableMedia, + private matSidenav: MatSidenav + ) + { + } + + ngOnInit() + { + this.fuseMatSidenavService.setSidenav(this.id, this.matSidenav); + + if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) + { + setTimeout(() => { + this.isLockedOpen = true; + this.matSidenav.mode = 'side'; + this.matSidenav.open(); + }); + this.stopTransition = false; + } + else + { + setTimeout(() => { + this.isLockedOpen = false; + this.matSidenav.mode = 'over'; + this.matSidenav.close(); + }); + + setTimeout(() => { + this.stopTransition = false; + }, 3000); + } + + this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => { + if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) + { + setTimeout(() => { + this.isLockedOpen = true; + this.matSidenav.mode = 'side'; + this.matSidenav.open(); + }); + } + else + { + setTimeout(() => { + this.isLockedOpen = false; + this.matSidenav.mode = 'over'; + this.matSidenav.close(); + }); + } + }); + + } + + ngOnDestroy() + { + this.matchMediaSubscription.unsubscribe(); + } +} + +@Directive({ + selector: '[fuseMatSidenavToggler]' +}) +export class FuseMatSidenavTogglerDirective +{ + @Input('fuseMatSidenavToggler') id; + + constructor(private fuseMatSidenavService: FuseMatSidenavHelperService) + { + } + + @HostListener('click') + onClick() + { + this.fuseMatSidenavService.getSidenav(this.id).toggle(); + } +} diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts similarity index 70% rename from src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts rename to src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts index d928f46e..748d9480 100644 --- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.service.ts +++ b/src/app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service.ts @@ -1,10 +1,10 @@ import { Injectable } from '@angular/core'; -import { MdSidenav } from '@angular/material'; +import { MatSidenav } from '@angular/material'; @Injectable() -export class FuseMdSidenavHelperService +export class FuseMatSidenavHelperService { - sidenavInstances: MdSidenav[]; + sidenavInstances: MatSidenav[]; constructor() { diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts deleted file mode 100644 index f0ad7ab4..00000000 --- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core'; -import { MdSidenav } from '@angular/material'; -import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service'; -import { FuseMatchMedia } from '../../services/match-media.service'; -import { ObservableMedia } from '@angular/flex-layout'; -import { Subscription } from 'rxjs/Subscription'; - -@Directive({ - selector: '[fuseMdSidenavHelper]' -}) -export class FuseMdSidenavHelperDirective implements OnInit, OnDestroy -{ - matchMediaSubscription: Subscription; - - @HostBinding('class.md-is-locked-open') isLockedOpen = true; - @HostBinding('class.md-stop-transition') stopTransition = true; - - @Input('fuseMdSidenavHelper') id: string; - @Input('md-is-locked-open') mdIsLockedOpenBreakpoint: string; - - constructor( - private fuseMdSidenavService: FuseMdSidenavHelperService, - private fuseMatchMedia: FuseMatchMedia, - private observableMedia: ObservableMedia, - private mdSidenav: MdSidenav - ) - { - } - - ngOnInit() - { - this.fuseMdSidenavService.setSidenav(this.id, this.mdSidenav); - - if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) ) - { - setTimeout(() => { - this.isLockedOpen = true; - this.mdSidenav.mode = 'side'; - this.mdSidenav.open(); - }); - this.stopTransition = false; - } - else - { - setTimeout(() => { - this.isLockedOpen = false; - this.mdSidenav.mode = 'over'; - this.mdSidenav.close(); - }); - - setTimeout(() => { - this.stopTransition = false; - }, 3000); - } - - this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => { - if ( this.observableMedia.isActive(this.mdIsLockedOpenBreakpoint) ) - { - setTimeout(() => { - this.isLockedOpen = true; - this.mdSidenav.mode = 'side'; - this.mdSidenav.open(); - }); - } - else - { - setTimeout(() => { - this.isLockedOpen = false; - this.mdSidenav.mode = 'over'; - this.mdSidenav.close(); - }); - } - }); - - } - - ngOnDestroy() - { - this.matchMediaSubscription.unsubscribe(); - } -} - -@Directive({ - selector: '[fuseMdSidenavToggler]' -}) -export class FuseMdSidenavTogglerDirective -{ - @Input('fuseMdSidenavToggler') id; - - constructor(private fuseMdSidenavService: FuseMdSidenavHelperService) - { - } - - @HostListener('click') - onClick() - { - this.fuseMdSidenavService.getSidenav(this.id).toggle(); - } -} diff --git a/src/app/core/modules/material.module.ts b/src/app/core/modules/material.module.ts index f4a3d895..36d357c6 100644 --- a/src/app/core/modules/material.module.ts +++ b/src/app/core/modules/material.module.ts @@ -1,106 +1,108 @@ import { NgModule } from '@angular/core'; import { - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCheckboxModule, - MdToolbarModule, - MdTooltipModule, - MdCardModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdStepperModule, - MdSortModule, - MdTableModule, - MdTabsModule + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCheckboxModule, + MatToolbarModule, + MatTooltipModule, + MatCardModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatStepperModule } from '@angular/material'; import { CdkTableModule } from '@angular/cdk/table'; @NgModule({ imports: [ - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdStepperModule, - MdSortModule, - MdTableModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatStepperModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, CdkTableModule ], exports: [ - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdStepperModule, - MdSortModule, - MdTableModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatStepperModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, CdkTableModule ] }) diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 472dbfbe..fe2787f2 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -8,25 +8,24 @@ import { ColorPickerModule } from 'ngx-color-picker'; import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; -import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from '../directives/md-sidenav-helper/md-sidenav-helper.directive'; +import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive'; import { FusePipesModule } from '../pipes/pipes.module'; import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component'; import { FuseCountdownComponent } from '../components/countdown/countdown.component'; import { FuseMatchMedia } from '../services/match-media.service'; import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service'; -import { FuseMdSidenavHelperService } from '../directives/md-sidenav-helper/md-sidenav-helper.service'; +import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service'; import { FuseHljsComponent } from '../components/hljs/hljs.component'; import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive'; import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive'; 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 : [ - FuseMdSidenavHelperDirective, - FuseMdSidenavTogglerDirective, + FuseMatSidenavHelperDirective, + FuseMatSidenavTogglerDirective, FuseConfirmDialogComponent, FuseCountdownComponent, FuseHljsComponent, @@ -44,7 +43,6 @@ import { MarkdownModule } from 'angular2-markdown'; ColorPickerModule, NgxDnDModule, NgxDatatableModule, - Md2Module, MarkdownModule ], exports : [ @@ -52,8 +50,8 @@ import { MarkdownModule } from 'angular2-markdown'; MaterialModule, CommonModule, FormsModule, - FuseMdSidenavHelperDirective, - FuseMdSidenavTogglerDirective, + FuseMatSidenavHelperDirective, + FuseMatSidenavTogglerDirective, FusePipesModule, FuseCountdownComponent, FuseHljsComponent, @@ -64,7 +62,6 @@ import { MarkdownModule } from 'angular2-markdown'; NgxDatatableModule, FuseIfOnDomDirective, FuseMaterialColorPickerComponent, - Md2Module, MarkdownModule ], entryComponents: [ @@ -74,7 +71,7 @@ import { MarkdownModule } from 'angular2-markdown'; CookieService, FuseMatchMedia, FuseNavbarVerticalService, - FuseMdSidenavHelperService + FuseMatSidenavHelperService ] }) diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss index 168656a3..45cc656e 100644 --- a/src/app/core/scss/partials/_angular-material-fix.scss +++ b/src/app/core/scss/partials/_angular-material-fix.scss @@ -7,11 +7,11 @@ } // Fix: "Sidenav opening with animations for the first time" -md-sidenav-container { +mat-sidenav-container { - md-sidenav { + mat-sidenav { - &[md-is-locked-open].md-stop-transition { + &[mat-is-locked-open].mat-stop-transition { transition: none !important; transform: translate3d(0, 0, 0) !important; opacity: 0; diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss index 7d61345f..327e0c4f 100644 --- a/src/app/core/scss/partials/_colors.scss +++ b/src/app/core/scss/partials/_colors.scss @@ -164,7 +164,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 background-color: $color !important; } - .md-#{$colorName}#{$hue}-bg { + .mat-#{$colorName}#{$hue}-bg { background-color: $color !important; color: $contrastColor !important; diff --git a/src/app/core/scss/partials/_global.scss b/src/app/core/scss/partials/_global.scss index dfdf4f60..f7b93621 100644 --- a/src/app/core/scss/partials/_global.scss +++ b/src/app/core/scss/partials/_global.scss @@ -1,6 +1,6 @@ body { - > md-sidenav-container { + > mat-sidenav-container { height: 100%; } } diff --git a/src/app/core/scss/partials/_icons.scss b/src/app/core/scss/partials/_icons.scss index 44f18524..43281c59 100644 --- a/src/app/core/scss/partials/_icons.scss +++ b/src/app/core/scss/partials/_icons.scss @@ -1,5 +1,5 @@ i, -md-icon { +mat-icon { color: rgba(0, 0, 0, 0.54); font-size: 24px; width: 24px; diff --git a/src/app/core/scss/partials/_material.scss b/src/app/core/scss/partials/_material.scss index bb91fdc9..3232602b 100644 --- a/src/app/core/scss/partials/_material.scss +++ b/src/app/core/scss/partials/_material.scss @@ -46,14 +46,14 @@ margin-top: 0; margin-bottom: 0; } - md-icon.status { + mat-icon.status { position: absolute; top: 28px; left: 28px; } } -md-icon.status { +mat-icon.status { border-radius: 50%; &.online { @@ -116,7 +116,7 @@ md-icon.status { max-height: 48px; height: 48px; - md-icon { + mat-icon { margin: 0 16px 0 0; } @@ -142,7 +142,7 @@ md-icon.status { } } - md-divider { + mat-divider { margin: 8px 0; } } @@ -234,7 +234,7 @@ md-icon.status { } } - md-divider { + mat-divider { margin: 16px 32px; } diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss index 51595b0a..48eab98a 100644 --- a/src/app/core/scss/partials/_page-layouts.scss +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -112,12 +112,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); // Single scroll &.single-scroll { - > md-sidenav-container { + > mat-sidenav-container { flex: 1 0 auto; } } - > md-sidenav-container { + > mat-sidenav-container { display: flex; flex: 1; background: none; @@ -136,7 +136,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); overflow-y: hidden; @include mat-elevation(7); - &.md-is-locked-open { + &.mat-is-locked-open { background: none; box-shadow: none; } @@ -216,11 +216,11 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.left-sidenav { // Sidenav - > md-sidenav-container { + > mat-sidenav-container { .sidenav { - &.md-is-locked-open { + &.mat-is-locked-open { ~ .mat-sidenav-content, ~ .mat-drawer-content { @@ -238,12 +238,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.right-sidenav { // Sidenav - > md-sidenav-container { + > mat-sidenav-container { .sidenav { order: 999; - &.md-is-locked-open { + &.mat-is-locked-open { ~ .mat-sidenav-content, ~ .mat-drawer-content { @@ -295,7 +295,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); // Single scroll &.single-scroll { - > md-sidenav-container { + > mat-sidenav-container { flex: 1 0 auto; > .mat-sidenav-content, @@ -309,7 +309,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); // Inner Sidenav &.inner-sidenav { - > md-sidenav-container { + > mat-sidenav-container { flex: 1; .sidenav { @@ -338,7 +338,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); } } - > md-sidenav-container { + > mat-sidenav-container { display: flex; flex-direction: column; //flex-direction: row; @@ -354,7 +354,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); z-index: 51; @include mat-elevation(7); - &.md-is-locked-open { + &.mat-is-locked-open { width: 220px; min-width: 220px; max-width: 220px; @@ -440,7 +440,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.left-sidenav, &.right-sidenav { - > md-sidenav-container { + > mat-sidenav-container { flex: 1 0 auto; } } @@ -458,7 +458,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.left-sidenav, &.right-sidenav { - > md-sidenav-container { + > mat-sidenav-container { flex: 1 0 auto !important; > .mat-sidenav-content, @@ -483,7 +483,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); &.left-sidenav, &.right-sidenav { - > md-sidenav-container { + > mat-sidenav-container { > .mat-sidenav-content, > .mat-drawer-content { diff --git a/src/app/core/scss/partials/_reset.scss b/src/app/core/scss/partials/_reset.scss index 1c42a8ac..3b5ea1fa 100644 --- a/src/app/core/scss/partials/_reset.scss +++ b/src/app/core/scss/partials/_reset.scss @@ -28,7 +28,7 @@ html, body { } // Reset non angular-material input's default browser/os styles -*:not(md-input-container) { +*:not(mat-input-container) { > input { border: none; @@ -55,7 +55,7 @@ html, body { } } -*:not(md-input-container) { +*:not(mat-input-container) { > input[type="button"], > button, diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts index 49c9fe4d..2d2998f0 100644 --- a/src/app/core/services/config.service.ts +++ b/src/app/core/services/config.service.ts @@ -28,9 +28,9 @@ export class FuseConfigService mode : 'fullwidth' // 'boxed', 'fullwidth' }, colorClasses : { - toolbar: 'md-white-500-bg', - navbar : 'md-fuse-dark-500-bg', - footer : 'md-fuse-dark-700-bg' + toolbar: 'mat-white-500-bg', + navbar : 'mat-fuse-dark-500-bg', + footer : 'mat-fuse-dark-700-bg' }, customScrollbars: true, routerAnimation : 'fadeIn' // fadeIn, slideUp, slideDown, slideRight, slideLeft diff --git a/src/app/fuse-fake-db/projects-dashboard.ts b/src/app/fuse-fake-db/projects-dashboard.ts index 80aa31c9..1e520440 100644 --- a/src/app/fuse-fake-db/projects-dashboard.ts +++ b/src/app/fuse-fake-db/projects-dashboard.ts @@ -1622,7 +1622,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Wireframing', - 'classes': 'md-primary-bg', + 'classes': 'mat-primary-bg', 'icon' : '' }, { @@ -1654,7 +1654,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Design', - 'classes': 'md-green-bg', + 'classes': 'mat-green-bg', 'icon' : '' }, { @@ -1686,7 +1686,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Coding', - 'classes': 'md-red-bg', + 'classes': 'mat-red-bg', 'icon' : '' }, { @@ -1718,7 +1718,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Marketing', - 'classes': 'md-accent-bg', + 'classes': 'mat-accent-bg', 'icon' : '' }, { @@ -1750,7 +1750,7 @@ export class ProjectsDashboardDb [ { 'value' : 'Extra', - 'classes': 'md-orange-bg', + 'classes': 'mat-orange-bg', 'icon' : '' }, { diff --git a/src/app/fuse-fake-db/scrumboard.ts b/src/app/fuse-fake-db/scrumboard.ts index aac7d95b..012e2fb9 100644 --- a/src/app/fuse-fake-db/scrumboard.ts +++ b/src/app/fuse-fake-db/scrumboard.ts @@ -565,22 +565,22 @@ export class ScrumboardFakeDb { 'id' : '26022e4129ad3a5sc28b36cd', 'name' : 'High Priority', - 'color': 'md-red-500-bg' + 'color': 'mat-red-500-bg' }, { 'id' : '56027e4119ad3a5dc28b36cd', 'name' : 'Design', - 'color': 'md-orange-400-bg' + 'color': 'mat-orange-400-bg' }, { 'id' : '5640635e19ad3a5dc21416b2', 'name' : 'App', - 'color': 'md-blue-600-bg' + 'color': 'mat-blue-600-bg' }, { 'id' : '6540635g19ad3s5dc31412b2', 'name' : 'Feature', - 'color': 'md-green-400-bg' + 'color': 'mat-green-400-bg' } ] }, @@ -769,17 +769,17 @@ export class ScrumboardFakeDb { 'id' : '56027e4119ad3a5dc28b36cd', 'name' : 'Design', - 'color': 'md-red-500-bg' + 'color': 'mat-red-500-bg' }, { 'id' : '5640635e19ad3a5dc21416b2', 'name' : 'App', - 'color': 'md-blue-500-bg' + 'color': 'mat-blue-500-bg' }, { 'id' : '6540635g19ad3s5dc31412b2', 'name' : 'Feature', - 'color': 'md-green-400-bg' + 'color': 'mat-green-400-bg' } ] } diff --git a/src/app/main/content/apps/calendar/calendar.component.html b/src/app/main/content/apps/calendar/calendar.component.html index 0e04352d..ae61d8de 100644 --- a/src/app/main/content/apps/calendar/calendar.component.html +++ b/src/app/main/content/apps/calendar/calendar.component.html @@ -9,7 +9,7 @@ @@ -53,35 +53,35 @@
-
{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}
-
-
diff --git a/src/app/main/content/apps/calendar/calendar.component.scss b/src/app/main/content/apps/calendar/calendar.component.scss index 19500ca3..e59de032 100644 --- a/src/app/main/content/apps/calendar/calendar.component.scss +++ b/src/app/main/content/apps/calendar/calendar.component.scss @@ -303,7 +303,7 @@ z-index: 10; } - md-icon { + mat-icon { color: #FFFFFF; } } diff --git a/src/app/main/content/apps/calendar/calendar.component.ts b/src/app/main/content/apps/calendar/calendar.component.ts index 8c424350..7d136ab8 100644 --- a/src/app/main/content/apps/calendar/calendar.component.ts +++ b/src/app/main/content/apps/calendar/calendar.component.ts @@ -1,7 +1,7 @@ import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns'; import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Subject } from 'rxjs/Subject'; -import { MdDialog, MdDialogRef } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { FuseCalendarEventFormDialogComponent } from './event-form/event-form.component'; import { FormGroup } from '@angular/forms'; import { CalendarEventModel } from './event.model'; @@ -38,12 +38,12 @@ export class FuseCalendarComponent implements OnInit dialogRef: any; - confirmDialogRef: MdDialogRef; + confirmDialogRef: MatDialogRef; selectedDay: any; constructor( - public dialog: MdDialog, + public dialog: MatDialog, public calendarService: CalendarService ) { diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.html b/src/app/main/content/apps/calendar/event-form/event-form.component.html index 2bdc588a..4fd38076 100644 --- a/src/app/main/content/apps/calendar/event-form/event-form.component.html +++ b/src/app/main/content/apps/calendar/event-form/event-form.component.html @@ -1,40 +1,40 @@
- +
{{dialogTitle}} -
- + -
+
- - + - +
- All Day - +
- - + - - - + + - +
- - - - - + + + + + - - - + + +
- - - - - + + + + + - - - + + +
- - + - + - + - - +
-
+
diff --git a/src/app/main/content/apps/calendar/event-form/event-form.component.ts b/src/app/main/content/apps/calendar/event-form/event-form.component.ts index af0add84..9dfc5240 100644 --- a/src/app/main/content/apps/calendar/event-form/event-form.component.ts +++ b/src/app/main/content/apps/calendar/event-form/event-form.component.ts @@ -1,5 +1,5 @@ import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; -import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { CalendarEvent } from 'angular-calendar'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { CalendarEventModel } from '../event.model'; @@ -22,8 +22,8 @@ export class FuseCalendarEventFormDialogComponent implements OnInit presetColors = MatColors.presets; constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) private data: any, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private data: any, private formBuilder: FormBuilder ) { diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.html b/src/app/main/content/apps/chat/chat-start/chat-start.component.html index 7d7a5e46..77c6eb9e 100644 --- a/src/app/main/content/apps/chat/chat-start/chat-start.component.html +++ b/src/app/main/content/apps/chat/chat-start/chat-start.component.html @@ -3,7 +3,7 @@ @@ -11,7 +11,7 @@ Select contact to start the chat!.. - diff --git a/src/app/main/content/apps/chat/chat-start/chat-start.component.scss b/src/app/main/content/apps/chat/chat-start/chat-start.component.scss index 7934fd4b..5c1f5133 100644 --- a/src/app/main/content/apps/chat/chat-start/chat-start.component.scss +++ b/src/app/main/content/apps/chat/chat-start/chat-start.component.scss @@ -19,7 +19,7 @@ line-height: 160px; } - md-icon { + mat-icon { color: mat-color($accent); } } diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.html b/src/app/main/content/apps/chat/chat-view/chat-view.component.html index 3e818c87..7b49732a 100644 --- a/src/app/main/content/apps/chat/chat-view/chat-view.component.html +++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.html @@ -2,23 +2,23 @@
- +
-
- chat + chat
+ fuseMatSidenavToggler="chat-right-sidenav" (click)="selectContact()">
@@ -26,9 +26,9 @@ class="avatar" alt="{{contact.name}}"/> - - + +
@@ -40,20 +40,20 @@
- - - - +
- + @@ -98,13 +98,13 @@ fxLayout="row" fxLayoutAlign="start center"> - - - + - diff --git a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss b/src/app/main/content/apps/chat/chat-view/chat-view.component.scss index bb255c29..15151e61 100644 --- a/src/app/main/content/apps/chat/chat-view/chat-view.component.scss +++ b/src/app/main/content/apps/chat/chat-view/chat-view.component.scss @@ -107,7 +107,7 @@ .reply-form { - md-input-container { + mat-form-field { margin: 0; padding-right: 16px; @@ -120,12 +120,12 @@ } } - .md-errors-spacer { + .mat-errors-spacer { display: none; } } - .md-button { + .mat-button { margin: 0; } } diff --git a/src/app/main/content/apps/chat/chat.component.html b/src/app/main/content/apps/chat/chat.component.html index b97a448d..c3922d6b 100644 --- a/src/app/main/content/apps/chat/chat.component.html +++ b/src/app/main/content/apps/chat/chat.component.html @@ -1,7 +1,7 @@
-
+
@@ -10,13 +10,13 @@
- + - + - + @@ -26,13 +26,13 @@ - + - + - +
diff --git a/src/app/main/content/apps/chat/chat.component.scss b/src/app/main/content/apps/chat/chat.component.scss index 2d483473..f4234a3f 100644 --- a/src/app/main/content/apps/chat/chat.component.scss +++ b/src/app/main/content/apps/chat/chat.component.scss @@ -37,7 +37,7 @@ max-width: 100%; } - md-sidenav { + mat-sidenav { display: flex; flex-direction: column; width: 400px; diff --git a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html index c788af9e..af3a7af4 100644 --- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html +++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html @@ -1,7 +1,7 @@
- +
@@ -12,75 +12,75 @@ {{user.name}} - + - + - - - - - +
- - - - - +
- +
- search + search @@ -88,10 +88,10 @@
- + - +
@@ -106,11 +106,11 @@
-
+
Chats
-
@@ -146,19 +146,19 @@
-
+
Contacts
-
- + {{user.name}}
{{user.name}}
- + - +
@@ -32,47 +32,47 @@
- +
- - - + - + - +
- + Online
- + - +
- + Away
- + - +
- + Do not disturb
- + - +
- + Offline
- - + +
- +
diff --git a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss index d591906b..514d3c39 100644 --- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss +++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.scss @@ -5,7 +5,7 @@ flex: 1; flex-direction: column; - md-toolbar { + mat-toolbar { background-color: mat-color($accent); color: map-get($accent, default-contrast); diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html index bd3c06ec..2aadbfca 100644 --- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html +++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html @@ -2,31 +2,31 @@
- +
Contact Info
-
- + {{contact.name}}
{{contact.name}}
- + - +
@@ -34,14 +34,14 @@
- + - - - + - +
diff --git a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss index d591906b..514d3c39 100644 --- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss +++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.scss @@ -5,7 +5,7 @@ flex: 1; flex-direction: column; - md-toolbar { + mat-toolbar { background-color: mat-color($accent); color: map-get($accent, default-contrast); diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html index 66ba7464..d0bb4b12 100644 --- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html +++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html @@ -1,104 +1,104 @@
- +
{{dialogTitle}} -
- +
{{contact.name}}
- - + + -
+
- account_circle - - - + account_circle + + +
- - - - + + + +
- star - - - + star + + +
- phone - - - + phone + + +
- email - - - + email + + +
- domain - - - + domain + + +
- work - - - + work + + +
- - - - - + + + + +
- home - - - + home + + +
- note - - - + note + + +
-
+
diff --git a/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts b/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts index 7124e272..517b3cf4 100644 --- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts +++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.ts @@ -1,5 +1,5 @@ import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; -import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { CalendarEvent } from 'angular-calendar'; import { FormBuilder, FormGroup } from '@angular/forms'; import 'rxjs/Rx'; @@ -21,8 +21,8 @@ export class FuseContactsContactFormDialogComponent implements OnInit contact: Contact; constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) private data: any, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private data: any, private formBuilder: FormBuilder ) { diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html index efc084d0..232b5629 100644 --- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.html +++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.html @@ -1,106 +1,106 @@ - + - - - - - + + + + + - - + + - + - Name - + Name +

{{contact.name}} {{contact.lastName}}

- + - Email - + Email + - + - Phone - + Phone +

{{contact.phone}}

- + - Job title - + Job title +

{{contact.jobTitle}}

- + - Company - + Company +

{{contact.company}}

- + - - + +
- - - - - +
- + - - - - + + + + diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts index 671554a7..4a5f524d 100644 --- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts +++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { ContactsService } from '../contacts.service'; import { Observable } from 'rxjs/Observable'; import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component'; -import { MdDialog, MdDialogRef } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { FormGroup } from '@angular/forms'; import { DataSource } from '@angular/cdk/collections'; @@ -27,11 +27,11 @@ export class FuseContactsContactListComponent implements OnInit dialogRef: any; - confirmDialogRef: MdDialogRef; + confirmDialogRef: MatDialogRef; constructor( private contactsService: ContactsService, - public dialog: MdDialog + public dialog: MatDialog ) { this.contactsService.onContactsChanged.subscribe(contacts => { diff --git a/src/app/main/content/apps/contacts/contacts.component.html b/src/app/main/content/apps/contacts/contacts.component.html index 7dbf22c5..3df02bd6 100644 --- a/src/app/main/content/apps/contacts/contacts.component.html +++ b/src/app/main/content/apps/contacts/contacts.component.html @@ -1,20 +1,20 @@
-
- @@ -24,11 +24,11 @@
- - - + + +
@@ -36,25 +36,25 @@ - + - + - + - +
-
+
@@ -64,13 +64,13 @@
- +
- diff --git a/src/app/main/content/apps/contacts/contacts.component.scss b/src/app/main/content/apps/contacts/contacts.component.scss index 4662a5d2..1f364d96 100644 --- a/src/app/main/content/apps/contacts/contacts.component.scss +++ b/src/app/main/content/apps/contacts/contacts.component.scss @@ -4,6 +4,7 @@ overflow: hidden; } } + #add-contact-button { position: absolute; bottom: 12px; diff --git a/src/app/main/content/apps/contacts/contacts.component.ts b/src/app/main/content/apps/contacts/contacts.component.ts index 381bc742..e38eb903 100644 --- a/src/app/main/content/apps/contacts/contacts.component.ts +++ b/src/app/main/content/apps/contacts/contacts.component.ts @@ -3,7 +3,7 @@ import { ContactsService } from './contacts.service'; import { fuseAnimations } from '../../../../core/animations'; import { FormControl, FormGroup } from '@angular/forms'; import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component'; -import { MdDialog } from '@angular/material'; +import { MatDialog } from '@angular/material'; @Component({ selector : 'fuse-contacts', @@ -20,7 +20,7 @@ export class FuseContactsComponent implements OnInit constructor( private contactsService: ContactsService, - public dialog: MdDialog + public dialog: MatDialog ) { this.searchInput = new FormControl(''); diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html index 4087740d..f0e542d9 100644 --- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html +++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.html @@ -1,8 +1,8 @@
-
@@ -15,19 +15,19 @@ selected - - - - - + + + +
-
diff --git a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts index f3053c66..a3ec2f28 100644 --- a/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts +++ b/src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { ContactsService } from '../contacts.service'; -import { MdDialog, MdDialogRef } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component'; @Component({ @@ -13,11 +13,11 @@ export class FuseContactsSelectedBarComponent implements OnInit selectedContacts: string[]; hasSelectedContacts: boolean; isIndeterminate: boolean; - confirmDialogRef: MdDialogRef; + confirmDialogRef: MatDialogRef; constructor( private contactsService: ContactsService, - public dialog: MdDialog + public dialog: MatDialog ) { this.contactsService.onSelectedContactsChanged diff --git a/src/app/main/content/apps/contacts/sidenavs/main/main.component.html b/src/app/main/content/apps/contacts/sidenavs/main/main.component.html index 0b2af02d..7d25084c 100644 --- a/src/app/main/content/apps/contacts/sidenavs/main/main.component.html +++ b/src/app/main/content/apps/contacts/sidenavs/main/main.component.html @@ -1,6 +1,6 @@
-
+
@@ -18,19 +18,19 @@
- + All Contacts
- +
Freequently contacted
- +
Starred Contacts
diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html index 6dc003d4..75ceccab 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.html +++ b/src/app/main/content/apps/dashboards/project/project.component.html @@ -1,19 +1,19 @@
- +
-
+
Welcome back, John! -
@@ -21,15 +21,15 @@
{{selectedProject.name}}
- - - - +
@@ -37,9 +37,9 @@
- + - +
@@ -47,18 +47,18 @@ -
+
- - + + {{range.value}} - - + + -
@@ -78,10 +78,10 @@ -
-
@@ -97,12 +97,12 @@ -
+
{{widgets.widget2.title}}
-
@@ -121,10 +121,10 @@ -
-
@@ -140,12 +140,12 @@ -
+
{{widgets.widget3.title}}
-
@@ -164,10 +164,10 @@ -
-
@@ -183,12 +183,12 @@ -
+
{{widgets.widget4.title}}
-
@@ -206,10 +206,10 @@ -
-
@@ -226,14 +226,14 @@ -
+
{{widgets.widget5.title}}
-
@@ -393,9 +393,9 @@ - + - +
@@ -404,12 +404,12 @@ -
+
{{widgets.widget8.title}}
- +
-
+
{{widgets.widget9.title}}
- - + + {{range.value}} - - + +
@@ -549,7 +549,7 @@ -
+
@@ -572,7 +572,7 @@ {{cell.value}} - {{cell.icon}} + {{cell.icon}} @@ -588,9 +588,9 @@
- + - +
@@ -599,7 +599,7 @@ -
+
{{widgets.widget11.title}}
@@ -608,70 +608,70 @@
- + - - + + - + - Name - + Name +

{{contact.name}} {{contact.lastName}}

- + - Position - + Position +

{{contact.position}}

- + - Office - + Office +

{{contact.office}}

- + - Email - + Email + - + - Phone - + Phone +

{{contact.phone}}

- + - - - - + + + +
@@ -681,8 +681,8 @@
- - + +
@@ -691,7 +691,7 @@ - +
@@ -709,15 +709,15 @@
{{dateNow | date: 'EEEE, h:m:ss'}}
- - - - +
@@ -735,7 +735,7 @@
- +
@@ -751,28 +751,28 @@
- place + place {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].name}}
- - - - +
- + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}} @@ -783,7 +783,7 @@
- + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windSpeed[widgets.weatherWidget.speedUnit]}} @@ -791,12 +791,12 @@
- + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}}
- + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}}
@@ -806,7 +806,7 @@ *ngFor="let day of widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].next3Days"> {{day.name}}
- + {{day.temp[widgets.weatherWidget.tempUnit]}} ° {{widgets.weatherWidget.tempUnit}} @@ -814,7 +814,7 @@
- +
@@ -826,9 +826,9 @@
- + - +
diff --git a/src/app/main/content/apps/dashboards/project/project.component.scss b/src/app/main/content/apps/dashboards/project/project.component.scss index 4cd2735d..ad0d5dda 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.scss +++ b/src/app/main/content/apps/dashboards/project/project.component.scss @@ -1,6 +1,6 @@ #dashboard-project { - md-sidenav-container { + mat-sidenav-container { .center { @@ -23,7 +23,7 @@ border-radius: 0; background: rgba(0, 0, 0, 0.12); - md-icon { + mat-icon { color: #FFFFFF; } } @@ -32,7 +32,7 @@ > .content { flex: 1; - md-tab-group { + mat-tab-group { height: 100%; .mat-tab-body-wrapper { diff --git a/src/app/main/content/apps/file-manager/file-list/file-list.component.html b/src/app/main/content/apps/file-manager/file-list/file-list.component.html index b98db1fa..5e793c0f 100644 --- a/src/app/main/content/apps/file-manager/file-list/file-list.component.html +++ b/src/app/main/content/apps/file-manager/file-list/file-list.component.html @@ -1,60 +1,60 @@ - + - - - - + + + + - Name - {{row.name}} + Name + {{row.name}} - Type - {{row.type}} + Type + {{row.type}} - Owner - {{row.owner}} + Owner + {{row.owner}} - Size - {{row.size === '' ? '-': row.size}} + Size + {{row.size === '' ? '-': row.size}} - Modified - {{row.modified}} + Modified + {{row.modified}} - - - - + - - + - - + + diff --git a/src/app/main/content/apps/file-manager/file-manager.component.html b/src/app/main/content/apps/file-manager/file-manager.component.html index f49416be..364f978d 100644 --- a/src/app/main/content/apps/file-manager/file-manager.component.html +++ b/src/app/main/content/apps/file-manager/file-manager.component.html @@ -1,33 +1,33 @@
- + - + - +
-
+
-
-
@@ -38,7 +38,7 @@ *fuseIfOnDom [@animate]="{value:'*',params:{x:'50px'}}">
{{path}} - chevron_right + chevron_right
@@ -46,12 +46,12 @@
-
@@ -60,7 +60,7 @@ -
+
@@ -69,11 +69,11 @@ - + - + - +
diff --git a/src/app/main/content/apps/file-manager/file-manager.component.scss b/src/app/main/content/apps/file-manager/file-manager.component.scss index 73462f07..7148980a 100644 --- a/src/app/main/content/apps/file-manager/file-manager.component.scss +++ b/src/app/main/content/apps/file-manager/file-manager.component.scss @@ -2,7 +2,7 @@ #file-manager { - md-sidenav-container { + mat-sidenav-container { .sidenav { width: 320px !important; diff --git a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html index 9c4b4cf7..58a0f95c 100644 --- a/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html +++ b/src/app/main/content/apps/file-manager/sidenavs/details/details.component.html @@ -1,18 +1,18 @@ -
+
- - -
@@ -27,17 +27,17 @@ -
+
- +
- Available Offline + Available Offline
Info
diff --git a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html b/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html index 26021601..0e17eb64 100644 --- a/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html +++ b/src/app/main/content/apps/file-manager/sidenavs/main/main.component.html @@ -2,7 +2,7 @@
@@ -15,36 +15,36 @@
- - folder + + folder My Files
- - star + + star
Starred
- - folder_shared + + folder_shared
Sharred with me
- - access_time + + access_time
Recent
- - not_interested + + not_interested
Offline
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html index ac423a74..26e46f24 100644 --- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.html +++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.html @@ -1,62 +1,62 @@
- +
New Message -
- + -
+
- - + - + - - + - + - - + - + - - + - + - - + - + - - - +
@@ -66,8 +66,8 @@ (12 Kb)
-
@@ -77,17 +77,17 @@ (350 Kb)
-
-
+
-
-
diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss index c9487a7e..87d41f50 100644 --- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss +++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.scss @@ -5,7 +5,7 @@ .compose-form { - .mat-input-container { + .mat-form-field { width: 100%; } diff --git a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts b/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts index 647cabdd..25b0ed21 100644 --- a/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts +++ b/src/app/main/content/apps/mail/dialogs/compose/compose.component.ts @@ -1,5 +1,5 @@ import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core'; -import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; import { FormControl, FormGroup } from '@angular/forms'; @Component({ @@ -13,8 +13,8 @@ export class FuseMailComposeDialogComponent implements OnInit composeForm: FormGroup; constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) private data: any + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) private data: any ) { this.composeForm = this.createComposeForm(); diff --git a/src/app/main/content/apps/mail/mail-details/mail-details.component.html b/src/app/main/content/apps/mail/mail-details/mail-details.component.html index ee29da61..c85a005f 100644 --- a/src/app/main/content/apps/mail/mail-details/mail-details.component.html +++ b/src/app/main/content/apps/mail/mail-details/mail-details.component.html @@ -1,5 +1,5 @@
- email + email Select a message to read
@@ -21,14 +21,14 @@
- -
@@ -84,27 +84,27 @@
- - - - - - +
diff --git a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html index 1f5b486e..2ed29aab 100644 --- a/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html +++ b/src/app/main/content/apps/mail/mail-list/mail-list-item/mail-list-item.component.html @@ -1,7 +1,7 @@
- +
@@ -11,7 +11,7 @@ {{mail.from?.name}}
{{mail.from?.name[0]}}
{{mail.from?.name}} - attachment + attachment
@@ -20,15 +20,15 @@ diff --git a/src/app/main/content/apps/mail/mail-list/mail-list.component.html b/src/app/main/content/apps/mail/mail-list/mail-list.component.html index 467fac48..4fbf9b80 100644 --- a/src/app/main/content/apps/mail/mail-list/mail-list.component.html +++ b/src/app/main/content/apps/mail/mail-list/mail-list.component.html @@ -1,9 +1,9 @@ -
+
There are no messages!
- diff --git a/src/app/main/content/apps/mail/mail.component.html b/src/app/main/content/apps/mail/mail.component.html index fd95af52..2ade9fd3 100644 --- a/src/app/main/content/apps/mail/mail.component.html +++ b/src/app/main/content/apps/mail/mail.component.html @@ -1,16 +1,16 @@
-
+
- + - + - + @@ -21,14 +21,14 @@
- -
- search +
+ search
@@ -37,57 +37,57 @@ -
+
- + - - - - - - - - - - - + + + + + + + + + +
- - - - - + - - - - +
-
@@ -109,6 +109,6 @@
- +
diff --git a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html index a00fbb05..01dd3013 100644 --- a/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html +++ b/src/app/main/content/apps/mail/sidenavs/main/main-sidenav.component.html @@ -1,20 +1,20 @@
+ class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
@@ -24,7 +24,7 @@
- @@ -12,11 +12,11 @@ - -
diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss index 9f53dafc..72c4d609 100644 --- a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss +++ b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.scss @@ -11,7 +11,7 @@ margin: 0; width: 100%; - md-icon { + mat-icon { border-radius: 50%; height: 40px; width: 40px; diff --git a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts index 0d7f6713..0af6c819 100644 --- a/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts +++ b/src/app/main/content/apps/scrumboard/board/add-list/add-list.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core'; +import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ diff --git a/src/app/main/content/apps/scrumboard/board/board.component.html b/src/app/main/content/apps/scrumboard/board/board.component.html index 1bb4f21c..3b954971 100644 --- a/src/app/main/content/apps/scrumboard/board/board.component.html +++ b/src/app/main/content/apps/scrumboard/board/board.component.html @@ -1,31 +1,31 @@ - +
-
+
-
-
- remove_red_eye + remove_red_eye @@ -37,9 +37,9 @@
-
@@ -50,10 +50,10 @@
-
+
-
@@ -80,8 +80,8 @@
- + - + - + diff --git a/src/app/main/content/apps/scrumboard/board/board.component.scss b/src/app/main/content/apps/scrumboard/board/board.component.scss index edb67fc6..f0030971 100644 --- a/src/app/main/content/apps/scrumboard/board/board.component.scss +++ b/src/app/main/content/apps/scrumboard/board/board.component.scss @@ -2,19 +2,19 @@ :host { - md-sidenav-container { + mat-sidenav-container { width: 100%; height: 100%; - md-sidenav { + mat-sidenav { width: 320px !important; min-width: 320px !important; max-width: 320px !important; } #board { - flex-direction: column; display: flex; + flex-direction: column !important; height: 100%; > .header { @@ -38,7 +38,7 @@ .editable-buttons { - md-icon { + mat-icon { color: #FFFFFF !important; } } @@ -46,7 +46,7 @@ .right-side { - > .md-button:last-child { + > .mat-button:last-child { margin-right: 0; } } diff --git a/src/app/main/content/apps/scrumboard/board/board.component.ts b/src/app/main/content/apps/scrumboard/board/board.component.ts index b9e4e5bc..91c9ec7a 100644 --- a/src/app/main/content/apps/scrumboard/board/board.component.ts +++ b/src/app/main/content/apps/scrumboard/board/board.component.ts @@ -10,7 +10,7 @@ import { fuseAnimations } from '../../../../../core/animations'; selector : 'fuse-scrumboard-board', templateUrl: './board.component.html', styleUrls : ['./board.component.scss'], - animations : fuseAnimations + animations : fuseAnimations }) export class FuseScrumboardBoardComponent implements OnInit, OnDestroy { diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html index 2b7ca5d4..f62a7053 100644 --- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html +++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html @@ -1,5 +1,5 @@
- +
@@ -8,123 +8,123 @@
- - - - + + + - +
- - + - +
- - +
- +

{{ member.name }}

- +
- +
-
- - +
- - - + + + - +
- +
- - - - +
-
- + -
+
@@ -132,7 +132,7 @@
{{board.name}} - chevron_right + chevron_right {{list.name}}
@@ -140,10 +140,10 @@
- + -
@@ -152,20 +152,20 @@
- remove_red_eye + remove_red_eye
- - - + + +
- - - + + +
@@ -178,36 +178,36 @@
- label + label Labels
- - + + {{board.labels|getById:labelId:'name'}} - close - - + close + +
- supervisor_account + supervisor_account Members
- - + + - close - - + [matTooltip]="board.members | getById:memberId:'name'"> + close + +
@@ -219,7 +219,7 @@
- attachment + attachment Attachments
@@ -239,29 +239,29 @@
{{item.name}} - star - + star +
{{item.time}}
- - - - - +
@@ -279,9 +279,9 @@
- @@ -297,21 +297,21 @@
- check_box + check_box {{checklist.name}}
- - - - +
@@ -324,9 +324,9 @@ {{checklist.checkItemsChecked}} / {{checklist.checkItems.length}} - - + +
@@ -334,17 +334,17 @@
- - - - - + + + + +
-
@@ -354,14 +354,14 @@ fxLayout="row" fxLayoutAlign="start center">
- add + add - - - + + +
-
@@ -15,13 +15,13 @@
- + {{label.name}} - + -
@@ -31,15 +31,15 @@
Edit Label
-
- - - + + +
@@ -50,22 +50,22 @@
Add Label
-
- - - + + +
- +
diff --git a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts index dc031d81..8f0f6f8a 100644 --- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts +++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts @@ -23,7 +23,7 @@ export class FuseScrumboardLabelSelectorComponent implements OnInit, OnDestroy newLabel = { 'id' : '', 'name' : '', - 'color': 'md-blue-400-bg' + 'color': 'mat-blue-400-bg' }; toggleInArray = FuseUtils.toggleInArray; diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html index 28ca94a5..0b69eb04 100644 --- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html +++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html @@ -1,7 +1,7 @@
{{board.name}} -
@@ -12,10 +12,10 @@ - - diff --git a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts index d35face2..8bea5dca 100644 --- a/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts +++ b/src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html index 82c4bdbd..b8f62035 100644 --- a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.html @@ -2,7 +2,7 @@ (click)="openForm()" fxLayout="row" fxLayoutAlign="start center">
- add + add
Add a card
@@ -11,19 +11,19 @@
- - - + + +
- -
diff --git a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss index 80fd08b3..65219f1c 100644 --- a/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss +++ b/src/app/main/content/apps/scrumboard/board/list/add-card/add-card.component.scss @@ -12,7 +12,7 @@ cursor: pointer; border-radius: 2px; - md-icon { + mat-icon { margin-right: 8px; color: rgba(0, 0, 0, 0.6); } @@ -29,7 +29,7 @@ padding: 8px; border-top: 1px solid rgba(0, 0, 0, 0.12); - md-input-container { + mat-form-field { width: 100%; margin: 0; padding: 12px 8px; diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.html b/src/app/main/content/apps/scrumboard/board/list/card/card.component.html index fd772ed0..a852891d 100644 --- a/src/app/main/content/apps/scrumboard/board/list/card/card.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/card/card.component.html @@ -10,7 +10,7 @@
- +
@@ -22,7 +22,7 @@ + [matTooltip]="board.labels | getById:labelId:'name'">
@@ -39,7 +39,7 @@ - access_time + access_time {{card.due | date:'mediumDate'}} @@ -50,7 +50,7 @@ class="badge check-items" [ngClass]="{'completed': card.checkItemsChecked === card.checkItems}" fxLayout="row" fxLayoutAlign="start center"> - check_circle + check_circle {{card.checkItemsChecked}} / {{card.checkItems}} @@ -69,7 +69,7 @@ + [matTooltip]="board.members | getById:memberId:'name'">
@@ -86,14 +86,14 @@ - remove_red_eye + remove_red_eye - description + description @@ -105,7 +105,7 @@ - attachment + attachment {{card.attachments.length}} @@ -114,7 +114,7 @@ - comment + comment {{card.comments.length}} diff --git a/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss b/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss index 7673454c..e57dce32 100644 --- a/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss +++ b/src/app/main/content/apps/scrumboard/board/list/card/card.component.scss @@ -53,7 +53,7 @@ background-color: rgba(0, 0, 0, 0.4); color: #FFFFFF; - md-icon { + mat-icon { margin-right: 4px; } diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html index 9f742826..786f1ed8 100644 --- a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.html @@ -8,10 +8,10 @@ - - diff --git a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts index f480c7cd..b2b38b9b 100644 --- a/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts +++ b/src/app/main/content/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; @Component({ diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.html b/src/app/main/content/apps/scrumboard/board/list/list.component.html index 63487391..2899c33c 100644 --- a/src/app/main/content/apps/scrumboard/board/list/list.component.html +++ b/src/app/main/content/apps/scrumboard/board/list/list.component.html @@ -10,12 +10,12 @@
- - - - + + +
diff --git a/src/app/main/content/apps/scrumboard/board/list/list.component.ts b/src/app/main/content/apps/scrumboard/board/list/list.component.ts index e5c7d2e1..aa9735fc 100644 --- a/src/app/main/content/apps/scrumboard/board/list/list.component.ts +++ b/src/app/main/content/apps/scrumboard/board/list/list.component.ts @@ -3,7 +3,7 @@ import { FuseUtils } from '../../../../../../core/fuseUtils'; import { ScrumboardService } from 'app/main/content/apps/scrumboard/scrumboard.service'; import { ActivatedRoute } from '@angular/router'; import { Subscription } from 'rxjs/Subscription'; -import { MdDialog, MdDialogRef } from '@angular/material'; +import { MatDialog, MatDialogRef } from '@angular/material'; import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component'; import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component'; import { Card } from '../../card.model'; @@ -25,12 +25,12 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy onBoardChanged: Subscription; - confirmDialogRef: MdDialogRef; + confirmDialogRef: MatDialogRef; constructor( private route: ActivatedRoute, private scrumboardService: ScrumboardService, - public dialog: MdDialog + public dialog: MatDialog ) { } diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html index 678dbf0d..b27131a5 100644 --- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html +++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/board-color-selector/board-color-selector.component.html @@ -1,15 +1,15 @@ - + - +

{{color.key}}

- check - - + - + diff --git a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html index 756a57a9..2e3c126b 100644 --- a/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html +++ b/src/app/main/content/apps/scrumboard/board/sidenavs/settings/settings.component.html @@ -3,7 +3,7 @@
-
+
Settings
@@ -13,43 +13,43 @@
-
- format_color_fill +
+ format_color_fill

Board Color

-
- photo +
+ photo

Card Cover Images

- check + check
-
- remove_red_eye +
+ remove_red_eye

Subscribe

- check + check
-
- content_copy +
+ content_copy

Copy Board

-
- delete +
+ delete

Delete Board

- +
@@ -58,10 +58,10 @@
-
+
Background Color
-
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.html b/src/app/main/content/apps/scrumboard/scrumboard.component.html index 9aea1c88..0a856db9 100644 --- a/src/app/main/content/apps/scrumboard/scrumboard.component.html +++ b/src/app/main/content/apps/scrumboard/scrumboard.component.html @@ -1,7 +1,7 @@ -
+
-
+

Scrumboard App

@@ -14,7 +14,7 @@ [routerLink]="'/apps/scrumboard/boards/'+board.id+'/'+board.uri" fxLayout="column" fxLayoutAlign="center center" [@animate]="{value:'*',params:{y:'100%'}}"> - assessment + assessment
{{board.name}}
@@ -23,7 +23,7 @@
- add_circle + add_circle
Add new board
diff --git a/src/app/main/content/apps/scrumboard/scrumboard.component.scss b/src/app/main/content/apps/scrumboard/scrumboard.component.scss index 067b0ea0..55953a9a 100644 --- a/src/app/main/content/apps/scrumboard/scrumboard.component.scss +++ b/src/app/main/content/apps/scrumboard/scrumboard.component.scss @@ -9,7 +9,7 @@ .board-list { padding: 32px 0; - max-height: none!important; + max-height: none !important; .board-list-item { min-width: 210px; diff --git a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html index 4eda7b40..95fd1459 100644 --- a/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html +++ b/src/app/main/content/apps/todo/sidenavs/main/main-sidenav.component.html @@ -1,20 +1,20 @@
+ class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
@@ -24,7 +24,7 @@
-
- - - - - - - +
@@ -53,18 +53,18 @@
- - - +
@@ -77,35 +77,35 @@
- - - - - + + + + + - - - - - + + + + +
- - - {{notes.value.length}} / 500 - + {{notes.value.length}} / 500 + diff --git a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html index aaecb99b..c0020501 100644 --- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html +++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html @@ -1,12 +1,12 @@
- + drag_handle - + - - + +
@@ -33,57 +33,57 @@
- - - - - - - - +
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.html b/src/app/main/content/apps/todo/todo-list/todo-list.component.html index d6e9382b..ed4890d3 100644 --- a/src/app/main/content/apps/todo/todo-list/todo-list.component.html +++ b/src/app/main/content/apps/todo/todo-list/todo-list.component.html @@ -1,5 +1,5 @@ -
- There are no todos! +
+ There are no todos!
diff --git a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss b/src/app/main/content/apps/todo/todo-list/todo-list.component.scss index 6c063deb..f96d4072 100644 --- a/src/app/main/content/apps/todo/todo-list/todo-list.component.scss +++ b/src/app/main/content/apps/todo/todo-list/todo-list.component.scss @@ -6,4 +6,9 @@ position: relative; padding: 0; border-right: 1px solid rgba(0, 0, 0, .12); + + .no-todos-text { + font-size: 24px; + font-weight: 300; + } } diff --git a/src/app/main/content/apps/todo/todo.component.html b/src/app/main/content/apps/todo/todo.component.html index d0526557..74af6f92 100644 --- a/src/app/main/content/apps/todo/todo.component.html +++ b/src/app/main/content/apps/todo/todo.component.html @@ -1,16 +1,16 @@
-
+
- + - + - + @@ -19,16 +19,16 @@
-
+
-
- search + search
@@ -37,44 +37,44 @@ -
+
- + - - - - - - - - - - - + + + + + + + + + +
- - - - +
-
@@ -97,6 +97,6 @@
- +
diff --git a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html index d5ba8217..b02758bd 100644 --- a/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html +++ b/src/app/main/content/components-third-party/datatable/ngx-datatable.component.html @@ -1,20 +1,20 @@
-
+
- home - chevron_right + home + chevron_right Tables
ngx-datatable
- - link + link Reference
@@ -48,12 +48,12 @@ [sortable]="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 index 1d7240a4..65ffc995 100644 --- a/src/app/main/content/components/angular-material/angular-material.component.html +++ b/src/app/main/content/components/angular-material/angular-material.component.html @@ -1,21 +1,21 @@
-
+
- home - chevron_right + home + chevron_right Components - chevron_right + chevron_right Angular Material Elements
{{title}}
- - link + + link Reference
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 index 916086d0..dfbc59dc 100644 --- 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 @@ -1,49 +1,49 @@ -
+
{{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 index 8186c4e8..a82d36b4 100644 --- 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 @@ -42,7 +42,7 @@ fuse-example-viewer { display: none; right: 8px; - md-icon { + mat-icon { color: rgba(255, 255, 255, 0.87); } } 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 index 8c5f178b..255c07dc 100644 --- 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 @@ -1,5 +1,5 @@ import { AfterViewInit, Component, ComponentFactoryResolver, ComponentRef, Input, OnDestroy, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core'; -import { MdSnackBar } from '@angular/material'; +import { MatSnackBar } from '@angular/material'; import 'rxjs/add/operator/first'; import { CopierService } from '../../../../../core/components/copier/copier.service'; import { EXAMPLE_COMPONENTS } from '../example-components'; @@ -49,7 +49,7 @@ export class FuseExampleViewerComponent implements AfterViewInit, OnDestroy showSource = false; constructor( - private snackbar: MdSnackBar, + private snackbar: MatSnackBar, private copier: CopierService, private _resolver: ComponentFactoryResolver ) diff --git a/src/app/main/content/components/countdown/countdown.component.html b/src/app/main/content/components/countdown/countdown.component.html index 46b59307..982ac683 100644 --- a/src/app/main/content/components/countdown/countdown.component.html +++ b/src/app/main/content/components/countdown/countdown.component.html @@ -1,11 +1,11 @@
-
+
- home - chevron_right + home + chevron_right Components
Countdown
@@ -29,7 +29,7 @@

Usage

-

+

- @@ -139,7 +139,7 @@

-
+
Latest Activity
See All
diff --git a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss index 107f66c5..ab2da8f9 100644 --- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss +++ b/src/app/main/content/pages/profile/tabs/timeline/timeline.component.scss @@ -38,7 +38,7 @@ } } - md-divider { + mat-divider { border-top-width: 1px; border-top-style: solid; margin: 32px 0; @@ -104,7 +104,7 @@ background-color: transparent; } - md-icon { + mat-icon { margin: 0 8px 0 0; } } @@ -150,7 +150,7 @@ margin-bottom: 16px; cursor: pointer; - md-icon { + mat-icon { margin-left: 8px; } } diff --git a/src/app/main/content/pages/search/search.component.html b/src/app/main/content/pages/search/search.component.html index e2f7eb9b..217b9b15 100644 --- a/src/app/main/content/pages/search/search.component.html +++ b/src/app/main/content/pages/search/search.component.html @@ -1,12 +1,12 @@
-
- - - + + +
@@ -14,17 +14,17 @@
- + - + - + - + - + - +
diff --git a/src/app/main/content/pages/search/search.component.scss b/src/app/main/content/pages/search/search.component.scss index 4ee064d3..1f2557a0 100644 --- a/src/app/main/content/pages/search/search.component.scss +++ b/src/app/main/content/pages/search/search.component.scss @@ -45,7 +45,7 @@ padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); - .md-title { + .mat-title { padding-right: 8px; } diff --git a/src/app/main/content/pages/search/tabs/classic/classic.component.html b/src/app/main/content/pages/search/tabs/classic/classic.component.html index 0968bb47..3c944e60 100644 --- a/src/app/main/content/pages/search/tabs/classic/classic.component.html +++ b/src/app/main/content/pages/search/tabs/classic/classic.component.html @@ -21,12 +21,12 @@ 54 - -
@@ -40,53 +40,53 @@
- - - - - - - - - - - -
diff --git a/src/app/main/content/pages/search/tabs/table/table.component.html b/src/app/main/content/pages/search/tabs/table/table.component.html index 8257d83a..99b3b5be 100644 --- a/src/app/main/content/pages/search/tabs/table/table.component.html +++ b/src/app/main/content/pages/search/tabs/table/table.component.html @@ -1,36 +1,36 @@
- + - Name - {{row.name}} + Name + {{row.name}} - Position - {{row.position}} + Position + {{row.position}} - Office - {{row.office}} + Office + {{row.office}} - Salary - {{row.salary | currency:'USD':true}} + Salary + {{row.salary | currency:'USD':true}} - - - + + +
diff --git a/src/app/main/content/services/config/config.component.html b/src/app/main/content/services/config/config.component.html index 775cce06..85456da0 100644 --- a/src/app/main/content/services/config/config.component.html +++ b/src/app/main/content/services/config/config.component.html @@ -1,11 +1,11 @@
-
+
- home - chevron_right + home + chevron_right Services
Config
@@ -23,7 +23,7 @@

Usage

-

+

- + Required - - + + - - - + + + Required - - + +

- - - + + + Required - - + + - - - + + + Required - - + + - - + - {{postalCode.value.length}} / 5 - + {{postalCode.value.length}} / 5 + Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters - - + +
-
+
Reactive Form Errors Model
diff --git a/src/app/main/content/ui/helper-classes/helper-classes.component.html b/src/app/main/content/ui/helper-classes/helper-classes.component.html index c5b0c198..5bd37fc4 100644 --- a/src/app/main/content/ui/helper-classes/helper-classes.component.html +++ b/src/app/main/content/ui/helper-classes/helper-classes.component.html @@ -1,11 +1,11 @@
-
+
- home - chevron_right + home + chevron_right User Interface
Helper Classes
@@ -16,21 +16,21 @@
- + - + - + - + - + - +
diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html index 3fef43a1..ff07fd51 100644 --- a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html +++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html @@ -2,7 +2,7 @@
Padding Helpers
-
+
@@ -55,7 +55,7 @@
Direction Specific Padding Helpers
-
+
@@ -113,7 +113,7 @@
Margin Helpers
-
+
@@ -166,7 +166,7 @@
Direction Specific Margin Helpers
-
+
diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html index 0e95ed91..199c935b 100644 --- a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html +++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html @@ -2,7 +2,7 @@
Width Helpers
-
+
@@ -71,7 +71,7 @@
Height Helpers
-
+
diff --git a/src/app/main/content/ui/icons/icons.component.html b/src/app/main/content/ui/icons/icons.component.html index a34b3312..b0a6fa6c 100644 --- a/src/app/main/content/ui/icons/icons.component.html +++ b/src/app/main/content/ui/icons/icons.component.html @@ -1,19 +1,19 @@
-
+
- home - chevron_right + home + chevron_right User Interface
Icons
- - link + + link Reference @@ -24,7 +24,7 @@
- +
@@ -32,16 +32,16 @@
- - - + + +
- {{icon}} + {{icon}}
{{icon}}
diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html b/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html index 8fdc64a9..52281b63 100644 --- a/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html +++ b/src/app/main/content/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html @@ -1,7 +1,7 @@
-
+
@@ -14,7 +14,7 @@ -
+
diff --git a/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html b/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html index 74768558..f228732b 100644 --- a/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html +++ b/src/app/main/content/ui/page-layouts/carded/fullwidth/fullwidth.component.html @@ -1,7 +1,7 @@
-
+
@@ -14,7 +14,7 @@ -
+
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html index 885763c3..4c3029cc 100644 --- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html @@ -1,14 +1,14 @@
-
+
- + - +
@@ -22,7 +22,7 @@
- + @@ -35,14 +35,14 @@ -
+
- Content toolbar @@ -63,6 +63,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html b/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html index b2b52e3c..703115a6 100644 --- a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html @@ -1,14 +1,14 @@
-
+
- + - +
@@ -24,7 +24,7 @@
- + @@ -37,14 +37,14 @@ -
+
- Content toolbar @@ -65,6 +65,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html index 9bc7ca3b..bcaf7676 100644 --- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html @@ -1,10 +1,10 @@
-
+
- +
@@ -16,14 +16,14 @@ -
+
- Content toolbar @@ -45,8 +45,8 @@ - +
@@ -60,9 +60,9 @@
- + - +
diff --git a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html b/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html index 48f48aae..167b0927 100644 --- a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html @@ -1,10 +1,10 @@
-
+
- +
@@ -16,14 +16,14 @@ -
+
- Content toolbar @@ -45,8 +45,8 @@ - +
@@ -60,9 +60,9 @@
- + - +
diff --git a/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html b/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html index fb61114e..857770c3 100644 --- a/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html +++ b/src/app/main/content/ui/page-layouts/simple/fullwidth/fullwidth.component.html @@ -1,13 +1,13 @@
-
+

Fullwidth

-
+
diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html index 4c72ef67..e1bb81ab 100644 --- a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html +++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html @@ -1,26 +1,26 @@
- + - + - +
-
+
-
@@ -31,7 +31,7 @@ -
+
@@ -41,6 +41,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html b/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html index 19154bec..61f81548 100644 --- a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html +++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html @@ -1,12 +1,12 @@
-
+
-
@@ -16,11 +16,11 @@
- + - +
@@ -28,14 +28,14 @@
- +
-
+
@@ -45,6 +45,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html b/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html index f1a5aa54..4fee2f7d 100644 --- a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html @@ -1,10 +1,10 @@
- + - +
@@ -12,19 +12,19 @@
- +
-
+
-
@@ -35,7 +35,7 @@ -
+
@@ -45,6 +45,6 @@
- +
diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html b/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html index 8aa1b40d..8b802fc8 100644 --- a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html +++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html @@ -1,17 +1,17 @@
- +
-
+
-
@@ -22,7 +22,7 @@ -
+
@@ -33,14 +33,14 @@ - + - + - +
diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html b/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html index f5865f7e..b8cb9aea 100644 --- a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html +++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html @@ -1,12 +1,12 @@
-
+
-
@@ -16,13 +16,13 @@
- +
-
+
@@ -33,8 +33,8 @@ - +
@@ -42,9 +42,9 @@
- + - +
diff --git a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html b/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html index 52644c7b..48ca7987 100644 --- a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html +++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html @@ -1,17 +1,17 @@
- +
-
+
-
@@ -22,7 +22,7 @@ -
+
@@ -33,8 +33,8 @@ - +
@@ -42,9 +42,9 @@
- + - +
diff --git a/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html b/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html index f4c1dee2..fd163806 100644 --- a/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html +++ b/src/app/main/content/ui/page-layouts/simple/tabbed/tabbed.component.html @@ -1,35 +1,35 @@
-
+

Tabbed

-
+
- + - +
- + - +
- + - +
- + - +
diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html index 71a9f742..fc28433b 100644 --- a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html +++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html @@ -2,7 +2,7 @@
Blockquotes
-
+
@@ -89,7 +89,7 @@
Lists
-
+
@@ -169,7 +169,7 @@
Definition Lists
-
+
diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.html b/src/app/main/content/ui/typography/tabs/headings/headings.component.html index 1c9a2501..1d320c6c 100644 --- a/src/app/main/content/ui/typography/tabs/headings/headings.component.html +++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.html @@ -2,7 +2,7 @@
Material design typography classes
-
+
@@ -183,7 +183,7 @@
Standard Headings
-
+
diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html index af3844f2..56cf09ac 100644 --- a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html +++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html @@ -2,12 +2,12 @@
Font Weight
-
+
-
From 100 to 900
+
From 100 to 900
font-weight: 100 ... font-weight: 900 @@ -28,12 +28,12 @@
Font Size
-
+
-
Multiplies of 2, max: 120
+
Multiplies of 2, max: 120
font-size: 20
@@ -50,12 +50,12 @@
Line Height
-
+
-
Multiplies of 2, max: 120
+
Multiplies of 2, max: 120
line-height: 2 ... line-height: 120 @@ -76,7 +76,7 @@
Other helpers
-
+
@@ -144,7 +144,7 @@
-
+

Boxed text light

diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html index 2d3cca52..454d9343 100644 --- a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html +++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/app/main/content/ui/typography/typography.component.html b/src/app/main/content/ui/typography/typography.component.html index c4b4fee3..d20c1f29 100644 --- a/src/app/main/content/ui/typography/typography.component.html +++ b/src/app/main/content/ui/typography/typography.component.html @@ -1,11 +1,11 @@
-
+
- home - chevron_right + home + chevron_right User Interface
Typography
@@ -16,33 +16,33 @@
- + - + - + - + - + - + - + - + - + - +
diff --git a/src/app/main/footer/footer.component.html b/src/app/main/footer/footer.component.html index 2b1cecfb..72bff219 100644 --- a/src/app/main/footer/footer.component.html +++ b/src/app/main/footer/footer.component.html @@ -1,20 +1,20 @@ - + - + diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html index 7c5a2fd7..7cce49da 100644 --- a/src/app/main/main.component.html +++ b/src/app/main/main.component.html @@ -1,4 +1,4 @@ - +
@@ -19,8 +19,8 @@ @@ -62,11 +62,11 @@
- + - + - + diff --git a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts b/src/app/main/navbar/horizontal/navbar-horizontal.component.ts index db5d2d6e..18a66d68 100644 --- a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts +++ b/src/app/main/navbar/horizontal/navbar-horizontal.component.ts @@ -8,7 +8,8 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; }) export class FuseNavbarHorizontalComponent implements OnInit { - constructor() { + constructor() + { } ngOnInit() diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.html b/src/app/main/navbar/vertical/navbar-vertical.component.html index a88e997b..fe98e297 100644 --- a/src/app/main/navbar/vertical/navbar-vertical.component.html +++ b/src/app/main/navbar/vertical/navbar-vertical.component.html @@ -5,12 +5,12 @@ FUSE
- -
diff --git a/src/app/main/navbar/vertical/navbar-vertical.component.scss b/src/app/main/navbar/vertical/navbar-vertical.component.scss index 400efd78..abf58d03 100644 --- a/src/app/main/navbar/vertical/navbar-vertical.component.scss +++ b/src/app/main/navbar/vertical/navbar-vertical.component.scss @@ -134,11 +134,18 @@ fuse-navbar-vertical { } } - .nav-bar-content { + .navbar-content { flex: 1; } } +fuse-navbar-horizontal + #wrapper > fuse-navbar-vertical { + display: none; + @include media-breakpoint-down(md) { + display: flex; + } +} + .fuse-navbar-backdrop { position: absolute; top: 0; diff --git a/src/app/main/quick-panel/quick-panel.component.html b/src/app/main/quick-panel/quick-panel.component.html index f0133fd0..bf13a381 100644 --- a/src/app/main/quick-panel/quick-panel.component.html +++ b/src/app/main/quick-panel/quick-panel.component.html @@ -1,6 +1,6 @@ - + -

+

Today

@@ -14,59 +14,59 @@ {{date | date:'MMMM'}}
- + - + - -

+ +

Events

- -

{{event.title}}

-

{{event.detail}}

- - + +

{{event.title}}

+

{{event.detail}}

+ + - + - -

+ +

Notes

- -

{{note.title}}

-

{{note.detail}}

- - + +

{{note.title}}

+

{{note.detail}}

+ + - + - -

+ +

Quick Settings

- - + +

Notifications

- - + + - - + +

Cloud Sync

- - + + - - + +

Retro Thrusters

- - - + + + diff --git a/src/app/main/toolbar/toolbar.component.html b/src/app/main/toolbar/toolbar.component.html index ad5da2d1..42d13d58 100644 --- a/src/app/main/toolbar/toolbar.component.html +++ b/src/app/main/toolbar/toolbar.component.html @@ -1,12 +1,14 @@ - + + +
-
@@ -17,7 +19,7 @@
-
+
@@ -25,35 +27,33 @@
- - - - + - - - - +
@@ -61,33 +61,33 @@
- - - - +
-
- + diff --git a/src/app/main/toolbar/toolbar.component.scss b/src/app/main/toolbar/toolbar.component.scss index 9a1e2745..6176d063 100644 --- a/src/app/main/toolbar/toolbar.component.scss +++ b/src/app/main/toolbar/toolbar.component.scss @@ -13,6 +13,15 @@ .mat-toolbar { background: inherit; color: inherit; + position: relative; + + .loading-bar { + position: absolute; + top: 0; + left: 0; + right: 0; + width: 100%; + } } .logo { @@ -24,11 +33,6 @@ } } - .loading-spinner { - width: 32px; - height: 32px; - } - .user-button, fuse-search-bar, .language-button, diff --git a/src/app/main/toolbar/toolbar.component.ts b/src/app/main/toolbar/toolbar.component.ts index 82899d0f..5c7368e4 100644 --- a/src/app/main/toolbar/toolbar.component.ts +++ b/src/app/main/toolbar/toolbar.component.ts @@ -13,7 +13,7 @@ export class FuseToolbarComponent userStatusOptions: any[]; languages: any; selectedLanguage: any; - showSpinner: boolean; + showLoadingBar: boolean; horizontalNav: boolean; constructor( @@ -73,11 +73,11 @@ export class FuseToolbarComponent (event) => { if ( event instanceof NavigationStart ) { - this.showSpinner = true; + this.showLoadingBar = true; } if ( event instanceof NavigationEnd ) { - this.showSpinner = false; + this.showLoadingBar = false; } }); 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 index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index 176d13dc..1f38255c 100644 --- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html @@ -1,10 +1,10 @@
- - - - - {{ option.name }} - - - + + + + + {{ 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 index aaeeb5ce..a6fefb23 100644 --- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts @@ -1,49 +1,57 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {Observable} from 'rxjs/Observable'; +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) { } +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'] + selector : 'autocomplete-display-example', + templateUrl: 'autocomplete-display-example.html', + styleUrls : ['autocomplete-display-example.css'] }) -export class AutocompleteDisplayExample { +export class AutocompleteDisplayExample +{ - myControl = new FormControl(); + myControl = new FormControl(); - options = [ - new User('Mary'), - new User('Shelley'), - new User('Igor') - ]; + options = [ + new User('Mary'), + new User('Shelley'), + new User('Igor') + ]; - filteredOptions: Observable; + 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; + 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 index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index 13c64139..69e3657c 100644 --- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html @@ -1,10 +1,10 @@
- - - - - {{ option }} - - - + + + + + {{ 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 index dde59515..44e9a1ce 100644 --- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts @@ -1,6 +1,6 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; -import {Observable} from 'rxjs/Observable'; +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'; @@ -8,31 +8,34 @@ import 'rxjs/add/operator/map'; * @title Filter autocomplete */ @Component({ - selector: 'autocomplete-filter-example', - templateUrl: 'autocomplete-filter-example.html', - styleUrls: ['autocomplete-filter-example.css'] + selector : 'autocomplete-filter-example', + templateUrl: 'autocomplete-filter-example.html', + styleUrls : ['autocomplete-filter-example.css'] }) -export class AutocompleteFilterExample { +export class AutocompleteFilterExample +{ - myControl: FormControl = new FormControl(); + myControl: FormControl = new FormControl(); - options = [ - 'One', - 'Two', - 'Three' - ]; + options = [ + 'One', + 'Two', + 'Three' + ]; - filteredOptions: Observable; + filteredOptions: Observable; - ngOnInit() { - this.filteredOptions = this.myControl.valueChanges - .startWith(null) - .map(val => val ? this.filter(val) : this.options.slice()); - } + 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); - } + 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 index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index 3af4634f..8dc0e749 100644 --- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html @@ -1,20 +1,21 @@
- - - - - - {{ state.name }} | - Population: {{state.population}} - - - + + + + + + {{ state.name }} + | + Population: {{state.population}} + + + -
+
- - Disable Input? - + + 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 index ee2a166b..9339557c 100644 --- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.ts @@ -1,7 +1,7 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; -import {Observable} from 'rxjs/Observable'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/operator/map'; @@ -9,51 +9,54 @@ import 'rxjs/add/operator/map'; * @title Autocomplete overview */ @Component({ - selector: 'autocomplete-overview-example', - templateUrl: 'autocomplete-overview-example.html', - styleUrls: ['autocomplete-overview-example.css'] + selector : 'autocomplete-overview-example', + templateUrl: 'autocomplete-overview-example.html', + styleUrls : ['autocomplete-overview-example.css'] }) -export class AutocompleteOverviewExample { - stateCtrl: FormControl; - filteredStates: Observable; +export class AutocompleteOverviewExample +{ + stateCtrl: FormControl; + filteredStates: Observable; - states: any[] = [ + 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() { - 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' + this.stateCtrl = new FormControl(); + this.filteredStates = this.stateCtrl.valueChanges + .startWith(null) + .map(state => state ? this.filterStates(state) : this.states.slice()); } - ]; - 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); - } + 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 index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index 3c440f4b..3eef2cab 100644 --- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html @@ -1,10 +1,10 @@
- - - - - {{ option }} - - - + + + + + {{ 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 index c3f1bcb6..16df19b1 100644 --- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts @@ -1,22 +1,23 @@ -import {Component} from '@angular/core'; -import {FormControl} from '@angular/forms'; +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'] + selector : 'autocomplete-simple-example', + templateUrl: 'autocomplete-simple-example.html', + styleUrls : ['autocomplete-simple-example.css'] }) -export class AutocompleteSimpleExample { +export class AutocompleteSimpleExample +{ - myControl: FormControl = new FormControl(); + myControl: FormControl = new FormControl(); - options = [ - 'One', - 'Two', - 'Three' - ]; + options = [ + 'One', + 'Two', + 'Three' + ]; } 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 index 56f6fa44..0dcb901d 100644 --- a/src/assets/angular-material-examples/button-overview/button-overview-example.html +++ b/src/assets/angular-material-examples/button-overview/button-overview-example.html @@ -1 +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 index 9dbde687..ac9b74d2 100644 --- a/src/assets/angular-material-examples/button-overview/button-overview-example.ts +++ b/src/assets/angular-material-examples/button-overview/button-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic buttons */ @Component({ - selector: 'button-overview-example', - templateUrl: 'button-overview-example.html', + selector : 'button-overview-example', + templateUrl: 'button-overview-example.html' }) -export class ButtonOverviewExample {} +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 index d21ca3ce..4dea4b36 100644 --- 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 @@ -1,3 +1,3 @@ .example-selected-value { - margin: 15px 0; + 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 index dd5cd277..2b1be41e 100644 --- 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 @@ -1,15 +1,15 @@ - - - format_align_left - - - format_align_center - - - format_align_right - - - format_align_justify - - + + + 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 index efe1c7cc..da50101e 100644 --- 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 @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +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'], + selector : 'button-toggle-exclusive-example', + templateUrl: 'button-toggle-exclusive-example.html', + styleUrls : ['button-toggle-exclusive-example.css'] }) -export class ButtonToggleExclusiveExample {} +export class ButtonToggleExclusiveExample +{ +} 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 index bb215d5b..858458d6 100644 --- 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 @@ -1 +1 @@ -Toggle me! +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 index c8afb437..6118901b 100644 --- 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 @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic button-toggles */ @Component({ - selector: 'button-toggle-overview-example', - templateUrl: 'button-toggle-overview-example.html', + selector : 'button-toggle-overview-example', + templateUrl: 'button-toggle-overview-example.html' }) -export class ButtonToggleOverviewExample {} +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 index 9771bda6..d9455cb7 100644 --- a/src/assets/angular-material-examples/button-types/button-types-example.css +++ b/src/assets/angular-material-examples/button-types/button-types-example.css @@ -1,5 +1,5 @@ .example-button-row { - display: flex; - align-items: center; - justify-content: space-around; + 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 index 1a9b5b20..2a902df1 100644 --- a/src/assets/angular-material-examples/button-types/button-types-example.html +++ b/src/assets/angular-material-examples/button-types/button-types-example.html @@ -1,64 +1,64 @@

Basic Buttons

- - - - - - Link + + + + + + Link

Raised Buttons

- - - - - - Link + + + + + + Link

Icon Buttons

- - - - - + + + + +

Fab Buttons

- - - - - - - Link + + + + + + + Link

Mini Fab Buttons

- - - - - - - Link + + + + + + + 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 index 525729b2..56159b5e 100644 --- a/src/assets/angular-material-examples/button-types/button-types-example.ts +++ b/src/assets/angular-material-examples/button-types/button-types-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Button varieties */ @Component({ - selector: 'button-types-example', - templateUrl: 'button-types-example.html', - styleUrls: ['button-types-example.css'], + selector : 'button-types-example', + templateUrl: 'button-types-example.html', + styleUrls : ['button-types-example.css'] }) -export class ButtonTypesExample {} +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 index e0d1c50e..af83df3c 100644 --- a/src/assets/angular-material-examples/card-fancy/card-fancy-example.css +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.css @@ -1,8 +1,8 @@ .example-card { - width: 400px; + width: 400px; } .example-header-image { - background-image: url('/assets/images/examples/shiba1.jpg'); - background-size: cover; + 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 index d7001d5d..2e608721 100644 --- a/src/assets/angular-material-examples/card-fancy/card-fancy-example.html +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.html @@ -1,19 +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. -

- - - - - - + + +
+ 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 index 92826ad0..210175e0 100644 --- a/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts +++ b/src/assets/angular-material-examples/card-fancy/card-fancy-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +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'], + selector : 'card-fancy-example', + templateUrl: 'card-fancy-example.html', + styleUrls : ['card-fancy-example.css'] }) -export class CardFancyExample {} +export class CardFancyExample +{ +} 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 index 5e0c2b6d..77453153 100644 --- a/src/assets/angular-material-examples/card-overview/card-overview-example.html +++ b/src/assets/angular-material-examples/card-overview/card-overview-example.html @@ -1 +1 @@ -Simple card +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 index f87f9401..058dc963 100644 --- a/src/assets/angular-material-examples/card-overview/card-overview-example.ts +++ b/src/assets/angular-material-examples/card-overview/card-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic cards */ @Component({ - selector: 'card-overview-example', - templateUrl: 'card-overview-example.html', + selector : 'card-overview-example', + templateUrl: 'card-overview-example.html' }) -export class CardOverviewExample {} +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 index 527bb2a3..5c29f35d 100644 --- 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 @@ -1,8 +1,8 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + display: flex; + flex-direction: column; + min-width: 300px; } /* @@ -10,30 +10,30 @@ * https://material.io/guidelines/components/data-tables.html */ .example-table { - flex: 1 1 auto; - overflow: auto; - max-height: 500px; + 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; + display: flex; + border-bottom: 1px solid #CCC; + align-items: center; + height: 32px; + padding: 0 8px; } .example-cell, .example-header-cell { - flex: 1; + flex: 1; } .example-header-cell { - font-size: 12px; - font-weight: bold; - color: rgba(0, 0, 0, 0.54); + 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); + 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 index df20a4d1..11eee44c 100644 --- 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 @@ -1,36 +1,36 @@
- - + + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - - {{row.color}} - - + + + 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 index 80975595..adf16ffd 100644 --- 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 @@ -1,7 +1,7 @@ -import {Component} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {BehaviorSubject} from 'rxjs/BehaviorSubject'; -import {Observable} from 'rxjs/Observable'; +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'; @@ -10,65 +10,83 @@ 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', + 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; +export class CdkTableBasicExample +{ + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase); - } + 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']; +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; +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; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + } - /** 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) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - 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))] - }; - } + /** 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))] + }; + } } /** @@ -78,15 +96,20 @@ export class ExampleDatabase { * 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(); - } +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; - } + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable + { + return this._exampleDatabase.dataChange; + } - disconnect() {} + 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 index 558293fb..6551ff13 100644 --- a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.css @@ -1,14 +1,14 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 0 10px; + 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 index 7b8fb4c2..d91b25bc 100644 --- a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.html @@ -1,40 +1,40 @@ - - -

Checkbox configuration

+ + +

Checkbox configuration

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

Result

+ + +

Result

-
- - I'm a checkbox - -
- - +
+ + 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 index f4bdf570..3aee17ba 100644 --- a/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts +++ b/src/assets/angular-material-examples/checkbox-configurable/checkbox-configurable-example.ts @@ -1,16 +1,17 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Configurable checkbox */ @Component({ - selector: 'checkbox-configurable-example', - templateUrl: 'checkbox-configurable-example.html', - styleUrls: ['checkbox-configurable-example.css'], + 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; +export class CheckboxConfigurableExample +{ + checked = false; + indeterminate = false; + align = 'start'; + disabled = false; } 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 index c301bbe5..b5b049fa 100644 --- a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html +++ b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.html @@ -1 +1 @@ -Check me! +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 index 2c822582..7d525a35 100644 --- a/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts +++ b/src/assets/angular-material-examples/checkbox-overview/checkbox-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic checkboxes */ @Component({ - selector: 'checkbox-overview-example', - templateUrl: 'checkbox-overview-example.html', + selector : 'checkbox-overview-example', + templateUrl: 'checkbox-overview-example.html' }) -export class CheckboxOverviewExample {} +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 index 505a4c66..41d07043 100644 --- a/src/assets/angular-material-examples/chips-input/chips-input-example.css +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.css @@ -1,3 +1,3 @@ .demo-chip-list { - width: 100%; + 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 index f80ef315..dd8eef89 100644 --- a/src/assets/angular-material-examples/chips-input/chips-input-example.html +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.html @@ -1,14 +1,14 @@ - - - - {{fruit.name}} - cancel - - - - + + + + {{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 index 0e96d086..6a383c63 100644 --- a/src/assets/angular-material-examples/chips-input/chips-input-example.ts +++ b/src/assets/angular-material-examples/chips-input/chips-input-example.ts @@ -1,5 +1,6 @@ -import {Component} from '@angular/core'; -import {MdChipInputEvent, ENTER} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatChipInputEvent } from '@angular/material'; +import { ENTER } from '@angular/cdk/keycodes'; const COMMA = 188; @@ -7,46 +8,51 @@ const COMMA = 188; * @title Chips with input */ @Component({ - selector: 'chips-input-example', - templateUrl: 'chips-input-example.html', - styleUrls: ['chips-input-example.css'] + 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; +export class ChipsInputExample +{ + visible: boolean = true; + selectable: boolean = true; + removable: boolean = true; + addOnBlur: boolean = true; - // Enter, comma - separatorKeysCodes = [ENTER, COMMA]; + // Enter, comma + separatorKeysCodes = [ENTER, COMMA]; - fruits = [ - { name: 'Lemon' }, - { name: 'Lime' }, - { name: 'Apple' }, - ]; + fruits = [ + {name: 'Lemon'}, + {name: 'Lime'}, + {name: 'Apple'} + ]; + add(event: MatChipInputEvent): void + { + let input = event.input; + let value = event.value; - add(event: MdChipInputEvent): void { - let input = event.input; - let value = event.value; + // Add our person + if ( (value || '').trim() ) + { + this.fruits.push({name: value.trim()}); + } - // Add our person - if ((value || '').trim()) { - this.fruits.push({ name: value.trim() }); + // Reset the input value + if ( input ) + { + input.value = ''; + } } - // Reset the input value - if (input) { - input.value = ''; - } - } + remove(fruit: any): void + { + let index = this.fruits.indexOf(fruit); - remove(fruit: any): void { - let index = this.fruits.indexOf(fruit); - - if (index >= 0) { - this.fruits.splice(index, 1); + if ( index >= 0 ) + { + this.fruits.splice(index, 1); + } } - } } 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 index bb041056..ffe8a934 100644 --- a/src/assets/angular-material-examples/chips-overview/chips-overview-example.html +++ b/src/assets/angular-material-examples/chips-overview/chips-overview-example.html @@ -1,6 +1,6 @@ - - One fish - Two fish - Primary fish - Accent fish - + + 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 index 68c8c63d..ca367ada 100644 --- a/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts +++ b/src/assets/angular-material-examples/chips-overview/chips-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic chips */ @Component({ - selector: 'chips-overview-example', - templateUrl: 'chips-overview-example.html', - styleUrls: ['chips-overview-example.css'], + selector : 'chips-overview-example', + templateUrl: 'chips-overview-example.html', + styleUrls : ['chips-overview-example.css'] }) -export class ChipsOverviewExample {} +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 index dfb2f8c0..2b3cef09 100644 --- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.css @@ -1,3 +1,3 @@ -md-chip { - max-width: 200px; +mat-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 index 27677b1c..e662f6cd 100644 --- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html @@ -1,7 +1,7 @@ - - - {{chipColor.name}} - - + + + {{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 index 816c2264..51d0c411 100644 --- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts +++ b/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts @@ -1,20 +1,29 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Stacked chips */ @Component({ - selector: 'chips-stacked-example', - templateUrl: 'chips-stacked-example.html', - styleUrls: ['chips-stacked-example.css'], + selector : 'chips-stacked-example', + templateUrl: 'chips-stacked-example.html', + styleUrls : ['chips-stacked-example.css'] }) -export class ChipsStackedExample { - color: string; +export class ChipsStackedExample +{ + color: string; - availableColors = [ - { name: 'none', color: '' }, - { name: 'Primary', color: 'primary' }, - { name: 'Accent', color: 'accent' }, - { name: 'Warn', color: 'warn' } - ]; + 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.html b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html index a41723d8..967844ca 100644 --- a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html +++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.html @@ -1,5 +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 index cf4ce8ad..c2cac215 100644 --- a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts +++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts @@ -1,12 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Datepicker API */ @Component({ - selector: 'datepicker-api-example', - templateUrl: 'datepicker-api-example.html', - styleUrls: ['datepicker-api-example.css'], + selector : 'datepicker-api-example', + templateUrl: 'datepicker-api-example.html', + styleUrls : ['datepicker-api-example.css'] }) -export class DatepickerApiExample { +export class DatepickerApiExample +{ } 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 index 4fc367db..33e9ac76 100644 --- a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html +++ b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.html @@ -1,5 +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 index a2fe6d13..ebe82cc5 100644 --- a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts +++ b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts @@ -1,17 +1,18 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Datepicker Filter */ @Component({ - selector: 'datepicker-filter-example', - templateUrl: 'datepicker-filter-example.html', - styleUrls: ['datepicker-filter-example.css'], + 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; - } +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.html b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.html index 216fcd26..723d82f4 100644 --- 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 @@ -1,5 +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 index fea707bb..8bcc6fae 100644 --- 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 @@ -1,14 +1,15 @@ -import {Component} from '@angular/core'; +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'], + 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); +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.html b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html index 41a2ba3c..f548cc4c 100644 --- a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html +++ b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.html @@ -1,5 +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 index b9dde7ca..f77ade6b 100644 --- a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts +++ b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic datepicker */ @Component({ - selector: 'datepicker-overview-example', - templateUrl: 'datepicker-overview-example.html', - styleUrls: ['datepicker-overview-example.css'], + selector : 'datepicker-overview-example', + templateUrl: 'datepicker-overview-example.html', + styleUrls : ['datepicker-overview-example.css'] }) -export class DatepickerOverviewExample {} +export class DatepickerOverviewExample +{ +} 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 index 0391c9be..e8b7edb5 100644 --- 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 @@ -1,5 +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 index cb76dba2..57264dad 100644 --- 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 @@ -1,13 +1,14 @@ -import {Component} from '@angular/core'; +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'], + 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); +export class DatepickerStartViewExample +{ + startDate = new Date(1990, 0, 1); } 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 index a9579710..b1d83a2e 100644 --- a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html +++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html @@ -1,5 +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 index df5daa92..4a4732a5 100644 --- a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts +++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts @@ -1,12 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Datepicker Touch */ @Component({ - selector: 'datepicker-touch-example', - templateUrl: 'datepicker-touch-example.html', - styleUrls: ['datepicker-touch-example.css'], + selector : 'datepicker-touch-example', + templateUrl: 'datepicker-touch-example.html', + styleUrls : ['datepicker-touch-example.css'] }) -export class DatepickerTouchExample { +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 index 46c978da..927fdfde 100644 --- 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 @@ -1,25 +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.

- - - - - +

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.html b/src/assets/angular-material-examples/dialog-content/dialog-content-example.html index 176a3c41..cdfc2fb3 100644 --- a/src/assets/angular-material-examples/dialog-content/dialog-content-example.html +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.html @@ -1 +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 index 39b0d453..2ad837cb 100644 --- a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts @@ -1,29 +1,35 @@ -import {Component} from '@angular/core'; -import {MdDialog} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatDialog } from '@angular/material'; /** * @title Dialog with header, scrollable content and actions */ @Component({ - selector: 'dialog-content-example', - templateUrl: 'dialog-content-example.html', + selector : 'dialog-content-example', + templateUrl: 'dialog-content-example.html' }) -export class DialogContentExample { - constructor(public dialog: MdDialog) {} +export class DialogContentExample +{ + constructor(public dialog: MatDialog) + { + } - openDialog() { - const dialogRef = this.dialog.open(DialogContentExampleDialog, { - height: '350px' - }); + openDialog() + { + const dialogRef = this.dialog.open(DialogContentExampleDialog, { + height: '350px' + }); - dialogRef.afterClosed().subscribe(result => { - console.log(`Dialog result: ${result}`); - }); - } + dialogRef.afterClosed().subscribe(result => { + console.log(`Dialog result: ${result}`); + }); + } } @Component({ - selector: 'dialog-content-example-dialog', - templateUrl: 'dialog-content-example-dialog.html', + selector : 'dialog-content-example-dialog', + templateUrl: 'dialog-content-example-dialog.html' }) -export class DialogContentExampleDialog {} +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 index aa9b428e..cc651524 100644 --- 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 @@ -1,15 +1,18 @@ -

Favorite Animal

-
- My favorite animal is: -
    -
  • - ✓ Panda -
    • -
  • - ✓ Unicorn -
    • -
  • - ✓ Lion -
    • -
+

Favorite Animal

+
+ My favorite animal is: +
    +
  • + ✓ + Panda +
    • +
  • + ✓ + Unicorn +
    • +
  • + ✓ + Lion +
    • +
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 index 176a3c41..cdfc2fb3 100644 --- a/src/assets/angular-material-examples/dialog-data/dialog-data-example.html +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.html @@ -1 +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 index bdd0f4bc..51f7c41a 100644 --- a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts @@ -1,29 +1,36 @@ -import {Component, Inject} from '@angular/core'; -import {MdDialog, MD_DIALOG_DATA} from '@angular/material'; +import { Component, Inject } from '@angular/core'; +import { MatDialog, MAT_DIALOG_DATA } from '@angular/material'; /** * @title Injecting data when opening a dialog */ @Component({ - selector: 'dialog-data-example', - templateUrl: 'dialog-data-example.html', + selector : 'dialog-data-example', + templateUrl: 'dialog-data-example.html' }) -export class DialogDataExample { - constructor(public dialog: MdDialog) {} +export class DialogDataExample +{ + constructor(public dialog: MatDialog) + { + } - openDialog() { - this.dialog.open(DialogDataExampleDialog, { - data: { - animal: 'panda' - } - }); - } + openDialog() + { + this.dialog.open(DialogDataExampleDialog, { + data: { + animal: 'panda' + } + }); + } } @Component({ - selector: 'dialog-data-example-dialog', - templateUrl: 'dialog-data-example-dialog.html', + selector : 'dialog-data-example-dialog', + templateUrl: 'dialog-data-example-dialog.html' }) -export class DialogDataExampleDialog { - constructor(@Inject(MD_DIALOG_DATA) public data: any) {} +export class DialogDataExampleDialog +{ + constructor(@Inject(MAT_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 index 5238b0eb..eba6236a 100644 --- 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 @@ -1,5 +1,5 @@ -

Dialog with elements

-
This dialog showcases the title, close, content and actions elements.
-
- +

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.html b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html index 40637c4b..cf210381 100644 --- a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.html @@ -1 +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 index 37f3703e..8b63c6bf 100644 --- a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts @@ -1,24 +1,29 @@ -import {Component} from '@angular/core'; -import {MdDialog} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatDialog } from '@angular/material'; /** * @title Dialog elements */ @Component({ - selector: 'dialog-elements-example', - templateUrl: 'dialog-elements-example.html', + selector : 'dialog-elements-example', + templateUrl: 'dialog-elements-example.html' }) -export class DialogElementsExample { - constructor(public dialog: MdDialog) { } +export class DialogElementsExample +{ + constructor(public dialog: MatDialog) + { + } - openDialog() { - this.dialog.open(DialogElementsExampleDialog); - } + openDialog() + { + this.dialog.open(DialogElementsExampleDialog); + } } - @Component({ - selector: 'dialog-elements-example-dialog', - templateUrl: 'dialog-elements-example-dialog.html', + selector : 'dialog-elements-example-dialog', + templateUrl: 'dialog-elements-example-dialog.html' }) -export class DialogElementsExampleDialog { } +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 index b4214fbf..b96d1b11 100644 --- 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 @@ -1,11 +1,11 @@ -

Hi {{data.name}}

-
-

What's your favorite animal?

- - - +

Hi {{data.name}}

+
+

What's your favorite animal?

+ + +
-
- - +
+ +
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 index b6911190..19060581 100644 --- a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.html @@ -1,13 +1,13 @@
    -
  1. - - - -
    2. -
  2. - -
    3. -
  3. - You chose: {{animal}} -
    4. +
  4. + + + +
    5. +
  5. + +
    6. +
  6. + You chose: {{animal}} +
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 index 5dec934d..a5401d02 100644 --- a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts @@ -1,46 +1,58 @@ -import {Component, Inject} from '@angular/core'; -import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; +import { Component, Inject } from '@angular/core'; +import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; /** * @title Dialog Overview */ @Component({ - selector: 'dialog-overview-example', - templateUrl: 'dialog-overview-example.html' + selector : 'dialog-overview-example', + templateUrl: 'dialog-overview-example.html' }) -export class DialogOverviewExample { +export class DialogOverviewExample +{ - animal: string; - name: string; + animal: string; + name: string; - constructor(public dialog: MdDialog) {} + constructor(public dialog: MatDialog) + { + } - openDialog(): void { - let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { - width: '250px', - data: { name: this.name, animal: this.animal } - }); + 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; - }); - } + 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', + selector : 'dialog-overview-example-dialog', + templateUrl: 'dialog-overview-example-dialog.html' }) -export class DialogOverviewExampleDialog { +export class DialogOverviewExampleDialog +{ - constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) public data: any) { } + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any + ) + { + } - onNoClick(): void { - this.dialogRef.close(); - } + onNoClick(): void + { + this.dialogRef.close(); + } } 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 index 48c0cc50..b3176c4e 100644 --- a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html +++ b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.html @@ -1,18 +1,18 @@ - - - - Personal data - - - Type your name and age - - - - - - - - - - - + + + + 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 index 75cff7cc..7a34e091 100644 --- a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts +++ b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic expansion panel */ @Component({ - selector: 'expansion-overview-example', - templateUrl: 'expansion-overview-example.html', + selector : 'expansion-overview-example', + templateUrl: 'expansion-overview-example.html' }) -export class ExpansionOverviewExample {} +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 index 7a97afef..520c601c 100644 --- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css @@ -1,9 +1,9 @@ -.example-headers-align .mat-expansion-panel-header-title, +.example-headers-align .mat-expansion-panel-header-title, .example-headers-align .mat-expansion-panel-header-description { - flex-basis: 0; + flex-basis: 0; } .example-headers-align .mat-expansion-panel-header-description { - justify-content: space-between; - align-items: center; + 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 index e81ede44..f13fb9a1 100644 --- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html @@ -1,69 +1,69 @@ - - - - - Personal data - - - Type your name and age - account_circle - - + + + + + Personal data + + + Type your name and age + account_circle + + - - - + + + - - - + + + - - - - + + + + - - - - Destination - - - Type the country name - map - - + + + + Destination + + + Type the country name + map + + - - - + + + - - - - - + + + + + - - - - Day of the trip - - - Inform the date you wish to travel - date_range - - + + + + 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 index e302175f..50bb2aed 100644 --- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts @@ -1,25 +1,29 @@ -import {Component} from '@angular/core'; +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'] + selector : 'expansion-steps-example', + templateUrl: 'expansion-steps-example.html', + styleUrls : ['expansion-steps-example.css'] }) -export class ExpansionStepsExample { - step = 0; +export class ExpansionStepsExample +{ + step = 0; - setStep(index: number) { - this.step = index; - } + setStep(index: number) + { + this.step = index; + } - nextStep() { - this.step++; - } + nextStep() + { + this.step++; + } - prevStep() { - this.step--; - } + prevStep() + { + this.step--; + } } 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 index 19c84dd5..00006f9d 100644 --- 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 @@ -1,9 +1,9 @@ - - - {{tile.text}} - - + + + {{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 index 21dc729a..0cf1626c 100644 --- 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 @@ -1,17 +1,34 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Dynamic grid-list */ @Component({ - selector: 'grid-list-dynamic-example', - templateUrl: 'grid-list-dynamic-example.html', + 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'}, - ]; +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 index 2598f58f..dedb3e95 100644 --- 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 @@ -1,3 +1,3 @@ -md-grid-tile { - background: lightblue; +mat-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 index 6651887f..c2d031ed 100644 --- 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 @@ -1,6 +1,6 @@ - - 1 - 2 - 3 - 4 - + + 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 index dd03daef..956b738c 100644 --- 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 @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +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', + selector : 'grid-list-overview-example', + styleUrls : ['grid-list-overview-example.css'], + templateUrl: 'grid-list-overview-example.html' }) -export class GridListOverviewExample {} +export class GridListOverviewExample +{ +} 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 index dd46af80..7afdf57b 100644 --- a/src/assets/angular-material-examples/icon-overview/icon-overview-example.html +++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.html @@ -1 +1 @@ -home +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 index f81416f3..a60c22c0 100644 --- a/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts +++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic icons */ @Component({ - selector: 'icon-overview-example', - templateUrl: 'icon-overview-example.html', + selector : 'icon-overview-example', + templateUrl: 'icon-overview-example.html' }) -export class IconOverviewExample {} +export class IconOverviewExample +{ +} 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 index ac74cf79..ed7e8eb9 100644 --- a/src/assets/angular-material-examples/icon-svg/icon-svg-example.html +++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.html @@ -1 +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 index 7bf6a01a..4cea0740 100644 --- a/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts +++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts @@ -1,18 +1,20 @@ -import {Component} from '@angular/core'; -import {DomSanitizer} from '@angular/platform-browser'; -import {MdIconRegistry} from '@angular/material'; +import { Component } from '@angular/core'; +import { DomSanitizer } from '@angular/platform-browser'; +import { MatIconRegistry } from '@angular/material'; /** * @title SVG icons */ @Component({ - selector: 'icon-svg-example', - templateUrl: 'icon-svg-example.html', + 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')); - } +export class IconSvgExample +{ + constructor(iconRegistry: MatIconRegistry, 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 index 55dcc576..976786fe 100644 --- a/src/assets/angular-material-examples/input-clearable/input-clearable-example.css +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.css @@ -1,3 +1,3 @@ .example-form-field { - width: 200px; + 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 index c8be13f9..984a7eda 100644 --- a/src/assets/angular-material-examples/input-clearable/input-clearable-example.html +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.html @@ -1,6 +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 index 3b469528..f240bf0d 100644 --- a/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.ts @@ -1,13 +1,14 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Input Clearable */ @Component({ - selector: 'input-clearable-example', - templateUrl: './input-clearable-example.html', - styleUrls: ['./input-clearable-example.css'], + selector : 'input-clearable-example', + templateUrl: './input-clearable-example.html', + styleUrls : ['./input-clearable-example.css'] }) -export class InputClearableExample { - value = 'Clear me'; +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 index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-errors/input-errors-example.css +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index 4434b6ea..24c0c93a 100644 --- a/src/assets/angular-material-examples/input-errors/input-errors-example.html +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.html @@ -1,11 +1,11 @@
- - - - Please enter a valid email address - - - Email is required - - + + + + 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 index 8a2dbb86..59200fbb 100644 --- a/src/assets/angular-material-examples/input-errors/input-errors-example.ts +++ b/src/assets/angular-material-examples/input-errors/input-errors-example.ts @@ -1,5 +1,5 @@ -import {Component} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; +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-]+)*$/; @@ -7,14 +7,16 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA * @title Input Errors */ @Component({ - selector: 'input-errors-example', - templateUrl: 'input-errors-example.html', - styleUrls: ['input-errors-example.css'], + selector : 'input-errors-example', + templateUrl: 'input-errors-example.html', + styleUrls : ['input-errors-example.css'] }) -export class InputErrorsExample { +export class InputErrorsExample +{ - emailFormControl = new FormControl('', [ - Validators.required, - Validators.pattern(EMAIL_REGEX)]); + 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 index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-form/input-form-example.css +++ b/src/assets/angular-material-examples/input-form/input-form-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index f7abf808..234f80d2 100644 --- a/src/assets/angular-material-examples/input-form/input-form-example.html +++ b/src/assets/angular-material-examples/input-form/input-form-example.html @@ -1,36 +1,50 @@
- - - + + + - - - -
- - - -
+ + + + + +
+ + + + + + + +
-

- - - - - - -

+

+ + + + + + +

- - - - -
- - - - - - {{postalCode.value.length}} / 5 -
+ + + + + + +
+ + + + + + + + + + + {{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 index 192f9cae..579294d4 100644 --- a/src/assets/angular-material-examples/input-form/input-form-example.ts +++ b/src/assets/angular-material-examples/input-form/input-form-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +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'], + selector : 'input-form-example', + templateUrl: 'input-form-example.html', + styleUrls : ['input-form-example.css'] }) -export class InputFormExample {} +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 index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-hint/input-hint-example.css +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index f7e36d1d..9d652d1a 100644 --- a/src/assets/angular-material-examples/input-hint/input-hint-example.html +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.html @@ -1,9 +1,9 @@
- - - Don't disclose personal info - {{message.value.length}} / 256 - - + + + 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 index 3b3a5ebc..d8f0737b 100644 --- a/src/assets/angular-material-examples/input-hint/input-hint-example.ts +++ b/src/assets/angular-material-examples/input-hint/input-hint-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Input hints */ @Component({ - selector: 'input-hint-example', - templateUrl: 'input-hint-example.html', - styleUrls: ['input-hint-example.css'], + selector : 'input-hint-example', + templateUrl: 'input-hint-example.html', + styleUrls : ['input-hint-example.css'] }) -export class InputHintExample { } +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 index 08fa6753..7a2e5016 100644 --- a/src/assets/angular-material-examples/input-overview/input-overview-example.css +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.css @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index cae5b1f0..e577897f 100644 --- a/src/assets/angular-material-examples/input-overview/input-overview-example.html +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.html @@ -1,5 +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 index b7d1f30b..50501548 100644 --- a/src/assets/angular-material-examples/input-overview/input-overview-example.ts +++ b/src/assets/angular-material-examples/input-overview/input-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic Inputs */ @Component({ - selector: 'input-overview-example', - styleUrls: ['input-overview-example.css'], - templateUrl: 'input-overview-example.html', + selector : 'input-overview-example', + styleUrls : ['input-overview-example.css'], + templateUrl: 'input-overview-example.html' }) -export class InputOverviewExample {} +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 index 08fa6753..7a2e5016 100644 --- 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 @@ -1,9 +1,9 @@ .example-form { - min-width: 150px; - max-width: 500px; - width: 100%; + min-width: 150px; + max-width: 500px; + width: 100%; } .example-full-width { - width: 100%; + 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 index 25485d1f..7c62dd89 100644 --- 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 @@ -1,9 +1,9 @@
- - +1   - - mode_edit - - + + +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 index 00ed164c..279792f8 100644 --- 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 @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +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'], + selector : 'input-prefix-suffix-example', + templateUrl: 'input-prefix-suffix-example.html', + styleUrls : ['input-prefix-suffix-example.css'] }) -export class InputPrefixSuffixExample { } +export class InputPrefixSuffixExample +{ +} 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 index ada715ee..29d8ad7c 100644 --- a/src/assets/angular-material-examples/list-overview/list-overview-example.html +++ b/src/assets/angular-material-examples/list-overview/list-overview-example.html @@ -1,5 +1,5 @@ - - Item 1 - Item 2 - Item 3 - + + 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 index 7912329c..fc50a3fb 100644 --- a/src/assets/angular-material-examples/list-overview/list-overview-example.ts +++ b/src/assets/angular-material-examples/list-overview/list-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic list */ @Component({ - selector: 'list-overview-example', - templateUrl: 'list-overview-example.html', + selector : 'list-overview-example', + templateUrl: 'list-overview-example.html' }) -export class ListOverviewExample {} +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 index 487bd8d4..745a8626 100644 --- a/src/assets/angular-material-examples/list-sections/list-sections-example.css +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.css @@ -1,3 +1,3 @@ .mat-list-icon { - color: rgba(0, 0, 0, 0.54); + 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 index 38d20f97..10d6b892 100644 --- a/src/assets/angular-material-examples/list-sections/list-sections-example.html +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.html @@ -1,15 +1,15 @@ - -

Folders

- - folder -

{{folder.name}}

-

{{folder.updated | date}}

- - -

Notes

- - note -

{{note.name}}

-

{{note.updated | date}}

- - + +

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 index 63e7e4c6..e5d232ec 100644 --- a/src/assets/angular-material-examples/list-sections/list-sections-example.ts +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.ts @@ -1,36 +1,37 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title List with sections */ @Component({ - selector: 'list-sections-example', - styleUrls: ['list-sections-example.css'], - templateUrl: 'list-sections-example.html', + 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'), - } - ]; +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.html b/src/assets/angular-material-examples/list-selection/list-selection-example.html index cd1d9f07..e3b6e89a 100644 --- a/src/assets/angular-material-examples/list-selection/list-selection-example.html +++ b/src/assets/angular-material-examples/list-selection/list-selection-example.html @@ -1,9 +1,9 @@ - - - {{shoe}} - - + + + {{shoe}} + +

- Options selected: {{shoes.selectedOptions.selected.length}} + 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 index 644d3d8a..c3d226b2 100644 --- a/src/assets/angular-material-examples/list-selection/list-selection-example.ts +++ b/src/assets/angular-material-examples/list-selection/list-selection-example.ts @@ -1,13 +1,14 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title List with selection */ @Component({ - selector: 'list-selection-example', - styleUrls: ['list-selection-example.css'], - templateUrl: 'list-selection-example.html', + selector : 'list-selection-example', + styleUrls : ['list-selection-example.css'], + templateUrl: 'list-selection-example.html' }) -export class ListSelectionExample { - typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; +export class ListSelectionExample +{ + typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; } 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 index e1494245..d7d0768d 100644 --- a/src/assets/angular-material-examples/menu-icons/menu-icons-example.html +++ b/src/assets/angular-material-examples/menu-icons/menu-icons-example.html @@ -1,17 +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 index 6c474a57..79801a6c 100644 --- a/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts +++ b/src/assets/angular-material-examples/menu-icons/menu-icons-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Menu with icons */ @Component({ - selector: 'menu-icons-example', - templateUrl: 'menu-icons-example.html', - styleUrls: ['menu-icons-example.css'], + selector : 'menu-icons-example', + templateUrl: 'menu-icons-example.html', + styleUrls : ['menu-icons-example.css'] }) -export class MenuIconsExample {} +export class MenuIconsExample +{ +} 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 index 2b5d246c..39b83528 100644 --- a/src/assets/angular-material-examples/menu-overview/menu-overview-example.html +++ b/src/assets/angular-material-examples/menu-overview/menu-overview-example.html @@ -1,5 +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 index 2858d3e7..78c25cf7 100644 --- a/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts +++ b/src/assets/angular-material-examples/menu-overview/menu-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic menu */ @Component({ - selector: 'menu-overview-example', - templateUrl: 'menu-overview-example.html', - styleUrls: ['menu-overview-example.css'], + selector : 'menu-overview-example', + templateUrl: 'menu-overview-example.html', + styleUrls : ['menu-overview-example.css'] }) -export class MenuOverviewExample {} +export class MenuOverviewExample +{ +} 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 index bbfde3b9..99b9f7e6 100644 --- a/src/assets/angular-material-examples/nested-menu/nested-menu-example.html +++ b/src/assets/angular-material-examples/nested-menu/nested-menu-example.html @@ -1,47 +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 index d9d7b81e..86054918 100644 --- a/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts +++ b/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Nested menu */ @Component({ - selector: 'nested-menu-example', - templateUrl: 'nested-menu-example.html', - styleUrls: ['nested-menu-example.css'] + selector : 'nested-menu-example', + templateUrl: 'nested-menu-example.html', + styleUrls : ['nested-menu-example.css'] }) -export class NestedMenuExample {} +export class NestedMenuExample +{ +} 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 index e1ce734f..66f1bf90 100644 --- a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html +++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.html @@ -1,28 +1,28 @@ - - List length: - - + + List length: + + - - Page size: - - - - Page size options: - - + + Page size: + + + + Page size options: + + - - + +
-
Page Change Event Properties
-
List length: {{pageEvent.length}}
-
Page size: {{pageEvent.pageSize}}
-
Page index: {{pageEvent.pageIndex}}
+
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 index ba3df8db..8a63b15e 100644 --- a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts +++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts @@ -1,23 +1,25 @@ -import {Component} from '@angular/core'; -import {PageEvent} from '@angular/material'; +import { Component } from '@angular/core'; +import { PageEvent } from '@angular/material'; /** * @title Configurable paginator */ @Component({ - selector: 'paginator-configurable-example', - templateUrl: 'paginator-configurable-example.html', + selector : 'paginator-configurable-example', + templateUrl: 'paginator-configurable-example.html' }) -export class PaginatorConfigurableExample { - // MdPaginator Inputs - length = 100; - pageSize = 10; - pageSizeOptions = [5, 10, 25, 100]; +export class PaginatorConfigurableExample +{ + // MdPaginator Inputs + length = 100; + pageSize = 10; + pageSizeOptions = [5, 10, 25, 100]; - // MdPaginator Output - pageEvent: PageEvent; + // MdPaginator Output + pageEvent: PageEvent; - setPageSizeOptions(setPageSizeOptionsInput: string) { - this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str); - } + setPageSizeOptions(setPageSizeOptionsInput: string) + { + this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str); + } } 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 index 010a9e5d..61ba03e5 100644 --- a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html +++ b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.html @@ -1,4 +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 index b2d305e1..82b583a9 100644 --- a/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts +++ b/src/assets/angular-material-examples/paginator-overview/paginator-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Paginator */ @Component({ - selector: 'paginator-overview-example', - templateUrl: 'paginator-overview-example.html', + selector : 'paginator-overview-example', + templateUrl: 'paginator-overview-example.html' }) -export class PaginatorOverviewExample {} +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 index 558293fb..6551ff13 100644 --- 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 @@ -1,14 +1,14 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 0 10px; + 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 index 93937b77..8974b9bc 100644 --- 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 @@ -1,63 +1,63 @@ - - -

Progress bar configuration

+ + +

Progress bar configuration

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

Result

+ + +

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 index 101408dc..d5dd10af 100644 --- 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 @@ -1,16 +1,17 @@ -import {Component} from '@angular/core'; +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'], + 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; +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.html b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.html index 8ab16e9c..f6ba0575 100644 --- 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 @@ -1 +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 index 67a6c94d..e2e35861 100644 --- 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 @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic progress-bar */ @Component({ - selector: 'progress-bar-overview-example', - templateUrl: 'progress-bar-overview-example.html', + selector : 'progress-bar-overview-example', + templateUrl: 'progress-bar-overview-example.html' }) -export class ProgressBarOverviewExample {} +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 index 558293fb..6551ff13 100644 --- 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 @@ -1,14 +1,14 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 0 10px; + 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 index 1ba3183a..d2106276 100644 --- 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 @@ -1,49 +1,49 @@ - - -

Progress spinner configuration

+ + +

Progress spinner configuration

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

Result

+
+ + +
+ + + + +

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 index ed1ca870..b70c2f2b 100644 --- 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 @@ -1,15 +1,16 @@ -import {Component} from '@angular/core'; +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'], + 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; +export class ProgressSpinnerConfigurableExample +{ + color = 'primary'; + mode = 'determinate'; + value = 50; } 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 index cd768c67..34e51f70 100644 --- 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 @@ -1 +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 index 67ada8ad..45fd5825 100644 --- 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 @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic progress-spinner */ @Component({ - selector: 'progress-spinner-overview-example', - templateUrl: 'progress-spinner-overview-example.html', + selector : 'progress-spinner-overview-example', + templateUrl: 'progress-spinner-overview-example.html' }) -export class ProgressSpinnerOverviewExample {} +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 index f70c1b3b..6a70beb0 100644 --- 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 @@ -1,12 +1,12 @@ .example-radio-group { - display: inline-flex; - flex-direction: column; + display: inline-flex; + flex-direction: column; } .example-radio-button { - margin: 5px; + margin: 5px; } .example-selected-value { - margin: 15px 0; + 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 index 108971b5..e9adb887 100644 --- 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 @@ -1,6 +1,6 @@ - - - {{season}} - - + + + {{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 index 52fc5157..a2522055 100644 --- 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 @@ -1,20 +1,21 @@ -import {Component} from '@angular/core'; +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'], + selector : 'radio-ng-model-example', + templateUrl: 'radio-ng-model-example.html', + styleUrls : ['radio-ng-model-example.css'] }) -export class RadioNgModelExample { - favoriteSeason: string; +export class RadioNgModelExample +{ + favoriteSeason: string; - seasons = [ - 'Winter', - 'Spring', - 'Summer', - 'Autumn', - ]; + seasons = [ + 'Winter', + 'Spring', + 'Summer', + 'Autumn' + ]; } 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 index 4038381c..d1167ae7 100644 --- a/src/assets/angular-material-examples/radio-overview/radio-overview-example.html +++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.html @@ -1,4 +1,4 @@ - - Option 1 - Option 2 - + + 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 index 916ce663..aab6e208 100644 --- a/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts +++ b/src/assets/angular-material-examples/radio-overview/radio-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic radios */ @Component({ - selector: 'radio-overview-example', - templateUrl: 'radio-overview-example.html', + selector : 'radio-overview-example', + templateUrl: 'radio-overview-example.html' }) -export class RadioOverviewExample {} +export class RadioOverviewExample +{ +} 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 index 6dea33cc..94157c4d 100644 --- a/src/assets/angular-material-examples/select-form/select-form-example.html +++ b/src/assets/angular-material-examples/select-form/select-form-example.html @@ -1,9 +1,9 @@
- - - {{food.viewValue}} - - + + + {{food.viewValue}} + + -

Selected value: {{selectedValue}}

+

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 index 0bb2c305..afd365ae 100644 --- a/src/assets/angular-material-examples/select-form/select-form-example.ts +++ b/src/assets/angular-material-examples/select-form/select-form-example.ts @@ -1,18 +1,25 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Select in a form */ @Component({ - selector: 'select-form-example', - templateUrl: 'select-form-example.html', + selector : 'select-form-example', + templateUrl: 'select-form-example.html' }) -export class SelectFormExample { - selectedValue: string; +export class SelectFormExample +{ + selectedValue: string; - foods = [ - {value: 'steak-0', viewValue: 'Steak'}, - {value: 'pizza-1', viewValue: 'Pizza'}, - {value: 'tacos-2', viewValue: 'Tacos'} - ]; + 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.html b/src/assets/angular-material-examples/select-overview/select-overview-example.html index a4017ca5..47e5467f 100644 --- a/src/assets/angular-material-examples/select-overview/select-overview-example.html +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.html @@ -1,5 +1,5 @@ - - - {{ food.viewValue }} - - + + + {{ 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 index a6a2ff82..7e88e407 100644 --- a/src/assets/angular-material-examples/select-overview/select-overview-example.ts +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.ts @@ -1,16 +1,23 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic select */ @Component({ - selector: 'select-overview-example', - templateUrl: 'select-overview-example.html', + 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'} - ]; +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 index 6d58f0f2..d98e36e9 100644 --- a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css @@ -1,26 +1,26 @@ .example-sidenav-fab-container { - width: 500px; - height: 300px; - border: 1px solid rgba(0, 0, 0, 0.5); + 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 { + max-width: 200px; } .example-sidenav-fab-container .mat-sidenav-content, -.example-sidenav-fab-container md-sidenav { - display: flex; - overflow: visible; +.example-sidenav-fab-container mat-sidenav { + display: flex; + overflow: visible; } .example-scrolling-content { - overflow: auto; - height: 100%; + overflow: auto; + height: 100%; } .example-fab.mat-mini-fab { - position: absolute; - right: 20px; - bottom: 10px; + 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 index f194c098..319ba69f 100644 --- a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html @@ -1,32 +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. + 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 index 4af25f47..17945be6 100644 --- a/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts +++ b/src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts @@ -1,13 +1,15 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +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, + selector : 'sidenav-fab-example', + templateUrl : 'sidenav-fab-example.html', + styleUrls : ['sidenav-fab-example.css'], + encapsulation : ViewEncapsulation.None, + preserveWhitespaces: false }) -export class SidenavFabExample {} +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 index 8ab00588..a49bb6f8 100644 --- a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.css @@ -1,16 +1,16 @@ .example-container { - width: 500px; - height: 300px; - border: 1px solid rgba(0, 0, 0, 0.5); + 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; + display: flex; + height: 100%; + align-items: center; + justify-content: center; } .example-sidenav { - padding: 20px; + 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 index 757e4b2d..b1b6ea66 100644 --- a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.html @@ -1,12 +1,12 @@ - - - Jolly good! - + + + 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 index 5496f3f4..4c665e2f 100644 --- a/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts +++ b/src/assets/angular-material-examples/sidenav-overview/sidenav-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic sidenav */ @Component({ - selector: 'sidenav-overview-example', - templateUrl: 'sidenav-overview-example.html', - styleUrls: ['sidenav-overview-example.css'], + selector : 'sidenav-overview-example', + templateUrl: 'sidenav-overview-example.html', + styleUrls : ['sidenav-overview-example.css'] }) -export class SidenavOverviewExample {} +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 index 060532ee..d448a57e 100644 --- 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 @@ -1,14 +1,14 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 10px; + 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 index 88099f4b..f20a297c 100644 --- 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 @@ -1,44 +1,44 @@ - - -

Slider configuration

+ + +

Slider configuration

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

Result

+ + +

Result

-
- - Slide me! - -
- - +
+ + 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 index 17835efb..53cebae7 100644 --- 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 @@ -1,15 +1,16 @@ -import {Component} from '@angular/core'; +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'], + 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; +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 index 8567e7f8..6f923bcb 100644 --- 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 @@ -1,4 +1,4 @@ -.example-form md-slide-toggle { - margin: 8px 0; - display: block; +.example-form mat-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 index 0a2b897d..d51595e3 100644 --- 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 @@ -1,25 +1,25 @@

Slide Toggle using a simple NgModel.

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

Slide Toggle inside of a Template-driven form

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

Slide Toggle inside of a Reactive form

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

Form Group Status: {{ formGroup.status}}

+

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 index 2636c474..2fa487ff 100644 --- 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 @@ -1,26 +1,29 @@ -import {Component} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +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'], + selector : 'slide-toggle-forms-example', + templateUrl: './slide-toggle-forms-example.html', + styleUrls : ['./slide-toggle-forms-example.css'] }) -export class SlideToggleFormsExample { - isChecked = true; - formGroup: FormGroup; +export class SlideToggleFormsExample +{ + isChecked = true; + formGroup: FormGroup; - constructor(formBuilder: FormBuilder) { - this.formGroup = formBuilder.group({ - enableWifi: '', - acceptTerms: ['', Validators.requiredTrue] - }); - } + constructor(formBuilder: FormBuilder) + { + this.formGroup = formBuilder.group({ + enableWifi : '', + acceptTerms: ['', Validators.requiredTrue] + }); + } - onFormSubmit(formValue: any) { - alert(JSON.stringify(formValue, null, 2)); - } + onFormSubmit(formValue: any) + { + alert(JSON.stringify(formValue, null, 2)); + } } 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 index 6b9586e1..d9d6ab19 100644 --- 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 @@ -1 +1 @@ -Slide me! +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 index 6ed08696..1b378976 100644 --- 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 @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic slide-toggles */ @Component({ - selector: 'slide-toggle-overview-example', - templateUrl: 'slide-toggle-overview-example.html', + selector : 'slide-toggle-overview-example', + templateUrl: 'slide-toggle-overview-example.html' }) -export class SlideToggleOverviewExample {} +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 index 1f954ba8..27d202ff 100644 --- a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.css @@ -1,22 +1,22 @@ .example-h2 { - margin: 10px; + margin: 10px; } .example-section { - display: flex; - align-content: center; - align-items: center; - height: 60px; + display: flex; + align-content: center; + align-items: center; + height: 60px; } .example-margin { - margin: 10px; + margin: 10px; } .mat-slider-horizontal { - width: 300px; + width: 300px; } .mat-slider-vertical { - height: 300px; + 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 index 5eb3214f..13c1bbea 100644 --- a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.html @@ -1,63 +1,63 @@ - - -

Slider configuration

+ + +

Slider configuration

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

Result

+ + +

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 index caee9ab5..a95d96e0 100644 --- a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts @@ -1,32 +1,37 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +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, + 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; +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; + 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 index 8dfe08cc..3ed65dee 100644 --- a/src/assets/angular-material-examples/slider-overview/slider-overview-example.css +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.css @@ -1,4 +1,4 @@ /** No CSS for this example */ -md-slider { - width: 300px; +mat-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 index 9a92c8f8..49162f5f 100644 --- a/src/assets/angular-material-examples/slider-overview/slider-overview-example.html +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.html @@ -1 +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 index 3284b3ae..650285c8 100644 --- a/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts +++ b/src/assets/angular-material-examples/slider-overview/slider-overview-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic slider */ @Component({ - selector: 'slider-overview-example', - templateUrl: 'slider-overview-example.html', - styleUrls: ['slider-overview-example.css'], + selector : 'slider-overview-example', + templateUrl: 'slider-overview-example.html', + styleUrls : ['slider-overview-example.css'] }) -export class SliderOverviewExample {} +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 index fa7dc674..b8499867 100644 --- 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 @@ -1,3 +1,3 @@ .example-pizza-party { - color: hotpink; + 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 index cfba7c45..eef71b71 100644 --- 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 @@ -1,3 +1,3 @@ - Pizza party!!! 🍕 + 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 index 69fe01bc..655e4a14 100644 --- 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 @@ -1,3 +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 index 8aac00a1..5edd96bb 100644 --- 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 @@ -1,27 +1,32 @@ -import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatSnackBar } from '@angular/material'; /** * @title Snack-bar with a custom component */ @Component({ - selector: 'snack-bar-component-example', - templateUrl: 'snack-bar-component-example.html', + selector : 'snack-bar-component-example', + templateUrl: 'snack-bar-component-example.html' }) -export class SnackBarComponentExample { - constructor(public snackBar: MdSnackBar) {} +export class SnackBarComponentExample +{ + constructor(public snackBar: MatSnackBar) + { + } - openSnackBar() { - this.snackBar.openFromComponent(PizzaPartyComponent, { - duration: 500, - }); - } + 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'], + selector : 'snack-bar-component-example-snack', + templateUrl: 'snack-bar-component-example-snack.html', + styleUrls : ['snack-bar-component-example-snack.css'] }) -export class PizzaPartyComponent {} +export class PizzaPartyComponent +{ +} 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 index 757612c1..2b60229e 100644 --- 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 @@ -1,9 +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 index 4d1980dc..a973e4ce 100644 --- 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 @@ -1,19 +1,23 @@ -import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import { Component } from '@angular/core'; +import { MatSnackBar } from '@angular/material'; /** * @title Basic snack-bar */ @Component({ - selector: 'snack-bar-overview-example', - templateUrl: 'snack-bar-overview-example.html', + selector : 'snack-bar-overview-example', + templateUrl: 'snack-bar-overview-example.html' }) -export class SnackBarOverviewExample { - constructor(public snackBar: MdSnackBar) {} +export class SnackBarOverviewExample +{ + constructor(public snackBar: MatSnackBar) + { + } - openSnackBar(message: string, action: string) { - this.snackBar.open(message, action, { - duration: 2000, - }); - } + 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 index 5d2cd6d6..a7768c59 100644 --- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.css +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.css @@ -1,3 +1,3 @@ .mat-sort-header-container { - align-items: center; + 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 index 342f3855..93850c7e 100644 --- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.html +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.html @@ -1,17 +1,17 @@ - - - - - - - - +
Dessert (100g)CaloriesFat (g)Carbs (g)Protein (g)
+ + + + + + + - - - - - - - + + + + + + +
Dessert (100g)CaloriesFat (g)Carbs (g)Protein (g)
{{dessert.name}}{{dessert.calories}}{{dessert.fat}}{{dessert.carbs}}{{dessert.protein}}
{{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 index 58b19b39..939ead29 100644 --- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts @@ -1,50 +1,87 @@ -import {Component} from '@angular/core'; -import {Sort} from '@angular/material'; +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'], + 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'}, - ]; +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; + sortedData; - constructor() { - this.sortedData = this.desserts.slice(); - } - - sortData(sort: Sort) { - const data = this.desserts.slice(); - if (!sort.active || sort.direction == '') { - this.sortedData = data; - return; + constructor() + { + this.sortedData = this.desserts.slice(); } - 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; - } - }); - } + 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); +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.html b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html index 4e4408a1..9bf2766e 100644 --- a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html +++ b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.html @@ -1,33 +1,34 @@ - - - -
- Fill out your name - - - -
- -
-
- - -
- Fill out your address - - - -
- - -
-
- - - Done - You are now done. -
- -
- - + + + + +
+ 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 index 717dcb5d..fced5570 100644 --- a/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts +++ b/src/assets/angular-material-examples/stepper-overview/stepper-overview-example.ts @@ -1,27 +1,31 @@ -import {Component} from '@angular/core'; -import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +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'] + selector : 'stepper-overview-example', + templateUrl: 'stepper-overview-example.html', + styleUrls : ['stepper-overview-example.css'] }) -export class StepperOverviewExample { - isLinear = false; - firstFormGroup: FormGroup; - secondFormGroup: FormGroup; +export class StepperOverviewExample +{ + isLinear = false; + firstFormGroup: FormGroup; + secondFormGroup: FormGroup; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) + { + } - ngOnInit() { - this.firstFormGroup = this._formBuilder.group({ - firstCtrl: ['', Validators.required] - }); - this.secondFormGroup = this._formBuilder.group({ - secondCtrl: ['', Validators.required] - }); - } + 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 index 8b311e6d..59415cd5 100644 --- a/src/assets/angular-material-examples/table-basic/table-basic-example.css +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.css @@ -1,11 +1,11 @@ .example-container { - display: flex; - flex-direction: column; - max-height: 500px; - min-width: 300px; + display: flex; + flex-direction: column; + max-height: 500px; + min-width: 300px; } .mat-table { - overflow: auto; - max-height: 500px; + 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 index 66dd020c..7ea3221b 100644 --- a/src/assets/angular-material-examples/table-basic/table-basic-example.html +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.html @@ -1,34 +1,34 @@
- + - + - - - No. - {{element.position}} - + + + No. + {{element.position}} + - - - Name - {{element.name}} - + + + Name + {{element.name}} + - - - Weight - {{element.weight}} - + + + Weight + {{element.weight}} + - - - Symbol - {{element.symbol}} - + + + 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 index 41f41c7e..acdca967 100644 --- a/src/assets/angular-material-examples/table-basic/table-basic-example.ts +++ b/src/assets/angular-material-examples/table-basic/table-basic-example.ts @@ -1,49 +1,131 @@ -import {Component} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {Observable} from 'rxjs/Observable'; +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', + 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 class TableBasicExample +{ + displayedColumns = ['position', 'name', 'weight', 'symbol']; + dataSource = new ExampleDataSource(); } -export interface Element { - name: string; - position: number; - weight: number; - symbol: string; +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'}, + {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' + } ]; /** @@ -52,11 +134,15 @@ const data: Element[] = [ * 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); - } +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() {} + 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 index 51287a08..155058d1 100644 --- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.css +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.css @@ -1,26 +1,26 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + 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; + 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; + font-size: 14px; + flex-grow: 1; + margin-left: 32px; } .mat-table { - overflow: auto; - max-height: 500px; + 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 index c3d8ca1d..cd1964d3 100644 --- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.html +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html @@ -1,40 +1,40 @@
-
- - - -
+
+ + + +
- + - + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - {{row.color}} - + + + 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 index 8404f0c1..d00c5e3f 100644 --- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts @@ -1,7 +1,7 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; -import {DataSource} from '@angular/cdk/collections'; -import {BehaviorSubject} from 'rxjs/BehaviorSubject'; -import {Observable} from 'rxjs/Observable'; +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'; @@ -13,74 +13,95 @@ import 'rxjs/add/observable/fromEvent'; * @title Table with filtering */ @Component({ - selector: 'table-filtering-example', - styleUrls: ['table-filtering-example.css'], - templateUrl: 'table-filtering-example.html', + 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; +export class TableFilteringExample +{ + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; - @ViewChild('filter') filter: ElementRef; + @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; - }); - } + 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']; +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; +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; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + } - /** 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) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - 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))] - }; - } + /** 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))] + }; + } } /** @@ -90,29 +111,42 @@ export class ExampleDatabase { * 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); } +export class ExampleDataSource extends DataSource +{ + _filterChange = new BehaviorSubject(''); - constructor(private _exampleDatabase: ExampleDatabase) { - super(); - } + get filter(): string + { + return this._filterChange.value; + } - /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - const displayDataChanges = [ - this._exampleDatabase.dataChange, - this._filterChange, - ]; + set filter(filter: string) + { + this._filterChange.next(filter); + } - 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; - }); - }); - } + constructor(private _exampleDatabase: ExampleDatabase) + { + super(); + } - disconnect() {} + /** 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 index 185ff44b..4f7ac2f8 100644 --- a/src/assets/angular-material-examples/table-http/table-http-example.css +++ b/src/assets/angular-material-examples/table-http/table-http-example.css @@ -1,57 +1,57 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - max-height: 500px; - min-width: 300px; - position: relative; + 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; + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; } .example-table { - overflow: auto; - min-height: 300px; + overflow: auto; + min-height: 300px; } .mat-column-title { - text-overflow: ellipsis; - white-space: nowrap; - flex: 1; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1; + overflow: hidden; } /* Column Widths */ .mat-column-number, .mat-column-state { - max-width: 64px; + max-width: 64px; } .mat-column-created { - max-width: 124px; + 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; + 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; + 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 index b74b898a..c18f5ac5 100644 --- a/src/assets/angular-material-examples/table-http/table-http-example.html +++ b/src/assets/angular-material-examples/table-http/table-http-example.html @@ -1,51 +1,51 @@
-
- -
- GitHub's API rate limit has been reached. It will be reset in one minute. +
+ +
+ GitHub's API rate limit has been reached. It will be reset in one minute. +
-
- + - + - - - # - {{ row.number }} - + + + # + {{ row.number }} + - - - Title - {{ row.title }} - + + + Title + {{ row.title }} + - - - State - {{ row.state }} - + + + State + {{ row.state }} + - - - - Created - - {{ row.created_at | date }} - + + + + 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 index 7331462b..2ec83819 100644 --- a/src/assets/angular-material-examples/table-http/table-http-example.ts +++ b/src/assets/angular-material-examples/table-http/table-http-example.ts @@ -1,8 +1,8 @@ -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 { Component, OnInit, ViewChild } from '@angular/core'; +import { Http } from '@angular/http'; +import { DataSource } from '@angular/cdk/collections'; +import { MatPaginator, MatSort } from '@angular/material'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/merge'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/catch'; @@ -14,51 +14,61 @@ 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', + 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; +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; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; - constructor(private http: Http) {} + constructor(private http: Http) + { + } - ngOnInit() { - this.exampleDatabase = new ExampleHttpDao(this.http); - this.dataSource = new ExampleDataSource( - this.exampleDatabase!, this.paginator, this.sort); - } + 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 GithubApi +{ + items: GithubIssue[]; + total_count: number; } -export interface GithubIssue { - created_at: string; - number: string; - state: string; - title: string; +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) {} +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}`; + 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); - } + return this.http.get(requestUrl) + .map(response => response.json() as GithubApi); + } } /** @@ -68,54 +78,61 @@ export class ExampleHttpDao { * 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; +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(); - } + constructor( + private exampleDatabase: ExampleHttpDao, + private paginator: MatPaginator, + private sort: MatSort + ) + { + 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 - ]; + /** 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); + // 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 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([]); - }); - } + 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() {} + 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 index c5c27f6f..5ddeba4b 100644 --- a/src/assets/angular-material-examples/table-overview/table-overview-example.css +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.css @@ -1,53 +1,53 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + 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; + 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; + 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; + display: flex; + justify-content: center; + padding: 24px; + font-size: 12px; + font-style: italic; } /** Selection styles */ .example-selection-header { - font-size: 18px; + font-size: 18px; } .mat-column-select { - max-width: 54px; + max-width: 54px; } .mat-row:hover, .example-selected-row { - background: #f5f5f5; + background: #F5F5F5; } .mat-row:active, .mat-row.example-selected-row { - background: #eaeaea; + background: #EAEAEA; } .mat-table { - overflow: auto; - max-height: 500px; + 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 index 35a12176..161ae82b 100644 --- a/src/assets/angular-material-examples/table-overview/table-overview-example.html +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.html @@ -1,78 +1,78 @@
- - - + + +
- {{selection.selected.length}} - {{selection.selected.length == 1 ? 'user' : 'users'}} - selected + {{selection.selected.length}} + {{selection.selected.length == 1 ? 'user' : 'users'}} + selected
- + - + - - - - - - - - - - - + + + + + + + + + + + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - {{row.color}} - + + + Color + {{row.color}} + - - - - + + + + -
- No users found matching filter. -
+
+ 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 index f0f9fcd4..07e35531 100644 --- a/src/assets/angular-material-examples/table-overview/table-overview-example.ts +++ b/src/assets/angular-material-examples/table-overview/table-overview-example.ts @@ -1,9 +1,9 @@ -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 { Component, ElementRef, ViewChild } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { MatPaginator, MatSort } 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'; @@ -15,102 +15,142 @@ 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', + 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; +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; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; + @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; + 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; + }); } - } - masterToggle() { - if (!this.dataSource) { return; } + isAllSelected(): boolean + { + if ( !this.dataSource ) + { + return false; + } + if ( this.selection.isEmpty() ) + { + return false; + } - 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)); + 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']; +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; +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; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - setTimeout(() => { - for (let i = 0; i < 100; i++) { this.addUser(); } - }); - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + setTimeout(() => { + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + }); + } - /** 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) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - 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))] - }; - } + /** 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))] + }; + } } /** @@ -120,71 +160,99 @@ export class ExampleDatabase { * 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); } +export class ExampleDataSource extends DataSource +{ + _filterChange = new BehaviorSubject(''); - filteredData: UserData[] = []; - renderedData: UserData[] = []; + get filter(): string + { + return this._filterChange.value; + } - constructor(private _exampleDatabase: ExampleDatabase, - private _paginator: MdPaginator, - private _sort: MdSort) { - super(); + set filter(filter: string) + { + this._filterChange.next(filter); + } - // Reset to the first page when the user changes the filter. - this._filterChange.subscribe(() => this._paginator.pageIndex = 0); - } + filteredData: UserData[] = []; + renderedData: UserData[] = []; - /** 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, - ]; + constructor( + private _exampleDatabase: ExampleDatabase, + private _paginator: MatPaginator, + private _sort: MatSort + ) + { + super(); - 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; - }); + // Reset to the first page when the user changes the filter. + this._filterChange.subscribe(() => this._paginator.pageIndex = 0); + } - // Sort filtered data - const sortedData = this.sortData(this.filteredData.slice()); + /** 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 + ]; - // 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; - }); - } + 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; + }); - disconnect() {} + // Sort filtered data + const sortedData = this.sortData(this.filteredData.slice()); - /** Returns a sorted copy of the database data. */ - sortData(data: UserData[]): UserData[] { - if (!this._sort.active || this._sort.direction == '') { return data; } + // 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; + }); + } - return data.sort((a, b) => { - let propertyA: number|string = ''; - let propertyB: number|string = ''; + disconnect() + { + } - 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; - } + /** Returns a sorted copy of the database data. */ + sortData(data: UserData[]): UserData[] + { + if ( !this._sort.active || this._sort.direction == '' ) + { + return data; + } - let valueA = isNaN(+propertyA) ? propertyA : +propertyA; - let valueB = isNaN(+propertyB) ? propertyB : +propertyB; + return data.sort((a, b) => { + let propertyA: number | string = ''; + let propertyB: number | string = ''; - return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); - }); - } + 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 index 5b9032d1..c6d0ba17 100644 --- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.css +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.css @@ -1,19 +1,19 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + display: flex; + flex-direction: column; + min-width: 300px; } .example-header { - min-height: 64px; - display: flex; - align-items: center; - padding-left: 24px; - font-size: 20px; + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; } .mat-table { - overflow: auto; - max-height: 500px; + 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 index 6fa6eaad..399a2197 100644 --- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.html +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.html @@ -1,42 +1,42 @@
- + - + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - {{row.color}} - + + + 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 index 1434c8f6..ea56ac61 100644 --- a/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts +++ b/src/assets/angular-material-examples/table-pagination/table-pagination-example.ts @@ -1,8 +1,8 @@ -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 { Component, ViewChild } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { MatPaginator } 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'; @@ -11,67 +11,85 @@ import 'rxjs/add/operator/map'; * @title Table with pagination */ @Component({ - selector: 'table-pagination-example', - styleUrls: ['table-pagination-example.css'], - templateUrl: 'table-pagination-example.html', + 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; +export class TablePaginationExample +{ + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; - @ViewChild(MdPaginator) paginator: MdPaginator; + @ViewChild(MatPaginator) paginator: MatPaginator; - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator); - } + 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']; +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; +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; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + } - /** 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) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - 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))] - }; - } + /** 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))] + }; + } } /** @@ -81,26 +99,31 @@ export class ExampleDatabase { * 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(); - } +export class ExampleDataSource extends DataSource +{ + constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MatPaginator) + { + 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, - ]; + /** 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(); + 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); - }); - } + // Grab the page's slice of data. + const startIndex = this._paginator.pageIndex * this._paginator.pageSize; + return data.splice(startIndex, this._paginator.pageSize); + }); + } - disconnect() {} + 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 index 0ff9559b..7bde15b2 100644 --- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.css +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.css @@ -1,23 +1,23 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; + display: flex; + flex-direction: column; + min-width: 300px; } .example-header { - min-height: 64px; - display: flex; - align-items: center; - padding-left: 24px; - font-size: 20px; + min-height: 64px; + display: flex; + align-items: center; + padding-left: 24px; + font-size: 20px; } .mat-table { - overflow: auto; - max-height: 500px; + overflow: auto; + max-height: 500px; } .mat-header-cell .mat-sort-header-sorted { - color: black; + 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 index cde414b6..ff15e446 100644 --- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html @@ -1,34 +1,34 @@
- + - + - - - ID - {{row.id}} - + + + ID + {{row.id}} + - - - Progress - {{row.progress}}% - + + + Progress + {{row.progress}}% + - - - Name - {{row.name}} - + + + Name + {{row.name}} + - - - Color - {{row.color}} - + + + 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 index 36df1764..f9240cd0 100644 --- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts +++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.ts @@ -1,8 +1,8 @@ -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 { Component, ViewChild } from '@angular/core'; +import { DataSource } from '@angular/cdk/collections'; +import { MatSort } 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'; @@ -11,67 +11,85 @@ import 'rxjs/add/operator/map'; * @title Table with sorting */ @Component({ - selector: 'table-sorting-example', - styleUrls: ['table-sorting-example.css'], - templateUrl: 'table-sorting-example.html', + 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; +export class TableSortingExample +{ + displayedColumns = ['userId', 'userName', 'progress', 'color']; + exampleDatabase = new ExampleDatabase(); + dataSource: ExampleDataSource | null; - @ViewChild(MdSort) sort: MdSort; + @ViewChild(MatSort) sort: MatSort; - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort); - } + 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']; +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; +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; } +export class ExampleDatabase +{ + /** Stream that emits whenever the data has been modified. */ + dataChange: BehaviorSubject = new BehaviorSubject([]); - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } - } + get data(): UserData[] + { + return this.dataChange.value; + } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } + constructor() + { + // Fill up the database with 100 users. + for ( let i = 0; i < 100; i++ ) + { + this.addUser(); + } + } - /** 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) + '.'; + /** Adds a new user to the database. */ + addUser() + { + const copiedData = this.data.slice(); + copiedData.push(this.createNewUser()); + this.dataChange.next(copiedData); + } - 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))] - }; - } + /** 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))] + }; + } } /** @@ -81,45 +99,63 @@ export class ExampleDatabase { * 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(); - } +export class ExampleDataSource extends DataSource +{ + constructor(private _exampleDatabase: ExampleDatabase, private _sort: MatSort) + { + 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, - ]; + /** 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(); - }); - } + return Observable.merge(...displayDataChanges).map(() => { + return this.getSortedData(); + }); + } - disconnect() {} + 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; } + /** 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 = ''; + 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; - } + 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; + let valueA = isNaN(+propertyA) ? propertyA : +propertyA; + let valueB = isNaN(+propertyB) ? propertyB : +propertyB; - return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); - }); - } + return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1); + }); + } } 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 index 173ece5d..5032edc5 100644 --- a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html +++ b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html @@ -1,4 +1,4 @@ - - Content 1 - Content 2 - + + 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 index 96f70260..a358e582 100644 --- a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts +++ b/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic tabs */ @Component({ - selector: 'tabs-overview-example', - templateUrl: 'tabs-overview-example.html', + selector : 'tabs-overview-example', + templateUrl: 'tabs-overview-example.html' }) -export class TabsOverviewExample {} +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 index 71d3d8b2..a065ac15 100644 --- 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 @@ -1,7 +1,7 @@ .demo-tab-group { - border: 1px solid #e8e8e8; + border: 1px solid #E8E8E8; } .demo-tab-content { - padding: 16px; + 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 index 75b5b19d..21336a0a 100644 --- 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 @@ -1,48 +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 + + +
+ 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 index 0f103327..ffde7ba1 100644 --- 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 @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +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'] + selector : 'tabs-template-label-example', + templateUrl: 'tabs-template-label-example.html', + styleUrls : ['./tabs-template-label-example.css'] }) -export class TabsTemplateLabelExample {} +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 index d7c40156..aa90a4d3 100644 --- a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.css @@ -1,7 +1,7 @@ .example-icon { - padding: 0 14px; + padding: 0 14px; } .example-spacer { - flex: 1 1 auto; + 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 index 9b178a21..5ee4b8b7 100644 --- a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html @@ -1,16 +1,16 @@ - - Custom Toolbar + + Custom Toolbar - - Second Line - - verified_user - + + Second Line + + verified_user + - - Third Line - - favorite - delete - - + + 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 index 3ad53173..02b4fce9 100644 --- a/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts +++ b/src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.ts @@ -1,11 +1,13 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Multi-row toolbar */ @Component({ - selector: 'toolbar-multirow-example', - templateUrl: 'toolbar-multirow-example.html', - styleUrls: ['toolbar-multirow-example.css'], + selector : 'toolbar-multirow-example', + templateUrl: 'toolbar-multirow-example.html', + styleUrls : ['toolbar-multirow-example.css'] }) -export class ToolbarMultirowExample {} +export class ToolbarMultirowExample +{ +} 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 index bf8cc399..05520fda 100644 --- a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html +++ b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.html @@ -1 +1 @@ -My App +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 index 5d543043..63306cbf 100644 --- a/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts +++ b/src/assets/angular-material-examples/toolbar-overview/toolbar-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic toolbar */ @Component({ - selector: 'toolbar-overview-example', - templateUrl: 'toolbar-overview-example.html', + selector : 'toolbar-overview-example', + templateUrl: 'toolbar-overview-example.html' }) -export class ToolbarOverviewExample {} +export class ToolbarOverviewExample +{ +} 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 index 8319a854..3a2a2749 100644 --- a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html +++ b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.html @@ -1 +1 @@ -I have a tooltip +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 index ffb53c02..124e1e36 100644 --- a/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts +++ b/src/assets/angular-material-examples/tooltip-overview/tooltip-overview-example.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import { Component } from '@angular/core'; /** * @title Basic tooltip */ @Component({ - selector: 'tooltip-overview-example', - templateUrl: 'tooltip-overview-example.html', + selector : 'tooltip-overview-example', + templateUrl: 'tooltip-overview-example.html' }) -export class TooltipOverviewExample {} +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 index 04ec59dd..92e82b31 100644 --- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css @@ -1,9 +1,9 @@ .example-tooltip-host { - display: inline-flex; - align-items: center; - margin: 50px; + display: inline-flex; + align-items: center; + margin: 50px; } .example-select { - margin: 0 10px; + 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 index 156a5bf6..803223af 100644 --- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html @@ -1,11 +1,11 @@ -
- Show tooltip - - Before - After - Above - Below - Left - Right - +
+ 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 index 12741b77..a859e2a0 100644 --- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts +++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts @@ -1,13 +1,14 @@ -import {Component} from '@angular/core'; +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'], + selector : 'tooltip-position-example', + templateUrl: 'tooltip-position-example.html', + styleUrls : ['tooltip-position-example.css'] }) -export class TooltipPositionExample { - position = 'before'; +export class TooltipPositionExample +{ + position = 'before'; } diff --git a/src/environments/environment.hmr.ts b/src/environments/environment.hmr.ts index e1c43c7f..b129af6b 100644 --- a/src/environments/environment.hmr.ts +++ b/src/environments/environment.hmr.ts @@ -1,4 +1,4 @@ export const environment = { production: false, - hmr: true + hmr : true }; diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3420b328..bcbc8810 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,4 +1,4 @@ export const environment = { production: true, - hmr: false + hmr : false }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 8bd4860c..cd8ca06f 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -5,5 +5,5 @@ export const environment = { production: false, - hmr: false + hmr : false };