ecabs-components 1.0.18 → 1.0.19

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

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

@@ -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/src/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/src/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component.scss

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

@@ -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/src/lib/ecabs-dialog-confirm/ecabs-dialog-confirm.module.ts

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

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

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

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

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

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

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

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

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

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

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

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.html

@@ -0,0 +1,33 @@
+<mat-accordion class="example-headers-align" multi>
+  <mat-expansion-panel [expanded]="expanded" [disabled]="disabled" (opened)="onOpened()" [hideToggle]="hideToggle">
+    <mat-expansion-panel-header *ngIf="title">
+      <mat-panel-title>
+        <div>
+          <div class="flex flex-row">
+            <div *ngIf="index && !showErrorMessage" class="border-current border-2 rounded-full mr-3 index">
+              {{ index }}
+            </div>
+            <div *ngIf="!showErrorMessage && showIcon" class="mr-3 rounded">
+              <mat-icon class="rounded-icon !text-lg -mt-1">{{ iconName }}</mat-icon>
+            </div>
+            <div *ngIf="showErrorMessage" class="mt-1 mr-2">
+              <mat-icon color="warn">warning</mat-icon>
+            </div>
+            {{ title }}
+            <div *ngIf="showCheckbox" class="ml-2 mt-1">
+              <ecabs-checkbox [type]="'toggle'" [(ngModel)]="toggle"
+                                       (click)="toggleAction()"></ecabs-checkbox>
+            </div>
+          </div>
+          <div *ngIf="showErrorMessage" class="error-message">{{ errorMessage }}</div>
+        </div>
+      </mat-panel-title>
+      <mat-panel-description>{{ description }}
+        <mat-chip *ngIf="showStatus" class="{{ status | lowercase }}">
+          {{ status | titlecase }}
+        </mat-chip>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <ng-content></ng-content>
+  </mat-expansion-panel>
+</mat-accordion>

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.scss

@@ -0,0 +1,79 @@
+.example-action-buttons {
+  padding-bottom: 20px;
+}
+
+.example-headers-align .mat-expansion-panel-header-title,
+.example-headers-align .mat-expansion-panel-header-description {
+  flex-basis: 0;
+}
+
+.example-headers-align .mat-expansion-panel-header-description {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
+  margin-left: 8px;
+}
+
+:host ::ng-deep .mat-expansion-indicator::after {
+  border-color: var(--color-gray-500);
+}
+
+.index {
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding-top: 3px;
+  font-size: 16px;
+}
+
+.error-message {
+  font-size: 0.75rem !important;
+  color: var(--color-error);
+  margin-left: 2.125rem;
+  margin-top: -0.75rem;
+}
+
+.rounded {
+  background-color: var(--color-brand-dark);
+  border-radius: 50%;
+  height: 28px;
+  width: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.rounded-icon {
+  color: var(--color-white);
+}
+
+.inactive {
+  background-color: rgba(var(--color-warn-rgb), .05);
+  color: var(--color-warn);
+}
+
+.draft {
+  background-color: var(--color-gray-200);
+  color: var(--color-gray-500);
+}
+
+.published {
+  background-color: rgba(var(--color-info-rgb), .05);
+  color: var(--color-info);
+}
+
+.active {
+  background-color: rgba(var(--color-success-rgb), .05);
+  color: var(--color-success);
+}
+
+.expired {
+  background-color: rgba(var(--color-error-rgb), .05);
+  color: var(--color-error);
+}

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { EcabsExpansionPanelComponent } from './ecabs-expansion-panel.component';
+
+describe( 'ExpansionPanelComponent', () => {
+  let component: EcabsExpansionPanelComponent;
+  let fixture: ComponentFixture<EcabsExpansionPanelComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      imports: [ BrowserAnimationsModule, MatExpansionModule ],
+      declarations: [ EcabsExpansionPanelComponent ],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( EcabsExpansionPanelComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.ts

@@ -0,0 +1,77 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { MatExpansionPanel } from '@angular/material/expansion';
+
+@Component( {
+  selector: 'ecabs-expansion-panel',
+  templateUrl: './ecabs-expansion-panel.component.html',
+  styleUrls: [ './ecabs-expansion-panel.component.scss' ],
+} )
+export class EcabsExpansionPanelComponent implements OnChanges {
+  @Input()
+  title = '';
+
+  @Input()
+  description: string;
+
+  @Input()
+  index;
+
+  @Input()
+  expanded = false;
+
+  @Input()
+  disabled = false;
+
+  @Input()
+  errorMessage: string;
+
+  @Input()
+  showErrorMessage: boolean;
+
+  @Input()
+  closePanel: boolean;
+
+  @Input()
+  showIcon: boolean;
+
+  @Input()
+  iconName: string;
+
+  @Input()
+  showCheckbox: boolean;
+
+  @Input()
+  showStatus: boolean;
+
+  @Input()
+  status: string;
+
+  @Input()
+  hideToggle = false;
+
+  @Output() checked = new EventEmitter<boolean>();
+
+  @Output() opened = new EventEmitter<void>();
+
+  @ViewChild( MatExpansionPanel ) expansionPanel: MatExpansionPanel;
+
+  toggle = false;
+
+  onOpened(): void {
+    this.opened.emit();
+  }
+
+  ngOnChanges( changes: SimpleChanges ): void {
+    const { closePanel } = changes;
+
+    if ( closePanel && this.expansionPanel ) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      closePanel.currentValue === true ? this.expansionPanel.close() : this.expansionPanel.open();
+    }
+  }
+
+  toggleAction(): void {
+    this.expanded = !this.expanded;
+    this.checked.emit( this.expanded );
+  }
+}