ecabs-components 1.0.19 → 1.0.21

package/src/lib/base/directives/number-border.directive.ts

@@ -1,57 +0,0 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-
-@Directive({
-  selector: '[appNumberBorder]',
-})
-export class NumberBorderDirective {
-  @Input() maxValue: number;
-  @Input() minValue: number;
-
-  inputElement: HTMLInputElement;
-
-  constructor(public el: ElementRef) {
-    this.inputElement = el.nativeElement;
-  }
-
-  @HostListener('keyup', ['$event'])
-  onKeyUp(e): void {
-    const value = +e.target.value;
-
-    if (isNaN(value)) {
-      this.inputElement.value = this.sanitizeInput(e.target.value);
-
-      return;
-    }
-
-    if (this.maxValue) {
-      if (value > this.maxValue) {
-        this.inputElement.value = this.sanitizeInput(this.maxValue.toString());
-
-        return;
-      }
-    }
-
-    if (this.minValue && this.minValue !== value) {
-      if (value < this.minValue) {
-        this.inputElement.value = this.sanitizeInput(this.minValue.toString());
-
-        return;
-      }
-    }
-  }
-
-  private sanitizeInput(input: string): string {
-    let result = '';
-    const regex = new RegExp(`/\d+/g`);
-    result = input.replace(regex, '');
-
-    const maxLength = this.inputElement.maxLength;
-
-    if (maxLength > 0) {
-      const allowedLength = maxLength - this.inputElement.value.length;
-      result = allowedLength > 0 ? result.substring(0, allowedLength) : '';
-    }
-
-    return result;
-  }
-}

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

@@ -1,72 +0,0 @@
-import { Input, Output, EventEmitter, Component } from '@angular/core';
-import { AbstractControl, UntypedFormControl } from '@angular/forms';
-
-@Component({
-  template: '',
-})
-export default class ElementBaseComponent {
-  @Input() type!:string;
-  @Input() name!:string;
-  @Input() label!:string;
-  @Input() placeholder = '';
-  @Input() validationLabel!:string;
-  @Input() disabled = false;
-  @Input() showValidation = true;
-  @Input() showValidationOnNotTouched = false;
-  @Input() hideValidationMessage = false;
-  @Input() iconClass = '';
-  @Input() loading = false;
-  @Input() showHint: boolean = false;
-  @Input() maxLength!: number;
-  @Input() tooltip!: string;
-  @Input() showAsterisk: boolean = true;
-
-  @Output() focused = new EventEmitter<any>();
-  @Output() focusOuted = new EventEmitter<any>();
-
-  control!: UntypedFormControl;
-  required: boolean = false;
-
-  getData(): any {
-    return {
-      type: this.type || 'text',
-      label: this.label,
-      placeholder: this.placeholder,
-      validationLabel: this.validationLabel,
-      disabled: this.disabled,
-      showValidation: this.showValidation,
-      showValidationOnNotTouched: this.showValidationOnNotTouched,
-      hideValidationMessage: this.hideValidationMessage,
-      iconClass: this.iconClass,
-      control: this.control,
-      loading: this.loading,
-      showHint: this.showHint,
-      maxLength: this.maxLength,
-      tooltip: this.tooltip,
-      name: this.name,
-      required: this.isRequired(this.control),
-      showAsterisk: this.showAsterisk,
-    };
-  }
-
-  private isRequired = (ctrl: any): boolean => {
-    if (ctrl?.validator) {
-      const validator = ctrl.validator({} as AbstractControl);
-      if (validator && validator['required']) {
-        return true;
-      }
-    }
-
-    if (ctrl?.['controls']) {
-      for (const name in ctrl['controls']) {
-        if (ctrl['controls'][name]) {
-          if (this.isRequired(ctrl['controls'][name])) {
-            return true;
-          }
-        }
-      }
-    }
-
-    return false;
-  };
-}

package/src/lib/base/element-wrapper/element-wrapper.component.html

@@ -1,30 +0,0 @@
-<div
-  class="form-field"
-  [ngClass]="{
-    'form-field--invalid':
-      data?.showValidation && (data?.control?.touched || data?.showValidationOnNotTouched) && data?.control?.invalid,
-    disabled: data?.disabled,
-    'form-field--required': data?.required && data?.showAsterisk
-  }"
->
-  <div>
-    <label class="form-field__label" [attr.for]="data?.name" *ngIf="data?.label">
-      <span [innerHTML]="data?.label"></span>
-      <mat-icon class="icon" *ngIf="data?.tooltip" [matTooltip]="data?.tooltip">error_outline</mat-icon>
-    </label>
-  </div>
-
-  <ng-content></ng-content>
-
-  <ecabs-loading-spinner class="spinner" size="tiny" *ngIf="data.loading"></ecabs-loading-spinner>
-
-  <app-hint [element]="data?.control" [showHint]="data?.showHint" [maxValue]="data?.maxLength"></app-hint>
-
-  <app-validations-messages
-    *ngIf="data?.showValidation && !data?.hideValidationMessage"
-    [element]="data?.control"
-    [label]="data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel"
-    [showValidationOnNotTouched]="data?.showValidationOnNotTouched"
-  >
-  </app-validations-messages>
-</div>

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

@@ -1,33 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'app-element-wrapper',
-  templateUrl: './element-wrapper.component.html',
-})
-export class ElementWrapperComponent {
-  @Input() data!:any;
-  @Input() showCloseIcon!:boolean;
-  @Input() focusedFlag!:any;
-  @Input() showPassword!:boolean;
-  @Input() control!:any;
-  @Output() showHidePassword = new EventEmitter<any>();
-  @Output() clear = new EventEmitter<any>();
-  @Output() increase = new EventEmitter<any>();
-  @Output() decrease = new EventEmitter<any>();
-
-  showHidePasswordFn(event:any): void {
-    this.showHidePassword.emit(event);
-  }
-
-  clearFn(): void {
-    this.clear.emit();
-  }
-
-  increaseFn(): void {
-    this.increase.emit();
-  }
-
-  decreaseFn(): void {
-    this.decrease.emit();
-  }
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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