ecabs-components 1.0.19 → 1.0.21

package/src/lib/ecabs-timepicker/componets/ecabs-time-list-panel/ecabs-time-list-panel.component.html

@@ -1,16 +0,0 @@
-<div class="list">
-  <div class="inner-scroll">
-    <div class="inner">
-      <ul>
-        <li
-          *ngFor="let i of timeList; let counter = index"
-          (click)="setTime(i.value)"
-          (mouseenter)="hoveredItemIndex = counter"
-          [ngClass]="{ active: typedValue === i.value, hovered: counter === hoveredItemIndex }"
-        >
-          {{ i.title }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>

package/src/lib/ecabs-timepicker/componets/ecabs-time-list-panel/ecabs-time-list-panel.component.ts

@@ -1,126 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter, HostListener, ElementRef, OnChanges } from '@angular/core';
-import { ListPlacement, ListPosition } from '../../../models/timepicker.models';
-import { FormTimePickerService } from '../../ecabs-timepicker.service';
-@Component( {
-  selector: 'ecabs-time-list-panel',
-  templateUrl: './ecabs-time-list-panel.component.html',
-} )
-export class EcabsTimeListPanelComponent implements OnInit, OnChanges {
-  @Input() typedValue: any;
-  @Input() listPlacement: ListPlacement = 'auto';
-  @Input() listPosition: ListPosition = {};
-
-  @Input() appendTo!: string;
-  @Input() min!: string;
-  @Input() max!: string;
-  @Input() showDayStart = true;
-  @Input() showDayEnd = false;
-  @Input() position: ListPosition = {};
-
-  @Output() onscroll = new EventEmitter<{ start: number; end: number }>();
-  @Output() closeMe = new EventEmitter<any>();
-
-  hoveredItemIndex = 0;
-  timeList: { value: any; title: string }[] = [];
-
-  private listItemHeight!: any;
-
-  constructor( private elementRef: ElementRef, private timepickerService: FormTimePickerService ) { }
-
-  @HostListener( 'document:keydown', [ '$event' ] )
-  handleKeydown( $event: KeyboardEvent ): void {
-    if ( $event.key === 'ArrowUp' ) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      this.hoveredItemIndex ? this.hoveredItemIndex-- : null;
-      this.scrollTo( this.hoveredItemIndex );
-    }
-    if ( $event.key === 'ArrowDown' ) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      this.hoveredItemIndex + 1 < this.timeList.length ? this.hoveredItemIndex++ : null;
-      this.scrollTo( this.hoveredItemIndex );
-    }
-    if ( $event.key === 'Enter' ) {
-      this.setTime( this.timeList[ this.hoveredItemIndex ].value );
-    }
-  }
-
-  ngOnInit(): void {
-    this.calcListItems();
-    if ( this.appendTo ) {
-      this.appendListTo();
-    }
-
-    setTimeout( () => {
-      this.listItemHeight = this.elementRef.nativeElement.querySelector( 'li' ).getBoundingClientRect().height;
-      this.selectTypedValue( this.typedValue );
-    } );
-  }
-
-  appendListTo(): void {
-    const parent = document.querySelector( this.appendTo );
-    if ( !parent ) {
-      throw new Error( `appendTo selector ${ this.appendTo } did not found any parent element` );
-    }
-    parent.appendChild( this.elementRef.nativeElement );
-  }
-
-  calcListItems(): void {
-    if ( this.showDayStart ) {
-      this.timeList.push( {
-        value: '00:00',
-        title: this.timepickerService.getConfig().dayStart,
-      } );
-    }
-    for ( let index = 0; index < 24; index++ ) {
-      for ( const minute of [ '00', '30' ] ) {
-        if ( index === 0 && minute === '00' ) {
-          continue;
-        }
-        this.timeList.push( {
-          value: ( index > 9 ? index + '' : '0' + index ) + ':' + minute,
-          title: ( index > 9 ? index + '' : '0' + index ) + ':' + minute,
-        } );
-      }
-    }
-    if ( this.showDayEnd ) {
-      this.timeList.push( {
-        value: '23:59',
-        title: this.timepickerService.getConfig().dayEnd,
-      } );
-    }
-  }
-
-  ngOnChanges(): void {
-    this.selectTypedValue( this.typedValue );
-    if ( this.elementRef.nativeElement ) {
-      this.elementRef.nativeElement.style.top = this.listPosition.top + 'px';
-      this.elementRef.nativeElement.style.left = this.listPosition.left + 'px';
-      this.elementRef.nativeElement.style.width = this.listPosition.width + 'px';
-      if ( this.appendTo ) {
-        this.elementRef.nativeElement.style.position = 'fixed';
-      }
-    }
-  }
-
-  selectTypedValue( value: any ): void {
-    if ( value ) {
-      const hour = parseInt( value.split( ':' )[ 0 ], 10 );
-      if ( hour || hour === 0 ) {
-        this.hoveredItemIndex = hour * 2;
-        this.scrollTo( this.hoveredItemIndex );
-      }
-    }
-  }
-
-  scrollTo( index: number ): void {
-    this.elementRef.nativeElement.querySelector( '.inner-scroll' ).scrollTop = index * this.listItemHeight;
-  }
-
-  close(): void {
-    this.closeMe.emit( null );
-  }
-
-  setTime( value: any ): void {
-    this.closeMe.emit( value );
-  }
-}

