ecabs-components 0.0.59 → 0.0.61

package/lib/ecabs-active-status-filter/ecabs-active-status-filter.component.html

@@ -0,0 +1,14 @@
+<div class="mb-5 mt-10">
+  <mat-chip-list>
+    <mat-chip
+      *ngFor="let status of statuses"
+      class="!rounded-full"
+      [ngClass]="checkSelectableStatus(status?.value) ? 'selected' : 'not-selected'"
+      [selectable]="checkSelectableStatus(status?.value)"
+      (click)="onFilter(status?.value)"
+    >
+      <mat-icon *ngIf="checkSelectableStatus(status?.value)" class="mr-2">done</mat-icon>
+      {{ status.text }}</mat-chip
+    >
+  </mat-chip-list>
+</div>

package/lib/ecabs-active-status-filter/ecabs-active-status-filter.component.scss

@@ -0,0 +1,16 @@
+:host::ng-deep {
+  .mat-chip {
+    min-width: 3.6rem;
+  }
+}
+
+.selected {
+  color: var(--color-white);
+  background-color: var(--color-brand-light);
+}
+
+.not-selected {
+  color: var(--color-black);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-gray-400);
+}

package/lib/ecabs-active-status-filter/ecabs-active-status-filter.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+
+@Component( {
+  selector: 'ecabs-active-status-filter',
+  templateUrl: './ecabs-active-status-filter.component.html',
+  styleUrls: [ './ecabs-active-status-filter.component.scss' ],
+} )
+export class ActiveStatusFilterComponent {
+  @Input() statuses: { text: string; value: boolean }[] = [];
+  @Input() initialStatus: boolean;
+
+  @Output()
+  readonly statusChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  onFilter( currFilter: boolean ): void {
+    this.initialStatus = currFilter;
+    this.statusChange.emit( currFilter );
+  }
+
+  checkSelectableStatus( status: boolean ): boolean {
+    return this.initialStatus === status;
+  }
+}

package/lib/ecabs-active-status-filter/ecabs-active-status-filter.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ActiveStatusFilterComponent } from './ecabs-active-status-filter.component';
+
+@NgModule( {
+  declarations: [ ActiveStatusFilterComponent ],
+  imports: [ CommonModule, MatChipsModule, MatIconModule ],
+  exports: [ ActiveStatusFilterComponent ],
+} )
+export class EcabsActiveStatusFilterModule { }

package/lib/ecabs-breadcrumb/ecabs-breadcrumb.component.html

@@ -0,0 +1,11 @@
+<ul class="flex text-gray-500 text-sm">
+  <li
+    *ngFor="let item of breadCrumb; let counter = index"
+    [routerLink]="item.url"
+    [ngClass]="{ 'cursor-pointer': item.url }"
+    class="flex"
+  >
+    <mat-icon class="!text-sm text-center text-gray-400" *ngIf="counter !== 0">keyboard_arrow_right</mat-icon>
+    <span>{{ item.title }}</span>
+  </li>
+</ul>

