Updated Angular Material element examples

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

@@ -1,3 +1,4 @@
+import { AutocompleteAutoActiveFirstOptionExample } from 'assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example';
 import { AutocompleteDisplayExample } from 'assets/angular-material-examples/autocomplete-display/autocomplete-display-example';
 import { AutocompleteFilterExample } from 'assets/angular-material-examples/autocomplete-filter/autocomplete-filter-example';
 import { AutocompleteOverviewExample } from 'assets/angular-material-examples/autocomplete-overview/autocomplete-overview-example';
@@ -37,13 +38,12 @@ import { MyTelInput, FormFieldCustomControlExample } from 'assets/angular-materi
 import { FormFieldErrorExample } from 'assets/angular-material-examples/form-field-error/form-field-error-example';
 import { FormFieldHintExample } from 'assets/angular-material-examples/form-field-hint/form-field-hint-example';
 import { FormFieldOverviewExample } from 'assets/angular-material-examples/form-field-overview/form-field-overview-example';
-import { FormFieldPlaceholderExample } from 'assets/angular-material-examples/form-field-placeholder/form-field-placeholder-example';
 import { FormFieldPrefixSuffixExample } from 'assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example';
 import { FormFieldThemingExample } from 'assets/angular-material-examples/form-field-theming/form-field-theming-example';
 import { GridListDynamicExample } from 'assets/angular-material-examples/grid-list-dynamic/grid-list-dynamic-example';
 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 { IconSvgExample } from 'assets/angular-material-examples/icon-svg-example/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';
@@ -81,7 +81,6 @@ import { SelectOverviewExample } from 'assets/angular-material-examples/select-o
 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';
 import { SlideToggleFormsExample } from 'assets/angular-material-examples/slide-toggle-forms/slide-toggle-forms-example';
@@ -104,9 +103,19 @@ import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar
 import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
 import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
 import { TooltipPositionExample } from 'assets/angular-material-examples/tooltip-position/tooltip-position-example';
