ecabs-components 1.0.18 → 1.0.19

package/src/lib/base/element-wrapper/element-wrapper.module.ts

@@ -0,0 +1,30 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+
+import {HintModule} from '../hint/hint.module';
+import {ValidationModule} from '../validation/validation.module';
+import {ElementWrapperComponent} from './element-wrapper.component';
+import {MatIconModule} from '@angular/material/icon';
+import {EcabsLoadingModule} from '../../ecabs-loading/ecabs-loading.module';
+import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatLegacyTooltipModule as MatTooltipModule} from "@angular/material/legacy-tooltip";
+
+@NgModule({
+  declarations: [ElementWrapperComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    EcabsLoadingModule,
+    ValidationModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatTooltipModule,
+    HintModule,
+  ],
+  exports: [ElementWrapperComponent],
+})
+export class ElementWrapperModule {
+}

package/src/lib/base/hint/hint.component.html

@@ -0,0 +1 @@
+<div class="hint" *ngIf="element && showHint">{{ element?.value?.length || 0 }}/{{ this.maxValue }}</div>

package/src/lib/base/hint/hint.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-hint',
+  templateUrl: './hint.component.html',
+  styleUrls: ['./hint.component.scss'],
+})
+export class HintComponent {
+  @Input() element!:any;
+  @Input() maxValue!:number;
+  @Input() showHint = false;
+}

package/src/lib/base/hint/hint.module.ts

@@ -0,0 +1,13 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {HintComponent} from './hint.component';
+import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
+
+@NgModule({
+  declarations: [HintComponent],
+  imports: [CommonModule, FormsModule, MatFormFieldModule],
+  exports: [HintComponent],
+})
+export class HintModule {
+}

package/src/lib/base/validation/validation.component.html

@@ -0,0 +1,8 @@
+<div
+  class="form-field__validation"
+  *ngIf="element && (element?.touched || showValidationOnNotTouched) && element?.invalid"
+>
+  <div class="form-field__validation__item" *ngFor="let item of element?.errors | keyvalue">
+    {{ getMessageDetail(item.key) }}
+  </div>
+</div>

package/src/lib/base/validation/validation.component.ts

