Increased version number

Fixed: Sidenav helper causes issues on mobile media steps

.angular-cli.json

@@ -39,15 +39,27 @@
     "lint": [
         {
             "project": "src/tsconfig.app.json",
-            "exclude": "**/node_modules/**"
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
         },
         {
             "project": "src/tsconfig.spec.json",
-            "exclude": "**/node_modules/**"
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
         },
         {
             "project": "e2e/tsconfig.e2e.json",
-            "exclude": "**/node_modules/**"
+            "exclude": [
+                "**/node_modules/**",
+                "**/src/app/fuse-fake-db/**/*",
+                "**/src/assets/angular-material-examples/**/*"
+            ]
         }
     ],
     "test": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuse2",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "license": "",
   "scripts": {
     "ng": "ng",
@@ -16,48 +16,49 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.0.1",
-    "@angular/cdk": "5.0.0-rc0",
-    "@angular/common": "5.0.1",
-    "@angular/compiler": "5.0.1",
-    "@angular/core": "5.0.1",
-    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "5.0.1",
-    "@angular/http": "5.0.1",
-    "@angular/material": "5.0.0-rc0",
-    "@angular/platform-browser": "5.0.1",
-    "@angular/platform-browser-dynamic": "5.0.1",
-    "@angular/router": "5.0.1",
+    "@angular/animations": "5.0.3",
+    "@angular/cdk": "5.0.0-rc.1",
+    "@angular/common": "5.0.3",
+    "@angular/compiler": "5.0.3",
+    "@angular/core": "5.0.3",
+    "@angular/flex-layout": "2.0.0-beta.10-4905443",
+    "@angular/forms": "5.0.3",
+    "@angular/http": "5.0.3",
+    "@angular/material": "5.0.0-rc.1",
+    "@angular/material-moment-adapter": "5.0.0-rc.1",
+    "@angular/platform-browser": "5.0.3",
+    "@angular/platform-browser-dynamic": "5.0.3",
+    "@angular/router": "5.0.3",
     "@ngx-translate/core": "8.0.0",
-    "@swimlane/ngx-charts": "6.1.0",
-    "@swimlane/ngx-datatable": "11.0.3",
+    "@swimlane/ngx-charts": "7.0.1",
+    "@swimlane/ngx-datatable": "11.1.4",
     "@withinpixels/ngx-dnd": "3.1.0",
-    "angular-calendar": "0.21.3",
+    "angular-calendar": "0.22.1",
     "angular-in-memory-web-api": "0.5.1",
     "angular2-markdown": "1.6.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.1",
-    "d3": "4.11.0",
+    "d3": "4.12.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
     "moment": "2.19.2",
-    "ngx-color-picker": "4.4.0",
+    "ngx-color-picker": "5.0.4",
     "ngx-cookie-service": "1.0.9",
-    "perfect-scrollbar": "1.0.3",
+    "perfect-scrollbar": "1.2.0",
     "rxjs": "5.5.2",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.0",
-    "@angular/compiler-cli": "5.0.1",
-    "@angular/language-service": "5.0.1",
+    "@angular/cli": "1.5.4",
+    "@angular/compiler-cli": "5.0.3",
+    "@angular/language-service": "5.0.3",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.90",
-    "codelyzer": "3.2.2",
+    "@types/node": "6.0.92",
+    "codelyzer": "4.0.1",
     "jasmine-core": "2.6.4",
     "jasmine-spec-reporter": "4.1.1",
     "karma": "1.7.1",

src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts

@@ -13,7 +13,6 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
     matchMediaSubscription: Subscription;
 
     @HostBinding('class.mat-is-locked-open') isLockedOpen = true;
-    @HostBinding('class.mat-stop-transition') stopTransition = true;
 
     @Input('fuseMatSidenavHelper') id: string;
     @Input('mat-is-locked-open') matIsLockedOpenBreakpoint: string;
@@ -33,45 +32,31 @@ export class FuseMatSidenavHelperDirective implements OnInit, OnDestroy
 
         if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
         {
-            setTimeout(() => {
-                this.isLockedOpen = true;
-                this.matSidenav.mode = 'side';
-                this.matSidenav.open();
-            });
-            this.stopTransition = false;
+            this.isLockedOpen = true;
+            this.matSidenav.mode = 'side';
+            this.matSidenav.toggle(true);
         }
         else
         {
-            setTimeout(() => {
-                this.isLockedOpen = false;
-                this.matSidenav.mode = 'over';
-                this.matSidenav.close();
-            });
-
-            setTimeout(() => {
-                this.stopTransition = false;
-            }, 3000);
+            this.isLockedOpen = false;
+            this.matSidenav.mode = 'over';
+            this.matSidenav.toggle(false);
         }
 
         this.matchMediaSubscription = this.fuseMatchMedia.onMediaChange.subscribe(() => {
             if ( this.observableMedia.isActive(this.matIsLockedOpenBreakpoint) )
             {
-                setTimeout(() => {
-                    this.isLockedOpen = true;
-                    this.matSidenav.mode = 'side';
-                    this.matSidenav.open();
-                });
+                this.isLockedOpen = true;
+                this.matSidenav.mode = 'side';
+                this.matSidenav.toggle(true);
             }
             else
             {
-                setTimeout(() => {
-                    this.isLockedOpen = false;
-                    this.matSidenav.mode = 'over';
-                    this.matSidenav.close();
-                });
+                this.isLockedOpen = false;
+                this.matSidenav.mode = 'over';
+                this.matSidenav.toggle(false);
             }
         });
-
     }
 
     ngOnDestroy()

src/app/core/matColors.ts

@@ -681,6 +681,7 @@ 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'
 ];

src/app/core/scss/partials/_angular-material-fix.scss

@@ -6,42 +6,6 @@
     }
 }
 
-// Fix: "Sidenav opening with animations for the first time"
-mat-sidenav-container {
-
-    mat-sidenav {
-
-        &[mat-is-locked-open].mat-stop-transition {
-            transition: none !important;
-            transform: translate3d(0, 0, 0) !important;
-            opacity: 0;
-
-            ~ .mat-sidenav-content,
-            ~ .mat-drawer-content {
-                transition: none !important;
-            }
-        }
-
-        &.mat-sidenav-opened {
-
-            &.mat-drawer-side {
-
-                ~ .mat-sidenav-content,
-                ~ .mat-drawer-content {
-                    transition: none !important;
-                    transform: translate3d(0, 0, 0) !important;
-                }
-            }
-        }
-
-        &.mat-drawer-end {
-        }
-    }
-
-    .mat-drawer-content {
-    }
-}
-
 // Fix: "Inconsistent font sizes across elements"
 .mat-input-wrapper {
     font-size: 16px;

src/app/main/content/apps/chat/chat.component.html

@@ -13,7 +13,7 @@
             <mat-sidenav-container>
 
                 <!-- LEFT SIDENAV -->
-                <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+                <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                              fuseMatSidenavHelper="chat-left-sidenav" mat-is-locked-open="gt-md">
                     <fuse-chat-left-sidenav></fuse-chat-left-sidenav>
                 </mat-sidenav>
@@ -26,7 +26,7 @@
                 <!-- / CONTENT -->
 
                 <!-- RIGHT SIDENAV -->
-                <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="false" mode="over"
+                <mat-sidenav class="sidenav" align="end" opened="false" mode="over"
                              fuseMatSidenavHelper="chat-right-sidenav">
                     <fuse-chat-right-sidenav></fuse-chat-right-sidenav>
                 </mat-sidenav>

src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ChatService } from '../../../chat.service';
 import { FormControl, FormGroup } from '@angular/forms';
