ecabs-components 1.0.17 → 1.0.19

package/src/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/src/lib/ecabs-date-picker/ecabs-date-picker.module.ts

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,4 @@
+<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

@@ -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();
+//   } );
+// } );

package/src/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/src/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 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

@@ -0,0 +1,36 @@
+@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

@@ -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/src/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/src/lib/ecabs-date-range-picker/ecabs-date-range-picker.module.ts

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,4 @@
+<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

@@ -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/src/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/src/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 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>

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

@@ -0,0 +1,82 @@
+@import "./../../styles/scss/utilities/helpers";
+
+.datepicker-toggle {
+  transform: translateX(-1.25rem);
+  background-color: inherit;
+  left: -0.125rem;
+}
+
+.time {
+  width: 3.375rem;
+}
+
+.fake-input {
+  visibility: hidden;
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.date-input {
+  margin: 0rem -0.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;
+}
+
+: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-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();
+  } );
+} );