feat(ui-material): add DATEPICKER DynControl

apps/demos/src/app/demos/submodules/dyn-forms/components/stepper/stepper.form.ts

@@ -31,10 +31,10 @@ export function step1Form(): DynFormConfig {
               hint: 'only numbers allowed with Validators.pattern',
             },
           }),
-          createMatConfig('INPUT', {
+          createMatConfig('DATEPICKER', {
             name: 'birthdate',
             factory: { cssClass: 'col-md-6' },
-            params: { label: 'Birth Date', placeholder: 'TODO DATEPICKER' },
+            params: { label: 'Birth Date' },
           }),
           createMatConfig('SELECT', {
             name: 'birthPlace',

apps/demos/src/app/demos/submodules/dyn-forms/dyn-forms.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatNativeDateModule } from '@angular/material/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { RouterModule, Routes } from '@angular/router';
 import { DynLogLevel, DYN_LOG_LEVEL } from '@myndpm/dyn-forms/logger';
@@ -57,6 +58,7 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     DynFormsMaterialModule.forFeature(),
     MatButtonModule,
+    MatNativeDateModule,
     LayoutModule,
   ],
   declarations: [

libs/forms/ui-material/src/components/datepicker/datepicker.component.html

@@ -0,0 +1,21 @@
+<ng-container [formGroup]="node.parent.control">
+  <!-- design decision to force the always-floating-label on display-mode -->
+  <mat-form-field [floatLabel]="params.readonly ? 'always' : params.floatLabel">
+    <mat-label *ngIf="params.label">{{ params.label }}</mat-label>
+
+    <input
+      matInput
+      [formControlName]="config.name"
+      [placeholder]="params.placeholder"
+      [matDatepicker]="picker"
+    />
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
+
+    <span *ngIf="params.readonly">
+      {{ (params.getValue ? params.getValue(params, control.value) : control.value) || '-' }}
+    </span>
+
+    <mat-hint *ngIf="params.hint">{{ params.hint }}</mat-hint>
+  </mat-form-field>
+</ng-container>

libs/forms/ui-material/src/components/datepicker/datepicker.component.params.ts

@@ -0,0 +1,11 @@
+import { FloatLabelType } from '@angular/material/form-field';
+import { DynControlParams } from '@myndpm/dyn-forms/core';
+
+export interface DynMatDatepickerParams extends DynControlParams {
+  floatLabel: FloatLabelType; // readonly mode uses 'always' floating label
+  placeholder: string;
+  label?: string;
+  hint?: string;
+  readonly?: boolean;
+  getValue?: (params: DynMatDatepickerParams, value: any) => any;
+}

libs/forms/ui-material/src/components/datepicker/datepicker.component.scss

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+
+  .mat-form-field {
+    width: 100%;
+
+    ::ng-deep .mat-input-element {
+      line-height: 1.2em;
+    }
+  }
+
+  &.readonly ::ng-deep {
+    .mat-form-field-outline,
+    input {
+      display: none;
+    }
+
+    .mat-form-field-underline {
+      visibility: hidden;
+    }
+
+    .mat-form-field-appearance-fill .mat-form-field-flex {
+      background: transparent;
+    }
+  }
+}

libs/forms/ui-material/src/components/datepicker/datepicker.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { DynFormsModule } from '@myndpm/dyn-forms';
+import { DynFormTreeNode, DYN_CONTROLS_TOKEN } from '@myndpm/dyn-forms/core';
+import { DynLogger } from '@myndpm/dyn-forms/logger';
+import { MockProvider } from 'ng-mocks';
+import { DynMatDatepickerComponent } from './datepicker.component';
+
+describe('DynMatDatepickerComponent', () => {
+  let component: DynMatDatepickerComponent;
+  let fixture: ComponentFixture<DynMatDatepickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DynFormsModule.forFeature(),
+        MatFormFieldModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatNativeDateModule,
+      ],
+      declarations: [DynMatDatepickerComponent],
+      providers: [
+        MockProvider(DynLogger),
+        MockProvider(DynFormTreeNode),
+        {
+          provide: DYN_CONTROLS_TOKEN,
+          useValue: {},
+          multi: true,
+        },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DynMatDatepickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/forms/ui-material/src/components/datepicker/datepicker.component.ts

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, HostBinding, OnInit } from '@angular/core';
+import {
+  DynConfig,
+  DynControlMode,
+  DynFormControl,
+  DynPartialControlConfig,
+} from '@myndpm/dyn-forms/core';
+import { DynMatDatepickerParams } from './datepicker.component.params';
+
+@Component({
+  selector: 'dyn-mat-datepicker',
+  templateUrl: './datepicker.component.html',
+  styleUrls: ['./datepicker.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DynMatDatepickerComponent
+extends DynFormControl<DynControlMode, DynMatDatepickerParams>
+implements OnInit {
+
+  static dynControl: 'DATEPICKER' = 'DATEPICKER';
+
+  static createConfig<M extends DynControlMode>(
+    partial: DynPartialControlConfig<M, DynMatDatepickerParams>
+  ): DynConfig<M> {
+    return {
+      ...partial,
+      control: DynMatDatepickerComponent.dynControl,
+    };
+  }
+
+  @HostBinding('class.readonly')
+  get isReadonly(): boolean {
+    return Boolean(this.params.readonly);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+  completeParams(params: Partial<DynMatDatepickerParams>): DynMatDatepickerParams {
+    return {
+      ...params,
+      floatLabel: params.floatLabel || 'auto',
+      placeholder: params.placeholder || '',
+    };
+  }
+}

libs/forms/ui-material/src/components/index.ts

@@ -4,6 +4,8 @@ export * from './card/card.component';
 export * from './card/card.component.params';
 export * from './checkbox/checkbox.component';
 export * from './checkbox/checkbox.component.params';
+export * from './datepicker/datepicker.component';
+export * from './datepicker/datepicker.component.params';
 export * from './divider/divider.component';
 export * from './divider/divider.component.params';
 export * from './input/input.component';

libs/forms/ui-material/src/dyn-forms-material.factory.ts

@@ -12,6 +12,8 @@ import {
   DynMatCardParams,
   DynMatCheckboxComponent,
   DynMatCheckboxParams,
+  DynMatDatepickerComponent,
+  DynMatDatepickerParams,
   DynMatDividerComponent,
   DynMatDividerParams,
   DynMatInputComponent,
@@ -37,6 +39,10 @@ export function createMatConfig<M extends DynControlMode>(
   type: typeof DynMatCheckboxComponent.dynControl,
   partial: DynPartialGroupConfig<M, Partial<DynMatCheckboxParams>>
 ): DynConfig<M>;
+export function createMatConfig<M extends DynControlMode>(
+  type: typeof DynMatDatepickerComponent.dynControl,
+  partial: DynPartialGroupConfig<M, Partial<DynMatDatepickerParams>>
+): DynConfig<M>;
 export function createMatConfig<M extends DynControlMode>(
   type: typeof DynMatDividerComponent.dynControl,
   partial: DynPartialGroupConfig<M, Partial<DynMatDividerParams>>
@@ -78,6 +84,9 @@ export function createMatConfig<M extends DynControlMode>(
     case DynMatCheckboxComponent.dynControl:
       return DynMatCheckboxComponent.createConfig(partial);
 
+    case DynMatDatepickerComponent.dynControl:
+      return DynMatDatepickerComponent.createConfig(partial);
+
     case DynMatMulticheckboxComponent.dynControl:
       return DynMatMulticheckboxComponent.createConfig(partial);
 

libs/forms/ui-material/src/dyn-forms-material.module.ts

@@ -4,6 +4,8 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -15,6 +17,7 @@ import {
   DynMatArrayComponent,
   DynMatCardComponent,
   DynMatCheckboxComponent,
+  DynMatDatepickerComponent,
   DynMatDividerComponent,
   DynMatInputComponent,
   DynMatMulticheckboxComponent,
@@ -29,6 +32,8 @@ import {
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatDialogModule,
     MatDividerModule,
     MatFormFieldModule,
     MatIconModule,
@@ -41,6 +46,7 @@ import {
     DynMatArrayComponent,
     DynMatCardComponent,
     DynMatCheckboxComponent,
+    DynMatDatepickerComponent,
     DynMatDividerComponent,
     DynMatInputComponent,
     DynMatMulticheckboxComponent,
@@ -52,14 +58,17 @@ import {
     DynMatArrayComponent,
     DynMatCardComponent,
     DynMatCheckboxComponent,
+    DynMatDatepickerComponent,
     DynMatDividerComponent,
     DynMatInputComponent,
     DynMatMulticheckboxComponent,
     DynMatRadioComponent,
     DynMatSelectComponent,
   ],
   exports: [
-    DynFormsModule, // reduce the boilerplate
+    // reduce the boilerplate
+    DynFormsModule,
+    MatDialogModule,
   ]
 })
 export class DynFormsMaterialModule {
@@ -84,6 +93,11 @@ export class DynFormsMaterialModule {
           instance: DynMatCheckboxComponent.dynInstance,
           component: DynMatCheckboxComponent,
         },
+        {
+          control: DynMatDatepickerComponent.dynControl,
+          instance: DynMatDatepickerComponent.dynInstance,
+          component: DynMatDatepickerComponent,
+        },
         {
           control: DynMatDividerComponent.dynControl,
           instance: DynMatDividerComponent.dynInstance,