@cauca-911/material 21.0.1 → 21.0.3

package/src/lib/components/dialogs/services/dialog.service.ts

@@ -1,107 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { firstValueFrom } from 'rxjs';
-import { AlertDialogComponent, AlertDialogData } from '../alert-dialog/alert-dialog.component';
-import { ComponentType } from '@angular/cdk/portal';
-import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component';
-import { TextInputDialogComponent } from '../text-input-dialog/text-input-dialog.component';
-import { ValidatorFn } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component';
-import { DeleteDialogData } from '../delete-dialog/models/delete-dialog-data';
-import { ErrorDialogComponent } from '../error-dialog/error-dialog.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DialogService {
-
-  private readonly defaultConfirmationOptions: ConfirmationOptions = {
-    noText: 'no',
-    noColor: 'primary',
-    noType: 'stroked',
-    yesText: 'yes',
-    yesType: 'raised',
-    messageArgs: null,
-    titleArgs: null,
-    yesColor: 'primary'
-  };
-
-  private readonly translate = inject(TranslateService);
-  private readonly dialog = inject(MatDialog);
-
-  public async showDialog(title: string, message: string): Promise<any> {
-    const dialogRef = this.dialog.open(AlertDialogComponent, {
-      data: { title, message } as AlertDialogData,
-      autoFocus: false
-    });
-    return await firstValueFrom(dialogRef.afterClosed());
-  }
-
-  public async showCustomDialog(component: ComponentType<unknown>, args: any , options: any = { autoFocus: false }): Promise<any> {
-    const config = { ...options, ... { data: args} };
-    return await firstValueFrom(this.dialog.open(component, config)
-      .afterClosed());
-  }
-
-  public async askForConfirmation(title: string, message: string, args: Partial<ConfirmationOptions> = null, options: any = { autoFocus: false}): Promise<ConfirmationResult> {
-    args = { ...this.defaultConfirmationOptions, ...(args || {}) };
-    const data = { options: args, title, message };
-    const config = { ...options, ... { data } };
-    const dialogRef = this.dialog.open(ConfirmDialogComponent, config);
-    return await firstValueFrom(dialogRef.afterClosed());
-  }
-
-  public async askForDeleteConfirmation(name: string, type: string, translateType: boolean = false): Promise<any> {
-    if (translateType) {
-      type = this.translate.instant(type);
-    }
-    const dialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { name, type } as DeleteDialogData,
-      autoFocus: false
-    });
-    return await firstValueFrom(dialogRef.afterClosed());
-  }
-
-  public async showDeletionError(name: string): Promise<any> {
-    const dialogRef = this.dialog.open(ErrorDialogComponent, {
-      data: { name } as DeleteDialogData,
-      autoFocus: '#okButton'
-    });
-    return await firstValueFrom(dialogRef.afterClosed());
-  }
-
-  public async input(inputOptions: InputOptions, optionsDialog: any = { autoFocus: false }, value: string = '' , suffix = ''): Promise<{ result: ConfirmationResult, value: string }> {
-    const args = { ...inputOptions, value, suffix };
-    const config = { ...optionsDialog, ... { data: args } };
-
-    return await firstValueFrom(this.dialog.open(TextInputDialogComponent, config)
-      .afterClosed());
-  }
-}
-
-export interface ConfirmationOptions {
-  noText: string;
-  noColor: string;
-  noType?: 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
-  yesText: string;
-  yesColor: string;
-  yesType?: 'basic' | 'raised' | 'stroked' | 'flat' | 'icon';
-  messageArgs: any;
-  titleArgs: any;
-}
-
-export enum ConfirmationResult {
-  Cancel,
-  Yes,
-  No
-}
-
-export interface InputOptions {
-  titleLabel: string;
-  validateButtonLabel: string;
-  cancelButtonLabel: string;
-  inputLabel: string;
-  useTextArea?: boolean;
-  validators?: ValidatorFn | ValidatorFn[];
-}

package/src/lib/components/dialogs/text-input-dialog/text-input-dialog.component.html

