ecabs-components 1.0.19 → 1.0.21

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

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

@@ -1,39 +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 {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-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/src/lib/ecabs-date-time-range-picker/time-range.directive.ts

@@ -1,38 +0,0 @@
-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/src/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component.html

@@ -1,32 +0,0 @@
-<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/src/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component.scss

@@ -1,24 +0,0 @@
-:host,
-:host ::ng-deep {
-  .mat-mdc-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/src/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component.ts

@@ -1,57 +0,0 @@
-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/src/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.module.ts

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

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

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

package/src/lib/ecabs-dialog-message/ecabs-dialog-message.component.scss

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

package/src/lib/ecabs-dialog-message/ecabs-dialog-message.component.spec.ts

@@ -1,38 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { EcabsDialogMessageComponent } from './ecabs-dialog-message.component';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
-
-describe( 'DialogMessageComponent', () => {
-  let component: EcabsDialogMessageComponent;
-  let fixture: ComponentFixture<EcabsDialogMessageComponent>;
-
-  beforeEach( async () => {
-    await TestBed.configureTestingModule( {
-      declarations: [ EcabsDialogMessageComponent ],
-      imports: [
-        MatDialogModule,
-        TranslateModule.forRoot( {
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateFakeLoader,
-          },
-        } ),
-      ],
-      providers: [
-        { provide: MatDialogRef, useValue: {} },
-        { provide: MAT_DIALOG_DATA, useValue: {} },
-      ],
-    } ).compileComponents();
-  } );
-
-  beforeEach( () => {
-    fixture = TestBed.createComponent( EcabsDialogMessageComponent );
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  } );
-
-  it( 'should create', () => {
-    expect( component ).toBeTruthy();
-  } );
-} );

package/src/lib/ecabs-dialog-message/ecabs-dialog-message.component.ts

@@ -1,49 +0,0 @@
-import { Component, Inject, OnDestroy } 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-message',
-  templateUrl: './ecabs-dialog-message.component.html',
-  styleUrls: ['./ecabs-dialog-message.component.scss'],
-})
-export class EcabsDialogMessageComponent implements OnDestroy {
-  message: string;
-  color: ThemePalette = 'primary';
-  titleColor = 'success';
-  private destroy$: Subject<any> = new Subject<any>();
-
-  constructor(
-    public dialogRef: MatDialogRef<EcabsDialogMessageComponentConfig>,
-    @Inject(MAT_DIALOG_DATA) public data: EcabsDialogMessageComponentConfig,
-  ) { }
-
-  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 EcabsDialogMessageComponentConfig {
-  title?: string;
-  titleColor?: ThemePalette | 'success';
-  message: string;
-  color?: ThemePalette;
-  confirmLabel?: string;
-  isPopover?: boolean;
-  isButtonBlock?: boolean;
-  loading$?: Observable<boolean>;
-}

package/src/lib/ecabs-dialog-message/ecabs-dialog-message.module.ts

@@ -1,13 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {EcabsDialogMessageComponent} from './ecabs-dialog-message.component';
-import {MatIconModule} from '@angular/material/icon';
-import {EcabsButtonsModule} from '../ecabs-buttons/ecabs-buttons.module';
-import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
-
-@NgModule({
-  declarations: [EcabsDialogMessageComponent],
-  imports: [CommonModule, MatDialogModule, EcabsButtonsModule, MatIconModule],
-})
-export class EcabsDialogMessageModule {
-}

package/src/lib/ecabs-empty-placeholder/ecabs-empty-placeholder.component.html

@@ -1,9 +0,0 @@
-<div class="w-full flex flex-col items-center justify-items-center">
-  <img class="mt-10 w-60" [src]="srcImage" alt="" />
-
-  <span class="heading--sm text-gray-400 my-2">{{ isEmptyMessage }}</span>
-
-  <a *ngIf="redirectPath" [routerLink]="redirectPath?.path && [redirectPath.path]" class="text-sm">
-    {{ redirectPath.title }}
-  </a>
-</div>

package/src/lib/ecabs-empty-placeholder/ecabs-empty-placeholder.component.spec.ts

@@ -1,34 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { EcabsEmptyPlaceholderComponent } from './ecabs-empty-placeholder.component';
-import { RouterTestingModule } from '@angular/router/testing';
-import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
-
-describe( 'EmptyPlaceholderComponent', () => {
-  let component: EcabsEmptyPlaceholderComponent;
-  let fixture: ComponentFixture<EcabsEmptyPlaceholderComponent>;
-
-  beforeEach( async () => {
-    await TestBed.configureTestingModule( {
-      imports: [
-        RouterTestingModule,
-        TranslateModule.forRoot( {
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateFakeLoader,
-          },
-        } ),
-      ],
-      declarations: [ EcabsEmptyPlaceholderComponent ],
-    } ).compileComponents();
-  } );
-
-  beforeEach( () => {
-    fixture = TestBed.createComponent( EcabsEmptyPlaceholderComponent );
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  } );
-
-  it( 'should create', () => {
-    expect( component ).toBeTruthy();
-  } );
-} );

package/src/lib/ecabs-empty-placeholder/ecabs-empty-placeholder.component.ts

@@ -1,22 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-export interface PlaceholderRedirectPath {
-  title: string;
-  path: string;
-}
-
-@Component( {
-  selector: 'ecabs-empty-placeholder',
-  templateUrl: './ecabs-empty-placeholder.component.html',
-  styleUrls: [ './ecabs-empty-placeholder.component.scss' ],
-} )
-export class EcabsEmptyPlaceholderComponent {
-  @Input()
-  isEmptyMessage: string;
-
-  @Input()
-  redirectPath: PlaceholderRedirectPath;
-
-  @Input()
-  srcImage: string;
-}

package/src/lib/ecabs-empty-placeholder/ecabs-empty-placeholder.module.ts

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EcabsEmptyPlaceholderComponent } from './ecabs-empty-placeholder.component';
-import { RouterModule } from '@angular/router';
-
-@NgModule( {
-  declarations: [ EcabsEmptyPlaceholderComponent ],
-  imports: [ CommonModule, RouterModule ],
-  exports: [ EcabsEmptyPlaceholderComponent ],
-} )
-export class EcabsEmptyPlaceholderModule { }