ecabs-components 0.0.59 → 0.0.61

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

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

@@ -0,0 +1,31 @@
+<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" color="primary" matDatepickerCancel>
+            {{ cancleLabel }}
+          </button>
+
+          <button
+            type="button"
+            mat-button
+            class="w-full ml-0 btn"
+            color="primary"
+            matDatepickerApply
+            (click)="onApply()"
+          >
+          {{ applyLabel }}
+          </button>
+        </div>
+      </mat-datepicker-actions>
+    </mat-date-range-picker>
+  </div>
+</app-element-wrapper>

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

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

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

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

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

@@ -0,0 +1,48 @@
+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 { 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';
+
+
+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/lib/ecabs-date-time-picker/components/ecabs-date-time-picker-header/ecabs-date-time-picker-header.component.html

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

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

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

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

@@ -0,0 +1,87 @@
+<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" color="primary" matDatepickerCancel>
+              {{ cancleLabel }}
+            </button>
+
+            <button
+              type="button"
+              mat-button
+              class="w-full ml-0"
+              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>

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

@@ -0,0 +1,68 @@
+@import "./../../styles/scss/utilities/helpers";
+
+.datepicker-toggle {
+  transform: translateX(-1.25rem);
+  left: -0.125rem;
+}
+
+.time {
+  width: 3.375rem;
+}
+
+.fake-input {
+  visibility: hidden;
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.date-input {
+  margin: 0rem -1.25rem 0rem 0.125rem;
+}
+
+.time--inputs {
+  position: relative;
+  margin-top: 2.4rem;
+  margin-bottom: 2.4rem;
+
+  &::before, &::after {
+    @extend %pseudos;
+    height: 1px;
+    right: 0;
+    left: 0;
+    background-color: var(--color-gray-300);
+  }
+
+  &::before {
+    top: -1.6rem;
+  }
+
+  &::after {
+    bottom: -1.6rem;
+  }
+}
+
+:host ::ng-deep {
+  .form-field {
+    margin-right: -1.25rem;
+    margin-left: -0.125rem;
+  }
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  width: 100% !important;
+  row-gap: 1rem;
+}
+
+.time-inputs {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: center;
+}

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

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

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

@@ -0,0 +1,185 @@
+import { DecimalPipe } from '@angular/common';
+import { AfterViewInit, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
+import { format, isValid, parse, setHours, setMinutes, setSeconds } from 'date-fns';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, UntypedFormControl } from '@angular/forms';
+import ElementBaseComponent from '../base/element-base';
+import { EcabsDateTimePickerHeaderComponent } from './components/ecabs-date-time-picker-header/ecabs-date-time-picker-header.component';
+
+@Component( {
+  selector: 'ecabs-date-time-picker',
+  templateUrl: './ecabs-date-time-picker.component.html',
+  styleUrls: [ './ecabs-date-time-picker.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsDateTimePickerComponent,
+      multi: true,
+    },
+    DecimalPipe,
+  ],
+} )
+export class EcabsDateTimePickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+  @Input() minDate: Date;
+  @Input() maxDate: Date;
+  @Input() touchUi = false;
+  @Input() hideSeconds = true;
+  @Input() cancleLabel = 'Cancel';
+  @Input() applyLabel = 'Apply';
+  @Input() selectDateLabel = 'Select date and time';
+
+  @Output() onblur = new EventEmitter<any>();
+
+  _hours = '12';
+  _minutes = '00';
+  _seconds = '00';
+  _date: Date;
+  _pickerValue: string;
+  val: Date;
+  header = EcabsDateTimePickerHeaderComponent;
+  maxValueHours = 23;
+  maxValueMinutesSeconds = 59;
+
+  get value(): Date {
+    return this.val;
+  }
+
+  get pickerValue(): string {
+    return this._pickerValue;
+  }
+
+  get hours(): string {
+    return this._hours;
+  }
+
+  get minutes(): string {
+    return this._minutes;
+  }
+
+  get seconds(): string {
+    return this._seconds;
+  }
+
+  set hours( value: string ) {
+    if ( value !== undefined && this._hours !== value ) {
+      this._hours = this.roundNumber( +value );
+    }
+  }
+
+  set minutes( value: string ) {
+    if ( value !== undefined && this._minutes !== value ) {
+      this._minutes = this.roundNumber( +value );
+    }
+  }
+
+  set seconds( value: string ) {
+    if ( value !== undefined && this._seconds !== value ) {
+      this._seconds = this.roundNumber( +value );
+    }
+  }
+
+  set value( val ) {
+    if ( val && this.val !== new Date( val ) ) {
+      this.val = new Date( val );
+      this.pickerValue = this.formatDateTime( val );
+      this.onChange( val );
+      this.onTouch( val );
+    }
+  }
+
+  set pickerValue( val: string ) {
+    if ( val ) {
+      const date = parse(
+        val.replace( '_', '' ),
+        this.hideSeconds ? `dd/MM/yyyy, HH:mm` : `dd/MM/yyyy, HH:mm:ss`,
+        new Date()
+      );
+      if ( isValid( date ) && this._pickerValue !== val ) {
+        this._pickerValue = val;
+        this.value = date;
+      }
+    }
+  }
+
+  constructor( private readonly injector: Injector, private readonly decimalPipe: DecimalPipe ) {
+    super();
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null );
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+
+      setTimeout( () => {
+        const controlDate = !!this.control.value ? new Date( this.control.value ) : new Date();
+
+        if ( controlDate ) {
+          this.setValues( controlDate );
+        }
+      }, 10 );
+    }
+  }
+
+  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 );
+  }
+
+  onApply(): void {
+    if ( this._date && this._seconds && this._minutes && this._hours ) {
+      const date = setSeconds( setMinutes( setHours( new Date( this._date ), +this._hours ), +this._minutes ), +this._seconds );
+
+      if ( this.minDate && date < this.minDate ) {
+        this.setValues( this.minDate );
+        this.value = this.minDate;
+
+        return;
+      }
+
+      if ( this.maxDate && date > this.maxDate ) {
+        this.setValues( this.maxDate );
+        this.value = this.maxDate;
+
+        return;
+      }
+
+      this.value = date;
+    }
+  }
+
+  private formatDateTime( date: Date ): string {
+    let result = '';
+
+    if ( date && isValid( new Date( date ) ) ) {
+      result = this.hideSeconds
+        ? format( new Date( date ), `dd/MM/yyyy, HH:mm` )
+        : format( new Date( date ), `dd/MM/yyyy, HH:mm:ss` );
+    }
+
+    return result;
+  }
+
+  private roundNumber( num: number ): string | null {
+    return this.decimalPipe.transform( num, '2.0-0' ) ?? '00';
+  }
+
+  private setValues( date: Date ): void {
+    this._date = date;
+    this.hours = date.getHours().toString();
+    this.minutes = date.getMinutes().toString();
+    this.seconds = date.getSeconds().toString();
+  }
+}

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

@@ -0,0 +1,36 @@
+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 { 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 { EcabsDateTimePickerHeaderComponent } from './components/ecabs-date-time-picker-header/ecabs-date-time-picker-header.component';
+import { EcabsDateTimePickerComponent } from './ecabs-date-time-picker.component';
+
+
+@NgModule( {
+  declarations: [ EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent ],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatIconModule,
+    MatDatepickerModule,
+    MatButtonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    EcabsPickerHeaderModule,
+    EcabsButtonsModule,
+    DigitsOnlyDirectivesModule,
+    NumberBorderDirectiveModule,
+    MaskDateDirectiveModule
+  ],
+  exports: [ EcabsDateTimePickerComponent, EcabsDateTimePickerHeaderComponent ],
+} )
+export class EcabsDatetimePickerModule { }