@@ -1,24 +0,0 @@
-<div mat-dialog-title>
-    <div class="h6">{{ titleLabel | translate }}</div>
-    <cauca-icon-button id="close-button" icon="close" (buttonClick)="cancelClick()" />
-</div>
-<div mat-dialog-content>
-    <form [formGroup]="form">
-        <mat-form-field>
-            <mat-label>{{ inputLabel | translate}}</mat-label>
-            @if (useTextArea()) {
-                <textarea cdkTextareaAutosize formControlName="input" matInput></textarea>
-            } @else {
-                <input formControlName="input" matInput />
-            }
-            @if (showSuffix()) { <span matTextSuffix>{{suffix()}}</span> }
-            @if (form.controls.input.hasError('required')) {<mat-error>{{'error.requiredField' | translate}}</mat-error>}
-            @if (form.controls.input.hasError('invalidName')) {<mat-error>{{'error.invalidName' | translate}}</mat-error>}
-            @if (form.controls.input.hasError('alreadyUsed')) {<mat-error>{{'error.alreadyUsed' | translate}}</mat-error>}
-        </mat-form-field>
-    </form>
-</div>
-<mat-dialog-actions align="end">
-    <cauca-stroked-button id="close-button" [label]="cancelButtonLabel" (buttonClick)="cancelClick()" color="primary" />
-    <cauca-raised-button class="yes-button" [isDisabled]="!form.valid" [label]="validateButtonLabel" color="primary" (buttonClick)="validateClick()" />
-</mat-dialog-actions>

package/src/lib/components/dialogs/text-input-dialog/text-input-dialog.component.scss

@@ -1,22 +0,0 @@
-:host>div:first-child {
-    display: flex;
-    align-items: center;
-    padding: 8px 24px 0px 24px;
-
-    div:first-child {
-        flex: 1;
-    }
-}
-
-mat-form-field {
-    width: 100%;
-}
-
-.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-end,
-.mat-mdc-dialog-actions[align=end] {
-    column-gap: 8px;
-}
-
-.mat-mdc-dialog-content {
-    padding-top: 8px !important;
-}

package/src/lib/components/dialogs/text-input-dialog/text-input-dialog.component.spec.ts

