ecabs-components 1.0.18 → 1.0.19

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

@@ -0,0 +1,346 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Injector,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {
+  UntypedFormControl,
+  NgControl,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms';
+import {MatOption} from '@angular/material/core';
+import {MatSelectSearchComponent} from 'ngx-mat-select-search';
+import {
+  BehaviorSubject,
+  combineLatest,
+  debounceTime,
+  map,
+  Subscription,
+} from 'rxjs';
+import ElementBaseComponent from '../base/element-base';
+
+@Component({
+  selector: 'ecabs-select',
+  templateUrl: './ecabs-select.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsSelectComponent,
+      multi: true,
+    },
+  ],
+})
+export class EcabsSelectComponent
+  extends ElementBaseComponent
+  implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+  @Input() items!: { label: string; value: any }[];
+  @Input() multiple = false;
+  @Input() useNoneOption: boolean = false;
+  @Input() useOnlyDisabledClass = false;
+  @Input() searchFieldPlaceholder: string = 'Search';
+  @Input() useSearchOption = false;
+  @Input() useSelectAllOption = false;
+  @Input() setAllOptionAfterChosenAllItems = true;
+  @Input() selectAllValue: any = 0;
+  @Input() noEntriesFoundLabel = 'No matching found';
+  @Input() noneLabel = 'None';
+  @Input() allLabel = 'All';
+  @Input() otherLabel = 'Other';
+  @Input() othersLabel = 'Others';
+  @Output() updateFilterItems: EventEmitter<string> =
+    new EventEmitter<string>();
+  @Output() selectionChange: EventEmitter<any> = new EventEmitter<any>();
+
+  @ViewChild('allSelected') allSelected!: MatOption;
+  @ViewChild(MatSelectSearchComponent)
+  matSelectSearchComponent!: MatSelectSearchComponent;
+
+  val!: any;
+  filteredItems$: BehaviorSubject<{ label: string; value: any }[]> = new BehaviorSubject<
+    { label: string; value: any }[]
+  >([]);
+  itemFilterCtrl: UntypedFormControl = new UntypedFormControl();
+  isClearAll = false;
+  showFilteredAllOption = true;
+  selectedItems: { label: string; value: any }[] = [];
+  notSelectedItems: { label: string; value: any }[] = [];
+  subscriptions = new Subscription();
+
+  get value(): any {
+    return this.val;
+  }
+
+  set value(val) {
+    if (this.val !== val) {
+      this.val = val;
+      this.setSelectedItems();
+      this.onChange(val);
+      this.onTouch(val);
+    }
+  }
+
+  constructor(
+    private readonly injector: Injector,
+    private readonly changeDetectorRef: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const {items} = changes;
+
+    if (items && items.currentValue) {
+      this.filterItems();
+
+      if (this.multiple && this.useSelectAllOption && this.allSelected?.selected) {
+        setTimeout(() => {
+          this.control.patchValue([...this.filteredItems$.value.map((item) => item.value), this.selectAllValue], {
+            emitEvent: false,
+          });
+        }, 100);
+      }
+    }
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get(
+      NgControl,
+      null
+    ) as NgControl;
+
+    if (ngControl) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+
+    if (this.matSelectSearchComponent) {
+      this.matSelectSearchComponent._showNoEntriesFound$ = combineLatest([
+        this.itemFilterCtrl.valueChanges,
+        this.filteredItems$,
+      ]).pipe(
+        map(
+          ([value, items]) =>
+            this.matSelectSearchComponent.noEntriesFoundLabel &&
+            value &&
+            items.length === 0
+        )
+      );
+    }
+  }
+
+  ngOnInit(): void {
+    this.subscriptions.add(
+      this.itemFilterCtrl.valueChanges
+        .pipe(debounceTime(200))
+        .subscribe((value: any) => {
+          this.filterItems();
+          this.updateFilterItems.emit(value);
+
+          if (this.isClearAll) {
+            this.control.patchValue([], {emitEvent: false});
+            this.isClearAll = false;
+          }
+        })
+    );
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange: any = () => {
+  };
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onTouch: any = () => {
+  };
+
+  toggleAllSelection(): void {
+    if (this.allSelected.selected) {
+      if (this.useSearchOption) {
+        this.control.patchValue([...this.filteredItems$.value.map((item) => item.value), this.selectAllValue]);
+      } else {
+        this.control.patchValue([...this.items.map((item) => item.value), this.selectAllValue]);
+      }
+    } else {
+      this.control.patchValue([]);
+      this.isClearAll = true;
+    }
+  }
+
+  togglePerOne(): void {
+    setTimeout(() => {
+      if (this.allSelected) {
+        if (this.allSelected.selected) {
+          this.allSelected.deselect();
+        }
+        if (this.setAllOptionAfterChosenAllItems && this.control.value.length === this.items.length) {
+          this.allSelected.select();
+        }
+      }
+    });
+
+    this.isClearAll = false;
+  }
+
+  toggleNone(): void {
+    this.selectedItems = [];
+  }
+
+  getAllSelectedChecked(): boolean {
+    return this.allSelected !== undefined && this.allSelected.selected;
+  }
+
+  getLabel(val: any): string {
+    if (this.useSelectAllOption && this.allSelected?.selected && this.items && this.items.length > 0) {
+      return this.items[0].label;
+    }
+
+    let item: { label: string; value: any };
+
+    if (val !== undefined) {
+      if (this.useSearchOption) {
+        if (this.selectedItems && this.selectedItems.length > 0) {
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          item = this.selectedItems.find((item) => item.value === val);
+        }
+      } else {
+        if (this.items && this.items.length > 0) {
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          item = this.items.find((item) => item.value === val);
+        }
+      }
+
+      return item ? item.label : '';
+    }
+
+    return '';
+  }
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
+  onSelectionChanged($event: any): void {
+    this.selectionChange.emit($event);
+  }
+
+  private filterItems(): void {
+    this.setSelectedItems();
+
+    if (!this.items) {
+      return;
+    }
+
+    // get the search keyword
+    let search: string = this.itemFilterCtrl.value;
+
+    if (!search || search === '') {
+      if (this.useSearchOption && !this.items?.length) {
+        this.filteredItems$.next([...this.selectedItems]);
+      } else {
+        this.filteredItems$.next(this.items?.slice());
+      }
+
+      this.showFilteredAllOption = true;
+
+      return;
+    }
+
+    search = search.toLowerCase();
+
+    this.showFilteredAllOption =
+      this.allLabel.toLowerCase().includes(search.toLowerCase()) ||
+      (this.value instanceof Array && this.value.includes(this.selectAllValue)) ||
+      (!(this.value instanceof Array) && this.value === this.selectAllValue);
+    this.changeDetectorRef.detectChanges();
+
+    if (this.useSearchOption) {
+      const filteredItems =
+        this.notSelectedItems?.length > 0
+          ? this.notSelectedItems.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
+          : [];
+      this.filteredItems$.next([...this.selectedItems, ...filteredItems]);
+    } else {
+      this.filteredItems$.next(
+        this.items?.length > 0
+          ? this.items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()))
+          : []
+      );
+    }
+  }
+
+  private setSelectedItems(): void {
+    if (this.useSearchOption) {
+      const selectedItems = [];
+
+      if (this.value) {
+        if (this.value instanceof Array) {
+          const skipSteps = this.value.includes(this.selectAllValue);
+
+          if (!skipSteps) {
+            this.value.forEach((value) => {
+              const index = this.selectedItems.findIndex((selectedItem) => selectedItem.value === value);
+
+              if (index !== -1) {
+                selectedItems.push(this.selectedItems[index]);
+              } else {
+                // eslint-disable-next-line @typescript-eslint/no-shadow
+                const item = this.items.find((item) => item.value === value);
+
+                if (item) {
+                  selectedItems.push(item);
+                }
+              }
+            });
+
+            this.selectedItems.forEach((selectedItem) => {
+              const index = this.value.find((value) => selectedItem.value === value);
+
+              if (index === -1) {
+                selectedItems.splice(index, 1);
+              }
+            });
+          }
+        } else {
+          const index = this.selectedItems.findIndex((selectedItem) => selectedItem.value === this.value);
+
+          if (index !== -1) {
+            selectedItems.push(this.selectedItems[index]);
+          } else {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            const item = this.items.find((item) => item.value === this.value);
+
+            // eslint-disable-next-line max-depth
+            if (item) {
+              selectedItems.push(item);
+            }
+          }
+        }
+
+        this.selectedItems = [...selectedItems];
+        this.notSelectedItems = this.items?.filter(
+          (item) => this.selectedItems.findIndex((selectedItem) => selectedItem.value === item.value) === -1
+        );
+      } else {
+        this.notSelectedItems = this.items?.slice();
+      }
+    }
+  }
+}

