ecabs-components 1.0.19 → 1.0.21

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +0,0 @@
-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 {}