ecabs-components 0.0.59 → 0.0.61

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+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 { MatButtonModule } from '@angular/material/button';
+import { EcabsDateTimeRangePickerComponent } from './ecabs-date-time-range-picker.component';
+import { EcabsDateTimeRangePickerHeaderComponent } from './components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component';
+import { TimeRangeDirective } from './time-range.directive';
+
+
+@NgModule({
+  declarations: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, TimeRangeDirective],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatIconModule,
+    MatDatepickerModule,
+    MatButtonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    EcabsPickerHeaderModule,
+    EcabsButtonsModule,
+    DigitsOnlyDirectivesModule,
+    NumberBorderDirectiveModule,
+    MaskDateDirectiveModule
+  ],
+  exports: [EcabsDateTimeRangePickerComponent, EcabsDateTimeRangePickerHeaderComponent, TimeRangeDirective],
+})
+export class EcabsDatetimeRangePickerModule { }

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

@@ -0,0 +1,38 @@
+import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask';
+
+@Directive({
+    selector: '[appTimeRange]',
+})
+export class TimeRangeDirective implements OnInit, OnDestroy {
+    @Input() isDateTimeMask = false;
+    @Input() considerSeconds = false;
+    @Input() all: string;
+
+    maskedInputController;
+    maskDateTime = [/\d/, /\d/, ':', /\d/, /\d/, ' ', '-', ' ', /\d/, /\d/, ':', /\d/, /\d/];
+
+    constructor(private readonly element: ElementRef) { }
+
+    ngOnInit(): void {
+        const all = this.all;
+        this.maskedInputController = textMask.maskInput({
+            inputElement: this.element.nativeElement,
+            guide: true,
+            showMask: false,
+            keepCharPositions: true,
+            mask: this.maskDateTime,
+            pipe: function (conformedValue) {
+                if (conformedValue === '__:__ - __:__') {
+                    return all;
+                }
+
+                return conformedValue;
+            },
+        });
+    }
+
+    ngOnDestroy(): void {
+        this.maskedInputController.destroy();
+    }
+}

package/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component.html

@@ -0,0 +1,32 @@
+<div matDialogTitle *ngIf="data?.title || !!data?.isPopover" class="flex flex-column">
+  <div *ngIf="!!data?.isPopover" class="w-full flex justify-end">
+    <mat-icon
+      (click)="dialogRef.close(true)"
+      class="mat-icon material-icons-outlined float-right icon--close mb-2"
+      role="button"
+    >
+      close
+    </mat-icon>
+  </div>
+
+  <div class="font-semibold heading--xs modal-title {{ data.titleColor }}" *ngIf="data.title">
+    {{ data.title }}
+  </div>
+</div>
+
+<div mat-dialog-content>
+  <div>{{ data?.content  }}</div>
+  <ng-container *ngTemplateOutlet="data?.message"></ng-container>
+</div>
+
+<div class="pb-6">
+  <div mat-dialog-actions class="btn__group flex justify-end w-full" *ngIf="!data?.isPopover">
+    <ecabs-buttons (click)="dialogRef.close(false)" [stroked]="true">
+      {{ data?.cancelLabel }}
+    </ecabs-buttons>
+
+    <ecabs-buttons [color]="data?.color || color" [loading]="data.loading$ | async" (click)="closeDialog()">
+      {{ data?.confirmLabel }}
+    </ecabs-buttons>
+  </div>
+</div>

package/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component.scss

@@ -0,0 +1,24 @@
+:host,
+:host ::ng-deep {
+  .mat-dialog-title {
+    .mat-icon.icon--close {
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+      font-size: 20px;
+    }
+  }
+
+  app-buttons {
+    width: calc(50% - 0.5rem);
+  }
+
+  button {
+    width: 100%;
+  }
+}
+.modal-title {
+  &.warn {
+    color: var(--color-error) !important;
+  }
+}

package/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component.ts

@@ -0,0 +1,57 @@
+import { Component, Inject, OnDestroy, OnInit, TemplateRef } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ThemePalette } from '@angular/material/core';
+import { Observable, Subject, takeUntil } from 'rxjs';
+
+@Component({
+  selector: 'ecabs-dialog-confirm',
+  templateUrl: './ecabs-dialog-confirm.component.html',
+  styleUrls: ['./ecabs-dialog-confirm.component.scss'],
+})
+export class EcabsDialogConfirmComponent implements OnInit, OnDestroy {
+
+  private destroy$: Subject<any> = new Subject<any>();
+
+  message: string;
+  color: ThemePalette = 'primary';
+  titleColor: ThemePalette = 'primary';
+
+  constructor(
+    public dialogRef: MatDialogRef<DialogConfirmComponentConfig>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogConfirmComponentConfig,
+  ) { }
+
+  ngOnInit(): void {
+    this.dialogRef.updateSize(this.data.width || '24rem');
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  closeDialog() {
+    if (this.data.loading$) {
+      this.data.loading$?.pipe(takeUntil(this.destroy$)).subscribe((loading) => {
+        if (!loading) {
+          this.dialogRef.close(true);
+        }
+      });
+    } else {
+      this.dialogRef.close(true);
+    }
+  }
+}
+
+export interface DialogConfirmComponentConfig {
+  title?: string;
+  message: TemplateRef<any>;
+  color?: ThemePalette;
+  titleColor?: ThemePalette;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  isPopover?: boolean;
+  width?: string;
+  content?: string;
+  loading$?: Observable<boolean>;
+}

package/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EcabsDialogConfirmComponent } from './ecabs-dialog-confirm.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { EcabsButtonsModule } from '../ecabs-buttons/ecabs-buttons.module';
+
+@NgModule( {
+  declarations: [ EcabsDialogConfirmComponent ],
+  imports: [ CommonModule, MatDialogModule, EcabsButtonsModule, MatIconModule ],
+} )
+export class EcabsDialogConfirmModule { }

package/lib/ecabs-dialog-message/ecabs-dialog-message.component.html

@@ -0,0 +1,27 @@
+<div matDialogTitle *ngIf="data?.title || !!data?.isPopover" class="flex flex-column">
+  <div *ngIf="!!data?.isPopover" class="w-full flex justify-end">
+    <mat-icon
+      (click)="dialogRef.close(true)"
+      class="mat-icon material-icons-outlined float-right icon--close mb-2"
+      role="button"
+    >
+      close
+    </mat-icon>
+  </div>
+
+  <div *ngIf="data.title" class="title font-semibold heading--xs" [ngClass]="data?.titleColor || titleColor">
+    {{ data.title }}
+  </div>
+</div>
+
+<div mat-dialog-content>
+  {{data?.message}}
+</div>
+
+<div class="pb-6">
+  <div mat-dialog-actions class="btn__group flex justify-end w-full" *ngIf="!data?.isPopover">
+    <ecabs-buttons [color]="data?.color || color" [full]="data?.isButtonBlock" [loading]="data.loading$ | async" (click)="closeDialog()">
+      {{ data?.confirmLabel }}
+    </ecabs-buttons>
+  </div>
+</div>