ecabs-components 0.0.59 → 0.0.61

package/lib/base/consts/date-mask.consts.ts

@@ -0,0 +1,70 @@
+const maxValueMonth = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+const formatOrder = ['yyyy', 'yy', 'mm', 'dd', 'HH', 'MM', 'SS'];
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createAutoCorrectedDatePipe(dateFormat = 'dd mm yyyy', { minYear = 1, maxYear = 9999 } = {}) {
+  const dateFormatArray = dateFormat
+    .split(/[^dmyHMS]+/)
+    .sort((a, b) => formatOrder.indexOf(a) - formatOrder.indexOf(b));
+
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  return function (conformedValue) {
+    const indexesOfPipedChars = [];
+    const maxValue = { dd: 31, mm: 12, yy: 99, yyyy: maxYear, HH: 23, MM: 59, SS: 59 };
+    const minValue = { dd: 1, mm: 1, yy: 0, yyyy: minYear, HH: 0, MM: 0, SS: 0 };
+    const conformedValueArr = conformedValue.split('');
+
+    // Check first digit
+    dateFormatArray.forEach((format) => {
+      const position = dateFormat.indexOf(format);
+      const maxFirstDigit = parseInt(maxValue[format].toString().substr(0, 1), 10);
+
+      if (parseInt(conformedValueArr[position], 10) > maxFirstDigit) {
+        conformedValueArr[position + 1] = conformedValueArr[position];
+        conformedValueArr[position] = 0;
+        indexesOfPipedChars.push(position);
+      }
+    });
+
+    // Check for invalid date
+    let month = 0;
+    const isInvalid = dateFormatArray.some((format) => {
+      const position = dateFormat.indexOf(format);
+      const length = format.length;
+      const textValue = conformedValue.substr(position, length).replace(/\D/g, '');
+      const value = parseInt(textValue, 10);
+
+      if (format === 'mm') {
+        // tslint:disable-next-line: strict-boolean-expressions
+        month = value || 0;
+      }
+
+      const maxValueForFormat = format === 'dd' ? maxValueMonth[month] : maxValue[format];
+
+      if (format === 'yyyy' && (minYear !== 1 || maxYear !== 9999)) {
+        const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
+        const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
+
+        return value < scopedMinValue || value > scopedMaxValue;
+      }
+
+      if (format === 'HH' || format === 'MM') {
+        const scopedMaxValue = parseInt(maxValue[format].toString().substring(0, textValue.length), 10);
+        const scopedMinValue = parseInt(minValue[format].toString().substring(0, textValue.length), 10);
+
+        return value < scopedMinValue || value > scopedMaxValue;
+      }
+
+      return value > maxValueForFormat || (textValue.length === length && value < minValue[format]);
+    });
+
+    if (isInvalid) {
+      return false;
+    }
+
+    return {
+      value: conformedValueArr.join(''),
+      indexesOfPipedChars,
+    };
+  };
+}

package/lib/base/directives/date-mask.directive.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MaskDateDirective } from './date-mask.directive';
+import { NumberBorderDirective } from './number-border.directive';
+
+@NgModule( {
+  imports: [ CommonModule ],
+  declarations: [
+    MaskDateDirective,
+  ],
+  exports: [
+    MaskDateDirective,
+  ],
+} )
+export class MaskDateDirectiveModule { }

package/lib/base/directives/date-mask.directive.ts

@@ -0,0 +1,58 @@
+import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import * as textMask from 'vanilla-text-mask/dist/vanillaTextMask';
+import { createAutoCorrectedDatePipe } from '../consts/date-mask.consts';
+
+@Directive({
+  selector: '[appMaskDate]',
+})
+export class MaskDateDirective implements OnInit, OnDestroy {
+  @Input() isDateTimeMask = false;
+  @Input() considerSeconds = false;
+
+  maskedInputController;
+  mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
+  maskDateTime = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ',', ' ', /\d/, /\d/, ':', /\d/, /\d/]; // dd/mm/yyyy, hh:mm
+  maskDateTimeWithSeconds = [
+    /\d/,
+    /\d/,
+    '/',
+    /\d/,
+    /\d/,
+    '/',
+    /\d/,
+    /\d/,
+    /\d/,
+    /\d/,
+    ',',
+    ' ',
+    /\d/,
+    /\d/,
+    ':',
+    /\d/,
+    /\d/,
+    ':',
+    /\d/,
+    /\d/,
+  ]; // dd/mm/yyyy, hh:mm:ss
+
+  constructor(private readonly element: ElementRef) {}
+
+  ngOnInit(): void {
+    this.maskedInputController = textMask.maskInput({
+      inputElement: this.element.nativeElement,
+      guide: true,
+      showMask: false,
+      pipe: this.isDateTimeMask
+        ? this.considerSeconds
+          ? createAutoCorrectedDatePipe('dd/mm/yyyy, HH:MM:SS')
+          : createAutoCorrectedDatePipe('dd/mm/yyyy, HH:MM')
+        : createAutoCorrectedDatePipe('dd/mm/yyyy'),
+      keepCharPositions: true,
+      mask: this.isDateTimeMask ? (this.considerSeconds ? this.maskDateTimeWithSeconds : this.maskDateTime) : this.mask,
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.maskedInputController.destroy();
+  }
+}

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { DigitsOnlyDirective } from './digits-only.directive';
+
+@NgModule( {
+  imports: [ CommonModule ],
+  declarations: [
+    DigitsOnlyDirective,
+  ],
+  exports: [
+    DigitsOnlyDirective,
+  ],
+} )
+export class DigitsOnlyDirectivesModule { }

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

@@ -0,0 +1,129 @@
+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/directives/number-border.directive.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { NumberBorderDirective } from './number-border.directive';
+
+@NgModule( {
+  imports: [ CommonModule ],
+  declarations: [
+    NumberBorderDirective,
+  ],
+  exports: [
+    NumberBorderDirective,
+  ],
+} )
+export class NumberBorderDirectiveModule { }

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

@@ -0,0 +1,57 @@
+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/lib/base/element-base.ts

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

@@ -0,0 +1,30 @@
+<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>
+
+  <ecabs-validations-messages
+    *ngIf="data?.showValidation && !data?.hideValidationMessage"
+    [element]="data?.control"
+    [label]="data?.label ? data?.label : data?.placeholder ? data.placeholder : data?.validationLabel"
+    [showValidationOnNotTouched]="data?.showValidationOnNotTouched"
+  >
+  </ecabs-validations-messages>
+</div>

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

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

@@ -0,0 +1,30 @@
+
+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 { EcabsValidationModule } 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,
+    EcabsValidationModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatTooltipModule,
+    HintModule,
+  ],
+  exports: [ ElementWrapperComponent ],
+} )
+export class ElementWrapperModule { }

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

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

package/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/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 { 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

@@ -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/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: 'ecabs-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/lib/base/validation/validation.module.ts

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