ecabs-components 0.0.59 → 0.0.61

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

@@ -0,0 +1,25 @@
+:host,
+:host ::ng-deep {
+  .mat-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/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/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/lib/ecabs-dialog-message/ecabs-dialog-message.module.ts

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

package/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/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/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/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/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/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-form-field + .mat-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/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/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 );
+  }
+}

package/lib/ecabs-expansion-panel/ecabs-expansion-panel.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { EcabsExpansionPanelComponent } from './ecabs-expansion-panel.component';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatChipsModule } from '@angular/material/chips';
+import { EcabsCheckboxToggleModule } from '../ecabs-checkbox-toggle/ecabs-checkbox-toggle.module';
+import { FormsModule } from '@angular/forms';
+
+@NgModule( {
+  declarations: [ EcabsExpansionPanelComponent ],
+  imports: [ CommonModule, FormsModule, MatButtonModule, MatExpansionModule, MatIconModule, MatChipsModule, EcabsCheckboxToggleModule ],
+  exports: [ EcabsExpansionPanelComponent ],
+} )
+export class EcabsExpansionPanelModule { }

package/lib/ecabs-increment/ecabs-increment.component.html

@@ -0,0 +1,18 @@
+<app-element-wrapper [data]="getData()">
+  <div class="form-field__input--wrapper">
+    <input appDigitsOnly [digitsOnly]="digitsOnly" [decimal]="allowDecimal" [allowHyphen]="allowHyphen"
+           class="form-field__input"
+           [type]="type"
+           [id]="name"
+           [(ngModel)]="value"
+           [placeholder]="placeholder"
+           (blur)="onTouch()"
+           [disabled]="disabled"
+           [maxlength]="maxLength"/>
+
+    <div class="incrementor">
+      <mat-icon (click)="increment()">add</mat-icon>
+      <mat-icon (click)="decrement()">remove</mat-icon>
+    </div>
+  </div>
+</app-element-wrapper>

package/lib/ecabs-increment/ecabs-increment.component.scss

@@ -0,0 +1,33 @@
+@import "../../styles/styles";
+
+:host::ng-deep {
+  .incrementor {
+    border-left: 1px solid var(--color-gray-300);
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    top: 1px;
+    bottom: 1px;
+    right: 1px;
+    background-color: var(--color-white);
+
+    .mat-icon {
+      margin-right: 0;
+      font-size: 20px;
+      line-height: 20px;
+      cursor: pointer;
+
+      &:first-of-type {
+        border-bottom: 1px solid var(--color-gray-300);
+      }
+
+      &:hover {
+        color: var(--color-brand-dark);
+      }
+    }
+  }
+
+  .form-field > div {
+    line-height: 1;
+  }
+}

package/lib/ecabs-increment/ecabs-increment.component.ts

@@ -0,0 +1,74 @@
+import { AfterViewInit, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
+import { ControlValueAccessor, UntypedFormControl, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import ElementBaseComponent from '../base/element-base';
+
+@Component( {
+  selector: 'ecabs-increment',
+  templateUrl: './ecabs-increment.component.html',
+  styleUrls: [ './ecabs-increment.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsIncrementComponent,
+      multi: true,
+    },
+  ],
+} )
+export class EcabsIncrementComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+  @Input() digitsOnly!: boolean;
+  @Input() allowDecimal!: boolean;
+  @Input() allowHyphen!: boolean;
+
+  @Output() onblur = new EventEmitter<any>();
+  val!: string | number;
+
+  get value(): string | number {
+    return this.val;
+  }
+
+  set value( val ) {
+    if ( val !== undefined && this.val !== val ) {
+      this.val = val;
+      this.onChange( val );
+      this.onTouch( val );
+    }
+  }
+
+  constructor( private injector: Injector ) {
+    super();
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null ) as NgControl;
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+  }
+
+  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 );
+  }
+
+  increment(): void {
+    this.value = +this.value + 1;
+  }
+
+  decrement(): void {
+    this.value = +this.value - 1;
+  }
+}

package/lib/ecabs-increment/ecabs-increment.module.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { DigitsOnlyDirectivesModule } from '../base/directives/digits-only.directive.module';
+
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+import { EcabsIncrementComponent } from './ecabs-increment.component';
+
+@NgModule( {
+  declarations: [ EcabsIncrementComponent ],
+  imports: [ CommonModule, MatInputModule, MatIconModule, ElementWrapperModule, FormsModule, DigitsOnlyDirectivesModule ],
+  exports: [ EcabsIncrementComponent ],
+} )
+export class EcabsIncrementModule { }

package/lib/ecabs-input/ecabs-input.component.html

@@ -0,0 +1,27 @@
+<app-element-wrapper [data]="getData()">
+  <div class="form-field__input--wrapper">
+    <input
+      appDigitsOnly
+      [digitsOnly]="digitsOnly"
+      [decimal]="allowDecimal"
+      [allowHyphen]="allowHyphen"
+      class="form-field__input"
+      [type]="type"
+      [id]="name"
+      [(ngModel)]="value"
+      [placeholder]="placeholder"
+      (blur)="onTouch()"
+      [disabled]="disabled"
+      [maxlength]="maxLength"
+      [max]="max"
+      [min]="min"
+      [step]="step"
+      (blur)="blurChange($event)"
+    />
+
+    <div class="form-field__input--suffix" *ngIf="type !== 'number'">
+      <ng-content select="mat-icon"></ng-content>
+      <ng-content select=".suffix"></ng-content>
+    </div>
+  </div>
+</app-element-wrapper>