ecabs-components 0.0.59 → 0.0.61

package/lib/ecabs-picker-header/ecabs-picker-header.component.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
+import { DateAdapter } from '@angular/material/core';
+import { MatCalendar } from '@angular/material/datepicker';
+import { format } from 'date-fns';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component( {
+  selector: 'ecabs-picker-header',
+  templateUrl: './ecabs-picker-header.component.html',
+  styleUrls: [ './ecabs-picker-header.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+} )
+export class EcabsPickerHeaderComponent<D> implements OnDestroy {
+  private unsubscribe$ = new Subject<void>();
+  private yearsPerPage = 24;
+
+  get periodLabel(): string {
+    if ( this.calendar.currentView === 'month' ) {
+      return format( new Date( this.calendar.activeDate.toString() ), `MMMM yyyy` );
+    }
+
+    return this.dateAdapter.getYearName( this.calendar.activeDate );
+  }
+
+  constructor(
+    private readonly calendar: MatCalendar<D>,
+    private readonly dateAdapter: DateAdapter<D>,
+    private readonly cdr: ChangeDetectorRef
+  ) {
+    calendar.stateChanges.pipe( takeUntil( this.unsubscribe$ ) ).subscribe( () => cdr.markForCheck() );
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
+  previousClicked(): void {
+    this.calendar.activeDate =
+      this.calendar.currentView === 'month'
+        ? this.dateAdapter.addCalendarMonths( this.calendar.activeDate, -1 )
+        : this.dateAdapter.addCalendarYears(
+          this.calendar.activeDate,
+          this.calendar.currentView === 'year' ? -1 : -this.yearsPerPage
+        );
+  }
+
+  nextClicked(): void {
+    this.calendar.activeDate =
+      this.calendar.currentView === 'month'
+        ? this.dateAdapter.addCalendarMonths( this.calendar.activeDate, 1 )
+        : this.dateAdapter.addCalendarYears(
+          this.calendar.activeDate,
+          this.calendar.currentView === 'year' ? 1 : this.yearsPerPage
+        );
+  }
+
+  currentPeriodClicked(): void {
+    this.calendar.currentView = this.calendar.currentView === 'month' ? 'multi-year' : 'month';
+  }
+}

package/lib/ecabs-picker-header/ecabs-picker-header.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIconModule } from '@angular/material/icon';
+
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+import { EcabsPickerHeaderComponent } from './ecabs-picker-header.component';
+
+@NgModule( {
+  declarations: [ EcabsPickerHeaderComponent ],
+  imports: [ CommonModule, ElementWrapperModule, MatIconModule, MatButtonModule, MatDatepickerModule ],
+  exports: [ EcabsPickerHeaderComponent ],
+} )
+export class EcabsPickerHeaderModule { }

package/lib/ecabs-radio-button-list/ecabs-radio-button-list.component.html

@@ -0,0 +1,13 @@
+<app-element-wrapper [data]="getData()">
+  <mat-radio-group
+    [ngClass]="{ 'flex flex-col my-1': direction === 'vertical' }"
+    [(ngModel)]="value"
+    [disabled]="disabled"
+    >
+    <mat-radio-button
+      [ngClass]="{ 'my-1': direction === 'vertical' }"
+      class="mr-4"
+      *ngFor="let item of items"
+      [value]="item.value">{{ item.label }}</mat-radio-button>
+  </mat-radio-group>
+</app-element-wrapper>

package/lib/ecabs-radio-button-list/ecabs-radio-button-list.component.scss

@@ -0,0 +1,16 @@
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}

package/lib/ecabs-radio-button-list/ecabs-radio-button-list.component.ts

@@ -0,0 +1,60 @@
+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-radio-button-list',
+  templateUrl: './ecabs-radio-button-list.component.html',
+  styleUrls: [ 'ecabs-radio-button-list.component.scss' ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsRadioButtonListComponent,
+      multi: true,
+    },
+  ],
+} )
+export class EcabsRadioButtonListComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
+  @Input() items!: { label: string; value: any }[];
+  @Input() direction: 'horizontal' | 'vertical' = 'horizontal';
+
+  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();
+  }
+
+  onChange: any = () => { };
+  onTouch: any = () => { };
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null ) as NgControl;
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+  }
+
+  writeValue( value: any ): void {
+    this.value = value;
+  }
+
+  registerOnChange( fn: any ): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched( fn: any ): void {
+    this.onTouch = fn;
+  }
+}

package/lib/ecabs-radio-button-list/ecabs-radio-button-list.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
+
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+
+import { EcabsRadioButtonListComponent } from './ecabs-radio-button-list.component';
+
+@NgModule( {
+  declarations: [ EcabsRadioButtonListComponent ],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatRadioModule,
+    FormsModule
+  ],
+  exports: [ EcabsRadioButtonListComponent ],
+} )
+export class EcabsRadioButtonListModule { }

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

@@ -0,0 +1,38 @@
+<app-element-wrapper [data]="getData()">
+  <mat-form-field [ngClass]="{ disabled: useOnlyDisabledClass }">
+    <mat-select
+      [(ngModel)]="value"
+      (closed)="onTouch()"
+      appearance="outline"
+      [multiple]="multiple"
+      [disabled]="disabled"
+      [placeholder]="placeholder"
+      (selectionChange)="onSelectionChanged($event)"
+    >
+      <mat-select-trigger>
+        <span *ngIf="getAllSelectedChecked()">{{ allLabel }}</span>
+        <span *ngIf="!getAllSelectedChecked()"
+          >{{ val && multiple ? getLabel(val[0]) : getLabel(val) }}
+          <span *ngIf="multiple && value?.length > 1" class="additional-selection">
+            (+{{ useSelectAllOption && this.allSelected?.selected ? value?.length - 2 : value?.length - 1 }}
+            {{ (value?.length === 2 ? otherLabel : othersLabel) }})
+          </span>
+        </span>
+      </mat-select-trigger>
+      <mat-option *ngIf="useSearchOption">
+        <ngx-mat-select-search
+        [formControl]="itemFilterCtrl"
+          [placeholderLabel]="searchFieldPlaceholder"
+          [noEntriesFoundLabel]="noEntriesFoundLabel"
+        ></ngx-mat-select-search>
+      </mat-option>
+      <mat-option *ngIf="useNoneOption" (click)="toggleNone()">{{ noneLabel }}</mat-option>
+      <mat-option #allSelected *ngIf="useSelectAllOption && showFilteredAllOption" (click)="toggleAllSelection()" [value]="selectAllValue">{{
+        allLabel
+      }}</mat-option>
+      <mat-option *ngFor="let item of filteredItems$ | async" [value]="item.value" (click)="togglePerOne()">
+        {{ item.label }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</app-element-wrapper>

package/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/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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { EcabsSelectComponent } from './ecabs-select.component';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import {
+  MAT_SELECT_SCROLL_STRATEGY,
+  MatSelectModule,
+} from '@angular/material/select';
+import { BlockScrollStrategy, Overlay } from '@angular/cdk/overlay';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+@NgModule( {
+  declarations: [ EcabsSelectComponent ],
+  imports: [
+    CommonModule,
+    ElementWrapperModule,
+    MatSelectModule,
+    MatFormFieldModule,
+    FormsModule,
+    NgxMatSelectSearchModule,
+    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/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/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/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/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>;
+}