+import 'rxjs/add/operator/distinctUntilChanged';
 
 @Component({
     selector   : 'fuse-chat-user-sidenav',

src/app/main/content/apps/contacts/contact-form/contact-form.component.scss

@@ -1,3 +1,5 @@
+@import "src/app/core/scss/fuse";
+
 .contact-form-dialog {
 
     .mat-dialog-container {
@@ -5,6 +7,10 @@
         width: 400px;
         overflow: hidden;
 
+        @include media-breakpoint('xs') {
+            width: auto;
+        }
+
         .mat-toolbar {
             min-height: initial;
         }

src/app/main/content/apps/contacts/contact-list/contact-list.component.scss

@@ -44,12 +44,9 @@ fuse-contacts-contact-list {
 }
 
 #add-contact-button {
-    position: fixed;
+    position: absolute;
     bottom: 12px;
     right: 12px;
     padding: 0;
-
-    @include media-breakpoint-down('xs') {
-        top: 12px;
-    }
-}
+    z-index: 99;
+}

src/app/main/content/apps/contacts/contact-list/contact-list.component.ts

@@ -55,6 +55,11 @@ export class FuseContactsContactListComponent implements OnInit, OnDestroy
             this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => {
                 for ( const id in this.checkboxes )
                 {
+                    if ( !this.checkboxes.hasOwnProperty(id) )
+                    {
+                        continue;
+                    }
+
                     this.checkboxes[id] = selectedContacts.includes(id);
                 }
                 this.selectedContacts = selectedContacts;

src/app/main/content/apps/contacts/contacts.component.html

@@ -42,7 +42,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="contacts-main-sidenav" mat-is-locked-open="gt-sm">
 
             <fuse-contacts-main-sidenav *fuseIfOnDom [@animate]="{value:'*'}"></fuse-contacts-main-sidenav>

src/app/main/content/apps/contacts/contacts.component.scss

@@ -3,12 +3,4 @@
     .content {
         overflow: hidden;
     }
-}
-
-#add-contact-button {
-    position: absolute;
-    bottom: 12px;
-    right: 12px;
-    padding: 0;
-    z-index: 99;
 }

src/app/main/content/apps/contacts/contacts.component.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { ContactsService } from './contacts.service';
 import { fuseAnimations } from '../../../../core/animations';
 import { FormControl, FormGroup } from '@angular/forms';
 import { FuseContactsContactFormDialogComponent } from './contact-form/contact-form.component';
 import { MatDialog } from '@angular/material';
+import 'rxjs/add/operator/distinctUntilChanged';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector     : 'fuse-contacts',
@@ -12,11 +14,12 @@ import { MatDialog } from '@angular/material';
     encapsulation: ViewEncapsulation.None,
     animations   : fuseAnimations
 })
-export class FuseContactsComponent implements OnInit
+export class FuseContactsComponent implements OnInit, OnDestroy
 {
     hasSelectedContacts: boolean;
     searchInput: FormControl;
     dialogRef: any;
+    onSelectedContactsChangedSubscription: Subscription;
 
     constructor(
         private contactsService: ContactsService,
@@ -50,11 +53,11 @@ export class FuseContactsComponent implements OnInit
 
     ngOnInit()
     {
-
-        this.contactsService.onSelectedContactsChanged
-            .subscribe(selectedContacts => {
-                this.hasSelectedContacts = selectedContacts.length > 0;
-            });
+        this.onSelectedContactsChangedSubscription =
+            this.contactsService.onSelectedContactsChanged
+                .subscribe(selectedContacts => {
+                    this.hasSelectedContacts = selectedContacts.length > 0;
+                });
 
         this.searchInput.valueChanges
             .debounceTime(300)
@@ -64,4 +67,8 @@ export class FuseContactsComponent implements OnInit
             });
     }
 
+    ngOnDestroy()
+    {
+        this.onSelectedContactsChangedSubscription.unsubscribe();
+    }
 }

src/app/main/content/apps/dashboards/project/project.component.html

@@ -688,7 +688,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" mode="side" opened="true" fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md">
+        <mat-sidenav class="sidenav" align="end" mode="side" opened="true" fuseMatSidenavHelper="dashboards-right-sidenav" mat-is-locked-open="gt-md">
 
             <div class="sidenav-content" fusePerfectScrollbar>
 

src/app/main/content/apps/file-manager/file-manager.component.html

@@ -69,7 +69,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav right-sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav right-sidenav " align="end" opened="true" mode="side"
                      fuseMatSidenavHelper="file-manager-right-sidenav" mat-is-locked-open="gt-md">
             <fuse-file-manager-details-sidenav></fuse-file-manager-details-sidenav>
         </mat-sidenav>

src/app/main/content/apps/mail/mail.component.html

@@ -7,7 +7,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" mode="side" opened="true"
+        <mat-sidenav class="sidenav" align="start" mode="side" opened="true"
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
             <fuse-mail-main-sidenav></fuse-mail-main-sidenav>
         </mat-sidenav>

src/app/main/content/apps/todo/todo-details/todo-details.component.ts

@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs/Subscription';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { FuseUtils } from '../../../../../core/fuseUtils';
 import { fuseAnimations } from '../../../../../core/animations';
