From bb3764aaffa00b3d607b19851e5c90d27796538a Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Thu, 30 May 2019 11:37:35 +0300
Subject: [PATCH] Added new Angular Material examples

---
 .../example-components.ts                     | 37 ++++++++++++++++++-
 .../autocomplete-plain-input-example.css      |  9 +++++
 .../autocomplete-plain-input-example.html     |  8 ++++
 .../autocomplete-plain-input-example.ts       | 34 +++++++++++++++++
 .../chips-drag-and-drop-example.css           |  7 ++++
 .../chips-drag-and-drop-example.html          | 12 ++++++
 .../chips-drag-and-drop-example.ts            | 29 +++++++++++++++
 .../datepicker-date-class-example.css         |  4 ++
 .../datepicker-date-class-example.html        |  5 +++
 .../datepicker-date-class-example.ts          | 18 +++++++++
 .../menu-position/menu-position-example.css   |  1 +
 .../menu-position/menu-position-example.html  | 24 ++++++++++++
 .../menu-position/menu-position-example.ts    | 11 ++++++
 .../tab-group-animations-example.css          |  3 ++
 .../tab-group-animations-example.html         | 14 +++++++
 .../tab-group-animations-example.ts           | 11 ++++++
 .../tooltip-manual-example.html               |  2 +-
 17 files changed, 227 insertions(+), 2 deletions(-)
 create mode 100755 src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css
 create mode 100755 src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html
 create mode 100755 src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts
 create mode 100755 src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.css
 create mode 100755 src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.html
 create mode 100755 src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.ts
 create mode 100755 src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.css
 create mode 100755 src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.html
 create mode 100755 src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.ts
 create mode 100755 src/assets/angular-material-examples/menu-position/menu-position-example.css
 create mode 100755 src/assets/angular-material-examples/menu-position/menu-position-example.html
 create mode 100755 src/assets/angular-material-examples/menu-position/menu-position-example.ts
 create mode 100755 src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.css
 create mode 100755 src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.html
 create mode 100755 src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.ts

diff --git a/src/app/main/angular-material-elements/example-components.ts b/src/app/main/angular-material-elements/example-components.ts
index 89b8e29b..e00357a2 100644
--- a/src/app/main/angular-material-elements/example-components.ts
+++ b/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,
diff --git a/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css b/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css
new file mode 100755
index 00000000..08fa6753
--- /dev/null
+++ b/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%;
+}
diff --git a/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html b/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html
new file mode 100755
index 00000000..731b6f21
--- /dev/null
+++ b/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>
diff --git a/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts b/src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts
new file mode 100755
index 00000000..e0355903
--- /dev/null
+++ b/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, '');
+  }
+}
diff --git a/src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.css b/src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.css
new file mode 100755
index 00000000..c773bb04
--- /dev/null
+++ b/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);
+}
diff --git a/src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.html b/src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.html
new file mode 100755
index 00000000..3bdcb696
--- /dev/null
+++ b/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>
diff --git a/src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.ts b/src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.ts
new file mode 100755
index 00000000..00f8a6c4
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.css b/src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.css
new file mode 100755
index 00000000..3a0cabf7
--- /dev/null
+++ b/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%;
+}
diff --git a/src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.html b/src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.html
new file mode 100755
index 00000000..fbba9f6a
--- /dev/null
+++ b/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>
diff --git a/src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.ts b/src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.ts
new file mode 100755
index 00000000..c26a8380
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/assets/angular-material-examples/menu-position/menu-position-example.css b/src/assets/angular-material-examples/menu-position/menu-position-example.css
new file mode 100755
index 00000000..74323087
--- /dev/null
+++ b/src/assets/angular-material-examples/menu-position/menu-position-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/assets/angular-material-examples/menu-position/menu-position-example.html b/src/assets/angular-material-examples/menu-position/menu-position-example.html
new file mode 100755
index 00000000..41df541e
--- /dev/null
+++ b/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>
diff --git a/src/assets/angular-material-examples/menu-position/menu-position-example.ts b/src/assets/angular-material-examples/menu-position/menu-position-example.ts
new file mode 100755
index 00000000..4162ac39
--- /dev/null
+++ b/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 {}
diff --git a/src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.css b/src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.css
new file mode 100755
index 00000000..d0f47895
--- /dev/null
+++ b/src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.css
@@ -0,0 +1,3 @@
+.mat-tab-group {
+  margin-bottom: 48px;
+}
diff --git a/src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.html b/src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.html
new file mode 100755
index 00000000..4feae222
--- /dev/null
+++ b/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>
diff --git a/src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.ts b/src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.ts
new file mode 100755
index 00000000..b242d6e5
--- /dev/null
+++ b/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 {}
diff --git a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html
index d931b48e..4a0791a6 100755
--- a/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html
+++ b/src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html
@@ -25,4 +25,4 @@
         matTooltipPosition="right"
         aria-tooltip="Button that displays and hides a tooltip triggered by other buttons">
   Action
-</button>
+</button>
\ No newline at end of file