Increased version number

Fixed: Sidenav helper causes issues on mobile media steps
Corrected the version number
2025-12-25 04:07:08 +00:00 · 2017-11-27 17:20:34 +03:00 · 2017-11-27 14:31:57 +03:00 · 2017-11-27 14:28:08 +03:00 · 2017-11-18 01:43:08 +03:00 · 2017-11-18 00:45:42 +03:00
179 changed files with 2818 additions and 1972 deletions
--- a/.angular-cli.json
+++ b/.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": {
--- a/e2e/app.e2e-spec.ts
+++ b/e2e/app.e2e-spec.ts
@@ -1,10 +1,10 @@
-import { AppPage } from './app.po';
+import { Fuse2Page } from './app.po';

-describe('angular5 App', () => {
-    let page: AppPage;
+describe('Fuse2 App', () => {
+    let page: Fuse2Page;

    beforeEach(() => {
-        page = new AppPage();
+        page = new Fuse2Page();
    });

    it('should display welcome message', () => {
--- a/e2e/app.po.ts
+++ b/e2e/app.po.ts
@@ -1,14 +1,11 @@
-import { AppPage } from './app.po';
+import { browser, by, element } from 'protractor';

-describe('Fuse App', () => {
-    let page: AppPage;
+export class Fuse2Page {
+    navigateTo() {
+        return browser.get('/');
+    }

-    beforeEach(() => {
-        page = new AppPage();
-    });
-
-    it('should display welcome message', () => {
-        page.navigateTo();
-        expect(page.getParagraphText()).toEqual('Welcome to app!');
-    });
-});
+    getParagraphText() {
+        return element(by.css('app-root h1')).getText();
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "fuse2",
-  "version": "1.2.0",
+  "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.0",
-    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "5.0.0",
-    "@angular/compiler": "5.0.0",
-    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "5.0.0",
-    "@angular/http": "5.0.0",
-    "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "5.0.0",
+    "@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": "10.4.0",
+    "@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.1",
-    "ngx-color-picker": "4.4.0",
+    "moment": "2.19.2",
+    "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.0",
-    "@angular/language-service": "5.0.0",
+    "@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",
--- a/src/app/core/components/material-color-picker/material-color-picker.component.html
+++ b/src/app/core/components/material-color-picker/material-color-picker.component.html
@@ -2,7 +2,7 @@
        type="button"
        class="mat-elevation-z1"
        [matMenuTriggerFor]="colorMenu"
-        (onMenuOpen)="onMenuOpen()"
+        (menuOpened)="onMenuOpen()"
        [ngClass]="'mat-'+selectedPalette+'-'+selectedHue+'-bg'">
    <mat-icon>palette</mat-icon>
 </button>
--- a/src/app/core/components/shortcuts/shortcuts.component.html
+++ b/src/app/core/components/shortcuts/shortcuts.component.html
@@ -26,7 +26,7 @@
                </div>

                <button mat-icon-button [matMenuTriggerFor]="addMenu" matTooltip="Click to add/remove shortcut"
-                        (onMenuOpen)="onMenuOpen()">
+                        (menuOpened)="onMenuOpen()">
                    <mat-icon class="amber-600-fg">star</mat-icon>
                </button>

--- a/src/app/core/components/shortcuts/shortcuts.component.ts
+++ b/src/app/core/components/shortcuts/shortcuts.component.ts
@@ -149,7 +149,9 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy

    onMenuOpen()
    {
-        this.searchInputField.nativeElement.focus();
+        setTimeout(() => {
+            this.searchInputField.nativeElement.focus();
+        });
    }

    showMobileShortcutsPanel()
--- a/src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts
+++ b/src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive.ts
@@ -1,9 +1,9 @@
 import { Directive, Input, OnInit, HostListener, OnDestroy, HostBinding } from '@angular/core';
 import { MatSidenav } from '@angular/material';
-import { FuseMatSidenavHelperService } from 'app/core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
-import { FuseMatchMedia } from '../../services/match-media.service';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subscription } from 'rxjs/Subscription';
+import { FuseMatchMedia } from '../../services/match-media.service';
+import { FuseMatSidenavHelperService } from './fuse-mat-sidenav-helper.service';

@Directive({
    selector: '[fuseMatSidenavHelper]'
@@ -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()
--- a/src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service.ts
+++ b/src/app/core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service.ts
--- a/src/app/core/matColors.ts
+++ b/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'
 ];
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -8,13 +8,13 @@ import { ColorPickerModule } from 'ngx-color-picker';
 import { NgxDnDModule } from '@withinpixels/ngx-dnd';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';

-import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/mat-sidenav-helper/mat-sidenav-helper.directive';
+import { FuseMatSidenavHelperDirective, FuseMatSidenavTogglerDirective } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.directive';
+import { FuseMatSidenavHelperService } from '../directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';
 import { FusePipesModule } from '../pipes/pipes.module';
 import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm-dialog.component';
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseMatSidenavHelperService } from '../directives/mat-sidenav-helper/mat-sidenav-helper.service';
 import { FuseHljsComponent } from '../components/hljs/hljs.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
--- a/src/app/core/scss/partials/_angular-material-fix.scss
+++ b/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;
@@ -59,3 +23,8 @@ mat-sidenav-container {
    width: 14px;
    height: 7px;
 }
+
+// Fix: "Input underlines has wrong color opacity value"
+.mat-form-field-underline {
+    background-color: rgba(0, 0, 0, 0.12);
+}
--- a/src/app/main/content/apps/chat/chat.component.html
+++ b/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>
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.html
@@ -4,7 +4,7 @@
    <mat-toolbar>

        <!-- TOOLBAR TOP -->
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">

            <!-- USER AVATAR WRAPPER -->
            <div class="avatar-wrapper">
@@ -16,7 +16,8 @@
                     alt="{{user.name}}"/>
                <!-- / USER AVATAR -->

-                <mat-icon class="s-16 status" [ngClass]="user.status" [matMenuTriggerFor]="userStatusMenu"></mat-icon>
+                <mat-icon class="s-16 status" [ngClass]="user.status"
+                          [matMenuTriggerFor]="userStatusMenu"></mat-icon>

                <!-- USER STATUS -->
                <mat-menu id="user-status-menu" #userStatusMenu="matMenu">
@@ -69,7 +70,8 @@
                    </button>
                </mat-menu>
            </div>
-        </div>
+
+        </mat-toolbar-row>
        <!-- / TOOLBAR TOP -->

        <!-- TOOLBAR BOTTOM -->
--- a/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
+++ b/src/app/main/content/apps/chat/sidenavs/left/chats/chats.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ChatService } from '../../../chat.service';
-import { FuseMatSidenavHelperService } from '../../../../../../../core/directives/mat-sidenav-helper/mat-sidenav-helper.service';
 import { ObservableMedia } from '@angular/flex-layout';
 import { fuseAnimations } from '../../../../../../../core/animations';
+import { FuseMatSidenavHelperService } from '../../../../../../../core/directives/fuse-mat-sidenav-helper/fuse-mat-sidenav-helper.service';

@Component({
    selector   : 'fuse-chat-chats-sidenav',
--- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/left/user/user.component.html
@@ -5,20 +5,19 @@
    <mat-toolbar>

        <!-- TOOLBAR TOP -->
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">

            <button mat-button class="mat-icon-button" (click)="changeLeftSidenavView('chats')" aria-label="back">
                <mat-icon>arrow_back</mat-icon>
            </button>

-        </div>
+        </mat-toolbar-row>
        <!-- / TOOLBAR TOP -->

        <!-- TOOLBAR BOTTOM -->
        <mat-toolbar-row class="toolbar-bottom" fxLayout="column" fxLayoutAlign="center center">

            <img [src]="user.avatar" class="avatar user-avatar huge" alt="{{user.name}}"/>
-
            <div class="user-name my-8">{{user.name}}</div>

        </mat-toolbar-row>
--- a/src/app/main/content/apps/chat/sidenavs/left/user/user.component.ts
+++ b/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',
--- a/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
+++ b/src/app/main/content/apps/chat/sidenavs/right/contact/contact.component.html
@@ -5,7 +5,7 @@
    <mat-toolbar>

        <!-- TOOLBAR TOP -->
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">

            <div>Contact Info</div>

@@ -13,7 +13,7 @@
                <mat-icon>close</mat-icon>
            </button>

-        </div>
+        </mat-toolbar-row>
        <!-- / TOOLBAR TOP -->

        <!-- TOOLBAR BOTTOM -->
@@ -37,9 +37,9 @@
    <mat-card>

        <mat-form-field fxFlex>
-                <textarea matInput placeholder="Mood" name="mood"
-                          [value]="contact.mood" rows="3" disabled>
-                </textarea>
+            <textarea matInput placeholder="Mood" name="mood"
+                      [value]="contact.mood" rows="3" disabled>
+            </textarea>
        </mat-form-field>

    </mat-card>
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
+++ b/src/app/main/content/apps/contacts/contact-form/contact-form.component.html
@@ -1,13 +1,13 @@
 <div class="dialog-content-wrapper">
    <mat-toolbar matDialogTitle class="mat-accent m-0">
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
+        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
            <span class="title dialog-title">{{dialogTitle}}</span>
            <button mat-button class="mat-icon-button"
                    (click)="dialogRef.close()"
                    aria-label="Close dialog">
                <mat-icon>close</mat-icon>
            </button>
-        </div>
+        </mat-toolbar-row>

        <mat-toolbar-row class="toolbar-bottom py-8 py-sm-16" fxLayout="column" fxLayoutAlign="center center">
            <img [src]="contact.avatar" class=" avatar contact-avatar huge"
--- a/src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
+++ b/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;
        }
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
@@ -1,6 +1,6 @@
@import "src/app/core/scss/fuse";

-:host {
+fuse-contacts-contact-list {
    flex: 1;

    .mat-table {
@@ -9,6 +9,10 @@

        .mat-column-checkbox {
            flex: 0 1 48px;
+
+            .mat-checkbox-ripple {
+                display: none !important; //fix for broken rendering
+            }
        }

        .mat-column-avatar {
@@ -40,12 +44,9 @@
 }

 #add-contact-button {
-    position: fixed;
+    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 0;
-
-    @include media-breakpoint-down('xs') {
-        top: 12px;
-    }
-}
+    z-index: 99;
+}
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ContactsService } from '../contacts.service';
 import { Observable } from 'rxjs/Observable';
 import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
@@ -7,14 +7,16 @@ import { FuseConfirmDialogComponent } from '../../../../../core/components/confi
 import { FormGroup } from '@angular/forms';
 import { DataSource } from '@angular/cdk/collections';
 import { fuseAnimations } from '../../../../../core/animations';
+import { Subscription } from 'rxjs/Subscription';

@Component({
-    selector   : 'fuse-contacts-contact-list',
-    templateUrl: './contact-list.component.html',
-    styleUrls  : ['./contact-list.component.scss'],
-    animations : fuseAnimations
+    selector     : 'fuse-contacts-contact-list',
+    templateUrl  : './contact-list.component.html',
+    styleUrls    : ['./contact-list.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
-export class FuseContactsContactListComponent implements OnInit
+export class FuseContactsContactListComponent implements OnInit, OnDestroy
 {
    @ViewChild('dialogContent') dialogContent: TemplateRef<any>;

@@ -25,6 +27,10 @@ export class FuseContactsContactListComponent implements OnInit
    selectedContacts: any[];
    checkboxes: {};

+    onContactsChangedSubscription: Subscription;
+    onSelectedContactsChangedSubscription: Subscription;
+    onUserDataChangedSubscription: Subscription;
+
    dialogRef: any;

    confirmDialogRef: MatDialogRef<FuseConfirmDialogComponent>;
@@ -34,27 +40,35 @@ export class FuseContactsContactListComponent implements OnInit
        public dialog: MatDialog
    )
    {
-        this.contactsService.onContactsChanged.subscribe(contacts => {
+        this.onContactsChangedSubscription =
+            this.contactsService.onContactsChanged.subscribe(contacts => {

-            this.contacts = contacts;
+                this.contacts = contacts;

-            this.checkboxes = {};
-            contacts.map(contact => {
-                this.checkboxes[contact.id] = false;
+                this.checkboxes = {};
+                contacts.map(contact => {
+                    this.checkboxes[contact.id] = false;
+                });
            });
-        });

-        this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => {
-            for ( const id in this.checkboxes )
-            {
-                this.checkboxes[id] = selectedContacts.includes(id);
-            }
-            this.selectedContacts = selectedContacts;
-        });
+        this.onSelectedContactsChangedSubscription =
+            this.contactsService.onSelectedContactsChanged.subscribe(selectedContacts => {
+                for ( const id in this.checkboxes )
+                {
+                    if ( !this.checkboxes.hasOwnProperty(id) )
+                    {
+                        continue;
+                    }

-        this.contactsService.onUserDataChanged.subscribe(user => {
-            this.user = user;
-        });
+                    this.checkboxes[id] = selectedContacts.includes(id);
+                }
+                this.selectedContacts = selectedContacts;
+            });
+
+        this.onUserDataChangedSubscription =
+            this.contactsService.onUserDataChanged.subscribe(user => {
+                this.user = user;
+            });

    }

@@ -63,6 +77,13 @@ export class FuseContactsContactListComponent implements OnInit
        this.dataSource = new FilesDataSource(this.contactsService);
    }

+    ngOnDestroy()
+    {
+        this.onContactsChangedSubscription.unsubscribe();
+        this.onSelectedContactsChangedSubscription.unsubscribe();
+        this.onUserDataChangedSubscription.unsubscribe();
+    }
+
    editContact(contact)
    {
        this.dialogRef = this.dialog.open(FuseContactsContactFormDialogComponent, {
--- a/src/app/main/content/apps/contacts/contacts.component.html
+++ b/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>
--- a/src/app/main/content/apps/contacts/contacts.component.scss
+++ b/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;
 }
--- a/src/app/main/content/apps/contacts/contacts.component.ts
+++ b/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();
+    }
 }
--- a/src/app/main/content/apps/dashboards/project/project.component.html
+++ b/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>

--- a/src/app/main/content/apps/e-commerce/product/product.component.html
+++ b/src/app/main/content/apps/e-commerce/product/product.component.html
@@ -90,7 +90,7 @@
                                                   formControlName="categories">

                                        <mat-chip *ngFor="let category of product.categories"
-                                                  removable="true" (remove)="product.removeCategory(category)">
+                                                  removable="true" (removed)="product.removeCategory(category)">
                                            {{category}}
                                            <mat-icon matChipRemove>cancel</mat-icon>
                                        </mat-chip>
@@ -109,7 +109,7 @@
                                                   formControlName="tags">

                                        <mat-chip *ngFor="let tag of product.tags"
-                                                  removable="true" (remove)="product.removeTag(tag)">
+                                                  removable="true" (removed)="product.removeTag(tag)">
                                            {{tag}}
                                            <mat-icon matChipRemove>cancel</mat-icon>
                                        </mat-chip>
--- a/src/app/main/content/apps/file-manager/file-manager.component.html
+++ b/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>
--- a/src/app/main/content/apps/mail/mail.component.html
+++ b/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>
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
@@ -71,7 +71,7 @@
                <!-- CHECKLIST -->
                <div class="due-date " fxFlex="0 1 auto">

-                    <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (onMenuOpen)="onChecklistMenuOpen()">
+                    <button mat-icon-button class="" [matMenuTriggerFor]="checklistMenu" #checklistMenuTrigger="matMenuTrigger" (menuOpened)="onChecklistMenuOpen()">
                        <mat-icon>check_box</mat-icon>
                    </button>

--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
@@ -20,6 +20,10 @@
                        .mat-form-field-flex {
                            align-items: center;

+                            .mat-form-field-infix {
+                                display: none;
+                            }
+
                            .mat-input-element {
                                display: none;
                            }
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
@@ -1,8 +1,8 @@
 <div [ngSwitch]="labelsMenuView" class="views" (click)="$event.stopPropagation()">

-    <div class="view " *ngSwitchCase="'labels'" [@slideInLeft] fxFlex fxLayout="column">
+    <div class="view" *ngSwitchCase="'labels'" fxFlex fxLayout="column">

-        <div class="header mb-12 pb-4 px-8" fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
            <div>Labels</div>
            <button mat-button (click)="labelsMenuView ='add'">
                <mat-icon class="s-16">add</mat-icon>
@@ -12,7 +12,7 @@

        <div fxFlex fxLayout="column" fusePerfectScrollbar>

-            <div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
+            <div class="label" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
                 [ngClass]="label.color">

                <mat-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
@@ -27,16 +27,16 @@
        </div>
    </div>

-    <div class="view px-8" *ngSwitchCase="'edit'" [@slideInRight] fxFlex fxLayout="column">
+    <div class="view edit" *ngSwitchCase="'edit'" fxFlex fxLayout="column">

-        <div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center">
-            <div>Edit Label</div>
+        <div class="header" fxLayout="row" fxLayoutAlign="start center">
            <button mat-icon-button (click)="labelsMenuView ='labels'">
                <mat-icon class="s-16">arrow_back</mat-icon>
            </button>
+            <div>Edit Label</div>
        </div>

-        <div fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="content" fxLayout="row" fxLayoutAlign="start center">
            <mat-form-field>
                <input matInput placeholder="Name" [(ngModel)]="selectedLabel.name" (change)="onLabelChange()">
            </mat-form-field>
@@ -46,26 +46,26 @@

    </div>

-    <div class="view px-8" *ngSwitchCase="'add'" [@slideInRight] fxFlex fxLayout="column">
+    <div class="view add" *ngSwitchCase="'add'" fxFlex fxLayout="column">

-        <div class="header mb-12 pb-4" fxLayout="row" fxLayoutAlign="space-between center">
-            <div>Add Label</div>
+        <div class="header" fxLayout="row" fxLayoutAlign="start center">
            <button mat-icon-button (click)="labelsMenuView ='labels'">
                <mat-icon class="s-16">arrow_back</mat-icon>
            </button>
+            <div>Add Label</div>
        </div>

        <form (submit)="addNewLabel()" #newLabelForm="ngForm" fxFlex fxLayout="column" fxLayoutAlign="start end">

-            <div class="w-100-p" fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="space-between center">
+            <div fxFlex="0 1 auto" fxLayout="row" fxLayoutAlign="space-between center">
                <mat-form-field fxFlex>
                    <input matInput placeholder="Name" [(ngModel)]="newLabel.name" name="labelName" required>
                </mat-form-field>

-                <fuse-material-color-picker [(selectedClass)]="newLabel.color" name="labelColor" class="ml-8"></fuse-material-color-picker>
+                <fuse-material-color-picker class="ml-8" [(selectedClass)]="newLabel.color" name="labelColor"></fuse-material-color-picker>
            </div>

-            <button mat-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">Add</button>
+            <button mat-raised-button class="mat-accent mt-16" [disabled]="!newLabelForm.valid">ADD NEW LABEL</button>
        </form>
    </div>
 </div>
--- a/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss
+++ b/src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.scss
@@ -30,6 +30,37 @@

                > .header {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                    padding: 4px 8px 8px 16px;
+                    margin-bottom: 8px;
+                }
+
+                .label {
+                    margin: 0 8px 8px 8px;
+                    padding: 4px 4px 4px 16px;
+                }
+
+                &.edit,
+                &.add {
+
+                    > .header {
+                        padding: 0 8px 8px 0;
+                    }
+
+                    form {
+                        padding: 0 16px 8px 16px;
+
+                        .mat-form-field-infix {
+                            width: auto !important;
+                        }
+                    }
+
+                    .content {
+                        padding: 8px 16px 8px 16px;
+
+                        .mat-form-field-infix {
+                            width: auto !important;
+                        }
+                    }
                }
            }
        }
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.html
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.html
@@ -59,9 +59,6 @@
                          name="title"
                          formControlName="title"
                          placeholder="Title"
-                          matTextareaAutosize
-                          matAutosizeMinRows="1"
-                          matAutosizeMaxRows="2"
                          required>
                </textarea>
            </mat-form-field>
@@ -96,10 +93,7 @@
                          name="notes"
                          formControlName="notes"
                          placeholder="Notes"
-                          maxlength="500"
-                          matTextareaAutosize
-                          matAutosizeMinRows="1"
-                          matAutosizeMaxRows="6">
+                          maxlength="500">
                </textarea>
                <mat-hint align="end">{{notes.value.length}} / 500</mat-hint>
            </mat-form-field>
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
+++ b/src/app/main/content/apps/todo/todo-details/todo-details.component.scss
@@ -5,12 +5,11 @@
    flex: 1 0 auto;
    flex-direction: column;
    overflow-y: auto;
-    padding: 24px;

    .todo-header {
-        padding-bottom: 24px;
-        margin-bottom: 8px;
+        padding: 24px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+        background: rgba(0, 0, 0, 0.06);

        .actions {
            min-width: 88px;
@@ -19,6 +18,7 @@
    }

    .todo-content {
+        padding: 24px;

        .title {
            font-size: 17px;
--- a/src/app/main/content/apps/todo/todo-details/todo-details.component.ts
+++ b/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',
@@ -48,12 +49,13 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy

                        this.todoForm = this.createTodoForm();

-                        this.onFormChange = this.todoForm.valueChanges
-                                                .debounceTime(500)
-                                                .distinctUntilChanged()
-                                                .subscribe(data => {
-                                                    this.todoService.updateTodo(data);
-                                                });
+                        this.onFormChange =
+                            this.todoForm.valueChanges
+                                .debounceTime(500)
+                                .distinctUntilChanged()
+                                .subscribe(data => {
+                                    this.todoService.updateTodo(data);
+                                });
                    }
                });

@@ -65,15 +67,16 @@ export class FuseTodoDetailsComponent implements OnInit, OnDestroy
                });

        // Subscribe to update on tag change
-        this.onNewTodoClicked = this.todoService.onNewTodoClicked
-                                    .subscribe(() => {
-                                        this.todo = new Todo({});
-                                        this.todo.id = FuseUtils.generateGUID();
-                                        this.formType = 'new';
-                                        this.todoForm = this.createTodoForm();
-                                        this.focusTitleField();
-                                        this.todoService.onCurrentTodoChanged.next([this.todo, 'new']);
-                                    });
+        this.onNewTodoClicked =
+            this.todoService.onNewTodoClicked
+                .subscribe(() => {
+                    this.todo = new Todo({});
+                    this.todo.id = FuseUtils.generateGUID();
+                    this.formType = 'new';
+                    this.todoForm = this.createTodoForm();
+                    this.focusTitleField();
+                    this.todoService.onCurrentTodoChanged.next([this.todo, 'new']);
+                });
    }

    focusTitleField()
--- a/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
+++ b/src/app/main/content/apps/todo/todo-list/todo-list-item/todo-list-item.component.html
@@ -5,7 +5,7 @@
    </mat-icon>

    <mat-checkbox [(ngModel)]="selected" (ngModelChange)="onSelectedChange()"
-                  class="mr-16" fxFlex="0 1 auto">
+                  class="mr-16" fxFlex="0 1 auto" (click)="$event.stopPropagation()">
    </mat-checkbox>

    <div fxLayout="row" fxLayoutAlign="start center" fxFlex>
--- a/src/app/main/content/apps/todo/todo.component.html
+++ b/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>
--- a/src/app/main/content/apps/todo/todo.component.ts
+++ b/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',
--- a/src/app/main/content/components/angular-material/angular-material.module.ts
+++ b/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 = [
    {
--- a/src/app/main/content/components/angular-material/example-components.ts
+++ b/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,
--- a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss
+++ b/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;
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.scss
+++ b/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;
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.scss
+++ b/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;
--- a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss
+++ b/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;
--- a/src/app/main/content/pages/faq/faq.component.ts
+++ b/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',
--- a/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html
+++ b/src/app/main/content/pages/knowledge-base/dialogs/article/article.component.html
@@ -1,7 +1,9 @@
 <div class="dialog-content-wrapper">

    <mat-toolbar matDialogTitle class="mat-accent m-0">
-        <span class="title dialog-title">{{data.article.title}}</span>
+        <mat-toolbar-row>
+            <span class="title dialog-title">{{data.article.title}}</span>
+        </mat-toolbar-row>
    </mat-toolbar>

    <div mat-dialog-content class="p-24 m-0" fusePerfectScrollbar>
--- a/src/app/main/content/pages/profile/profile.component.html
+++ b/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>
--- a/src/app/main/content/pages/profile/tabs/about/about.component.html
+++ b/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>
--- a/src/app/main/content/pages/profile/tabs/photos-videos/photos-videos.component.html
+++ b/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>
--- a/src/app/main/content/pages/profile/tabs/timeline/timeline.component.html
+++ b/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>
--- a/src/app/main/content/ui/colors/colors.component.html
+++ b/src/app/main/content/ui/colors/colors.component.html
@@ -25,7 +25,7 @@
    <!-- CONTENT -->
    <div class="content">

-        <mat-tab-group class="color-tabs" dynamicHeight="true" (selectChange)="selectColor($event)">
+        <mat-tab-group class="color-tabs" dynamicHeight="true" (selectedTabChange)="selectColor($event)">

            <mat-tab *ngFor="let color of ['primary', 'accent', 'warn']" label="{{color}}">
                <ng-template mat-tab-label>
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2-tabbed/left-sidenav-2-tabbed.component.html
+++ b/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 -->
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav-2/left-sidenav-2.component.html
@@ -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 -->
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav-tabbed/left-sidenav-tabbed.component.html
+++ b/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 -->
--- a/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html
@@ -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 -->
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2-tabbed/right-sidenav-2-tabbed.component.html
+++ b/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 -->
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav-2/right-sidenav-2.component.html
@@ -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 -->
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav-tabbed/right-sidenav-tabbed.component.html
+++ b/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 -->
--- a/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/carded/right-sidenav/right-sidenav.component.html
@@ -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 -->
--- a/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html
@@ -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>
--- a/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html
@@ -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>
--- a/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html
@@ -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>
--- a/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html
@@ -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>
--- a/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html
@@ -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>
--- a/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
+++ b/src/app/main/content/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html
@@ -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>
--- a/src/app/main/navbar/horizontal/navbar-horizontal.component.ts
+++ b/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');
    }
 }
--- a/src/app/main/navbar/vertical/navbar-vertical.component.scss
+++ b/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 {

--- a/src/app/navigation.model.ts
+++ b/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',
--- a/src/assets/angular-material-examples/chips-input/chips-input-example.ts
+++ b/src/assets/angular-material-examples/chips-input/chips-input-example.ts
@@ -1,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
--- a/src/assets/angular-material-examples/chips-stacked/chips-stacked-example.ts
+++ b/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'
        }
    ];
--- a/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts
+++ b/src/assets/angular-material-examples/datepicker-api/datepicker-api-example.ts
@@ -1,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',
--- a/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.css
+++ b/src/assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example.css
--- a/src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.html
+++ b/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>
--- a/src/assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example.ts
+++ b/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
+{
+}
--- a/src/assets/angular-material-examples/datepicker-events/datepicker-events-example.css
+++ b/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;
+}
--- a/src/assets/angular-material-examples/datepicker-events/datepicker-events-example.html
+++ b/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>
--- a/src/assets/angular-material-examples/datepicker-events/datepicker-events-example.ts
+++ b/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}`);
+    }
+}
--- a/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts
+++ b/src/assets/angular-material-examples/datepicker-filter/datepicker-filter-example.ts
@@ -1,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',
--- a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.css
+++ b/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
--- a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.html
+++ b/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>
--- a/src/assets/angular-material-examples/datepicker-formats/datepicker-formats-example.ts
+++ b/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());
+}
--- a/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css
+++ b/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
--- a/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.html
+++ b/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>
--- a/src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.ts
+++ b/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');
+    }
+}
--- a/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts
+++ b/src/assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example.ts
@@ -1,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',
--- a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.css
+++ b/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
--- a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.html
+++ b/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>
--- a/src/assets/angular-material-examples/datepicker-moment/datepicker-moment-example.ts
+++ b/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]));
+}
--- a/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts
+++ b/src/assets/angular-material-examples/datepicker-overview/datepicker-overview-example.ts
@@ -1,8 +1,6 @@
 import { Component } from '@angular/core';

-/**
- * @title Basic datepicker
- */
+/** @title Basic datepicker */
@Component({
    selector   : 'datepicker-overview-example',
    templateUrl: 'datepicker-overview-example.html',
--- a/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts
+++ b/src/assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example.ts
@@ -1,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',
--- a/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts
+++ b/src/assets/angular-material-examples/datepicker-touch/datepicker-touch-example.ts
@@ -1,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',
--- a/src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css
+++ b/src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
--- a/src/assets/angular-material-examples/datepicker-value/datepicker-value-example.html
+++ b/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>
--- a/src/assets/angular-material-examples/datepicker-value/datepicker-value-example.ts
+++ b/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());
+}
--- a/src/assets/angular-material-examples/elevation-overview/elevation-overview-example.css
+++ b/src/assets/angular-material-examples/elevation-overview/elevation-overview-example.css
@@ -0,0 +1,4 @@
+.example-container {
+    padding: 16px;
+    margin-bottom: 16px;
+}
--- a/src/assets/angular-material-examples/elevation-overview/elevation-overview-example.html
+++ b/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>
--- a/src/assets/angular-material-examples/elevation-overview/elevation-overview-example.ts
+++ b/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;
+}
--- 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
@@ -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
 {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sercan Yemen	19fdbbdbcb	Increased version number Fixed: Sidenav helper causes issues on mobile media steps	2017-11-27 17:20:34 +03:00
Sercan Yemen	8bbabd7437	Corrected the version number	2017-11-27 14:31:57 +03:00
Sercan Yemen	5a9cd36282	Increased the Fuse version number + Updated Angular, Angular Material and Flex Layout + Updated various components for better Angular5 support + Fixed: Contacts app various issues + Fixed: Duplicate content in Profile page tabs + Fixed: Folded status of the Navbar shouldn't brake the layout if Horizontal Navbar is active	2017-11-27 14:28:08 +03:00
mustafahlvc	297bb95a2e	Temporary aot build fix for @swimlane/ngx-charts	2017-11-18 01:43:08 +03:00
Sercan Yemen	2511a03b66	Increased the Fuse version number + Updated ngx-charts and ngx-datatables + added rxjs imports for the various search	2017-11-18 00:45:42 +03:00
mustafahlvc	76358f996e	Angular material docs updated, + @angular/material-moment-adapter added to package.json	2017-11-17 18:35:44 +03:00
mustafahlvc	142fc982ca	Angular updated to 5.0.2, angular-cli updated to 1.5.2, + angular-material-elements and fakeDb folder excluded from linting, + some lint errors solved.	2017-11-17 16:57:42 +03:00
Sercan Yemen	22d9279e3b	Fix: Authentication (v2) pages not scrollable when custom scrollbars disabled	2017-11-14 09:35:03 +03:00
Sercan Yemen	a1bec98d44	Todo adjustments	2017-11-13 11:04:57 +03:00
Sercan Yemen	e8449e340d	Contact list checkbox rendering broken due to ripple	2017-11-13 10:45:16 +03:00
Sercan Yemen	4cb8009c69	Scrumboard label selector not working correctly + style refinements	2017-11-13 10:36:32 +03:00
Sercan Yemen	7f357306eb	Angular 5.0.1 & Angular Material 5.0.0-rc0 compatibility (wip)	2017-11-12 22:36:14 +03:00
Sercan Yemen	06679343a4	Fixes #44 : Example e2e test file content is wrong + Renamed 'mat-sidenav-helper' files/folders to 'fuse-mat-sidenav-helper' & fixed its import issues	2017-11-08 15:08:40 +03:00