@@ -1,126 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TextInputDialogComponent } from './text-input-dialog.component';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MockComponents, MockModule, MockPipe, ngMocks } from 'ng-mocks';
-import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
-import { ConfirmationResult } from '../services/dialog.service';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatFormFieldHarness } from '@angular/material/form-field/testing';
-import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
-import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
-import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
-
-describe('TextInputDialogComponent', () => {
-  let component: TextInputDialogComponent;
-  let fixture: ComponentFixture<TextInputDialogComponent>;
-  let loader: HarnessLoader;
-  let mockMatDialog, defaultData: any;
-
-  beforeEach(async () => {
-    mockMatDialog = jasmine.createSpyObj('MatDialogRef', ['close']);
-    defaultData = {
-      titleLabel: 'Title',
-      validateButtonLabel: 'Validate',
-      cancelButtonLabel: 'Cancel',
-      inputLabel: 'Input',
-      suffix: '.xlxs'
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [TextInputDialogComponent,
-        MockModule(TranslateModule),
-        ...MockComponents(IconButtonComponent, StrokedButtonComponent, RaisedButtonComponent)
-      ],
-      declarations: [
-        MockPipe(TranslatePipe, value => value),
-        ...MockComponents(StrokedButtonComponent, RaisedButtonComponent)
-      ],
-      providers: [
-        { provide: MatDialogRef, useValue: mockMatDialog },
-        { provide: MAT_DIALOG_DATA, useValue: defaultData },
-      ]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(TextInputDialogComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should set dialog labels', () => {
-    expect(component.titleLabel).toBe(defaultData.titleLabel);
-    expect(fixture.nativeElement.querySelector('.h6').textContent).toBe(defaultData.titleLabel);
-
-    expect(component.validateButtonLabel).toBe(defaultData.validateButtonLabel);
-    expect(ngMocks.findInstance(RaisedButtonComponent).label).toBe(defaultData.validateButtonLabel);
-
-    expect(component.cancelButtonLabel).toBe(defaultData.cancelButtonLabel);
-    expect(ngMocks.findInstance(StrokedButtonComponent).label).toBe(defaultData.cancelButtonLabel);
-
-    expect(component.inputLabel).toBe(defaultData.inputLabel);
-  });
-
-  it('should close dialog when clicking on cancel button in title', () => {
-    const closeButton = ngMocks.findInstance(IconButtonComponent);
-
-    closeButton.buttonClick.emit();
-
-    expect(mockMatDialog.close).toHaveBeenCalledWith({ result: ConfirmationResult.Cancel, value: null });
-  });
-
-  it('should close dialog with cancel result on cancel button click', () => {
-    const closeButton = ngMocks.findInstance(StrokedButtonComponent);
-
-    closeButton.buttonClick.emit();
-
-    expect(mockMatDialog.close).toHaveBeenCalledWith({result: ConfirmationResult.Cancel, value: null});
-  });
-
-  it('should close dialog with yes result and input value on validate button click', () => {
-    const validateButton = ngMocks.findInstance(RaisedButtonComponent);
-    const value = 'test';
-
-    component.form.controls.input.setValue(value);
-    validateButton.buttonClick.emit();
-
-    expect(mockMatDialog.close).toHaveBeenCalledWith({result: ConfirmationResult.Yes, value});
-  });
-
-  it('should set suffix from received data', () => {
-    expect(component.suffix()).toBe(defaultData.suffix);
-  });
-
-  it('should show suffix when suffix is set', async () => {
-    const formField = await loader.getHarness(MatFormFieldHarness);
-    fixture.detectChanges();
-
-    expect(await formField.getSuffixText()).toBe('.xlxs');
-  });
-
-  it('should show suffix when showSuffix is not set', async () => {
-    const suffix = '';
-    component.suffix.set(suffix);
-    fixture.detectChanges();
-
-    const formField = await loader.getHarness(MatFormFieldHarness);
-
-    expect(await formField.getSuffixText()).toBe('');
-  });
-
-  it('should show textarea when useTextArea is set', async () => {
-    component.useTextArea.set(true);
-    fixture.detectChanges();
-
-    const textarea = fixture.nativeElement.querySelector('textarea');
-
-    expect(textarea).toBeTruthy();
-    expect( fixture.nativeElement.querySelector('input')).toBeFalsy();
-  });
-});

package/src/lib/components/dialogs/text-input-dialog/text-input-dialog.component.ts

@@ -1,66 +0,0 @@
-import { Component, computed, Inject, signal } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { FormGroup, ReactiveFormsModule, UntypedFormBuilder, ValidatorFn } from '@angular/forms';
-import { ConfirmationResult } from '../services/dialog.service';
-import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
-import { StrokedButtonComponent } from '../../buttons/stroked-button/stroked-button.component';
-import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
-
-@Component({
-  selector: 'cauca-text-input-dialog',
-  standalone: true,
-  imports: [TranslateModule, RaisedButtonComponent, MatDialogModule, StrokedButtonComponent, MatFormFieldModule, MatInputModule, ReactiveFormsModule, IconButtonComponent],
-  templateUrl: './text-input-dialog.component.html',
-  styleUrl: './text-input-dialog.component.scss'
-})
-export class TextInputDialogComponent {
-  public form: FormGroup;
-
-  public titleLabel: string = '';
-  public validateButtonLabel: string = '';
-  public cancelButtonLabel: string = '';
-  public inputLabel: string = '';
-  public suffix = signal<string>('');
-  public showSuffix = computed(() => !!this.suffix());
-  public useTextArea = signal<boolean>(false);
-
-  public constructor(
-    formBuilder: UntypedFormBuilder,
-    public dialogRef: MatDialogRef<TextInputDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: TextInputDialogData) {
-    this.suffix.set(data.suffix);
-
-    this.titleLabel = data.titleLabel;
-    this.validateButtonLabel = data.validateButtonLabel;
-    this.cancelButtonLabel = data.cancelButtonLabel;
-    this.inputLabel = data.inputLabel;
-    this.useTextArea.set(data.useTextArea ?? false);
-
-    this.form = formBuilder.group({
-      input: [data.value, data.validators]
-    });
-  }
-
-  public cancelClick(): void {
-    this.dialogRef.close({ result: ConfirmationResult.Cancel, value: null });
-  }
-
-  public validateClick(): void {
-    const trimmedValue = this.form.controls.input.value.trim();
-    this.dialogRef.close({ result: ConfirmationResult.Yes, value: trimmedValue });
-  }
-}
-
-export interface TextInputDialogData {
-  titleLabel: string;
-  validateButtonLabel: string;
-  cancelButtonLabel: string;
-  inputLabel: string;
-  suffix?: string;
-  useTextArea?: boolean;
-  validators?: ValidatorFn | ValidatorFn[];
-  value?: string;
-}

package/src/lib/components/inputs/color-picker/color-picker.component.html

@@ -1,9 +0,0 @@
-<input
-    matInput
-    [(colorPicker)]="value"
-    [value]="value"
-    (colorPickerChange)="onChangeColor($event)"
-    type="text"
-    class="form-control"
-    id="color-id"
-/>

package/src/lib/components/inputs/color-picker/color-picker.component.spec.ts

@@ -1,29 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ColorPickerComponent } from './color-picker.component';
-
-describe('ColorPickerComponent', () => {
-  let component: ColorPickerComponent;
-  let fixture: ComponentFixture<ColorPickerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ColorPickerComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(ColorPickerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should set value when onChangeColor is called', () => {
-    const color = 'red';
-    component.onChangeColor(color);
-    expect(component.value).toEqual(color);
-  });
-});