package/src/lib/ecabs-select/ecabs-select.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+import { EcabsSelectComponent } from './ecabs-select.component';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import {
+  MAT_LEGACY_SELECT_SCROLL_STRATEGY as MAT_SELECT_SCROLL_STRATEGY,
+  MatLegacySelectModule as MatSelectModule,
+} from '@angular/material/legacy-select';
+import { BlockScrollStrategy, Overlay } from '@angular/cdk/overlay';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+
+@NgModule( {
+  declarations: [ EcabsSelectComponent ],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatSelectModule,
+    FormsModule,
+    NgxMatSelectSearchModule,
+    MatFormFieldModule,
+    ReactiveFormsModule
+  ],
+  exports: [ EcabsSelectComponent ],
+  providers: [
+    {
+      provide: MAT_SELECT_SCROLL_STRATEGY,
+      useFactory: scrollFactory,
+      deps: [ Overlay ],
+    },
+  ],
+} )
+export class EcabsSelectModule { }
+export function scrollFactory( overlay: Overlay ): () => BlockScrollStrategy {
+  return () => overlay.scrollStrategies.block();
+}

package/src/lib/ecabs-table/ecabs-table-filter-wrapper/ecabs-table-filter-wrapper.component.html

@@ -0,0 +1,7 @@
+<ecabs-expansion-panel [title]="title" class="block mb-5" [expanded]="true">
+  <ng-content></ng-content>
+
+  <div *ngIf="actions" class="flex justify-end">
+    <ng-container *ngTemplateOutlet="actions"></ng-container>
+  </div>
+</ecabs-expansion-panel>