+import 'rxjs/add/operator/distinctUntilChanged';
 
 @Component({
     selector   : 'fuse-todo-details',

src/app/main/content/apps/todo/todo.component.html

@@ -7,7 +7,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
             <fuse-todo-main-sidenav></fuse-todo-main-sidenav>
         </mat-sidenav>

src/app/main/content/apps/todo/todo.component.ts

@@ -1,9 +1,10 @@
-import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { TodoService } from './todo.service';
 import { FormControl } from '@angular/forms';
 import { Todo } from './todo.model';
 import { fuseAnimations } from '../../../../core/animations';
+import 'rxjs/add/operator/distinctUntilChanged';
 
 @Component({
     selector   : 'fuse-todo',

src/app/main/content/components/angular-material/angular-material.module.ts

@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '../../../../core/modules/shared.module';
 import { FuseWidgetModule } from '../../../../core/components/widget/widget.module';
-import { FuseAngularMaterialComponent } from 'app/main/content/components/angular-material/angular-material.component';
 import { FuseExampleViewerComponent } from './example-viewer/example-viewer';
 import { EXAMPLE_LIST } from './example-components';
+import { FuseAngularMaterialComponent } from './angular-material.component';
 
 const routes: Routes = [
     {

src/app/main/content/components/angular-material/example-components.ts

@@ -15,15 +15,22 @@ import { ChipsInputExample } from '../../../../../assets/angular-material-exampl
 import { ChipsOverviewExample } from '../../../../../assets/angular-material-examples/chips-overview/chips-overview-example';
 import { ChipsStackedExample } from '../../../../../assets/angular-material-examples/chips-stacked/chips-stacked-example';
 import { DatepickerApiExample } from '../../../../../assets/angular-material-examples/datepicker-api/datepicker-api-example';
+import { DatepickerDisabledExample } from '../../../../../assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example';
+import { DatepickerEventsExample } from '../../../../../assets/angular-material-examples/datepicker-events/datepicker-events-example';
 import { DatepickerFilterExample } from '../../../../../assets/angular-material-examples/datepicker-filter/datepicker-filter-example';
+import { DatepickerFormatsExample } from '../../../../../assets/angular-material-examples/datepicker-formats/datepicker-formats-example';
+import { DatepickerLocaleExample } from '../../../../../assets/angular-material-examples/datepicker-locale/datepicker-locale-example';
 import { DatepickerMinMaxExample } from '../../../../../assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example';
+import { DatepickerMomentExample } from '../../../../../assets/angular-material-examples/datepicker-moment/datepicker-moment-example';
 import { DatepickerOverviewExample } from '../../../../../assets/angular-material-examples/datepicker-overview/datepicker-overview-example';
 import { DatepickerStartViewExample } from '../../../../../assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example';
 import { DatepickerTouchExample } from '../../../../../assets/angular-material-examples/datepicker-touch/datepicker-touch-example';
+import { DatepickerValueExample } from '../../../../../assets/angular-material-examples/datepicker-value/datepicker-value-example';
 import { DialogContentExampleDialog, DialogContentExample } from '../../../../../assets/angular-material-examples/dialog-content/dialog-content-example';
 import { DialogDataExampleDialog, DialogDataExample } from '../../../../../assets/angular-material-examples/dialog-data/dialog-data-example';
 import { DialogElementsExampleDialog, DialogElementsExample } from '../../../../../assets/angular-material-examples/dialog-elements/dialog-elements-example';
 import { DialogOverviewExampleDialog, DialogOverviewExample } from '../../../../../assets/angular-material-examples/dialog-overview/dialog-overview-example';
+import { ElevationOverviewExample } from '../../../../../assets/angular-material-examples/elevation-overview/elevation-overview-example';
 import { ExpansionOverviewExample } from '../../../../../assets/angular-material-examples/expansion-overview/expansion-overview-example';
 import { ExpansionStepsExample } from '../../../../../assets/angular-material-examples/expansion-steps/expansion-steps-example';
 import { MyTelInput, FormFieldCustomControlExample } from '../../../../../assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example';
@@ -37,7 +44,9 @@ import { GridListDynamicExample } from '../../../../../assets/angular-material-e
 import { GridListOverviewExample } from '../../../../../assets/angular-material-examples/grid-list-overview/grid-list-overview-example';
 import { IconOverviewExample } from '../../../../../assets/angular-material-examples/icon-overview/icon-overview-example';
 import { IconSvgExample } from '../../../../../assets/angular-material-examples/icon-svg/icon-svg-example';
+import { InputAutosizeTextareaExample } from '../../../../../assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example';
 import { InputClearableExample } from '../../../../../assets/angular-material-examples/input-clearable/input-clearable-example';
+import { InputErrorStateMatcherExample } from '../../../../../assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example';
 import { InputErrorsExample } from '../../../../../assets/angular-material-examples/input-errors/input-errors-example';
 import { InputFormExample } from '../../../../../assets/angular-material-examples/input-form/input-form-example';
 import { InputHintExample } from '../../../../../assets/angular-material-examples/input-hint/input-hint-example';
@@ -51,14 +60,27 @@ import { MenuOverviewExample } from '../../../../../assets/angular-material-exam
 import { NestedMenuExample } from '../../../../../assets/angular-material-examples/nested-menu/nested-menu-example';
 import { PaginatorConfigurableExample } from '../../../../../assets/angular-material-examples/paginator-configurable/paginator-configurable-example';
 import { PaginatorOverviewExample } from '../../../../../assets/angular-material-examples/paginator-overview/paginator-overview-example';
+import { ProgressBarBufferExample } from '../../../../../assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example';
 import { ProgressBarConfigurableExample } from '../../../../../assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example';
-import { ProgressBarOverviewExample } from '../../../../../assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example';
+import { ProgressBarDeterminateExample } from '../../../../../assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example';
+import { ProgressBarIndeterminateExample } from '../../../../../assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example';
+import { ProgressBarQueryExample } from '../../../../../assets/angular-material-examples/progress-bar-query/progress-bar-query-example';
 import { ProgressSpinnerConfigurableExample } from '../../../../../assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example';
 import { ProgressSpinnerOverviewExample } from '../../../../../assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example';
 import { RadioNgModelExample } from '../../../../../assets/angular-material-examples/radio-ng-model/radio-ng-model-example';
 import { RadioOverviewExample } from '../../../../../assets/angular-material-examples/radio-overview/radio-overview-example';
+import { SelectCustomTriggerExample } from '../../../../../assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example';
+import { SelectDisabledExample } from '../../../../../assets/angular-material-examples/select-disabled/select-disabled-example';
+import { SelectErrorStateMatcherExample } from '../../../../../assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example';
 import { SelectFormExample } from '../../../../../assets/angular-material-examples/select-form/select-form-example';
+import { SelectHintErrorExample } from '../../../../../assets/angular-material-examples/select-hint-error/select-hint-error-example';
+import { SelectMultipleExample } from '../../../../../assets/angular-material-examples/select-multiple/select-multiple-example';
+import { SelectNoRippleExample } from '../../../../../assets/angular-material-examples/select-no-ripple/select-no-ripple-example';
+import { SelectOptgroupExample } from '../../../../../assets/angular-material-examples/select-optgroup/select-optgroup-example';
 import { SelectOverviewExample } from '../../../../../assets/angular-material-examples/select-overview/select-overview-example';
+import { SelectPanelClassExample } from '../../../../../assets/angular-material-examples/select-panel-class/select-panel-class-example';
+import { SelectResetExample } from '../../../../../assets/angular-material-examples/select-reset/select-reset-example';
+import { SelectValueBindingExample } from '../../../../../assets/angular-material-examples/select-value-binding/select-value-binding-example';
 import { SidenavFabExample } from '../../../../../assets/angular-material-examples/sidenav-fab/sidenav-fab-example';
 import { SidenavOverviewExample } from '../../../../../assets/angular-material-examples/sidenav-overview/sidenav-overview-example';
 import { SlideToggleConfigurableExample } from '../../../../../assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example';
@@ -97,10 +119,16 @@ export const COMPONENT_MAP = {
     'datepicker'      : [
         'datepicker-overview',
         'datepicker-start-view',
+        'datepicker-value',
         'datepicker-min-max',
         'datepicker-filter',
+        'datepicker-events',
+        'datepicker-disabled',
         'datepicker-touch',
-        'datepicker-api'
+        'datepicker-api',
+        'datepicker-locale',
+        'datepicker-moment',
+        'datepicker-formats'
     ],
     'form-field'      : [
         'form-field-overview',
@@ -114,6 +142,8 @@ export const COMPONENT_MAP = {
     'input'           : [
         'input-overview',
         'input-errors',
+        'input-error-state-matcher',
+        'input-autosize-textarea',
         'input-prefix-suffix',
         'input-hint',
         'input-clearable',
@@ -125,7 +155,17 @@ export const COMPONENT_MAP = {
     ],
     'select'          : [
         'select-overview',
-        'select-form'
+        'select-value-binding',
+        'select-form',
+        'select-hint-error',
+        'select-disabled',
+        'select-reset',
+        'select-optgroup',
+        'select-multiple',
+        'select-custom-trigger',
+        'select-no-ripple',
+        'select-panel-class',
+        'select-error-state-matcher'
     ],
     'slider'          : [
         'slider-overview',
@@ -169,6 +209,9 @@ export const COMPONENT_MAP = {
         'tabs-overview',
         'tabs-template-label'
     ],
+    'elevation'       : [
+        'elevation-overview'
+    ],
     'expansion-panel' : [
         'expansion-overview',
         'expansion-steps'
@@ -195,7 +238,10 @@ export const COMPONENT_MAP = {
         'progress-spinner-configurable'
     ],
     'progress-bar'    : [
-        'progress-bar-overview',
+        'progress-bar-determinate',
+        'progress-bar-indeterminate',
+        'progress-bar-query',
+        'progress-bar-buffer',
         'progress-bar-configurable'
     ],
     'dialog'          : [
@@ -324,41 +370,77 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'datepicker-api'               : {
-        title          : 'Datepicker API',
+        title          : 'Datepicker open method ',
         component      : DatepickerApiExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-disabled'          : {
+        title          : 'Disabled datepicker ',
+        component      : DatepickerDisabledExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'datepicker-events'            : {
+        title          : 'Datepicker input and change events ',
+        component      : DatepickerEventsExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'datepicker-filter'            : {
-        title          : 'Datepicker Filter',
+        title          : 'Datepicker with filter validation ',
         component      : DatepickerFilterExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-formats'           : {
+        title          : 'Datepicker with custom formats ',
+        component      : DatepickerFormatsExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'datepicker-locale'            : {
+        title          : 'Datepicker with different locale ',
+        component      : DatepickerLocaleExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'datepicker-min-max'           : {
-        title          : 'Datepicker Min Max',
+        title          : 'Datepicker with min & max validation ',
         component      : DatepickerMinMaxExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-moment'            : {
+        title          : 'Datepicker that uses Moment.js dates ',
+        component      : DatepickerMomentExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'datepicker-overview'          : {
-        title          : 'Basic datepicker',
+        title          : 'Basic datepicker ',
         component      : DatepickerOverviewExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-start-view'        : {
-        title          : 'Datepicker start date',
+        title          : 'Datepicker start date ',
         component      : DatepickerStartViewExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-touch'             : {
-        title          : 'Datepicker Touch',
+        title          : 'Datepicker touch UI ',
         component      : DatepickerTouchExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-value'             : {
+        title          : 'Datepicker selected value ',
+        component      : DatepickerValueExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'dialog-content'               : {
         title          : 'Dialog with header, scrollable content and actions',
         component      : DialogContentExample,
@@ -383,6 +465,12 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: ['dialog-overview-example-dialog.html'],
         selectorName   : 'DialogOverviewExample, DialogOverviewExampleDialog'
     },
+    'elevation-overview'           : {
+        title          : 'Elevation CSS classes',
+        component      : ElevationOverviewExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'expansion-overview'           : {
         title          : 'Basic expansion panel',
         component      : ExpansionOverviewExample,
@@ -461,14 +549,26 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'input-autosize-textarea'      : {
+        title          : 'Auto-resizing textarea ',
+        component      : InputAutosizeTextareaExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'input-clearable'              : {
-        title          : 'Input Clearable',
+        title          : 'Input with a clear button',
         component      : InputClearableExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'input-error-state-matcher'    : {
+        title          : 'Input with a custom ErrorStateMatcher ',
+        component      : InputErrorStateMatcherExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'input-errors'                 : {
-        title          : 'Input Errors',
+        title          : 'Input with error messages',
         component      : InputErrorsExample,
         additionalFiles: null,
         selectorName   : null
@@ -480,7 +580,7 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'input-hint'                   : {
-        title          : 'Input hints',
+        title          : 'Input with hints',
         component      : InputHintExample,
         additionalFiles: null,
         selectorName   : null
@@ -492,7 +592,7 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'input-prefix-suffix'          : {
-        title          : 'Input Prefixes and Suffixes',
+        title          : 'Inputs with prefixes and suffixes',
         component      : InputPrefixSuffixExample,
         additionalFiles: null,
         selectorName   : null
@@ -545,15 +645,33 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'progress-bar-buffer'          : {
+        title          : 'Buffer progress-bar',
+        component      : ProgressBarBufferExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'progress-bar-configurable'    : {
         title          : 'Configurable progress-bar',
         component      : ProgressBarConfigurableExample,
         additionalFiles: null,
         selectorName   : null
     },
-    'progress-bar-overview'        : {
-        title          : 'Basic progress-bar',
-        component      : ProgressBarOverviewExample,
+    'progress-bar-determinate'     : {
+        title          : 'Determinate progress-bar',
+        component      : ProgressBarDeterminateExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'progress-bar-indeterminate'   : {
+        title          : 'Indeterminate progress-bar',
+        component      : ProgressBarIndeterminateExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'progress-bar-query'           : {
+        title          : 'Query progress-bar',
+        component      : ProgressBarQueryExample,
         additionalFiles: null,
         selectorName   : null
     },
@@ -581,18 +699,78 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'select-custom-trigger'        : {
+        title          : 'Select with custom trigger text ',
+        component      : SelectCustomTriggerExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-disabled'              : {
+        title          : 'Disabled select ',
+        component      : SelectDisabledExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-error-state-matcher'   : {
+        title          : 'Select with a custom ErrorStateMatcher ',
+        component      : SelectErrorStateMatcherExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'select-form'                  : {
         title          : 'Select in a form',
         component      : SelectFormExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'select-hint-error'            : {
+        title          : 'Select with form field features ',
+        component      : SelectHintErrorExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-multiple'              : {
+        title          : 'Select with multiple selection ',
+        component      : SelectMultipleExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-no-ripple'             : {
+        title          : 'Select with no option ripple ',
+        component      : SelectNoRippleExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-optgroup'              : {
+        title          : 'Select with option groups ',
+        component      : SelectOptgroupExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'select-overview'              : {
         title          : 'Basic select',
         component      : SelectOverviewExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'select-panel-class'           : {
+        title          : 'Select with custom panel styling',
+        component      : SelectPanelClassExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-reset'                 : {
+        title          : 'Select with reset option ',
+        component      : SelectResetExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'select-value-binding'         : {
+        title          : 'Select with 2-way value binding ',
+        component      : SelectValueBindingExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'sidenav-fab'                  : {
         title          : 'Sidenav with a FAB',
         component      : SidenavFabExample,
@@ -678,7 +856,7 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'table-overview'               : {
-        title          : 'Feature-rich data table',
+        title          : 'Data table with sorting, pagination, and filtering.',
         component      : TableOverviewExample,
         additionalFiles: null,
         selectorName   : null
@@ -751,19 +929,22 @@ export const EXAMPLE_LIST = [
     ChipsOverviewExample,
     ChipsStackedExample,
     DatepickerApiExample,
+    DatepickerDisabledExample,
+    DatepickerEventsExample,
     DatepickerFilterExample,
+    DatepickerFormatsExample,
+    DatepickerLocaleExample,
     DatepickerMinMaxExample,
+    DatepickerMomentExample,
     DatepickerOverviewExample,
     DatepickerStartViewExample,
     DatepickerTouchExample,
-    DialogContentExampleDialog,
-    DialogContentExample,
-    DialogDataExampleDialog,
-    DialogDataExample,
-    DialogElementsExampleDialog,
-    DialogElementsExample,
-    DialogOverviewExampleDialog,
-    DialogOverviewExample,
+    DatepickerValueExample,
+    DialogContentExampleDialog, DialogContentExample,
+    DialogDataExampleDialog, DialogDataExample,
+    DialogElementsExampleDialog, DialogElementsExample,
+    DialogOverviewExampleDialog, DialogOverviewExample,
+    ElevationOverviewExample,
     ExpansionOverviewExample,
     ExpansionStepsExample,
     MyTelInput, FormFieldCustomControlExample,
@@ -777,7 +958,9 @@ export const EXAMPLE_LIST = [
     GridListOverviewExample,
     IconOverviewExample,
     IconSvgExample,
+    InputAutosizeTextareaExample,
     InputClearableExample,
+    InputErrorStateMatcherExample,
     InputErrorsExample,
     InputFormExample,
     InputHintExample,
@@ -791,14 +974,27 @@ export const EXAMPLE_LIST = [
     NestedMenuExample,
     PaginatorConfigurableExample,
     PaginatorOverviewExample,
+    ProgressBarBufferExample,
     ProgressBarConfigurableExample,
-    ProgressBarOverviewExample,
+    ProgressBarDeterminateExample,
+    ProgressBarIndeterminateExample,
+    ProgressBarQueryExample,
     ProgressSpinnerConfigurableExample,
     ProgressSpinnerOverviewExample,
     RadioNgModelExample,
     RadioOverviewExample,
+    SelectCustomTriggerExample,
+    SelectDisabledExample,
+    SelectErrorStateMatcherExample,
     SelectFormExample,
+    SelectHintErrorExample,
+    SelectMultipleExample,
+    SelectNoRippleExample,
+    SelectOptgroupExample,
     SelectOverviewExample,
+    SelectPanelClassExample,
+    SelectResetExample,
+    SelectValueBindingExample,
     SidenavFabExample,
     SidenavOverviewExample,
     SlideToggleConfigurableExample,

src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss

@@ -34,6 +34,7 @@
         }
 
         #forgot-password-form-wrapper {
+            overflow: auto;
             width: 400px;
             min-width: 400px;
             max-width: 400px;

src/app/main/content/pages/authentication/login-2/login-2.component.scss

@@ -34,6 +34,7 @@
         }
 
         #login-form-wrapper {
+            overflow: auto;
             width: 400px;
             min-width: 400px;
             max-width: 400px;

src/app/main/content/pages/authentication/register-2/register-2.component.scss

@@ -34,6 +34,7 @@
         }
 
         #register-form-wrapper {
+            overflow: auto;
             width: 400px;
             min-width: 400px;
             max-width: 400px;

src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss

@@ -34,6 +34,7 @@
         }
 
         #reset-password-form-wrapper {
+            overflow: auto;
             width: 400px;
             min-width: 400px;
             max-width: 400px;

src/app/main/content/pages/faq/faq.component.ts

@@ -3,6 +3,7 @@ import { FormControl } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';
 import { FaqService } from './faq.service';
 import { FuseUtils } from '../../../../core/fuseUtils';
+import 'rxjs/add/operator/distinctUntilChanged';
 
 @Component({
     selector   : 'fuse-faq',

src/app/main/content/pages/profile/profile.component.html

@@ -8,10 +8,12 @@
              fxLayoutAlign.gt-sm="start center">
             <img class="profile-image avatar huge" src="assets/images/avatars/katherine.jpg"
                  *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
-            <div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson</div>
+            <div class="name" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Katherine Wilson
+            </div>
         </div>
 
-        <div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms'}}">
+        <div class="actions" fxLayout="row" fxLayoutAlign="end center" *fuseIfOnDom
+             [@animate]="{value:'*',params:{delay:'200ms'}}">
             <button mat-raised-button color="accent" aria-label="Follow">Follow</button>
             <button mat-raised-button color="primary" aria-label="Send Message">Send Message</button>
         </div>

src/app/main/content/pages/profile/tabs/about/about.component.html

@@ -1,10 +1,8 @@
 <div id="about" class="p-24" fxLayout="row" fxLayoutWrap>
 
-    <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65"
-         *fuseIfOnDom [@animateStagger]="{value:'50'}">
+    <div class="about-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="65">
 
-        <div class="profile-box info-box general" fxLayout="column"
-             [@animate]="{value:'*',params:{y:'100%'}}">
+        <div class="profile-box info-box general" fxLayout="column">
 
             <header class="mat-accent-bg">
                 <div class="title">General Information</div>
@@ -38,8 +36,7 @@
 
         </div>
 
-        <div class="profile-box info-box work" fxLayout="column"
-             [@animate]="{value:'*',params:{y:'100%'}}">
+        <div class="profile-box info-box work" fxLayout="column">
 
             <header class="mat-accent-bg">
                 <div class="title">Work</div>
@@ -68,8 +65,7 @@
             </div>
         </div>
 
-        <div class="profile-box info-box contact" fxLayout="column"
-             [@animate]="{value:'*',params:{y:'100%'}}">
+        <div class="profile-box info-box contact" fxLayout="column">
 
             <header class="mat-accent-bg">
                 <div class="title">Contact</div>
@@ -104,11 +100,9 @@
 
     </div>
 
-    <div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35"
-         *fuseIfOnDom [@animateStagger]="{value:'50'}">
+    <div class="about-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="50" fxFlex.gt-md="35">
 
-        <div class="profile-box friends" fxLayout="column"
-             [@animate]="{value:'*',params:{y:'100%'}}">
+        <div class="profile-box friends" fxLayout="column">
 
             <header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Friends</div>
@@ -125,8 +119,7 @@
 
         </div>
 
-        <div class="profile-box groups" fxLayout="column"
-             [@animate]="{value:'*',params:{y:'100%'}}">
+        <div class="profile-box groups" fxLayout="column">
 
             <header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Joined Groups</div>

src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html

@@ -1,4 +1,4 @@
-<div id="photos-videos" class="p-24" *fuseIfOnDom [@animateStagger]="{value:'50'}">
+<div id="photos-videos" class="p-24">
     <div class="period" *ngFor="let period of photosVideos">
 
         <div class="period-title">
@@ -7,8 +7,7 @@
         </div>
 
         <div class="period-media" fxLayout="row" fxLayoutWrap>
-            <div class="media" *ngFor="let media of period.media"
-                 [@animate]="{value:'*',params:{y:'100%'}}">
+            <div class="media" *ngFor="let media of period.media">
                 <img class="preview" [src]="media.preview" title="{{media.title}}">
                 <div class="title">{{media.title}}</div>
             </div>

src/app/main/content/pages/profile/tabs/timeline/timeline.component.html

@@ -1,10 +1,8 @@
 <div id="timeline" class="p-24" fxLayout="row" fxLayoutWrap>
 
-    <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65"
-         *fuseIfOnDom [@animateStagger]="{value:'50'}">
+    <div class="timeline-content" fxLayout="column" fxFlex="100" fxFlex.gt-sm="55" fxFlex.gt-md="65">
 
-        <div class="profile-box add-post"
-             [@animate]="{value:'*',params:{y:'100%'}}">
+        <div class="profile-box add-post">
 
             <div class="form" fxFlex>
 
@@ -37,8 +35,7 @@
 
         <mat-divider></mat-divider>
 
-        <div class="timeline-item" *ngFor="let post of timeline.posts"
-             [@animate]="{value:'*',params:{y:'100%'}}">
+        <div class="timeline-item" *ngFor="let post of timeline.posts">
 
             <header fxLayout="row" fxLayoutAlign="space-between start">
                 <div class="user" fxLayout="row" fxLayoutAlign="start center">
@@ -136,8 +133,7 @@
 
     <div class="timeline-sidebar" fxLayout="column" fxFlex="100" fxFlex.gt-sm="45" fxFlex.gt-md="35">
 
-        <div class="profile-box latest-activity" fxLayout="column"
-             *fuseIfOnDom [@animate]="{value:'*',params:{delay:'200ms',y:'100%'}}">
+        <div class="profile-box latest-activity" fxLayout="column">
 
             <header class="mat-accent-bg" fxLayout="row" fxLayoutAlign="space-between center">
                 <div class="title">Latest Activity</div>

src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html

@@ -7,7 +7,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html

@@ -7,7 +7,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html

@@ -7,7 +7,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html

@@ -7,7 +7,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html

@@ -126,7 +126,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html

@@ -45,7 +45,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html

@@ -126,7 +126,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html

@@ -45,7 +45,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
                      fuseMatSidenavHelper="carded-right-sidenav" mat-is-locked-open="gt-md">
 
             <!-- SIDENAV HEADER -->

src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html

@@ -3,7 +3,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav  p-24" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-left-sidenav-2" mat-is-locked-open="gt-md">
 
             <fuse-demo-sidenav></fuse-demo-sidenav>

src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html

@@ -19,7 +19,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-left-sidenav-3" mat-is-locked-open="gt-md">
 
             <div class="sidenav-content" fusePerfectScrollbar>

src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html

@@ -3,7 +3,7 @@
     <mat-sidenav-container>
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="start" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-left-sidenav" mat-is-locked-open="gt-md">
 
             <div class="sidenav-content p-24" fusePerfectScrollbar>

src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html

@@ -33,7 +33,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened p-24" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav  p-24" align="end" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-right-sidenav-2" mat-is-locked-open="gt-md">
 
             <fuse-demo-sidenav></fuse-demo-sidenav>

src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html

@@ -33,7 +33,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-right-sidenav-3" mat-is-locked-open="gt-md">
 
             <div class="sidenav-content" fusePerfectScrollbar>

src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html

@@ -33,7 +33,7 @@
         <!-- / CENTER -->
 
         <!-- SIDENAV -->
-        <mat-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+        <mat-sidenav class="sidenav" align="end" opened="true" mode="side"
                      fuseMatSidenavHelper="simple-right-sidenav" mat-is-locked-open="gt-md">
 
             <div class="sidenav-content p-24" fusePerfectScrollbar>

src/app/main/navbar/horizontal/navbar-horizontal.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FuseMainComponent } from '../../main.component';
 
 @Component({
     selector     : 'fuse-navbar-horizontal',
@@ -6,14 +7,19 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
     styleUrls    : ['./navbar-horizontal.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavbarHorizontalComponent implements OnInit
+export class FuseNavbarHorizontalComponent implements OnInit, OnDestroy
 {
-    constructor()
+    constructor(private fuseMainComponent: FuseMainComponent)
     {
     }
 
     ngOnInit()
     {
+        this.fuseMainComponent.addClass('fuse-nav-bar-horizontal');
+    }
 
+    ngOnDestroy()
+    {
+        this.fuseMainComponent.removeClass('fuse-nav-bar-horizontal');
     }
 }

src/app/main/navbar/vertical/navbar-vertical.component.scss

@@ -2,7 +2,7 @@
 
 fuse-main {
 
-    &.fuse-nav-bar-folded {
+    &.fuse-nav-bar-folded:not(.fuse-nav-bar-horizontal) {
 
         .content-wrapper {
 

src/app/navigation.model.ts

@@ -649,6 +649,12 @@ export class NavigationModel
                                         'type' : 'item',
                                         'url'  : '/components/angular-material/tabs'
                                     },
+                                    {
+                                        'id'   : 'elevation',
+                                        'title': 'Elevation',
+                                        'type' : 'item',
+                                        'url'  : '/components/angular-material/elevation'
+                                    },
                                     {
                                         'id'   : 'expansion-panel',
                                         'title': 'Expansion Panel',

src/assets/angular-material-examples/chips-input/chips-input-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 import { MatChipInputEvent } from '@angular/material';
-import { ENTER } from '@angular/cdk/keycodes';
-
-const COMMA = 188;
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
 
 /**
  * @title Chips with input

src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts

@@ -13,16 +13,20 @@ export class ChipsStackedExample
     color: string;
 
     availableColors = [
-        {name    : 'none',
+        {
+            name : 'none',
             color: ''
         },
-        {name    : 'Primary',
+        {
+            name : 'Primary',
             color: 'primary'
         },
-        {name    : 'Accent',
+        {
+            name : 'Accent',
             color: 'accent'
         },
-        {name    : 'Warn',
+        {
+            name : 'Warn',
             color: 'warn'
         }
     ];

src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
- * @title Datepicker API
- */
+/** @title Datepicker open method */
 @Component({
     selector   : 'datepicker-api-example',
     templateUrl: 'datepicker-api-example.html',

src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.html

@@ -0,0 +1,23 @@
+<p>
+    <mat-form-field>
+        <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
+        <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
+        <mat-datepicker #dp1></mat-datepicker>
+    </mat-form-field>
+</p>
+
+<p>
+    <mat-form-field>
+        <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
+        <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
+        <mat-datepicker #dp2></mat-datepicker>
+    </mat-form-field>
+</p>
+
+<p>
+    <mat-form-field>
+        <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
+        <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
+        <mat-datepicker #dp3 disabled="false"></mat-datepicker>
+    </mat-form-field>
+</p>

src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/** @title Disabled datepicker */
+@Component({
+    selector   : 'datepicker-disabled-example',
+    templateUrl: 'datepicker-disabled-example.html',
+    styleUrls  : ['datepicker-disabled-example.css']
+})
+export class DatepickerDisabledExample
+{
+}

src/assets/angular-material-examples/datepicker-events/datepicker-events-example.css

@@ -0,0 +1,6 @@
+.example-events {
+    width: 400px;
+    height: 200px;
+    border: 1px solid #555;
+    overflow: auto;
+}

src/assets/angular-material-examples/datepicker-events/datepicker-events-example.html

@@ -0,0 +1,10 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="picker" placeholder="Input & change events"
+           (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
+</mat-form-field>
+
+<div class="example-events">
+    <div *ngFor="let e of events">{{e}}</div>
+</div>

src/assets/angular-material-examples/datepicker-events/datepicker-events-example.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+
+/** @title Datepicker input and change events */
+@Component({
+    selector   : 'datepicker-events-example',
+    templateUrl: 'datepicker-events-example.html',
+    styleUrls  : ['datepicker-events-example.css']
+})
+export class DatepickerEventsExample
+{
+    events: string[] = [];
+
+    addEvent(type: string, event: MatDatepickerInputEvent<Date>)
+    {
+        this.events.push(`${type}: ${event.value}`);
+    }
+}

src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
- * @title Datepicker Filter
- */
+/** @title Datepicker with filter validation */
 @Component({
     selector   : 'datepicker-filter-example',
     templateUrl: 'datepicker-filter-example.html',

src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.html

@@ -0,0 +1,5 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp></mat-datepicker>
+</mat-form-field>

src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts

@@ -0,0 +1,44 @@
+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';
+
+import * as moment from 'moment';
+
+// See the Moment.js docs for the meaning of these formats:
+// https://momentjs.com/docs/#/displaying/format/
+export const MY_FORMATS = {
+    parse  : {
+        dateInput: 'LL'
+    },
+    display: {
+        dateInput         : 'LL',
+        monthYearLabel    : 'MMM YYYY',
+        dateA11yLabel     : 'LL',
+        monthYearA11yLabel: 'MMMM YYYY'
+    }
+};
+
+/** @title Datepicker with custom formats */
+@Component({
+    selector   : 'datepicker-formats-example',
+    templateUrl: 'datepicker-formats-example.html',
+    styleUrls  : ['datepicker-formats-example.css'],
+    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
+        // our example generation script.
+        {provide    : DateAdapter,
+            useClass: MomentDateAdapter,
+            deps    : [MAT_DATE_LOCALE]
+        },
+
+        {provide    : MAT_DATE_FORMATS,
+            useValue: MY_FORMATS
+        }
+    ]
+})
+export class DatepickerFormatsExample
+{
+    date = new FormControl(moment());
+}

src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.html

@@ -0,0 +1,7 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="dp" placeholder="Different locale">
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp></mat-datepicker>
+</mat-form-field>
+
+<button mat-button (click)="french()">Dynamically switch to French</button>

src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+
+/** @title Datepicker with different locale */
+@Component({
+    selector   : 'datepicker-locale-example',
+    templateUrl: 'datepicker-locale-example.html',
+    styleUrls  : ['datepicker-locale-example.css'],
+    providers  : [
+        // The locale would typically be provided on the root module of your application. We do it at
+        // the component level here, due to limitations of our example generation script.
+        {
+            provide : MAT_DATE_LOCALE,
+            useValue: 'ja-JP'
+        },
+
+        // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
+        // `MatMomentDateModule` in your applications root module. We provide it at the component level
+        // here, due to limitations of our example generation script.
+        {
+            provide : DateAdapter,
+            useClass: MomentDateAdapter,
+            deps    : [MAT_DATE_LOCALE]
+        },
+        {
+            provide : MAT_DATE_FORMATS,
+            useValue: MAT_MOMENT_DATE_FORMATS
+        }
+    ]
+})
+export class DatepickerLocaleExample
+{
+    constructor(private adapter: DateAdapter<any>)
+    {
+    }
+
+    french()
+    {
+        this.adapter.setLocale('fr');
+    }
+}

src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
- * @title Datepicker Min Max
- */
+/** @title Datepicker with min & max validation */
 @Component({
     selector   : 'datepicker-min-max-example',
     templateUrl: 'datepicker-min-max-example.html',

src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.html

@@ -0,0 +1,5 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
+    <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+    <mat-datepicker #dp></mat-datepicker>
+</mat-form-field>

src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
+import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+
+import * as moment from 'moment';
+
+/** @title Datepicker that uses Moment.js dates */
+@Component({
+    selector   : 'datepicker-moment-example',
+    templateUrl: 'datepicker-moment-example.html',
+    styleUrls  : ['datepicker-moment-example.css'],
+    providers  : [
+        // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
+        // `MatMomentDateModule` in your applications root module. We provide it at the component level
+        // here, due to limitations of our example generation script.
+        {
+            provide : DateAdapter,
+            useClass: MomentDateAdapter,
+            deps    : [MAT_DATE_LOCALE]
+        },
+        {
+            provide : MAT_DATE_FORMATS,
+            useValue: MAT_MOMENT_DATE_FORMATS
+        }
+    ]
+})
+export class DatepickerMomentExample
+{
+    // Datepicker takes `Moment` objects instead of `Date` objects.
+    date = new FormControl(moment([2017, 0, 1]));
+}

src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
- * @title Basic datepicker
- */
+/** @title Basic datepicker */
 @Component({
     selector   : 'datepicker-overview-example',
     templateUrl: 'datepicker-overview-example.html',

src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
- * @title Datepicker start date
- */
+/** @title Datepicker start date */
 @Component({
     selector   : 'datepicker-start-view-example',
     templateUrl: 'datepicker-start-view-example.html',

src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts

@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';
 
-/**
- * @title Datepicker Touch
- */
+/** @title Datepicker touch UI */
 @Component({
     selector   : 'datepicker-touch-example',
     templateUrl: 'datepicker-touch-example.html',

src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/datepicker-value/datepicker-value-example.html

@@ -0,0 +1,18 @@
+<mat-form-field>
+    <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
+    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+    <mat-datepicker #picker1></mat-datepicker>
+</mat-form-field>
+
+<mat-form-field>
+    <input matInput [matDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)"
+           [formControl]="serializedDate">
+    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+    <mat-datepicker #picker2></mat-datepicker>
+</mat-form-field>
+
+<mat-form-field>
+    <input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
+    <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
+    <mat-datepicker #picker3></mat-datepicker>
+</mat-form-field>

src/assets/angular-material-examples/datepicker-value/datepicker-value-example.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+/** @title Datepicker selected value */
+@Component({
+    selector   : 'datepicker-value-example',
+    templateUrl: 'datepicker-value-example.html',
+    styleUrls  : ['datepicker-value-example.css']
+})
+export class DatepickerValueExample
+{
+    date = new FormControl(new Date());
+    serializedDate = new FormControl((new Date()).toISOString());
+}

src/assets/angular-material-examples/elevation-overview/elevation-overview-example.css

@@ -0,0 +1,4 @@
+.example-container {
+    padding: 16px;
+    margin-bottom: 16px;
+}

src/assets/angular-material-examples/elevation-overview/elevation-overview-example.html

@@ -0,0 +1,7 @@
+<div class="example-container"
+     [class.mat-elevation-z2]="!isActive"
+     [class.mat-elevation-z8]="isActive">
+    Example
+</div>
+
+<button mat-button (click)="isActive = !isActive">Toggle Elevation</button>

src/assets/angular-material-examples/elevation-overview/elevation-overview-example.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Elevation CSS classes
+ */
+@Component({
+    selector   : 'elevation-overview-example',
+    styleUrls  : ['elevation-overview-example.css'],
+    templateUrl: 'elevation-overview-example.html'
+})
+export class ElevationOverviewExample
+{
+    isActive = false;
+}

src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts

@@ -165,12 +165,12 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy
 @Component({
     selector: 'form-field-custom-control-example',
     template: `
-    <mat-form-field>
-      <my-tel-input placeholder="Phone number" required></my-tel-input>
-      <mat-icon matSuffix>phone</mat-icon>
-      <mat-hint>Include area code</mat-hint>
-    </mat-form-field>
-  `
+        <mat-form-field>
+            <my-tel-input placeholder="Phone number" required></my-tel-input>
+            <mat-icon matSuffix>phone</mat-icon>
+            <mat-hint>Include area code</mat-hint>
+        </mat-form-field>
+    `
 })
 export class FormFieldCustomControlExample
 {

src/assets/angular-material-examples/form-field-theming/form-field-theming-example.html

@@ -9,6 +9,6 @@
 
     <mat-form-field [color]="options.value.color">
         <input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
-        <mat-error *ngIf="options.get('fontSize').invalid">Min size: 10px</mat-error>
+        <mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
     </mat-form-field>
 </form>

src/assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example.ts

@@ -10,22 +10,26 @@ import { Component } from '@angular/core';
 export class GridListDynamicExample
 {
     tiles = [
-        {text    : 'One',
+        {
+            text : 'One',
             cols : 3,
             rows : 1,
             color: 'lightblue'
         },
-        {text    : 'Two',
+        {
+            text : 'Two',
             cols : 1,
             rows : 2,
             color: 'lightgreen'
         },
-        {text    : 'Three',
+        {
+            text : 'Three',
             cols : 1,
             rows : 1,
             color: 'lightpink'
         },
-        {text    : 'Four',
+        {
+            text : 'Four',
             cols : 2,
             rows : 1,
             color: '#DDBDF1'

src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.html

@@ -0,0 +1,4 @@
+<mat-form-field>
+  <textarea matInput placeholder="Autosize textarea" matTextareaAutosize matAutosizeMinRows="2"
+            matAutosizeMaxRows="5"></textarea>
+</mat-form-field>

src/assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/** @title Auto-resizing textarea */
+@Component({
+    selector   : 'input-autosize-textarea-example',
+    templateUrl: './input-autosize-textarea-example.html',
+    styleUrls  : ['./input-autosize-textarea-example.css']
+})
+export class InputAutosizeTextareaExample
+{
+}

src/assets/angular-material-examples/input-clearable/input-clearable-example.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 /**
- * @title Input Clearable
+ * @title Input with a clear button
  */
 @Component({
     selector   : 'input-clearable-example',

src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.css

@@ -0,0 +1,9 @@
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+}
+
+.example-full-width {
+    width: 100%;
+}

src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.html

@@ -0,0 +1,13 @@
+<form class="example-form">
+    <mat-form-field class="example-full-width">
+        <input matInput placeholder="Email" [formControl]="emailFormControl"
+               [errorStateMatcher]="matcher">
+        <mat-hint>Errors appear instantly!</mat-hint>
+        <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
+            Please enter a valid email address
+        </mat-error>
+        <mat-error *ngIf="emailFormControl.hasError('required')">
+            Email is <strong>required</strong>
+        </mat-error>
+    </mat-form-field>
+</form>

src/assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class MyErrorStateMatcher implements ErrorStateMatcher
+{
+    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean
+    {
+        const isSubmitted = form && form.submitted;
+        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+    }
+}
+
+/** @title Input with a custom ErrorStateMatcher */
+@Component({
+    selector   : 'input-error-state-matcher-example',
+    templateUrl: './input-error-state-matcher-example.html',
+    styleUrls  : ['./input-error-state-matcher-example.css']
+})
+export class InputErrorStateMatcherExample
+{
+    emailFormControl = new FormControl('', [
+        Validators.required,
+        Validators.email
+    ]);
+
+    matcher = new MyErrorStateMatcher();
+}

src/assets/angular-material-examples/input-errors/input-errors-example.html

@@ -1,7 +1,7 @@
 <form class="example-form">
     <mat-form-field class="example-full-width">
         <input matInput placeholder="Email" [formControl]="emailFormControl">
-        <mat-error *ngIf="emailFormControl.hasError('pattern')">
+        <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
             Please enter a valid email address
         </mat-error>
         <mat-error *ngIf="emailFormControl.hasError('required')">

src/assets/angular-material-examples/input-errors/input-errors-example.ts

@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 
-const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
 /**
- * @title Input Errors
+ * @title Input with error messages
  */
 @Component({
     selector   : 'input-errors-example',
@@ -13,10 +11,8 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
 })
 export class InputErrorsExample
 {
-
     emailFormControl = new FormControl('', [
         Validators.required,
-        Validators.pattern(EMAIL_REGEX)
+        Validators.email
     ]);
-
 }

src/assets/angular-material-examples/input-hint/input-hint-example.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 /**
- * @title Input hints
+ * @title Input with hints
  */
 @Component({
     selector   : 'input-hint-example',

src/assets/angular-material-examples/input-overview/input-overview-example.html

@@ -2,4 +2,8 @@
     <mat-form-field class="example-full-width">
         <input matInput placeholder="Favorite food" value="Sushi">
     </mat-form-field>
+
+    <mat-form-field class="example-full-width">
+        <textarea matInput placeholder="Leave a comment"></textarea>
+    </mat-form-field>
 </form>

src/assets/angular-material-examples/input-prefix-suffix/input-prefix-suffix-example.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 /**
- * @title Input Prefixes and Suffixes
+ * @title Inputs with prefixes and suffixes
  */
 @Component({
     selector   : 'input-prefix-suffix-example',

src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.html

@@ -0,0 +1 @@
+<mat-progress-bar mode="buffer"></mat-progress-bar>

src/assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Buffer progress-bar
+ */
+@Component({
+    selector   : 'progress-bar-buffer-example',
+    templateUrl: 'progress-bar-buffer-example.html'
+})
+export class ProgressBarBufferExample
+{
+}

src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.html

@@ -0,0 +1 @@
+<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>

src/assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Determinate progress-bar
+ */
+@Component({
+    selector   : 'progress-bar-determinate-example',
+    templateUrl: 'progress-bar-determinate-example.html'
+})
+export class ProgressBarDeterminateExample
+{
+}

src/assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */