ecabs-components 1.0.19 → 1.0.21

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

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

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

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

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

@@ -1,23 +0,0 @@
-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/src/lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component.ts

@@ -1,11 +0,0 @@
-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/src/lib/ecabs-date-picker/ecabs-date-picker.component.html

@@ -1,31 +0,0 @@
-<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 cancel-button" color="primary" matDatepickerCancel>
-            {{ cancleLabel }}
-          </button>
-
-          <button class="w-full ml-0 btn apply-button" mat-button color="primary" matDatepickerApply>
-            {{ applyLabel }}
-          </button>
-        </div>
-      </mat-datepicker-actions>
-    </mat-datepicker>
-  </div>
-</app-element-wrapper>

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

@@ -1,23 +0,0 @@
-@import './../../styles/material/overrides/datepicker';
-@import './../../styles/scss/modules/datepicker';
-
-.mat-datepicker-toggle {
-  margin-top: -0.75rem;
-}
-
-.date-input {
-  margin-right: -0.25rem;
-}
-
-:host ::ng-deep .mat-mdc-icon-button {
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-
-  .mat-icon{
-    margin-top: -0.25rem;
-  }
-}
-
-.cancel-button, .apply-button {
-  min-height: 2.625rem;
-}

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

@@ -1,24 +0,0 @@
-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/src/lib/ecabs-date-picker/ecabs-date-picker.component.ts

@@ -1,72 +0,0 @@
-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/src/lib/ecabs-date-picker/ecabs-date-picker.module.ts

@@ -1,29 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-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';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-
-
-@NgModule({
-  declarations: [EcabsDatePickerComponent, EcabsDatePickerHeaderComponent],
-  imports: [
-    CommonModule,
-    ElementWrapperModule,
-    MatIconModule,
-    MatDatepickerModule,
-    FormsModule,
-    ReactiveFormsModule,
-    EcabsPickerHeaderModule,
-    MatButtonModule
-  ],
-  exports: [EcabsDatePickerComponent, EcabsDatePickerHeaderComponent],
-})
-export class EcabsDatePickerModule {
-}

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

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

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

@@ -1,23 +0,0 @@
-// 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();
-//   } );
-// } );

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

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

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

@@ -1,31 +0,0 @@
-<app-element-wrapper [data]="getData()">
-  <div class="form-field__input--wrapper">
-    <mat-date-range-input [rangePicker]="picker" (blur)="onTouch()">
-      <input matStartDate class="form-field__input" [placeholder]="startDatePlaceholder" [value]="dateFrom" [(ngModel)]="dateFrom" />
-      <input matEndDate class="form-field__input" [placeholder]="endDatePlaceholder" [value]="dateTo" [(ngModel)]="dateTo" />
-    </mat-date-range-input>
-    <mat-datepicker-toggle matSuffix [for]="picker">
-      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
-    </mat-datepicker-toggle>
-    <mat-date-range-picker #picker [calendarHeaderComponent]="header" [touchUi]="touchUi">
-      <mat-datepicker-actions>
-        <div class="grid-picker-actions w-full">
-          <button type="button" mat-stroked-button class="w-full cancel-button" color="primary" matDatepickerCancel>
-            {{ cancleLabel }}
-          </button>
-
-          <button
-            type="button"
-            mat-button
-            class="w-full ml-0 btn apply-button"
-            color="primary"
-            matDatepickerApply
-            (click)="onApply()"
-          >
-          {{ applyLabel }}
-          </button>
-        </div>
-      </mat-datepicker-actions>
-    </mat-date-range-picker>
-  </div>
-</app-element-wrapper>

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

@@ -1,36 +0,0 @@
-@import './../../styles/material/overrides/datepicker';
-@import './../../styles/scss/modules/datepicker';
-@import './../../styles/scss/utilities/index';
-
-:host::ng-deep {
-  .mat-datepicker-toggle {
-    margin-top: -0.75rem;
-
-    .mat-mdc-icon-button {
-       transform: translateX(-0.25rem);
-    }
-  }
-}
-
-.mat-date-range-input {
-  display: block;
-  width: calc(100% - 0.25rem);
-  padding: calc-rem(8) calc-rem(16);
-  border-radius: $border-radius-base;
-  border: 1px solid var(--color-gray-500);
-  color: var(--color-black);
-  line-height: $base-line-height;
-}
-
-:host ::ng-deep .mat-mdc-icon-button {
-  max-width: 2.5rem;
-  max-height: 2.5rem;
-
-  .mat-icon{
-    margin-top: -0.25rem;
-  }
-}
-
-.cancel-button, .apply-button {
-  min-height: 2.625rem;
-}

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

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

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

@@ -1,113 +0,0 @@
-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 { EcabsDateRangePickerHeaderComponent } from './components/ecabs-date-range-picker-header/ecabs-date-range-picker-header.component';
-
-@Component( {
-  selector: 'ecabs-date-range-picker',
-  templateUrl: './ecabs-date-range-picker.component.html',
-  styleUrls: [ './ecabs-date-range-picker.component.scss' ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: EcabsDateRangePickerComponent,
-      multi: true,
-    },
-  ],
-} )
-export class EcabsDateRangePickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
-  @Input() minDate: Date;
-  @Input() maxDate: Date;
-  @Input() touchUi = false;
-  @Input() cancleLabel = 'Cancel';
-  @Input() applyLabel = 'Apply';
-  @Input() selectDateLabel = 'Select date range';
-  @Input() startDatePlaceholder = 'Start date placeholder';
-  @Input() endDatePlaceholder = 'End date placeholder';
-
-  @Output() onblur = new EventEmitter<any>();
-  val: {
-    dateFrom: string;
-    dateTo: string;
-  };
-
-  header = EcabsDateRangePickerHeaderComponent;
-  _dateFrom: string;
-  _dateTo: string;
-
-  get value(): {
-    dateFrom: string;
-    dateTo: string;
-  } {
-    return this.val;
-  }
-
-  get dateFrom(): string {
-    return this._dateFrom;
-  }
-
-  get dateTo(): string {
-    return this._dateTo;
-  }
-
-  set value( val: { dateFrom: string; dateTo: string } ) {
-    if ( val !== undefined ) {
-      this.val = val;
-      this.onChange( val );
-      this.onTouch( val );
-    }
-  }
-
-  set dateFrom( val: string ) {
-    if ( this.dateFrom !== undefined && this._dateFrom !== this.dateFrom ) {
-      this._dateFrom = val;
-    }
-  }
-
-  set dateTo( val: string ) {
-    if ( this.dateTo !== undefined && this._dateTo !== this.dateTo ) {
-      this._dateTo = val;
-    }
-  }
-
-  constructor( private injector: Injector ) {
-    super();
-  }
-
-  ngAfterViewInit(): void {
-    const ngControl: NgControl = this.injector.get( NgControl, null );
-    if ( ngControl ) {
-      this.control = ngControl.control as UntypedFormControl;
-      this.dateFrom = this.value.dateFrom;
-      this.dateTo = this.value.dateTo;
-    }
-  }
-
-  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 ): void {
-    this.onblur.emit( e );
-  }
-
-  onApply(): void {
-    if ( this.dateFrom && this.dateTo ) {
-      this.value = {
-        dateFrom: this.dateFrom,
-        dateTo: this.dateTo,
-      };
-    }
-  }
-}

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

