Added new Angular Material examples

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

@@ -173,6 +173,11 @@ import { StepperErrorsExample } from 'assets/angular-material-examples/stepper-e
 import { TabGroupAlignExample } from 'assets/angular-material-examples/tab-group-align/tab-group-align-example';
 import { SimpleColumn, TableSimpleColumnExample } from 'assets/angular-material-examples/table-simple-column/table-simple-column-example';
 import { TableWrappedExample, WrapperTable } from 'assets/angular-material-examples/table-wrapped/table-wrapped-example';
+import { PlainInputAutocompleteExample } from 'assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example';
+import { ChipsDragDropExample } from 'assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example';
+import { DatepickerDateClassExample } from 'assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example';
+import { MenuPositionExample } from 'assets/angular-material-examples/menu-position/menu-position-example';
+import { TabGroupAnimationsExample } from 'assets/angular-material-examples/tab-group-animations/tab-group-animations-example';
 
 export const COMPONENT_MAP = {
     'autocomplete'    : [
@@ -181,7 +186,8 @@ export const COMPONENT_MAP = {
         'autocomplete-display',
         'autocomplete-filter',
         'autocomplete-optgroup',
-        'autocomplete-simple'
+        'autocomplete-simple',
+        'autocomplete-plain-input'
     ],
     'badge'           : [
         'badge-overview'
@@ -209,6 +215,7 @@ export const COMPONENT_MAP = {
     'chips'           : [
         'chips-overview',
         'chips-autocomplete',
+        // 'chips-drag-and-drop',
         'chips-input',
         'chips-stacked'
     ],
@@ -218,6 +225,7 @@ export const COMPONENT_MAP = {
         'datepicker-color',
         'datepicker-custom-header',
         'datepicker-custom-icon',
+        'datepicker-date-class',
         'datepicker-disabled',
         'datepicker-events',
         'datepicker-filter',
@@ -286,6 +294,7 @@ export const COMPONENT_MAP = {
     ],
     'menu'            : [
         'menu-overview',
+        'menu-position',
         'menu-icons',
         'nested-menu'
     ],
@@ -389,6 +398,7 @@ export const COMPONENT_MAP = {
         'tab-group-basic',
         'tab-group-async',
         'tab-group-align',
+        'tab-group-animations',
         'tab-group-custom-label',
         'tab-group-dynamic',
         'tab-group-dynamic-height',
@@ -448,6 +458,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Autocomplete overview',
         component: AutocompleteOverviewExample
     },
+    'autocomplete-plain-input'                  : {
+        title    : 'Plain input autocomplete',
+        component: PlainInputAutocompleteExample
+    },
     'autocomplete-simple'                  : {
         title    : 'Simple autocomplete',
         component: AutocompleteSimpleExample
@@ -502,6 +516,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Chips Autocomplete',
         component: ChipsAutocompleteExample
     },
+    'chips-drag-and-drop'                   : {
+        title    : 'Chips Drag and Drop',
+        component: ChipsDragDropExample
+    },
     'chips-input'                          : {
         title    : 'Chips with input',
         component: ChipsInputExample
@@ -531,6 +549,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Datepicker with custom icon',
         component: DatepickerCustomIconExample
     },
+    'datepicker-date-class'                  : {
+        title    : 'Datepicker with custom date classes',
+        component: DatepickerDateClassExample
+    },
     'datepicker-disabled'                  : {
         title    : 'Disabled datepicker',
         component: DatepickerDisabledExample
@@ -733,6 +755,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Basic menu',
         component: MenuOverviewExample
     },
+    'menu-position'                        : {
+        title    : 'Menu positioning',
+        component: MenuPositionExample
+    },
     'nested-menu'                          : {
         title    : 'Nested menu',
         component: NestedMenuExample
@@ -1027,6 +1053,10 @@ export const EXAMPLE_COMPONENTS = {
         title    : 'Tab group with aligned labels',
         component: TabGroupAlignExample
     },
+    'tab-group-animations'                      : {
+        title    : 'Tab group animations',
+        component: TabGroupAnimationsExample
+    },
     'tab-group-basic'                      : {
         title    : 'Basic use of the tab group',
         component: TabGroupBasicExample
@@ -1152,6 +1182,7 @@ export const EXAMPLE_LIST = [
     AutocompleteOptgroupExample,
     AutocompleteOverviewExample,
     AutocompleteSimpleExample,
+    PlainInputAutocompleteExample,
     BadgeOverviewExample,
     BottomSheetOverviewExample, BottomSheetOverviewExampleSheet,
     ButtonOverviewExample,
@@ -1164,6 +1195,7 @@ export const EXAMPLE_LIST = [
     CheckboxConfigurableExample,
     CheckboxOverviewExample,
     ChipsAutocompleteExample,
+    ChipsDragDropExample,
     ChipsInputExample,
     ChipsOverviewExample,
     ChipsStackedExample,
@@ -1171,6 +1203,7 @@ export const EXAMPLE_LIST = [
     DatepickerColorExample,
     DatepickerCustomHeaderExample, ExampleHeader,
     DatepickerCustomIconExample,
+    DatepickerDateClassExample,
     DatepickerDisabledExample,
     DatepickerEventsExample,
     DatepickerFilterExample,
@@ -1219,6 +1252,7 @@ export const EXAMPLE_LIST = [
     ListSelectionExample,
     MenuIconsExample,
     MenuOverviewExample,
+    MenuPositionExample,
     NestedMenuExample,
     PaginatorConfigurableExample,
     PaginatorOverviewExample,
@@ -1292,6 +1326,7 @@ export const EXAMPLE_LIST = [
     TableStickyHeaderExample,
     TableWrappedExample, WrapperTable,
     TabGroupAlignExample,
+    TabGroupAnimationsExample,
     TabGroupBasicExample,
     TabGroupAsyncExample,
     TabGroupCustomLabelExample,

src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-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-plain-input/autocomplete-plain-input-example.html

@@ -0,0 +1,8 @@
+<form class="example-form">
+  <input type="text" placeholder="Search for a street" [formControl]="control" [matAutocomplete]="auto">
+  <mat-autocomplete #auto="matAutocomplete">
+    <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
+      {{street}}
+    </mat-option>
+  </mat-autocomplete>
+</form>

src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts

@@ -0,0 +1,34 @@
+import {Component, OnInit} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {startWith, map} from 'rxjs/operators';
+
+/**
+ * @title Plain input autocomplete
+ */
+@Component({
+  selector: 'autocomplete-plain-input-example',
+  templateUrl: 'autocomplete-plain-input-example.html',
+  styleUrls: ['autocomplete-plain-input-example.css'],
+})
+export class PlainInputAutocompleteExample implements OnInit {
+  control = new FormControl();
+  streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
+  filteredStreets: Observable<string[]>;
+
+  ngOnInit() {
+    this.filteredStreets = this.control.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value))
+    );
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = this._normalizeValue(value);
+    return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
+  }
+
+  private _normalizeValue(value: string): string {
+    return value.toLowerCase().replace(/\s/g, '');
+  }
+}

src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.css

@@ -0,0 +1,7 @@
+.example-box.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-chip .cdk-drop-list-dragging {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.html

@@ -0,0 +1,12 @@
+<mat-chip-list
+  class="example-chip"
+  cdkDropList 
+  cdkDropListOrientation="horizontal"
+  (cdkDropListDropped)="drop($event)">
+  <mat-chip
+    class="example-box"
+    cdkDrag
+    *ngFor="let vegetable of vegetables">
+    {{vegetable.name}}
+  </mat-chip>
+</mat-chip-list>

src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.ts

@@ -0,0 +1,29 @@
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import {Component} from '@angular/core';
+
+export interface Vegetable {
+  name: string;
+}
+
+/**
+ * @title Chips Drag and Drop
+ */
+@Component({
+  selector: 'chips-drag-drop-example',
+  templateUrl: 'chips-drag-and-drop-example.html',
+  styleUrls: ['chips-drag-and-drop-example.css']
+})
+export class ChipsDragDropExample {
+  vegetables: Vegetable[] = [
+    {name: 'apple'},
+    {name: 'banana'},
+    {name: 'strawberry'},
+    {name: 'orange'},
+    {name: 'kiwi'},
+    {name: 'cherry'},
+  ];
+
+  drop(event: CdkDragDrop<Vegetable[]>) {
+    moveItemInArray(this.vegetables, event.previousIndex, event.currentIndex);
+  }
+}

src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.css

@@ -0,0 +1,4 @@
+.example-custom-date-class {
+  background: orange;
+  border-radius: 100%;
+}

src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.html

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

src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.ts

@@ -0,0 +1,18 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+/** @title Datepicker with custom date classes */
+@Component({
+  selector: 'datepicker-date-class-example',
+  templateUrl: 'datepicker-date-class-example.html',
+  styleUrls: ['datepicker-date-class-example.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DatepickerDateClassExample {
+  dateClass = (d: Date) => {
+
+    const date = d.date();
+
+    // Highlight the 1st and 20th day of each month.
+    return (date === 1 || date === 20) ? 'example-custom-date-class' : undefined;
+  }
+}

src/assets/angular-material-examples/menu-position/menu-position-example.css

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

src/assets/angular-material-examples/menu-position/menu-position-example.html

@@ -0,0 +1,24 @@
+<button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
+<mat-menu #aboveMenu="matMenu" yPosition="above">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+<button mat-button [matMenuTriggerFor]="belowMenu">Below</button>
+<mat-menu #belowMenu="matMenu" yPosition="below">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+<button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
+<mat-menu #beforeMenu="matMenu" xPosition="before">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>
+
+
+<button mat-button [matMenuTriggerFor]="afterMenu">After</button>
+<mat-menu #afterMenu="matMenu" xPosition="after">
+  <button mat-menu-item>Item 1</button>
+  <button mat-menu-item>Item 2</button>
+</mat-menu>

src/assets/angular-material-examples/menu-position/menu-position-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Menu positioning
+ */
+@Component({
+  selector: 'menu-position-example',
+  templateUrl: 'menu-position-example.html',
+  styleUrls: ['menu-position-example.css'],
+})
+export class MenuPositionExample {}

src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.css

@@ -0,0 +1,3 @@
+.mat-tab-group {
+  margin-bottom: 48px;
+}

src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.html

@@ -0,0 +1,14 @@
+<h3>No animation</h3>
+
+<mat-tab-group animationDuration="0ms">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>
+
+<h3>Very slow animation</h3>
+<mat-tab-group animationDuration="2000ms">
+  <mat-tab label="First">Content 1</mat-tab>
+  <mat-tab label="Second">Content 2</mat-tab>
+  <mat-tab label="Third">Content 3</mat-tab>
+</mat-tab-group>

src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Tab group animations
+ */
+@Component({
+  selector: 'tab-group-animations-example',
+  templateUrl: 'tab-group-animations-example.html',
+  styleUrls: ['tab-group-animations-example.css'],
+})
+export class TabGroupAnimationsExample {}