ecabs-components 0.0.60 → 0.0.61

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

@@ -0,0 +1,330 @@
+import { Component, Input, HostBinding, HostListener, ElementRef, Injector, AfterViewInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, UntypedFormControl } from '@angular/forms';
+import { FormTimePickerService } from './ecabs-timepicker.service';
+import ElementBaseComponent from '../base/element-base';
+import { ListPlacement, ListPosition } from '../models/timepicker.models';
+
+@Component( {
+  selector: 'ecabs-timepicker',
+  templateUrl: './ecabs-timepicker.component.html',
+  styleUrls: [ 'ecabs-timepicker.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsTimepickerComponent,
+      multi: true,
+    },
+  ],
+} )
+export class EcabsTimepickerComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+  @Input() showCloseIcon = true;
+  @Input() @HostBinding( 'class.form-timepicker-focused' ) focusedFlag = false;
+  @Input() listPlacement: ListPlacement = 'auto';
+  @Input() appendTo!: string;
+  @Input() min!: string;
+  @Input() max!: string;
+  @Input() showDayStart = true;
+  @Input() showDayEnd = false;
+  @Input() addSecond = true;
+
+  position: ListPosition = {};
+  _data = '';
+  _timePicker;
+  _input!: any;
+  listPosition: ListPosition = {};
+  caretPositionStart!: any;
+  caretPositionEnd!: any;
+
+  get data(): any {
+    return this._data;
+  }
+
+  set data( value: any ) {
+    this._data = value;
+    if ( this._data.length === 5 ) {
+      if ( this._data === '23:59' ) {
+        this.onChangeFn( this._data + ( this.addSecond ? ':59' : '' ) );
+      } else {
+        this.onChangeFn( this._data + ( this.addSecond ? ':00' : '' ) );
+      }
+    } else if ( this._data === '' ) {
+      this.onChangeFn( this._data );
+    }
+  }
+
+  constructor(
+    private elementRef: ElementRef,
+    private timepickerService: FormTimePickerService,
+    private injector: Injector
+  ) {
+    super();
+    this.placeholder = '00:00';
+    this._timePicker = this.elementRef.nativeElement;
+    setTimeout( () => {
+      this._input = this._timePicker.querySelector( 'input' );
+    } );
+    if ( !this.iconClass ) {
+      this.iconClass = this.timepickerService.getConfig().iconClass;
+    }
+  }
+
+  @HostListener( 'document:mousedown', [ '$event' ] )
+  handleMousedown( $event: MouseEvent ): void {
+    const target = $event.target as HTMLElement;
+    if (
+      target.closest( '.form-time-list' ) ||
+      target.closest( '.timeInputWrapper' ) === this._timePicker.querySelector( '.timeInputWrapper' )
+    ) {
+      this._timePicker.querySelector( '.timeInputWrapper' ).focus();
+
+      return;
+    }
+    if ( this.focusedFlag ) {
+      this.close();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null ) as NgControl;
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+  }
+
+  clearInput(): void {
+    this.data = '';
+  }
+
+  calcListPosition(): void {
+    const position = this._timePicker.querySelector( '.timeInputFieldWrapper' ).getBoundingClientRect();
+    if ( this.appendTo ) {
+      this.listPosition = {
+        left: position.x,
+        top: position.top + position.height,
+        width: position.width,
+      };
+    } else {
+      this.listPosition = {
+        left: 0,
+        top: position.height,
+        width: position.width,
+      };
+    }
+  }
+
+  inputKeyDown( event: any ): boolean {
+    this.caretPositionStart = event.target.selectionStart;
+    this.caretPositionEnd = event.target.selectionEnd;
+    const key = event.key;
+    this.setCaretPosition( this._input );
+    switch ( this.checkSpecialKeys( key, this.caretPositionStart, this.caretPositionEnd ) ) {
+      case 'stop':
+        return false;
+
+      case 'tab':
+        this.close();
+
+        return false;
+
+      case 'arrow':
+        return false;
+    }
+
+    if ( this.checkUnUsedKeys( key ) ) {
+      return false;
+    }
+
+    const newData =
+      this.data.slice( 0, this.caretPositionStart ) + key + this.data.slice( this.caretPositionStart, this.data.length );
+
+    if ( this.checkOutOfRangeNumber( newData ) ) {
+      this.data = newData;
+      this.caretPositionStart++;
+    }
+
+    if (
+      this.caretPositionStart === this.data.length &&
+      ( this.data.length === 2 || ( this.data.length === 1 && parseInt( this.data ) > 2 ) )
+    ) {
+      this.makeHourFull();
+      this.data += ':';
+      this.caretPositionStart++;
+    }
+
+    return false;
+  }
+
+  checkSpecialKeys( key: any, selectionStart: any, selectionEnd: any ): 'stop' | 'continue' | 'tab' | 'arrow' {
+    if ( selectionStart !== selectionEnd && key !== 'ArrowLeft' && key !== 'ArrowRight' ) {
+      if ( !( this.data.slice( selectionStart, selectionEnd ).includes( ':' ) && selectionEnd !== this.data.length ) ) {
+        this.data = this.data.slice( 0, selectionStart ) + this.data.slice( selectionEnd, this.data.length );
+      }
+    }
+    if ( selectionStart === selectionEnd && key === 'Backspace' ) {
+      if ( this.data.length > 0 ) {
+        if (
+          this.data[ selectionStart - 1 ] !== ':' ||
+          ( this.data[ selectionStart - 1 ] === ':' && selectionStart === this.data.length )
+        ) {
+          this.data = this.data.slice( 0, selectionStart - 1 ) + this.data.slice( selectionEnd, this.data.length );
+          this.caretPositionStart--;
+        }
+      }
+
+      return 'stop';
+    }
+    if ( key === 'Tab' || key === ' ' || key === ':' ) {
+      if ( !this.data.includes( ':' ) && this.data.length > 0 ) {
+        this.makeHourFull();
+        this.data += ':';
+        this.caretPositionStart++;
+
+        return 'stop';
+      }
+      if ( key === 'Tab' ) {
+        return 'tab';
+      }
+
+      return 'stop';
+    }
+    if ( key === 'ArrowRight' ) {
+      if ( this.caretPositionStart < this.data.length ) {
+        this.caretPositionStart++;
+      }
+
+      return 'arrow';
+    }
+    if ( key === 'ArrowLeft' ) {
+      if ( this.caretPositionStart > 0 ) {
+        this.caretPositionStart--;
+      }
+
+      return 'arrow';
+    }
+    if ( key === 'ArrowDown' && !this.focusedFlag ) {
+      this.show();
+    }
+
+    return 'continue';
+  }
+
+  checkUnUsedKeys( key: string ): boolean {
+    const r = new RegExp( '[0-9]' );
+
+    return !r.test( key );
+  }
+
+  setCaretPosition( elem: any ): void {
+    setTimeout( () => {
+      if ( elem !== null ) {
+        if ( elem.createTextRange ) {
+          const range = elem.createTextRange();
+          range.move( 'character', this.caretPositionStart );
+          range.select();
+        } else {
+          if ( elem.selectionStart ) {
+            elem.focus();
+            elem.setSelectionRange( this.caretPositionStart, this.caretPositionStart );
+          } else {
+            elem.focus();
+          }
+        }
+      }
+    } );
+  }
+
+  checkOutOfRangeNumber( time: any ): boolean {
+    const hour = parseInt( time.split( ':' )[ 0 ], 10 );
+    let minute = -1;
+    if ( time.split( ':' ).length > 1 ) {
+      minute = parseInt( time.split( ':' )[ 1 ], 10 );
+    }
+    if ( hour < 24 && time.split( ':' )[ 0 ].length < 3 && minute < 60 ) {
+      if ( time.split( ':' ).length > 1 && time.split( ':' )[ 1 ].length > 2 ) {
+        return false;
+      }
+
+      return true;
+    }
+
+    return false;
+  }
+
+  makeHourFull(): void {
+    const hourPart = this.data.split( ':' )[ 0 ];
+    const minutePart = this.data.split( ':' ).length > 1 ? this.data.split( ':' )[ 1 ] : '';
+    if ( hourPart.length === 1 ) {
+      this.data = '0' + hourPart + ( minutePart ? ':' + minutePart : minutePart );
+      this.caretPositionStart++;
+    }
+  }
+
+  makeMinuteFull(): void {
+    const hourPart = this.data.split( ':' )[ 0 ];
+    const minutePart = this.data.split( ':' ).length > 1 ? this.data.split( ':' )[ 1 ] : '';
+    if ( minutePart.length === 0 ) {
+      this.data = hourPart + ':00';
+      this.caretPositionStart += 2;
+    }
+    if ( minutePart.length === 1 ) {
+      this.data = hourPart + ':' + minutePart + '0';
+      this.caretPositionStart++;
+    }
+  }
+
+  fixTimeToNearest(): void {
+    if ( this.data.length > 0 ) {
+      this.makeHourFull();
+      this.makeMinuteFull();
+    }
+  }
+
+  //eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, @typescript-eslint/no-empty-function
+  public onChangeFn = ( _: any ): void => { };
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  public onTouchedFn = (): void => { };
+
+  public registerOnChange( fn: any ): void {
+    this.onChangeFn = fn;
+  }
+
+  public registerOnTouched( fn: any ): void {
+    this.onTouchedFn = fn;
+  }
+
+  public setDisabledState( isDisabled: boolean ): void {
+    this.disabled = isDisabled;
+  }
+
+  public writeValue( obj: any ): void {
+    if ( obj ) {
+      obj = obj.toString();
+      let temp = '';
+      if ( obj.split( ':' ).length >= 2 ) {
+        temp = obj.split( ':' )[ 0 ] + ':' + obj.split( ':' )[ 1 ];
+      }
+      this._data = temp;
+    } else {
+      this._data = '';
+    }
+  }
+
+  public onChange(): void {
+    this.onChangeFn( this.data );
+  }
+
+  show(): void {
+    this.calcListPosition();
+    this.focusedFlag = true;
+  }
+
+  close( val = null ): void {
+    if ( val ) {
+      this.data = val;
+    } else {
+      this.fixTimeToNearest();
+    }
+    this.focusedFlag = false;
+    this.control?.markAsTouched();
+  }
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EcabsTimepickerComponent } from './ecabs-timepicker.component';
+import { EcabsTimeListPanelComponent } from './componets/ecabs-time-list-panel/ecabs-time-list-panel.component';
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+
+@NgModule( {
+  declarations: [ EcabsTimepickerComponent, EcabsTimeListPanelComponent ],
+  imports: [ CommonModule, ElementWrapperModule ],
+  exports: [ EcabsTimeListPanelComponent, EcabsTimepickerComponent ],
+} )
+export class EcabsTimepickerModule { }

