From 5d62c58725a725d6d38b56d96f7e849c21dfbbb1 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 08:23:11 +0300 Subject: [PATCH 01/19] Added docs for Material theming --- .../material-theming.component.html | 113 ++++++++++++++++++ .../material-theming.component.scss | 5 + .../material-theming.component.ts | 13 ++ .../working-with-fuse.module.ts | 6 + src/app/navigation/navigation.ts | 6 + 5 files changed, 143 insertions(+) create mode 100644 src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.html create mode 100644 src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.scss create mode 100644 src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.ts diff --git a/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.html b/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.html new file mode 100644 index 00000000..1f1040e8 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.html @@ -0,0 +1,113 @@ +
+ + +
+ +
+ home + chevron_right + Documentation + chevron_right + Working with Fuse +
+ +
Material Theming
+ +
+ + + +
+ +

+ Fuse fully takes advantage of Angular + Material's theming. +

+ +

+ All Material theming related codes can be found in the src/app/app.theme.scss file. This file + is responsible for creating Material color themes as well as applying those themes to the individual + components. +

+ +

+ To simply explain, every component that comes with Fuse has a separate *.theme.scss file + which has everything theming related. These files are separate from the component's scss files simply + because they have theming mixins and they need to be imported in app.theme.scss. Having those + mixins in the component's scss file would have caused duplicate content when imported. +

+ +
Theming components
+ +

+ Below, you can see an example theme (calendar.theme.scss) file. When you create a component, or + move one from the Demo app, you need to import this scss file in the app.theme.scss file and add it + to the component-theme mixin array. +

+ +

+ + + +

+ +

+ calendar.theme.scss +

+ +

+ + + +

+ +

+ app.theme.scss +

+ +

+ The components-theme mixin will be called when you define a new theme so that the components + can be styles according to that theme. +

+ +

+ Too see more examples about multiple color themes you can see the src/app/app.theme.scss file + from the Demo project. +

+ +

+ To learn more about the contents of the $theme map, check out the Demo project. There are + plenty of examples in there and you can also print out the contents of the map using the @debug + function of the sass. +