@@ -0,0 +1,84 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  EcabsComponentsConfig,
+  EcabsComponentsService,
+} from '../../services/ecabs-components.service';
+
+@Component({
+  selector: 'app-validations-messages',
+  templateUrl: './validation.component.html',
+  styleUrls: ['./validation.component.scss'],
+})
+export class ValidationComponent implements OnInit, OnChanges {
+  @Input() element!: any;
+  @Input() label!: string;
+  @Input() showValidationOnNotTouched = false;
+  @Input() updatedErrors!: { type: string; message: string }[];
+  config!: EcabsComponentsConfig;
+  private _messages: any = {};
+
+  get messages(): any {
+    if (this.element) {
+      for (const errorKey in this.element.errors) {
+        for (const key in this.element.errors[errorKey]) {
+          if (this._messages[errorKey]) {
+            this._messages[errorKey] = this._messages[errorKey].replace(
+              `[${key}]`,
+              this.element.errors[errorKey][key]
+            );
+          }
+        }
+      }
+    }
+
+    return this._messages;
+  }
+
+  set messages(m) {
+    this._messages = m;
+  }
+
+  constructor(private ecabsService: EcabsComponentsService) {}
+
+  ngOnInit() {
+    this.config = this.ecabsService.getConfig();
+    for (let error of this.config.errorMessages) {
+      this.messages[error.type] = this.replaceTokens(error.message);
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { updatedErrors } = changes;
+
+    if (
+      updatedErrors &&
+      updatedErrors.currentValue &&
+      updatedErrors.currentValue.length > 0
+    ) {
+      for (const error of updatedErrors.currentValue) {
+        this.messages[error.type] = error.message;
+      }
+    }
+  }
+
+  replaceTokens(message: string): string {
+    let retMessage: string;
+    if (this.label) {
+      retMessage = message.replace('[label]', this.label);
+    } else {
+      retMessage = message;
+    }
+
+    return retMessage;
+  }
+
+  getMessageDetail(key: any): string {
+    return this.messages[key];
+  }
+}

package/src/lib/base/validation/validation.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {ValidationComponent} from './validation.component';
+import {FormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
+
+@NgModule({
+  declarations: [ValidationComponent],
+  imports: [CommonModule, FormsModule, MatFormFieldModule],
+  exports: [ValidationComponent],
+})
+export class ValidationModule {
+}

package/src/lib/consts/tenant.consts.ts

@@ -0,0 +1,8 @@
+export const TENANT_LOCALE_STORAGE_TOKEN = '__tenant__locale';
+
+export enum TenantDefaultEnum {
+  B2B_ADMIN = 'b2b_admin',
+  CUORIUM_ADMIN = 'cuorium_admin',
+  CUSTOMER = 'customer',
+  DRIVER = 'driver',
+}

package/src/lib/ecabs-breadcrumb/ecabs-breadcrumb.component.html

@@ -0,0 +1,11 @@
+<ul class="flex text-gray-500 text-sm">
+  <li
+    *ngFor="let item of breadCrumb; let counter = index"
+    [routerLink]="item.url"
+    [ngClass]="{ 'cursor-pointer': item.url }"
+    class="flex"
+  >
+    <mat-icon class="!text-sm text-center text-gray-400" *ngIf="counter !== 0">keyboard_arrow_right</mat-icon>
+    <span>{{ item.title }}</span>
+  </li>
+</ul>

package/src/lib/ecabs-breadcrumb/ecabs-breadcrumb.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EcabsBreadcrumbComponent } from './ecabs-breadcrumb.component';
+
+describe( 'EcabsBreadcrumbComponent', () => {
+  let component: EcabsBreadcrumbComponent;
+  let fixture: ComponentFixture<EcabsBreadcrumbComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ EcabsBreadcrumbComponent ],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( EcabsBreadcrumbComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

package/src/lib/ecabs-breadcrumb/ecabs-breadcrumb.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { BreadCrumb } from '../models/bread-crumb';
+
+@Component( {
+  selector: 'ecabs-breadcrumb',
+  templateUrl: './ecabs-breadcrumb.component.html',
+  styleUrls: [ './ecabs-breadcrumb.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+} )
+export class EcabsBreadcrumbComponent {
+  @Input() breadCrumb: BreadCrumb[];
+}

package/src/lib/ecabs-breadcrumb/ecabs-breadcrumb.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { EcabsBreadcrumbComponent } from './ecabs-breadcrumb.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule( {
+  declarations: [ EcabsBreadcrumbComponent ],
+  imports: [ CommonModule, MatIconModule, RouterModule ],
+  exports: [ EcabsBreadcrumbComponent ],
+} )
+export class EcabsBreadcrumbModule { }

package/src/lib/ecabs-buttons/ecabs-buttons.component.html

@@ -0,0 +1,18 @@
+<button
+  mat-button
+  [ngClass]="{
+    'w-full': full,
+    'mdc-button--outlined': stroked,
+    'mdc-button--raised': raised
+  }"
+  [color]="color"
+  [disabled]="disabled"
+  [type]="type"
+  [attr.form]="form"
+>
+  <ecabs-loading-spinner size="tiny" *ngIf="loading"></ecabs-loading-spinner>
+  <ng-container *ngIf="!loading">
+    <ng-content select="mat-icon"></ng-content>
+    <ng-content></ng-content>
+  </ng-container>
+</button>

package/src/lib/ecabs-buttons/ecabs-buttons.component.scss

@@ -0,0 +1,3 @@
+:host ::ng-deep .mdc-button{
+  min-height: 2.625rem;
+}

package/src/lib/ecabs-buttons/ecabs-buttons.component.ts

@@ -0,0 +1,55 @@
+import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+
+@Component( {
+  selector: 'ecabs-buttons',
+  styleUrls: [ './ecabs-buttons.component.scss' ],
+  templateUrl: './ecabs-buttons.component.html',
+} )
+export class ButtonsComponent implements OnInit, OnChanges {
+  @Input()
+  label!: string;
+
+  @Input()
+  disabled!: boolean;
+
+  @Input()
+  loading!: boolean;
+
+  @Input()
+  form!: string;
+
+  @Input()
+  size: 'default' | 'large' = 'default';
+
+  @Input()
+  type: 'button' | 'submit' = 'button';
+
+  @Input() raised = false;
+  @Input() stroked = false;
+  @Input() full = false;
+  @Input()
+  color: ThemePalette | 'success' = 'primary';
+
+  @HostBinding( 'style.width' )
+  borderWidth = '';
+  @HostBinding( 'class' )
+  classAttr = '';
+
+  ngOnInit(): void {
+    if ( this.full ) {
+      this.borderWidth = '100%';
+    }
+  }
+
+  ngOnChanges( changes: SimpleChanges ): void {
+    const disabled = changes[ 'disabled' ]?.currentValue !== undefined ? changes[ 'disabled' ].currentValue : this.disabled;
+    const loading = changes[ 'loading' ]?.currentValue !== undefined ? changes[ 'loading' ].currentValue : this.loading;
+
+    if ( disabled || loading ) {
+      this.classAttr = 'pointer-events-none';
+    } else {
+      this.classAttr = '';
+    }
+  }
+}

package/src/lib/ecabs-buttons/ecabs-buttons.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ButtonsComponent} from './ecabs-buttons.component';
+import {MatIconModule} from '@angular/material/icon';
+import {EcabsLoadingModule} from '../ecabs-loading/ecabs-loading.module';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+
+@NgModule({
+  declarations: [ButtonsComponent],
+  imports: [CommonModule, MatButtonModule, EcabsLoadingModule, MatIconModule],
+  exports: [ButtonsComponent],
+})
+export class EcabsButtonsModule {
+}

package/src/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.html

@@ -0,0 +1,27 @@
+<app-element-wrapper [data]="getData()">
+  <ng-container [ngSwitch]="type">
+    <mat-checkbox
+      (change)="change($event)"
+      (click)="onClick($event)"
+      (blur)="onBlur()"
+      [checked]="checked"
+      [indeterminate]="indeterminate"
+      [disabled]="disabled"
+      [(ngModel)]="value"
+      [id]="name"
+      [labelPosition]="labelPosition"
+      *ngSwitchCase="'checkbox'"
+    >
+      {{ text }}
+    </mat-checkbox>
+
+    <mat-slide-toggle
+      (change)="change($event)"
+      [disabled]="disabled"
+      [(ngModel)]="value"
+      [labelPosition]="labelPosition"
+      *ngSwitchCase="'toggle'"
+      >{{ text }}</mat-slide-toggle
+    >
+  </ng-container>
+</app-element-wrapper>

package/src/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.scss

@@ -0,0 +1,15 @@
+@import "../../styles/styles";
+@import "./../../styles/scss/modules/form";
+
+:host::ng-deep {
+  .form-field {
+    display: flex;
+    margin: 0;
+  }
+
+  .form-field__label {
+    @include fontSize($font-size-sm);
+
+    margin-right: .96rem;
+  }
+}

package/src/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component.ts

@@ -0,0 +1,81 @@
+import { AfterViewInit, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
+import { ControlValueAccessor, UntypedFormControl, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import ElementBaseComponent from '../base/element-base';
+
+@Component( {
+  selector: 'ecabs-checkbox',
+  templateUrl: './ecabs-checkbox-toggle.component.html',
+  styleUrls: [ './ecabs-checkbox-toggle.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsCheckboxToggleComponent,
+      multi: true,
+    },
+  ],
+} )
+export class EcabsCheckboxToggleComponent
+  extends ElementBaseComponent
+  implements ControlValueAccessor, AfterViewInit {
+  @Input() override type: 'checkbox' | 'toggle' = 'checkbox';
+  @Input() text!: string;
+  @Input() labelPosition: 'before' | 'after' = 'after';
+  @Input() indeterminate!: boolean;
+  @Input() checked!: boolean;
+
+  @Output() click = new EventEmitter<any>();
+  @Output() changed = new EventEmitter<any>();
+
+  val!: boolean;
+
+  get value(): boolean {
+    return this.val;
+  }
+
+  set value( val ) {
+    if ( val !== undefined && this.val !== val ) {
+      this.val = val;
+    }
+  }
+
+  constructor( private readonly injector: Injector ) {
+    super();
+  }
+
+  onChange: any = () => { };
+  onTouch: any = () => { };
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null );
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+  }
+
+  change( event ): void {
+    this.onChange( this.value );
+    this.changed.emit( event );
+  }
+
+  onClick( $event ): void {
+    this.click.emit( $event );
+  }
+
+  onBlur(): void {
+    setTimeout( () => {
+      this.onTouch( this.value );
+    } );
+  }
+
+  writeValue( value: any ): void {
+    this.value = !!value;
+  }
+
+  registerOnChange( fn: any ): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched( fn: any ): void {
+    this.onTouch = fn;
+  }
+}

package/src/lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.module.ts

@@ -0,0 +1,21 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {ElementWrapperModule} from '../base/element-wrapper/element-wrapper.module';
+import {EcabsCheckboxToggleComponent} from './ecabs-checkbox-toggle.component';
+import {MatLegacySlideToggleModule as MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
+
+@NgModule({
+  declarations: [EcabsCheckboxToggleComponent],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatCheckboxModule,
+    MatSlideToggleModule,
+    FormsModule
+  ],
+  exports: [EcabsCheckboxToggleComponent],
+})
+export class EcabsCheckboxToggleModule {
+}

package/src/lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component.html

@@ -0,0 +1,4 @@
+<div class="select-date-label text-xl font-semibold">
+  {{ selectDateLabel }}
+</div>
+<ecabs-picker-header></ecabs-picker-header>

package/src/lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EcabsDatePickerHeaderComponent } from './ecabs-date-picker-header.component';
+
+describe( 'EcabsDatePickerHeaderComponent', () => {
+  let component: EcabsDatePickerHeaderComponent;
+  let fixture: ComponentFixture<EcabsDatePickerHeaderComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ EcabsDatePickerHeaderComponent ],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( EcabsDatePickerHeaderComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

package/src/lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component( {
+  selector: 'ecabs-date-picker-header',
+  templateUrl: './ecabs-date-picker-header.component.html',
+  styleUrls: [ './ecabs-date-picker-header.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+} )
+export class EcabsDatePickerHeaderComponent {
+  @Input() selectDateLabel = 'Select date';
+}

package/src/lib/ecabs-date-picker/ecabs-date-picker.component.html

@@ -0,0 +1,31 @@
+<app-element-wrapper [data]="getData()">
+  <div class="form-field__input--wrapper">
+    <input
+      class="form-field__input date-input"
+      [id]="name"
+      [(ngModel)]="value"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [matDatepicker]="picker"
+      [min]="minDate"
+      [max]="maxDate"
+      (blur)="onTouch()"
+    />
+    <mat-datepicker-toggle matSuffix [for]="picker">
+      <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
+    </mat-datepicker-toggle>
+    <mat-datepicker #picker [calendarHeaderComponent]="header" [touchUi]="touchUi">
+      <mat-datepicker-actions>
+        <div class="grid-picker-actions w-full">
+          <button type="button" mat-stroked-button class="w-full cancel-button" color="primary" matDatepickerCancel>
+            {{ cancleLabel }}
+          </button>
+
+          <button class="w-full ml-0 btn apply-button" mat-button color="primary" matDatepickerApply>
+            {{ applyLabel }}
+          </button>
+        </div>
+      </mat-datepicker-actions>
+    </mat-datepicker>
+  </div>
+</app-element-wrapper>

package/src/lib/ecabs-date-picker/ecabs-date-picker.component.scss

@@ -0,0 +1,23 @@
+@import './../../styles/material/overrides/datepicker';
+@import './../../styles/scss/modules/datepicker';
+
+.mat-datepicker-toggle {
+  margin-top: -0.75rem;
+}
+
+.date-input {
+  margin-right: -0.25rem;
+}
+
+:host ::ng-deep .mat-mdc-icon-button {
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+
+  .mat-icon{
+    margin-top: -0.25rem;
+  }
+}
+
+.cancel-button, .apply-button {
+  min-height: 2.625rem;
+}

package/src/lib/ecabs-date-picker/ecabs-date-picker.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EcabsDatePickerComponent } from './ecabs-date-picker.component';
+
+describe( 'EcabsDatePickerComponent', () => {
+  let component: EcabsDatePickerComponent;
+  let fixture: ComponentFixture<EcabsDatePickerComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ EcabsDatePickerComponent ],
+      imports: [],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( EcabsDatePickerComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );