ecabs-components 1.0.18 → 1.0.19

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

@@ -0,0 +1,17 @@
+<app-element-wrapper [data]="getData()">
+  <form #f="ngForm" [formGroup]="phoneForm">
+      <ngx-mat-intl-tel-input
+        (focusout)="onBlur()"
+        [ngClass]="{ error: phoneForm.invalid && (phoneForm.dirty || phoneForm.touched) }"
+        #phoneInput
+        [preferredCountries]="preferredCountries"
+        [enablePlaceholder]="enablePlaceholder"
+        [enableSearch]="enableSearch"
+        [disabled]="disabled"
+        [formControlName]="'phone'"
+        name="phone"
+        [inputPlaceholder]="placeholder"
+      >
+      </ngx-mat-intl-tel-input>
+  </form>
+</app-element-wrapper>

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

@@ -0,0 +1,108 @@
+import { AfterViewInit, Component, HostListener, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+  ControlValueAccessor,
+  UntypedFormControl,
+  UntypedFormGroup,
+  NG_VALUE_ACCESSOR,
+  Validators,
+  NgControl,
+} from '@angular/forms';
+import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
+import ElementBaseComponent from '../base/element-base';
+
+@Component( {
+  selector: 'ecabs-phone',
+  templateUrl: './ecabs-phone.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: EcabsPhoneComponent,
+      multi: true,
+    },
+  ],
+} )
+export class EcabsPhoneComponent
+  extends ElementBaseComponent
+  implements ControlValueAccessor, AfterViewInit, OnDestroy, OnInit {
+  @Input() preferredCountries!: string[];
+  @Input() enablePlaceholder!: boolean;
+  @Input() enableSearch: boolean = true;
+  @Input() useOnlyDisabledClass = false;
+  @Input() declare required: boolean;
+
+  @ViewChild( 'phoneInput' )
+  phoneInput!: NgxMatIntlTelInputComponent;
+
+  phoneForm: UntypedFormGroup;
+  phoneSub!: any;
+  prohibitedCharacters = [ '-' ];
+
+  get value(): any {
+    return this.phoneForm.get( 'phone' )?.value;
+  }
+
+  set value( val ) {
+    if ( val !== undefined && this.value !== val ) {
+      this.phoneForm.setValue( { phone: val } );
+    }
+  }
+
+  constructor( private readonly injector: Injector ) {
+    super();
+  }
+
+  @HostListener( 'keypress', [ '$event' ] ) onInput( event: KeyboardEvent ): void {
+    if ( this.prohibitedCharacters.includes( event.key ) ) {
+      event.preventDefault();
+    }
+  }
+
+  ngOnInit(): void {
+    this.phoneForm = new UntypedFormGroup( {
+      phone: new UntypedFormControl( undefined, this.required ? [ Validators.required ] : [] ),
+    } );
+  }
+
+  ngAfterViewInit(): void {
+    const ngControl: NgControl = this.injector.get( NgControl, null );
+    if ( ngControl ) {
+      this.control = ngControl.control as UntypedFormControl;
+    }
+
+    this.phoneSub = this.phoneForm.valueChanges.subscribe( ( formVal ) => {
+      this.value = formVal?.phone;
+      this.onChange( this.value );
+      this.onTouch( this.value );
+      this.control.setErrors( this.phoneForm.get( 'phone' ).errors );
+    } );
+  }
+
+  onChange: any = (): void => { };
+  onTouch: any = (): void => { };
+
+  writeValue( value: any ): void {
+    this.value = value;
+  }
+
+  registerOnChange( fn: any ): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched( fn: any ): void {
+    this.onTouch = fn;
+  }
+
+  ngOnDestroy(): void {
+    this.phoneSub?.unsubscribe();
+  }
+
+  reset(): void {
+    this.phoneInput.reset();
+  }
+
+  onBlur(): void {
+    this.control.setErrors( this.phoneForm.get( 'phone' ).errors );
+    this.onTouch( this.value );
+    this.onChange( this.value );
+  }
+}

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgxMatIntlTelInputComponent } from 'ngx-mat-intl-tel-input';
+
+import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
+import { EcabsPhoneComponent } from './ecabs-phone.component';
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+
+@NgModule( {
+  declarations: [ EcabsPhoneComponent ],
+  imports: [ CommonModule, MatInputModule, ElementWrapperModule, FormsModule, NgxMatIntlTelInputComponent, ReactiveFormsModule ],
+  exports: [ EcabsPhoneComponent ],
+} )
+export class EcabsPhoneModule { }

package/src/lib/ecabs-picker-header/ecabs-picker-header.component.html

@@ -0,0 +1,12 @@
+<div class="header">
+  <button mat-icon-button (click)="previousClicked()">
+    <mat-icon>keyboard_arrow_left</mat-icon>
+  </button>
+  <button mat-flat-button (click)="currentPeriodClicked()">
+    <span >{{ periodLabel }}</span>
+  </button>
+
+  <button mat-icon-button (click)="nextClicked()">
+    <mat-icon>keyboard_arrow_right</mat-icon>
+  </button>
+</div>

package/src/lib/ecabs-picker-header/ecabs-picker-header.component.scss

@@ -0,0 +1,16 @@
+@import "../../styles/styles";
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+.select-date-label {
+  color: var(--color-brand-dark);
+}
+
+button {
+  background-color: inherit;
+}

package/src/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/src/lib/ecabs-picker-header/ecabs-picker-header.module.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-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/src/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/src/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/src/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/src/lib/ecabs-radio-button-list/ecabs-radio-button-list.module.ts

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

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

@@ -0,0 +1,45 @@
+<app-element-wrapper [data]="getData()">
+  <mat-form-field [ngClass]="{ disabled: useOnlyDisabledClass }">
+    <mat-select
+      class="form-field__select"
+      [(ngModel)]="value"
+      (closed)="onTouch()"
+      [id]="name"
+      appearance="outline"
+      [multiple]="multiple"
+      [disabled]="disabled"
+      [placeholder]="placeholder"
+      [disableRipple]="true"
+      (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>