ecabs-components 0.0.59 → 0.0.61

package/lib/ecabs-table/ecabs-table-filter-wrapper/ecabs-table-filter-wrapper.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EcabsTableFilterWrapperComponent } from './ecabs-table-filter-wrapper.component';
+import { EcabsExpansionPanelModule } from '../../ecabs-expansion-panel/ecabs-expansion-panel.module';
+
+@NgModule( {
+  declarations: [ EcabsTableFilterWrapperComponent ],
+  imports: [
+    CommonModule,
+    EcabsExpansionPanelModule
+  ],
+  exports: [ EcabsTableFilterWrapperComponent ],
+} )
+export class EcabsTableFilterWrapperModule { }

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

@@ -0,0 +1,26 @@
+<section class="table-ui table-ui--wrapper" [ngClass]="{ 'table-ui__bordered': bordered, loading: loading }">
+  <mat-progress-bar *ngIf="loading" mode="indeterminate" class="table-ui__progress"></mat-progress-bar>
+
+
+  <div *ngIf="header" class="table-ui__header">
+    <ng-container *ngTemplateOutlet="header"></ng-container>
+  </div>
+
+  <ng-container *ngIf="!(isEmptyMessage && isEmpty); else noDataTemplate">
+    <ng-content></ng-content>
+
+    <div *ngIf="paginator" class="table-ui__paginator">
+      <ng-container *ngTemplateOutlet="paginator"></ng-container>
+    </div>
+  </ng-container>
+
+  <!--#For Empty state -->
+  <ng-template #noDataTemplate>
+    <ecabs-empty-placeholder
+      *ngIf="!loading"
+      [redirectPath]="redirectPath"
+      [isEmptyMessage]="isEmptyMessage"
+      [srcImage]="srcImageEmpty"
+    ></ecabs-empty-placeholder>
+  </ng-template>
+</section>

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

@@ -0,0 +1,6 @@
+:host {
+  mat-progress-bar {
+    position: absolute;
+    width: auto;
+  }
+}

package/lib/ecabs-table/ecabs-table.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './ecabs-table.component';
+
+describe( 'TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ TableComponent ],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( TableComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

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

@@ -0,0 +1,42 @@
+import { AfterContentChecked, Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { MatTable } from '@angular/material/table';
+import { PlaceholderRedirectPath } from '../ecabs-empty-placeholder/ecabs-empty-placeholder.component';
+
+@Component( {
+  selector: 'ecabs-table',
+  templateUrl: './ecabs-table.component.html',
+  styleUrls: [ './ecabs-table.component.scss' ],
+} )
+export class TableComponent implements AfterContentChecked {
+  @ContentChild( MatTable )
+  table: MatTable<any>;
+
+  @Input()
+  header: TemplateRef<any>;
+
+  @Input()
+  paginator: TemplateRef<any>;
+
+  @Input()
+  bordered = false;
+
+  @Input()
+  loading = false;
+
+  @Input()
+  isEmpty: boolean;
+  @Input()
+  isEmptyMessage: string;
+
+  @Input()
+  redirectPath: PlaceholderRedirectPath;
+
+  @Input()
+  srcImageEmpty: string;
+
+  ngAfterContentChecked(): void {
+    if ( this.table ) {
+      this.isEmpty = !this.table[ '_data' ]?.length;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableComponent } from './ecabs-table.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { RouterModule } from '@angular/router';
+import { EcabsEmptyPlaceholderModule } from '../ecabs-empty-placeholder/ecabs-empty-placeholder.module';
+
+@NgModule( {
+  declarations: [ TableComponent ],
+  imports: [
+    CommonModule,
+    MatProgressBarModule,
+    RouterModule,
+    EcabsEmptyPlaceholderModule
+  ],
+  exports: [ TableComponent, MatTableModule, EcabsEmptyPlaceholderModule ],
+} )
+export class EcabsTableModule { }

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

@@ -0,0 +1,13 @@
+<app-element-wrapper [data]="getData()">
+  <textarea
+    class="form-field__textarea"
+    [id]="name"
+    [(ngModel)]="value"
+    [placeholder]="placeholder"
+    (blur)="onTouch()"
+    [disabled]="disabled"
+    [maxlength]="maxLength"
+    [rows]="rows"
+  >
+  </textarea>
+</app-element-wrapper>

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

@@ -0,0 +1,61 @@
+import { AfterViewInit, Component, Injector, Input } from '@angular/core';
+import { ControlValueAccessor, UntypedFormControl, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import ElementBaseComponent from '../base/element-base';
+
+@Component({
+  selector: 'ecabs-textarea',
+  templateUrl: './ecabs-textarea.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsTextareaComponent,
+      multi: true,
+    },
+  ],
+})
+export class EcabsTextareaComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+  @Input()
+  rows!: number;
+
+  val!: string;
+
+  get value(): string {
+    return this.val;
+  }
+
+  set value(val) {
+    if (val !== undefined && this.val !== val) {
+      this.val = val;
+      this.onChange(val);
+      this.onTouch(val);
+    }
+  }
+
+  constructor(private injector: Injector) {
+    super();
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get(NgControl, null) as NgControl;
+    if (ngControl) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange: any = (): void => {};
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onTouch: any = (): void => {};
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+}

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EcabsTextareaComponent } from './ecabs-textarea.component';
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [EcabsTextareaComponent],
+  imports: [CommonModule, ElementWrapperModule, FormsModule],
+  exports: [EcabsTextareaComponent],
+})
+export class EcabsTextAreaModule {}

package/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/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/lib/ecabs-timepicker/config.model.ts

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

package/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/lib/ecabs-timepicker/ecabs-timepicker.component.scss

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