ecabs-components 1.0.17 → 1.0.19

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

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

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

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

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

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

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

package/src/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/src/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/src/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/src/lib/models/bread-crumb.ts

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

package/{lib/models/timepicker.models.d.ts → src/lib/models/timepicker.models.ts}

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

package/src/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/{styles → src/styles}/material/_theme.scss

@@ -5,6 +5,7 @@
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
 @include mat.core();
+@include mat.legacy-core();
 // Plus imports for other components in your app.
 @import '../scss/utilities/index';
 @import './overrides/index';
@@ -60,6 +61,7 @@ $cuorium-theme: mat.define-light-theme((
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
  @include mat.all-component-themes($cuorium-theme);
+ @include mat.all-legacy-component-themes($cuorium-theme);
 
 .mat-body p,
 .mat-body-1 p,

package/src/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);

package/tailwind.config.js

@@ -0,0 +1,31 @@
+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: [],
+};