package/src/lib/ecabs-table/ecabs-table-filter-wrapper/ecabs-table-filter-wrapper.component.scss

@@ -0,0 +1,11 @@
+@import './../../../styles/scss/utilities/index';
+
+.mat-expansion-panel-header-title {
+  font-size: $font-heading-xs;
+}
+
+:host::ng-deep {
+  .btn__group {
+    justify-content: flex-end;
+  }
+}

package/src/lib/ecabs-table/ecabs-table-filter-wrapper/ecabs-table-filter-wrapper.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EcabsTableFilterWrapperComponent } from './ecabs-table-filter-wrapper.component';
+import { TranslateFakeLoader, TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+
+describe( 'TableFilterWrapperComponent', () => {
+  let component: EcabsTableFilterWrapperComponent;
+  let fixture: ComponentFixture<EcabsTableFilterWrapperComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ EcabsTableFilterWrapperComponent ],
+      imports: [
+        TranslateModule.forRoot( {
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateFakeLoader,
+          },
+        } ),
+      ],
+      providers: [ TranslateService ],
+    } ).compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( EcabsTableFilterWrapperComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

package/src/lib/ecabs-table/ecabs-table-filter-wrapper/ecabs-table-filter-wrapper.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, TemplateRef } from '@angular/core';
+
+@Component( {
+  selector: 'ecabs-table-filter-wrapper',
+  templateUrl: './ecabs-table-filter-wrapper.component.html',
+  styleUrls: [ './ecabs-table-filter-wrapper.component.scss' ],
+} )
+export class EcabsTableFilterWrapperComponent {
+  @Input()
+  title: string;
+
+  @Input()
+  actions: TemplateRef<any>;
+}

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

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

package/src/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/src/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/src/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 { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar';
+import { RouterModule } from '@angular/router';
+import { EcabsEmptyPlaceholderModule } from '../ecabs-empty-placeholder/ecabs-empty-placeholder.module';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+
+@NgModule( {
+  declarations: [ TableComponent ],
+  imports: [
+    CommonModule,
+    MatProgressBarModule,
+    RouterModule,
+    EcabsEmptyPlaceholderModule
+  ],
+  exports: [ TableComponent, MatTableModule, EcabsEmptyPlaceholderModule ],
+} )
+export class EcabsTableModule { }

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