package/lib/ecabs-timepicker/ecabs-timepicker.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { FormTimePickerConfig } from './config.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FormTimePickerService {
+  config: FormTimePickerConfig = {
+    dayEnd: 'Day End',
+    dayStart: 'Day Start',
+    iconClass: '',
+  };
+
+  public closeSub = new Subject<boolean>();
+
+  setConfig(c: FormTimePickerConfig): void {
+    this.config = Object.assign(this.config, c);
+  }
+
+  getConfig(): FormTimePickerConfig {
+    return this.config;
+  }
+
+  close(): void {
+    this.closeSub.next(true);
+  }
+}

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

@@ -0,0 +1,9 @@
+<div class="form-validations">
+  <div class="header font-medium">{{ title }}</div>
+  <ecabs-validations-messages
+    *ngFor="let validation of validations"
+    [showValidationOnNotTouched]="true"
+    [element]="form.controls[validation.controlName]"
+    [updatedErrors]="validation.errors"
+  ></ecabs-validations-messages>
+</div>

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

@@ -0,0 +1,23 @@
+@import "../../styles/scss/utilities/variables";
+:host ::ng-deep {
+  .form-validations {
+    background-color: var(--color-white);
+    box-shadow: $box-shadow-default;
+    border-radius: $border-radius-base * 2;
+    padding: 1.5rem;
+    line-height: 1.125rem;
+
+    .form-field__validation__item {
+      font-size: 1rem !important;
+      color: var(--color-black);
+    }
+  }
+
+  .form-field--invalid {
+    transform: translateY(0.825rem);
+  }
+
+  .header {
+    color: var(--color-error);
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { FormControlValidation } from '../models/validation.models';
+
+@Component( {
+  selector: 'ecabs-validation',
+  templateUrl: './ecabs-validation.component.html',
+  styleUrls: [ './ecabs-validation.component.scss' ],
+} )
+export class EcabsValidationComponent {
+  @Input() validations: FormControlValidation[];
+  @Input() form: UntypedFormGroup;
+  @Input() title: string;
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EcabsValidationComponent } from './ecabs-validation.component';
+import { EcabsValidationModule } from '../base/validation/validation.module';
+
+
+@NgModule( {
+  declarations: [ EcabsValidationComponent ],
+  imports: [ CommonModule, EcabsValidationModule ],
+  exports: [ EcabsValidationComponent ],
+} )
+export class EcabsValidationViewModule { }

package/lib/models/bread-crumb.ts

@@ -0,0 +1,5 @@
+export interface BreadCrumb {
+  title: string;
+  url?: string;
+  icon?: string;
+}

package/lib/models/timepicker.models.ts

@@ -0,0 +1,7 @@
+export type ListPlacement = 'bottom' | 'top' | 'auto';
+
+export interface ListPosition {
+  left?: number;
+  top?: number;
+  width?: number;
+}

package/lib/models/validation.models.ts

@@ -0,0 +1,4 @@
+export interface FormControlValidation {
+  controlName: string;
+  errors: { type: string; message: string }[];
+}

package/lib/services/ecabs-components.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EcabsComponentsService {
+  config: EcabsComponentsConfig = {
+    errorMessages: [
+      { type: 'required', message: '[label] is required' },
+      { type: 'minlength', message: '[label] should be atleast [requiredLength] character' },
+      { type: 'maxLength', message: '[label] should be maximum [requiredLength] character' },
+      { type: 'min', message: '[label] should be minmum [min]' },
+      { type: 'max', message: '[label] should be maximum [max]' },
+      { type: 'minValue', message: '[label] should be minmum [requiredMin]' },
+      { type: 'maxValue', message: '[label] should be maximum [requiredMax]' },
+    ],
+  };
+  constructor() {}
+  setConfig(c: EcabsComponentsConfig) {
+    this.config.errorMessages = c.errorMessages;
+  }
+  getConfig(): EcabsComponentsConfig {
+    return this.config;
+  }
+}
+
+export interface EcabsComponentsConfig {
+  errorMessages: ErrorMessage[];
+}
+export interface ErrorMessage {
+  type: string;
+  message: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "peerDependencies": {
     "@angular/common": "^14.2.0",
     "@angular/core": "^14.2.0",

package/public-api.ts

@@ -0,0 +1,58 @@
+export * from './lib/ecabs-loading/ecabs-loading.module';
+export * from './lib/ecabs-loading/ecabs-loading.component';
+export * from './lib/ecabs-loading/spinner/spinner.component';
+export * from './lib/ecabs-buttons/ecabs-buttons.component';
+export * from './lib/ecabs-buttons/ecabs-buttons.module';
+export * from './lib/ecabs-input/ecabs-input.component';
+export * from './lib/ecabs-input/ecabs-input.module';
+export * from './lib/ecabs-select/ecabs-select.module';
+export * from './lib/ecabs-select/ecabs-select.component';
+export * from './lib/ecabs-textarea/ecabs-textarea.component';
+export * from './lib/ecabs-textarea/ecabs-textarea.module';
+export * from './lib/services/ecabs-components.service';
+export * from './lib/base/validation/validation.component';
+export * from './lib/base/validation/validation.module';
+export * from './lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.component';
+export * from './lib/ecabs-checkbox-toggle/ecabs-checkbox-toggle.module';
+export * from './lib/ecabs-date-picker/ecabs-date-picker.component';
+export * from './lib/ecabs-date-picker/components/ecabs-date-picker-header/ecabs-date-picker-header.component';
+export * from './lib/ecabs-date-time-picker/ecabs-date-time-picker.module';
+export * from './lib/ecabs-date-time-picker/ecabs-date-time-picker.component';
+export * from './lib/ecabs-date-time-picker/components/ecabs-date-time-picker-header/ecabs-date-time-picker-header.component';
+export * from './lib/ecabs-date-picker/ecabs-date-picker.module';
+export * from './lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.module';
+export * from './lib/ecabs-date-time-range-picker/ecabs-date-time-range-picker.component';
+export * from './lib/ecabs-date-time-range-picker/components/ecabs-date-time-range-picker-header/ecabs-date-time-range-picker-header.component';
+export * from './lib/ecabs-date-time-range-picker/time-range.directive';
+export * from './lib/ecabs-increment/ecabs-increment.module';
+export * from './lib/ecabs-increment/ecabs-increment.component';
+export * from './lib/ecabs-phone/ecabs-phone.module';
+export * from './lib/ecabs-phone/ecabs-phone.component';
+export * from './lib/ecabs-radio-button-list/ecabs-radio-button-list.module';
+export * from './lib/ecabs-radio-button-list/ecabs-radio-button-list.component';
+export * from './lib/ecabs-timepicker/ecabs-timepicker.module';
+export * from './lib/ecabs-timepicker/ecabs-timepicker.component';
+export * from './lib/ecabs-timepicker/componets/ecabs-time-list-panel/ecabs-time-list-panel.component';
+export * from './lib/ecabs-timepicker/ecabs-timepicker.service';
+export * from './lib/ecabs-empty-placeholder/ecabs-empty-placeholder.module';
+export * from './lib/ecabs-empty-placeholder/ecabs-empty-placeholder.component';
+export * from './lib/ecabs-expansion-panel/ecabs-expansion-panel.module';
+export * from './lib/ecabs-expansion-panel/ecabs-expansion-panel.component';
+export * from './lib/ecabs-table/ecabs-table-filter-wrapper/ecabs-table-filter-wrapper.module';
+export * from './lib/ecabs-table/ecabs-table-filter-wrapper/ecabs-table-filter-wrapper.component';
+export * from './lib/ecabs-table/ecabs-table.module';
+export * from './lib/ecabs-table/ecabs-table.component';
+export * from './lib/ecabs-note/ecabs-note.module';
+export * from './lib/ecabs-note/ecabs-note.component';
+export * from './lib/ecabs-dialog-confirm/ecabs-dialog-confirm.module';
+export * from './lib/ecabs-dialog-confirm/ecabs-dialog-confirm.component';
+export * from './lib/ecabs-dialog-message/ecabs-dialog-message.module';
+export * from './lib/ecabs-dialog-message/ecabs-dialog-message.component';
+export * from './lib/ecabs-breadcrumb/ecabs-breadcrumb.module';
+export * from './lib/ecabs-breadcrumb/ecabs-breadcrumb.component';
+export * from './lib/ecabs-language-selector/ecabs-language-selector.module';
+export * from './lib/ecabs-language-selector/ecabs-language-selector.component';
+export * from './lib/ecabs-active-status-filter/ecabs-active-status-filter.module';
+export * from './lib/ecabs-active-status-filter/ecabs-active-status-filter.component';
+export * from './lib/ecabs-validation/ecabs-validation.module';
+export * from './lib/ecabs-validation/ecabs-validation.component';

package/styles/material/overrides/_form.scss

@@ -45,3 +45,8 @@
     margin-top: 0;
   }
 }
+
+
+label {
+  @extend .form-field__label;
+}

package/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);