package/src/lib/ecabs-timepicker/config.model.ts

@@ -1,5 +0,0 @@
-export interface FormTimePickerConfig {
-  dayStart: string;
-  dayEnd: string;
-  iconClass: string;
-}

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

@@ -1,36 +0,0 @@
-<div class="timeInputWrapper" [ngClass]="{ disabled: disabled }">
-  <app-element-wrapper
-    [data]="getData()"
-    [showCloseIcon]="showCloseIcon"
-    [focusedFlag]="focusedFlag"
-    (clear)="clearInput()"
-  >
-    <div class="timeInputFieldWrapper">
-      <input
-        type="text"
-        class="form-field__input"
-        [value]="data"
-        [disabled]="disabled"
-        (focus)="show()"
-        (click)="show()"
-        (keydown)="inputKeyDown($event)"
-        [placeholder]="placeholder"
-      />
-      <div class="form-field__input--suffix" *ngIf="type !== 'number'">
-        <ng-content select="mat-icon"></ng-content>
-      </div>
-      <ecabs-time-list-panel
-        [typedValue]="data"
-        *ngIf="focusedFlag"
-        [showDayStart]="showDayStart"
-        [showDayEnd]="showDayEnd"
-        [min]="min"
-        [max]="max"
-        class="form-time-list"
-        [appendTo]="appendTo"
-        [listPosition]="listPosition"
-        (closeMe)="close($event)"
-      ></ecabs-time-list-panel>
-    </div>
-  </app-element-wrapper>
-</div>

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

@@ -1,5 +0,0 @@
-:host::ng-deep {
-  .timeInputWrapper app-element-wrapper .form-field {
-    margin-bottom: 0;
-  }
-}

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

@@ -1,330 +0,0 @@
-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/src/lib/ecabs-timepicker/ecabs-timepicker.module.ts

@@ -1,12 +0,0 @@
-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/src/lib/ecabs-timepicker/ecabs-timepicker.service.ts

@@ -1,28 +0,0 @@
-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/src/lib/models/bread-crumb.ts

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

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

@@ -1,33 +0,0 @@
-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/src/styles/material/overrides/_icon.scss

@@ -1,3 +0,0 @@
-mat-icon {
-  @extend .icon;
-}

package/src/test.ts

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

package/tailwind.config.js

@@ -1,31 +0,0 @@
-module.exports = {
-  content: ['./src/**/*.{html,ts}'],
-  theme: {
-    extend: {
-      colors: {
-        black: 'var(--color-black)',
-        gray: {
-          100: 'var(--color-gray-100)',
-          200: 'var(--color-gray-200)',
-          300: 'var(--color-gray-300)',
-          400: 'var(--color-gray-400)',
-          500: 'var(--color-gray-500)',
-        },
-        brand: {
-          dark: 'var(--color-brand-dark)',
-          light: 'var(--color-brand-light)',
-          300: 'var(--color-brand-300)',
-        },
-        accent: {
-          error: 'var(--color-error)',
-          notification: 'var(--color-notification)',
-          success: 'var(--color-success)',
-        },
-      },
-      lineHeight: {
-        0: '0',
-      },
-    },
-  },
-  plugins: [],
-};

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}