ecabs-components 1.0.19 → 1.0.21

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

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

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

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

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

package/src/lib/ecabs-date-time-range-picker/components/ecabs-date-time-range-picker-header/ecabs-date-time-range-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-range-picker/components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component.scss

@@ -1,5 +0,0 @@
-:host ::ng-deep {
-    ecabs-picker-header{
-      display: none !important;
-    }
-  }

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

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

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

@@ -1,10 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'ecabs-date-time-range-picker-header',
-  templateUrl: './ecabs-date-time-range-picker-header.component.html',
-  styleUrls: ['./ecabs-date-time-range-picker-header.component.scss'],
-})
-export class EcabsDateTimeRangePickerHeaderComponent {
-  @Input() headerLabel = 'Applicable times';
-}

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

@@ -1,116 +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 || controlDate?.disabled"
-      [matDatepicker]="picker"
-      (blur)="onTouch()"
-    />
-    <mat-datepicker
-      (opened)="opened()"
-      #picker
-      [calendarHeaderComponent]="header"
-      [touchUi]="touchUi"
-    >
-      <mat-datepicker-actions>
-        <div class="flex flex-col w-full gap-y-4">
-          <div class="flex gap-2 justify-center items-center">
-            <div class="flex flex-col justify-center">
-              <div class="text-center">{{ from }}</div>
-              <div class="flex gap-2 justify-center items-center">
-                <input
-                  class="block form-field__input time"
-                  appDigitsOnly
-                  appNumberBorder
-                  [digitsOnly]="true"
-                  [id]="hoursFrom"
-                  [maxValue]="maxValueHours"
-                  [(ngModel)]="hoursFrom"
-                />
-
-                <span class="font-bold">:</span>
-                <input
-                  class="form-field__input time"
-                  [id]="minutesFrom"
-                  [(ngModel)]="minutesFrom"
-                  appDigitsOnly
-                  appNumberBorder
-                  [digitsOnly]="true"
-                  [maxValue]="maxValueMinutesSeconds"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="time--inputs"></div>
-          <div class="flex gap-2 justify-center items-center mb-5">
-            <div class="flex flex-col justify-center">
-              <div class="text-center">{{ to }}</div>
-              <div class="flex gap-2 justify-center items-center">
-                <input
-                  class="form-field__input time"
-                  appDigitsOnly
-                  appNumberBorder
-                  [digitsOnly]="true"
-                  [id]="hoursTo"
-                  [maxValue]="maxValueHours"
-                  [(ngModel)]="hoursTo"
-                />
-                <span class="font-bold">:</span>
-                <input
-                  class="form-field__input time"
-                  [id]="minutesTo"
-                  [(ngModel)]="minutesTo"
-                  appDigitsOnly
-                  appNumberBorder
-                  [digitsOnly]="true"
-                  [maxValue]="maxValueMinutesSeconds"
-                />
-              </div>
-            </div>
-          </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 || controlDate?.disabled"
-      appTimeRange
-      [all]="all"
-      (blur)="onTouch()"
-      (blur)="blurChange($event)"
-      (keyup)="blurChange($event)"
-      (keydown)="keydownChange($event)"
-    />
-    <button type="button" class="datepicker-toggle" (click)="picker.open()">
-      <mat-icon>access_time</mat-icon>
-    </button>
-  </div>
-</app-element-wrapper>

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

@@ -1,43 +0,0 @@
-@import "./../../styles/scss/utilities/helpers";
-
-.datepicker-toggle {
-  transform: translateX(-1.75rem);
-}
-
-.time {
-  width: 3.375rem;
-}
-
-.fake-input {
-  visibility: hidden;
-  width: 0;
-  padding: 0;
-}
-
-.date-input {
-  margin: 0rem -0.25rem 0rem 0.125rem;
-}
-
-.time--inputs {
-  position: relative;
-  margin-bottom: 2.4rem;
-
-  &::after {
-    @extend %pseudos;
-    height: 1px;
-    right: 0;
-    left: 0;
-    background-color: var(--color-gray-300);
-  }
-
-  &::after {
-    bottom: -1.6rem;
-  }
-}
-
-:host ::ng-deep {
-  .form-field {
-    margin-right: -1.25rem;
-    margin-left: -0.125rem;
-  }
-}

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

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