package/src/lib/components/inputs/color-picker/color-picker.component.ts

@@ -1,111 +0,0 @@
-import { Component, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, Optional, Output, Self } from '@angular/core';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { MatFormFieldControl } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { ColorPickerDirective } from 'ngx-color-picker';
-import { Subject } from 'rxjs';
-
-@Component({
-    selector: 'cauca-color-picker',
-    imports: [MatInputModule, ColorPickerDirective],
-    templateUrl: './color-picker.component.html',
-    styleUrl: './color-picker.component.scss',
-    providers: [{
-            provide: MatFormFieldControl,
-            useExisting: ColorPickerComponent,
-        }]
-})
-export class ColorPickerComponent implements ControlValueAccessor, MatFormFieldControl<string>, OnDestroy {
-
-  public stateChanges = new Subject<void>();
-  public static nextId = 0;
-
-  @HostBinding()public id = `example-tel-input-${ColorPickerComponent.nextId++}`;
-  public placeholder: string;
-  public focused: boolean = false;
-  public touched = false;
-  public required: boolean;
-  public disabled: boolean;
-  public errorState: boolean;
-  public controlType?: string;
-  public autofilled?: boolean;
-  public userAriaDescribedBy?: string;
-  @Output() public valueChanged = new EventEmitter<string>();
-  private _value: string;
-  @HostBinding('class.floating')
-  public get shouldLabelFloat() {
-    return this.focused || !this.empty;
-  }
-  public get empty() {
-    return !this._value?.length;
-  }
-
-  @Input()
-  public get value(): string | null {
-    return this._value;
-  }
-
-  public set value(newValue: string | null) {
-    this._value = newValue;
-    this.onChange(this._value);
-    this.stateChanges.next();
-  }
-
-  public constructor(
-    private elementRef: ElementRef<HTMLElement>,
-    @Optional() @Self() public ngControl: NgControl) {
-    if (this.ngControl != null) {
-      this.ngControl.valueAccessor = this;
-    }
-    elementRef.nativeElement.addEventListener('focusin', this.onFocusIn.bind(this));
-    elementRef.nativeElement.addEventListener('focusout', this.onFocusOut.bind(this));
-  }
-
-  public onFocusIn(_: FocusEvent) {
-    if (!this.focused) {
-      this.focused = true;
-      this.stateChanges.next();
-    }
-  }
-
-  public onFocusOut(event: FocusEvent) {
-    if (!this.elementRef.nativeElement.contains(event.relatedTarget as Element)) {
-      this.touched = true;
-      this.focused = false;
-      this.onTouched();
-      this.stateChanges.next();
-    }
-  }
-
-  public ngOnDestroy(): void {
-    this.stateChanges.complete();
-  }
-  public setDescribedByIds(_: string[]): void {
-    // Do nothing for now
-  }
-  public onContainerClick(_: MouseEvent): void {
-    // Do nothing for now
-  }
-  public writeValue(value: string): void {
-    this.value = value;
-  }
-
-  public registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  public onChange = (_: any): void => {
-    // Do nothing for now
-  };
-  public onTouched = (): void => {
-    // Do nothing for now
-  };
-
-  public onChangeColor(color: string): void {
-    this.value = color;
-  }
-}

package/src/lib/components/inputs/date-range-picker/date-range-picker.component.html

