From 1acfe2dfb39a409c163a7e3cc1f7ae80a1f506a3 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 17 Jun 2018 14:44:11 +0300 Subject: [PATCH 01/10] Update the version on changelog navigation item --- src/app/navigation/navigation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index ef1c8c09..1560ca0a 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -849,7 +849,7 @@ export const navigation: FuseNavigation[] = [ icon : 'update', url : '/documentation/changelog', badge: { - title: '6.1.0', + title: '6.1.1', bg : '#EC0C8E', fg : '#FFFFFF' } From 3abd7647150c73686029673076e577611f6dbf1f Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 18 Jun 2018 18:42:35 +0300 Subject: [PATCH 02/10] Updated the changelog --- src/app/main/documentation/changelog/changelog.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html index 65b68d44..1ba9d6a6 100644 --- a/src/app/main/documentation/changelog/changelog.component.html +++ b/src/app/main/documentation/changelog/changelog.component.html @@ -62,6 +62,7 @@ From b46b253c1ce2fba31b962741e900280f33f11fe3 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 18 Jun 2018 18:53:21 +0300 Subject: [PATCH 03/10] Small responsive fixes on e-commerce pages --- .../e-commerce/orders/orders.component.scss | 26 +++++++++------ .../products/products.component.scss | 32 +++++++++++-------- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/app/main/apps/e-commerce/orders/orders.component.scss b/src/app/main/apps/e-commerce/orders/orders.component.scss index daf48171..d0f17870 100644 --- a/src/app/main/apps/e-commerce/orders/orders.component.scss +++ b/src/app/main/apps/e-commerce/orders/orders.component.scss @@ -2,23 +2,29 @@ :host { - .header { + #orders { - .search-input-wrapper { - max-width: 480px; - } + > .center { - @include media-breakpoint-down(xs) { - margin: 24px 0; - height: 128px !important; - min-height: 128px !important; - max-height: 128px !important; + > .header { + + .search-input-wrapper { + max-width: 480px; + } + + @include media-breakpoint-down(xs) { + margin: 24px 0; + height: 128px !important; + min-height: 128px !important; + max-height: 128px !important; + } + } } } .mat-tab-group, .mat-tab-body-wrapper, - .tab-content{ + .tab-content { flex: 1 1 auto; max-width: 100%; } diff --git a/src/app/main/apps/e-commerce/products/products.component.scss b/src/app/main/apps/e-commerce/products/products.component.scss index 8982410f..2316405d 100644 --- a/src/app/main/apps/e-commerce/products/products.component.scss +++ b/src/app/main/apps/e-commerce/products/products.component.scss @@ -2,23 +2,29 @@ :host { - .header { + #products { - .search-input-wrapper { - max-width: 480px; + .top-bg { + @include media-breakpoint-down(xs) { + height: 240px; + } } - @include media-breakpoint-down(xs) { - margin: 8px 0; - height: 192px !important; - min-height: 192px !important; - max-height: 192px !important; - } - } + > .center { - .top-bg { - @include media-breakpoint-down(xs) { - height: 240px; + > .header { + + .search-input-wrapper { + max-width: 480px; + } + + @include media-breakpoint-down(xs) { + margin: 8px 0; + height: 192px !important; + min-height: 192px !important; + max-height: 192px !important; + } + } } } From faef6ec6f831b4f485d561ed19bdfe66b5c0391c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 20 Jun 2018 15:30:54 +0300 Subject: [PATCH 04/10] Increased the Fuse version number Updated Angular Material and couple other packages --- package-lock.json | 44 ++++++++++++++++++++++---------------------- package.json | 14 +++++++------- 2 files changed, 29 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 230fe206..00a3264b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "fuse", - "version": "6.1.1", + "version": "6.1.2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -129,9 +129,9 @@ } }, "@angular/cdk": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.2.1.tgz", - "integrity": "sha512-uwW4eIGJKqOkR+ew6YcEAh1J4SP98jdyDpsZ4IEMkV9+jXcKfcwcxGFpZvs9wJsAvAr8EgNmZ8h+iuZLwJsvmA==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.0.tgz", + "integrity": "sha512-L1NM2hU8xvb35mDKIw+SR9UZGZtbSQl6fmd9X/tedaNYjIvyQ7SIX7iDJ+LqD0xUQopB+SeuhDL7D6IwGMV2bQ==", "requires": { "tslib": "^1.7.1" } @@ -373,17 +373,17 @@ "dev": true }, "@angular/material": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.2.1.tgz", - "integrity": "sha512-SBoUXxHknkgwzp5pNDHW0jyrTM0d0Tk4lVyDbtEX8VEPtXqG5nL3BSgyjpJbTvqlmy2kOooUu3qgAmt87VH9lw==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.0.tgz", + "integrity": "sha512-asSzdfLkDDbQEyM/GKUxrlvuj8OvO5DqrNJ3e3uvi0OmZDpaO50yubQvrJ26nbqgwgRo+qwiGNN6XcFwYTRVPQ==", "requires": { "tslib": "^1.7.1" } }, "@angular/material-moment-adapter": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.2.1.tgz", - "integrity": "sha512-mZA/gUDI/B6lnKBx0Qov3920MdNhOvVk0oQq/wrxgt2I25AVbpKZO2d8PSCBATQzWjqUwN3GKtcQFx0bPtvNCQ==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.3.0.tgz", + "integrity": "sha512-klnwQFKZzjQhtp6chu07KyDtUnnv+ZmPBUB+i8CtmO5yUUPAPUUkljj99V0R19fVakzyAfjFmUxpaKnA6F9p0w==", "requires": { "tslib": "^1.7.1" } @@ -537,9 +537,9 @@ } }, "@types/lodash": { - "version": "4.14.109", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz", - "integrity": "sha512-hop8SdPUEzbcJm6aTsmuwjIYQo1tqLseKCM+s2bBqTU2gErwI4fE+aqUVOlscPSQbKHKgtMMPoC+h4AIGOJYvw==", + "version": "4.14.110", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.110.tgz", + "integrity": "sha512-iXYLa6olt4tnsCA+ZXeP6eEW3tk1SulWeYyP/yooWfAtXjozqXgtX4+XUtMuOCfYjKGz3F34++qUc3Q+TJuIIw==", "dev": true }, "@types/node": { @@ -2568,9 +2568,9 @@ } }, "d3": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/d3/-/d3-5.4.0.tgz", - "integrity": "sha1-CQGZqFadHeI9BKP/B/4TYJX+p04=", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/d3/-/d3-5.5.0.tgz", + "integrity": "sha512-HRDSYvT3n7kMvJH7Avp7iR0Xsz97bkCFka9aOg04EdyXyiAP8yQzUpLH3712y9R7ffVo1g94t1OYFHBB0yI9vQ==", "requires": { "d3-array": "1", "d3-axis": "1", @@ -2606,9 +2606,9 @@ }, "dependencies": { "d3-scale": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.0.0.tgz", - "integrity": "sha512-Sa2Ny6CoJT7x6dozxPnvUQT61epGWsgppFvnNl8eJEzfJBG0iDBBTJAtz2JKem7Mb+NevnaZiDiIDHsuWkv6vg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.1.0.tgz", + "integrity": "sha512-Bb2N3ZgzPdKVEoWGkt8lPV6R7YdpSBWI70Xf26NQHOVjs77a6gLUmBOOPt9d9nB8JiQhwXY1RHCa+eSyWCJZIQ==", "requires": { "d3-array": "^1.2.0", "d3-collection": "1", @@ -12561,9 +12561,9 @@ } }, "prismjs": { - "version": "1.14.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz", - "integrity": "sha512-sa2s4m60bXs+kU3jcuUwx3ZCrUH7o0kuqnOOINbODqlRrDB7KY8SRx+xR/D7nHLlgfDdG7zXbRO8wJ+su5Ls0A==", + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz", + "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==", "requires": { "clipboard": "^2.0.0" } diff --git a/package.json b/package.json index 380e0ad2..810ce816 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fuse", - "version": "6.1.1", + "version": "6.1.2", "license": "https://themeforest.net/licenses/terms/regular", "scripts": { "ng": "ng", @@ -20,15 +20,15 @@ "dependencies": { "@agm/core": "1.0.0-beta.3", "@angular/animations": "6.0.5", - "@angular/cdk": "6.2.1", + "@angular/cdk": "6.3.0", "@angular/common": "6.0.5", "@angular/compiler": "6.0.5", "@angular/core": "6.0.5", "@angular/flex-layout": "6.0.0-beta.16", "@angular/forms": "6.0.5", "@angular/http": "6.0.5", - "@angular/material": "6.2.1", - "@angular/material-moment-adapter": "6.2.1", + "@angular/material": "6.3.0", + "@angular/material-moment-adapter": "6.3.0", "@angular/platform-browser": "6.0.5", "@angular/platform-browser-dynamic": "6.0.5", "@angular/router": "6.0.5", @@ -46,7 +46,7 @@ "chart.js": "2.7.2", "classlist.js": "1.1.20150312", "core-js": "2.5.7", - "d3": "5.4.0", + "d3": "5.5.0", "hammerjs": "2.0.8", "lodash": "4.17.10", "moment": "2.22.2", @@ -55,7 +55,7 @@ "ngx-color-picker": "6.3.3", "ngx-cookie-service": "1.0.10", "perfect-scrollbar": "1.4.0", - "prismjs": "1.14.0", + "prismjs": "1.15.0", "rxjs": "6.2.1", "rxjs-compat": "6.2.1", "web-animations-js": "2.3.1", @@ -69,7 +69,7 @@ "@angularclass/hmr": "2.1.3", "@types/jasmine": "2.8.8", "@types/jasminewd2": "2.0.3", - "@types/lodash": "4.14.109", + "@types/lodash": "4.14.110", "@types/node": "8.9.5", "codelyzer": "4.2.1", "jasmine-core": "2.99.1", From 13746c2a7380f6372cbbdfef45ec6d7ca23b6fae Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 20 Jun 2018 16:16:02 +0300 Subject: [PATCH 05/10] Updated Angular Material examples --- .../example-components.ts | 204 ++++++++++++++++-- ...mplete-auto-active-first-option-example.ts | 4 +- .../autocomplete-display-example.ts | 4 +- .../autocomplete-filter-example.ts | 4 +- .../cdk-table-basic-flex-example.css | 10 + .../cdk-table-basic-flex-example.html | 28 +++ .../cdk-table-basic-flex-example.ts | 55 +++++ .../cdk-table-basic-example.css | 40 +--- .../cdk-table-basic-example.html | 50 ++--- .../cdk-table-basic-example.ts | 79 ++----- .../cdk-tree-flat/cdk-tree-flat-example.ts | 10 +- .../cdk-tree-nested-example.ts | 6 +- .../chips-autocomplete-example.html | 2 +- .../chips-autocomplete-example.ts | 16 +- .../datepicker-formats-example.ts | 5 +- .../datepicker-moment-example.ts | 5 +- .../datepicker-views-selection-example.ts | 6 +- .../icon-svg/icon-svg-example.ts | 2 +- .../sidenav-responsive-example.ts | 4 +- .../stepper-editable-example.ts | 4 +- .../stepper-optional-example.ts | 4 +- .../stepper-overview-example.ts | 4 +- .../stepper-vertical-example.css} | 0 .../stepper-vertical-example.html | 36 ++++ .../stepper-vertical-example.ts | 27 +++ .../tab-group-async-example.css | 1 + .../tab-group-async-example.html | 10 + .../tab-group-async-example.ts | 31 +++ .../tab-group-basic-example.css | 1 + .../tab-group-basic-example.html | 5 + .../tab-group-basic-example.ts | 11 + .../tab-group-custom-label-example.css | 3 + .../tab-group-custom-label-example.html | 26 +++ .../tab-group-custom-label-example.ts | 11 + .../tab-group-dynamic-height-example.css | 18 ++ .../tab-group-dynamic-height-example.html | 12 ++ .../tab-group-dynamic-height-example.ts | 11 + .../tab-group-dynamic-example.css | 5 + .../tab-group-dynamic-example.html | 29 +++ .../tab-group-dynamic-example.ts | 27 +++ .../tab-group-header-below-example.css | 1 + .../tab-group-header-below-example.html | 5 + .../tab-group-header-below-example.ts | 11 + .../tab-group-lazy-loaded-example.css | 1 + .../tab-group-lazy-loaded-example.html | 17 ++ .../tab-group-lazy-loaded-example.ts | 21 ++ .../tab-group-stretched-example.css | 3 + .../tab-group-stretched-example.html | 5 + .../tab-group-stretched-example.ts | 11 + .../tab-group-theme-example.css | 4 + .../tab-group-theme-example.html | 25 +++ .../tab-group-theme-example.ts | 11 + .../tab-nav-bar-basic-example.css | 3 + .../tab-nav-bar-basic-example.html | 12 ++ .../tab-nav-bar-basic-example.ts | 19 ++ .../table-basic-flex-example.css | 3 + .../table-basic-flex-example.html | 28 +++ .../table-basic-flex-example.ts | 34 +++ .../table-basic/table-basic-example.css | 8 +- .../table-basic/table-basic-example.html | 5 +- .../table-basic/table-basic-example.ts | 16 +- .../table-dynamic-columns-example.css | 7 + .../table-dynamic-columns-example.html | 13 ++ .../table-dynamic-columns-example.ts | 59 +++++ .../table-expandable-rows-example.css | 47 ++++ .../table-expandable-rows-example.html | 35 +++ .../table-expandable-rows-example.ts | 113 ++++++++++ .../table-filtering-example.css | 13 +- .../table-filtering-example.html | 6 +- .../table-filtering-example.ts | 14 +- .../table-footer-row-example.css | 12 +- .../table-footer-row-example.html | 25 +-- .../table-http/table-http-example.css | 17 +- .../table-http/table-http-example.html | 16 +- .../table-http/table-http-example.ts | 12 +- .../table-multiple-header-footer-example.css | 19 ++ .../table-multiple-header-footer-example.html | 45 ++++ .../table-multiple-header-footer-example.ts | 32 +++ .../table-native-only-example.css | 0 .../table-native-only-example.html | 18 -- .../table-native-only-example.ts | 19 -- .../table-overview/table-overview-example.css | 16 +- .../table-overview-example.html | 5 +- .../table-overview/table-overview-example.ts | 7 +- .../table-pagination-example.css | 9 +- .../table-pagination-example.html | 10 +- .../table-pagination-example.ts | 10 +- .../table-row-context-example.css | 3 + .../table-row-context-example.html | 46 ++++ .../table-row-context-example.ts | 14 ++ .../table-selection-example.css | 12 +- .../table-selection-example.html | 4 +- .../table-selection-example.ts | 18 +- .../table-sorting/table-sorting-example.css | 10 +- .../table-sorting/table-sorting-example.html | 4 +- .../table-sorting/table-sorting-example.ts | 20 +- .../table-sticky-columns-example.css | 26 +++ .../table-sticky-columns-example.html | 39 ++++ .../table-sticky-columns-example.ts | 35 +++ .../table-sticky-complex-flex-example.css | 28 +++ .../table-sticky-complex-flex-example.html | 78 +++++++ .../table-sticky-complex-flex-example.ts | 53 +++++ .../table-sticky-complex-example.css | 24 +++ .../table-sticky-complex-example.html | 78 +++++++ .../table-sticky-complex-example.ts | 53 +++++ .../table-sticky-footer-example.css | 16 ++ .../table-sticky-footer-example.html | 21 ++ .../table-sticky-footer-example.ts | 31 +++ .../table-sticky-header-example.css | 8 + .../table-sticky-header-example.html | 31 +++ .../table-sticky-header-example.ts | 34 +++ .../tabs-overview/tabs-overview-example.html | 4 - .../tabs-overview/tabs-overview-example.ts | 11 - .../tabs-template-label-example.css | 7 - .../tabs-template-label-example.html | 119 ---------- .../tabs-template-label-example.ts | 11 - .../tooltip-auto-hide-example.css | 11 + .../tooltip-auto-hide-example.html | 18 ++ .../tooltip-auto-hide-example.ts | 16 ++ .../tooltip-custom-class-example.css | 7 + .../tooltip-custom-class-example.html | 7 + .../tooltip-custom-class-example.ts | 14 ++ .../tooltip-delay/tooltip-delay-example.css | 5 +- .../tooltip-delay/tooltip-delay-example.html | 24 ++- .../tooltip-delay/tooltip-delay-example.ts | 6 +- .../tooltip-disabled-example.css | 3 + .../tooltip-disabled-example.html | 10 + .../tooltip-disabled-example.ts | 14 ++ .../tooltip-manual/tooltip-manual-example.css | 4 +- .../tooltip-manual-example.html | 31 ++- .../tooltip-message-example.css | 3 + .../tooltip-message-example.html | 9 + .../tooltip-message-example.ts | 14 ++ .../tooltip-modified-defaults-example.html | 4 +- .../tooltip-overview-example.html | 6 +- .../tooltip-position-example.css | 10 +- .../tooltip-position-example.html | 23 +- .../tooltip-position-example.ts | 7 +- 138 files changed, 2124 insertions(+), 592 deletions(-) create mode 100755 src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css create mode 100755 src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html create mode 100755 src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts rename src/assets/angular-material-examples/{tabs-overview/tabs-overview-example.css => stepper-vertical/stepper-vertical-example.css} (100%) create mode 100755 src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html create mode 100755 src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css create mode 100755 src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html create mode 100755 src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css create mode 100755 src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html create mode 100755 src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css create mode 100755 src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html create mode 100755 src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css create mode 100755 src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html create mode 100755 src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css create mode 100755 src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html create mode 100755 src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css create mode 100755 src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html create mode 100755 src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css create mode 100755 src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html create mode 100755 src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css create mode 100755 src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html create mode 100755 src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts create mode 100755 src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css create mode 100755 src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html create mode 100755 src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts create mode 100755 src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css create mode 100755 src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html create mode 100755 src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts create mode 100755 src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css create mode 100755 src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html create mode 100755 src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts create mode 100755 src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css create mode 100755 src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html create mode 100755 src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts create mode 100755 src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css create mode 100755 src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html create mode 100755 src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts create mode 100755 src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css create mode 100755 src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html create mode 100755 src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts delete mode 100755 src/assets/angular-material-examples/table-native-only/table-native-only-example.css delete mode 100755 src/assets/angular-material-examples/table-native-only/table-native-only-example.html delete mode 100755 src/assets/angular-material-examples/table-native-only/table-native-only-example.ts create mode 100755 src/assets/angular-material-examples/table-row-context/table-row-context-example.css create mode 100755 src/assets/angular-material-examples/table-row-context/table-row-context-example.html create mode 100755 src/assets/angular-material-examples/table-row-context/table-row-context-example.ts create mode 100755 src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css create mode 100755 src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html create mode 100755 src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts create mode 100755 src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css create mode 100755 src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.html create mode 100755 src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts create mode 100755 src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.css create mode 100755 src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.html create mode 100755 src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts create mode 100755 src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.css create mode 100755 src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html create mode 100755 src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.ts create mode 100755 src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.css create mode 100755 src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.html create mode 100755 src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.ts delete mode 100755 src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html delete mode 100755 src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts delete mode 100755 src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css delete mode 100755 src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html delete mode 100755 src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts create mode 100755 src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css create mode 100755 src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html create mode 100755 src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts create mode 100755 src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.css create mode 100755 src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.html create mode 100755 src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts create mode 100755 src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.css create mode 100755 src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.html create mode 100755 src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.ts create mode 100755 src/assets/angular-material-examples/tooltip-message/tooltip-message-example.css create mode 100755 src/assets/angular-material-examples/tooltip-message/tooltip-message-example.html create mode 100755 src/assets/angular-material-examples/tooltip-message/tooltip-message-example.ts diff --git a/src/app/main/angular-material-elements/example-components.ts b/src/app/main/angular-material-elements/example-components.ts index 9bed821b..a8fdb614 100644 --- a/src/app/main/angular-material-elements/example-components.ts +++ b/src/app/main/angular-material-elements/example-components.ts @@ -95,8 +95,6 @@ import { TableHttpExample } from 'assets/angular-material-examples/table-http/ta import { TableOverviewExample } from 'assets/angular-material-examples/table-overview/table-overview-example'; import { TablePaginationExample } from 'assets/angular-material-examples/table-pagination/table-pagination-example'; import { TableSortingExample } from 'assets/angular-material-examples/table-sorting/table-sorting-example'; -import { TabsOverviewExample } from 'assets/angular-material-examples/tabs-overview/tabs-overview-example'; -import { TabsTemplateLabelExample } from 'assets/angular-material-examples/tabs-template-label/tabs-template-label-example'; import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example'; import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example'; import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example'; @@ -137,7 +135,6 @@ import { SliderFormattingExample } from 'assets/angular-material-examples/slider import { StepperEditableExample } from 'assets/angular-material-examples/stepper-editable/stepper-editable-example'; import { StepperOptionalExample } from 'assets/angular-material-examples/stepper-optional/stepper-optional-example'; import { TableFooterRowExample } from 'assets/angular-material-examples/table-footer-row/table-footer-row-example'; -import { TableNativeOnlyExample } from 'assets/angular-material-examples/table-native-only/table-native-only-example'; import { TextFieldAutofillDirectiveExample } from 'assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example'; import { TextFieldAutofillMonitorExample } from 'assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example'; import { TextFieldAutosizeTextareaExample } from 'assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example'; @@ -146,6 +143,32 @@ import { TreeDynamicExample } from 'assets/angular-material-examples/tree-dynami import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example'; import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example'; import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example'; +import { CdkTableBasicFlexExample } from 'assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example'; +import { StepperVerticalExample } from 'assets/angular-material-examples/stepper-vertical/stepper-vertical-example'; +import { TabGroupBasicExample } from 'assets/angular-material-examples/tab-group-basic/tab-group-basic-example'; +import { TabGroupAsyncExample } from 'assets/angular-material-examples/tab-group-async/tab-group-async-example'; +import { TabGroupCustomLabelExample } from 'assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example'; +import { TabGroupDynamicExample } from 'assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example'; +import { TabGroupDynamicHeightExample } from 'assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example'; +import { TabGroupHeaderBelowExample } from 'assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example'; +import { TabGroupLazyLoadedExample } from 'assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example'; +import { TabGroupStretchedExample } from 'assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example'; +import { TabGroupThemeExample } from 'assets/angular-material-examples/tab-group-theme/tab-group-theme-example'; +import { TabNavBarBasicExample } from 'assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example'; +import { TooltipAutoHideExample } from 'assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example'; +import { TooltipCustomClassExample } from 'assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example'; +import { TooltipDisabledExample } from 'assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example'; +import { TooltipMessageExample } from 'assets/angular-material-examples/tooltip-message/tooltip-message-example'; +import { TableBasicFlexExample } from 'assets/angular-material-examples/table-basic-flex/table-basic-flex-example'; +import { TableDynamicColumnsExample } from 'assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example'; +import { TableExpandableRowsExample } from 'assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example'; +import { TableMultipleHeaderFooterExample } from 'assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example'; +import { TableRowContextExample } from 'assets/angular-material-examples/table-row-context/table-row-context-example'; +import { TableStickyColumnsExample } from 'assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example'; +import { TableStickyComplexExample } from 'assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example'; +import { TableStickyComplexFlexExample } from 'assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example'; +import { TableStickyFooterExample } from 'assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example'; +import { TableStickyHeaderExample } from 'assets/angular-material-examples/table-sticky-header/table-sticky-header-example'; export const COMPONENT_MAP = { 'autocomplete' : [ @@ -176,6 +199,7 @@ export const COMPONENT_MAP = { ], // 'cdk-table' : [ // 'cdk-table-basic', + // 'cdk-table-basic-flex', // 'cdk-table-flat' // ], // 'cdk-tree' : [ @@ -333,22 +357,40 @@ export const COMPONENT_MAP = { 'stepper' : [ 'stepper-overview', 'stepper-editable', - 'stepper-optional' + 'stepper-optional', + 'stepper-vertical' ], 'table' : [ 'table-overview', 'table-basic', + 'table-basic-flex', + 'table-dynamic-columns', + 'table-expandable-rows', 'table-filtering', 'table-footer-row', 'table-http', - 'table-native-only', + 'table-multiple-header-footer', 'table-pagination', + 'table-row-context', 'table-selection', - 'table-sorting' + 'table-sorting', + 'table-sticky-columns', + 'table-sticky-complex', + 'table-sticky-complex-flex', + 'table-sticky-header', + 'table-sticky-footer', ], 'tabs' : [ - 'tabs-overview', - 'tabs-template-label' + 'tab-group-basic', + 'tab-group-async', + 'tab-group-custom-label', + 'tab-group-dynamic', + 'tab-group-dynamic-height', + 'tab-group-header-below', + 'tab-group-lazy-loaded', + 'tab-group-stretched', + 'tab-group-theme', + 'tab-nav-bar-basic' ], 'text-field' : [ 'text-field-autofill-directive', @@ -361,8 +403,12 @@ export const COMPONENT_MAP = { ], 'tooltip' : [ 'tooltip-overview', + 'tooltip-auto-hide', + 'tooltip-custom-class', 'tooltip-delay', + 'tooltip-disabled', 'tooltip-manual', + 'tooltip-message', 'tooltip-modified-defaults', 'tooltip-position' ], @@ -438,6 +484,10 @@ export const EXAMPLE_COMPONENTS = { title : 'Basic CDK data-table', component: CdkTableBasicExample }, + 'cdk-table-basic-flex' : { + title : 'Basic use of `` (uses display flex)', + component: CdkTableBasicFlexExample + }, 'cdk-tree-flat' : { title : 'Tree with flat nodes', component: CdkTreeFlatExample @@ -879,10 +929,26 @@ export const EXAMPLE_COMPONENTS = { title : 'Stepper overview', component: StepperOverviewExample }, + 'stepper-vertical' : { + title : 'Stepper vertical', + component: StepperVerticalExample + }, 'table-basic' : { title : 'Basic table', component: TableBasicExample }, + 'table-basic-flex' : { + title : 'Basic use of `` (uses display flex)', + component: TableBasicFlexExample + }, + 'table-dynamic-columns' : { + title : 'Table dynamically changing the columns displayed', + component: TableDynamicColumnsExample + }, + 'table-expandable-rows' : { + title : 'Table with expandable rows', + component: TableExpandableRowsExample + }, 'table-filtering' : { title : 'Table with filtering', component: TableFilteringExample @@ -895,9 +961,9 @@ export const EXAMPLE_COMPONENTS = { title : 'Table retrieving data through HTTP', component: TableHttpExample }, - 'table-native-only' : { - title : 'Native `` that only applies the Material styles', - component: TableNativeOnlyExample + 'table-multiple-header-footer' : { + title : 'Table with multiple header and footer rows', + component: TableMultipleHeaderFooterExample }, 'table-overview' : { title : 'Data table with sorting, pagination, and filtering.', @@ -907,6 +973,10 @@ export const EXAMPLE_COMPONENTS = { title : 'Table with pagination', component: TablePaginationExample }, + 'table-row-context' : { + title : 'Table showing each row context properties', + component: TableRowContextExample + }, 'table-selection' : { title : 'Table with selection', component: TableSelectionExample @@ -915,13 +985,65 @@ export const EXAMPLE_COMPONENTS = { title : 'Table with sorting', component: TableSortingExample }, - 'tabs-overview' : { - title : 'Basic tabs', - component: TabsOverviewExample + 'table-sticky-columns' : { + title : 'Table with a sticky columns', + component: TableStickyColumnsExample }, - 'tabs-template-label' : { - title : 'Complex Example', - component: TabsTemplateLabelExample + 'table-sticky-complex' : { + title : 'Tables with toggle-able sticky headers, footers, and columns', + component: TableStickyComplexExample + }, + 'table-sticky-complex-flex' : { + title : 'Flex-layout tables with toggle-able sticky headers, footers, and columns', + component: TableStickyComplexFlexExample + }, + 'table-sticky-footer' : { + title : 'Table with a sticky footer', + component: TableStickyFooterExample + }, + 'table-sticky-header' : { + title : 'Table with sticky header', + component: TableStickyHeaderExample + }, + 'tab-group-basic' : { + title : 'Basic use of the tab group', + component: TabGroupBasicExample + }, + 'tab-group-async' : { + title : 'Tab group with asynchronously loading tab contents', + component: TabGroupAsyncExample + }, + 'tab-group-custom-label' : { + title : 'Using tabs with a custom label template', + component: TabGroupCustomLabelExample + }, + 'tab-group-dynamic' : { + title : 'Tab group with dynamically changing tabs', + component: TabGroupDynamicExample + }, + 'tab-group-dynamic-height' : { + title : 'Tab group with dynamic height based on tab contents', + component: TabGroupDynamicHeightExample + }, + 'tab-group-header-below' : { + title : 'Tab group with the headers on the bottom', + component: TabGroupHeaderBelowExample + }, + 'tab-group-lazy-loaded' : { + title : 'Tab group where the tab content is loaded lazily (when activated)', + component: TabGroupLazyLoadedExample + }, + 'tab-group-stretched' : { + title : 'Tab group with stretched labels', + component: TabGroupStretchedExample + }, + 'tab-group-theme' : { + title : 'Customizing the theme options on the tab group', + component: TabGroupThemeExample + }, + 'tab-nav-bar-basic' : { + title : 'Basic use of the tab nav bar', + component: TabNavBarBasicExample }, 'text-field-autofill-directive' : { title : 'Monitoring autofill state with cdkAutofill', @@ -943,14 +1065,30 @@ export const EXAMPLE_COMPONENTS = { title : 'Basic toolbar', component: ToolbarOverviewExample }, + 'tooltip-auto-hide' : { + title : 'Tooltip that demonstrates auto-hiding when it clips out of its scrolling container', + component: TooltipAutoHideExample + }, + 'tooltip-custom-class' : { + title : 'Tooltip that can have a custom class applied', + component: TooltipCustomClassExample + }, 'tooltip-delay' : { title : 'Tooltip with a show and hide delay', component: TooltipDelayExample }, + 'tooltip-disabled' : { + title : 'Tooltip that can be disabled', + component: TooltipDisabledExample + }, 'tooltip-manual' : { - title : 'Tooltip that can be manually shown/hidden.', + title : 'Tooltip that can be manually shown/hidden', component: TooltipManualExample }, + 'tooltip-message' : { + title : 'Tooltip with a changing message', + component: TooltipMessageExample + }, 'tooltip-modified-defaults' : { title : 'Tooltip with a show and hide delay', component: TooltipModifiedDefaultsExample @@ -1001,6 +1139,7 @@ export const EXAMPLE_LIST = [ CardFancyExample, CardOverviewExample, CdkTableBasicExample, + CdkTableBasicFlexExample, CdkTreeFlatExample, CdkTreeNestedExample, CheckboxConfigurableExample, @@ -1108,24 +1247,47 @@ export const EXAMPLE_LIST = [ StepperEditableExample, StepperOptionalExample, StepperOverviewExample, + StepperVerticalExample, TableBasicExample, + TableBasicFlexExample, + TableDynamicColumnsExample, + TableExpandableRowsExample, TableFilteringExample, TableFooterRowExample, TableHttpExample, - TableNativeOnlyExample, + TableMultipleHeaderFooterExample, TableOverviewExample, TablePaginationExample, + TableRowContextExample, TableSelectionExample, TableSortingExample, - TabsOverviewExample, - TabsTemplateLabelExample, + TableStickyColumnsExample, + TableStickyComplexExample, + TableStickyComplexFlexExample, + TableStickyFooterExample, + TableStickyHeaderExample, + TabGroupBasicExample, + TabGroupAsyncExample, + TabGroupCustomLabelExample, + TabGroupDynamicExample, + TabGroupDynamicHeightExample, + TabGroupHeaderBelowExample, + TabGroupLazyLoadedExample, + TabGroupStretchedExample, + TabGroupStretchedExample, + TabGroupThemeExample, + TabNavBarBasicExample, TextFieldAutofillDirectiveExample, TextFieldAutofillMonitorExample, TextFieldAutosizeTextareaExample, ToolbarMultirowExample, ToolbarOverviewExample, + TooltipAutoHideExample, + TooltipCustomClassExample, TooltipDelayExample, + TooltipDisabledExample, TooltipManualExample, + TooltipMessageExample, TooltipModifiedDefaultsExample, TooltipOverviewExample, TooltipPositionExample, diff --git a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts index 6a933ec9..3a5adb69 100755 --- a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts +++ b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -11,7 +11,7 @@ import {map, startWith} from 'rxjs/operators'; templateUrl: 'autocomplete-auto-active-first-option-example.html', styleUrls: ['autocomplete-auto-active-first-option-example.css'] }) -export class AutocompleteAutoActiveFirstOptionExample { +export class AutocompleteAutoActiveFirstOptionExample implements OnInit { myControl: FormControl = new FormControl(); options = ['One', 'Two', 'Three']; filteredOptions: Observable; 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 917e8459..eb530ade 100755 --- 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,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -15,7 +15,7 @@ export class User { templateUrl: 'autocomplete-display-example.html', styleUrls: ['autocomplete-display-example.css'] }) -export class AutocompleteDisplayExample { +export class AutocompleteDisplayExample implements OnInit { myControl = new FormControl(); 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 a324849a..44f70a68 100755 --- 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,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -11,7 +11,7 @@ import {map, startWith} from 'rxjs/operators'; templateUrl: 'autocomplete-filter-example.html', styleUrls: ['autocomplete-filter-example.css'] }) -export class AutocompleteFilterExample { +export class AutocompleteFilterExample implements OnInit { myControl: FormControl = new FormControl(); diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css new file mode 100755 index 00000000..f0d18e4f --- /dev/null +++ b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.css @@ -0,0 +1,10 @@ +/** + * Add basic flex styling so that the cells evenly space themselves in the row. + */ +cdk-row, cdk-header-row, cdk-footer-row { + display: flex; +} + +cdk-cell, cdk-header-cell, cdk-footer-cell { + flex: 1; +} diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html new file mode 100755 index 00000000..4f8f17a9 --- /dev/null +++ b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.html @@ -0,0 +1,28 @@ + + + + No. + {{element.position}} + + + + + Name + {{element.name}} + + + + + Weight + {{element.weight}} + + + + + Symbol + {{element.symbol}} + + + + + diff --git a/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts new file mode 100755 index 00000000..b117d4de --- /dev/null +++ b/src/assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example.ts @@ -0,0 +1,55 @@ +import {DataSource} from '@angular/cdk/collections'; +import {Component} from '@angular/core'; +import {BehaviorSubject, Observable} from 'rxjs'; + +/** + * @title Basic use of `` (uses display flex) + */ +@Component({ + selector: 'cdk-table-basic-flex-example', + styleUrls: ['cdk-table-basic-flex-example.css'], + templateUrl: 'cdk-table-basic-flex-example.html', +}) +export class CdkTableBasicFlexExample { + displayedColumns = ['position', 'name', 'weight', 'symbol']; + dataSource = new ExampleDataSource(); +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; + +/** + * Data source to provide what data should be rendered in the table. Note that the data source + * can retrieve its data in any way. In this case, the data source is provided a reference + * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage + * the underlying data. Instead, it only needs to take the data and send the table exactly what + * should be rendered. + */ +export class ExampleDataSource extends DataSource { + /** Stream of data that is provided to the table. */ + data: BehaviorSubject = new BehaviorSubject(ELEMENT_DATA); + + /** Connect function called by the table to retrieve one stream containing the data to render. */ + connect(): Observable { + return this.data; + } + + disconnect() {} +} 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..edaff91e 100755 --- 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,39 +1,7 @@ -/* Structure */ -.example-container { - display: flex; - flex-direction: column; - min-width: 300px; +table { + width: 100%; } -/* - * Styles to make the demo's cdk-table match the material design spec - * https://material.io/guidelines/components/data-tables.html - */ -.example-table { - flex: 1 1 auto; - overflow: auto; - max-height: 500px; -} - -.example-header-row, .example-row { - display: flex; - border-bottom: 1px solid #ccc; - align-items: center; - height: 32px; - padding: 0 8px; -} - -.example-cell, .example-header-cell { - flex: 1; -} - -.example-header-cell { - font-size: 12px; - font-weight: bold; - color: rgba(0, 0, 0, 0.54); -} - -.example-cell { - font-size: 13px; - color: rgba(0, 0, 0, 0.87); +th { + text-align: left; } 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..9c411146 100755 --- 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,28 @@ -
- - - - - - ID - {{row.id}} - - - - - Progress - {{row.progress}}% +
+ + + + - - Name - {{row.name}} + + + - - - Color - - {{row.color}} - + + + + - - - - + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
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 fe7338fb..344e04ce 100755 --- 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 @@ -11,61 +11,29 @@ import {BehaviorSubject, Observable} from 'rxjs'; templateUrl: 'cdk-table-basic-example.html', }) export class CdkTableBasicExample { - displayedColumns = ['userId', 'userName', 'progress', 'color']; - exampleDatabase = new ExampleDatabase(); - dataSource: ExampleDataSource | null; - - ngOnInit() { - this.dataSource = new ExampleDataSource(this.exampleDatabase); - } + displayedColumns = ['position', 'name', 'weight', 'symbol']; + dataSource = new ExampleDataSource(); } -/** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; - -export interface UserData { - id: string; +export interface PeriodicElement { name: string; - progress: string; - color: string; -} - -/** An example database that the data source uses to retrieve data for the table. */ -export class ExampleDatabase { - /** Stream that emits whenever the data has been modified. */ - dataChange: BehaviorSubject = new BehaviorSubject([]); - get data(): UserData[] { return this.dataChange.value; } - - constructor() { - // Fill up the database with 100 users. - for (let i = 0; i < 100; i++) { this.addUser(); } + position: number; + weight: number; + symbol: string; } - /** Adds a new user to the database. */ - addUser() { - const copiedData = this.data.slice(); - copiedData.push(this.createNewUser()); - this.dataChange.next(copiedData); - } - - /** Builds and returns a new User. */ - private createNewUser() { - const name = - NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + - NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; - - return { - id: (this.data.length + 1).toString(), - name: name, - progress: Math.round(Math.random() * 100).toString(), - color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] - }; - } -} +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; /** * Data source to provide what data should be rendered in the table. Note that the data source @@ -74,14 +42,13 @@ 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 { + /** Stream of data that is provided to the table. */ + data: BehaviorSubject = new BehaviorSubject(ELEMENT_DATA); /** Connect function called by the table to retrieve one stream containing the data to render. */ - connect(): Observable { - return this._exampleDatabase.dataChange; + connect(): Observable { + return this.data; } disconnect() {} diff --git a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts index a758e55a..ebfaad12 100755 --- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts +++ b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.ts @@ -1,7 +1,7 @@ -import {Component, Injectable} from '@angular/core'; import {FlatTreeControl} from '@angular/cdk/tree'; -import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree'; -import {of, Observable, BehaviorSubject} from 'rxjs'; +import {Component, Injectable} from '@angular/core'; +import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; +import {BehaviorSubject, Observable, of as observableOf} from 'rxjs'; /** * File node data with nested structure. @@ -154,7 +154,9 @@ export class CdkTreeFlatExample { private _isExpandable = (node: FileFlatNode) => { return node.expandable; }; - private _getChildren = (node: FileNode): Observable => { return of(node.children); }; + private _getChildren = (node: FileNode): Observable => { + return observableOf(node.children); + } hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; }; } diff --git a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts b/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts index 7e8c0689..cca891b3 100755 --- a/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts +++ b/src/assets/angular-material-examples/cdk-tree-nested/cdk-tree-nested-example.ts @@ -1,7 +1,7 @@ -import {Component, Injectable} from '@angular/core'; import {NestedTreeControl} from '@angular/cdk/tree'; +import {Component, Injectable} from '@angular/core'; import {MatTreeNestedDataSource} from '@angular/material/tree'; -import {of, BehaviorSubject} from 'rxjs'; +import {BehaviorSubject, of as observableOf} from 'rxjs'; /** * Json node data with nested structure. Each node has a filename and a value or a list of children @@ -125,7 +125,7 @@ export class CdkTreeNestedExample { database.dataChange.subscribe(data => this.nestedDataSource.data = data); } - private _getChildren = (node: FileNode) => { return of(node.children); }; + private _getChildren = (node: FileNode) => { return observableOf(node.children); }; hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); }; } diff --git a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html index 170df9ad..1099c6ca 100755 --- a/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html +++ b/src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.html @@ -5,7 +5,7 @@ [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)"> - {{fruit.name}} + {{fruit}} cancel ; fruits = [ - { name: 'Lemon' }, + 'Lemon', ]; allFruits = [ - 'Orange', - 'Strawberry', - 'Lime', 'Apple', + 'Lemon', + 'Lime', + 'Orange', + 'Strawberry' ]; @ViewChild('fruitInput') fruitInput: ElementRef; @@ -50,13 +51,15 @@ export class ChipsAutocompleteExample { // Add our fruit if ((value || '').trim()) { - this.fruits.push({ name: value.trim() }); + this.fruits.push(value.trim()); } // Reset the input value if (input) { input.value = ''; } + + this.fruitCtrl.setValue(null); } remove(fruit: any): void { @@ -73,7 +76,8 @@ export class ChipsAutocompleteExample { } selected(event: MatAutocompleteSelectedEvent): void { - this.fruits.push({ name: event.option.viewValue }); + this.fruits.push(event.option.viewValue); this.fruitInput.nativeElement.value = ''; + this.fruitCtrl.setValue(null); } } diff --git a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts b/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts index 0af48437..d529f3cc 100755 --- a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts +++ b/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts @@ -9,10 +9,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/ // the `default as` syntax. import * as _moment from 'moment'; // tslint:disable-next-line:no-duplicate-imports -// import {default as _rollupMoment} from 'moment'; +import {default as _rollupMoment} from 'moment'; -// const moment = _rollupMoment || _moment; -const moment = _moment; +const moment = _rollupMoment || _moment; // See the Moment.js docs for the meaning of these formats: // https://momentjs.com/docs/#/displaying/format/ diff --git a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts b/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts index 8e5bd241..0684b090 100755 --- a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts +++ b/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts @@ -9,10 +9,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/ // the `default as` syntax. import * as _moment from 'moment'; // tslint:disable-next-line:no-duplicate-imports -// import {default as _rollupMoment} from 'moment'; +import {default as _rollupMoment} from 'moment'; -// const moment = _rollupMoment || _moment; -const moment = _moment; +const moment = _rollupMoment || _moment; /** @title Datepicker that uses Moment.js dates */ @Component({ diff --git a/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts index f6660671..6a233667 100755 --- a/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts +++ b/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts @@ -9,12 +9,10 @@ import {MatDatepicker} from '@angular/material/datepicker'; // syntax. However, rollup creates a synthetic default module and we thus need to import it using // the `default as` syntax. import * as _moment from 'moment'; -import { Moment } from 'moment'; // tslint:disable-next-line:no-duplicate-imports -// import {default as _rollupMoment, Moment} from 'moment'; +import {default as _rollupMoment, Moment} from 'moment'; -// const moment = _rollupMoment || _moment; -const moment = _moment; +const moment = _rollupMoment || _moment; // See the Moment.js docs for the meaning of these formats: // https://momentjs.com/docs/#/displaying/format/ 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 21c4c03a..f931d302 100755 --- a/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts +++ b/src/assets/angular-material-examples/icon-svg/icon-svg-example.ts @@ -14,6 +14,6 @@ export class IconSvgExample { constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { iconRegistry.addSvgIcon( 'thumbs-up', - sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg')); + sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg')); } } diff --git a/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts b/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts index 964e3d05..9e84e9a4 100755 --- a/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts +++ b/src/assets/angular-material-examples/sidenav-responsive/sidenav-responsive-example.ts @@ -1,5 +1,5 @@ import {MediaMatcher} from '@angular/cdk/layout'; -import {ChangeDetectorRef, Component} from '@angular/core'; +import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core'; /** @title Responsive sidenav */ @Component({ @@ -7,7 +7,7 @@ import {ChangeDetectorRef, Component} from '@angular/core'; templateUrl: 'sidenav-responsive-example.html', styleUrls: ['sidenav-responsive-example.css'], }) -export class SidenavResponsiveExample { +export class SidenavResponsiveExample implements OnDestroy { mobileQuery: MediaQueryList; fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`); diff --git a/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts b/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts index e2e78c0e..c70b275c 100755 --- a/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts +++ b/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; /** @@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; templateUrl: 'stepper-editable-example.html', styleUrls: ['stepper-editable-example.css'] }) -export class StepperEditableExample { +export class StepperEditableExample implements OnInit { firstFormGroup: FormGroup; secondFormGroup: FormGroup; isEditable: boolean = false; diff --git a/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts b/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts index f2f56693..44935073 100755 --- a/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts +++ b/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; /** @@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; templateUrl: 'stepper-optional-example.html', styleUrls: ['stepper-optional-example.css'] }) -export class StepperOptionalExample { +export class StepperOptionalExample implements OnInit { firstFormGroup: FormGroup; secondFormGroup: FormGroup; isOptional: boolean = false; 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..cd2c1829 100755 --- 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,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; /** @@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; templateUrl: 'stepper-overview-example.html', styleUrls: ['stepper-overview-example.css'] }) -export class StepperOverviewExample { +export class StepperOverviewExample implements OnInit { isLinear = false; firstFormGroup: FormGroup; secondFormGroup: FormGroup; diff --git a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.css b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.css similarity index 100% rename from src/assets/angular-material-examples/tabs-overview/tabs-overview-example.css rename to src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.css diff --git a/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html new file mode 100755 index 00000000..422e28d8 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.html @@ -0,0 +1,36 @@ + + + +
+ Fill out your name + + + +
+ +
+
+
+ +
+ Fill out your address + + + +
+ + +
+
+
+ + Done + You are now done. +
+ + +
+
+
diff --git a/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts new file mode 100755 index 00000000..13229872 --- /dev/null +++ b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts @@ -0,0 +1,27 @@ +import {Component, OnInit} from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; + +/** + * @title Stepper vertical + */ +@Component({ + selector: 'stepper-vertical', + templateUrl: 'stepper-vertical-example.html', + styleUrls: ['stepper-vertical-example.css'] +}) +export class StepperVerticalExample implements OnInit { + isLinear = false; + firstFormGroup: FormGroup; + secondFormGroup: FormGroup; + + constructor(private _formBuilder: FormBuilder) { } + + ngOnInit() { + this.firstFormGroup = this._formBuilder.group({ + firstCtrl: ['', Validators.required] + }); + this.secondFormGroup = this._formBuilder.group({ + secondCtrl: ['', Validators.required] + }); + } +} diff --git a/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css new file mode 100755 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html new file mode 100755 index 00000000..c1f93438 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.html @@ -0,0 +1,10 @@ + + Loading tabs... + + + + + {{tab.label}} + {{tab.content}} + + diff --git a/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts new file mode 100755 index 00000000..8ae32569 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts @@ -0,0 +1,31 @@ +import {Component} from '@angular/core'; +import {Observable, Observer} from 'rxjs'; + +export interface ExampleTab { + label: string; + content: string; +} + +/** + * @title Tab group with asynchronously loading tab contents + */ +@Component({ + selector: 'tab-group-async-example', + templateUrl: 'tab-group-async-example.html', + styleUrls: ['tab-group-async-example.css'], +}) +export class TabGroupAsyncExample { + asyncTabs: Observable; + + constructor() { + this.asyncTabs = Observable.create((observer: Observer) => { + setTimeout(() => { + observer.next([ + {label: 'First', content: 'Content 1'}, + {label: 'Second', content: 'Content 2'}, + {label: 'Third', content: 'Content 3'}, + ]); + }, 1000); + }); + } +} diff --git a/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css new file mode 100755 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html new file mode 100755 index 00000000..6002f245 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.html @@ -0,0 +1,5 @@ + + Content 1 + Content 2 + Content 3 + diff --git a/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts new file mode 100755 index 00000000..e27bd3c8 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-basic/tab-group-basic-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic use of the tab group + */ +@Component({ + selector: 'tab-group-basic-example', + templateUrl: 'tab-group-basic-example.html', + styleUrls: ['tab-group-basic-example.css'], +}) +export class TabGroupBasicExample {} diff --git a/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css new file mode 100755 index 00000000..1f3769e1 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.css @@ -0,0 +1,3 @@ +.example-tab-icon { + margin-right: 8px; +} diff --git a/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html new file mode 100755 index 00000000..d70c34a4 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.html @@ -0,0 +1,26 @@ + + + + thumb_up + First + + Content 1 + + + + + thumb_up + Second + + Content 2 + + + + + thumb_up + Third + + + Content 3 + + diff --git a/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts new file mode 100755 index 00000000..f124cc83 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Using tabs with a custom label template + */ +@Component({ + selector: 'tab-group-custom-label-example', + templateUrl: 'tab-group-custom-label-example.html', + styleUrls: ['tab-group-custom-label-example.css'], +}) +export class TabGroupCustomLabelExample {} diff --git a/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css new file mode 100755 index 00000000..af5f0dac --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.css @@ -0,0 +1,18 @@ +.example-small-box, .example-large-box { + display: flex; + align-items: center; + justify-content: center; + margin: 16px; + padding: 16px; + border-radius: 8px; +} + +.example-small-box { + height: 100px; + width: 100px; +} + +.example-large-box { + height: 300px; + width: 300px; +} diff --git a/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html new file mode 100755 index 00000000..7b345298 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.html @@ -0,0 +1,12 @@ + + +
+ Small content +
+
+ +
+ Large content +
+
+
diff --git a/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts new file mode 100755 index 00000000..6ae7b50f --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Tag group with dynamic height based on tab contents + */ +@Component({ + selector: 'tab-group-dynamic-height-example', + templateUrl: 'tab-group-dynamic-height-example.html', + styleUrls: ['tab-group-dynamic-height-example.css'], +}) +export class TabGroupDynamicHeightExample {} diff --git a/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css new file mode 100755 index 00000000..a28708d8 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.css @@ -0,0 +1,5 @@ +.example-input-label, +.example-add-tab-button, +.example-delete-tab-button { + margin: 8px; +} diff --git a/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html new file mode 100755 index 00000000..d28c2a90 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.html @@ -0,0 +1,29 @@ +
+ Selected tab index: + + + +
+ +
+ + Select tab after adding +
+ + + + Contents for {{tab}} tab + + + + diff --git a/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts new file mode 100755 index 00000000..ab5f3e8f --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example.ts @@ -0,0 +1,27 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; + +/** + * @title Tag group with dynamically changing tabs + */ +@Component({ + selector: 'tab-group-dynamic-example', + templateUrl: 'tab-group-dynamic-example.html', + styleUrls: ['tab-group-dynamic-example.css'], +}) +export class TabGroupDynamicExample { + tabs = ['First', 'Second', 'Third']; + selected = new FormControl(0); + + addTab(selectAfterAdding: boolean) { + this.tabs.push('New'); + + if (selectAfterAdding) { + this.selected.setValue(this.tabs.length - 1); + } + } + + removeTab(index: number) { + this.tabs.splice(index, 1); + } +} diff --git a/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css new file mode 100755 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html new file mode 100755 index 00000000..a5871252 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.html @@ -0,0 +1,5 @@ + + Content 1 + Content 2 + Content 3 + diff --git a/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts new file mode 100755 index 00000000..608f7f38 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Tab group with the headers on the bottom + */ +@Component({ + selector: 'tab-group-header-below-example', + templateUrl: 'tab-group-header-below-example.html', + styleUrls: ['tab-group-header-below-example.css'], +}) +export class TabGroupHeaderBelowExample {} diff --git a/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css new file mode 100755 index 00000000..74323087 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html new file mode 100755 index 00000000..97f5c9b6 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.html @@ -0,0 +1,17 @@ + + + + Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}} + + + + + Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}} + + + + + Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}} + + + diff --git a/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts new file mode 100755 index 00000000..de89df3c --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example.ts @@ -0,0 +1,21 @@ +import {Component} from '@angular/core'; + +/** + * @title Tab group where the tab content is loaded lazily (when activated) + */ +@Component({ + selector: 'tab-group-lazy-loaded-example', + templateUrl: 'tab-group-lazy-loaded-example.html', + styleUrls: ['tab-group-lazy-loaded-example.css'], +}) +export class TabGroupLazyLoadedExample { + tabLoadTimes: Date[] = []; + + getTimeLoaded(index: number) { + if (!this.tabLoadTimes[index]) { + this.tabLoadTimes[index] = new Date(); + } + + return this.tabLoadTimes[index]; + } +} diff --git a/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css new file mode 100755 index 00000000..50bc8b3b --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.css @@ -0,0 +1,3 @@ +.example-stretched-tabs { + max-width: 800px; +} diff --git a/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html new file mode 100755 index 00000000..048ae2c4 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.html @@ -0,0 +1,5 @@ + + Content 1 + Content 2 + Content 3 + diff --git a/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts new file mode 100755 index 00000000..99d4b37b --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Tab group with stretched labels + */ +@Component({ + selector: 'tab-group-stretched-example', + templateUrl: 'tab-group-stretched-example.html', + styleUrls: ['tab-group-stretched-example.css'], +}) +export class TabGroupStretchedExample {} diff --git a/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css new file mode 100755 index 00000000..f54020ca --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.css @@ -0,0 +1,4 @@ +.example-button-toggle-label { + display: inline-block; + margin: 16px; +} diff --git a/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html new file mode 100755 index 00000000..dbdb157a --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.html @@ -0,0 +1,25 @@ +
+ + Primary + Accent + + Color +
+ +
+ + Primary + Accent + + Background Color +
+ + + Content 1 + Content 2 + Content 3 + diff --git a/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts new file mode 100755 index 00000000..22a94854 --- /dev/null +++ b/src/assets/angular-material-examples/tab-group-theme/tab-group-theme-example.ts @@ -0,0 +1,11 @@ +import {Component} from '@angular/core'; + +/** + * @title Customizing the theme options on the tab group + */ +@Component({ + selector: 'tab-group-theme-example', + templateUrl: 'tab-group-theme-example.html', + styleUrls: ['tab-group-theme-example.css'], +}) +export class TabGroupThemeExample {} diff --git a/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css new file mode 100755 index 00000000..b25726a6 --- /dev/null +++ b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.css @@ -0,0 +1,3 @@ +.example-action-button { + margin-bottom: 8px; +} diff --git a/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html new file mode 100755 index 00000000..86d05003 --- /dev/null +++ b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.html @@ -0,0 +1,12 @@ + + + diff --git a/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts new file mode 100755 index 00000000..330f3d54 --- /dev/null +++ b/src/assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example.ts @@ -0,0 +1,19 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic use of the tab nav bar + */ +@Component({ + selector: 'tab-nav-bar-basic-example', + templateUrl: 'tab-nav-bar-basic-example.html', + styleUrls: ['tab-nav-bar-basic-example.css'], +}) +export class TabNavBarBasicExample { + links = ['First', 'Second', 'Third']; + activeLink = this.links[0]; + background = ''; + + toggleBackground() { + this.background = this.background ? '' : 'primary'; + } +} diff --git a/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css new file mode 100755 index 00000000..1922e7ff --- /dev/null +++ b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html new file mode 100755 index 00000000..09bb2c21 --- /dev/null +++ b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.html @@ -0,0 +1,28 @@ + + + + No. + {{element.position}} + + + + + Name + {{element.name}} + + + + + Weight + {{element.weight}} + + + + + Symbol + {{element.symbol}} + + + + + \ No newline at end of file diff --git a/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts new file mode 100755 index 00000000..f75072d0 --- /dev/null +++ b/src/assets/angular-material-examples/table-basic-flex/table-basic-flex-example.ts @@ -0,0 +1,34 @@ +import {Component} from '@angular/core'; + +/** + * @title Basic use of `` (uses display flex) + */ +@Component({ + selector: 'table-basic-flex-example', + styleUrls: ['table-basic-flex-example.css'], + templateUrl: 'table-basic-flex-example.html', +}) +export class TableBasicFlexExample { + displayedColumns = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; 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 bbfba32d..1922e7ff 100755 --- 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,7 +1,3 @@ -.example-container { - display: flex; - flex-direction: column; - max-height: 500px; - min-width: 300px; - overflow: auto; +table { + width: 100%; } 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 7531ffcc..accb8a7c 100755 --- 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,5 +1,4 @@ -
- +
@@ -31,4 +30,4 @@
-
+ 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 c1176481..3042613e 100755 --- 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,7 +1,7 @@ import {Component} from '@angular/core'; /** - * @title Basic table + * @title Basic use of `` */ @Component({ selector: 'table-basic-example', @@ -13,14 +13,14 @@ export class TableBasicExample { dataSource = ELEMENT_DATA; } -export interface Element { +export interface PeriodicElement { name: string; position: number; weight: number; symbol: string; } -const ELEMENT_DATA: Element[] = [ +const ELEMENT_DATA: PeriodicElement[] = [ {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'}, @@ -31,14 +31,4 @@ const ELEMENT_DATA: Element[] = [ {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'}, ]; diff --git a/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css new file mode 100755 index 00000000..879b4295 --- /dev/null +++ b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.css @@ -0,0 +1,7 @@ +table { + width: 100%; +} + +button { + margin: 16px 8px; +} diff --git a/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html new file mode 100755 index 00000000..0463410e --- /dev/null +++ b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.html @@ -0,0 +1,13 @@ + + + + +
+ + + + + + + +
{{column}} {{element[column]}}
diff --git a/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts new file mode 100755 index 00000000..107226fc --- /dev/null +++ b/src/assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example.ts @@ -0,0 +1,59 @@ +import {Component} from '@angular/core'; + +/** + * @title Table dynamically changing the columns displayed + */ +@Component({ + selector: 'table-dynamic-columns-example', + styleUrls: ['table-dynamic-columns-example.css'], + templateUrl: 'table-dynamic-columns-example.html', +}) +export class TableDynamicColumnsExample { + definedColumns = ['name', 'weight', 'symbol', 'position']; + columnsToDisplay = this.definedColumns.slice(); + data: PeriodicElement[] = ELEMENT_DATA; + + addColumn() { + const randomColumn = Math.floor(Math.random() * this.definedColumns.length); + this.columnsToDisplay.push(this.definedColumns[randomColumn]); + } + + removeColumn() { + if (this.columnsToDisplay.length) { + this.columnsToDisplay.pop(); + } + } + + shuffle() { + let currentIndex = this.columnsToDisplay.length; + while (0 !== currentIndex) { + let randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex -= 1; + + // Swap + let temp = this.columnsToDisplay[currentIndex]; + this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex]; + this.columnsToDisplay[randomIndex] = temp; + } + } +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; diff --git a/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css new file mode 100755 index 00000000..673abbf7 --- /dev/null +++ b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.css @@ -0,0 +1,47 @@ +table { + width: 100%; +} + +tr.example-detail-row { + height: 0; +} + +tr.example-element-row:not(.example-expanded-row):hover { + background: #f5f5f5; +} + +tr.example-element-row:not(.example-expanded-row):active { + background: #efefef; +} + +.example-element-row td { + border-bottom-width: 0; +} + +.example-element-detail { + overflow: hidden; + display: flex; +} + +.example-element-diagram { + min-width: 80px; + border: 2px solid black; + padding: 8px; + font-weight: lighter; + margin: 8px 0; + height: 104px; +} + +.example-element-symbol { + font-weight: bold; + font-size: 40px; + line-height: normal; +} + +.example-element-description { + padding: 16px; +} + +.example-element-description-attribution { + opacity: 0.5; +} diff --git a/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html new file mode 100755 index 00000000..bf38ae1c --- /dev/null +++ b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + +
{{column}} {{element[column]}} +
+
+
{{element.position}}
+
{{element.symbol}}
+
{{element.name}}
+
{{element.weight}}
+
+
+ {{element.description}} + -- Wikipedia +
+
+
diff --git a/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts new file mode 100755 index 00000000..9d2b3b81 --- /dev/null +++ b/src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts @@ -0,0 +1,113 @@ +import {Component} from '@angular/core'; +import {animate, state, style, transition, trigger} from '@angular/animations'; + +/** + * @title Table with expandable rows + */ +@Component({ + selector: 'table-expandable-rows-example', + styleUrls: ['table-expandable-rows-example.css'], + templateUrl: 'table-expandable-rows-example.html', + animations: [ + trigger('detailExpand', [ + state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})), + state('expanded', style({height: '*'})), + transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), + ]), + ], +}) +export class TableExpandableRowsExample { + dataSource = ELEMENT_DATA; + columnsToDisplay = ['name', 'weight', 'symbol', 'position']; + expandedElement: PeriodicElement; +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; + description: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + { + position: 1, + name: 'Hydrogen', + weight: 1.0079, + symbol: 'H', + description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard + atomic weight of 1.008, hydrogen is the lightest element on the periodic table.` + }, { + position: 2, + name: 'Helium', + weight: 4.0026, + symbol: 'He', + description: `Helium is a chemical element with symbol He and atomic number 2. It is a + colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas + group in the periodic table. Its boiling point is the lowest among all the elements.` + }, { + position: 3, + name: 'Lithium', + weight: 6.941, + symbol: 'Li', + description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft, + silvery-white alkali metal. Under standard conditions, it is the lightest metal and the + lightest solid element.` + }, { + position: 4, + name: 'Beryllium', + weight: 9.0122, + symbol: 'Be', + description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a + relatively rare element in the universe, usually occurring as a product of the spallation of + larger atomic nuclei that have collided with cosmic rays.` + }, { + position: 5, + name: 'Boron', + weight: 10.811, + symbol: 'B', + description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely + by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a + low-abundance element in the Solar system and in the Earth's crust.` + }, { + position: 6, + name: 'Carbon', + weight: 12.0107, + symbol: 'C', + description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic + and tetravalent—making four electrons available to form covalent chemical bonds. It belongs + to group 14 of the periodic table.` + }, { + position: 7, + name: 'Nitrogen', + weight: 14.0067, + symbol: 'N', + description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first + discovered and isolated by Scottish physician Daniel Rutherford in 1772.` + }, { + position: 8, + name: 'Oxygen', + weight: 15.9994, + symbol: 'O', + description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of + the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing + agent that readily forms oxides with most elements as well as with other compounds.` + }, { + position: 9, + name: 'Fluorine', + weight: 18.9984, + symbol: 'F', + description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the + lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard + conditions.` + }, { + position: 10, + name: 'Neon', + weight: 20.1797, + symbol: 'Ne', + description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas. + Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about + two-thirds the density of air.` + }, +]; 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 67230469..2d9da922 100755 --- 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,15 +1,6 @@ /* Structure */ -.example-container { - display: flex; - flex-direction: column; - min-width: 300px; - max-height: 500px; - overflow: auto; -} - -.example-header { - min-height: 64px; - padding: 8px 24px 0; +table { + width: 100%; } .mat-form-field { 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 cc529680..365537f9 100755 --- 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,11 +1,8 @@ -
-
-
- +
@@ -34,4 +31,3 @@
-
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 3e9ccbb2..4b4800b1 100755 --- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts +++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts @@ -20,14 +20,14 @@ export class TableFilteringExample { } } -export interface Element { +export interface PeriodicElement { name: string; position: number; weight: number; symbol: string; } -const ELEMENT_DATA: Element[] = [ +const ELEMENT_DATA: PeriodicElement[] = [ {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'}, @@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [ {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'}, ]; diff --git a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css index 8b311e6d..de64c6e5 100755 --- a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css +++ b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.css @@ -1,11 +1,7 @@ -.example-container { - display: flex; - flex-direction: column; - max-height: 500px; - min-width: 300px; +table { + width: 100%; } -.mat-table { - overflow: auto; - max-height: 500px; +tr.mat-footer-row { + font-weight: bold; } diff --git a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html index 11aad5cd..bbf9c2c3 100755 --- a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html +++ b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html @@ -1,22 +1,19 @@ -
- - + - Item - {{transaction.item}} - + + + - Cost - {{transaction.cost | currency}} - getTotalCost() + + + - - - - - + + + +
Item {{transaction.item}} Total Cost {{transaction.cost | currency}} {{getTotalCost() | currency}}
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 c2445f18..256f8028 100755 --- 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,19 +1,16 @@ /* Structure */ .example-container { - display: flex; - flex-direction: column; - min-width: 300px; position: relative; - max-height: 500px; +} + +.example-table-container { + position: relative; + max-height: 400px; overflow: auto; } -.example-header { - min-height: 64px; - display: flex; - align-items: center; - padding-left: 24px; - font-size: 20px; +table { + width: 100%; } .example-loading-shade { 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 68799c35..ad80ff5d 100755 --- a/src/assets/angular-material-examples/table-http/table-http-example.html +++ b/src/assets/angular-material-examples/table-http/table-http-example.html @@ -7,12 +7,10 @@
- + +
- - - @@ -33,9 +31,7 @@ - @@ -44,7 +40,7 @@
# + 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 f3aee68d..9475078b 100755 --- 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,6 +1,6 @@ import {HttpClient} from '@angular/common/http'; -import {AfterViewInit, Component, ViewChild} from '@angular/core'; -import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; +import {Component, OnInit, ViewChild} from '@angular/core'; +import {MatPaginator, MatSort} from '@angular/material'; import {merge, Observable, of as observableOf} from 'rxjs'; import {catchError, map, startWith, switchMap} from 'rxjs/operators'; @@ -12,10 +12,10 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators'; styleUrls: ['table-http-example.css'], templateUrl: 'table-http-example.html', }) -export class TableHttpExample implements AfterViewInit { +export class TableHttpExample implements OnInit { displayedColumns = ['created', 'state', 'number', 'title']; exampleDatabase: ExampleHttpDao | null; - dataSource = new MatTableDataSource(); + data: GithubIssue[] = []; resultsLength = 0; isLoadingResults = true; @@ -26,7 +26,7 @@ export class TableHttpExample implements AfterViewInit { constructor(private http: HttpClient) {} - ngAfterViewInit() { + ngOnInit() { this.exampleDatabase = new ExampleHttpDao(this.http); // If the user changes the sort order, reset back to the first page. @@ -54,7 +54,7 @@ export class TableHttpExample implements AfterViewInit { this.isRateLimitReached = true; return observableOf([]); }) - ).subscribe(data => this.dataSource.data = data); + ).subscribe(data => this.data = data); } } diff --git a/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css new file mode 100755 index 00000000..8700a8af --- /dev/null +++ b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.css @@ -0,0 +1,19 @@ +table { + width: 100%; +} + +.example-first-header-row th { + border-bottom: none; +} + +.example-second-header-row { + font-style: italic; +} + +.example-first-footer-row { + font-weight: bold; +} + +.example-second-footer-row td { + color: #900000; +} diff --git a/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html new file mode 100755 index 00000000..04b5b162 --- /dev/null +++ b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Item {{transaction.item}} Total Cost {{transaction.cost | currency}} {{getTotalCost() | currency}} Name of the item purchased Cost of the item in USD + Please note that the cost of items displayed are completely and totally made up. +
diff --git a/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts new file mode 100755 index 00000000..1832eb4b --- /dev/null +++ b/src/assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example.ts @@ -0,0 +1,32 @@ +import {Component} from '@angular/core'; +import {Transaction} from '../table-footer-row/table-footer-row-example'; + +export interface Transaction { + item: string; + cost: number; +} + +/** + * @title Table with multiple header and footer rows + */ +@Component({ + selector: 'table-multiple-header-footer-example', + styleUrls: ['table-multiple-header-footer-example.css'], + templateUrl: 'table-multiple-header-footer-example.html', +}) +export class TableMultipleHeaderFooterExample { + displayedColumns = ['item', 'cost']; + transactions: Transaction[] = [ + {item: 'Beach ball', cost: 4}, + {item: 'Towel', cost: 5}, + {item: 'Frisbee', cost: 2}, + {item: 'Sunscreen', cost: 4}, + {item: 'Cooler', cost: 25}, + {item: 'Swim suit', cost: 15}, + ]; + + /** Gets the total cost of all transactions. */ + getTotalCost() { + return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0); + } +} diff --git a/src/assets/angular-material-examples/table-native-only/table-native-only-example.css b/src/assets/angular-material-examples/table-native-only/table-native-only-example.css deleted file mode 100755 index e69de29b..00000000 diff --git a/src/assets/angular-material-examples/table-native-only/table-native-only-example.html b/src/assets/angular-material-examples/table-native-only/table-native-only-example.html deleted file mode 100755 index 0570e323..00000000 --- a/src/assets/angular-material-examples/table-native-only/table-native-only-example.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - - - - -
No. Name Weight Symbol
{{element.position}} {{element.name}} {{element.weight}} {{element.symbol}}
\ No newline at end of file diff --git a/src/assets/angular-material-examples/table-native-only/table-native-only-example.ts b/src/assets/angular-material-examples/table-native-only/table-native-only-example.ts deleted file mode 100755 index 7eb89185..00000000 --- a/src/assets/angular-material-examples/table-native-only/table-native-only-example.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Component} from '@angular/core'; - -/** - * @title Native `` that only applies the Material styles - */ -@Component({ - selector: 'table-native-only-example', - styleUrls: ['table-native-only-example.css'], - templateUrl: 'table-native-only-example.html', -}) -export class TableNativeOnlyExample { - elements = [ - {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'}, - ]; -} 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 1819289d..369cbec2 100755 --- 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,14 +1,5 @@ -.example-container { - display: flex; - flex-direction: column; - min-width: 300px; - max-height: 500px; - overflow: auto; -} - -.example-header { - min-height: 64px; - padding: 8px 24px 0; +table { + width: 100%; } .mat-form-field { @@ -16,3 +7,6 @@ width: 100%; } +td, th { + width: 25%; +} 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 c9eb65ec..e36a8657 100755 --- 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,11 +1,8 @@ -
-
- -
+
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 4d807e2d..9e58578d 100755 --- 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,4 +1,4 @@ -import {Component, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; /** @@ -9,7 +9,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; styleUrls: ['table-overview-example.css'], templateUrl: 'table-overview-example.html', }) -export class TableOverviewExample { +export class TableOverviewExample implements OnInit { displayedColumns = ['id', 'name', 'progress', 'color']; dataSource: MatTableDataSource; @@ -34,6 +34,9 @@ export class TableOverviewExample { filterValue = filterValue.trim(); // Remove whitespace filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches this.dataSource.filter = filterValue; + if (this.dataSource.paginator) { + this.dataSource.paginator.firstPage(); + } } } 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 8e156acf..1922e7ff 100755 --- 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,8 +1,3 @@ -.example-container { - display: flex; - flex-direction: column; - min-width: 300px; - max-height: 500px; - overflow: auto; +table { + width: 100%; } - 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 bfacadd5..a410ebbe 100755 --- 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,5 +1,5 @@ -
-
+
+
@@ -29,9 +29,5 @@
- - + 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 2d10a411..6a4e03c5 100755 --- 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,4 +1,4 @@ -import {Component, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {MatPaginator, MatTableDataSource} from '@angular/material'; /** @@ -9,9 +9,9 @@ import {MatPaginator, MatTableDataSource} from '@angular/material'; styleUrls: ['table-pagination-example.css'], templateUrl: 'table-pagination-example.html', }) -export class TablePaginationExample { +export class TablePaginationExample implements OnInit { displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); + dataSource = new MatTableDataSource(ELEMENT_DATA); @ViewChild(MatPaginator) paginator: MatPaginator; @@ -20,14 +20,14 @@ export class TablePaginationExample { } } -export interface Element { +export interface PeriodicElement { name: string; position: number; weight: number; symbol: string; } -const ELEMENT_DATA: Element[] = [ +const ELEMENT_DATA: PeriodicElement[] = [ {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'}, diff --git a/src/assets/angular-material-examples/table-row-context/table-row-context-example.css b/src/assets/angular-material-examples/table-row-context/table-row-context-example.css new file mode 100755 index 00000000..1922e7ff --- /dev/null +++ b/src/assets/angular-material-examples/table-row-context/table-row-context-example.css @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/assets/angular-material-examples/table-row-context/table-row-context-example.html b/src/assets/angular-material-examples/table-row-context/table-row-context-example.html new file mode 100755 index 00000000..3f3d776e --- /dev/null +++ b/src/assets/angular-material-examples/table-row-context/table-row-context-example.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
$implicit {{data}} index {{index}} count {{count}} first {{first}} last {{last}} even {{even}} odd {{odd}}
diff --git a/src/assets/angular-material-examples/table-row-context/table-row-context-example.ts b/src/assets/angular-material-examples/table-row-context/table-row-context-example.ts new file mode 100755 index 00000000..7799dd05 --- /dev/null +++ b/src/assets/angular-material-examples/table-row-context/table-row-context-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; + +/** + * @title Table showing each row context properties. + */ +@Component({ + selector: 'table-row-context-example', + styleUrls: ['table-row-context-example.css'], + templateUrl: 'table-row-context-example.html', +}) +export class TableRowContextExample { + displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd']; + data: string[] = ['one', 'two', 'three', 'four', 'five']; +} diff --git a/src/assets/angular-material-examples/table-selection/table-selection-example.css b/src/assets/angular-material-examples/table-selection/table-selection-example.css index fd79d00f..1922e7ff 100755 --- a/src/assets/angular-material-examples/table-selection/table-selection-example.css +++ b/src/assets/angular-material-examples/table-selection/table-selection-example.css @@ -1,11 +1,3 @@ -.example-container { - display: flex; - flex-direction: column; - max-height: 500px; - min-width: 300px; - overflow: auto; -} - -.mat-column-select { - overflow: visible; +table { + width: 100%; } diff --git a/src/assets/angular-material-examples/table-selection/table-selection-example.html b/src/assets/angular-material-examples/table-selection/table-selection-example.html index 31ef280a..c8af8133 100755 --- a/src/assets/angular-material-examples/table-selection/table-selection-example.html +++ b/src/assets/angular-material-examples/table-selection/table-selection-example.html @@ -1,5 +1,4 @@ -
- +
@@ -46,4 +45,3 @@ (click)="selection.toggle(row)">
-
diff --git a/src/assets/angular-material-examples/table-selection/table-selection-example.ts b/src/assets/angular-material-examples/table-selection/table-selection-example.ts index 88e72ead..cee88c81 100755 --- a/src/assets/angular-material-examples/table-selection/table-selection-example.ts +++ b/src/assets/angular-material-examples/table-selection/table-selection-example.ts @@ -12,8 +12,8 @@ import {SelectionModel} from '@angular/cdk/collections'; }) export class TableSelectionExample { displayedColumns = ['select', 'position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); - selection = new SelectionModel(true, []); + dataSource = new MatTableDataSource(ELEMENT_DATA); + selection = new SelectionModel(true, []); /** Whether the number of selected elements matches the total number of rows. */ isAllSelected() { @@ -30,14 +30,14 @@ export class TableSelectionExample { } } -export interface Element { +export interface PeriodicElement { name: string; position: number; weight: number; symbol: string; } -const ELEMENT_DATA: Element[] = [ +const ELEMENT_DATA: PeriodicElement[] = [ {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'}, @@ -48,14 +48,4 @@ const ELEMENT_DATA: Element[] = [ {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'}, ]; 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 342b186a..11b40820 100755 --- 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,11 +1,7 @@ -.example-container { - display: flex; - flex-direction: column; - min-width: 300px; - overflow: auto; - max-height: 500px; +table { + width: 100%; } -.mat-header-cell.mat-sort-header-sorted { +th.mat-sort-header-sorted { color: black; } diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html index 00a89980..30548862 100755 --- 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,5 +1,4 @@ -
- +
@@ -28,4 +27,3 @@
-
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 d7c5a196..8878e744 100755 --- 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,5 +1,5 @@ -import {Component, ViewChild} from '@angular/core'; -import {MatTableDataSource, MatSort} from '@angular/material'; +import {Component, OnInit, ViewChild} from '@angular/core'; +import {MatSort, MatTableDataSource} from '@angular/material'; /** * @title Table with sorting @@ -9,7 +9,7 @@ import {MatTableDataSource, MatSort} from '@angular/material'; styleUrls: ['table-sorting-example.css'], templateUrl: 'table-sorting-example.html', }) -export class TableSortingExample { +export class TableSortingExample implements OnInit { displayedColumns = ['position', 'name', 'weight', 'symbol']; dataSource = new MatTableDataSource(ELEMENT_DATA); @@ -20,14 +20,14 @@ export class TableSortingExample { } } -export interface Element { +export interface PeriodicElement { name: string; position: number; weight: number; symbol: string; } -const ELEMENT_DATA: Element[] = [ +const ELEMENT_DATA: PeriodicElement[] = [ {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'}, @@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [ {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'}, ]; diff --git a/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css new file mode 100755 index 00000000..d0ad2766 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.css @@ -0,0 +1,26 @@ +.example-container { + height: 400px; + width: 550px; + overflow: auto; +} + +table { + width: 800px; +} + +td.mat-column-star { + width: 20px; + padding-right: 8px; +} + +th.mat-column-position, td.mat-column-position { + padding-left: 8px; +} + +.mat-table-sticky:first-child { + border-right: 1px solid #e0e0e0; +} + +.mat-table-sticky:last-child { + border-left: 1px solid #e0e0e0; +} diff --git a/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html new file mode 100755 index 00000000..73b460f5 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.html @@ -0,0 +1,39 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name {{element.name}} No. {{element.position}} Weight {{element.weight}} Symbol {{element.symbol}} + more_vert +
+
diff --git a/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts new file mode 100755 index 00000000..7b1c84b4 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts @@ -0,0 +1,35 @@ +import {Component} from '@angular/core'; + +/** + * @title Table with a sticky columns + */ +@Component({ + selector: 'table-sticky-columns-example', + styleUrls: ['table-sticky-columns-example.css'], + templateUrl: 'table-sticky-columns-example.html', +}) +export class TableStickyColumnsExample { + displayedColumns = + ['name', 'position', 'weight', 'symbol', 'position', 'weight', 'symbol', 'star']; + dataSource = ELEMENT_DATA; +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; diff --git a/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css new file mode 100755 index 00000000..8e5c53c5 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.css @@ -0,0 +1,28 @@ +.example-container { + height: 400px; + overflow: auto; +} + +.mat-table-sticky { + background: #59abfd; + opacity: 1; +} + +.example-sticky-toggle-group { + margin: 8px; +} + +.mat-column-filler { + padding: 0 8px; + font-size: 10px; + text-align: center; +} + +.mat-header-cell, .mat-footer-cell, .mat-cell { + min-width: 80px; + box-sizing: border-box; +} + +.mat-header-row, .mat-footer-row, .mat-row { + min-width: 1920px; /* 24 columns, 80px each */ +} diff --git a/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.html b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.html new file mode 100755 index 00000000..c403cd0b --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.html @@ -0,0 +1,78 @@ +
+ + +
+ +
+ Sticky Headers: + + Row 1 + Row 2 + +
+ +
+ Sticky Footers: + + Row 1 + Row 2 + +
+ +
+ Sticky Columns: + + Position + Name + Weight + Symbol + +
+ +
+ + + Position + {{element.position}} + Position Footer + + + + Name + {{element.name}} + Name Footer + + + + Weight + {{element.weight}} + Weight Footer + + + + Symbol + {{element.symbol}} + Symbol Footer + + + + Filler header cell + Filler data cell + Filler footer cell + + + + + + + + + + +
diff --git a/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts new file mode 100755 index 00000000..8882ca5e --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts @@ -0,0 +1,53 @@ +import {Component} from '@angular/core'; +import {MatButtonToggleGroup} from '@angular/material'; + +/** + * @title Flex-layout tables with toggle-able sticky headers, footers, and columns + */ +@Component({ + selector: 'table-sticky-complex-flex-example', + styleUrls: ['table-sticky-complex-flex-example.css'], + templateUrl: 'table-sticky-complex-flex-example.html', +}) +export class TableStickyComplexFlexExample { + displayedColumns: string[] = []; + dataSource = ELEMENT_DATA; + + tables = [0]; + + constructor() { + this.displayedColumns.length = 24; + this.displayedColumns.fill('filler'); + + // The first two columns should be position and name; the last two columns: weight, symbol + this.displayedColumns[0] = 'position'; + this.displayedColumns[1] = 'name'; + this.displayedColumns[22] = 'weight'; + this.displayedColumns[23] = 'symbol'; + } + + /** Whether the button toggle group contains the id as an active value. */ + isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) { + return (buttonToggleGroup.value || []).indexOf(id) !== -1; + } +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; diff --git a/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.css b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.css new file mode 100755 index 00000000..d3edcb38 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.css @@ -0,0 +1,24 @@ +.example-container { + height: 400px; + overflow: auto; +} + +.mat-table-sticky { + background: #59abfd; + opacity: 1; +} + +.example-sticky-toggle-group { + margin: 8px; +} + +.mat-column-filler { + padding: 0 8px; + font-size: 10px; + text-align: center; +} + +.mat-header-cell, .mat-footer-cell, .mat-cell { + min-width: 80px; + box-sizing: border-box; +} diff --git a/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.html b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.html new file mode 100755 index 00000000..24944cae --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.html @@ -0,0 +1,78 @@ +
+ + +
+ +
+ Sticky Headers: + + Row 1 + Row 2 + +
+ +
+ Sticky Footers: + + Row 1 + Row 2 + +
+ +
+ Sticky Columns: + + Position + Name + Weight + Symbol + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Position {{element.position}} Position Footer Name {{element.name}} Name Footer Weight {{element.weight}} Weight Footer Symbol {{element.symbol}} Symbol Footer Filler header cell Filler data cell Filler footer cell
+
diff --git a/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts new file mode 100755 index 00000000..912d9ad9 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts @@ -0,0 +1,53 @@ +import {Component} from '@angular/core'; +import {MatButtonToggleGroup} from '@angular/material'; + +/** + * @title Tables with toggle-able sticky headers, footers, and columns + */ +@Component({ + selector: 'table-sticky-complex-example', + styleUrls: ['table-sticky-complex-example.css'], + templateUrl: 'table-sticky-complex-example.html', +}) +export class TableStickyComplexExample { + displayedColumns: string[] = []; + dataSource = ELEMENT_DATA; + + tables = [0]; + + constructor() { + this.displayedColumns.length = 24; + this.displayedColumns.fill('filler'); + + // The first two columns should be position and name; the last two columns: weight, symbol + this.displayedColumns[0] = 'position'; + this.displayedColumns[1] = 'name'; + this.displayedColumns[22] = 'weight'; + this.displayedColumns[23] = 'symbol'; + } + + /** Whether the button toggle group contains the id as an active value. */ + isSticky(buttonToggleGroup: MatButtonToggleGroup, id: string) { + return (buttonToggleGroup.value || []).indexOf(id) !== -1; + } +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; diff --git a/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.css b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.css new file mode 100755 index 00000000..6b5869e7 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.css @@ -0,0 +1,16 @@ +.example-container { + height: 270px; + overflow: auto; +} + +table { + width: 100%; +} + +tr.mat-footer-row { + font-weight: bold; +} + +.mat-table-sticky { + border-top: 1px solid #e0e0e0; +} diff --git a/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html new file mode 100755 index 00000000..7f4a2681 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.html @@ -0,0 +1,21 @@ +
+ + + + + + + + + + + + + + + + + + +
Item {{transaction.item}} Total Cost {{transaction.cost | currency}} {{getTotalCost() | currency}}
+
\ No newline at end of file diff --git a/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.ts b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.ts new file mode 100755 index 00000000..dbb4b265 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example.ts @@ -0,0 +1,31 @@ +import {Component} from '@angular/core'; + +export interface Transaction { + item: string; + cost: number; +} + +/** + * @title Table with a sticky footer + */ +@Component({ + selector: 'table-sticky-footer-example', + styleUrls: ['table-sticky-footer-example.css'], + templateUrl: 'table-sticky-footer-example.html', +}) +export class TableStickyFooterExample { + displayedColumns = ['item', 'cost']; + transactions: Transaction[] = [ + {item: 'Beach ball', cost: 4}, + {item: 'Towel', cost: 5}, + {item: 'Frisbee', cost: 2}, + {item: 'Sunscreen', cost: 4}, + {item: 'Cooler', cost: 25}, + {item: 'Swim suit', cost: 15}, + ]; + + /** Gets the total cost of all transactions. */ + getTotalCost() { + return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0); + } +} diff --git a/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.css b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.css new file mode 100755 index 00000000..4eca688d --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.css @@ -0,0 +1,8 @@ +.example-container { + height: 400px; + overflow: auto; +} + +table { + width: 100%; +} diff --git a/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.html b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.html new file mode 100755 index 00000000..ccf93e26 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.html @@ -0,0 +1,31 @@ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}
+
\ No newline at end of file diff --git a/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.ts b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.ts new file mode 100755 index 00000000..21a17a35 --- /dev/null +++ b/src/assets/angular-material-examples/table-sticky-header/table-sticky-header-example.ts @@ -0,0 +1,34 @@ +import {Component} from '@angular/core'; + +/** + * @title Table with sticky header + */ +@Component({ + selector: 'table-sticky-header-example', + styleUrls: ['table-sticky-header-example.css'], + templateUrl: 'table-sticky-header-example.html', +}) +export class TableStickyHeaderExample { + displayedColumns = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + {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'}, +]; 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 deleted file mode 100755 index 2883cea1..00000000 --- a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.html +++ /dev/null @@ -1,4 +0,0 @@ - - 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 deleted file mode 100755 index 602c3948..00000000 --- a/src/assets/angular-material-examples/tabs-overview/tabs-overview-example.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {Component} from '@angular/core'; - -/** - * @title Basic tabs - */ -@Component({ - selector: 'tabs-overview-example', - templateUrl: 'tabs-overview-example.html', - styleUrls: ['tabs-overview-example.css'], -}) -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 deleted file mode 100755 index 71d3d8b2..00000000 --- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.css +++ /dev/null @@ -1,7 +0,0 @@ -.demo-tab-group { - border: 1px solid #e8e8e8; -} - -.demo-tab-content { - padding: 16px; -} diff --git a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html b/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html deleted file mode 100755 index 26d77c7f..00000000 --- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.html +++ /dev/null @@ -1,119 +0,0 @@ - - -

Tabs with text labels

- - -
- 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 - -
-
-
- - - -

Tabs with icon labels

- - - - security - -
- 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. -
-
- - - attach_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. -
-
- - - block - - No content - - - - loop - -
- 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. -
-
- - - build - - No content - - - - thumb_down - - No content - -
-
-
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 deleted file mode 100755 index 0f103327..00000000 --- a/src/assets/angular-material-examples/tabs-template-label/tabs-template-label-example.ts +++ /dev/null @@ -1,11 +0,0 @@ -import {Component} from '@angular/core'; - -/** - * @title Complex Example - */ -@Component({ - selector: 'tabs-template-label-example', - templateUrl: 'tabs-template-label-example.html', - styleUrls: ['./tabs-template-label-example.css'] -}) -export class TabsTemplateLabelExample {} diff --git a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css new file mode 100755 index 00000000..9e7c7057 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.css @@ -0,0 +1,11 @@ +.example-button { + display: block; + width: 48px; + margin: 80px auto 400px; +} + +.example-container { + height: 200px; + overflow: auto; + border: 1px solid #ccc; +} diff --git a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html new file mode 100755 index 00000000..cd09f06a --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.html @@ -0,0 +1,18 @@ + + + + {{positionOption}} + + + + +
+ +
diff --git a/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts new file mode 100755 index 00000000..01267279 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts @@ -0,0 +1,16 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; +import {TooltipPosition} from '@angular/material'; + +/** + * @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container. + */ +@Component({ + selector: 'tooltip-auto-hide-example', + templateUrl: 'tooltip-auto-hide-example.html', + styleUrls: ['tooltip-auto-hide-example.css'], +}) +export class TooltipAutoHideExample { + positionOptions: TooltipPosition[] = ['below', 'above', 'left', 'right']; + position = new FormControl(this.positionOptions[0]); +} diff --git a/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.css b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.css new file mode 100755 index 00000000..ba23be00 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.css @@ -0,0 +1,7 @@ +.example-button { + margin-top: 16px; +} + +.example-tooltip-red { + background: #b71c1c; +} diff --git a/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.html b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.html new file mode 100755 index 00000000..fde04a9d --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.html @@ -0,0 +1,7 @@ + diff --git a/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts new file mode 100755 index 00000000..51e7f754 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example.ts @@ -0,0 +1,14 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + +/** + * @title Tooltip that can have a custom class applied. + */ +@Component({ + selector: 'tooltip-custom-class-example', + templateUrl: 'tooltip-custom-class-example.html', + styleUrls: ['tooltip-custom-class-example.css'], + // Need to remove view encapsulation so that the custom tooltip style defined in + // `tooltip-custom-class-example.css` will not be scoped to this component's view. + encapsulation: ViewEncapsulation.None, +}) +export class TooltipCustomClassExample { } diff --git a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css index 56d5205c..599c846d 100755 --- a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css +++ b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css @@ -1,3 +1,4 @@ -button { - margin: 8px; +.example-user-input { + display: block; + width: 150px; } diff --git a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html index 7cd4a164..2abdb308 100755 --- a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html +++ b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html @@ -1,7 +1,21 @@ - + + + - diff --git a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts index 3e7ce9c5..7a7d9d68 100755 --- a/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts +++ b/src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts @@ -1,4 +1,5 @@ import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; /** * @title Tooltip with a show and hide delay @@ -8,4 +9,7 @@ import {Component} from '@angular/core'; templateUrl: 'tooltip-delay-example.html', styleUrls: ['tooltip-delay-example.css'], }) -export class TooltipDelayExample {} +export class TooltipDelayExample { + showDelay = new FormControl(1000); + hideDelay = new FormControl(2000); +} diff --git a/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.css b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.css new file mode 100755 index 00000000..c3abf0f1 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.css @@ -0,0 +1,3 @@ +.example-disabled-checkbox { + margin-left: 8px; +} diff --git a/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.html b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.html new file mode 100755 index 00000000..449ca440 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.html @@ -0,0 +1,10 @@ + + + + Tooltip disabled + diff --git a/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.ts b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.ts new file mode 100755 index 00000000..11c7a3ce --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; + +/** + * @title Tooltip that can be disabled + */ +@Component({ + selector: 'tooltip-disabled-example', + templateUrl: 'tooltip-disabled-example.html', + styleUrls: ['tooltip-disabled-example.css'], +}) +export class TooltipDisabledExample { + disabled = new FormControl(false); +} diff --git a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css index 74323087..09f64801 100755 --- a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css +++ b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css @@ -1 +1,3 @@ -/** No CSS for this example */ +.example-action-button { + margin-top: 16px; +} diff --git a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html index 3e5ca183..11305dfc 100755 --- a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html +++ b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html @@ -1,5 +1,28 @@ - +
+ Mouse over to + + + +
- - I have a tooltip - + diff --git a/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.css b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.css new file mode 100755 index 00000000..87914e3a --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.css @@ -0,0 +1,3 @@ +.example-user-input { + margin-right: 8px; +} diff --git a/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.html b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.html new file mode 100755 index 00000000..234a18f4 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.html @@ -0,0 +1,9 @@ + + + + + diff --git a/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.ts b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.ts new file mode 100755 index 00000000..ebf9a9a0 --- /dev/null +++ b/src/assets/angular-material-examples/tooltip-message/tooltip-message-example.ts @@ -0,0 +1,14 @@ +import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; + +/** + * @title Tooltip with a changing message + */ +@Component({ + selector: 'tooltip-message-example', + templateUrl: 'tooltip-message-example.html', + styleUrls: ['tooltip-message-example.css'], +}) +export class TooltipMessageExample { + message = new FormControl('Info about the action'); +} diff --git a/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html b/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html index 8dcc0d0e..dd2f299e 100755 --- a/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html +++ b/src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html @@ -1,3 +1,5 @@ - 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 3a2a2749..29978afb 100755 --- 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,5 @@ -I have a tooltip + 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..87914e3a 100755 --- 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,3 @@ -.example-tooltip-host { - display: inline-flex; - align-items: center; - margin: 50px; -} - -.example-select { - margin: 0 10px; +.example-user-input { + margin-right: 8px; } 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 a0fa7759..42066b30 100755 --- 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,13 +1,14 @@ -
- Show tooltip - - - Before - After - Above - Below - Left - Right + + + + {{ positionOption }} + -
+ + 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..89ad5a16 100755 --- 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,7 +1,9 @@ import {Component} from '@angular/core'; +import {FormControl} from '@angular/forms'; +import {TooltipPosition} from '@angular/material'; /** - * @title Tooltip with custom position + * @title Tooltip with a custom position */ @Component({ selector: 'tooltip-position-example', @@ -9,5 +11,6 @@ import {Component} from '@angular/core'; styleUrls: ['tooltip-position-example.css'], }) export class TooltipPositionExample { - position = 'before'; + positionOptions: TooltipPosition[] = ['after', 'before', 'above', 'below', 'left', 'right']; + position = new FormControl(this.positionOptions[0]); } From ba2f50bf62444e336212e08885b0b77a3d6681b9 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 20 Jun 2018 16:29:28 +0300 Subject: [PATCH 06/10] Fixed Angular Material datepicker examples --- .../datepicker-formats/datepicker-formats-example.ts | 5 +++-- .../datepicker-moment/datepicker-moment-example.ts | 5 +++-- .../datepicker-views-selection-example.ts | 6 ++++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts b/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts index d529f3cc..0af48437 100755 --- a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts +++ b/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts @@ -9,9 +9,10 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/ // the `default as` syntax. import * as _moment from 'moment'; // tslint:disable-next-line:no-duplicate-imports -import {default as _rollupMoment} from 'moment'; +// import {default as _rollupMoment} from 'moment'; -const moment = _rollupMoment || _moment; +// const moment = _rollupMoment || _moment; +const moment = _moment; // See the Moment.js docs for the meaning of these formats: // https://momentjs.com/docs/#/displaying/format/ diff --git a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts b/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts index 0684b090..8e5bd241 100755 --- a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts +++ b/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts @@ -9,9 +9,10 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/ // the `default as` syntax. import * as _moment from 'moment'; // tslint:disable-next-line:no-duplicate-imports -import {default as _rollupMoment} from 'moment'; +// import {default as _rollupMoment} from 'moment'; -const moment = _rollupMoment || _moment; +// const moment = _rollupMoment || _moment; +const moment = _moment; /** @title Datepicker that uses Moment.js dates */ @Component({ diff --git a/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts index 6a233667..f6660671 100755 --- a/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts +++ b/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts @@ -9,10 +9,12 @@ import {MatDatepicker} from '@angular/material/datepicker'; // syntax. However, rollup creates a synthetic default module and we thus need to import it using // the `default as` syntax. import * as _moment from 'moment'; +import { Moment } from 'moment'; // tslint:disable-next-line:no-duplicate-imports -import {default as _rollupMoment, Moment} from 'moment'; +// import {default as _rollupMoment, Moment} from 'moment'; -const moment = _rollupMoment || _moment; +// const moment = _rollupMoment || _moment; +const moment = _moment; // See the Moment.js docs for the meaning of these formats: // https://momentjs.com/docs/#/displaying/format/ From 94d20f8d8d9466e6193d9b99ce6166e8e12066f9 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 20 Jun 2018 16:32:26 +0300 Subject: [PATCH 07/10] Replace cdkTable stuff with matTable since table now is a proper Material element --- .../contact-list/contact-list.component.html | 52 +++++++++---------- src/app/main/apps/contacts/contacts.module.ts | 3 -- .../dashboards/project/project.component.html | 40 +++++++------- .../apps/dashboards/project/project.module.ts | 2 - .../main/apps/e-commerce/e-commerce.module.ts | 2 - .../e-commerce/orders/orders.component.html | 46 ++++++++-------- .../products/products.component.html | 46 ++++++++-------- .../file-list/file-list.component.html | 46 ++++++++-------- .../apps/file-manager/file-manager.module.ts | 2 - src/app/main/pages/search/search.module.ts | 2 - .../search/tabs/table/table.component.html | 28 +++++----- 11 files changed, 129 insertions(+), 140 deletions(-) diff --git a/src/app/main/apps/contacts/contact-list/contact-list.component.html b/src/app/main/apps/contacts/contact-list/contact-list.component.html index 015d2a70..fadabf6a 100644 --- a/src/app/main/apps/contacts/contact-list/contact-list.component.html +++ b/src/app/main/apps/contacts/contact-list/contact-list.component.html @@ -1,9 +1,9 @@ - - - + + + @@ -11,26 +11,26 @@ - - - + + + - - Name - + + Name +

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

- - Email - + + Email + @@ -38,9 +38,9 @@ - - Phone - + + Phone +

{{contact.phone}}

@@ -48,9 +48,9 @@
- - Job title - + + Job title +

{{contact.jobTitle}}

@@ -58,9 +58,9 @@
- - Company - + + Company +

{{contact.company}}

@@ -68,9 +68,9 @@
- - - + + +
diff --git a/src/app/main/apps/dashboards/project/project.module.ts b/src/app/main/apps/dashboards/project/project.module.ts index 46e2c8f6..127f49d7 100644 --- a/src/app/main/apps/dashboards/project/project.module.ts +++ b/src/app/main/apps/dashboards/project/project.module.ts @@ -1,6 +1,5 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CdkTableModule } from '@angular/cdk/table'; import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTableModule, MatTabsModule } from '@angular/material'; import { NgxChartsModule } from '@swimlane/ngx-charts'; @@ -28,7 +27,6 @@ const routes: Routes = [ imports : [ RouterModule.forChild(routes), - CdkTableModule, MatButtonModule, MatDividerModule, MatFormFieldModule, diff --git a/src/app/main/apps/e-commerce/e-commerce.module.ts b/src/app/main/apps/e-commerce/e-commerce.module.ts index b01a6ff2..abd3f06e 100644 --- a/src/app/main/apps/e-commerce/e-commerce.module.ts +++ b/src/app/main/apps/e-commerce/e-commerce.module.ts @@ -1,6 +1,5 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { CdkTableModule } from '@angular/cdk/table'; import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { AgmCoreModule } from '@agm/core'; @@ -75,7 +74,6 @@ const routes: Routes = [ imports : [ RouterModule.forChild(routes), - CdkTableModule, MatButtonModule, MatChipsModule, MatFormFieldModule, diff --git a/src/app/main/apps/e-commerce/orders/orders.component.html b/src/app/main/apps/e-commerce/orders/orders.component.html index 0ea2bdce..5a6cd0ff 100644 --- a/src/app/main/apps/e-commerce/orders/orders.component.html +++ b/src/app/main/apps/e-commerce/orders/orders.component.html @@ -46,25 +46,25 @@ fusePerfectScrollbar> - - ID - + + ID +

{{order.id}}

- - Reference - + + Reference +

{{order.reference}}

- - Customer - + + Customer +

{{order.customer.firstName}} {{order.customer.lastName}} @@ -73,9 +73,9 @@ - - Total - + + Total +

{{order.total | currency:'USD':'symbol'}}

@@ -83,9 +83,9 @@
- - Payment - + + Payment +

{{order.payment.method}}

@@ -93,9 +93,9 @@
- - Status - + + Status +

{{order.status[0].name}}

@@ -103,18 +103,18 @@
- - Date - + + Date +

{{order.date}}

- + - diff --git a/src/app/main/apps/e-commerce/products/products.component.html b/src/app/main/apps/e-commerce/products/products.component.html index 3c8ccaed..2d5be7fd 100644 --- a/src/app/main/apps/e-commerce/products/products.component.html +++ b/src/app/main/apps/e-commerce/products/products.component.html @@ -55,17 +55,17 @@ fusePerfectScrollbar> - - ID - + + ID +

{{product.id}}

- - - + + + @@ -74,17 +74,17 @@ - - Name - + + Name +

{{product.name}}

- - Category - + + Category +

{{product.categories[0]}}

@@ -92,9 +92,9 @@
- - Price - + + Price +

{{product.priceTaxIncl | currency:'USD':'symbol'}}

@@ -102,9 +102,9 @@
- - Quantity - + + Quantity + @@ -117,17 +117,17 @@ - - Active - + + Active + check close - + - diff --git a/src/app/main/apps/file-manager/file-list/file-list.component.html b/src/app/main/apps/file-manager/file-list/file-list.component.html index 721b781b..175fccd7 100644 --- a/src/app/main/apps/file-manager/file-list/file-list.component.html +++ b/src/app/main/apps/file-manager/file-list/file-list.component.html @@ -1,47 +1,47 @@ - - - + + + - - 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}} - - - + + +