From 95c773d42ae99ee762a1b1f9a16fc284c0e7d1ee Mon Sep 17 00:00:00 2001
From: Mark Onyango <mark.onyango@gmail.com>
Date: Wed, 15 Aug 2018 22:08:51 +0200
Subject: [PATCH] feat(dynamic-forms): add support for Materials multiselect
 form field (closes #820)

feat(dynamic-forms): add support for Materials multiselect form field (closes #820)
---
 .../dynamic-element.component.ts              |  6 +++
 .../dynamic-select.component.html             |  3 +-
 .../dynamic-select.component.ts               |  2 +
 .../dynamic-forms.component.html              |  1 +
 .../services/dynamic-forms.service.ts         |  1 +
 src/test-bed/main/main.component.html         |  3 ++
 .../multiselect/multiselect.component.html    |  2 +
 .../multiselect/multiselect.component.scss    |  0
 .../multiselect/multiselect.component.ts      | 46 +++++++++++++++++++
 src/test-bed/test-bed.module.ts               |  5 ++
 src/test-bed/test-bed.routes.ts               |  5 ++
 11 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/test-bed/sandbox/multiselect/multiselect.component.html
 create mode 100644 src/test-bed/sandbox/multiselect/multiselect.component.scss
 create mode 100644 src/test-bed/sandbox/multiselect/multiselect.component.ts

diff --git a/src/platform/dynamic-forms/dynamic-element.component.ts b/src/platform/dynamic-forms/dynamic-element.component.ts
index 7a71601645..6b984c19f0 100644
--- a/src/platform/dynamic-forms/dynamic-element.component.ts
+++ b/src/platform/dynamic-forms/dynamic-element.component.ts
@@ -96,6 +96,11 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
    */
   @Input() selections: any[] = undefined;
 
+  /**
+   * Sets multiple property for array elements (if supported by element).
+   */
+  @Input() multiple: boolean = undefined;
+
   /**
    * Sets error message template so it can be injected into dynamic components.
    */
@@ -137,6 +142,7 @@ export class TdDynamicElementComponent extends _TdDynamicElementMixinBase
     this._instance.minLength = this.minLength;
     this._instance.maxLength = this.maxLength;
     this._instance.selections = this.selections;
+    this._instance.multiple = this.multiple;
     this._instance.errorMessageTemplate = this.errorMessageTemplate;
   }
 
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html b/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html
index 74aadd5b38..4f0ea22bfe 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.html
@@ -2,7 +2,8 @@
   <mat-form-field class="td-dynamic-select-field">
     <mat-select [formControl]="control"
                 [placeholder]="label"
-                [required]="required">
+                [required]="required"
+                [multiple]="multiple">
       <mat-option *ngFor="let selection of selections" [value]="selection.value || selection">{{selection.label || selection}}</mat-option>
     </mat-select>
     <mat-hint>{{hint}}</mat-hint>
diff --git a/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.ts b/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.ts
index 0716235eca..c6fe2daadb 100644
--- a/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.ts
+++ b/src/platform/dynamic-forms/dynamic-elements/dynamic-select/dynamic-select.component.ts
@@ -18,6 +18,8 @@ export class TdDynamicSelectComponent {
 
   selections: any[] = undefined;
 
+  multiple: boolean = undefined;
+
   errorMessageTemplate: TemplateRef<any> = undefined;
 
 }
diff --git a/src/platform/dynamic-forms/dynamic-forms.component.html b/src/platform/dynamic-forms/dynamic-forms.component.html
index dc2c8233c2..c024f92085 100644
--- a/src/platform/dynamic-forms/dynamic-forms.component.html
+++ b/src/platform/dynamic-forms/dynamic-forms.component.html
@@ -21,6 +21,7 @@
           [minLength]="element.minLength"
           [maxLength]="element.maxLength"
           [selections]="element.selections"
+          [multiple]="element.multiple"
           [errorMessageTemplate]="getErrorTemplateRef(element.name)">
         </td-dynamic-element>
       </div>
diff --git a/src/platform/dynamic-forms/services/dynamic-forms.service.ts b/src/platform/dynamic-forms/services/dynamic-forms.service.ts
index 4005239f7b..e7f104f63a 100644
--- a/src/platform/dynamic-forms/services/dynamic-forms.service.ts
+++ b/src/platform/dynamic-forms/services/dynamic-forms.service.ts
@@ -45,6 +45,7 @@ export interface ITdDynamicElementConfig {
   minLength?: any;
   maxLength?: any;
   selections?: string[] | { value: any, label: string }[];
+  multiple?: boolean;
   default?: any;
   flex?: number;
   validators?: ITdDynamicElementValidator[];
diff --git a/src/test-bed/main/main.component.html b/src/test-bed/main/main.component.html
index 3da35dd5f8..5f97067289 100644
--- a/src/test-bed/main/main.component.html
+++ b/src/test-bed/main/main.component.html
@@ -7,4 +7,7 @@ <h4>Sandbox Links:</h4>
 </div>
 <div class="pad">
   <a [routerLink]="'/tabselect'">Tab Select</a>
+</div>
+<div class="pad">
+  <a [routerLink]="'/multiselect'">Multiselect</a>
 </div>
\ No newline at end of file
diff --git a/src/test-bed/sandbox/multiselect/multiselect.component.html b/src/test-bed/sandbox/multiselect/multiselect.component.html
new file mode 100644
index 0000000000..763668bfb6
--- /dev/null
+++ b/src/test-bed/sandbox/multiselect/multiselect.component.html
@@ -0,0 +1,2 @@
+<td-dynamic-forms [elements]="elements"></td-dynamic-forms>
+<button mat-raised-button (click)="submit()">Submit</button>
\ No newline at end of file
diff --git a/src/test-bed/sandbox/multiselect/multiselect.component.scss b/src/test-bed/sandbox/multiselect/multiselect.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/test-bed/sandbox/multiselect/multiselect.component.ts b/src/test-bed/sandbox/multiselect/multiselect.component.ts
new file mode 100644
index 0000000000..0234697fa0
--- /dev/null
+++ b/src/test-bed/sandbox/multiselect/multiselect.component.ts
@@ -0,0 +1,46 @@
+import { Component, ViewChild } from '@angular/core';
+import {
+  ITdDynamicElementConfig,
+  TdDynamicElement,
+  TdDynamicFormsComponent,
+} from '@covalent/dynamic-forms';
+
+@Component({
+  selector: 'multi-select-demo',
+  styleUrls: ['./multiselect.component.scss'],
+  templateUrl: './multiselect.component.html',
+})
+export class MultiSelectDemoComponent {
+  elements: ITdDynamicElementConfig[] = [
+    {
+      type: TdDynamicElement.Select,
+      name: 'multifield',
+      label: 'No Multiselect',
+      selections: ['A', 'B', 'C', 'D'],
+      flex: 50,
+    },
+    {
+      type: TdDynamicElement.Select,
+      name: 'multifield2',
+      label: 'Multiselect',
+      multiple: true,
+      selections: ['A', 'B', 'C'],
+      flex: 50,
+    },
+    {
+      type: TdDynamicElement.Select,
+      name: 'multifield3',
+      label: 'Multiselect Alt',
+      multiple: true,
+      selections: ['A', 'B', 'C'],
+      default: ['A', 'C'],
+      flex: 50,
+    },
+  ];
+
+  @ViewChild(TdDynamicFormsComponent) public form: TdDynamicFormsComponent;
+
+  public submit(): void {
+    this.form.refresh();
+  }
+}
diff --git a/src/test-bed/test-bed.module.ts b/src/test-bed/test-bed.module.ts
index 3ae043d744..3c60c11dce 100644
--- a/src/test-bed/test-bed.module.ts
+++ b/src/test-bed/test-bed.module.ts
@@ -14,11 +14,15 @@ import { BreadcrumbDemoComponent } from './sandbox/breadcrumbs/breadcrumbs.compo
 import { TabSelectDemoComponent } from './sandbox/tab-select/tab-select.component';
 import { appRoutes, appRoutingProviders } from './test-bed.routes';
 
+import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
+import { MultiSelectDemoComponent } from './sandbox/multiselect/multiselect.component';
+
 @NgModule({
   declarations: [
     TestBedComponent,
     BreadcrumbDemoComponent,
     TabSelectDemoComponent,
+    MultiSelectDemoComponent,
     MainComponent,
   ],
   imports: [
@@ -28,6 +32,7 @@ import { appRoutes, appRoutingProviders } from './test-bed.routes';
     FormsModule,
     MatDividerModule,
     appRoutes,
+    CovalentDynamicFormsModule,
     /** Experimental Modules */
     CovalentBreadcrumbsModule,
     CovalentTabSelectModule,
diff --git a/src/test-bed/test-bed.routes.ts b/src/test-bed/test-bed.routes.ts
index e21469470e..ffa00bc753 100644
--- a/src/test-bed/test-bed.routes.ts
+++ b/src/test-bed/test-bed.routes.ts
@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { BreadcrumbDemoComponent } from './sandbox/breadcrumbs/breadcrumbs.component';
 import { TabSelectDemoComponent } from './sandbox/tab-select/tab-select.component';
 import { MainComponent } from './main/main.component';
+import { MultiSelectDemoComponent } from './sandbox/multiselect/multiselect.component';
 
 const routes: Routes = [
   {
@@ -17,6 +18,10 @@ const routes: Routes = [
     component: TabSelectDemoComponent,
     path: 'tabselect',
   },
+  {
+    component: MultiSelectDemoComponent,
+    path: 'multiselect',
+  },
 ];
 
 export const appRoutingProviders: any[] = [