ecabs-components 1.0.19 → 1.0.21

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

@@ -1,11 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EcabsLoadingComponent } from './ecabs-loading.component';
-import { EcabsSpinnerComponent } from './spinner/spinner.component';
-
-@NgModule({
-  declarations: [EcabsLoadingComponent, EcabsSpinnerComponent],
-  imports: [CommonModule],
-  exports: [EcabsLoadingComponent, EcabsSpinnerComponent],
-})
-export class EcabsLoadingModule {}

package/src/lib/ecabs-loading/spinner/spinner.component.html

@@ -1,5 +0,0 @@
-<div class="loadingio-spinner-rolling {{ size }}">
-  <div class="ldio-inner">
-    <div></div>
-  </div>
-</div>

package/src/lib/ecabs-loading/spinner/spinner.component.scss

@@ -1,61 +0,0 @@
-:host {
-  line-height: 0;
-}
-@keyframes ldio-inner {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-
-.loadingio-spinner-rolling {
-  width: 27px;
-  height: 27px;
-  display: inline-block;
-  overflow: hidden;
-  background: none;
-  .ldio-inner {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    transform: translateZ(0) scale(1);
-    backface-visibility: hidden;
-    transform-origin: 0 0;
-    div {
-      position: absolute;
-      width: 9px;
-      height: 9px;
-      border: 4px solid #85a2b6;
-      border-top-color: transparent;
-      border-radius: 50%;
-      animation: ldio-inner 1s linear infinite;
-      top: 14px;
-      left: 14px;
-      box-sizing: content-box;
-    }
-  }
-  &.medium {
-    width: 40px;
-    height: 40px;
-    .ldio-inner div {
-      width: 20px;
-      height: 20px;
-      border-width: 6px;
-      top: 19px;
-      left: 19px;
-    }
-  }
-  &.large {
-    width: 60px;
-    height: 60px;
-    .ldio-inner div {
-      width: 35px;
-      height: 35px;
-      border-width: 9px;
-      top: 29px;
-      left: 29px;
-    }
-  }
-}

package/src/lib/ecabs-loading/spinner/spinner.component.spec.ts

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

package/src/lib/ecabs-loading/spinner/spinner.component.ts

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'ecabs-loading-spinner',
-  templateUrl: './spinner.component.html',
-  styleUrls: ['./spinner.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class EcabsSpinnerComponent {
-  @Input() size: 'large' | 'medium' | 'tiny' = 'medium';
-}

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

@@ -1,10 +0,0 @@
-<ng-container>
-  <div class="flex flex-row px-2 py-4 note" [ngClass]="classByType">
-    <div>
-      <mat-icon>info_outline</mat-icon>
-    </div>
-    <div class="ml-4">
-      <ng-content></ng-content>
-    </div>
-  </div>
-</ng-container>

package/src/lib/ecabs-note/ecabs-note.component.scss

@@ -1,29 +0,0 @@
-@import './../../styles/scss/utilities/index';
-
-.note {
-  border-radius: $border-radius-base;
-
-  .mat-icon {
-    color: inherit;
-  }
-
-  @include m(danger) {
-    color: var(--color-error);
-    background-color: var(--color-error-opacity);
-  }
-
-  @include m(warn) {
-    background-color: var(--color-warning-opacity);
-    color: var(--color-warn);
-  }
-
-  @include m(success) {
-    background-color: rgba(var(--color-success-rgb), .06);
-    color: var(--color-success);
-  }
-
-  @include m(default) {
-    background-color: rgba(var(--color-info-rgb), .06);
-    color: var(--color-info);
-  }
-}

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

@@ -1,27 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component( {
-  selector: 'ecabs-note',
-  templateUrl: './ecabs-note.component.html',
-  styleUrls: [ './ecabs-note.component.scss' ],
-} )
-export class NoteComponent {
-  @Input()
-  type: 'default' | 'danger' | 'warn' | 'success' = 'default';
-
-  get classByType(): string {
-    switch ( this.type ) {
-      case 'warn':
-        return 'note--warn';
-
-      case 'danger':
-        return 'note--danger';
-
-      case 'success':
-        return 'note--success';
-
-      default:
-        return 'note--default';
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { NoteComponent } from './ecabs-note.component';
-
-@NgModule( {
-  declarations: [ NoteComponent ],
-  imports: [ CommonModule, MatIconModule ],
-  exports: [ NoteComponent ],
-} )
-export class NoteModule { }

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

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

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

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

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

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

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

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

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

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

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

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

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