+ +
+ + +
\ No newline at end of file diff --git a/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.scss b/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.scss new file mode 100644 index 00000000..ca2a0c07 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.scss @@ -0,0 +1,5 @@ +@import "src/@fuse/scss/fuse"; + +:host { + +} diff --git a/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.ts b/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.ts new file mode 100644 index 00000000..40732100 --- /dev/null +++ b/src/app/main/documentation/working-with-fuse/material-theming/material-theming.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'docs-working-with-fuse-material-theming', + templateUrl: './material-theming.component.html', + styleUrls : ['./material-theming.component.scss'] +}) +export class DocsWorkingWithFuseMaterialThemingComponent +{ + constructor() + { + } +} diff --git a/src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts b/src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts index 394a3563..2e477a48 100644 --- a/src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts +++ b/src/app/main/documentation/working-with-fuse/working-with-fuse.module.ts @@ -10,6 +10,7 @@ import { DocsWorkingWithFuseProductionComponent } from 'app/main/documentation/w import { DocsWorkingWithFuseDirectoryStructureComponent } from 'app/main/documentation/working-with-fuse/directory-structure/directory-structure.component'; import { DocsWorkingWithFuseUpdatingFuseComponent } from 'app/main/documentation/working-with-fuse/updating-fuse/updating-fuse.component'; import { DocsWorkingWithFuseMultiLanguageComponent } from 'app/main/documentation/working-with-fuse/multi-language/multi-language.component'; +import { DocsWorkingWithFuseMaterialThemingComponent } from 'app/main/documentation/working-with-fuse/material-theming/material-theming.component'; import { DocsWorkingWithFuseThemeLayoutsComponent } from 'app/main/documentation/working-with-fuse/theme-layouts/theme-layouts.component'; import { DocsWorkingWithFusePageLayoutsComponent } from 'app/main/documentation/working-with-fuse/page-layouts/page-layouts.component'; @@ -34,6 +35,10 @@ const routes = [ path : 'multi-language', component: DocsWorkingWithFuseMultiLanguageComponent }, + { + path : 'material-theming', + component: DocsWorkingWithFuseMaterialThemingComponent + }, { path : 'theme-layouts', component: DocsWorkingWithFuseThemeLayoutsComponent @@ -50,6 +55,7 @@ const routes = [ DocsWorkingWithFuseProductionComponent, DocsWorkingWithFuseDirectoryStructureComponent, DocsWorkingWithFuseUpdatingFuseComponent, + DocsWorkingWithFuseMaterialThemingComponent, DocsWorkingWithFuseMultiLanguageComponent, DocsWorkingWithFuseThemeLayoutsComponent, DocsWorkingWithFusePageLayoutsComponent diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index a409e0a0..ff8f7c40 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -904,6 +904,12 @@ export const navigation: FuseNavigation[] = [ type : 'item', url : '/documentation/working-with-fuse/multi-language' }, + { + id : 'material-theming', + title: 'Material Theming', + type : 'item', + url : '/documentation/working-with-fuse/material-theming' + }, { id : 'theme-layouts', title: 'Theme Layouts', From c8c0b4a609530aeac74998d475bccf1b2a338aff Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 10:05:48 +0300 Subject: [PATCH 02/19] (Navbar) Correctly delay the update of the perfect scrollbar + Fixed the style-1 color issue --- .../vertical/style-1/style-1.component.html | 5 +++-- .../vertical/style-1/style-1.component.ts | 17 ++++++----------- .../vertical/style-2/style-2.component.ts | 17 ++++++----------- 3 files changed, 15 insertions(+), 24 deletions(-) diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html index 53cd80ac..c6effb77 100644 --- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html +++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html @@ -22,7 +22,8 @@ -
+
@@ -34,7 +35,7 @@
-
+
diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts b/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts index acdc3238..43a8906f 100644 --- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts +++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts @@ -1,7 +1,7 @@ import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; import { Subject } from 'rxjs'; -import { filter, take, takeUntil } from 'rxjs/operators'; +import { delay, filter, take, takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; @@ -17,7 +17,6 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; export class NavbarVerticalStyle1Component implements OnInit, OnDestroy { fuseConfig: any; - fusePerfectScrollbarUpdateTimeout: any; navigation: any; // Private @@ -60,11 +59,12 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy // Update the scrollbar on collapsable item toggle this._fuseNavigationService.onItemCollapseToggled - .pipe(takeUntil(this._unsubscribeAll)) + .pipe( + delay(500), + takeUntil(this._unsubscribeAll) + ) .subscribe(() => { - this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => { - this._fusePerfectScrollbar.update(); - }, 310); + this._fusePerfectScrollbar.update(); }); // Scroll to the active item position @@ -135,11 +135,6 @@ export class NavbarVerticalStyle1Component implements OnInit, OnDestroy */ ngOnDestroy(): void { - if ( this.fusePerfectScrollbarUpdateTimeout ) - { - clearTimeout(this.fusePerfectScrollbarUpdateTimeout); - } - // Unsubscribe from all subscriptions this._unsubscribeAll.next(); this._unsubscribeAll.complete(); diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts b/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts index 36b43fa4..6f794a2b 100644 --- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts +++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts @@ -1,7 +1,7 @@ import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; import { Subject } from 'rxjs'; -import { filter, take, takeUntil } from 'rxjs/operators'; +import { delay, filter, take, takeUntil } from 'rxjs/operators'; import { FuseConfigService } from '@fuse/services/config.service'; import { FuseNavigationService } from '@fuse/components/navigation/navigation.service'; @@ -17,7 +17,6 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service'; export class NavbarVerticalStyle2Component implements OnInit, OnDestroy { fuseConfig: any; - fusePerfectScrollbarUpdateTimeout: any; navigation: any; // Private @@ -60,11 +59,12 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy // Update the scrollbar on collapsable item toggle this._fuseNavigationService.onItemCollapseToggled - .pipe(takeUntil(this._unsubscribeAll)) + .pipe( + delay(500), + takeUntil(this._unsubscribeAll) + ) .subscribe(() => { - this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => { - this._fusePerfectScrollbar.update(); - }, 310); + this._fusePerfectScrollbar.update(); }); // Scroll to the active item position @@ -135,11 +135,6 @@ export class NavbarVerticalStyle2Component implements OnInit, OnDestroy */ ngOnDestroy(): void { - if ( this.fusePerfectScrollbarUpdateTimeout ) - { - clearTimeout(this.fusePerfectScrollbarUpdateTimeout); - } - // Unsubscribe from all subscriptions this._unsubscribeAll.next(); this._unsubscribeAll.complete(); From 715e77776e944270324ee84d5277abf2da100faa Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 10:06:19 +0300 Subject: [PATCH 03/19] No need for body and html modifications in the reset.scss --- src/@fuse/scss/partials/_reset.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/@fuse/scss/partials/_reset.scss b/src/@fuse/scss/partials/_reset.scss index 17842a7a..38655ee6 100644 --- a/src/@fuse/scss/partials/_reset.scss +++ b/src/@fuse/scss/partials/_reset.scss @@ -20,13 +20,6 @@ } } -html, body { - margin: 0; - width: 100%; - height: 100%; - overflow: hidden; -} - // Reset non angular-material input's default browser/os styles *:not(mat-form-field) { From 763111aae39477c2ab4b7330ffe2f8746963acd2 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 10:06:47 +0300 Subject: [PATCH 04/19] (ThemeOptions) Changed the navigation secondary background color --- .../components/theme-options/theme-options.component.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index b774b72d..7896ca9b 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -188,7 +188,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy width : 'fullwidth', navbar : { primaryBackground : 'fuse-navy-700', - secondaryBackground: 'indigo-600', + secondaryBackground: 'fuse-navy-900', folded : false, hidden : false, position : 'left', @@ -224,7 +224,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy width : 'fullwidth', navbar : { primaryBackground : 'fuse-navy-700', - secondaryBackground: 'indigo-600', + secondaryBackground: 'fuse-navy-900', folded : false, hidden : false, position : 'left', @@ -260,7 +260,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy width : 'fullwidth', navbar : { primaryBackground : 'fuse-navy-700', - secondaryBackground: 'indigo-600', + secondaryBackground: 'fuse-navy-900', folded : false, hidden : false, position : 'left', @@ -296,7 +296,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy width : 'fullwidth', navbar : { primaryBackground : 'fuse-navy-700', - secondaryBackground: 'indigo-600', + secondaryBackground: 'fuse-navy-900', folded : false, hidden : false, position : 'top', @@ -339,5 +339,4 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy { this._fuseSidebarService.getSidebar(key).toggleOpen(); } - } From 962df7fe9a5be06df3c60353afd1685486c84e33 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 11:50:53 +0300 Subject: [PATCH 05/19] (FuseConfig) Use RoutesRecognized event for better layout resetting especially on lazily loaded routes --- src/@fuse/services/config.service.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/@fuse/services/config.service.ts b/src/@fuse/services/config.service.ts index 175ee264..554910e1 100644 --- a/src/@fuse/services/config.service.ts +++ b/src/@fuse/services/config.service.ts @@ -1,5 +1,5 @@ import { Inject, Injectable, InjectionToken } from '@angular/core'; -import { NavigationStart, Router } from '@angular/router'; +import { Router, RoutesRecognized } from '@angular/router'; import { Platform } from '@angular/cdk/platform'; import { BehaviorSubject, Observable } from 'rxjs'; import { filter } from 'rxjs/operators'; @@ -93,10 +93,10 @@ export class FuseConfigService // Set the config from the default config this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig)); - // Reload the default config on every navigation start if + // Reload the default config on every RoutesRecognized event if // the current config is different from the default one this._router.events - .pipe(filter(event => event instanceof NavigationStart)) + .pipe(filter(event => event instanceof RoutesRecognized)) .subscribe(() => { if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) ) { From 498b9647e6883ff782c21d0f82b1ad5350a7bee1 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 12:28:20 +0300 Subject: [PATCH 06/19] (FuseConfig) Only reset the layout object on route changes --- src/@fuse/services/config.service.ts | 13 ++++++++----- src/@fuse/types/fuse-config.ts | 2 +- src/app/fuse-config/index.ts | 4 ++-- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/@fuse/services/config.service.ts b/src/@fuse/services/config.service.ts index 554910e1..b06dde09 100644 --- a/src/@fuse/services/config.service.ts +++ b/src/@fuse/services/config.service.ts @@ -93,15 +93,18 @@ export class FuseConfigService // Set the config from the default config this._configSubject = new BehaviorSubject(_.cloneDeep(this._defaultConfig)); - // Reload the default config on every RoutesRecognized event if - // the current config is different from the default one + // Reload the default layout config on every RoutesRecognized event + // if the current layout config is different from the default one this._router.events .pipe(filter(event => event instanceof RoutesRecognized)) .subscribe(() => { - if ( !_.isEqual(this._configSubject.getValue(), this._defaultConfig) ) + if ( !_.isEqual(this._configSubject.getValue().layout, this._defaultConfig.layout) ) { - // Clone the default config - const config = _.cloneDeep(this._defaultConfig); + // Clone the current config + const config = _.cloneDeep(this._configSubject.getValue()); + + // Reset the layout from the default config + config.layout = _.cloneDeep(this._defaultConfig.layout); // Set the config this._configSubject.next(config); diff --git a/src/@fuse/types/fuse-config.ts b/src/@fuse/types/fuse-config.ts index d1b4c322..98b7af80 100644 --- a/src/@fuse/types/fuse-config.ts +++ b/src/@fuse/types/fuse-config.ts @@ -1,6 +1,7 @@ export interface FuseConfig { colorTheme: string; + customScrollbars: boolean; layout: { style: string, width: 'fullwidth' | 'boxed', @@ -29,5 +30,4 @@ export interface FuseConfig position: 'left' | 'right' } }; - customScrollbars: boolean; } diff --git a/src/app/fuse-config/index.ts b/src/app/fuse-config/index.ts index d061ccb8..f2b335f0 100644 --- a/src/app/fuse-config/index.ts +++ b/src/app/fuse-config/index.ts @@ -11,6 +11,7 @@ import { FuseConfig } from '@fuse/types'; export const fuseConfig: FuseConfig = { // Color themes can be defined in src/app/app.theme.scss colorTheme : 'theme-default', + customScrollbars: true, layout : { style : 'vertical-layout-1', width : 'fullwidth', @@ -38,6 +39,5 @@ export const fuseConfig: FuseConfig = { hidden : false, position: 'right' } - }, - customScrollbars: true + } }; From ecbc3700641e5829096827a28bf6bdc570381087 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 12:28:39 +0300 Subject: [PATCH 07/19] (FuseConfig) Only reset the layout object on route changes --- src/@fuse/components/theme-options/theme-options.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/@fuse/components/theme-options/theme-options.component.ts b/src/@fuse/components/theme-options/theme-options.component.ts index 7896ca9b..4c5adffd 100644 --- a/src/@fuse/components/theme-options/theme-options.component.ts +++ b/src/@fuse/components/theme-options/theme-options.component.ts @@ -66,6 +66,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy // noinspection TypeScriptValidateTypes this.form = this._formBuilder.group({ colorTheme : new FormControl(), + customScrollbars: new FormControl(), layout : this._formBuilder.group({ style : new FormControl(), width : new FormControl(), @@ -93,8 +94,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy hidden : new FormControl(), position: new FormControl() }) - }), - customScrollbars: new FormControl() + }) }); // Subscribe to the config changes From e92f34b38f0fe58d7b540314e77e0f667d0c1643 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 12:28:57 +0300 Subject: [PATCH 08/19] (Theming) Color themes --- .../theme-options.component.html | 5 +- src/app/app.theme.scss | 112 ++++++++++++------ 2 files changed, 78 insertions(+), 39 deletions(-) diff --git a/src/@fuse/components/theme-options/theme-options.component.html b/src/@fuse/components/theme-options/theme-options.component.html index 68b74a4b..197d7b4c 100644 --- a/src/@fuse/components/theme-options/theme-options.component.html +++ b/src/@fuse/components/theme-options/theme-options.component.html @@ -18,9 +18,10 @@

Color themes

- Default - Default Dark + Default Light Yellow Light + Blue-Gray Dark + Pink Dark
diff --git a/src/app/app.theme.scss b/src/app/app.theme.scss index 4a3596e7..dbb249a7 100644 --- a/src/app/app.theme.scss +++ b/src/app/app.theme.scss @@ -173,7 +173,8 @@ $default-warn-palette: mat-palette($mat-red); // Create the Material theme object $theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette); -// Add ".theme-default" class to the body to activate this theme +// Add ".theme-default" class to the body to activate this theme. +// Class name must start with "theme-" !!! body.theme-default { // Create an Angular Material theme from the $theme map @@ -196,41 +197,7 @@ body.theme-default { } // ----------------------------------------------------------------------------------------------------- -// @ Define the default dark theme -// ----------------------------------------------------------------------------------------------------- - -// Define the primary, accent and warn palettes -$default-dark-theme-primary-palette: mat-palette($mat-blue, 600, 400, 700); -$default-dark-theme-accent-palette: mat-palette($mat-blue-gray); -$default-dark-theme-warn-palette: mat-palette($mat-red); - -// Create the Material theme object -$default-dark-theme: mat-dark-theme($default-dark-theme-primary-palette, $default-dark-theme-accent-palette, $default-dark-theme-warn-palette); - -// Add ".theme-default-dark" class to the body to activate this theme -body.theme-default-dark { - - // Generate the Angular Material theme - @include angular-material-theme($default-dark-theme); - - // Apply the theme to the Fuse Core - @include fuse-core-theme($default-dark-theme); - - // Apply the theme to the user components - @include components-theme($default-dark-theme); - - // Generate Fuse color classes for primary, accent and warn colors - $custom-palettes: ( - primary: $default-dark-theme-primary-palette, - accent: $default-dark-theme-accent-palette, - warn: $default-dark-theme-warn-palette - ); - - @include fuse-color-classes($custom-palettes); -} - -// ----------------------------------------------------------------------------------------------------- -// @ Define the yellow light theme +// @ Define a yellow light theme // ----------------------------------------------------------------------------------------------------- // Define the primary, accent and warn palettes @@ -241,7 +208,8 @@ $yellow-light-theme-warn-palette: mat-palette($mat-red); // Create the Material theme object $yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette); -// Add ".theme-yellow-light" class to the body to activate this theme +// Add ".theme-yellow-light" class to the body to activate this theme. +// Class name must start with "theme-" !!! body.theme-yellow-light { // Generate the Angular Material theme @@ -260,5 +228,75 @@ body.theme-yellow-light { warn: $yellow-light-theme-warn-palette ); + @include fuse-color-classes($custom-palettes); +} + +// ----------------------------------------------------------------------------------------------------- +// @ Define a blue-gray dark theme +// ----------------------------------------------------------------------------------------------------- + +// Define the primary, accent and warn palettes +$blue-gray-dark-theme-primary-palette: mat-palette($mat-blue); +$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray); +$blue-gray-dark-theme-warn-palette: mat-palette($mat-red); + +// Create the Material theme object +$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette); + +// Add ".theme-blue-gray-dark" class to the body to activate this theme. +// Class name must start with "theme-" !!! +body.theme-blue-gray-dark { + + // Generate the Angular Material theme + @include angular-material-theme($blue-gray-dark-theme); + + // Apply the theme to the Fuse Core + @include fuse-core-theme($blue-gray-dark-theme); + + // Apply the theme to the user components + @include components-theme($blue-gray-dark-theme); + + // Generate Fuse color classes for primary, accent and warn colors + $custom-palettes: ( + primary: $blue-gray-dark-theme-primary-palette, + accent: $blue-gray-dark-theme-accent-palette, + warn: $blue-gray-dark-theme-warn-palette + ); + + @include fuse-color-classes($custom-palettes); +} + +// ----------------------------------------------------------------------------------------------------- +// @ Define a pink dark theme +// ----------------------------------------------------------------------------------------------------- + +// Define the primary, accent and warn palettes +$pink-dark-theme-primary-palette: mat-palette($mat-pink); +$pink-dark-theme-accent-palette: mat-palette($mat-pink); +$pink-dark-theme-warn-palette: mat-palette($mat-red); + +// Create the Material theme object +$pink-dark-theme: mat-dark-theme($pink-dark-theme-primary-palette, $pink-dark-theme-accent-palette, $pink-dark-theme-warn-palette); + +// Add ".theme-pink-dark" class to the body to activate this theme. +// Class name must start with "theme-" !!! +body.theme-pink-dark { + + // Generate the Angular Material theme + @include angular-material-theme($pink-dark-theme); + + // Apply the theme to the Fuse Core + @include fuse-core-theme($pink-dark-theme); + + // Apply the theme to the user components + @include components-theme($pink-dark-theme); + + // Generate Fuse color classes for primary, accent and warn colors + $custom-palettes: ( + primary: $pink-dark-theme-primary-palette, + accent: $pink-dark-theme-accent-palette, + warn: $pink-dark-theme-warn-palette + ); + @include fuse-color-classes($custom-palettes); } \ No newline at end of file From 77c05ce4e0a62d495bc39c4b4e3f202eec722630 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 15:47:20 +0300 Subject: [PATCH 09/19] (PageLayouts) IE11 fixes --- src/@fuse/scss/partials/_page-layouts.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/@fuse/scss/partials/_page-layouts.scss b/src/@fuse/scss/partials/_page-layouts.scss index 3384fcca..f28cc535 100644 --- a/src/@fuse/scss/partials/_page-layouts.scss +++ b/src/@fuse/scss/partials/_page-layouts.scss @@ -129,6 +129,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too width: 100%; min-width: 0; max-width: 100%; + height: 100%; max-height: 100%; > .header { @@ -325,6 +326,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too z-index: 3; margin-left: 32px; margin-right: 32px; + width: 100%; min-width: 0; > .header { @@ -563,6 +565,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too flex: 1 1 auto; z-index: 3; min-width: 0; + width: 100%; @include mat-elevation(7); > .header { From c4e338cda15e017579592aeddf652d29b26d0e07 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 19:31:30 +0300 Subject: [PATCH 10/19] (Academy) IE11 fixes --- src/app/main/apps/academy/courses/courses.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/main/apps/academy/courses/courses.component.html b/src/app/main/apps/academy/courses/courses.component.html index c4e1c98d..1dbac2e1 100644 --- a/src/app/main/apps/academy/courses/courses.component.html +++ b/src/app/main/apps/academy/courses/courses.component.html @@ -53,7 +53,7 @@
-
+
@@ -69,7 +69,7 @@
-
+
{{course.title}}
Updated {{course.updated}}
From d8782a78d5d307c0ed0b1f5994882b48915f7ddb Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 20:36:27 +0300 Subject: [PATCH 11/19] (AppComponent) Small tweak for IE11 compatibility --- src/app/app.component.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b3451842..def0a0fd 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -138,13 +138,16 @@ export class AppComponent implements OnInit, OnDestroy this.document.body.classList.remove('boxed'); } - // Color theme - this.document.body.classList.forEach(className => { + // Color theme - Use normal for loop for IE11 compatibility + for ( let i = 0; i < this.document.body.classList.length; i++ ) + { + const className = this.document.body.classList[i]; + if ( className.startsWith('theme-') ) { this.document.body.classList.remove(className); } - }); + } this.document.body.classList.add(this.fuseConfig.colorTheme); }); From 09bd4b9fee1c1bf8d9a6d41daedf9a39b7a0cd10 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Mon, 27 Aug 2018 20:55:36 +0300 Subject: [PATCH 12/19] (Colors) Fixed: primary, accent and warn color classes don't obey the palettes' selected default hue value when used by themselves (without the -hue suffix) --- src/@fuse/scss/partials/_colors.scss | 36 +++++++++++++++++--- src/app/app.theme.scss | 16 ++++----- src/app/main/ui/colors/colors.component.html | 4 ++- 3 files changed, 43 insertions(+), 13 deletions(-) diff --git a/src/@fuse/scss/partials/_colors.scss b/src/@fuse/scss/partials/_colors.scss index c68b3f01..7950231a 100644 --- a/src/@fuse/scss/partials/_colors.scss +++ b/src/@fuse/scss/partials/_colors.scss @@ -13,10 +13,10 @@ // If it's a light theme, use a darker background // color other than the default #fafafa - @if ($is-dark == false) { - background: #F5F5F5; - } @else { + @if ($is-dark) { background: map-get($background, background); + } @else { + background: #F5F5F5; } } @@ -300,7 +300,8 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70 } // Run the generator one more time for default values (500) - @if ($hue == 500) { + // if we are not working with primary, accent or warn palettes + @if ($hue == 500 and $paletteName != 'primary' and $paletteName != 'accent' and $paletteName != 'warn') { // Generate color classes @include generate-color-classes($paletteName, $color, $contrast, ''); @@ -318,6 +319,33 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70 } } } + + // Run the generator again for the selected default hue values for + // primary, accent and warn palettes + // + // We are doing this because the default hue value can be changed + // by the user when the Material theme being generated. + @if ($paletteName == 'primary' or $paletteName == 'accent' or $paletteName == 'warn') { + + // Get the color and the contrasting color for the selected + // default hue + $color: map-get($palette, 'default'); + $contrast: map-get($palette, 'default-contrast'); + + // Generate color classes + @include generate-color-classes($paletteName, $color, $contrast, ''); + + // Add color to the correct list depending on the contrasting color + + // If the contrast color is dark + @if (rgba(black, 1) == rgba($contrast, 1)) { + $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma'); + } + // if the contrast color is light + @else { + $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma'); + } + } } // Generate contrasting colors diff --git a/src/app/app.theme.scss b/src/app/app.theme.scss index dbb249a7..8025cabe 100644 --- a/src/app/app.theme.scss +++ b/src/app/app.theme.scss @@ -187,13 +187,13 @@ body.theme-default { @include components-theme($theme); // Generate Fuse color classes for primary, accent and warn colors - $custom-palettes: ( + $palettes: ( primary: $default-primary-palette, accent: $default-accent-palette, warn: $default-warn-palette ); - @include fuse-color-classes($custom-palettes); + @include fuse-color-classes($palettes); } // ----------------------------------------------------------------------------------------------------- @@ -222,13 +222,13 @@ body.theme-yellow-light { @include components-theme($yellow-light-theme); // Generate Fuse color classes for primary, accent and warn colors - $custom-palettes: ( + $palettes: ( primary: $yellow-light-theme-primary-palette, accent: $yellow-light-theme-accent-palette, warn: $yellow-light-theme-warn-palette ); - @include fuse-color-classes($custom-palettes); + @include fuse-color-classes($palettes); } // ----------------------------------------------------------------------------------------------------- @@ -257,13 +257,13 @@ body.theme-blue-gray-dark { @include components-theme($blue-gray-dark-theme); // Generate Fuse color classes for primary, accent and warn colors - $custom-palettes: ( + $palettes: ( primary: $blue-gray-dark-theme-primary-palette, accent: $blue-gray-dark-theme-accent-palette, warn: $blue-gray-dark-theme-warn-palette ); - @include fuse-color-classes($custom-palettes); + @include fuse-color-classes($palettes); } // ----------------------------------------------------------------------------------------------------- @@ -292,11 +292,11 @@ body.theme-pink-dark { @include components-theme($pink-dark-theme); // Generate Fuse color classes for primary, accent and warn colors - $custom-palettes: ( + $palettes: ( primary: $pink-dark-theme-primary-palette, accent: $pink-dark-theme-accent-palette, warn: $pink-dark-theme-warn-palette ); - @include fuse-color-classes($custom-palettes); + @include fuse-color-classes($palettes); } \ No newline at end of file diff --git a/src/app/main/ui/colors/colors.component.html b/src/app/main/ui/colors/colors.component.html index ea871540..3a19941c 100644 --- a/src/app/main/ui/colors/colors.component.html +++ b/src/app/main/ui/colors/colors.component.html @@ -67,7 +67,9 @@
-
500
+
+ Default +
.{{selectedColor}}
From a184be1650fc0a46329078792e8e62e24cbb9513 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 28 Aug 2018 07:03:19 +0300 Subject: [PATCH 13/19] Various fixes --- .../components/sidebar/sidebar.component.ts | 4 +- .../theme-options/theme-options.module.ts | 4 +- .../fuse-mat-sidenav.directive.ts | 16 +-- src/@fuse/mat-colors/index.ts | 20 ++- src/app/main/apps/calendar/calendar.module.ts | 4 +- src/app/main/apps/chat/chat.module.ts | 10 +- src/app/main/apps/contacts/contacts.module.ts | 4 +- .../analytics/analytics.component.ts | 6 +- .../main/apps/e-commerce/e-commerce.module.ts | 5 +- .../mail-details/mail-details.component.ts | 10 +- .../mail-list-item.component.ts | 37 +++-- .../main/apps/mail-ngrx/mail.component.html | 2 +- src/app/main/apps/mail-ngrx/mail.component.ts | 14 +- src/app/main/apps/mail-ngrx/mail.module.ts | 4 +- src/app/main/apps/mail-ngrx/mail.service.ts | 34 +++-- .../sidebars/main/main-sidebar.component.ts | 8 +- .../store/effects/filters.effects.ts | 4 +- .../store/effects/folders.effects.ts | 4 +- .../mail-ngrx/store/effects/labels.effects.ts | 4 +- .../mail-ngrx/store/effects/mails.effects.ts | 22 +-- .../mail-ngrx/store/guards/resolve.guard.ts | 131 +++++++++--------- src/app/main/apps/mail/mail.model.ts | 10 +- src/app/main/apps/mail/mail.module.ts | 4 +- .../board/add-list/add-list.component.ts | 6 +- .../scrumboard/board/board.component.html | 4 +- .../board/dialogs/card/card.component.html | 2 +- .../label-selector.component.html | 2 +- .../label-selector.component.ts | 8 +- .../edit-board-name.component.ts | 6 +- .../board/list/add-card/add-card.component.ts | 6 +- .../edit-list-name.component.ts | 6 +- .../scrumboard/board/list/list.component.html | 5 +- .../main/apps/scrumboard/scrumboard.module.ts | 5 +- src/app/main/apps/todo/todo.module.ts | 4 +- .../changelog/changelog.component.html | 6 + .../components/components.module.ts | 4 +- src/app/store/effects/router.effect.ts | 19 +-- 37 files changed, 261 insertions(+), 183 deletions(-) diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index 66c55c55..dccd90e1 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -1,4 +1,6 @@ -import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core'; +import { + ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation +} from '@angular/core'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { ObservableMedia } from '@angular/flex-layout'; import { Subject } from 'rxjs'; diff --git a/src/@fuse/components/theme-options/theme-options.module.ts b/src/@fuse/components/theme-options/theme-options.module.ts index f9e6b043..68683798 100644 --- a/src/@fuse/components/theme-options/theme-options.module.ts +++ b/src/@fuse/components/theme-options/theme-options.module.ts @@ -2,7 +2,9 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FlexLayoutModule } from '@angular/flex-layout'; -import { MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule } from '@angular/material'; +import { + MatButtonModule, MatCheckboxModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule +} from '@angular/material'; import { FuseDirectivesModule } from '@fuse/directives/directives'; import { FuseMaterialColorPickerModule } from '@fuse/components/material-color-picker/material-color-picker.module'; diff --git a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts index 7b79144c..5e4f189d 100644 --- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts +++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.directive.ts @@ -15,11 +15,11 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy @HostBinding('class.mat-is-locked-open') isLockedOpen: boolean; - @Input('fuseMatSidenavHelper') + @Input() id: string; - @Input('mat-is-locked-open') - matIsLockedOpenBreakpoint: string; + @Input() + matIsLockedOpen: string; // Private private _unsubscribeAll: Subject; @@ -58,7 +58,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy // Register the sidenav to the service this._fuseMatSidenavHelperService.setSidenav(this.id, this._matSidenav); - if ( this._observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) + if ( this._observableMedia.isActive(this.matIsLockedOpen) ) { this.isLockedOpen = true; this._matSidenav.mode = 'side'; @@ -74,7 +74,7 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy this._fuseMatchMediaService.onMediaChange .pipe(takeUntil(this._unsubscribeAll)) .subscribe(() => { - if ( this._observableMedia.isActive(this.matIsLockedOpenBreakpoint) ) + if ( this._observableMedia.isActive(this.matIsLockedOpen) ) { this.isLockedOpen = true; this._matSidenav.mode = 'side'; @@ -105,8 +105,8 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy }) export class FuseMatSidenavTogglerDirective { - @Input('fuseMatSidenavToggler') - id; + @Input() + id: string; /** * Constructor @@ -126,7 +126,7 @@ export class FuseMatSidenavTogglerDirective * On click */ @HostListener('click') - onClick() + onClick(): void { this._fuseMatSidenavHelperService.getSidenav(this.id).toggle(); } diff --git a/src/@fuse/mat-colors/index.ts b/src/@fuse/mat-colors/index.ts index e2fd17e2..504a3669 100644 --- a/src/@fuse/mat-colors/index.ts +++ b/src/@fuse/mat-colors/index.ts @@ -687,7 +687,23 @@ const matColors = { // tslint:disable-next-line const matPresetColors = [ - '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00', '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#d7ccc8', '#bcaaa4', '#8d6e63', '#5d4037', '#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#ffffff', '#eeeeee', '#bdbdbd', '#616161', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238', '#cfd8dc', '#b0bec5', '#78909c', '#455a64' + '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#fce4ec', '#f8bbd0', + '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', + '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', + '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', + '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', + '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', + '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', + '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9', + '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', + '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', + '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', + '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', + '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', + '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00', + '#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723', '#d7ccc8', '#bcaaa4', '#8d6e63', '#5d4037', '#fafafa', '#f5f5f5', + '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121', '#ffffff', '#eeeeee', '#bdbdbd', '#616161', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', + '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238', '#cfd8dc', '#b0bec5', '#78909c', '#455a64' ]; /** @@ -699,7 +715,7 @@ export class MatColors public static all = matColors; public static presets = matPresetColors; - public static getColor(colorName) + public static getColor(colorName): any { if ( matColors[colorName] ) { diff --git a/src/app/main/apps/calendar/calendar.module.ts b/src/app/main/apps/calendar/calendar.module.ts index 1e79e452..87be314e 100644 --- a/src/app/main/apps/calendar/calendar.module.ts +++ b/src/app/main/apps/calendar/calendar.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule, MatTooltipModule } from '@angular/material'; +import { + MatButtonModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatSlideToggleModule, MatToolbarModule, MatTooltipModule +} from '@angular/material'; import { ColorPickerModule } from 'ngx-color-picker'; import { CalendarModule as AngularCalendarModule } from 'angular-calendar'; diff --git a/src/app/main/apps/chat/chat.module.ts b/src/app/main/apps/chat/chat.module.ts index a54b46e5..b503003b 100644 --- a/src/app/main/apps/chat/chat.module.ts +++ b/src/app/main/apps/chat/chat.module.ts @@ -1,7 +1,9 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatCardModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatRadioModule, MatSidenavModule, MatToolbarModule } from '@angular/material'; +import { + MatButtonModule, MatCardModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatRadioModule, MatSidenavModule, MatToolbarModule +} from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; @@ -17,10 +19,10 @@ import { ChatContactSidenavComponent } from 'app/main/apps/chat/sidenavs/right/c const routes: Routes = [ { - path : '**', + path: '**', component: ChatComponent, - children : [], - resolve : { + children: [], + resolve: { chat: ChatService } } diff --git a/src/app/main/apps/contacts/contacts.module.ts b/src/app/main/apps/contacts/contacts.module.ts index 1f4d3062..2a7be771 100644 --- a/src/app/main/apps/contacts/contacts.module.ts +++ b/src/app/main/apps/contacts/contacts.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule } from '@angular/material'; +import { + MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule +} from '@angular/material'; import { FuseSharedModule } from '@fuse/shared.module'; import { FuseConfirmDialogModule, FuseSidebarModule } from '@fuse/components'; diff --git a/src/app/main/apps/dashboards/analytics/analytics.component.ts b/src/app/main/apps/dashboards/analytics/analytics.component.ts index 41829f65..274f9ac0 100644 --- a/src/app/main/apps/dashboards/analytics/analytics.component.ts +++ b/src/app/main/apps/dashboards/analytics/analytics.component.ts @@ -53,7 +53,7 @@ export class AnalyticsDashboardComponent implements OnInit private _registerCustomChartJSPlugin(): void { (window).Chart.plugins.register({ - afterDatasetsDraw: function (chart, easing) { + afterDatasetsDraw: function (chart, easing): any { // Only activate the plugin if it's made available // in the options if ( @@ -67,11 +67,11 @@ export class AnalyticsDashboardComponent implements OnInit // To only draw at the end of animation, check for easing === 1 const ctx = chart.ctx; - chart.data.datasets.forEach(function (dataset, i) { + chart.data.datasets.forEach(function (dataset, i): any { const meta = chart.getDatasetMeta(i); if ( !meta.hidden ) { - meta.data.forEach(function (element, index) { + meta.data.forEach(function (element, index): any { // Draw the text in black, with the specified font ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; 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 d02ec632..8bb0f524 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,9 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material'; +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'; diff --git a/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts index f1ba2b2d..e07c1884 100644 --- a/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts +++ b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, ViewEncapsulation } from '@angular/core'; -import { Store } from '@ngrx/store'; +import { select, Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; @@ -15,8 +15,8 @@ import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; }) export class MailNgrxDetailsComponent implements OnChanges { - @Input('mail') - mailInput: Mail; + @Input() + currentMail: Mail; labels$: Observable; mail: Mail; @@ -34,7 +34,7 @@ export class MailNgrxDetailsComponent implements OnChanges ) { // Set the defaults - this.labels$ = this._store.select(fromStore.getLabelsArr); + this.labels$ = this._store.pipe(select(fromStore.getLabelsArr)); this.showDetails = false; } @@ -47,7 +47,7 @@ export class MailNgrxDetailsComponent implements OnChanges */ ngOnChanges(): void { - this.updateModel(this.mailInput); + this.updateModel(this.currentMail); this.markAsRead(); } diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts index 219f3a00..dc1e7fd6 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list-item/mail-list-item.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core'; -import { Store } from '@ngrx/store'; +import { select, Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { MailNgrxService } from '../../mail.service'; @@ -21,18 +21,29 @@ export class MailNgrxListItemComponent implements OnInit labels$: Observable; selectedMailIds$: Observable; + /** + * Constructor + * + * @param {ChangeDetectorRef} _changeDetectorRef + * @param {MailNgrxService} _mailNgrxService + * @param {Store} _store + */ constructor( - private mailService: MailNgrxService, - private store: Store, - private cd: ChangeDetectorRef + private _changeDetectorRef: ChangeDetectorRef, + private _mailNgrxService: MailNgrxService, + private _store: Store ) { - this.labels$ = this.store.select(fromStore.getLabelsArr); - this.selectedMailIds$ = this.store.select(fromStore.getSelectedMailIds); + this.labels$ = this._store.pipe(select(fromStore.getLabelsArr)); + this.selectedMailIds$ = this._store.pipe(select(fromStore.getSelectedMailIds)); this.selected = false; } - ngOnInit() + // ----------------------------------------------------------------------------------------------------- + // @ Lifecycle hooks + // ----------------------------------------------------------------------------------------------------- + + ngOnInit(): void { // Set the initial values this.mail = new Mail(this.mail); @@ -44,13 +55,17 @@ export class MailNgrxListItemComponent implements OnInit }); } - refresh() + // ----------------------------------------------------------------------------------------------------- + // @ Public methods + // ----------------------------------------------------------------------------------------------------- + + refresh(): void { - this.cd.markForCheck(); + this._changeDetectorRef.markForCheck(); } - onSelectedChange() + onSelectedChange(): void { - this.store.dispatch(new fromStore.ToggleInSelectedMails(this.mail.id)); + this._store.dispatch(new fromStore.ToggleInSelectedMails(this.mail.id)); } } diff --git a/src/app/main/apps/mail-ngrx/mail.component.html b/src/app/main/apps/mail-ngrx/mail.component.html index edb747a1..9b1fd4dd 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.html +++ b/src/app/main/apps/mail-ngrx/mail.component.html @@ -95,7 +95,7 @@
- +
diff --git a/src/app/main/apps/mail-ngrx/mail.component.ts b/src/app/main/apps/mail-ngrx/mail.component.ts index 31debdae..9a8e078a 100644 --- a/src/app/main/apps/mail-ngrx/mail.component.ts +++ b/src/app/main/apps/mail-ngrx/mail.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { FormControl } from '@angular/forms'; -import { Store } from '@ngrx/store'; +import { select, Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; @@ -55,12 +55,12 @@ export class MailNgrxComponent implements OnInit, OnDestroy // Set the defaults this.searchInput = new FormControl(''); this._fuseTranslationLoaderService.loadTranslations(english, turkish); - this.currentMail$ = this._store.select(fromStore.getCurrentMail); - this.mails$ = this._store.select(fromStore.getMailsArr); - this.folders$ = this._store.select(fromStore.getFoldersArr); - this.labels$ = this._store.select(fromStore.getLabelsArr); - this.selectedMailIds$ = this._store.select(fromStore.getSelectedMailIds); - this.searchText$ = this._store.select(fromStore.getSearchText); + this.currentMail$ = this._store.pipe(select(fromStore.getCurrentMail)); + this.mails$ = this._store.pipe(select(fromStore.getMailsArr)); + this.folders$ = this._store.pipe(select(fromStore.getFoldersArr)); + this.labels$ = this._store.pipe(select(fromStore.getLabelsArr)); + this.selectedMailIds$ = this._store.pipe(select(fromStore.getSelectedMailIds)); + this.searchText$ = this._store.pipe(select(fromStore.getSearchText)); this.mails = []; this.selectedMailIds = []; } diff --git a/src/app/main/apps/mail-ngrx/mail.module.ts b/src/app/main/apps/mail-ngrx/mail.module.ts index 76474bbc..f713451c 100644 --- a/src/app/main/apps/mail-ngrx/mail.module.ts +++ b/src/app/main/apps/mail-ngrx/mail.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatToolbarModule } from '@angular/material'; +import { + MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatToolbarModule +} from '@angular/material'; import { TranslateModule } from '@ngx-translate/core'; import { FuseSharedModule } from '@fuse/shared.module'; diff --git a/src/app/main/apps/mail-ngrx/mail.service.ts b/src/app/main/apps/mail-ngrx/mail.service.ts index ec1a6aad..ec366c8b 100644 --- a/src/app/main/apps/mail-ngrx/mail.service.ts +++ b/src/app/main/apps/mail-ngrx/mail.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { Store } from '@ngrx/store'; +import { select, Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { Mail } from 'app/main/apps/mail-ngrx/mail.model'; @@ -27,21 +27,29 @@ export class MailNgrxService private _store: Store ) { - this._store.select(getFoldersArr).subscribe(folders => { - this.foldersArr = folders; - }); + this._store + .pipe(select(getFoldersArr)) + .subscribe(folders => { + this.foldersArr = folders; + }); - this._store.select(getFiltersArr).subscribe(filters => { - this.filtersArr = filters; - }); + this._store + .pipe(select(getFiltersArr)) + .subscribe(filters => { + this.filtersArr = filters; + }); - this._store.select(getLabelsArr).subscribe(labels => { - this.labelsArr = labels; - }); + this._store + .pipe(select(getLabelsArr)) + .subscribe(labels => { + this.labelsArr = labels; + }); - this._store.select(getMailsArr).subscribe(mails => { - this.mails = mails; - }); + this._store + .pipe(select(getMailsArr)) + .subscribe(mails => { + this.mails = mails; + }); this.selectedMails = []; } diff --git a/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts index d5a79929..d74bee68 100644 --- a/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts +++ b/src/app/main/apps/mail-ngrx/sidebars/main/main-sidebar.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; import { MatDialog } from '@angular/material'; import { FormGroup } from '@angular/forms'; -import { Store } from '@ngrx/store'; +import { select, Store } from '@ngrx/store'; import { Observable } from 'rxjs'; import { MailNgrxService } from 'app/main/apps/mail-ngrx/mail.service'; @@ -45,9 +45,9 @@ export class MailNgrxMainSidebarComponent 'withinpixels': 'johndoe@withinpixels.com' }; this.selectedAccount = 'creapond'; - this.folders$ = this._store.select(fromStore.getFoldersArr); - this.filters$ = this._store.select(fromStore.getFiltersArr); - this.labels$ = this._store.select(fromStore.getLabelsArr); + this.folders$ = this._store.pipe(select(fromStore.getFoldersArr)); + this.filters$ = this._store.pipe(select(fromStore.getFiltersArr)); + this.labels$ = this._store.pipe(select(fromStore.getLabelsArr)); } // ----------------------------------------------------------------------------------------------------- diff --git a/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts index 2d3832b4..44f699d7 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/filters.effects.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { Actions, Effect } from '@ngrx/effects'; +import { Actions, Effect, ofType } from '@ngrx/effects'; import { Observable, of } from 'rxjs'; import { catchError, map, switchMap } from 'rxjs/operators'; @@ -24,8 +24,8 @@ export class FiltersEffect @Effect() getFilters: Observable = this.actions - .ofType(FiltersActions.GET_FILTERS) .pipe( + ofType(FiltersActions.GET_FILTERS), switchMap((action) => { return this.mailService.getFilters() .pipe( diff --git a/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts index aad0cdf1..c3234b6f 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/folders.effects.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { Actions, Effect } from '@ngrx/effects'; +import { Actions, Effect, ofType } from '@ngrx/effects'; import { Observable, of } from 'rxjs'; import { catchError, map, switchMap } from 'rxjs/operators'; @@ -24,8 +24,8 @@ export class FoldersEffect @Effect() getFolders: Observable = this.actions - .ofType(FoldersActions.GET_FOLDERS) .pipe( + ofType(FoldersActions.GET_FOLDERS), switchMap((action) => { return this.mailService.getFolders() .pipe( diff --git a/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts index 7f12bf28..4ae88e11 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/labels.effects.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { Actions, Effect } from '@ngrx/effects'; +import { Actions, Effect, ofType } from '@ngrx/effects'; import { Observable, of } from 'rxjs'; import { catchError, map, switchMap } from 'rxjs/operators'; @@ -24,8 +24,8 @@ export class LabelsEffect @Effect() getLabels: Observable = this.actions - .ofType(LabelsActions.GET_LABELS) .pipe( + ofType(LabelsActions.GET_LABELS), switchMap((action) => { return this.mailService.getLabels() .pipe( diff --git a/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts index 66c9ccc1..e062e17f 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { Action, Store } from '@ngrx/store'; -import { Actions, Effect } from '@ngrx/effects'; +import { Actions, Effect, ofType } from '@ngrx/effects'; import { Observable, of, forkJoin } from 'rxjs'; import { catchError, debounceTime, map, mergeMap, exhaustMap, withLatestFrom } from 'rxjs/operators'; @@ -39,8 +39,8 @@ export class MailsEffect @Effect() getMails: Observable = this.actions - .ofType(MailsActions.GET_MAILS) .pipe( + ofType(MailsActions.GET_MAILS), exhaustMap((action) => { let handle = { @@ -80,8 +80,8 @@ export class MailsEffect @Effect() updateMail: Observable = this.actions - .ofType(MailsActions.UPDATE_MAIL) .pipe( + ofType(MailsActions.UPDATE_MAIL), exhaustMap((action) => { return this.mailService.updateMail(action.payload).pipe( map(() => { @@ -98,8 +98,8 @@ export class MailsEffect @Effect() updateMails: Observable = this.actions - .ofType(MailsActions.UPDATE_MAILS) .pipe( + ofType(MailsActions.UPDATE_MAILS), exhaustMap((action) => { return forkJoin( action.payload.map(mail => this.mailService.updateMail(mail)), @@ -116,8 +116,8 @@ export class MailsEffect @Effect() setCurrentMail: Observable = this.actions - .ofType(MailsActions.SET_CURRENT_MAIL) .pipe( + ofType(MailsActions.SET_CURRENT_MAIL), withLatestFrom(this.store.select(getMailsState)), map(([action, state]) => { return new MailsActions.SetCurrentMailSuccess(state.entities[action.payload]); @@ -133,8 +133,8 @@ export class MailsEffect @Effect() checkCurrentMail: Observable = this.actions - .ofType(MailsActions.CHECK_CURRENT_MAIL) .pipe( + ofType(MailsActions.CHECK_CURRENT_MAIL), withLatestFrom(this.store.select(getMailsState)), map(([action, state]) => { @@ -153,8 +153,8 @@ export class MailsEffect @Effect() getMailsSuccess: Observable = this.actions - .ofType(MailsActions.GET_MAILS_SUCCESS) .pipe( + ofType(MailsActions.GET_MAILS_SUCCESS), mergeMap(() => [ new MailsActions.CheckCurrentMail() @@ -167,8 +167,8 @@ export class MailsEffect @Effect() updateMailsSuccess: Observable = this.actions - .ofType(MailsActions.UPDATE_MAILS_SUCCESS) .pipe( + ofType(MailsActions.UPDATE_MAILS_SUCCESS), mergeMap(() => [ new MailsActions.DeselectAllMails(), @@ -182,8 +182,8 @@ export class MailsEffect @Effect() updateMailSuccess: Observable = this.actions - .ofType(MailsActions.UPDATE_MAIL_SUCCESS) .pipe( + ofType(MailsActions.UPDATE_MAIL_SUCCESS), debounceTime(500), map(() => { return new MailsActions.GetMails(); @@ -197,8 +197,8 @@ export class MailsEffect @Effect() setFolderOnSelectedMails: Observable = this.actions - .ofType(MailsActions.SET_FOLDER_ON_SELECTED_MAILS) .pipe( + ofType(MailsActions.SET_FOLDER_ON_SELECTED_MAILS), withLatestFrom( this.store.select(getMailsState)), map(([action, state]) => { @@ -225,8 +225,8 @@ export class MailsEffect @Effect() addLabelOnSelectedMails: Observable = this.actions - .ofType(MailsActions.ADD_LABEL_ON_SELECTED_MAILS) .pipe( + ofType(MailsActions.ADD_LABEL_ON_SELECTED_MAILS), withLatestFrom(this.store.select(getMailsState)), map(([action, state]) => { diff --git a/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts b/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts index a563cd62..5677a600 100644 --- a/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts +++ b/src/app/main/apps/mail-ngrx/store/guards/resolve.guard.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate } from '@angular/router'; import { RouterStateSnapshot } from '@angular/router/src/router_state'; -import { Store } from '@ngrx/store'; +import { select, Store } from '@ngrx/store'; import { Observable, forkJoin, of } from 'rxjs'; import { map, switchMap, catchError, tap, take, filter } from 'rxjs/operators'; @@ -25,12 +25,14 @@ export class ResolveGuard implements CanActivate private _store: Store ) { - this._store.select(getRouterState).subscribe(routerState => { - if ( routerState ) - { - this.routerState = routerState.state; - } - }); + this._store + .pipe(select(getRouterState)) + .subscribe(routerState => { + if ( routerState ) + { + this.routerState = routerState.state; + } + }); } /** @@ -59,16 +61,15 @@ export class ResolveGuard implements CanActivate this.getFolders(), this.getFilters(), this.getLabels() - ) - .pipe( - filter(([foldersLoaded, filtersLoaded, labelsLoaded]) => !!(foldersLoaded && filtersLoaded && labelsLoaded)), - take(1), - switchMap(() => - this.getMails() - ), - take(1), - map(() => this._store.dispatch(new fromStore.SetCurrentMail(this.routerState.params.mailId))) - ); + ).pipe( + filter(([foldersLoaded, filtersLoaded, labelsLoaded]) => !!(foldersLoaded && filtersLoaded && labelsLoaded)), + take(1), + switchMap(() => + this.getMails() + ), + take(1), + map(() => this._store.dispatch(new fromStore.SetCurrentMail(this.routerState.params.mailId))) + ); } /** @@ -78,17 +79,17 @@ export class ResolveGuard implements CanActivate */ getFolders(): any { - return this._store.select(getFoldersLoaded) - .pipe( - tap(loaded => { - if ( !loaded ) - { - this._store.dispatch(new fromStore.GetFolders([])); - } - }), - filter(loaded => loaded), - take(1) - ); + return this._store.pipe( + select(getFoldersLoaded), + tap(loaded => { + if ( !loaded ) + { + this._store.dispatch(new fromStore.GetFolders([])); + } + }), + filter(loaded => loaded), + take(1) + ); } /** @@ -98,17 +99,17 @@ export class ResolveGuard implements CanActivate */ getFilters(): any { - return this._store.select(getFiltersLoaded) - .pipe( - tap(loaded => { - if ( !loaded ) - { - this._store.dispatch(new fromStore.GetFilters([])); - } - }), - filter(loaded => loaded), - take(1) - ); + return this._store.pipe( + select(getFiltersLoaded), + tap(loaded => { + if ( !loaded ) + { + this._store.dispatch(new fromStore.GetFilters([])); + } + }), + filter(loaded => loaded), + take(1) + ); } /** @@ -117,17 +118,17 @@ export class ResolveGuard implements CanActivate */ getLabels(): any { - return this._store.select(getLabelsLoaded) - .pipe( - tap(loaded => { - if ( !loaded ) - { - this._store.dispatch(new fromStore.GetLabels([])); - } - }), - filter(loaded => loaded), - take(1) - ); + return this._store.pipe( + select(getLabelsLoaded), + tap(loaded => { + if ( !loaded ) + { + this._store.dispatch(new fromStore.GetLabels([])); + } + }), + filter(loaded => loaded), + take(1) + ); } /** @@ -137,21 +138,21 @@ export class ResolveGuard implements CanActivate */ getMails(): any { - return this._store.select(getMailsLoaded) - .pipe( - tap((loaded: any) => { + return this._store.pipe( + select(getMailsLoaded), + tap((loaded: any) => { - if ( !this.routerState.params[loaded.id] || this.routerState.params[loaded.id] !== loaded.value ) - { - this._store.dispatch(new fromStore.GetMails()); - this._store.dispatch(new fromStore.SetSearchText('')); - this._store.dispatch(new fromStore.DeselectAllMails()); - } - }), - filter((loaded: any) => { - return this.routerState.params[loaded.id] && this.routerState.params[loaded.id] === loaded.value; - }), - take(1) - ); + if ( !this.routerState.params[loaded.id] || this.routerState.params[loaded.id] !== loaded.value ) + { + this._store.dispatch(new fromStore.GetMails()); + this._store.dispatch(new fromStore.SetSearchText('')); + this._store.dispatch(new fromStore.DeselectAllMails()); + } + }), + filter((loaded: any) => { + return this.routerState.params[loaded.id] && this.routerState.params[loaded.id] === loaded.value; + }), + take(1) + ); } } diff --git a/src/app/main/apps/mail/mail.model.ts b/src/app/main/apps/mail/mail.model.ts index 7b36a600..6e254ad4 100644 --- a/src/app/main/apps/mail/mail.model.ts +++ b/src/app/main/apps/mail/mail.model.ts @@ -49,12 +49,18 @@ export class Mail this.folder = mail.folder; } - toggleStar() + /** + * Toggle star + */ + toggleStar(): void { this.starred = !this.starred; } - toggleImportant() + /** + * Toggle important + */ + toggleImportant(): void { this.important = !this.important; } diff --git a/src/app/main/apps/mail/mail.module.ts b/src/app/main/apps/mail/mail.module.ts index cc387f73..44fec742 100644 --- a/src/app/main/apps/mail/mail.module.ts +++ b/src/app/main/apps/mail/mail.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatToolbarModule } from '@angular/material'; +import { + MatButtonModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule, MatToolbarModule +} from '@angular/material'; import { TranslateModule } from '@ngx-translate/core'; import { FuseSharedModule } from '@fuse/shared.module'; diff --git a/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts b/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts index 791cbd19..bc1ef62e 100644 --- a/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts +++ b/src/app/main/apps/scrumboard/board/add-list/add-list.component.ts @@ -13,7 +13,7 @@ export class ScrumboardBoardAddListComponent form: FormGroup; @Output() - onListAdd: EventEmitter; + listAdded: EventEmitter; @ViewChild('nameInput') nameInputField; @@ -29,7 +29,7 @@ export class ScrumboardBoardAddListComponent { // Set the defaults this.formActive = false; - this.onListAdd = new EventEmitter(); + this.listAdded = new EventEmitter(); } // ----------------------------------------------------------------------------------------------------- @@ -73,7 +73,7 @@ export class ScrumboardBoardAddListComponent { if ( this.form.valid ) { - this.onListAdd.next(this.form.getRawValue().name); + this.listAdded.next(this.form.getRawValue().name); this.formActive = false; } } diff --git a/src/app/main/apps/scrumboard/board/board.component.html b/src/app/main/apps/scrumboard/board/board.component.html index cd9824e3..7ba54507 100644 --- a/src/app/main/apps/scrumboard/board/board.component.html +++ b/src/app/main/apps/scrumboard/board/board.component.html @@ -28,7 +28,7 @@ remove_red_eye + (boardNameChanged)="onBoardNameChanged($event)">
@@ -69,7 +69,7 @@ - diff --git a/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html index 2a0c4a1c..709be403 100644 --- a/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html +++ b/src/app/main/apps/scrumboard/board/dialogs/card/card.component.html @@ -36,7 +36,7 @@ + (cardLabelsChanged)="updateCard()">
diff --git a/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html index 5ce19f9f..44dc23b1 100644 --- a/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html +++ b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html @@ -18,7 +18,7 @@ + (change)="toggleInArray(label.id, card.idLabels);onCardLabelsChanged()"> {{label.name}} diff --git a/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts index 946e0404..f09d1eae 100644 --- a/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts +++ b/src/app/main/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.ts @@ -21,7 +21,7 @@ export class ScrumboardLabelSelectorComponent implements OnInit, OnDestroy card: any; @Output() - onCardLabelsChange: EventEmitter; + cardLabelsChanged: EventEmitter; board: any; labelsMenuView: string; @@ -42,7 +42,7 @@ export class ScrumboardLabelSelectorComponent implements OnInit, OnDestroy ) { // Set the defaults - this.onCardLabelsChange = new EventEmitter(); + this.cardLabelsChanged = new EventEmitter(); this.labelsMenuView = 'labels'; this.newLabel = { 'id' : '', @@ -88,9 +88,9 @@ export class ScrumboardLabelSelectorComponent implements OnInit, OnDestroy /** * Card labels changed */ - cardLabelsChanged(): void + onCardLabelsChanged(): void { - this.onCardLabelsChange.next(); + this.cardLabelsChanged.next(); } /** diff --git a/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts b/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts index e781594f..c19be935 100644 --- a/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts +++ b/src/app/main/apps/scrumboard/board/edit-board-name/edit-board-name.component.ts @@ -16,7 +16,7 @@ export class ScrumboardEditBoardNameComponent board; @Output() - onNameChanged: EventEmitter; + boardNameChanged: EventEmitter; @ViewChild('nameInput') nameInputField; @@ -27,7 +27,7 @@ export class ScrumboardEditBoardNameComponent { // Set the defaults this.formActive = false; - this.onNameChanged = new EventEmitter(); + this.boardNameChanged = new EventEmitter(); } // ----------------------------------------------------------------------------------------------------- @@ -74,7 +74,7 @@ export class ScrumboardEditBoardNameComponent this.board.name = this.form.getRawValue().name; this.board.uri = encodeURIComponent(this.board.name).replace(/%20/g, '-').toLowerCase(); - this.onNameChanged.next(this.board.name); + this.boardNameChanged.next(this.board.name); this.formActive = false; } } diff --git a/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts b/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts index 8196bddb..7983b31d 100644 --- a/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts +++ b/src/app/main/apps/scrumboard/board/list/add-card/add-card.component.ts @@ -13,7 +13,7 @@ export class ScrumboardBoardAddCardComponent form: FormGroup; @Output() - onCardAdd: EventEmitter; + cardAdded: EventEmitter; @ViewChild('nameInput') nameInputField; @@ -29,7 +29,7 @@ export class ScrumboardBoardAddCardComponent { // Set the defaults this.formActive = false; - this.onCardAdd = new EventEmitter(); + this.cardAdded = new EventEmitter(); } // ----------------------------------------------------------------------------------------------------- @@ -74,7 +74,7 @@ export class ScrumboardBoardAddCardComponent if ( this.form.valid ) { const cardName = this.form.getRawValue().name; - this.onCardAdd.next(cardName); + this.cardAdded.next(cardName); this.formActive = false; } } diff --git a/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts b/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts index 136945ef..85bf9d74 100644 --- a/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts +++ b/src/app/main/apps/scrumboard/board/list/edit-list-name/edit-list-name.component.ts @@ -16,7 +16,7 @@ export class ScrumboardBoardEditListNameComponent list; @Output() - onNameChanged: EventEmitter; + listNameChanged: EventEmitter; @ViewChild('nameInput') nameInputField; @@ -32,7 +32,7 @@ export class ScrumboardBoardEditListNameComponent { // Set the defaults this.formActive = false; - this.onNameChanged = new EventEmitter(); + this.listNameChanged = new EventEmitter(); } // ----------------------------------------------------------------------------------------------------- @@ -77,7 +77,7 @@ export class ScrumboardBoardEditListNameComponent if ( this.form.valid ) { this.list.name = this.form.getRawValue().name; - this.onNameChanged.next(this.list.name); + this.listNameChanged.next(this.list.name); this.formActive = false; } } diff --git a/src/app/main/apps/scrumboard/board/list/list.component.html b/src/app/main/apps/scrumboard/board/list/list.component.html index 33324778..733e9789 100644 --- a/src/app/main/apps/scrumboard/board/list/list.component.html +++ b/src/app/main/apps/scrumboard/board/list/list.component.html @@ -6,7 +6,7 @@ + (listNameChanged)="onListNameChanged($event)">
@@ -40,8 +40,7 @@
- - +
diff --git a/src/app/main/apps/scrumboard/scrumboard.module.ts b/src/app/main/apps/scrumboard/scrumboard.module.ts index eba8e392..7cf57e28 100644 --- a/src/app/main/apps/scrumboard/scrumboard.module.ts +++ b/src/app/main/apps/scrumboard/scrumboard.module.ts @@ -1,6 +1,9 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatRippleModule, MatSidenavModule, MatToolbarModule, MatTooltipModule } from '@angular/material'; +import { + MatButtonModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, + MatProgressBarModule, MatRippleModule, MatSidenavModule, MatToolbarModule, MatTooltipModule +} from '@angular/material'; import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { FuseSharedModule } from '@fuse/shared.module'; diff --git a/src/app/main/apps/todo/todo.module.ts b/src/app/main/apps/todo/todo.module.ts index 6930fa7e..e21a9fcf 100644 --- a/src/app/main/apps/todo/todo.module.ts +++ b/src/app/main/apps/todo/todo.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule } from '@angular/material'; +import { + MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatSelectModule +} from '@angular/material'; import { NgxDnDModule } from '@swimlane/ngx-dnd'; import { FuseSharedModule } from '@fuse/shared.module'; diff --git a/src/app/main/documentation/changelog/changelog.component.html b/src/app/main/documentation/changelog/changelog.component.html index ed16334b..ed01b22b 100644 --- a/src/app/main/documentation/changelog/changelog.component.html +++ b/src/app/main/documentation/changelog/changelog.component.html @@ -50,6 +50,7 @@
  • Updated various other packages
  • Dark color theme
  • Easier way of working multiple Angular Material color themes
    • +
  • Various performance optimizations
    • @@ -64,7 +65,12 @@ happen
  • (Layouts) "transform: translateZ(0)" causes "position: fixed" to break
    • +
  • (Layouts) Some layouts are not working correctly on IE11
  • (Contacts) _matDialogRef is not defined
    • +
  • + (FuseConfig) Resetting the config on lazily loaded routes causes the layout items to + show/hide before the actual content loads +
    • diff --git a/src/app/main/documentation/components/components.module.ts b/src/app/main/documentation/components/components.module.ts index 2c6c03e8..50b9bef8 100644 --- a/src/app/main/documentation/components/components.module.ts +++ b/src/app/main/documentation/components/components.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatListModule, MatMenuModule, MatSelectModule, MatSlideToggleModule, MatTabsModule } from '@angular/material'; +import { + MatButtonModule, MatButtonToggleModule, MatFormFieldModule, MatIconModule, MatListModule, MatMenuModule, MatSelectModule, MatSlideToggleModule, MatTabsModule +} from '@angular/material'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { FuseSharedModule } from '@fuse/shared.module'; diff --git a/src/app/store/effects/router.effect.ts b/src/app/store/effects/router.effect.ts index a9cbf25e..ad3d9546 100644 --- a/src/app/store/effects/router.effect.ts +++ b/src/app/store/effects/router.effect.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import { Location } from '@angular/common'; -import { Effect, Actions } from '@ngrx/effects'; +import { Effect, Actions, ofType } from '@ngrx/effects'; import { tap, map } from 'rxjs/operators'; import * as RouterActions from 'app/store/actions/router.action'; @@ -28,7 +28,8 @@ export class RouterEffects * Navigate */ @Effect({dispatch: false}) - navigate$ = this.actions$.ofType(RouterActions.GO).pipe( + navigate$ = this.actions$.pipe( + ofType(RouterActions.GO), map((action: RouterActions.Go) => action.payload), tap(({path, query: queryParams, extras}) => { this.router.navigate(path, {queryParams, ...extras}); @@ -40,16 +41,18 @@ export class RouterEffects * @type {Observable} */ @Effect({dispatch: false}) - navigateBack$ = this.actions$ - .ofType(RouterActions.BACK) - .pipe(tap(() => this.location.back())); + navigateBack$ = this.actions$.pipe( + ofType(RouterActions.BACK), + tap(() => this.location.back()) + ); /** * Navigate forward * @type {Observable} */ @Effect({dispatch: false}) - navigateForward$ = this.actions$ - .ofType(RouterActions.FORWARD) - .pipe(tap(() => this.location.forward())); + navigateForward$ = this.actions$.pipe( + ofType(RouterActions.FORWARD), + tap(() => this.location.forward()) + ); } From 8b97e6623b87ca0b09c9d1a34ab14525b1c0aa96 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 28 Aug 2018 07:15:58 +0300 Subject: [PATCH 14/19] (ExampleViewer) Updated style and theming compatibility --- src/app/app.theme.scss | 4 +++ .../example-viewer/example-viewer.scss | 7 +++-- .../example-viewer/example-viewer.theme.scss | 27 +++++++++++++++++++ 3 files changed, 34 insertions(+), 4 deletions(-) create mode 100644 src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss diff --git a/src/app/app.theme.scss b/src/app/app.theme.scss index 8025cabe..32628c7f 100644 --- a/src/app/app.theme.scss +++ b/src/app/app.theme.scss @@ -113,6 +113,8 @@ $typography: mat-typography-config( @import "src/app/main/documentation/components/cards/cards.theme"; +@import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme"; + // Define a mixin for easier access @mixin components-theme($theme) { @@ -159,6 +161,8 @@ $typography: mat-typography-config( // Docs @include docs-components-cards-theme($theme); + // Example Viewer + @include example-viewer-theme($theme); } // ----------------------------------------------------------------------------------------------------- diff --git a/src/app/main/angular-material-elements/example-viewer/example-viewer.scss b/src/app/main/angular-material-elements/example-viewer/example-viewer.scss index 4bd5cf38..b45baaec 100644 --- a/src/app/main/angular-material-elements/example-viewer/example-viewer.scss +++ b/src/app/main/angular-material-elements/example-viewer/example-viewer.scss @@ -5,9 +5,9 @@ example-viewer { padding: 24px 0; .example-viewer-wrapper { - //border: 1px solid rgba(mat-color($foreground, secondary-text), .03); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12); margin: 4px; + h3 { margin-top: 10px; } @@ -19,9 +19,8 @@ example-viewer { display: flex; justify-content: center; padding: 8px 20px; - //color: mat-color($foreground, secondary-text); - //background: rgba(mat-color($foreground, secondary-text), .03); flex: 1 1 auto; + border-bottom: 1px solid; .example-viewer-title { flex: 1 1 auto; @@ -58,7 +57,7 @@ example-viewer { padding: 0; margin: 0; min-height: 150px; - //border-bottom: 1px solid mat-color($foreground, divider); + border-bottom: 1px solid; > pre { width: 100%; diff --git a/src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss b/src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss new file mode 100644 index 00000000..a1f904f6 --- /dev/null +++ b/src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss @@ -0,0 +1,27 @@ +@mixin example-viewer-theme($theme) { + + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + + example-viewer { + + .example-viewer-header { + color: map-get($foreground, secondary-text); + background: map-get($background, app-bar); + border-bottom-color: map-get($foreground, divider); + } + + .example-viewer-source { + + .tab-content { + + .tab { + + .example-source { + border-bottom-color: map-get($foreground, divider); + } + } + } + } + } +} From 8fc20fef8f73e1907dcfc689679f8d9cddb6efe1 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 28 Aug 2018 07:44:05 +0300 Subject: [PATCH 15/19] Example viewer style tweaks --- .../angular-material-elements/example-viewer/example-viewer.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/main/angular-material-elements/example-viewer/example-viewer.scss b/src/app/main/angular-material-elements/example-viewer/example-viewer.scss index b45baaec..c15d7062 100644 --- a/src/app/main/angular-material-elements/example-viewer/example-viewer.scss +++ b/src/app/main/angular-material-elements/example-viewer/example-viewer.scss @@ -7,6 +7,7 @@ example-viewer { .example-viewer-wrapper { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12); margin: 4px; + padding: 0; h3 { margin-top: 10px; From 62b64cb78c6757426bb36a6be7b7b7c9a86635dd Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 28 Aug 2018 07:53:09 +0300 Subject: [PATCH 16/19] Updated Angular Material element examples --- ...lete-auto-active-first-option-example.html | 2 +- ...mplete-auto-active-first-option-example.ts | 15 ++- .../autocomplete-display-example.html | 2 +- .../autocomplete-display-example.ts | 29 ++-- .../autocomplete-filter-example.html | 2 +- .../autocomplete-filter-example.ts | 23 ++-- .../autocomplete-optgroup-example.html | 8 +- .../autocomplete-optgroup-example.ts | 23 ++-- .../autocomplete-overview-example.css | 10 ++ .../autocomplete-overview-example.html | 6 +- .../autocomplete-overview-example.ts | 24 ++-- .../autocomplete-simple-example.html | 2 +- .../autocomplete-simple-example.ts | 13 +- .../badge-overview/badge-overview-example.ts | 5 +- .../button-types/button-types-example.css | 7 +- .../button-types/button-types-example.html | 22 ++- .../cdk-table-basic-flex-example.ts | 30 ++--- .../cdk-table-basic-example.ts | 28 ++-- .../cdk-tree-flat/cdk-tree-flat-example.css | 2 +- .../cdk-tree-flat/cdk-tree-flat-example.html | 4 +- .../cdk-tree-flat/cdk-tree-flat-example.ts | 125 ++++++++--------- .../cdk-tree-nested-example.ts | 102 +++++++------- .../chips-autocomplete-example.css | 2 +- .../chips-autocomplete-example.html | 7 +- .../chips-autocomplete-example.ts | 46 +++---- .../chips-input/chips-input-example.css | 2 +- .../chips-input/chips-input-example.html | 4 +- .../chips-input/chips-input-example.ts | 40 +++--- .../chips-overview-example.html | 4 +- .../chips-stacked/chips-stacked-example.html | 2 +- .../chips-stacked/chips-stacked-example.ts | 18 ++- .../datepicker-custom-header-example.ts | 9 +- .../datepicker-touch-example.html | 2 +- .../datepicker-views-selection-example.ts | 3 +- .../dialog-content-example-dialog.html | 77 ++++++++--- .../dialog-content/dialog-content-example.ts | 4 +- .../dialog-data/dialog-data-example.ts | 8 +- .../dialog-elements-example.ts | 4 +- .../dialog-overview-example.ts | 11 +- ...expansion-expand-collapse-all-example.html | 99 +++++++------- .../expansion-expand-collapse-all-example.ts | 2 +- .../expansion-overview-example.ts | 2 +- .../expansion-steps-example.html | 6 +- .../expansion-steps-example.ts | 2 +- .../focus-monitor-directives-example.ts | 4 +- .../focus-monitor-focus-via-example.ts | 2 +- .../focus-monitor-overview-example.ts | 4 +- .../form-field-appearance-example.ts | 2 +- .../form-field-custom-control-example.ts | 53 ++++---- .../form-field-error-example.ts | 2 +- .../form-field-hint-example.ts | 2 +- .../form-field-label-example.ts | 2 +- .../form-field-overview-example.ts | 2 +- .../form-field-prefix-suffix-example.ts | 2 +- .../form-field-theming-example.ts | 6 +- .../grid-list-dynamic-example.ts | 9 +- .../icon-overview/icon-overview-example.ts | 2 +- .../input-clearable-example.html | 2 +- .../list-sections/list-sections-example.ts | 9 +- .../list-selection/list-selection-example.ts | 2 +- .../nested-menu/nested-menu-example.ts | 2 +- .../paginator-configurable-example.ts | 2 +- .../progress-bar-configurable-example.html | 4 +- ...progress-spinner-configurable-example.html | 2 +- .../radio-ng-model/radio-ng-model-example.ts | 8 +- .../select-custom-trigger-example.html | 2 +- .../select-custom-trigger-example.ts | 2 +- .../select-form/select-form-example.ts | 7 +- .../select-hint-error-example.ts | 8 +- .../select-multiple-example.ts | 3 +- .../select-optgroup-example.html | 2 +- .../select-optgroup-example.ts | 36 +++-- .../select-overview-example.html | 2 +- .../select-overview-example.ts | 7 +- .../select-panel-class-example.ts | 2 + .../select-reset/select-reset-example.ts | 2 +- .../sidenav-drawer-overview-example.html | 2 +- .../sidenav-fixed/sidenav-fixed-example.html | 2 +- .../sidenav-fixed/sidenav-fixed-example.ts | 6 +- .../sidenav-mode/sidenav-mode-example.ts | 1 - .../sidenav-responsive-example.ts | 4 +- .../slide-toggle-forms-example.html | 8 +- .../slide-toggle-forms-example.ts | 4 +- .../slider-configurable-example.ts | 8 +- .../snack-bar-component-example.ts | 6 +- .../sort-overview/sort-overview-example.ts | 34 +++-- .../stepper-editable-example.html | 2 +- .../stepper-editable-example.ts | 4 +- .../stepper-optional-example.html | 2 +- .../stepper-optional-example.ts | 4 +- .../stepper-overview-example.ts | 4 +- .../stepper-vertical-example.ts | 2 +- .../tab-group-dynamic-example.ts | 2 +- .../tab-nav-bar-basic-example.html | 2 +- .../table-basic-flex-example.ts | 26 ++-- .../table-basic/table-basic-example.ts | 26 ++-- .../table-dynamic-columns-example.html | 2 +- .../table-dynamic-columns-example.ts | 48 +++---- .../table-filtering-example.ts | 36 +++-- .../table-footer-row-example.ts | 2 +- .../table-http/table-http-example.html | 10 +- .../table-http/table-http-example.ts | 2 +- .../table-multiple-header-footer-example.ts | 2 +- .../table-overview/table-overview-example.ts | 38 +++--- .../table-pagination-example.ts | 2 +- .../table-row-context-example.ts | 2 +- .../table-selection-example.ts | 58 ++++---- .../table-sorting/table-sorting-example.ts | 38 +++--- .../table-sticky-footer-example.html | 4 +- .../tooltip-custom-class-example.ts | 2 +- .../tooltip-position-example.html | 2 +- .../tree-checklist/tree-checklist-example.ts | 91 ++++++------- .../tree-dynamic/tree-dynamic-example.ts | 30 ++--- .../tree-flat-overview-example.ts | 127 ++++++++---------- .../tree-loadmore/tree-loadmore-example.ts | 49 ++++--- .../tree-nested-overview-example.ts | 104 +++++++------- 116 files changed, 934 insertions(+), 898 deletions(-) diff --git a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html index 45090946..50dd982f 100755 --- a/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html +++ b/src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html @@ -3,7 +3,7 @@ - {{ option }} + {{option}} 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 3a5adb69..f510c8d2 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 @@ -9,22 +9,23 @@ import {map, startWith} from 'rxjs/operators'; @Component({ selector: 'autocomplete-auto-active-first-option-example', templateUrl: 'autocomplete-auto-active-first-option-example.html', - styleUrls: ['autocomplete-auto-active-first-option-example.css'] + styleUrls: ['autocomplete-auto-active-first-option-example.css'], }) export class AutocompleteAutoActiveFirstOptionExample implements OnInit { - myControl: FormControl = new FormControl(); - options = ['One', 'Two', 'Three']; + myControl = new FormControl(); + options: string[] = ['One', 'Two', 'Three']; filteredOptions: Observable; ngOnInit() { this.filteredOptions = this.myControl.valueChanges.pipe( startWith(''), - map(val => this.filter(val)) + map(value => this._filter(value)) ); } - filter(val: string): string[] { - return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0); - } + private _filter(value: string): string[] { + const filterValue = value.toLowerCase(); + return this.options.filter(option => option.toLowerCase().indexOf(filterValue) === 0); + } } diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html index 6f7be462..5daac573 100755 --- a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html +++ b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.html @@ -3,7 +3,7 @@ - {{ option.name }} + {{option.name}} diff --git a/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts b/src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts index eb530ade..adf9aa23 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 @@ -3,8 +3,8 @@ import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; -export class User { - constructor(public name: string) { } +export interface User { + name: string; } /** @@ -13,18 +13,15 @@ export class User { @Component({ selector: 'autocomplete-display-example', templateUrl: 'autocomplete-display-example.html', - styleUrls: ['autocomplete-display-example.css'] + styleUrls: ['autocomplete-display-example.css'], }) export class AutocompleteDisplayExample implements OnInit { - myControl = new FormControl(); - - options = [ - new User('Mary'), - new User('Shelley'), - new User('Igor') + options: User[] = [ + {name: 'Mary'}, + {name: 'Shelley'}, + {name: 'Igor'} ]; - filteredOptions: Observable; ngOnInit() { @@ -32,17 +29,17 @@ export class AutocompleteDisplayExample implements OnInit { .pipe( startWith(''), map(value => typeof value === 'string' ? value : value.name), - map(name => name ? this.filter(name) : this.options.slice()) + map(name => name ? this._filter(name) : this.options.slice()) ); } - filter(name: string): User[] { - return this.options.filter(option => - option.name.toLowerCase().indexOf(name.toLowerCase()) === 0); - } - displayFn(user?: User): string | undefined { return user ? user.name : undefined; } + private _filter(name: string): User[] { + const filterValue = name.toLowerCase(); + + return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0); + } } diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html index 3e685d80..3a5aefad 100755 --- a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html +++ b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.html @@ -3,7 +3,7 @@ - {{ option }} + {{option}} diff --git a/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts b/src/assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example.ts index 44f70a68..6425a755 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 @@ -9,31 +9,24 @@ import {map, startWith} from 'rxjs/operators'; @Component({ selector: 'autocomplete-filter-example', templateUrl: 'autocomplete-filter-example.html', - styleUrls: ['autocomplete-filter-example.css'] + styleUrls: ['autocomplete-filter-example.css'], }) export class AutocompleteFilterExample implements OnInit { - - myControl: FormControl = new FormControl(); - - options = [ - 'One', - 'Two', - 'Three' - ]; - + myControl = new FormControl(); + options: string[] = ['One', 'Two', 'Three']; filteredOptions: Observable; ngOnInit() { this.filteredOptions = this.myControl.valueChanges .pipe( startWith(''), - map(val => this.filter(val)) + map(value => this._filter(value)) ); } - filter(val: string): string[] { - return this.options.filter(option => - option.toLowerCase().includes(val.toLowerCase())); - } + private _filter(value: string): string[] { + const filterValue = value.toLowerCase(); + return this.options.filter(option => option.toLowerCase().includes(filterValue)); + } } diff --git a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html index 9fe26b24..0d9a4bf8 100755 --- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html +++ b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.html @@ -1,12 +1,12 @@
    - + - {{ name }} + {{name}} - -
    + + diff --git a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts index fd43d54b..75e0e13c 100755 --- a/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts +++ b/src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {FormGroup, FormBuilder} from '@angular/forms'; +import {FormBuilder, FormGroup} from '@angular/forms'; import {Observable} from 'rxjs'; import {startWith, map} from 'rxjs/operators'; @@ -8,6 +8,12 @@ export interface StateGroup { names: string[]; } +export const _filter = (opt: string[], value: string): string[] => { + const filterValue = value.toLowerCase(); + + return opt.filter(item => item.toLowerCase().indexOf(filterValue) === 0); +}; + /** * @title Option groups autocomplete */ @@ -84,28 +90,23 @@ export class AutocompleteOptgroupExample implements OnInit { stateGroupOptions: Observable; - constructor(private fb: FormBuilder) { } + constructor(private fb: FormBuilder) {} ngOnInit() { this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges .pipe( startWith(''), - map(val => this.filterGroup(val)) + map(value => this._filterGroup(value)) ); } - filterGroup(val: string): StateGroup[] { - if (val) { + private _filterGroup(value: string): StateGroup[] { + if (value) { return this.stateGroups - .map(group => ({ letter: group.letter, names: this._filter(group.names, val) })) + .map(group => ({letter: group.letter, names: _filter(group.names, value)})) .filter(group => group.names.length > 0); } return this.stateGroups; } - - private _filter(opt: string[], val: string) { - const filterValue = val.toLowerCase(); - return opt.filter(item => item.toLowerCase().startsWith(filterValue)); - } } diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css index 08fa6753..473fdf92 100755 --- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.css @@ -7,3 +7,13 @@ .example-full-width { width: 100%; } + +.example-option-img { + vertical-align: middle; + margin-right: 8px; +} + +[dir='rtl'] .example-option-img { + margin-right: 0; + margin-left: 8px; +} diff --git a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html index 9b6179e7..09ab07fa 100755 --- a/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html +++ b/src/assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example.html @@ -3,14 +3,14 @@ - - {{ state.name }} | + + {{state.name}} | Population: {{state.population}} -
    +
    ; + stateCtrl = new FormControl(); + filteredStates: Observable; states: State[] = [ { @@ -48,17 +49,16 @@ export class AutocompleteOverviewExample { ]; constructor() { - this.stateCtrl = new FormControl(); this.filteredStates = this.stateCtrl.valueChanges .pipe( startWith(''), - map(state => state ? this.filterStates(state) : this.states.slice()) + map(state => state ? this._filterStates(state) : this.states.slice()) ); } - filterStates(name: string) { - return this.states.filter(state => - state.name.toLowerCase().indexOf(name.toLowerCase()) === 0); - } + private _filterStates(value: string): State[] { + const filterValue = value.toLowerCase(); + return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0); + } } diff --git a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html index 57a30943..cfd6bdf2 100755 --- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.html @@ -3,7 +3,7 @@ - {{ option }} + {{option}} diff --git a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts index c3f1bcb6..94c673db 100755 --- a/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts +++ b/src/assets/angular-material-examples/autocomplete-simple/autocomplete-simple-example.ts @@ -7,16 +7,9 @@ import {FormControl} from '@angular/forms'; @Component({ selector: 'autocomplete-simple-example', templateUrl: 'autocomplete-simple-example.html', - styleUrls: ['autocomplete-simple-example.css'] + styleUrls: ['autocomplete-simple-example.css'], }) export class AutocompleteSimpleExample { - - myControl: FormControl = new FormControl(); - - options = [ - 'One', - 'Two', - 'Three' - ]; - + myControl = new FormControl(); + options: string[] = ['One', 'Two', 'Three']; } diff --git a/src/assets/angular-material-examples/badge-overview/badge-overview-example.ts b/src/assets/angular-material-examples/badge-overview/badge-overview-example.ts index 30ba295e..ff0a597b 100755 --- a/src/assets/angular-material-examples/badge-overview/badge-overview-example.ts +++ b/src/assets/angular-material-examples/badge-overview/badge-overview-example.ts @@ -1,12 +1,11 @@ import {Component} from '@angular/core'; - /** * @title Badge overview */ @Component({ selector: 'badge-overview-example', templateUrl: 'badge-overview-example.html', - styleUrls: ['badge-overview-example.css'] + styleUrls: ['badge-overview-example.css'], }) -export class BadgeOverviewExample { } +export class BadgeOverviewExample {} diff --git a/src/assets/angular-material-examples/button-types/button-types-example.css b/src/assets/angular-material-examples/button-types/button-types-example.css index 9771bda6..d9ce5779 100755 --- a/src/assets/angular-material-examples/button-types/button-types-example.css +++ b/src/assets/angular-material-examples/button-types/button-types-example.css @@ -1,5 +1,4 @@ -.example-button-row { - display: flex; - align-items: center; - justify-content: space-around; +.button-row button, +.button-row a { + margin-right: 8px; } diff --git a/src/assets/angular-material-examples/button-types/button-types-example.html b/src/assets/angular-material-examples/button-types/button-types-example.html index 852556d9..710c1415 100755 --- a/src/assets/angular-material-examples/button-types/button-types-example.html +++ b/src/assets/angular-material-examples/button-types/button-types-example.html @@ -18,6 +18,26 @@ Link
    +

    Stroked Buttons

    +
    + + + + + + Link +
    + +

    Flat Buttons

    +
    + + + + + + Link +
    +

    Icon Buttons

    Link -
    +
    \ No newline at end of file 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 index b117d4de..6e255f9a 100755 --- 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 @@ -2,24 +2,11 @@ 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; + weight: number; } const ELEMENT_DATA: PeriodicElement[] = [ @@ -35,6 +22,19 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; +/** + * @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: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new ExampleDataSource(); +} + /** * 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 @@ -44,7 +44,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ */ export class ExampleDataSource extends DataSource { /** Stream of data that is provided to the table. */ - data: BehaviorSubject = new BehaviorSubject(ELEMENT_DATA); + data = new BehaviorSubject(ELEMENT_DATA); /** Connect function called by the table to retrieve one stream containing the data to render. */ connect(): Observable { 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 57ca6060..c1f06e45 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 @@ -2,19 +2,6 @@ import {DataSource} from '@angular/cdk/collections'; import {Component} from '@angular/core'; import {BehaviorSubject, Observable} from 'rxjs'; -/** - * @title Basic CDK data-table - */ -@Component({ - selector: 'cdk-table-basic-example', - styleUrls: ['cdk-table-basic-example.css'], - templateUrl: 'cdk-table-basic-example.html', -}) -export class CdkTableBasicExample { - displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = new ExampleDataSource(); -} - export interface PeriodicElement { name: string; position: number; @@ -35,6 +22,19 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; +/** + * @title Basic CDK data-table + */ +@Component({ + selector: 'cdk-table-basic-example', + styleUrls: ['cdk-table-basic-example.css'], + templateUrl: 'cdk-table-basic-example.html', +}) +export class CdkTableBasicExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new ExampleDataSource(); +} + /** * 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 @@ -44,7 +44,7 @@ const ELEMENT_DATA: PeriodicElement[] = [ */ export class ExampleDataSource extends DataSource { /** Stream of data that is provided to the table. */ - data: BehaviorSubject = new BehaviorSubject(ELEMENT_DATA); + data = new BehaviorSubject(ELEMENT_DATA); /** Connect function called by the table to retrieve one stream containing the data to render. */ connect(): Observable { diff --git a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css index 775f4802..a88255f0 100755 --- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css +++ b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.css @@ -1,4 +1,4 @@ -.demo-tree-node { +.example-tree-node { display: flex; align-items: center; } diff --git a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html index f6389208..1ad37095 100755 --- a/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html +++ b/src/assets/angular-material-examples/cdk-tree-flat/cdk-tree-flat-example.html @@ -1,9 +1,9 @@ - + {{node.filename}}: {{node.type}} - +
    `, - encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExampleHeader implements OnDestroy { @@ -73,13 +70,13 @@ export class ExampleHeader implements OnDestroy { } previousClicked(mode: 'month' | 'year') { - this.calendar.activeDate = mode == 'month' ? + this.calendar.activeDate = mode === 'month' ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) : this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1); } nextClicked(mode: 'month' | 'year') { - this.calendar.activeDate = mode == 'month' ? + this.calendar.activeDate = mode === 'month' ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) : this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1); } diff --git a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html index 7cec1f8e..70a7e61e 100755 --- a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html +++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.html @@ -1,5 +1,5 @@ - + diff --git a/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts b/src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts index f6660671..8bda5f87 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 @@ -1,4 +1,4 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; import {MomentDateAdapter} from '@angular/material-moment-adapter'; import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core'; @@ -35,7 +35,6 @@ export const MY_FORMATS = { selector: 'datepicker-views-selection-example', templateUrl: 'datepicker-views-selection-example.html', styleUrls: ['datepicker-views-selection-example.css'], - encapsulation: ViewEncapsulation.None, providers: [ // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your // application's root module. We provide it at the component level here, due to limitations of diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html b/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html index 2da84e73..a5f12bc6 100755 --- a/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example-dialog.html @@ -1,25 +1,64 @@

    Install Angular

    - -

    DEVELOP ACROSS ALL PLATFORMS

    -

    Learn one way to build applications with Angular and reuse your code and abilities to build + +

    Develop across all platforms

    +

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

    - -

    SPEED & PERFORMANCE

    -

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

    - -

    INCREDIBLE TOOLING

    -

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

    - -

    LOVED BY MILLIONS

    -

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

    + +

    Speed & Performance

    +

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

    + +

    Incredible tooling

    +

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

    + +

    Loved by millions

    +

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

    + +

    What is Angular?

    + +

    Angular is a platform that makes it easy to build applications with the web. Angular + combines declarative templates, dependency injection, end to end tooling, and integrated + best practices to solve development challenges. Angular empowers developers to build + applications that live on the web, mobile, or the desktop

    + +

    Architecture overview

    + +

    Angular is a platform and framework for building client applications in HTML and TypeScript. + Angular is itself written in TypeScript. It implements core and optional functionality as a + set of TypeScript libraries that you import into your apps.

    + +

    The basic building blocks of an Angular application are NgModules, which provide a compilation + context for components. NgModules collect related code into functional sets; an Angular app is + defined by a set of NgModules. An app always has at least a root module that enables + bootstrapping, and typically has many more feature modules.

    + +

    Components define views, which are sets of screen elements that Angular can choose among and + modify according to your program logic and data. Every app has at least a root component.

    + +

    Components use services, which provide specific functionality not directly related to views. + Service providers can be injected into components as dependencies, making your code modular, + reusable, and efficient.

    + +

    Both components and services are simply classes, with decorators that mark their type and + provide metadata that tells Angular how to use them.

    + +

    The metadata for a component class associates it with a template that defines a view. A + template combines ordinary HTML with Angular directives and binding markup that allow Angular + to modify the HTML before rendering it for display.

    + +

    The metadata for a service class provides the information Angular needs to make it available + to components through Dependency Injection (DI).

    + +

    An app's components typically define many views, arranged hierarchically. Angular provides + the Router service to help you define navigation paths among views. The router provides + sophisticated in-browser navigational capabilities.

     - + diff --git a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts index 19698f21..85302e36 100755 --- a/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts +++ b/src/assets/angular-material-examples/dialog-content/dialog-content-example.ts @@ -13,9 +13,7 @@ export class DialogContentExample { constructor(public dialog: MatDialog) {} openDialog() { - const dialogRef = this.dialog.open(DialogContentExampleDialog, { - height: '350px' - }); + const dialogRef = this.dialog.open(DialogContentExampleDialog); dialogRef.afterClosed().subscribe(result => { console.log(`Dialog result: ${result}`); diff --git a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts index 9f47c92d..e1499f16 100755 --- a/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts +++ b/src/assets/angular-material-examples/dialog-data/dialog-data-example.ts @@ -1,13 +1,17 @@ import {Component, Inject} from '@angular/core'; import {MatDialog, MAT_DIALOG_DATA} from '@angular/material'; +export interface DialogData { + animal: 'panda' | 'unicorn' | 'lion'; +} + /** * @title Injecting data when opening a dialog */ @Component({ selector: 'dialog-data-example', templateUrl: 'dialog-data-example.html', - styleUrls: ['dialog-data-example.css'] + styleUrls: ['dialog-data-example.css'], }) export class DialogDataExample { constructor(public dialog: MatDialog) {} @@ -26,5 +30,5 @@ export class DialogDataExample { templateUrl: 'dialog-data-example-dialog.html', }) export class DialogDataExampleDialog { - constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} + constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {} } diff --git a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts index b279523d..29183b25 100755 --- a/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts +++ b/src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts @@ -10,7 +10,7 @@ import {MatDialog} from '@angular/material'; styleUrls: ['dialog-elements-example.css'], }) export class DialogElementsExample { - constructor(public dialog: MatDialog) { } + constructor(public dialog: MatDialog) {} openDialog() { this.dialog.open(DialogElementsExampleDialog); @@ -22,4 +22,4 @@ export class DialogElementsExample { selector: 'dialog-elements-example-dialog', templateUrl: 'dialog-elements-example-dialog.html', }) -export class DialogElementsExampleDialog { } +export class DialogElementsExampleDialog {} diff --git a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts index b8d17263..29c60705 100755 --- a/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts +++ b/src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts @@ -1,6 +1,11 @@ import {Component, Inject} from '@angular/core'; import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; +export interface DialogData { + animal: string; + name: string; +} + /** * @title Dialog Overview */ @@ -17,9 +22,9 @@ export class DialogOverviewExample { constructor(public dialog: MatDialog) {} openDialog(): void { - let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { + const dialogRef = this.dialog.open(DialogOverviewExampleDialog, { width: '250px', - data: { name: this.name, animal: this.animal } + data: {name: this.name, animal: this.animal} }); dialogRef.afterClosed().subscribe(result => { @@ -38,7 +43,7 @@ export class DialogOverviewExampleDialog { constructor( public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any) { } + @Inject(MAT_DIALOG_DATA) public data: DialogData) {} onNoClick(): void { this.dialogRef.close(); diff --git a/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html b/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html index 497675cc..0231b80d 100755 --- a/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html +++ b/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html @@ -1,60 +1,59 @@
    - - + +
    - - - - - Personal data - - - Type your name and age - account_circle - - + + + + + Personal data + + + Type your name and age + account_circle + + - - - + + + - - - + + + - + - - - - Destination - - - Type the country name - map - - + + + + Destination + + + Type the country name + map + + - - - - + + + + - - - - Day of the trip - - - Inform the date you wish to travel - date_range - - - - - - - - + + + + Day of the trip + + + Inform the date you wish to travel + date_range + + + + + + + diff --git a/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts b/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts index 580430b5..eb628cce 100755 --- a/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts +++ b/src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts @@ -7,7 +7,7 @@ import {MatAccordion} from '@angular/material'; @Component({ selector: 'expansion-toggle-all-example', templateUrl: 'expansion-expand-collapse-all-example.html', - styleUrls: ['expansion-expand-collapse-all-example.css'] + styleUrls: ['expansion-expand-collapse-all-example.css'], }) export class ExpansionExpandCollapseAllExample { @ViewChild(MatAccordion) accordion: MatAccordion; diff --git a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts index 30eb44b3..280dde34 100755 --- a/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts +++ b/src/assets/angular-material-examples/expansion-overview/expansion-overview-example.ts @@ -9,5 +9,5 @@ import {Component} from '@angular/core'; styleUrls: ['expansion-overview-example.css'], }) export class ExpansionOverviewExample { - panelOpenState: boolean = false; + panelOpenState = false; } diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html index 1a4880c2..c76cdf88 100755 --- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.html @@ -1,5 +1,5 @@ - + Personal data @@ -23,7 +23,7 @@ - + Destination @@ -44,7 +44,7 @@ - + Day of the trip diff --git a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts index e302175f..5dfa1d28 100755 --- a/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts +++ b/src/assets/angular-material-examples/expansion-steps/expansion-steps-example.ts @@ -6,7 +6,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'expansion-steps-example', templateUrl: 'expansion-steps-example.html', - styleUrls: ['expansion-steps-example.css'] + styleUrls: ['expansion-steps-example.css'], }) export class ExpansionStepsExample { step = 0; diff --git a/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts b/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts index c13412a9..35ce0309 100755 --- a/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts +++ b/src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts @@ -8,8 +8,8 @@ import {ChangeDetectorRef, Component, NgZone} from '@angular/core'; styleUrls: ['focus-monitor-directives-example.css'] }) export class FocusMonitorDirectivesExample { - elementOrigin: string = this.formatOrigin(null); - subtreeOrigin: string = this.formatOrigin(null); + elementOrigin = this.formatOrigin(null); + subtreeOrigin = this.formatOrigin(null); constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {} diff --git a/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts b/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts index 6ad5dd51..78c52004 100755 --- a/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts +++ b/src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts @@ -18,7 +18,7 @@ import { export class FocusMonitorFocusViaExample implements OnDestroy, OnInit { @ViewChild('monitored') monitoredEl: ElementRef; - origin: string = this.formatOrigin(null); + origin = this.formatOrigin(null); constructor(public focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef, diff --git a/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts b/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts index 4f0e8475..7e4abd64 100755 --- a/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts +++ b/src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts @@ -19,8 +19,8 @@ export class FocusMonitorOverviewExample implements OnDestroy, OnInit { @ViewChild('element') element: ElementRef; @ViewChild('subtree') subtree: ElementRef; - elementOrigin: string = this.formatOrigin(null); - subtreeOrigin: string = this.formatOrigin(null); + elementOrigin = this.formatOrigin(null); + subtreeOrigin = this.formatOrigin(null); constructor(private focusMonitor: FocusMonitor, private cdr: ChangeDetectorRef, diff --git a/src/assets/angular-material-examples/form-field-appearance/form-field-appearance-example.ts b/src/assets/angular-material-examples/form-field-appearance/form-field-appearance-example.ts index 77f124fc..b2ed1ed3 100755 --- a/src/assets/angular-material-examples/form-field-appearance/form-field-appearance-example.ts +++ b/src/assets/angular-material-examples/form-field-appearance/form-field-appearance-example.ts @@ -4,6 +4,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'form-field-appearance-example', templateUrl: 'form-field-appearance-example.html', - styleUrls: ['form-field-appearance-example.css'] + styleUrls: ['form-field-appearance-example.css'], }) export class FormFieldAppearanceExample {} diff --git a/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts b/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts index 70b57b08..314611d7 100755 --- a/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts +++ b/src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts @@ -5,7 +5,6 @@ import {FormBuilder, FormGroup} from '@angular/forms'; import {MatFormFieldControl} from '@angular/material'; import {Subject} from 'rxjs'; - /** Data structure for holding telephone number. */ export class MyTel { constructor(public area: string, public exchange: string, public subscriber: string) {} @@ -28,74 +27,68 @@ export class MyTelInput implements MatFormFieldControl, OnDestroy { static nextId = 0; parts: FormGroup; - stateChanges = new Subject(); - focused = false; - ngControl = null; - errorState = false; - controlType = 'my-tel-input'; + id = `my-tel-input-${MyTelInput.nextId++}`; + describedBy = ''; get empty() { - let n = this.parts.value; - return !n.area && !n.exchange && !n.subscriber; + const {value: {area, exchange, subscriber}} = this.parts; + + return !area && !exchange && !subscriber; } get shouldLabelFloat() { return this.focused || !this.empty; } - id = `my-tel-input-${MyTelInput.nextId++}`; - - describedBy = ''; - @Input() - get placeholder() { return this._placeholder; } - set placeholder(plh) { - this._placeholder = plh; + get placeholder(): string { return this._placeholder; } + set placeholder(value: string) { + this._placeholder = value; this.stateChanges.next(); } private _placeholder: string; @Input() - get required() { return this._required; } - set required(req) { - this._required = coerceBooleanProperty(req); + get required(): boolean { return this._required; } + set required(value: boolean) { + this._required = coerceBooleanProperty(value); this.stateChanges.next(); } private _required = false; @Input() - get disabled() { return this._disabled; } - set disabled(dis) { - this._disabled = coerceBooleanProperty(dis); + get disabled(): boolean { return this._disabled; } + set disabled(value: boolean) { + this._disabled = coerceBooleanProperty(value); this.stateChanges.next(); } private _disabled = false; @Input() get value(): MyTel | null { - let n = this.parts.value; - if (n.area.length == 3 && n.exchange.length == 3 && n.subscriber.length == 4) { - return new MyTel(n.area, n.exchange, n.subscriber); + const {value: {area, exchange, subscriber}} = this.parts; + if (area.length === 3 && exchange.length === 3 && subscriber.length === 4) { + return new MyTel(area, exchange, subscriber); } return null; } set value(tel: MyTel | null) { - tel = tel || new MyTel('', '', ''); - this.parts.setValue({area: tel.area, exchange: tel.exchange, subscriber: tel.subscriber}); + const {area, exchange, subscriber} = tel || new MyTel('', '', ''); + this.parts.setValue({area, exchange, subscriber}); this.stateChanges.next(); } constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) { this.parts = fb.group({ - 'area': '', - 'exchange': '', - 'subscriber': '', + area: '', + exchange: '', + subscriber: '', }); - fm.monitor(elRef.nativeElement, true).subscribe((origin) => { + fm.monitor(elRef.nativeElement, true).subscribe(origin => { this.focused = !!origin; this.stateChanges.next(); }); diff --git a/src/assets/angular-material-examples/form-field-error/form-field-error-example.ts b/src/assets/angular-material-examples/form-field-error/form-field-error-example.ts index ac867e71..042f9501 100755 --- a/src/assets/angular-material-examples/form-field-error/form-field-error-example.ts +++ b/src/assets/angular-material-examples/form-field-error/form-field-error-example.ts @@ -5,7 +5,7 @@ import {FormControl, Validators} from '@angular/forms'; @Component({ selector: 'form-field-error-example', templateUrl: 'form-field-error-example.html', - styleUrls: ['form-field-error-example.css'] + styleUrls: ['form-field-error-example.css'], }) export class FormFieldErrorExample { email = new FormControl('', [Validators.required, Validators.email]); diff --git a/src/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts b/src/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts index 1ae1b159..9bf6b602 100755 --- a/src/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts +++ b/src/assets/angular-material-examples/form-field-hint/form-field-hint-example.ts @@ -4,6 +4,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'form-field-hint-example', templateUrl: 'form-field-hint-example.html', - styleUrls: ['form-field-hint-example.css'] + styleUrls: ['form-field-hint-example.css'], }) export class FormFieldHintExample {} diff --git a/src/assets/angular-material-examples/form-field-label/form-field-label-example.ts b/src/assets/angular-material-examples/form-field-label/form-field-label-example.ts index 4ebb56e3..ee03367d 100755 --- a/src/assets/angular-material-examples/form-field-label/form-field-label-example.ts +++ b/src/assets/angular-material-examples/form-field-label/form-field-label-example.ts @@ -5,7 +5,7 @@ import {FormBuilder, FormGroup} from '@angular/forms'; @Component({ selector: 'form-field-label-example', templateUrl: 'form-field-label-example.html', - styleUrls: ['form-field-label-example.css'] + styleUrls: ['form-field-label-example.css'], }) export class FormFieldLabelExample { options: FormGroup; diff --git a/src/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts b/src/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts index 25200209..4666e5ad 100755 --- a/src/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts +++ b/src/assets/angular-material-examples/form-field-overview/form-field-overview-example.ts @@ -4,6 +4,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'form-field-overview-example', templateUrl: 'form-field-overview-example.html', - styleUrls: ['form-field-overview-example.css'] + styleUrls: ['form-field-overview-example.css'], }) export class FormFieldOverviewExample {} diff --git a/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts b/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts index 16b24e7b..43597b2e 100755 --- a/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts +++ b/src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.ts @@ -4,7 +4,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'form-field-prefix-suffix-example', templateUrl: 'form-field-prefix-suffix-example.html', - styleUrls: ['form-field-prefix-suffix-example.css'] + styleUrls: ['form-field-prefix-suffix-example.css'], }) export class FormFieldPrefixSuffixExample { hide = true; diff --git a/src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts b/src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts index 1e27dbc4..101e27f0 100755 --- a/src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts +++ b/src/assets/angular-material-examples/form-field-theming/form-field-theming-example.ts @@ -5,15 +5,15 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'form-field-theming-example', templateUrl: 'form-field-theming-example.html', - styleUrls: ['form-field-theming-example.css'] + styleUrls: ['form-field-theming-example.css'], }) export class FormFieldThemingExample { options: FormGroup; constructor(fb: FormBuilder) { this.options = fb.group({ - 'color': 'primary', - 'fontSize': [16, Validators.min(10)], + color: 'primary', + fontSize: [16, Validators.min(10)], }); } diff --git a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts index 99b29dfe..e38d348d 100755 --- a/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts +++ b/src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts @@ -1,5 +1,12 @@ import {Component} from '@angular/core'; +export interface Tile { + color: string; + cols: number; + rows: number; + text: string; +} + /** * @title Dynamic grid-list */ @@ -9,7 +16,7 @@ import {Component} from '@angular/core'; styleUrls: ['grid-list-dynamic-example.css'], }) export class GridListDynamicExample { - tiles = [ + tiles: Tile[] = [ {text: 'One', cols: 3, rows: 1, color: 'lightblue'}, {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'}, {text: 'Three', cols: 1, rows: 1, color: 'lightpink'}, diff --git a/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts b/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts index c2106e33..f502ac6d 100755 --- a/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts +++ b/src/assets/angular-material-examples/icon-overview/icon-overview-example.ts @@ -6,6 +6,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'icon-overview-example', templateUrl: 'icon-overview-example.html', - styleUrls: ['icon-overview-example.css'] + styleUrls: ['icon-overview-example.css'], }) export class IconOverviewExample {} diff --git a/src/assets/angular-material-examples/input-clearable/input-clearable-example.html b/src/assets/angular-material-examples/input-clearable/input-clearable-example.html index 4e1721a0..4a135e1d 100755 --- a/src/assets/angular-material-examples/input-clearable/input-clearable-example.html +++ b/src/assets/angular-material-examples/input-clearable/input-clearable-example.html @@ -1,5 +1,5 @@ - + diff --git a/src/assets/angular-material-examples/list-sections/list-sections-example.ts b/src/assets/angular-material-examples/list-sections/list-sections-example.ts index 63e7e4c6..f7ae6621 100755 --- a/src/assets/angular-material-examples/list-sections/list-sections-example.ts +++ b/src/assets/angular-material-examples/list-sections/list-sections-example.ts @@ -1,5 +1,10 @@ import {Component} from '@angular/core'; +export interface Section { + name: string; + updated: Date; +} + /** * @title List with sections */ @@ -9,7 +14,7 @@ import {Component} from '@angular/core'; templateUrl: 'list-sections-example.html', }) export class ListSectionsExample { - folders = [ + folders: Section[] = [ { name: 'Photos', updated: new Date('1/1/16'), @@ -23,7 +28,7 @@ export class ListSectionsExample { updated: new Date('1/28/16'), } ]; - notes = [ + notes: Section[] = [ { name: 'Vacation Itinerary', updated: new Date('2/20/16'), diff --git a/src/assets/angular-material-examples/list-selection/list-selection-example.ts b/src/assets/angular-material-examples/list-selection/list-selection-example.ts index 644d3d8a..322463fb 100755 --- a/src/assets/angular-material-examples/list-selection/list-selection-example.ts +++ b/src/assets/angular-material-examples/list-selection/list-selection-example.ts @@ -9,5 +9,5 @@ import {Component} from '@angular/core'; templateUrl: 'list-selection-example.html', }) export class ListSelectionExample { - typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; + typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers']; } diff --git a/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts b/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts index d9d7b81e..4e4d9710 100755 --- a/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts +++ b/src/assets/angular-material-examples/nested-menu/nested-menu-example.ts @@ -6,6 +6,6 @@ import {Component} from '@angular/core'; @Component({ selector: 'nested-menu-example', templateUrl: 'nested-menu-example.html', - styleUrls: ['nested-menu-example.css'] + styleUrls: ['nested-menu-example.css'], }) export class NestedMenuExample {} diff --git a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts index 3a19e138..10d102bb 100755 --- a/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts +++ b/src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts @@ -13,7 +13,7 @@ export class PaginatorConfigurableExample { // MatPaginator Inputs length = 100; pageSize = 10; - pageSizeOptions = [5, 10, 25, 100]; + pageSizeOptions: number[] = [5, 10, 25, 100]; // MatPaginator Output pageEvent: PageEvent; diff --git a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html index bdde8c61..49c08020 100755 --- a/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html +++ b/src/assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example.html @@ -35,11 +35,11 @@ -
    +
    -
    +
    diff --git a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html index 538321c8..4ff79176 100755 --- a/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html +++ b/src/assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html @@ -29,7 +29,7 @@
    -
    +
    diff --git a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts index 52fc5157..63791e23 100755 --- a/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts +++ b/src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.ts @@ -10,11 +10,5 @@ import {Component} from '@angular/core'; }) export class RadioNgModelExample { favoriteSeason: string; - - seasons = [ - 'Winter', - 'Spring', - 'Summer', - 'Autumn', - ]; + seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn']; } diff --git a/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html b/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html index b8d7fe7c..9c6f8960 100755 --- a/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html +++ b/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.html @@ -3,7 +3,7 @@ {{toppings.value ? toppings.value[0] : ''}} - (+{{toppings.value.length - 1}} others) + (+{{toppings.value.length - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}}) {{topping}} diff --git a/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts b/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts index bc40ebd1..0d38a010 100755 --- a/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts +++ b/src/assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example.ts @@ -10,5 +10,5 @@ import {FormControl} from '@angular/forms'; export class SelectCustomTriggerExample { toppings = new FormControl(); - toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; + toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; } diff --git a/src/assets/angular-material-examples/select-form/select-form-example.ts b/src/assets/angular-material-examples/select-form/select-form-example.ts index f3ad5713..aedf9673 100755 --- a/src/assets/angular-material-examples/select-form/select-form-example.ts +++ b/src/assets/angular-material-examples/select-form/select-form-example.ts @@ -1,5 +1,10 @@ import {Component} from '@angular/core'; +export interface Food { + value: string; + viewValue: string; +} + /** * @title Select in a form */ @@ -11,7 +16,7 @@ import {Component} from '@angular/core'; export class SelectFormExample { selectedValue: string; - foods = [ + foods: Food[] = [ {value: 'steak-0', viewValue: 'Steak'}, {value: 'pizza-1', viewValue: 'Pizza'}, {value: 'tacos-2', viewValue: 'Tacos'} diff --git a/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts b/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts index 82fd4a19..f40d09b3 100755 --- a/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts +++ b/src/assets/angular-material-examples/select-hint-error/select-hint-error-example.ts @@ -1,6 +1,11 @@ import {Component} from '@angular/core'; import {FormControl, Validators} from '@angular/forms'; +export interface Animal { + name: string; + sound: string; +} + /** @title Select with form field features */ @Component({ selector: 'select-hint-error-example', @@ -9,8 +14,7 @@ import {FormControl, Validators} from '@angular/forms'; }) export class SelectHintErrorExample { animalControl = new FormControl('', [Validators.required]); - - animals = [ + animals: Animal[] = [ {name: 'Dog', sound: 'Woof!'}, {name: 'Cat', sound: 'Meow!'}, {name: 'Cow', sound: 'Moo!'}, diff --git a/src/assets/angular-material-examples/select-multiple/select-multiple-example.ts b/src/assets/angular-material-examples/select-multiple/select-multiple-example.ts index 7f58f4cb..c9db8399 100755 --- a/src/assets/angular-material-examples/select-multiple/select-multiple-example.ts +++ b/src/assets/angular-material-examples/select-multiple/select-multiple-example.ts @@ -9,6 +9,5 @@ import {FormControl} from '@angular/forms'; }) export class SelectMultipleExample { toppings = new FormControl(); - - toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; + toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; } diff --git a/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html b/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html index 24859472..24674836 100755 --- a/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html +++ b/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html @@ -4,7 +4,7 @@ - {{ pokemon.viewValue }} + {{pokemon.viewValue}} diff --git a/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.ts b/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.ts index 6113c69b..2624e8a5 100755 --- a/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.ts +++ b/src/assets/angular-material-examples/select-optgroup/select-optgroup-example.ts @@ -1,6 +1,17 @@ import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; +export interface Pokemon { + value: string; + viewValue: string; +} + +export interface PokemonGroup { + disabled?: boolean; + name: string; + pokemon: Pokemon[]; +} + /** @title Select with option groups */ @Component({ selector: 'select-optgroup-example', @@ -9,38 +20,37 @@ import {FormControl} from '@angular/forms'; }) export class SelectOptgroupExample { pokemonControl = new FormControl(); - - pokemonGroups = [ + pokemonGroups: PokemonGroup[] = [ { name: 'Grass', pokemon: [ - { value: 'bulbasaur-0', viewValue: 'Bulbasaur' }, - { value: 'oddish-1', viewValue: 'Oddish' }, - { value: 'bellsprout-2', viewValue: 'Bellsprout' } + {value: 'bulbasaur-0', viewValue: 'Bulbasaur'}, + {value: 'oddish-1', viewValue: 'Oddish'}, + {value: 'bellsprout-2', viewValue: 'Bellsprout'} ] }, { name: 'Water', pokemon: [ - { value: 'squirtle-3', viewValue: 'Squirtle' }, - { value: 'psyduck-4', viewValue: 'Psyduck' }, - { value: 'horsea-5', viewValue: 'Horsea' } + {value: 'squirtle-3', viewValue: 'Squirtle'}, + {value: 'psyduck-4', viewValue: 'Psyduck'}, + {value: 'horsea-5', viewValue: 'Horsea'} ] }, { name: 'Fire', disabled: true, pokemon: [ - { value: 'charmander-6', viewValue: 'Charmander' }, - { value: 'vulpix-7', viewValue: 'Vulpix' }, - { value: 'flareon-8', viewValue: 'Flareon' } + {value: 'charmander-6', viewValue: 'Charmander'}, + {value: 'vulpix-7', viewValue: 'Vulpix'}, + {value: 'flareon-8', viewValue: 'Flareon'} ] }, { name: 'Psychic', pokemon: [ - { value: 'mew-9', viewValue: 'Mew' }, - { value: 'mewtwo-10', viewValue: 'Mewtwo' }, + {value: 'mew-9', viewValue: 'Mew'}, + {value: 'mewtwo-10', viewValue: 'Mewtwo'}, ] } ]; diff --git a/src/assets/angular-material-examples/select-overview/select-overview-example.html b/src/assets/angular-material-examples/select-overview/select-overview-example.html index f02b07a1..95459267 100755 --- a/src/assets/angular-material-examples/select-overview/select-overview-example.html +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.html @@ -1,7 +1,7 @@ - {{ food.viewValue }} + {{food.viewValue}} diff --git a/src/assets/angular-material-examples/select-overview/select-overview-example.ts b/src/assets/angular-material-examples/select-overview/select-overview-example.ts index 8bae60ba..3f306bd1 100755 --- a/src/assets/angular-material-examples/select-overview/select-overview-example.ts +++ b/src/assets/angular-material-examples/select-overview/select-overview-example.ts @@ -1,5 +1,10 @@ import {Component} from '@angular/core'; +export interface Food { + value: string; + viewValue: string; +} + /** * @title Basic select */ @@ -9,7 +14,7 @@ import {Component} from '@angular/core'; styleUrls: ['select-overview-example.css'], }) export class SelectOverviewExample { - foods = [ + foods: Food[] = [ {value: 'steak-0', viewValue: 'Steak'}, {value: 'pizza-1', viewValue: 'Pizza'}, {value: 'tacos-2', viewValue: 'Tacos'} diff --git a/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts b/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts index 712f75f4..b93fefb5 100755 --- a/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts +++ b/src/assets/angular-material-examples/select-panel-class/select-panel-class-example.ts @@ -8,6 +8,8 @@ import {FormControl} from '@angular/forms'; selector: 'select-panel-class-example', templateUrl: 'select-panel-class-example.html', styleUrls: ['select-panel-class-example.css'], + // Encapsulation has to be disabled in order for the + // component style to apply to the select panel. encapsulation: ViewEncapsulation.None, }) export class SelectPanelClassExample { diff --git a/src/assets/angular-material-examples/select-reset/select-reset-example.ts b/src/assets/angular-material-examples/select-reset/select-reset-example.ts index e14587ed..a52b6e2a 100755 --- a/src/assets/angular-material-examples/select-reset/select-reset-example.ts +++ b/src/assets/angular-material-examples/select-reset/select-reset-example.ts @@ -7,7 +7,7 @@ import {Component} from '@angular/core'; styleUrls: ['select-reset-example.css'], }) export class SelectResetExample { - states = [ + states: string[] = [ 'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', diff --git a/src/assets/angular-material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html b/src/assets/angular-material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html index 2dca0fd6..db557e10 100755 --- a/src/assets/angular-material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html +++ b/src/assets/angular-material-examples/sidenav-drawer-overview/sidenav-drawer-overview-example.html @@ -1,4 +1,4 @@ - Drawer content + Drawer content Main content diff --git a/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.html b/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.html index 53a74f82..dcc43afc 100755 --- a/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.html +++ b/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.html @@ -2,7 +2,7 @@ Header - {{options.value.fixed ? 'Fixed' : 'Non-fixed'}} Sidenav diff --git a/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.ts b/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.ts index 910987f4..695b9b7b 100755 --- a/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.ts +++ b/src/assets/angular-material-examples/sidenav-fixed/sidenav-fixed-example.ts @@ -12,9 +12,9 @@ export class SidenavFixedExample { constructor(fb: FormBuilder) { this.options = fb.group({ - 'fixed': false, - 'top': 0, - 'bottom': 0, + bottom: 0, + fixed: false, + top: 0 }); } diff --git a/src/assets/angular-material-examples/sidenav-mode/sidenav-mode-example.ts b/src/assets/angular-material-examples/sidenav-mode/sidenav-mode-example.ts index 790ba5d2..b1b01f1c 100755 --- a/src/assets/angular-material-examples/sidenav-mode/sidenav-mode-example.ts +++ b/src/assets/angular-material-examples/sidenav-mode/sidenav-mode-example.ts @@ -9,6 +9,5 @@ import {FormControl} from '@angular/forms'; }) export class SidenavModeExample { mode = new FormControl('over'); - shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host)); } 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 9e84e9a4..da30404c 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 @@ -10,9 +10,9 @@ import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core'; export class SidenavResponsiveExample implements OnDestroy { mobileQuery: MediaQueryList; - fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`); + fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`); - fillerContent = Array(50).fill(0).map(() => + fillerContent = Array.from({length: 50}, () => `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in diff --git a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html index 3ce5f440..db205ffb 100755 --- a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html +++ b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.html @@ -1,10 +1,10 @@

    Slide Toggle using a simple NgModel.

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

    Slide Toggle inside of a Template-driven form

    -
    + Enable Wifi Accept Terms of Service @@ -14,12 +14,12 @@

    Slide Toggle inside of a Reactive form

    - + Enable Wifi Accept Terms of Service -

    Form Group Status: {{ formGroup.status}}

    +

    Form Group Status: {{formGroup.status}}

    diff --git a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts index 2636c474..d511f1f5 100755 --- a/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts +++ b/src/assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example.ts @@ -20,7 +20,7 @@ export class SlideToggleFormsExample { }); } - onFormSubmit(formValue: any) { - alert(JSON.stringify(formValue, null, 2)); + onFormSubmit() { + alert(JSON.stringify(this.formGroup.value, null, 2)); } } diff --git a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts index 80f20670..7b75621d 100755 --- a/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts +++ b/src/assets/angular-material-examples/slider-configurable/slider-configurable-example.ts @@ -1,4 +1,5 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import {coerceNumberProperty} from '@angular/cdk/coercion'; +import {Component} from '@angular/core'; /** * @title Configurable slider @@ -7,7 +8,6 @@ import {Component, ViewEncapsulation} from '@angular/core'; selector: 'slider-configurable-example', templateUrl: 'slider-configurable-example.html', styleUrls: ['slider-configurable-example.css'], - encapsulation: ViewEncapsulation.None, }) export class SliderConfigurableExample { autoTicks = false; @@ -24,8 +24,8 @@ export class SliderConfigurableExample { get tickInterval(): number | 'auto' { return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : 0; } - set tickInterval(v) { - this._tickInterval = Number(v); + set tickInterval(value) { + this._tickInterval = coerceNumberProperty(value); } private _tickInterval = 1; } diff --git a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts index cf3fafdf..bd121c38 100755 --- a/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts +++ b/src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts @@ -22,6 +22,10 @@ export class SnackBarComponentExample { @Component({ selector: 'snack-bar-component-example-snack', templateUrl: 'snack-bar-component-example-snack.html', - styles: [`.example-pizza-party { color: hotpink; }`], + styles: [` + .example-pizza-party { + color: hotpink; + } + `], }) export class PizzaPartyComponent {} diff --git a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts index 58b19b39..4062c823 100755 --- a/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts +++ b/src/assets/angular-material-examples/sort-overview/sort-overview-example.ts @@ -1,6 +1,14 @@ import {Component} from '@angular/core'; import {Sort} from '@angular/material'; +export interface Dessert { + calories: number; + carbs: number; + fat: number; + name: string; + protein: number; +} + /** * @title Sorting overview */ @@ -10,15 +18,15 @@ import {Sort} from '@angular/material'; styleUrls: ['sort-overview-example.css'], }) export class SortOverviewExample { - desserts = [ - {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'}, - {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'}, - {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'}, - {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'}, - {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'}, + desserts: Dessert[] = [ + {name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4}, + {name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4}, + {name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6}, + {name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4}, + {name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4}, ]; - sortedData; + sortedData: Dessert[]; constructor() { this.sortedData = this.desserts.slice(); @@ -26,19 +34,19 @@ export class SortOverviewExample { sortData(sort: Sort) { const data = this.desserts.slice(); - if (!sort.active || sort.direction == '') { + if (!sort.active || sort.direction === '') { this.sortedData = data; return; } this.sortedData = data.sort((a, b) => { - let isAsc = sort.direction == 'asc'; + const isAsc = sort.direction === 'asc'; switch (sort.active) { case 'name': return compare(a.name, b.name, isAsc); - case 'calories': return compare(+a.calories, +b.calories, isAsc); - case 'fat': return compare(+a.fat, +b.fat, isAsc); - case 'carbs': return compare(+a.carbs, +b.carbs, isAsc); - case 'protein': return compare(+a.protein, +b.protein, isAsc); + case 'calories': return compare(a.calories, b.calories, isAsc); + case 'fat': return compare(a.fat, b.fat, isAsc); + case 'carbs': return compare(a.carbs, b.carbs, isAsc); + case 'protein': return compare(a.protein, b.protein, isAsc); default: return 0; } }); diff --git a/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.html b/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.html index 05c22c5a..e9162fea 100755 --- a/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.html +++ b/src/assets/angular-material-examples/stepper-editable/stepper-editable-example.html @@ -2,7 +2,7 @@ {{!isEditable ? 'Enable edit mode' : 'Disable edit mode'}} - +
    Fill out your name 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 c70b275c..d052b274 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 @@ -12,9 +12,9 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; export class StepperEditableExample implements OnInit { firstFormGroup: FormGroup; secondFormGroup: FormGroup; - isEditable: boolean = false; + isEditable = false; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ diff --git a/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.html b/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.html index 004b3458..31c390bf 100755 --- a/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.html +++ b/src/assets/angular-material-examples/stepper-optional/stepper-optional-example.html @@ -2,7 +2,7 @@ {{!isOptional ? 'Enable optional steps' : 'Disable optional steps'}} - + Fill out your name 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 44935073..7096da95 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 @@ -12,9 +12,9 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; export class StepperOptionalExample implements OnInit { firstFormGroup: FormGroup; secondFormGroup: FormGroup; - isOptional: boolean = false; + isOptional = false; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ 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 cd2c1829..16690bbe 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 @@ -7,14 +7,14 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'stepper-overview-example', templateUrl: 'stepper-overview-example.html', - styleUrls: ['stepper-overview-example.css'] + styleUrls: ['stepper-overview-example.css'], }) export class StepperOverviewExample implements OnInit { isLinear = false; firstFormGroup: FormGroup; secondFormGroup: FormGroup; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ 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 index 13229872..26bc7486 100755 --- a/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts +++ b/src/assets/angular-material-examples/stepper-vertical/stepper-vertical-example.ts @@ -14,7 +14,7 @@ export class StepperVerticalExample implements OnInit { firstFormGroup: FormGroup; secondFormGroup: FormGroup; - constructor(private _formBuilder: FormBuilder) { } + constructor(private _formBuilder: FormBuilder) {} ngOnInit() { this.firstFormGroup = this._formBuilder.group({ 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 index ab5f3e8f..50e88c9e 100755 --- 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 @@ -2,7 +2,7 @@ import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; /** - * @title Tag group with dynamically changing tabs + * @title Tab group with dynamically changing tabs */ @Component({ selector: 'tab-group-dynamic-example', 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 index 86d05003..538f335c 100755 --- 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 @@ -7,6 +7,6 @@ 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 index f75072d0..eb0066c4 100755 --- 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 @@ -1,18 +1,5 @@ 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; @@ -32,3 +19,16 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; + +/** + * @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: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} 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 3042613e..517218a2 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,18 +1,5 @@ import {Component} from '@angular/core'; -/** - * @title Basic use of `` - */ -@Component({ - selector: 'table-basic-example', - styleUrls: ['table-basic-example.css'], - templateUrl: 'table-basic-example.html', -}) -export class TableBasicExample { - displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = ELEMENT_DATA; -} - export interface PeriodicElement { name: string; position: number; @@ -32,3 +19,16 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; + +/** + * @title Basic use of `
    ` + */ +@Component({ + selector: 'table-basic-example', + styleUrls: ['table-basic-example.css'], + templateUrl: 'table-basic-example.html', +}) +export class TableBasicExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = ELEMENT_DATA; +} 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 index 0463410e..9d2fcac7 100755 --- 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 @@ -3,7 +3,7 @@
    - + 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 index 107226fc..4948c44a 100755 --- 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 @@ -1,5 +1,25 @@ import {Component} from '@angular/core'; +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'}, +]; + /** * @title Table dynamically changing the columns displayed */ @@ -9,13 +29,13 @@ import {Component} from '@angular/core'; templateUrl: 'table-dynamic-columns-example.html', }) export class TableDynamicColumnsExample { - definedColumns = ['name', 'weight', 'symbol', 'position']; - columnsToDisplay = this.definedColumns.slice(); + displayedColumns: string[] = ['name', 'weight', 'symbol', 'position']; + columnsToDisplay: string[] = this.displayedColumns.slice(); data: PeriodicElement[] = ELEMENT_DATA; addColumn() { - const randomColumn = Math.floor(Math.random() * this.definedColumns.length); - this.columnsToDisplay.push(this.definedColumns[randomColumn]); + const randomColumn = Math.floor(Math.random() * this.displayedColumns.length); + this.columnsToDisplay.push(this.displayedColumns[randomColumn]); } removeColumn() { @@ -37,23 +57,3 @@ export class TableDynamicColumnsExample { } } } - -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-filtering/table-filtering-example.ts b/src/assets/angular-material-examples/table-filtering/table-filtering-example.ts index 4b4800b1..e1b572b5 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 @@ -1,25 +1,6 @@ import {Component} from '@angular/core'; import {MatTableDataSource} from '@angular/material'; -/** - * @title Table with filtering - */ -@Component({ - selector: 'table-filtering-example', - styleUrls: ['table-filtering-example.css'], - templateUrl: 'table-filtering-example.html', -}) -export class TableFilteringExample { - displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); - - applyFilter(filterValue: string) { - filterValue = filterValue.trim(); // Remove whitespace - filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches - this.dataSource.filter = filterValue; - } -} - export interface PeriodicElement { name: string; position: number; @@ -39,3 +20,20 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; + +/** + * @title Table with filtering + */ +@Component({ + selector: 'table-filtering-example', + styleUrls: ['table-filtering-example.css'], + templateUrl: 'table-filtering-example.html', +}) +export class TableFilteringExample { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); + } +} diff --git a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.ts b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.ts index c4df488b..92227379 100755 --- a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.ts +++ b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.ts @@ -14,7 +14,7 @@ export interface Transaction { templateUrl: 'table-footer-row-example.html', }) export class TableFooterRowExample { - displayedColumns = ['item', 'cost']; + displayedColumns: string[] = ['item', 'cost']; transactions: Transaction[] = [ {item: 'Beach ball', cost: 4}, {item: 'Towel', cost: 5}, 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 49992857..acdc824d 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 @@ -14,27 +14,27 @@ - + - + - + - - + 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 9475078b..aeab6437 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 @@ -13,7 +13,7 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators'; templateUrl: 'table-http-example.html', }) export class TableHttpExample implements OnInit { - displayedColumns = ['created', 'state', 'number', 'title']; + displayedColumns: string[] = ['created', 'state', 'number', 'title']; exampleDatabase: ExampleHttpDao | null; data: GithubIssue[] = []; 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 index 1832eb4b..87c17bef 100755 --- 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 @@ -15,7 +15,7 @@ export interface Transaction { templateUrl: 'table-multiple-header-footer-example.html', }) export class TableMultipleHeaderFooterExample { - displayedColumns = ['item', 'cost']; + displayedColumns: string[] = ['item', 'cost']; transactions: Transaction[] = [ {item: 'Beach ball', cost: 4}, {item: 'Towel', cost: 5}, 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 9e58578d..62eec1ce 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,6 +1,20 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; +export interface UserData { + id: string; + name: string; + progress: string; + color: string; +} + +/** Constants used to fill up our data base. */ +const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', + 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; +const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', + 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', + 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; + /** * @title Data table with sorting, pagination, and filtering. */ @@ -10,7 +24,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; templateUrl: 'table-overview-example.html', }) export class TableOverviewExample implements OnInit { - displayedColumns = ['id', 'name', 'progress', 'color']; + displayedColumns: string[] = ['id', 'name', 'progress', 'color']; dataSource: MatTableDataSource; @ViewChild(MatPaginator) paginator: MatPaginator; @@ -18,8 +32,7 @@ export class TableOverviewExample implements OnInit { constructor() { // Create 100 users - const users: UserData[] = []; - for (let i = 1; i <= 100; i++) { users.push(createNewUser(i)); } + const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1)); // Assign the data to the data source for the table to render this.dataSource = new MatTableDataSource(users); @@ -31,9 +44,8 @@ export class TableOverviewExample implements OnInit { } applyFilter(filterValue: string) { - filterValue = filterValue.trim(); // Remove whitespace - filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches - this.dataSource.filter = filterValue; + this.dataSource.filter = filterValue.trim().toLowerCase(); + if (this.dataSource.paginator) { this.dataSource.paginator.firstPage(); } @@ -53,17 +65,3 @@ function createNewUser(id: number): UserData { color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] }; } - -/** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; - -export interface UserData { - id: string; - name: string; - progress: string; - color: string; -} 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 6a4e03c5..e4cad373 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 @@ -10,7 +10,7 @@ import {MatPaginator, MatTableDataSource} from '@angular/material'; templateUrl: 'table-pagination-example.html', }) export class TablePaginationExample implements OnInit { - displayedColumns = ['position', 'name', 'weight', 'symbol']; + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = new MatTableDataSource(ELEMENT_DATA); @ViewChild(MatPaginator) paginator: MatPaginator; 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 index 7799dd05..5c041552 100755 --- 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 @@ -9,6 +9,6 @@ import {Component} from '@angular/core'; templateUrl: 'table-row-context-example.html', }) export class TableRowContextExample { - displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd']; + displayedColumns: string[] = ['$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.ts b/src/assets/angular-material-examples/table-selection/table-selection-example.ts index cee88c81..15336737 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 @@ -1,34 +1,6 @@ +import {SelectionModel} from '@angular/cdk/collections'; import {Component} from '@angular/core'; import {MatTableDataSource} from '@angular/material'; -import {SelectionModel} from '@angular/cdk/collections'; - -/** - * @title Table with selection - */ -@Component({ - selector: 'table-selection-example', - styleUrls: ['table-selection-example.css'], - templateUrl: 'table-selection-example.html', -}) -export class TableSelectionExample { - displayedColumns = ['select', 'position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); - selection = new SelectionModel(true, []); - - /** Whether the number of selected elements matches the total number of rows. */ - isAllSelected() { - const numSelected = this.selection.selected.length; - const numRows = this.dataSource.data.length; - return numSelected === numRows; - } - - /** Selects all rows if they are not all selected; otherwise clear selection. */ - masterToggle() { - this.isAllSelected() ? - this.selection.clear() : - this.dataSource.data.forEach(row => this.selection.select(row)); - } -} export interface PeriodicElement { name: string; @@ -49,3 +21,31 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; + +/** + * @title Table with selection + */ +@Component({ + selector: 'table-selection-example', + styleUrls: ['table-selection-example.css'], + templateUrl: 'table-selection-example.html', +}) +export class TableSelectionExample { + displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + selection = new SelectionModel(true, []); + + /** Whether the number of selected elements matches the total number of rows. */ + isAllSelected() { + const numSelected = this.selection.selected.length; + const numRows = this.dataSource.data.length; + return numSelected === numRows; + } + + /** Selects all rows if they are not all selected; otherwise clear selection. */ + masterToggle() { + this.isAllSelected() ? + this.selection.clear() : + this.dataSource.data.forEach(row => this.selection.select(row)); + } +} 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 8878e744..cc992b0e 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,25 +1,6 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {MatSort, MatTableDataSource} from '@angular/material'; -/** - * @title Table with sorting - */ -@Component({ - selector: 'table-sorting-example', - styleUrls: ['table-sorting-example.css'], - templateUrl: 'table-sorting-example.html', -}) -export class TableSortingExample implements OnInit { - displayedColumns = ['position', 'name', 'weight', 'symbol']; - dataSource = new MatTableDataSource(ELEMENT_DATA); - - @ViewChild(MatSort) sort: MatSort; - - ngOnInit() { - this.dataSource.sort = this.sort; - } -} - export interface PeriodicElement { name: string; position: number; @@ -39,3 +20,22 @@ const ELEMENT_DATA: PeriodicElement[] = [ {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'}, {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'}, ]; + +/** + * @title Table with sorting + */ +@Component({ + selector: 'table-sorting-example', + styleUrls: ['table-sorting-example.css'], + templateUrl: 'table-sorting-example.html', +}) +export class TableSortingExample implements OnInit { + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; + dataSource = new MatTableDataSource(ELEMENT_DATA); + + @ViewChild(MatSort) sort: MatSort; + + ngOnInit() { + this.dataSource.sort = this.sort; + } +} 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 index 7f4a2681..c8c75575 100755 --- 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 @@ -16,6 +16,6 @@ - +
    {{column}} {{element[column]}} #{{ row.number }}{{row.number}} Title{{ row.title }}{{row.title}} State{{ row.state }}{{row.state}} + Created {{ row.created_at | date }}{{row.created_at | date}}
    -
    \ No newline at end of file +
    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 index 51e7f754..62419465 100755 --- 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 @@ -11,4 +11,4 @@ import {Component, ViewEncapsulation} from '@angular/core'; // `tooltip-custom-class-example.css` will not be scoped to this component's view. encapsulation: ViewEncapsulation.None, }) -export class TooltipCustomClassExample { } +export class TooltipCustomClassExample {} 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 f4b76551..444dbad7 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,7 +1,7 @@ - {{ positionOption }} + {{positionOption}} diff --git a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts index 5407d082..2f031869 100755 --- a/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts +++ b/src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts @@ -1,9 +1,8 @@ -import {Component, Injectable} from '@angular/core'; import {SelectionModel} from '@angular/cdk/collections'; import {FlatTreeControl} from '@angular/cdk/tree'; -import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree'; -import {of as ofObservable, Observable, BehaviorSubject} from 'rxjs'; - +import {Component, Injectable} from '@angular/core'; +import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; +import {BehaviorSubject} from 'rxjs'; /** * Node for to-do item @@ -24,21 +23,21 @@ export class TodoItemFlatNode { * The Json object for to-do list data. */ const TREE_DATA = { - 'Reminders': [ + Groceries: { + 'Almond Meal flour': null, + 'Organic eggs': null, + 'Protein Powder': null, + Fruits: { + Apple: null, + Berries: ['Blueberry', 'Raspberry'], + Orange: null + } + }, + Reminders: [ 'Cook dinner', 'Read the Material Design spec', 'Upgrade Application to Angular' - ], - 'Groceries': { - 'Organic eggs': null, - 'Protein Powder': null, - 'Almond Meal flour': null, - 'Fruits': { - 'Apple': null, - 'Orange': null, - 'Berries': ['Blueberry', 'Raspberry'] - } - } + ] }; /** @@ -48,7 +47,7 @@ const TREE_DATA = { */ @Injectable() export class ChecklistDatabase { - dataChange: BehaviorSubject = new BehaviorSubject([]); + dataChange = new BehaviorSubject([]); get data(): TodoItemNode[] { return this.dataChange.value; } @@ -69,29 +68,28 @@ export class ChecklistDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `TodoItemNode`. */ - buildFileTree(value: any, level: number) { - let data: any[] = []; - for (let k in value) { - let v = value[k]; - let node = new TodoItemNode(); - node.item = `${k}`; - if (v === null || v === undefined) { - // no action - } else if (typeof v === 'object') { - node.children = this.buildFileTree(v, level + 1); - } else { - node.item = v; + buildFileTree(obj: object, level: number): TodoItemNode[] { + return Object.keys(obj).reduce((accumulator, key) => { + const value = obj[key]; + const node = new TodoItemNode(); + node.item = key; + + if (value != null) { + if (typeof value === 'object') { + node.children = this.buildFileTree(value, level + 1); + } else { + node.item = value; + } } - data.push(node); - } - return data; + + return accumulator.concat(node); + }, []); } /** Add an item to to-do list */ insertItem(parent: TodoItemNode, name: string) { - const child = {item: name}; if (parent.children) { - parent.children.push(child); + parent.children.push({item: name} as TodoItemNode); this.dataChange.next(this.data); } } @@ -113,16 +111,16 @@ export class ChecklistDatabase { }) export class TreeChecklistExample { /** Map from flat node to nested node. This helps us finding the nested node to be modified */ - flatNodeMap: Map = new Map(); + flatNodeMap = new Map(); /** Map from nested node to flattened node. This helps us to keep the same object for selection */ - nestedNodeMap: Map = new Map(); + nestedNodeMap = new Map(); /** A selected parent node to be inserted */ selectedParent: TodoItemFlatNode | null = null; /** The new item's name */ - newItemName: string = ''; + newItemName = ''; treeControl: FlatTreeControl; @@ -144,25 +142,24 @@ export class TreeChecklistExample { }); } - getLevel = (node: TodoItemFlatNode) => { return node.level; }; + getLevel = (node: TodoItemFlatNode) => node.level; - isExpandable = (node: TodoItemFlatNode) => { return node.expandable; }; + isExpandable = (node: TodoItemFlatNode) => node.expandable; - getChildren = (node: TodoItemNode): Observable => { - return ofObservable(node.children); - } + getChildren = (node: TodoItemNode): TodoItemNode[] => node.children; - hasChild = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.expandable; }; + hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable; - hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => { return _nodeData.item === ''; }; + hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === ''; /** * Transformer to convert nested node to flat node. Record the nodes in maps for later use. */ transformer = (node: TodoItemNode, level: number) => { - let flatNode = this.nestedNodeMap.has(node) && this.nestedNodeMap.get(node)!.item === node.item - ? this.nestedNodeMap.get(node)! - : new TodoItemFlatNode(); + const existingNode = this.nestedNodeMap.get(node); + const flatNode = existingNode && existingNode.item === node.item + ? existingNode + : new TodoItemFlatNode(); flatNode.item = node.item; flatNode.level = level; flatNode.expandable = !!node.children; diff --git a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts index 7f9b4052..8f560382 100755 --- a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts +++ b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts @@ -1,37 +1,34 @@ -import {Component, Injectable} from '@angular/core'; -import {FlatTreeControl} from '@angular/cdk/tree'; import {CollectionViewer, SelectionChange} from '@angular/cdk/collections'; -import {BehaviorSubject, Observable, merge} from 'rxjs'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {Component, Injectable} from '@angular/core'; +import {BehaviorSubject, merge, Observable} from 'rxjs'; import {map} from 'rxjs/operators'; - /** Flat node with expandable and level information */ export class DynamicFlatNode { - constructor(public item: string, public level: number = 1, public expandable: boolean = false, - public isLoading: boolean = false) {} + constructor(public item: string, public level = 1, public expandable = false, + public isLoading = false) {} } - /** * Database for dynamic data. When expanding a node in the tree, the data source will need to fetch * the descendants data from the database. */ export class DynamicDatabase { - dataMap = new Map([ + dataMap = new Map([ ['Fruits', ['Apple', 'Orange', 'Banana']], ['Vegetables', ['Tomato', 'Potato', 'Onion']], ['Apple', ['Fuji', 'Macintosh']], ['Onion', ['Yellow', 'White', 'Purple']] ]); - rootLevelNodes = ['Fruits', 'Vegetables']; + rootLevelNodes: string[] = ['Fruits', 'Vegetables']; /** Initial data from database */ initialData(): DynamicFlatNode[] { return this.rootLevelNodes.map(name => new DynamicFlatNode(name, 0, true)); } - getChildren(node: string): string[] | undefined { return this.dataMap.get(node); } @@ -50,7 +47,7 @@ export class DynamicDatabase { @Injectable() export class DynamicDataSource { - dataChange: BehaviorSubject = new BehaviorSubject([]); + dataChange = new BehaviorSubject([]); get data(): DynamicFlatNode[] { return this.dataChange.value; } set data(value: DynamicFlatNode[]) { @@ -75,10 +72,10 @@ export class DynamicDataSource { /** Handle expand/collapse behaviors */ handleTreeControl(change: SelectionChange) { if (change.added) { - change.added.forEach((node) => this.toggleNode(node, true)); + change.added.forEach(node => this.toggleNode(node, true)); } if (change.removed) { - change.removed.reverse().forEach((node) => this.toggleNode(node, false)); + change.removed.slice().reverse().forEach(node => this.toggleNode(node, false)); } } @@ -123,7 +120,6 @@ export class DynamicDataSource { providers: [DynamicDatabase] }) export class TreeDynamicExample { - constructor(database: DynamicDatabase) { this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable); this.dataSource = new DynamicDataSource(this.treeControl, database); @@ -135,9 +131,9 @@ export class TreeDynamicExample { dataSource: DynamicDataSource; - getLevel = (node: DynamicFlatNode) => { return node.level; }; + getLevel = (node: DynamicFlatNode) => node.level; - isExpandable = (node: DynamicFlatNode) => { return node.expandable; }; + isExpandable = (node: DynamicFlatNode) => node.expandable; - hasChild = (_: number, _nodeData: DynamicFlatNode) => { return _nodeData.expandable; }; + hasChild = (_: number, _nodeData: DynamicFlatNode) => _nodeData.expandable; } diff --git a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts index ebdaf064..ba7a4dad 100755 --- a/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts +++ b/src/assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example.ts @@ -15,51 +15,48 @@ export class FileNode { /** Flat node with expandable and level information */ export class FileFlatNode { - filename: string; - type: any; - level: number; - expandable: boolean; + constructor( + public expandable: boolean, public filename: string, public level: number, public type: any) {} } /** * The file structure tree data in string. The data could be parsed into a Json object */ -const TREE_DATA = ` - { - "Documents": { - "angular": { - "src": { - "core": "ts", - "compiler": "ts" - } - }, - "material2": { - "src": { - "button": "ts", - "checkbox": "ts", - "input": "ts" - } +const TREE_DATA = JSON.stringify({ + Applications: { + Calendar: 'app', + Chrome: 'app', + Webstorm: 'app' + }, + Documents: { + angular: { + src: { + compiler: 'ts', + core: 'ts' } }, - "Downloads": { - "Tutorial": "html", - "November": "pdf", - "October": "pdf" - }, - "Pictures": { - "Sun": "png", - "Woods": "jpg", - "Photo Booth Library": { - "Contents": "dir", - "Pictures": "dir" - } - }, - "Applications": { - "Chrome": "app", - "Calendar": "app", - "Webstorm": "app" + material2: { + src: { + button: 'ts', + checkbox: 'ts', + input: 'ts' + } } -}`; + }, + Downloads: { + October: 'pdf', + November: 'pdf', + Tutorial: 'html' + }, + Pictures: { + 'Photo Booth Library': { + Contents: 'dir', + Pictures: 'dir' + }, + Sun: 'png', + Woods: 'jpg' + } +}); /** * File database, it can build a tree structured Json object from string. @@ -70,7 +67,7 @@ const TREE_DATA = ` */ @Injectable() export class FileDatabase { - dataChange: BehaviorSubject = new BehaviorSubject([]); + dataChange = new BehaviorSubject([]); get data(): FileNode[] { return this.dataChange.value; } @@ -94,22 +91,22 @@ export class FileDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `FileNode`. */ - buildFileTree(value: any, level: number): FileNode[] { - let data: any[] = []; - for (let k in value) { - let v = value[k]; - let node = new FileNode(); - node.filename = `${k}`; - if (v === null || v === undefined) { - // no action - } else if (typeof v === 'object') { - node.children = this.buildFileTree(v, level + 1); - } else { - node.type = v; + buildFileTree(obj: object, level: number): FileNode[] { + return Object.keys(obj).reduce((accumulator, key) => { + const value = obj[key]; + const node = new FileNode(); + node.filename = key; + + if (value != null) { + if (typeof value === 'object') { + node.children = this.buildFileTree(value, level + 1); + } else { + node.type = value; + } } - data.push(node); - } - return data; + + return accumulator.concat(node); + }, []); } } @@ -123,11 +120,8 @@ export class FileDatabase { providers: [FileDatabase] }) export class TreeFlatOverviewExample { - treeControl: FlatTreeControl; - treeFlattener: MatTreeFlattener; - dataSource: MatTreeFlatDataSource; constructor(database: FileDatabase) { @@ -136,27 +130,18 @@ export class TreeFlatOverviewExample { this.treeControl = new FlatTreeControl(this._getLevel, this._isExpandable); this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - database.dataChange.subscribe(data => { - this.dataSource.data = data; - }); + database.dataChange.subscribe(data => this.dataSource.data = data); } transformer = (node: FileNode, level: number) => { - let flatNode = new FileFlatNode(); - flatNode.filename = node.filename; - flatNode.type = node.type; - flatNode.level = level; - flatNode.expandable = !!node.children; - return flatNode; + return new FileFlatNode(!!node.children, node.filename, level, node.type); } - private _getLevel = (node: FileFlatNode) => { return node.level; }; + private _getLevel = (node: FileFlatNode) => node.level; - private _isExpandable = (node: FileFlatNode) => { return node.expandable; }; + private _isExpandable = (node: FileFlatNode) => node.expandable; - private _getChildren = (node: FileNode): Observable => { - return observableOf(node.children); - } + private _getChildren = (node: FileNode): Observable => observableOf(node.children); - hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; }; + hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable; } diff --git a/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts b/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts index 559ca190..0c958a8a 100755 --- a/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts +++ b/src/assets/angular-material-examples/tree-loadmore/tree-loadmore-example.ts @@ -5,32 +5,31 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import {Component, Injectable} from '@angular/core'; import {FlatTreeControl} from '@angular/cdk/tree'; +import {Component, Injectable} from '@angular/core'; import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; import {BehaviorSubject, Observable} from 'rxjs'; - const LOAD_MORE = 'LOAD_MORE'; /** Nested node */ export class LoadmoreNode { - childrenChange: BehaviorSubject = new BehaviorSubject([]); + childrenChange = new BehaviorSubject([]); get children(): LoadmoreNode[] { return this.childrenChange.value; } constructor(public item: string, - public hasChildren: boolean = false, + public hasChildren = false, public loadMoreParentItem: string | null = null) {} } /** Flat node with expandable and level information */ export class LoadmoreFlatNode { constructor(public item: string, - public level: number = 1, - public expandable: boolean = false, + public level = 1, + public expandable = false, public loadMoreParentItem: string | null = null) {} } @@ -41,12 +40,12 @@ export class LoadmoreFlatNode { @Injectable() export class LoadmoreDatabase { batchNumber = 5; - dataChange: BehaviorSubject = new BehaviorSubject([]); - nodeMap: Map = new Map(); + dataChange = new BehaviorSubject([]); + nodeMap = new Map(); /** The data */ - rootLevelNodes = ['Vegetables', 'Fruits']; - dataMap = new Map([ + rootLevelNodes: string[] = ['Vegetables', 'Fruits']; + dataMap = new Map([ ['Fruits', ['Apple', 'Orange', 'Banana']], ['Vegetables', ['Tomato', 'Potato', 'Onion']], ['Apple', ['Fuji', 'Macintosh']], @@ -59,7 +58,7 @@ export class LoadmoreDatabase { } /** Expand a node whose children are not loaded */ - loadMore(item: string, onlyFirstTime: boolean = false) { + loadMore(item: string, onlyFirstTime = false) { if (!this.nodeMap.has(item) || !this.dataMap.has(item)) { return; } @@ -69,7 +68,7 @@ export class LoadmoreDatabase { return; } const newChildrenNumber = parent.children!.length + this.batchNumber; - let nodes = children.slice(0, newChildrenNumber) + const nodes = children.slice(0, newChildrenNumber) .map(name => this._generateNode(name)); if (newChildrenNumber < children.length) { // Need a new load more node @@ -100,13 +99,9 @@ export class LoadmoreDatabase { providers: [LoadmoreDatabase] }) export class TreeLoadmoreExample { - - nodeMap: Map = new Map(); - + nodeMap = new Map(); treeControl: FlatTreeControl; - treeFlattener: MatTreeFlattener; - // Flat tree data source dataSource: MatTreeFlatDataSource; @@ -125,24 +120,28 @@ export class TreeLoadmoreExample { database.initialize(); } - getChildren = (node: LoadmoreNode): Observable => { return node.childrenChange; }; + getChildren = (node: LoadmoreNode): Observable => node.childrenChange; transformer = (node: LoadmoreNode, level: number) => { - if (this.nodeMap.has(node.item)) { - return this.nodeMap.get(node.item)!; + const existingNode = this.nodeMap.get(node.item); + + if (existingNode) { + return existingNode; } - let newNode = new LoadmoreFlatNode(node.item, level, node.hasChildren, node.loadMoreParentItem); + + const newNode = + new LoadmoreFlatNode(node.item, level, node.hasChildren, node.loadMoreParentItem); this.nodeMap.set(node.item, newNode); return newNode; } - getLevel = (node: LoadmoreFlatNode) => { return node.level; }; + getLevel = (node: LoadmoreFlatNode) => node.level; - isExpandable = (node: LoadmoreFlatNode) => { return node.expandable; }; + isExpandable = (node: LoadmoreFlatNode) => node.expandable; - hasChild = (_: number, _nodeData: LoadmoreFlatNode) => { return _nodeData.expandable; }; + hasChild = (_: number, _nodeData: LoadmoreFlatNode) => _nodeData.expandable; - isLoadMore = (_: number, _nodeData: LoadmoreFlatNode) => { return _nodeData.item === LOAD_MORE; }; + isLoadMore = (_: number, _nodeData: LoadmoreFlatNode) => _nodeData.item === LOAD_MORE; /** Load more nodes from data source */ loadMore(item: string) { diff --git a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts index bdc37e34..9fe9960e 100755 --- a/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts +++ b/src/assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example.ts @@ -1,7 +1,7 @@ import {NestedTreeControl} from '@angular/cdk/tree'; import {Component, Injectable} from '@angular/core'; import {MatTreeNestedDataSource} from '@angular/material/tree'; -import {BehaviorSubject, of as observableOf} from 'rxjs'; +import {BehaviorSubject} from 'rxjs'; /** * Json node data with nested structure. Each node has a filename and a value or a list of children @@ -15,42 +15,41 @@ export class FileNode { /** * The Json tree data in string. The data could be parsed into Json object */ -const TREE_DATA = ` - { - "Documents": { - "angular": { - "src": { - "core": "ts", - "compiler": "ts" - } - }, - "material2": { - "src": { - "button": "ts", - "checkbox": "ts", - "input": "ts" - } +const TREE_DATA = JSON.stringify({ + Applications: { + Calendar: 'app', + Chrome: 'app', + Webstorm: 'app' + }, + Documents: { + angular: { + src: { + compiler: 'ts', + core: 'ts' } }, - "Downloads": { - "Tutorial": "html", - "November": "pdf", - "October": "pdf" - }, - "Pictures": { - "Sun": "png", - "Woods": "jpg", - "Photo Booth Library": { - "Contents": "dir", - "Pictures": "dir" - } - }, - "Applications": { - "Chrome": "app", - "Calendar": "app", - "Webstorm": "app" + material2: { + src: { + button: 'ts', + checkbox: 'ts', + input: 'ts' + } } - }`; + }, + Downloads: { + October: 'pdf', + November: 'pdf', + Tutorial: 'html' + }, + Pictures: { + 'Photo Booth Library': { + Contents: 'dir', + Pictures: 'dir' + }, + Sun: 'png', + Woods: 'jpg' + } +}); /** * File database, it can build a tree structured Json object from string. @@ -61,7 +60,7 @@ const TREE_DATA = ` */ @Injectable() export class FileDatabase { - dataChange: BehaviorSubject = new BehaviorSubject([]); + dataChange = new BehaviorSubject([]); get data(): FileNode[] { return this.dataChange.value; } @@ -85,22 +84,22 @@ export class FileDatabase { * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object. * The return value is the list of `FileNode`. */ - buildFileTree(value: any, level: number): FileNode[] { - let data: any[] = []; - for (let k in value) { - let v = value[k]; - let node = new FileNode(); - node.filename = `${k}`; - if (v === null || v === undefined) { - // no action - } else if (typeof v === 'object') { - node.children = this.buildFileTree(v, level + 1); - } else { - node.type = v; + buildFileTree(obj: object, level: number): FileNode[] { + return Object.keys(obj).reduce((accumulator, key) => { + const value = obj[key]; + const node = new FileNode(); + node.filename = key; + + if (value != null) { + if (typeof value === 'object') { + node.children = this.buildFileTree(value, level + 1); + } else { + node.type = value; + } } - data.push(node); - } - return data; + + return accumulator.concat(node); + }, []); } } @@ -115,7 +114,6 @@ export class FileDatabase { }) export class TreeNestedOverviewExample { nestedTreeControl: NestedTreeControl; - nestedDataSource: MatTreeNestedDataSource; constructor(database: FileDatabase) { @@ -125,7 +123,7 @@ export class TreeNestedOverviewExample { database.dataChange.subscribe(data => this.nestedDataSource.data = data); } - private _getChildren = (node: FileNode) => { return observableOf(node.children); }; + hasNestedChild = (_: number, nodeData: FileNode) => !nodeData.type; - hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); }; + private _getChildren = (node: FileNode) => node.children; } From 9630d0154f5d6abf8db5f97e73ead63ae712a2ed Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 28 Aug 2018 07:56:57 +0300 Subject: [PATCH 17/19] Updated various packages --- package-lock.json | 288 +++++++++++++++++++++++++++++++++------------- package.json | 4 +- 2 files changed, 212 insertions(+), 80 deletions(-) diff --git a/package-lock.json b/package-lock.json index d9f6e47e..733b7415 100644 --- a/package-lock.json +++ b/package-lock.json @@ -434,6 +434,148 @@ "integrity": "sha1-NOZY7T2jfyOwogDi2lqJvpK7IJ8=", "dev": true }, + "@babel/code-frame": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.51.tgz", + "integrity": "sha1-vXHZsZKvl435FYKdOdQJRFZDmgw=", + "dev": true, + "requires": { + "@babel/highlight": "7.0.0-beta.51" + } + }, + "@babel/generator": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.0.0-beta.51.tgz", + "integrity": "sha1-bHV1/952HQdIXgS67cA5LG2eMPY=", + "dev": true, + "requires": { + "@babel/types": "7.0.0-beta.51", + "jsesc": "^2.5.1", + "lodash": "^4.17.5", + "source-map": "^0.5.0", + "trim-right": "^1.0.1" + }, + "dependencies": { + "jsesc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz", + "integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=", + "dev": true + } + } + }, + "@babel/helper-function-name": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.51.tgz", + "integrity": "sha1-IbSHSiJ8+Z7K/MMKkDAtpaJkBWE=", + "dev": true, + "requires": { + "@babel/helper-get-function-arity": "7.0.0-beta.51", + "@babel/template": "7.0.0-beta.51", + "@babel/types": "7.0.0-beta.51" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.51.tgz", + "integrity": "sha1-MoGy0EWvlcFyzpGyCCXYXqRnZBE=", + "dev": true, + "requires": { + "@babel/types": "7.0.0-beta.51" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.51.tgz", + "integrity": "sha1-imw/ZsTSZTUvwHdIT59ugKUauXg=", + "dev": true, + "requires": { + "@babel/types": "7.0.0-beta.51" + } + }, + "@babel/highlight": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0-beta.51.tgz", + "integrity": "sha1-6IRK4loVlcz9QriWI7Q3bKBtIl0=", + "dev": true, + "requires": { + "chalk": "^2.0.0", + "esutils": "^2.0.2", + "js-tokens": "^3.0.0" + } + }, + "@babel/parser": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.0.0-beta.51.tgz", + "integrity": "sha1-J87C30Cd9gr1gnDtj2qlVAnqhvY=", + "dev": true + }, + "@babel/template": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.51.tgz", + "integrity": "sha1-lgKkCuvPNXrpZ34lMu9fyBD1+/8=", + "dev": true, + "requires": { + "@babel/code-frame": "7.0.0-beta.51", + "@babel/parser": "7.0.0-beta.51", + "@babel/types": "7.0.0-beta.51", + "lodash": "^4.17.5" + } + }, + "@babel/traverse": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.0.0-beta.51.tgz", + "integrity": "sha1-mB2vLOw0emIx06odnhgDsDqqpKg=", + "dev": true, + "requires": { + "@babel/code-frame": "7.0.0-beta.51", + "@babel/generator": "7.0.0-beta.51", + "@babel/helper-function-name": "7.0.0-beta.51", + "@babel/helper-split-export-declaration": "7.0.0-beta.51", + "@babel/parser": "7.0.0-beta.51", + "@babel/types": "7.0.0-beta.51", + "debug": "^3.1.0", + "globals": "^11.1.0", + "invariant": "^2.2.0", + "lodash": "^4.17.5" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "dev": true, + "requires": { + "ms": "2.0.0" + } + }, + "globals": { + "version": "11.7.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.7.0.tgz", + "integrity": "sha512-K8BNSPySfeShBQXsahYB/AbbWruVOTyVpgoIDnl8odPpeSfP2J5QO2oLFFdl2j7GfDCtZj2bMKar2T49itTPCg==", + "dev": true + } + } + }, + "@babel/types": { + "version": "7.0.0-beta.51", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.51.tgz", + "integrity": "sha1-2AK3tUO1g2x3iqaReXq/APPZfqk=", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.17.5", + "to-fast-properties": "^2.0.0" + }, + "dependencies": { + "to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true + } + } + }, "@ngrx/effects": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-6.1.0.tgz", @@ -578,9 +720,9 @@ "dev": true }, "@types/selenium-webdriver": { - "version": "2.53.43", - "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz", - "integrity": "sha512-UBYHWph6P3tutkbXpW6XYg9ZPbTKjw/YC2hGG1/GEvWwTbvezBUv3h+mmUFw79T3RFPnmedpiXdOBbXX+4l0jg==", + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-3.0.10.tgz", + "integrity": "sha512-ikB0JHv6vCR1KYUQAzTO4gi/lXLElT4Tx+6De2pc/OZwizE9LRNiTa+U8TBFKBD/nntPnr/MPSHSnOTybjhqNA==", "dev": true }, "@webassemblyjs/ast": { @@ -828,9 +970,9 @@ } }, "adm-zip": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz", - "integrity": "sha1-ph7VrmkFw66lizplfSUDMJEFJzY=", + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.11.tgz", + "integrity": "sha512-L8vcjDTCOIJk7wFvmlEUN7AsSb8T+2JrdP7KINBjzr24TJ5Mwj590sLu3BC7zNZowvJWa/JtPmD8eJCzdtDWjA==", "dev": true }, "after": { @@ -1704,6 +1846,15 @@ "electron-to-chromium": "^1.3.47" } }, + "browserstack": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/browserstack/-/browserstack-1.5.1.tgz", + "integrity": "sha512-O8VMT64P9NOLhuIoD4YngyxBURefaSdR4QdhG8l6HZ9VxtU7jc3m6jLufFwKA5gaf7fetfB2TnRJnMxyob+heg==", + "dev": true, + "requires": { + "https-proxy-agent": "^2.2.1" + } + }, "buffer": { "version": "4.9.1", "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", @@ -2133,9 +2284,9 @@ "dev": true }, "compare-versions": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.3.0.tgz", - "integrity": "sha512-MAAAIOdi2s4Gl6rZ76PNcUa9IOYB+5ICdT41o5uMRf09aEu/F9RK+qhe8RjXNPwcTjGV7KU7h2P/fljThFVqyQ==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.3.1.tgz", + "integrity": "sha512-GkIcfJ9sDt4+gS+RWH3X+kR7ezuKdu3fg2oA9nRA8HZoqZwAKv3ml3TyfB9OyV2iFXxCw7q5XfV6SyPbSCT2pw==", "dev": true }, "component-bind": { @@ -5826,9 +5977,9 @@ } }, "istanbul-api": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.3.1.tgz", - "integrity": "sha512-duj6AlLcsWNwUpfyfHt0nWIeRiZpuShnP40YTxOGQgtaN8fd6JYSxsvxUphTDy8V5MfDXo4s/xVCIIvVCO808g==", + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.3.6.tgz", + "integrity": "sha512-luJDnB1uJ5Qsg/WwusGfNXayQ4598yDgW5S0nUS85T576m1LVJzSqLrCDULkT6sTQXVKHa54093gNuCKumMCjQ==", "dev": true, "requires": { "async": "^2.1.4", @@ -5836,10 +5987,10 @@ "fileset": "^2.0.2", "istanbul-lib-coverage": "^1.2.0", "istanbul-lib-hook": "^1.2.0", - "istanbul-lib-instrument": "^1.10.1", + "istanbul-lib-instrument": "^2.1.0", "istanbul-lib-report": "^1.1.4", - "istanbul-lib-source-maps": "^1.2.4", - "istanbul-reports": "^1.3.0", + "istanbul-lib-source-maps": "^1.2.5", + "istanbul-reports": "^1.4.1", "js-yaml": "^3.7.0", "mkdirp": "^0.5.1", "once": "^1.4.0" @@ -5853,6 +6004,29 @@ "requires": { "lodash": "^4.17.10" } + }, + "istanbul-lib-instrument": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-2.3.2.tgz", + "integrity": "sha512-l7TD/VnBsIB2OJvSyxaLW/ab1+92dxZNH9wLH7uHPPioy3JZ8tnx2UXUdKmdkgmP2EFPzg64CToUP6dAS3U32Q==", + "dev": true, + "requires": { + "@babel/generator": "7.0.0-beta.51", + "@babel/parser": "7.0.0-beta.51", + "@babel/template": "7.0.0-beta.51", + "@babel/traverse": "7.0.0-beta.51", + "@babel/types": "7.0.0-beta.51", + "istanbul-lib-coverage": "^2.0.1", + "semver": "^5.5.0" + }, + "dependencies": { + "istanbul-lib-coverage": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", + "integrity": "sha512-nPvSZsVlbG9aLhZYaC3Oi1gT/tpyo3Yt5fNyf6NmcKIayz4VV/txxJFFKAK/gU4dcNn8ehsanBbVHVl0+amOLA==", + "dev": true + } + } } } }, @@ -5975,12 +6149,12 @@ } }, "istanbul-reports": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.3.0.tgz", - "integrity": "sha512-y2Z2IMqE1gefWUaVjrBm0mSKvUkaBy9Vqz8iwr/r40Y9hBbIteH5wqHG/9DLTfJ9xUnUT2j7A3+VVJ6EaYBllA==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.5.0.tgz", + "integrity": "sha512-HeZG0WHretI9FXBni5wZ9DOgNziqDCEwetxnme5k1Vv5e81uTqcsy3fMH99gXGDGKr1ea87TyGseDMa2h4HEUA==", "dev": true, "requires": { - "handlebars": "^4.0.3" + "handlebars": "^4.0.11" } }, "jasmine": { @@ -6356,9 +6530,9 @@ } }, "karma-coverage-istanbul-reporter": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-2.0.1.tgz", - "integrity": "sha512-UcgrHkFehI5+ivMouD8NH/UOHiX4oCAtwaANylzPFdcAuD52fnCUuelacq2gh8tZ4ydhU3+xiXofSq7j5Ehygw==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-2.0.2.tgz", + "integrity": "sha512-IIIrfsfYJKkAyyjRrBx8CZRl2UXi2OSrxKRAA95mkpOMF3Zw5FpjE+v79pWuwu1Keu0pdjcfElmmOuAEjFQshA==", "dev": true, "requires": { "istanbul-api": "^1.3.1", @@ -7977,15 +8151,16 @@ "dev": true }, "protractor": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.3.2.tgz", - "integrity": "sha512-pw4uwwiy5lHZjIguxNpkEwJJa7hVz+bJsvaTI+IbXlfn2qXwzbF8eghW/RmrZwE2sGx82I8etb8lVjQ+JrjejA==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.4.0.tgz", + "integrity": "sha512-6TSYqMhUUzxr4/wN0ttSISqPMKvcVRXF4k8jOEpGWD8OioLak4KLgfzHK9FJ49IrjzRrZ+Mx1q2Op8Rk0zEcnQ==", "dev": true, "requires": { "@types/node": "^6.0.46", "@types/q": "^0.0.32", - "@types/selenium-webdriver": "~2.53.39", + "@types/selenium-webdriver": "^3.0.0", "blocking-proxy": "^1.0.0", + "browserstack": "^1.5.1", "chalk": "^1.1.3", "glob": "^7.0.3", "jasmine": "2.8.0", @@ -7995,20 +8170,14 @@ "saucelabs": "^1.5.0", "selenium-webdriver": "3.6.0", "source-map-support": "~0.4.0", - "webdriver-js-extender": "^1.0.0", + "webdriver-js-extender": "2.0.0", "webdriver-manager": "^12.0.6" }, "dependencies": { "@types/node": { - "version": "6.0.114", - "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.114.tgz", - "integrity": "sha512-5ViC9dwf1VIAtrOFTvOuN04lJgw28eKjuy0Vg2Bd/fSlxKP2feCSkIw04ZgOENL2ywdWrtbkthp1XVLEjJmouw==", - "dev": true - }, - "adm-zip": { - "version": "0.4.11", - "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.11.tgz", - "integrity": "sha512-L8vcjDTCOIJk7wFvmlEUN7AsSb8T+2JrdP7KINBjzr24TJ5Mwj590sLu3BC7zNZowvJWa/JtPmD8eJCzdtDWjA==", + "version": "6.0.116", + "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.116.tgz", + "integrity": "sha512-vToa8YEeulfyYg1gSOeHjvvIRqrokng62VMSj2hoZrwZNcYrp2h3AWo6KeBVuymIklQUaY5zgVJvVsC4KiiLkQ==", "dev": true }, "ansi-styles": { @@ -10505,50 +10674,13 @@ } }, "webdriver-js-extender": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz", - "integrity": "sha1-gcUzqeM9W/tZe05j4s2yW1R3dRU=", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.0.0.tgz", + "integrity": "sha512-fbyKiVu3azzIc5d4+26YfuPQcFTlgFQV5yQ/0OQj4Ybkl4g1YQuIPskf5v5wqwRJhHJnPHthB6tqCjWHOKLWag==", "dev": true, "requires": { - "@types/selenium-webdriver": "^2.53.35", - "selenium-webdriver": "^2.53.2" - }, - "dependencies": { - "sax": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz", - "integrity": "sha1-VjsZx8HeiS4Jv8Ty/DDjwn8JUrk=", - "dev": true - }, - "selenium-webdriver": { - "version": "2.53.3", - "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.53.3.tgz", - "integrity": "sha1-0p/1qVff8aG0ncRXdW5OS/vc4IU=", - "dev": true, - "requires": { - "adm-zip": "0.4.4", - "rimraf": "^2.2.8", - "tmp": "0.0.24", - "ws": "^1.0.1", - "xml2js": "0.4.4" - } - }, - "tmp": { - "version": "0.0.24", - "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz", - "integrity": "sha1-1qXhmNFKmDXMby18PZ4wJCjIzxI=", - "dev": true - }, - "xml2js": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.4.tgz", - "integrity": "sha1-MREBAAMAiuGSQOuhdJe1fHKcVV0=", - "dev": true, - "requires": { - "sax": "0.6.x", - "xmlbuilder": ">=1.0.0" - } - } + "@types/selenium-webdriver": "^3.0.0", + "selenium-webdriver": "^3.0.1" } }, "webpack": { diff --git a/package.json b/package.json index 216971af..e69922e8 100644 --- a/package.json +++ b/package.json @@ -77,10 +77,10 @@ "jasmine-spec-reporter": "4.2.1", "karma": "1.7.1", "karma-chrome-launcher": "2.2.0", - "karma-coverage-istanbul-reporter": "2.0.1", + "karma-coverage-istanbul-reporter": "2.0.2", "karma-jasmine": "1.1.2", "karma-jasmine-html-reporter": "0.2.2", - "protractor": "5.3.2", + "protractor": "5.4.0", "ts-node": "5.0.1", "tslint": "5.9.1", "typescript": "2.7.2", From 0b2af161f406d6778c24076bbb26cf96b28b4e3c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 28 Aug 2018 08:07:17 +0300 Subject: [PATCH 18/19] (MailNgrx) Fixed depreciated ngrx/rxjs stuff --- .../contacts/sidebars/main/main.component.ts | 2 +- .../mail-ngrx/store/effects/mails.effects.ts | 32 +++++++++---------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/app/main/apps/contacts/sidebars/main/main.component.ts b/src/app/main/apps/contacts/sidebars/main/main.component.ts index d9b69540..3ce6db1e 100644 --- a/src/app/main/apps/contacts/sidebars/main/main.component.ts +++ b/src/app/main/apps/contacts/sidebars/main/main.component.ts @@ -51,7 +51,7 @@ export class ContactsMainSidebarComponent implements OnInit, OnDestroy /** * On destroy */ - ngOnDestroy() + ngOnDestroy(): void { // Unsubscribe from all subscriptions this._unsubscribeAll.next(); diff --git a/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts b/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts index e062e17f..3e3cddf1 100644 --- a/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts +++ b/src/app/main/apps/mail-ngrx/store/effects/mails.effects.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { Action, Store } from '@ngrx/store'; +import { Action, select, Store } from '@ngrx/store'; import { Actions, Effect, ofType } from '@ngrx/effects'; import { Observable, of, forkJoin } from 'rxjs'; @@ -24,12 +24,14 @@ export class MailsEffect private store: Store ) { - this.store.select(getRouterState).subscribe(routerState => { - if ( routerState ) - { - this.routerState = routerState.state; - } - }); + this.store + .pipe(select(getRouterState)) + .subscribe(routerState => { + if ( routerState ) + { + this.routerState = routerState.state; + } + }); } /** @@ -101,11 +103,9 @@ export class MailsEffect .pipe( ofType(MailsActions.UPDATE_MAILS), exhaustMap((action) => { - return forkJoin( - action.payload.map(mail => this.mailService.updateMail(mail)), - () => { - return new MailsActions.UpdateMailsSuccess(); - }); + return forkJoin(action.payload.map(mail => this.mailService.updateMail(mail))).pipe(map(() => { + return new MailsActions.UpdateMailsSuccess(); + })); }) ); @@ -118,7 +118,7 @@ export class MailsEffect this.actions .pipe( ofType(MailsActions.SET_CURRENT_MAIL), - withLatestFrom(this.store.select(getMailsState)), + withLatestFrom(this.store.pipe(select(getMailsState))), map(([action, state]) => { return new MailsActions.SetCurrentMailSuccess(state.entities[action.payload]); }) @@ -135,7 +135,7 @@ export class MailsEffect this.actions .pipe( ofType(MailsActions.CHECK_CURRENT_MAIL), - withLatestFrom(this.store.select(getMailsState)), + withLatestFrom(this.store.pipe(select(getMailsState))), map(([action, state]) => { if ( !state.entities[this.routerState.params.mailId] ) @@ -200,7 +200,7 @@ export class MailsEffect .pipe( ofType(MailsActions.SET_FOLDER_ON_SELECTED_MAILS), withLatestFrom( - this.store.select(getMailsState)), + this.store.pipe(select(getMailsState))), map(([action, state]) => { const entities = {...state.entities}; let mailsToUpdate = []; @@ -227,7 +227,7 @@ export class MailsEffect this.actions .pipe( ofType(MailsActions.ADD_LABEL_ON_SELECTED_MAILS), - withLatestFrom(this.store.select(getMailsState)), + withLatestFrom(this.store.pipe(select(getMailsState))), map(([action, state]) => { const entities = {...state.entities}; From a5b6e545a7c08963b32125bd25b1159f19f962b9 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Tue, 28 Aug 2018 08:07:28 +0300 Subject: [PATCH 19/19] Added return types --- e2e/src/app.po.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts index 8327f3c3..99860d83 100644 --- a/e2e/src/app.po.ts +++ b/e2e/src/app.po.ts @@ -1,11 +1,11 @@ import { browser, by, element } from 'protractor'; export class Fuse2Page { - navigateTo() { + navigateTo(): any { return browser.get('/'); } - getParagraphText() { + getParagraphText(): any { return element(by.css('app-root h1')).getText(); } }