@@ -1,50 +0,0 @@
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatIconModule} from '@angular/material/icon';
-import {MaskDateDirectiveModule} from '../base/directives/date-mask.directive.module';
-import {DigitsOnlyDirectivesModule} from '../base/directives/digits-only.directive.module';
-import {NumberBorderDirectiveModule} from '../base/directives/number-border.directive.module';
-import {ElementWrapperModule} from '../base/element-wrapper/element-wrapper.module';
-import {EcabsButtonsModule} from '../ecabs-buttons/ecabs-buttons.module';
-import {EcabsPickerHeaderModule} from '../ecabs-picker-header/ecabs-picker-header.module';
-import {
-  EcabsDateRangePickerHeaderComponent
-} from './components/ecabs-date-range-picker-header/ecabs-date-range-picker-header.component';
-import {EcabsDateRangePickerComponent} from './ecabs-date-range-picker.component';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-
-
-export const MATERIAL_DATETIMEPICKER_FORMATS = {
-  parse: {
-    dateInput: 'DD/MMM/YYYY HH:mm:SS',
-  },
-  display: {
-    dateInput: 'DD/MMM/YYYY HH:mm:SS',
-    monthYearLabel: 'MMM YYYY',
-    dateA11yLabel: 'DD/MMM/YYYY HH:mm:SS',
-    monthYearA11yLabel: 'MMMM YYYY',
-  },
-};
-
-@NgModule({
-  declarations: [EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent],
-  imports: [
-    CommonModule,
-    ElementWrapperModule,
-    MatIconModule,
-    MatDatepickerModule,
-    MatButtonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    EcabsPickerHeaderModule,
-    EcabsButtonsModule,
-    DigitsOnlyDirectivesModule,
-    NumberBorderDirectiveModule,
-    MaskDateDirectiveModule
-  ],
-  exports: [EcabsDateRangePickerComponent, EcabsDateRangePickerHeaderComponent],
-})
-export class EcabsDateRangeModule {
-}

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

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

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

@@ -1,14 +0,0 @@
-.select-date-label {
-  color: var(--color-brand-dark);
-  padding-top: 1.6rem;
-  padding-left: 1.6rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.font-semibold {
-  font-weight: 600;
-}

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

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

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

@@ -1,87 +0,0 @@
-<app-element-wrapper [data]="getData()">
-  <div class="form-field__input--wrapper w-full">
-    <input
-      class="fake-input"
-      [id]="_date"
-      [(ngModel)]="_date"
-      [placeholder]="placeholder"
-      [disabled]="disabled"
-      [matDatepicker]="picker"
-      [min]="minDate"
-      [max]="maxDate"
-      (blur)="onTouch()"
-    />
-    <mat-datepicker #picker [calendarHeaderComponent]="header" [touchUi]="touchUi">
-      <mat-datepicker-actions>
-        <div class="actions">
-          <div class="time-inputs time--inputs">
-            <input
-              class="form-field__input time"
-              appDigitsOnly
-              appNumberBorder
-              [digitsOnly]="true"
-              [id]="hours"
-              [value]="_hours"
-              [maxValue]="maxValueHours"
-              [(ngModel)]="hours"
-            />
-            <span class="font-bold">:</span>
-            <input
-              class="form-field__input time"
-              [id]="minutes"
-              [(ngModel)]="minutes"
-              appDigitsOnly
-              appNumberBorder
-              [digitsOnly]="true"
-              [maxValue]="maxValueMinutesSeconds"
-            />
-
-            <ng-container *ngIf="!hideSeconds">
-              <span class="font-bold">:</span>
-              <input
-                class="form-field__input time"
-                [id]="seconds"
-                [(ngModel)]="seconds"
-                appDigitsOnly
-                appNumberBorder
-                [digitsOnly]="true"
-                [maxValue]="maxValueMinutesSeconds"
-              />
-            </ng-container>
-          </div>
-
-          <div class="grid-picker-actions">
-            <button type="button" mat-stroked-button class="w-full cancel-button" color="primary" matDatepickerCancel>
-              {{ cancleLabel }}
-            </button>
-
-            <button
-              type="button"
-              mat-button
-              class="w-full ml-0 apply-button"
-              color="primary"
-              matDatepickerApply
-              (click)="onApply()"
-            >
-            {{ applyLabel }}
-            </button>
-          </div>
-        </div>
-      </mat-datepicker-actions>
-    </mat-datepicker>
-    <input
-      class="form-field__input w-full date-input"
-      [id]="name"
-      [(ngModel)]="pickerValue"
-      [placeholder]="placeholder"
-      [disabled]="disabled"
-      appMaskDate
-      [isDateTimeMask]="true"
-      [considerSeconds]="!hideSeconds"
-      (blur)="onTouch()"
-    />
-    <button type="button" mat-icon-button class="datepicker-toggle" (click)="picker.open()">
-      <mat-icon>calendar_today</mat-icon>
-    </button>
-  </div>
-</app-element-wrapper>