+import { DatepickerCustomIconExample } from 'assets/angular-material-examples/datepicker-custom-icon/datepicker-custom-icon-example';
+import { SidenavAutosizeExample } from 'assets/angular-material-examples/sidenav-autosize/sidenav-autosize-example';
+import { SnackBarPositionExample } from 'assets/angular-material-examples/snack-bar-position/snack-bar-position-example';
+import { TableSelectionExample } from 'assets/angular-material-examples/table-selection/table-selection-example';
+import { TooltipDelayExample } from 'assets/angular-material-examples/tooltip-delay/tooltip-delay-example';
+import { TooltipManualExample } from 'assets/angular-material-examples/tooltip-manual/tooltip-manual-example';
+import { TooltipModifiedDefaultsExample } from 'assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example';
+import { DividerOverviewExample } from 'assets/angular-material-examples/divider-overview/divider-overview-example';
+import { FormFieldLabelExample } from 'assets/angular-material-examples/form-field-label/form-field-label-example';
 
 export const COMPONENT_MAP = {
     'autocomplete'    : [
+        'autocomplete-auto-active-first-option',
         'autocomplete-simple',
         'autocomplete-filter',
         'autocomplete-display',
@@ -118,6 +127,7 @@ export const COMPONENT_MAP = {
     ],
     'datepicker'      : [
         'datepicker-overview',
+        'datepicker-custom-icon',
         'datepicker-start-view',
         'datepicker-value',
         'datepicker-min-max',
@@ -130,9 +140,11 @@ export const COMPONENT_MAP = {
         'datepicker-moment',
         'datepicker-formats'
     ],
+    'divider'         : [
+        'divider-overview'
+    ],
     'form-field'      : [
-        'form-field-overview',
-        'form-field-placeholder',
+        'form-field-label',
         'form-field-hint',
         'form-field-error',
         'form-field-prefix-suffix',
@@ -183,7 +195,7 @@ export const COMPONENT_MAP = {
     ],
     'sidenav'         : [
         'sidenav-overview',
-        'sidenav-fab'
+        'sidenav-autosize'
     ],
     'toolbar'         : [
         'toolbar-overview',
@@ -252,14 +264,19 @@ export const COMPONENT_MAP = {
     ],
     'tooltip'         : [
         'tooltip-overview',
-        'tooltip-position'
+        'tooltip-position',
+        'tooltip-delay',
+        'tooltip-manual',
+        'tooltip-modified-defaults'
     ],
     'snackbar'        : [
-        'snack-bar-overview'
+        'snack-bar-overview',
+        'snack-bar-position'
     ],
     'data-table'      : [
         'table-overview',
         'table-basic',
+        'table-selection',
         'table-filtering',
         'table-http'
     ],
@@ -273,6 +290,12 @@ export const COMPONENT_MAP = {
 };
 
 export const EXAMPLE_COMPONENTS = {
+    'autocomplete-auto-active-first-option': {
+        title          : 'Highlight the first autocomplete option',
+        component      : AutocompleteAutoActiveFirstOptionExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'autocomplete-display'                 : {
         title          : 'Display value autocomplete',
         component      : AutocompleteDisplayExample,
@@ -370,43 +393,49 @@ export const EXAMPLE_COMPONENTS = {
         selectorName   : null
     },
     'datepicker-api'                       : {
-        title          : 'Datepicker open method ',
+        title          : 'Datepicker open method',
         component      : DatepickerApiExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'datepicker-custom-icon'               : {
+        title          : 'Datepicker custom icon',
+        component      : DatepickerCustomIconExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'datepicker-disabled'                  : {
-        title          : 'Disabled datepicker ',
+        title          : 'Disabled datepicker',
         component      : DatepickerDisabledExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-events'                    : {
-        title          : 'Datepicker input and change events ',
+        title          : 'Datepicker input and change events',
         component      : DatepickerEventsExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-filter'                    : {
-        title          : 'Datepicker with filter validation ',
+        title          : 'Datepicker with filter validation',
         component      : DatepickerFilterExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-formats'                   : {
-        title          : 'Datepicker with custom formats ',
+        title          : 'Datepicker with custom formats',
         component      : DatepickerFormatsExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-locale'                    : {
-        title          : 'Datepicker with different locale ',
+        title          : 'Datepicker with different locale',
         component      : DatepickerLocaleExample,
         additionalFiles: null,
         selectorName   : null
     },
     'datepicker-min-max'                   : {
-        title          : 'Datepicker with min & max validation ',
+        title          : 'Datepicker with min & max validation',
         component      : DatepickerMinMaxExample,
         additionalFiles: null,
         selectorName   : null
@@ -465,6 +494,12 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: ['dialog-overview-example-dialog.html'],
         selectorName   : 'DialogOverviewExample, DialogOverviewExampleDialog'
     },
+    'divider-overview'                     : {
+        title          : 'Basic divider',
+        component      : DividerOverviewExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'elevation-overview'                   : {
         title          : 'Elevation CSS classes',
         component      : ElevationOverviewExample,
@@ -507,9 +542,9 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
-    'form-field-placeholder'       : {
-        title          : 'Form field with placeholder ',
-        component      : FormFieldPlaceholderExample,
+    'form-field-label'                     : {
+        title          : 'Form field with label',
+        component      : FormFieldLabelExample,
         additionalFiles: null,
         selectorName   : null
     },
@@ -675,7 +710,7 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
-    'progress-spinner-configurable': {
+    'progress-spinner-configurable'        : {
         title          : 'Configurable progress spinner',
         component      : ProgressSpinnerConfigurableExample,
         additionalFiles: null,
@@ -771,18 +806,18 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
-    'sidenav-fab'                  : {
-        title          : 'Sidenav with a FAB',
-        component      : SidenavFabExample,
-        additionalFiles: null,
-        selectorName   : null
-    },
     'sidenav-overview'                     : {
         title          : 'Basic sidenav',
         component      : SidenavOverviewExample,
         additionalFiles: null,
         selectorName   : null
     },
+    'sidenav-autosize'                     : {
+        title          : 'Autosize sidenav',
+        component      : SidenavAutosizeExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'slide-toggle-configurable'            : {
         title          : 'Configurable slide-toggle',
         component      : SlideToggleConfigurableExample,
@@ -825,6 +860,12 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'snack-bar-position'                   : {
+        title          : 'Snack-bar with different positions',
+        component      : SnackBarPositionExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'sort-overview'                        : {
         title          : 'Sorting overview',
         component      : SortOverviewExample,
@@ -843,6 +884,12 @@ export const EXAMPLE_COMPONENTS = {
         additionalFiles: null,
         selectorName   : null
     },
+    'table-selection'                      : {
+        title          : 'Table with selection',
+        component      : TableSelectionExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
     'table-filtering'                      : {
         title          : 'Table with filtering',
         component      : TableFilteringExample,
@@ -908,10 +955,29 @@ export const EXAMPLE_COMPONENTS = {
         component      : TooltipPositionExample,
         additionalFiles: null,
         selectorName   : null
+    },
+    'tooltip-delay'                        : {
+        title          : 'Tooltip with a show and hide delay',
+        component      : TooltipDelayExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'tooltip-manual'                       : {
+        title          : 'Tooltip that can be manually shown/hidden.',
+        component      : TooltipManualExample,
+        additionalFiles: null,
+        selectorName   : null
+    },
+    'tooltip-modified-defaults'            : {
+        title          : 'Tooltip with modified defaults',
+        component      : TooltipModifiedDefaultsExample,
+        additionalFiles: null,
+        selectorName   : null
     }
 };
 
 export const EXAMPLE_LIST = [
+    AutocompleteAutoActiveFirstOptionExample,
     AutocompleteDisplayExample,
     AutocompleteFilterExample,
     AutocompleteOverviewExample,
@@ -929,6 +995,7 @@ export const EXAMPLE_LIST = [
     ChipsOverviewExample,
     ChipsStackedExample,
     DatepickerApiExample,
+    DatepickerCustomIconExample,
     DatepickerDisabledExample,
     DatepickerEventsExample,
     DatepickerFilterExample,
@@ -944,6 +1011,7 @@ export const EXAMPLE_LIST = [
     DialogDataExampleDialog, DialogDataExample,
     DialogElementsExampleDialog, DialogElementsExample,
     DialogOverviewExampleDialog, DialogOverviewExample,
+    DividerOverviewExample,
     ElevationOverviewExample,
     ExpansionOverviewExample,
     ExpansionStepsExample,
@@ -951,7 +1019,7 @@ export const EXAMPLE_LIST = [
     FormFieldErrorExample,
     FormFieldHintExample,
     FormFieldOverviewExample,
-    FormFieldPlaceholderExample,
+    FormFieldLabelExample,
     FormFieldPrefixSuffixExample,
     FormFieldThemingExample,
     GridListDynamicExample,
@@ -995,8 +1063,9 @@ export const EXAMPLE_LIST = [
     SelectPanelClassExample,
     SelectResetExample,
     SelectValueBindingExample,
-    SidenavFabExample,
+    SidenavAutosizeExample,
     SidenavOverviewExample,
+    SnackBarPositionExample,
     SlideToggleConfigurableExample,
     SlideToggleFormsExample,
     SlideToggleOverviewExample,
@@ -1007,6 +1076,7 @@ export const EXAMPLE_LIST = [
     SortOverviewExample,
     StepperOverviewExample,
     TableBasicExample,
+    TableSelectionExample,
     TableFilteringExample,
     TableHttpExample,
     TableOverviewExample,
@@ -1017,5 +1087,8 @@ export const EXAMPLE_LIST = [
     ToolbarMultirowExample,
     ToolbarOverviewExample,
     TooltipOverviewExample,
+    TooltipDelayExample,
+    TooltipManualExample,
+    TooltipModifiedDefaultsExample,
     TooltipPositionExample
 ];

src/app/navigation/navigation.ts

@@ -685,6 +685,12 @@ export const navigation = [
                                 'type' : 'item',
                                 'url'  : '/components/angular-material/card'
                             },
+                            {
+                                'id'   : 'divider',
+                                'title': 'Divider',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/divider'
+                            },
                             {
                                 'id'   : 'stepper',
                                 'title': 'Stepper',

src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.css

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

src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html

@@ -0,0 +1,10 @@
+<form class="example-form">
+  <mat-form-field class="example-full-width">
+    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
+    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+        {{ option }}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</form>

src/assets/angular-material-examples/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs/Observable';
+import {startWith} from 'rxjs/operators/startWith';
+import {map} from 'rxjs/operators/map';
+
+/**
+ * @title Highlight the first autocomplete option
+ */
+@Component({
+  selector: 'autocomplete-auto-active-first-option-example',
+  templateUrl: 'autocomplete-auto-active-first-option-example.html',
+  styleUrls: ['autocomplete-auto-active-first-option-example.css']
+})
+export class AutocompleteAutoActiveFirstOptionExample {
+  myControl: FormControl = new FormControl();
+  options = ['One', 'Two', 'Three'];
+  filteredOptions: Observable<string[]>;
+
+  ngOnInit() {
+    this.filteredOptions = this.myControl.valueChanges.pipe(
+      startWith(''),
+      map(val => this.filter(val))
+    );
+  }
+
+  filter(val: string): string[] {
+    return this.options.filter(option => option.toLowerCase().indexOf(val.toLowerCase()) === 0);
+  }
+
+}

src/assets/angular-material-examples/datepicker-custom-icon/datepicker-custom-icon-example.html

@@ -0,0 +1,7 @@
+<mat-form-field class="example-full-width">
+  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
+  <mat-datepicker-toggle matSuffix [for]="picker">
+    <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
+  </mat-datepicker-toggle>
+  <mat-datepicker #picker></mat-datepicker>
+</mat-form-field>

src/assets/angular-material-examples/datepicker-custom-icon/datepicker-custom-icon-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+/** @title Datepicker with custom icon */
+@Component({
+  selector: 'datepicker-custom-icon-example',
+  templateUrl: 'datepicker-custom-icon-example.html',
+  styleUrls: ['datepicker-custom-icon-example.css'],
+})
+export class DatepickerCustomIconExample {}

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

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

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

@@ -0,0 +1,7 @@
+<mat-list>
+  <mat-list-item>Item 1</mat-list-item>
+  <mat-divider></mat-divider>
+  <mat-list-item>Item 2</mat-list-item>
+  <mat-divider></mat-divider>
+  <mat-list-item>Item 3</mat-list-item>
+</mat-list>

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

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

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

@@ -0,0 +1,34 @@
+<div class="example-container">
+  <form class="example-container" [formGroup]="options">
+    <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
+    <div>
+      <label>Float label: </label>
+      <mat-radio-group formControlName="floatLabel">
+        <mat-radio-button value="auto">Auto</mat-radio-button>
+        <mat-radio-button value="always">Always</mat-radio-button>
+        <mat-radio-button value="never">Never</mat-radio-button>
+      </mat-radio-group>
+    </div>
+  </form>
+
+  <mat-form-field
+      [hideRequiredMarker]="options.value.hideRequired"
+      [floatLabel]="options.value.floatLabel">
+    <input matInput placeholder="Simple placeholder" required>
+  </mat-form-field>
+
+  <mat-form-field [floatLabel]="options.value.floatLabel">
+    <mat-label>Both a label and a placeholder</mat-label>
+    <input matInput placeholder="Simple placeholder">
+  </mat-form-field>
+
+  <mat-form-field
+      [hideRequiredMarker]="options.value.hideRequired"
+      [floatLabel]="options.value.floatLabel">
+    <mat-select required>
+      <mat-option>-- None --</mat-option>
+      <mat-option value="option">Option</mat-option>
+    </mat-select>
+    <mat-placeholder><mat-icon>favorite</mat-icon> <b> Fancy</b> <i> placeholder</i></mat-placeholder>
+  </mat-form-field>
+</div>

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

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
+
+/** @title Form field with label */
+@Component({
+  selector: 'form-field-label-example',
+  templateUrl: 'form-field-label-example.html',
+  styleUrls: ['form-field-label-example.css']
+})
+export class FormFieldLabelExample {
+  options: FormGroup;
+
+  constructor(fb: FormBuilder) {
+    this.options = fb.group({
+      hideRequired: false,
+      floatLabel: 'auto',
+    });
+  }
+}

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

@@ -1,31 +0,0 @@
-<div class="example-container">
-    <form class="example-container" [formGroup]="options">
-        <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
-        <div>
-            <label>Float placeholder: </label>
-            <mat-radio-group formControlName="floatPlaceholder">
-                <mat-radio-button value="auto">Auto</mat-radio-button>
-                <mat-radio-button value="always">Always</mat-radio-button>
-                <mat-radio-button value="never">Never</mat-radio-button>
-            </mat-radio-group>
-        </div>
-    </form>
-
-    <mat-form-field
-        [hideRequiredMarker]="options.value.hideRequired"
-        [floatPlaceholder]="options.value.floatPlaceholder">
-        <input matInput placeholder="Simple placeholder" required>
-    </mat-form-field>
-
-    <mat-form-field
-        [hideRequiredMarker]="options.value.hideRequired"
-        [floatPlaceholder]="options.value.floatPlaceholder">
-        <mat-select required>
-            <mat-option>-- None --</mat-option>
-            <mat-option value="option">Option</mat-option>
-        </mat-select>
-        <mat-placeholder>
-            <mat-icon>favorite</mat-icon>
-            <b> Fancy</b> <i> placeholder</i></mat-placeholder>
-    </mat-form-field>
-</div>

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

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-
-/** @title Form field with placeholder */
-@Component({
-    selector   : 'form-field-placeholder-example',
-    templateUrl: 'form-field-placeholder-example.html',
-    styleUrls  : ['form-field-placeholder-example.css']
-})
-export class FormFieldPlaceholderExample
-{
-    options: FormGroup;
-
-    constructor(fb: FormBuilder)
-    {
-        this.options = fb.group({
-            hideRequired    : false,
-            floatPlaceholder: 'auto'
-        });
-    }
-}

src/assets/angular-material-examples/icon-svg-example/icon-svg-example.css

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

src/assets/angular-material-examples/icon-svg-example/icon-svg-example.ts

@@ -0,0 +1,19 @@
+import {Component} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MatIconRegistry} from '@angular/material';
+
+/**
+ * @title SVG icons
+ */
+@Component({
+  selector: 'icon-svg-example',
+  templateUrl: 'icon-svg-example.html',
+  styleUrls: ['icon-svg-example.css'],
+})
+export class IconSvgExample {
+  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
+    iconRegistry.addSvgIcon(
+        'thumbs-up',
+        sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg'));
+  }
+}

src/assets/angular-material-examples/icon-svg/icon-svg-example.ts

@@ -1,20 +0,0 @@
-import { Component } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry } from '@angular/material';
-
-/**
- * @title SVG icons
- */
-@Component({
-    selector   : 'icon-svg-example',
-    templateUrl: 'icon-svg-example.html'
-})
-export class IconSvgExample
-{
-    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer)
-    {
-        iconRegistry.addSvgIcon(
-            'thumbs-up',
-            sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg'));
-    }
-}

src/assets/angular-material-examples/sidenav-autosize/sidenav-autosize-example.css

@@ -0,0 +1,16 @@
+.example-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-sidenav {
+  padding: 20px;
+}

src/assets/angular-material-examples/sidenav-autosize/sidenav-autosize-example.html

@@ -0,0 +1,16 @@
+<mat-drawer-container class="example-container" autosize>
+  <mat-drawer #drawer class="example-sidenav" mode="side">
+    <p>Auto-resizing sidenav</p>
+    <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
+    <button (click)="showFiller = !showFiller" mat-raised-button>
+      Toggle extra text
+    </button>
+  </mat-drawer>
+
+  <div class="example-sidenav-content">
+    <button type="button" mat-button (click)="drawer.toggle()">
+      Toggle sidenav
+    </button>
+  </div>
+
+</mat-drawer-container>

src/assets/angular-material-examples/sidenav-autosize/sidenav-autosize-example.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Autosize sidenav
+ */
+@Component({
+  selector: 'sidenav-autosize-example',
+  templateUrl: 'sidenav-autosize-example.html',
+  styleUrls: ['sidenav-autosize-example.css'],
+})
+export class SidenavAutosizeExample {
+  showFiller = false;
+}

src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.css

@@ -1,26 +0,0 @@
-.example-sidenav-fab-container {
-    width: 500px;
-    height: 300px;
-    border: 1px solid rgba(0, 0, 0, 0.5);
-}
-
-.example-sidenav-fab-container mat-sidenav {
-    max-width: 200px;
-}
-
-.example-sidenav-fab-container .mat-sidenav-content,
-.example-sidenav-fab-container mat-sidenav {
-    display: flex;
-    overflow: visible;
-}
-
-.example-scrolling-content {
-    overflow: auto;
-    height: 100%;
-}
-
-.example-fab.mat-mini-fab {
-    position: absolute;
-    right: 20px;
-    bottom: 10px;
-}

src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.html

@@ -1,32 +0,0 @@
-<mat-sidenav-container class="example-sidenav-fab-container">
-    <mat-sidenav #sidenav mode="side" opened="true">
-        <button mat-mini-fab class="example-fab" (click)="sidenav.toggle()">
-            <mat-icon>add</mat-icon>
-        </button>
-        <div class="example-scrolling-content">
-            Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus,
-            fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam
-            nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna
-            aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor
-            vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at,
-            ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu
-            enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis,
-            tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet.
-            Taciti dui, sapien consectetuer.
-        </div>
-    </mat-sidenav>
-    <button mat-mini-fab class="example-fab" (click)="sidenav.toggle()">
-        <mat-icon>add</mat-icon>
-    </button>
-    <div class="example-scrolling-content">
-        Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce
-        vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id,
-        neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna.
-        Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat
-        cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui
-        sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu
-        erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh
-        ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien
-        consectetuer.
-    </div>
-</mat-sidenav-container>

src/assets/angular-material-examples/sidenav-fab/sidenav-fab-example.ts

@@ -1,15 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-/**
- * @title Sidenav with a FAB
- */
-@Component({
-    selector           : 'sidenav-fab-example',
-    templateUrl        : 'sidenav-fab-example.html',
-    styleUrls          : ['sidenav-fab-example.css'],
-    encapsulation      : ViewEncapsulation.None,
-    preserveWhitespaces: false
-})
-export class SidenavFabExample
-{
-}

src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.html

@@ -0,0 +1,19 @@
+<mat-form-field>
+  <mat-select placeholder="Horizontal position" [(value)]="horizontalPosition">
+    <mat-option value="start">Start</mat-option>
+    <mat-option value="center">Center</mat-option>
+    <mat-option value="end">End</mat-option>
+    <mat-option value="left">Left</mat-option>
+    <mat-option value="right">Right</mat-option>
+  </mat-select>
+</mat-form-field>
+<mat-form-field>
+  <mat-select placeholder="Vertical position" [(value)]="verticalPosition">
+    <mat-option value="top">Top</mat-option>
+    <mat-option value="bottom">Bottom</mat-option>
+  </mat-select>
+</mat-form-field>
+
+<button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
+  Pool party!
+</button>

src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {
+  MatSnackBar,
+  MatSnackBarHorizontalPosition,
+  MatSnackBarVerticalPosition,
+} from '@angular/material';
+
+/**
+ * @title Snack-bar with configurable position
+ */
+@Component({
+  selector: 'snack-bar-position-example',
+  templateUrl: 'snack-bar-position-example.html',
+})
+export class SnackBarPositionExample {
+
+  horizontalPosition: MatSnackBarHorizontalPosition = 'start';
+  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
+
+  constructor(public snackBar: MatSnackBar) {}
+
+  openSnackBar() {
+    this.snackBar.open('Canonball!!', 'End now', {
+      duration: 500,
+      horizontalPosition: this.horizontalPosition,
+      verticalPosition: this.verticalPosition,
+    });
+  }
+}

src/assets/angular-material-examples/table-selection/table-selection-example.css

@@ -0,0 +1,15 @@
+.example-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 500px;
+  min-width: 300px;
+}
+
+.mat-table {
+  overflow: auto;
+  max-height: 500px;
+}
+
+.mat-column-select {
+  overflow: visible;
+}

src/assets/angular-material-examples/table-selection/table-selection-example.html

@@ -0,0 +1,49 @@
+<div class="example-container mat-elevation-z8">
+  <mat-table #table [dataSource]="dataSource">
+
+    <!-- Checkbox Column -->
+    <ng-container matColumnDef="select">
+      <mat-header-cell *matHeaderCellDef>
+        <mat-checkbox (change)="$event ? masterToggle() : null"
+                      [checked]="selection.hasValue() && isAllSelected()"
+                      [indeterminate]="selection.hasValue() && !isAllSelected()">
+        </mat-checkbox>
+      </mat-header-cell>
+      <mat-cell *matCellDef="let row">
+        <mat-checkbox (click)="$event.stopPropagation()"
+                      (change)="$event ? selection.toggle(row) : null"
+                      [checked]="selection.isSelected(row)">
+        </mat-checkbox>
+      </mat-cell>
+    </ng-container>
+
+    <!-- Position Column -->
+    <ng-container matColumnDef="position">
+      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+    </ng-container>
+
+    <!-- Weight Column -->
+    <ng-container matColumnDef="weight">
+      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
+    </ng-container>
+
+    <!-- Symbol Column -->
+    <ng-container matColumnDef="symbol">
+      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"
+             (click)="selection.toggle(row)">
+    </mat-row>
+  </mat-table>
+</div>

src/assets/angular-material-examples/table-selection/table-selection-example.ts

@@ -0,0 +1,61 @@
+import {Component} from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+import {SelectionModel} from '@angular/cdk/collections';
+
+/**
+ * @title Table with selection
+ */
+@Component({
+  selector: 'table-selection-example',
+  styleUrls: ['table-selection-example.css'],
+  templateUrl: 'table-selection-example.html',
+})
+export class TableSelectionExample {
+  displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
+  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
+  selection = new SelectionModel<Element>(true, []);
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+        this.selection.clear() :
+        this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+}
+
+export interface Element {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: Element[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
+  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
+  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
+  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
+  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
+  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
+  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
+  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
+  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
+  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
+];

src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.css

@@ -0,0 +1,3 @@
+button {
+  margin: 8px;
+}

src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.html

@@ -0,0 +1,7 @@
+<button mat-raised-button matTooltip="Tooltip!" matTooltipShowDelay="1000">
+  My tooltip waits one second to show
+</button>
+
+<button mat-raised-button matTooltip="Tooltip!" matTooltipHideDelay="2000">
+  My tooltip waits two seconds to hide
+</button>

src/assets/angular-material-examples/tooltip-delay/tooltip-delay-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tooltip with a show and hide delay
+ */
+@Component({
+  selector: 'tooltip-delay-example',
+  templateUrl: 'tooltip-delay-example.html',
+  styleUrls: ['tooltip-delay-example.css'],
+})
+export class TooltipDelayExample {}

src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.css

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

src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html

@@ -0,0 +1,5 @@
+<button mat-raised-button (click)="tooltip.show()"> Show tooltip </button>
+
+<span matTooltip="This is the tooltip message" #tooltip="matTooltip">
+  I have a tooltip
+</span>

src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tooltip that can be manually shown/hidden.
+ */
+@Component({
+  selector: 'tooltip-manual-example',
+  templateUrl: 'tooltip-manual-example.html',
+  styleUrls: ['tooltip-manual-example.css'],
+})
+export class TooltipManualExample {}

src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.css

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

src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.html

@@ -0,0 +1,3 @@
+<button mat-raised-button matTooltip="By default, I delay">
+  Button with delay-default tooltip
+</button>

src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material';
+
+/** Custom options the configure the tooltip's default show/hide delays. */
+export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {
+  showDelay: 1000,
+  hideDelay: 1000,
+  touchendHideDelay: 1000,
+};
+
+/**
+ * @title Tooltip with a show and hide delay
+ */
+@Component({
+  selector: 'tooltip-modified-defaults-example',
+  templateUrl: 'tooltip-modified-defaults-example.html',
+  styleUrls: ['tooltip-modified-defaults-example.css'],
+  providers: [
+    {provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: myCustomTooltipDefaults}
+  ],
+})
+export class TooltipModifiedDefaultsExample {}