@@ -1,13 +0,0 @@
-<mat-form-field class="full-width-field" subscriptSizing="dynamic">
-  <mat-datepicker-toggle matPrefix (click)="clear()" onkeypress="clear()">
-    <mat-icon matDatepickerToggleIcon>clear</mat-icon>
-  </mat-datepicker-toggle>
-    <mat-label>{{'dateRangeSelectorLabel'|translate}}</mat-label>
-    <mat-date-range-input [formGroup]="form" [rangePicker]="campaignOnePicker">
-      <input matStartDate formControlName="from" [readOnly]="true">
-      <input matEndDate formControlName="to" [readOnly]="true">
-    </mat-date-range-input>
-    <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker">
-    </mat-datepicker-toggle>
-    <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
-  </mat-form-field>

package/src/lib/components/inputs/date-range-picker/date-range-picker.component.spec.ts

@@ -1,80 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DateRangePickerComponent } from './date-range-picker.component';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatDateRangeInputHarness } from '@angular/material/datepicker/testing';
-import { MockModule, MockPipe } from 'ng-mocks';
-import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
-
-describe('DateRangePickerComponent', () => {
-  let component: DateRangePickerComponent;
-  let fixture: ComponentFixture<DateRangePickerComponent>;
-  let harness: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DateRangePickerComponent, MockModule(TranslateModule)],
-      declarations: [MockPipe(TranslatePipe, value => value),],
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(DateRangePickerComponent);
-    harness = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should not have a range selected by default', () => {
-    expect(component.range()).toEqual({ from: null, to: null });
-  });
-
-  it('should update form from date when date picker changes', async () => {
-    const selectedDate = new Date();
-    const picker = await harness.getHarness(MatDateRangeInputHarness);
-    const input = await picker.getStartInput();
-
-    await input.setValue(selectedDate.toUTCString());
-
-    expect(component.form.value.from).not.toBeNull();
-  });
-
-  it('should update form to date when date picker changes', async () => {
-    const selectedDate = new Date();
-    const picker = await harness.getHarness(MatDateRangeInputHarness);
-    const input = await picker.getEndInput();
-
-    await input.setValue(selectedDate.toUTCString());
-
-    expect(component.form.value.to).not.toBeNull();
-  });
-
-  it('should clear the form when clear is called', async () => {
-    const selectedDate = new Date();
-    const picker = await harness.getHarness(MatDateRangeInputHarness);
-    const input = await picker.getStartInput();
-
-    await input.setValue(selectedDate.toUTCString());
-    expect(component.form.value.from).not.toBeNull();
-
-    component.clear();
-    expect(component.form.value.from).toBeNull();
-  });
-
-  it('should emit new range when form changes', async () => {
-    const selectedDate = new Date();
-    const picker = await harness.getHarness(MatDateRangeInputHarness);
-    const input = await picker.getStartInput();
-
-    await input.setValue(selectedDate.toUTCString());
-    expect(component.range()).toEqual({ from: component.form.value.from, to: null });
-
-    const toInput = await picker.getEndInput();
-    await toInput.setValue(selectedDate.toUTCString());
-    expect(component.range()).toEqual({ from: component.form.value.from, to: component.form.value.to });
-  });
-});

package/src/lib/components/inputs/date-range-picker/date-range-picker.component.ts

@@ -1,46 +0,0 @@
-import { ChangeDetectionStrategy, Component, model, OnInit } from '@angular/core';
-import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
-import { provideNativeDateAdapter } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import { MatIcon } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-@Component({
-  selector: 'cauca-date-range-picker',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatFormFieldModule, MatDatepickerModule, ReactiveFormsModule, MatIcon, TranslateModule],
-  templateUrl: './date-range-picker.component.html',
-  styleUrl: './date-range-picker.component.scss',
-  providers: [provideNativeDateAdapter()]
-})
-export class DateRangePickerComponent implements OnInit {
-  public range = model<DateRange>({ from: null, to: null });
-
-  public readonly form = new FormGroup({
-    from: new FormControl(null),
-    to: new FormControl(null)
-  });
-
-  public constructor() {
-    this.form.valueChanges
-      .pipe(takeUntilDestroyed())
-      .subscribe(value => this.range.set({ from: value.from, to: value.to }));
-  }
-
-  public ngOnInit(): void {
-    this.form.patchValue(this.range());
-  }
-
-  public clear(): void {
-    this.form.patchValue({ from: null, to: null });
-  }
-
-}
-
-export interface DateRange {
-  from: Date|null,
-  to: Date|null
-}