package/lib/ecabs-breadcrumb/ecabs-breadcrumb.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EcabsBreadcrumbComponent } from './ecabs-breadcrumb.component';
+
+describe( 'EcabsBreadcrumbComponent', () => {
+  let component: EcabsBreadcrumbComponent;
+  let fixture: ComponentFixture<EcabsBreadcrumbComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ EcabsBreadcrumbComponent ],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( EcabsBreadcrumbComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

package/lib/ecabs-breadcrumb/ecabs-breadcrumb.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { BreadCrumb } from '../models/bread-crumb';
+
+@Component( {
+  selector: 'ecabs-breadcrumb',
+  templateUrl: './ecabs-breadcrumb.component.html',
+  styleUrls: [ './ecabs-breadcrumb.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+} )
+export class EcabsBreadcrumbComponent {
+  @Input() breadCrumb: BreadCrumb[];
+}

package/lib/ecabs-breadcrumb/ecabs-breadcrumb.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { EcabsBreadcrumbComponent } from './ecabs-breadcrumb.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule( {
+  declarations: [ EcabsBreadcrumbComponent ],
+  imports: [ CommonModule, MatIconModule, RouterModule ],
+  exports: [ EcabsBreadcrumbComponent ],
+} )
+export class EcabsBreadcrumbModule { }

package/lib/ecabs-buttons/ecabs-buttons.component.html

@@ -0,0 +1,18 @@
+<button
+  mat-button
+  [ngClass]="{
+    'w-full': full,
+    'mat-stroked-button': stroked,
+    'mat-raised-button': raised
+  }"
+  [color]="color"
+  [disabled]="disabled"
+  [type]="type"
+  [attr.form]="form"
+>
+  <ecabs-loading-spinner size="tiny" *ngIf="loading"></ecabs-loading-spinner>
+  <ng-container *ngIf="!loading">
+    <ng-content select="mat-icon"></ng-content>
+    <ng-content></ng-content>
+  </ng-container>
+</button>

package/lib/ecabs-buttons/ecabs-buttons.component.ts

@@ -0,0 +1,54 @@
+import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+
+@Component({
+  selector: 'ecabs-buttons',
+  templateUrl: './ecabs-buttons.component.html',
+})
+export class ButtonsComponent implements OnInit, OnChanges {
+  @Input()
+  label!: string;
+
+  @Input()
+  disabled!: boolean;
+
+  @Input()
+  loading!: boolean;
+
+  @Input()
+  form!: string;
+
+  @Input()
+  size: 'default' | 'large' = 'default';
+
+  @Input()
+  type: 'button' | 'submit' = 'button';
+
+  @Input() raised = false;
+  @Input() stroked = false;
+  @Input() full = false;
+  @Input()
+  color: ThemePalette | 'success' = 'primary';
+
+  @HostBinding('style.width')
+  borderWidth = '';
+  @HostBinding('class')
+  classAttr = '';
+
+  ngOnInit(): void {
+    if (this.full) {
+      this.borderWidth = '100%';
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const disabled = changes['disabled']?.currentValue !== undefined ? changes['disabled'].currentValue : this.disabled;
+    const loading = changes['loading']?.currentValue !== undefined ? changes['loading'].currentValue : this.loading;
+
+    if (disabled || loading) {
+      this.classAttr = 'pointer-events-none';
+    } else {
+      this.classAttr = '';
+    }
+  }
+}

package/lib/ecabs-buttons/ecabs-buttons.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonsComponent } from './ecabs-buttons.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { EcabsLoadingModule } from '../ecabs-loading/ecabs-loading.module';
+
+@NgModule({
+  declarations: [ButtonsComponent],
+  imports: [CommonModule, MatButtonModule, EcabsLoadingModule, MatIconModule],
+  exports: [ButtonsComponent],
+})
+export class EcabsButtonsModule {}

package/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.d.ts

@@ -1,11 +1,12 @@
-import { AfterViewInit, EventEmitter, Injector } from '@angular/core';
+import { AfterViewInit, EventEmitter, Injector, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import ElementBaseComponent from '../base/element-base';
 import * as i0 from "@angular/core";
-export declare class EcabsCheckboxToggleComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+export declare class EcabsCheckboxToggleComponent extends ElementBaseComponent implements ControlValueAccessor, OnInit, AfterViewInit {
     private readonly injector;
     type: 'checkbox' | 'toggle';
     text: string;
+    readonly label: string;
     labelPosition: 'before' | 'after';
     indeterminate: boolean;
     checked: boolean;
@@ -15,6 +16,7 @@ export declare class EcabsCheckboxToggleComponent extends ElementBaseComponent i
     get value(): boolean;
     set value(val: boolean);
     constructor(injector: Injector);
+    ngOnInit(): void;
     onChange: any;
     onTouch: any;
     ngAfterViewInit(): void;
@@ -25,5 +27,5 @@ export declare class EcabsCheckboxToggleComponent extends ElementBaseComponent i
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EcabsCheckboxToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsCheckboxToggleComponent, "ecabs-checkbox", never, { "type": "type"; "text": "text"; "labelPosition": "labelPosition"; "indeterminate": "indeterminate"; "checked": "checked"; }, { "click": "click"; "changed": "changed"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EcabsCheckboxToggleComponent, "ecabs-checkbox", never, { "type": "type"; "text": "text"; "label": "label"; "labelPosition": "labelPosition"; "indeterminate": "indeterminate"; "checked": "checked"; }, { "click": "click"; "changed": "changed"; }, never, never, false>;
 }

package/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.html

@@ -0,0 +1,27 @@
+<app-element-wrapper [data]="getData()">
+  <ng-container [ngSwitch]="type">
+    <mat-checkbox
+      (change)="change($event)"
+      (click)="onClick($event)"
+      (blur)="onBlur()"
+      [checked]="checked"
+      [indeterminate]="indeterminate"
+      [disabled]="disabled"
+      [(ngModel)]="value"
+      [id]="name"
+      [labelPosition]="labelPosition"
+      *ngSwitchCase="'checkbox'"
+    >
+      {{ text }}
+    </mat-checkbox>
+
+    <mat-slide-toggle
+      (change)="change($event)"
+      [disabled]="disabled"
+      [(ngModel)]="value"
+      [labelPosition]="labelPosition"
+      *ngSwitchCase="'toggle'"
+      >{{ text }}</mat-slide-toggle
+    >
+  </ng-container>
+</app-element-wrapper>

package/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.scss

@@ -0,0 +1,15 @@
+@import "../../styles/styles";
+@import "./../../styles/scss/modules/form";
+
+:host::ng-deep {
+  .form-field {
+    display: flex;
+    margin: 0;
+  }
+
+  .form-field__label, label {
+    @include fontSize($font-size-sm);
+
+    margin-right: .96rem;
+  }
+}

package/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.ts

@@ -0,0 +1,86 @@
+import {AfterViewInit, Component, EventEmitter, Injector, Input, OnInit, Output} from '@angular/core';
+import { ControlValueAccessor, UntypedFormControl, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import ElementBaseComponent from '../base/element-base';
+
+@Component( {
+  selector: 'ecabs-checkbox',
+  templateUrl: './ecabs-checkbox-toggle.component.html',
+  styleUrls: [ './ecabs-checkbox-toggle.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsCheckboxToggleComponent,
+      multi: true,
+    },
+  ],
+} )
+export class EcabsCheckboxToggleComponent
+  extends ElementBaseComponent
+  implements ControlValueAccessor, OnInit, AfterViewInit {
+  @Input() override type: 'checkbox' | 'toggle' = 'checkbox';
+  @Input() text!: string;
+  @Input() override readonly label: string;
+  @Input() labelPosition: 'before' | 'after';
+  @Input() indeterminate!: boolean;
+  @Input() checked!: boolean;
+
+  @Output() click = new EventEmitter<any>();
+  @Output() changed = new EventEmitter<any>();
+
+  val!: boolean;
+
+  get value(): boolean {
+    return this.val;
+  }
+
+  set value( val ) {
+    if ( val !== undefined && this.val !== val ) {
+      this.val = val;
+    }
+  }
+
+  constructor( private readonly injector: Injector ) {
+    super();
+  }
+
+  ngOnInit(): void {
+    this.labelPosition = this.type === 'toggle' ? 'before' : 'after';
+  }
+
+  onChange: any = () => { };
+  onTouch: any = () => { };
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null );
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+  }
+
+  change( event ): void {
+    this.onChange( this.value );
+    this.changed.emit( event );
+  }
+
+  onClick( $event ): void {
+    this.click.emit( $event );
+  }
+
+  onBlur(): void {
+    setTimeout( () => {
+      this.onTouch( this.value );
+    } );
+  }
+
+  writeValue( value: any ): void {
+    this.value = !!value;
+  }
+
+  registerOnChange( fn: any ): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched( fn: any ): void {
+    this.onTouch = fn;
+  }
+}

package/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+import { EcabsCheckboxToggleComponent } from './ecabs-checkbox-toggle.component';
+
+@NgModule( {
+  declarations: [ EcabsCheckboxToggleComponent ],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatCheckboxModule,
+    MatSlideToggleModule,
+    FormsModule
+  ],
+  exports: [ EcabsCheckboxToggleComponent ],
+} )
+export class EcabsCheckboxToggleModule { }

package/lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component.html

@@ -0,0 +1,4 @@
+<div class="select-date-label text-xl font-semibold">
+  {{ selectDateLabel }}
+</div>
+<ecabs-picker-header></ecabs-picker-header>

package/lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EcabsDatePickerHeaderComponent } from './ecabs-date-picker-header.component';
+
+describe( 'EcabsDatePickerHeaderComponent', () => {
+  let component: EcabsDatePickerHeaderComponent;
+  let fixture: ComponentFixture<EcabsDatePickerHeaderComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ EcabsDatePickerHeaderComponent ],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( EcabsDatePickerHeaderComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

package/lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component( {
+  selector: 'ecabs-date-picker-header',
+  templateUrl: './ecabs-date-picker-header.component.html',
+  styleUrls: [ './ecabs-date-picker-header.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+} )
+export class EcabsDatePickerHeaderComponent {
+  @Input() selectDateLabel = 'Select date';
+}

package/lib/ecabs-date-picker/ecabs-date-picker.component.html

@@ -0,0 +1,31 @@
+<app-element-wrapper [data]="getData()">
+  <div class="form-field__input--wrapper">
+    <input
+      class="form-field__input date-input"
+      [id]="name"
+      [(ngModel)]="value"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [matDatepicker]="picker"
+      [min]="minDate"
+      [max]="maxDate"
+      (blur)="onTouch()"
+    />
+    <mat-datepicker-toggle matSuffix [for]="picker">
+      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
+    </mat-datepicker-toggle>
+    <mat-datepicker #picker [calendarHeaderComponent]="header" [touchUi]="touchUi">
+      <mat-datepicker-actions>
+        <div class="grid-picker-actions w-full">
+          <button type="button" mat-stroked-button class="w-full" color="primary" matDatepickerCancel>
+            {{ cancleLabel }}
+          </button>
+
+          <button class="w-full ml-0 btn" mat-button color="primary" matDatepickerApply>
+            {{ applyLabel }}
+          </button>
+        </div>
+      </mat-datepicker-actions>
+    </mat-datepicker>
+  </div>
+</app-element-wrapper>

package/lib/ecabs-date-picker/ecabs-date-picker.component.scss

@@ -0,0 +1,10 @@
+@import './../../styles/material/overrides/datepicker';
+@import './../../styles/scss/modules/datepicker';
+
+.mat-datepicker-toggle {
+  margin-top: -0.75rem;
+}
+
+.date-input {
+  margin-right: -0.25rem;
+}

package/lib/ecabs-date-picker/ecabs-date-picker.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EcabsDatePickerComponent } from './ecabs-date-picker.component';
+
+describe( 'EcabsDatePickerComponent', () => {
+  let component: EcabsDatePickerComponent;
+  let fixture: ComponentFixture<EcabsDatePickerComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ EcabsDatePickerComponent ],
+      imports: [],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( EcabsDatePickerComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

package/lib/ecabs-date-picker/ecabs-date-picker.component.ts

@@ -0,0 +1,72 @@
+import { AfterViewInit, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
+import { ControlValueAccessor, UntypedFormControl, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import ElementBaseComponent from '../base/element-base';
+import { EcabsDatePickerHeaderComponent } from './components/ecabs-date-picker-header/ecabs-date-picker-header.component';
+
+@Component( {
+  selector: 'ecabs-date-picker',
+  templateUrl: './ecabs-date-picker.component.html',
+  styleUrls: [ './ecabs-date-picker.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsDatePickerComponent,
+      multi: true,
+    },
+  ],
+} )
+export class EcabsDatePickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+  @Input() minDate: Date;
+  @Input() maxDate: Date;
+  @Input() touchUi = false;
+  @Input() cancleLabel = 'Cancel';
+  @Input() applyLabel = 'Apply';
+  @Input() selectDateLabel = 'Select date';
+
+  @Output() onblur = new EventEmitter<any>();
+
+  val: string | number;
+  header = EcabsDatePickerHeaderComponent;
+
+  get value(): string | number {
+    return this.val;
+  }
+
+  set value( val: string | number ) {
+    if ( val && this.val !== val ) {
+      this.val = val;
+      this.onChange( val );
+      this.onTouch( val );
+    }
+  }
+
+  constructor( private injector: Injector ) {
+    super();
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null );
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+  }
+
+  onChange: any = () => { };
+  onTouch: any = () => { };
+
+  writeValue( value: any ): void {
+    this.value = value;
+  }
+
+  registerOnChange( fn: any ): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched( fn: any ): void {
+    this.onTouch = fn;
+  }
+
+  blurChange( e: any ): void {
+    this.onblur.emit( e );
+  }
+}

package/lib/ecabs-date-picker/ecabs-date-picker.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+import { EcabsPickerHeaderModule } from '../ecabs-picker-header/ecabs-picker-header.module';
+import { EcabsDatePickerHeaderComponent } from './components/ecabs-date-picker-header/ecabs-date-picker-header.component';
+import { EcabsDatePickerComponent } from './ecabs-date-picker.component';
+
+
+@NgModule( {
+  declarations: [ EcabsDatePickerComponent, EcabsDatePickerHeaderComponent ],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatIconModule,
+    MatDatepickerModule,
+    FormsModule,
+    ReactiveFormsModule,
+    EcabsPickerHeaderModule,
+    MatButtonModule
+  ],
+  exports: [ EcabsDatePickerComponent, EcabsDatePickerHeaderComponent ],
+} )
+export class EcabsDatePickerModule { }

package/lib/ecabs-date-range-picker/components/ecabs-date-range-picker-header/ecabs-date-range-picker-header.component.html

@@ -0,0 +1,4 @@
+<div class="select-date-label text-xl font-semibold">
+  {{selectDateLabel}}
+</div>
+<ecabs-picker-header></ecabs-picker-header>

package/lib/ecabs-date-range-picker/components/ecabs-date-range-picker-header/ecabs-date-range-picker-header.component.scss

@@ -0,0 +1 @@
+

package/lib/ecabs-date-range-picker/components/ecabs-date-range-picker-header/ecabs-date-range-picker-header.component.spec.ts

@@ -0,0 +1,23 @@
+// import { ComponentFixture, TestBed } from '@angular/core/testing';
+// import { FormDatePickerHeaderComponent } from './date-picker-header.component';
+
+// describe( 'FormDatePickerHeaderComponent', () => {
+//   let component: FormDatePickerHeaderComponent<D>;
+//   let fixture: ComponentFixture<FormDatePickerHeaderComponent<D>>;
+
+//   beforeEach( async () => {
+//     await TestBed.configureTestingModule( {
+//       declarations: [ FormDatePickerHeaderComponent ],
+//     } ).compileComponents();
+//   } );
+
+//   beforeEach( () => {
+//     fixture = TestBed.createComponent( FormDatePickerHeaderComponent );
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+//   } );
+
+//   it( 'should create', () => {
+//     expect( component ).toBeTruthy();
+//   } );
+// } );