ecabs-components 0.0.1 → 0.0.3

package/styles/scss/modules/_phone.scss

@@ -1,4 +1,6 @@
-.phone-input {
+.ecabs-phone {
+  @include fontSize($font-size-lg);
+
   .ngx-mat-tel-input-container {
     position: relative;
     border-radius: $border-radius-base;

package/styles/scss/modules/_select.scss

@@ -1,6 +1,10 @@
+@import './../utilities/index';
+
 $border-radius: 0.25rem;
 
 .select {
+  @include fontSize($font-size-lg);
+
   border-radius: $border-radius;
   border: 1px solid var(--color-gray-500);
   padding: calc-rem(8) calc-rem(16);
@@ -19,3 +23,15 @@ $border-radius: 0.25rem;
     color: var(--color-black);
   }
 }
+
+.mat-select-placeholder {
+  color: rgba(0, 0, 0, 0.42) !important;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.42) !important;
+  font-size: 18px !important;
+  line-height: 1.5rem !important;
+  font-family: $font-family-primary;
+}
+
+.mat-form-field-label{
+  display: none !important;
+}

package/lib/base/directives/digits-only.directive.ts

@@ -1,129 +0,0 @@
-import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
-
-@Directive({
-  selector: '[appDigitsOnly]',
-})
-export class DigitsOnlyDirective implements OnInit {
-  @Input()
-  digitsOnly = false;
-
-  @Input()
-  allowHyphen = false;
-
-  @Input() decimal? = false;
-  @Input() decimalSeparator? = '.';
-  @Input() unit? = 0;
-
-  inputElement: HTMLInputElement;
-  minus = '-';
-  minusCounter = 0;
-  regex!: RegExp;
-
-  private decimalCounter = 0;
-  private readonly navigationKeys = [
-    'Backspace',
-    'Delete',
-    'Tab',
-    'Escape',
-    'Enter',
-    'Home',
-    'End',
-    'ArrowLeft',
-    'ArrowRight',
-    'Clear',
-    'Copy',
-    'Paste',
-  ];
-
-  constructor(public el: ElementRef) {
-    this.inputElement = el.nativeElement;
-  }
-
-  @HostListener('keydown', ['$event'])
-  onKeyDown(e: KeyboardEvent): void {
-    if (this.digitsOnly) {
-      if (
-        this.navigationKeys.indexOf(e.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
-        (e.key === 'a' && e.ctrlKey) || // Allow: Ctrl+A
-        (e.key === 'c' && e.ctrlKey) || // Allow: Ctrl+C
-        (e.key === 'v' && e.ctrlKey) || // Allow: Ctrl+V
-        (e.key === 'x' && e.ctrlKey) || // Allow: Ctrl+X
-        (e.key === 'a' && e.metaKey) || // Allow: Cmd+A (Mac)
-        (e.key === 'c' && e.metaKey) || // Allow: Cmd+C (Mac)
-        (e.key === 'v' && e.metaKey) || // Allow: Cmd+V (Mac)
-        (e.key === 'x' && e.metaKey) || // Allow: Cmd+X (Mac)
-        (this.decimal && e.key === this.decimalSeparator && this.decimalCounter < 1) || // Allow: only one decimal point
-        (this.decimal && e.key === this.minus && this.minusCounter < 1) // Allow: only one minus
-      ) {
-        return;
-      }
-
-      // Ensure that it is a number and stop the keypress
-      if (e.key === ' ' || !this.regex.test(e.key)) {
-        e.preventDefault();
-      }
-    }
-  }
-
-  @HostListener('keyup', ['$event'])
-  onKeyUp(): void {
-    if (this.digitsOnly) {
-      if (!this.decimal) {
-        return;
-      }
-
-      this.decimalCounter = this.el.nativeElement.value.split(this.decimalSeparator).length - 1;
-      this.minusCounter = this.el.nativeElement.value.split(this.minus).length - 1;
-
-      if (isNaN(+this.inputElement.value)) {
-        this.inputElement.value = this.sanitizeInput(this.inputElement.value);
-      }
-    }
-  }
-
-  @HostListener('paste', ['$event'])
-  onPaste(event: ClipboardEvent): void {
-    if (this.digitsOnly) {
-      const pastedInput = event.clipboardData?.getData('text/plain') as string;
-      this.pasteData(pastedInput);
-      event.preventDefault();
-    }
-  }
-
-  ngOnInit(): void {
-    this.regex = new RegExp(this.allowHyphen ? '^[\\d -]+$' : '\\d');
-  }
-
-  private pasteData(pastedContent: string): void {
-    const sanitizedContent = isNaN(+pastedContent) ? this.sanitizeInput(pastedContent) : pastedContent;
-    const pasted = document.execCommand('insertText', false, sanitizedContent);
-    if (!pasted) {
-      const { selectionStart: start, selectionEnd: end } = this.inputElement;
-      this.inputElement.setRangeText(sanitizedContent, start as number, end as number, 'end');
-    }
-  }
-
-  private sanitizeInput(input: string): string {
-    let result = '';
-    if (this.decimal && this.isValidDecimal(input)) {
-      const regex = new RegExp(`^[\d -${this.decimalSeparator}]+$`, 'g');
-      result = input.replace(regex, '');
-    } else {
-      result = input.replace(`/${this.regex}/g`, '');
-    }
-
-    const maxLength = this.inputElement.maxLength;
-
-    if (maxLength > 0) {
-      // the input element has maxLength limit
-      const allowedLength = maxLength - this.inputElement.value.length;
-      result = allowedLength > 0 ? result.substring(0, allowedLength) : '';
-    }
-
-    return result;
-  }
-
-  private isValidDecimal(inputString: string): boolean {
-    return inputString.split(this.decimalSeparator as string).length <= 2;
-  }
-}

package/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/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/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/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 { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-
-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 { MatTooltipModule } from '@angular/material/tooltip';
-import { EcabsLoadingModule } from '../../ecabs-loading/ecabs-loading.module';
-
-@NgModule({
-  declarations: [ElementWrapperComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    EcabsLoadingModule,
-    ValidationModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatIconModule,
-    MatTooltipModule,
-    HintModule,
-  ],
-  exports: [ElementWrapperComponent],
-})
-export class ElementWrapperModule {}

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

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

package/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/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 { MatFormFieldModule } from '@angular/material/form-field';
-
-import { HintComponent } from './hint.component';
-
-@NgModule({
-  declarations: [HintComponent],
-  imports: [CommonModule, FormsModule, MatFormFieldModule],
-  exports: [HintComponent],
-})
-export class HintModule {}

package/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/lib/base/validation/validation.component.ts

@@ -1,171 +0,0 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
-
-@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 }[];
-  errorMessages: any[]=[];
-
-  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() {
-    // this.errorMessages = [
-    //   {
-    //     type: 'required',
-    //     message: this.translateService.instant(
-    //       'FORMS.VALIDATION.LABEL_REQUIRED'
-    //     ),
-    //   },
-    //   {
-    //     type: 'minlength',
-    //     message: this.translateService.instant('FORMS.VALIDATION.MIN_LENGTH'),
-    //   },
-    //   {
-    //     type: 'maxlength',
-    //     message: this.translateService.instant('FORMS.VALIDATION.MAX_LENGTH'),
-    //   },
-    //   {
-    //     type: 'min',
-    //     message: this.translateService.instant('FORMS.VALIDATION.MIN'),
-    //   },
-    //   {
-    //     type: 'max',
-    //     message: this.translateService.instant('FORMS.VALIDATION.MAX'),
-    //   },
-    //   {
-    //     type: 'minValue',
-    //     message: this.translateService.instant('FORMS.VALIDATION.MIN_VALUE'),
-    //   },
-    //   {
-    //     type: 'maxValue',
-    //     message: this.translateService.instant('FORMS.VALIDATION.MAX_VALUE'),
-    //   },
-    //   {
-    //     type: 'validatePhoneNumber',
-    //     message: this.translateService.instant(
-    //       'FORMS.VALIDATION.VALIDATE_PHONE_NUMBER'
-    //     ),
-    //   },
-    //   {
-    //     type: 'pastDate',
-    //     message: this.translateService.instant('FORMS.VALIDATION.PAST_DATE'),
-    //   },
-    //   {
-    //     type: 'affectsError',
-    //     message: this.translateService.instant(
-    //       'FORMS.VALIDATION.AFFECTS_ERROR'
-    //     ),
-    //   },
-    //   {
-    //     type: 'moreThan',
-    //     message: this.translateService.instant('FORMS.VALIDATION.MORE_THAN'),
-    //   },
-    //   {
-    //     type: 'lessThan',
-    //     message: this.translateService.instant('FORMS.VALIDATION.LESS_THAN'),
-    //   },
-    //   {
-    //     type: 'iban',
-    //     message: this.translateService.instant('FORMS.VALIDATION.INVALID'),
-    //   },
-    //   {
-    //     type: 'email',
-    //     message: this.translateService.instant('FORMS.VALIDATION.EMAIL'),
-    //   },
-    //   {
-    //     type: 'numberMoreThan',
-    //     message: this.translateService.instant(
-    //       'FORMS.VALIDATION.VALUE_MORE_THAN'
-    //     ),
-    //   },
-    //   {
-    //     type: 'numberLessThan',
-    //     message: this.translateService.instant(
-    //       'FORMS.VALIDATION.VALUE_LESS_THAN'
-    //     ),
-    //   },
-    //   {
-    //     type: 'outOfRange',
-    //     message: this.translateService.instant('FORMS.VALIDATION.OUT_OF_RANGE'),
-    //   },
-    //   {
-    //     type: 'iban',
-    //     message: this.translateService.instant('FORMS.VALIDATION.IBAN'),
-    //   },
-    //   {
-    //     type: 'timeIsAfter',
-    //     message: this.translateService.instant(
-    //       'FORMS.VALIDATION.LESS_THAN_TIME'
-    //     ),
-    //   },
-    // ];
-  }
-
-  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;
-      }
-    }
-  }
-
-  ngOnInit(): void {
-    for (const error of this.errorMessages) {
-      this.messages[error.type] = this.replaceTokens(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/lib/base/validation/validation.module.ts

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

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

@@ -1,18 +0,0 @@
-<button
-  mat-button
-  [ngClass]="{
-    '!w-full': full,
-    'mat-stroked-button': stroked,
-    'mat-raised-button': 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/lib/ecabs-buttons/ecabs-buttons.component.ts

@@ -1,54 +0,0 @@
-import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
-
-@Component({
-  selector: 'ecabs-buttons',
-  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/lib/ecabs-buttons/ecabs-buttons.module.ts

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

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

@@ -1,26 +0,0 @@
-<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"
-      [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>