ecabs-components 0.0.61 → 0.0.63

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

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

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

@@ -1,11 +0,0 @@
-:host ::ng-deep {
-    ecabs-picker-header{
-      display: none !important;
-    }
-  }
-
-  :host ::ng-deep {
-    .mat-calendar{
-      height: 50px !important;
-    }
-  }

package/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/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/lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.component.html

@@ -1,107 +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/lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.component.scss

@@ -1,51 +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;
-  }
-}
-
-:host ::ng-deep {
-  .mat-datepicker-content .mat-calendar{
-    height: 50px !important;
-  }
-}
-
-

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

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

@@ -1,206 +0,0 @@
-import { DecimalPipe } from '@angular/common';
-import { AfterViewInit, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, UntypedFormControl } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
-import { EcabsDateTimeRangePickerHeaderComponent } from './components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component';
-
-@Component({
-  selector: 'ecabs-date-time-range-picker',
-  templateUrl: './ecabs-date-time-range-picker.component.html',
-  styleUrls: ['./ecabs-date-time-range-picker.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: EcabsDateTimeRangePickerComponent,
-      multi: true,
-    },
-    DecimalPipe,
-  ],
-})
-export class EcabsDateTimeRangePickerComponent
-  extends ElementBaseComponent
-  implements ControlValueAccessor, AfterViewInit {
-  @Input() touchUi = false;
-
-  @Output() onblur = new EventEmitter<any>();
-
-
-  @Input() cancleLabel = 'Cancel';
-  @Input() applyLabel = 'Apply';
-  @Input() all = 'All';
-  @Input() from = 'From';
-  @Input() to = 'To';
-
-  
-
-  _hoursFrom = '12';
-  _minutesFrom = '00';
-  _hoursTo = '12';
-  _minutesTo = '00';
-  _seconds = '00';
-  _date: string;
-  _pickerValue: string;
-  val: string;
-  header = EcabsDateTimeRangePickerHeaderComponent;
-  maxValueHours = 23;
-  maxValueMinutesSeconds = 59;
-  controlDate: UntypedFormControl;
-
-  get value(): string {
-    return this.val;
-  }
-
-  get pickerValue(): string {
-    return this._pickerValue;
-  }
-
-  get hoursFrom(): string {
-    return this._hoursFrom;
-  }
-
-  get minutesFrom(): string {
-    return this._minutesFrom;
-  }
-
-  get hoursTo(): string {
-    return this._hoursTo;
-  }
-
-  get minutesTo(): string {
-    return this._minutesTo;
-  }
-
-  get seconds(): string {
-    return this._seconds;
-  }
-
-  set hoursFrom(value: string) {
-    if (value !== undefined && this._hoursFrom !== value) {
-      this._hoursFrom = this.roundNumber(+value);
-    }
-  }
-
-  set minutesFrom(value: string) {
-    if (value !== undefined && this._minutesFrom !== value) {
-      this._minutesFrom = this.roundNumber(+value);
-    }
-  }
-
-  set hoursTo(value: string) {
-    if (value !== undefined && this._hoursTo !== value) {
-      this._hoursTo = this.roundNumber(+value);
-    }
-  }
-
-  set minutesTo(value: string) {
-    if (value !== undefined && this._minutesTo !== value) {
-      this._minutesTo = 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 !== val) {
-      this.val = val;
-      this.pickerValue = val;
-      this.onChange(val);
-      this.onTouch(val);
-    }
-  }
-
-  set pickerValue(val: string) {
-    if (val) {
-      this._pickerValue = val;
-      this.value = val;
-    }
-  }
-
-  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(() => {
-        this.controlDate = this.control;
-        const controlDate = !!this.control.value ? this.control.value : '';
-
-        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);
-  }
-
-  keydownChange(e: any): void {
-    if (e?.target.value === this.all) {
-      const val = '';
-      this.val = val;
-      this._pickerValue = val;
-      this.onChange(val);
-      this.onTouch(val);
-    }
-  }
-
-  onApply(): void {
-    if (this._minutesFrom && this._hoursFrom && this._minutesTo && this._hoursTo) {
-      this.setValues(this._hoursFrom + ':' + this._minutesFrom + ' - ' + this._hoursTo + ':' + this._minutesTo);
-      this.value = this._hoursFrom + ':' + this._minutesFrom + ' - ' + this._hoursTo + ':' + this._minutesTo;
-
-      return;
-    }
-  }
-
-  opened(): void {
-    setTimeout(() => {
-      const elements = document.getElementsByClassName('mat-calendar-content');
-      while (elements.length > 0) {
-        elements[0].parentNode.removeChild(elements[0]);
-      }
-
-      let cols = Array.from(document.getElementsByClassName('mat-calendar') as HTMLCollectionOf<HTMLElement>);
-      for(let i=0; i<cols.length; i++) {
-        cols[i].style.height = '50px';
-      }      
-
-    });
-  }
-
-  private roundNumber(num: number): string | null {
-    return this.decimalPipe.transform(num, '2.0-0') ?? '00';
-  }
-
-  private setValues(date: string): void {
-    this._date = date;
-  }
-}