ecabs-components 1.0.19 → 1.0.21

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.html

@@ -1,33 +0,0 @@
-<mat-accordion class="example-headers-align" multi>
-  <mat-expansion-panel [expanded]="expanded" [disabled]="disabled" (opened)="onOpened()" [hideToggle]="hideToggle">
-    <mat-expansion-panel-header *ngIf="title">
-      <mat-panel-title>
-        <div>
-          <div class="flex flex-row">
-            <div *ngIf="index && !showErrorMessage" class="border-current border-2 rounded-full mr-3 index">
-              {{ index }}
-            </div>
-            <div *ngIf="!showErrorMessage && showIcon" class="mr-3 rounded">
-              <mat-icon class="rounded-icon !text-lg -mt-1">{{ iconName }}</mat-icon>
-            </div>
-            <div *ngIf="showErrorMessage" class="mt-1 mr-2">
-              <mat-icon color="warn">warning</mat-icon>
-            </div>
-            {{ title }}
-            <div *ngIf="showCheckbox" class="ml-2 mt-1">
-              <ecabs-checkbox [type]="'toggle'" [(ngModel)]="toggle"
-                                       (click)="toggleAction()"></ecabs-checkbox>
-            </div>
-          </div>
-          <div *ngIf="showErrorMessage" class="error-message">{{ errorMessage }}</div>
-        </div>
-      </mat-panel-title>
-      <mat-panel-description>{{ description }}
-        <mat-chip *ngIf="showStatus" class="{{ status | lowercase }}">
-          {{ status | titlecase }}
-        </mat-chip>
-      </mat-panel-description>
-    </mat-expansion-panel-header>
-    <ng-content></ng-content>
-  </mat-expansion-panel>
-</mat-accordion>

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.scss

@@ -1,79 +0,0 @@
-.example-action-buttons {
-  padding-bottom: 20px;
-}
-
-.example-headers-align .mat-expansion-panel-header-title,
-.example-headers-align .mat-expansion-panel-header-description {
-  flex-basis: 0;
-}
-
-.example-headers-align .mat-expansion-panel-header-description {
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
-  margin-left: 8px;
-}
-
-:host ::ng-deep .mat-expansion-indicator::after {
-  border-color: var(--color-gray-500);
-}
-
-.index {
-  height: 28px;
-  width: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding-top: 3px;
-  font-size: 16px;
-}
-
-.error-message {
-  font-size: 0.75rem !important;
-  color: var(--color-error);
-  margin-left: 2.125rem;
-  margin-top: -0.75rem;
-}
-
-.rounded {
-  background-color: var(--color-brand-dark);
-  border-radius: 50%;
-  height: 28px;
-  width: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.rounded-icon {
-  color: var(--color-white);
-}
-
-.inactive {
-  background-color: rgba(var(--color-warn-rgb), .05);
-  color: var(--color-warn);
-}
-
-.draft {
-  background-color: var(--color-gray-200);
-  color: var(--color-gray-500);
-}
-
-.published {
-  background-color: rgba(var(--color-info-rgb), .05);
-  color: var(--color-info);
-}
-
-.active {
-  background-color: rgba(var(--color-success-rgb), .05);
-  color: var(--color-success);
-}
-
-.expired {
-  background-color: rgba(var(--color-error-rgb), .05);
-  color: var(--color-error);
-}

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.spec.ts

@@ -1,26 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { EcabsExpansionPanelComponent } from './ecabs-expansion-panel.component';
-
-describe( 'ExpansionPanelComponent', () => {
-  let component: EcabsExpansionPanelComponent;
-  let fixture: ComponentFixture<EcabsExpansionPanelComponent>;
-
-  beforeEach( async () => {
-    await TestBed.configureTestingModule( {
-      imports: [ BrowserAnimationsModule, MatExpansionModule ],
-      declarations: [ EcabsExpansionPanelComponent ],
-    } ).compileComponents();
-  } );
-
-  beforeEach( () => {
-    fixture = TestBed.createComponent( EcabsExpansionPanelComponent );
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  } );
-
-  it( 'should create', () => {
-    expect( component ).toBeTruthy();
-  } );
-} );

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.ts

@@ -1,77 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { MatExpansionPanel } from '@angular/material/expansion';
-
-@Component( {
-  selector: 'ecabs-expansion-panel',
-  templateUrl: './ecabs-expansion-panel.component.html',
-  styleUrls: [ './ecabs-expansion-panel.component.scss' ],
-} )
-export class EcabsExpansionPanelComponent implements OnChanges {
-  @Input()
-  title = '';
-
-  @Input()
-  description: string;
-
-  @Input()
-  index;
-
-  @Input()
-  expanded = false;
-
-  @Input()
-  disabled = false;
-
-  @Input()
-  errorMessage: string;
-
-  @Input()
-  showErrorMessage: boolean;
-
-  @Input()
-  closePanel: boolean;
-
-  @Input()
-  showIcon: boolean;
-
-  @Input()
-  iconName: string;
-
-  @Input()
-  showCheckbox: boolean;
-
-  @Input()
-  showStatus: boolean;
-
-  @Input()
-  status: string;
-
-  @Input()
-  hideToggle = false;
-
-  @Output() checked = new EventEmitter<boolean>();
-
-  @Output() opened = new EventEmitter<void>();
-
-  @ViewChild( MatExpansionPanel ) expansionPanel: MatExpansionPanel;
-
-  toggle = false;
-
-  onOpened(): void {
-    this.opened.emit();
-  }
-
-  ngOnChanges( changes: SimpleChanges ): void {
-    const { closePanel } = changes;
-
-    if ( closePanel && this.expansionPanel ) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      closePanel.currentValue === true ? this.expansionPanel.close() : this.expansionPanel.open();
-    }
-  }
-
-  toggleAction(): void {
-    this.expanded = !this.expanded;
-    this.checked.emit( this.expanded );
-  }
-}

package/src/lib/ecabs-expansion-panel/ecabs-expansion-panel.module.ts

@@ -1,17 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {MatIconModule} from '@angular/material/icon';
-import {EcabsExpansionPanelComponent} from './ecabs-expansion-panel.component';
-import {MatExpansionModule} from '@angular/material/expansion';
-import {EcabsCheckboxToggleModule} from '../ecabs-checkbox-toggle/ecabs-checkbox-toggle.module';
-import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
-
-@NgModule({
-  declarations: [EcabsExpansionPanelComponent],
-  imports: [CommonModule, FormsModule, MatButtonModule, MatExpansionModule, MatIconModule, MatChipsModule, EcabsCheckboxToggleModule],
-  exports: [EcabsExpansionPanelComponent],
-})
-export class EcabsExpansionPanelModule {
-}

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

@@ -1,18 +0,0 @@
-<app-element-wrapper [data]="getData()">
-  <div class="form-field__input--wrapper">
-    <input appDigitsOnly [digitsOnly]="digitsOnly" [decimal]="allowDecimal" [allowHyphen]="allowHyphen"
-           class="form-field__input"
-           [type]="type"
-           [id]="name"
-           [(ngModel)]="value"
-           [placeholder]="placeholder"
-           (blur)="onTouch()"
-           [disabled]="disabled"
-           [maxlength]="maxLength"/>
-
-    <div class="incrementor">
-      <mat-icon (click)="increment()">add</mat-icon>
-      <mat-icon (click)="decrement()">remove</mat-icon>
-    </div>
-  </div>
-</app-element-wrapper>

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

@@ -1,33 +0,0 @@
-@import "../../styles/styles";
-
-:host::ng-deep {
-  .incrementor {
-    border-left: 1px solid var(--color-gray-300);
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    top: 1px;
-    bottom: 1px;
-    right: 1px;
-    background-color: var(--color-white);
-
-    .mat-icon {
-      margin-right: 0;
-      font-size: 20px;
-      line-height: 20px;
-      cursor: pointer;
-
-      &:first-of-type {
-        border-bottom: 1px solid var(--color-gray-300);
-      }
-
-      &:hover {
-        color: var(--color-brand-dark);
-      }
-    }
-  }
-
-  .form-field > div {
-    line-height: 1;
-  }
-}

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

@@ -1,74 +0,0 @@
-import { AfterViewInit, Component, EventEmitter, Injector, Input, Output } from '@angular/core';
-import { ControlValueAccessor, UntypedFormControl, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
-
-@Component( {
-  selector: 'ecabs-increment',
-  templateUrl: './ecabs-increment.component.html',
-  styleUrls: [ './ecabs-increment.component.scss' ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: EcabsIncrementComponent,
-      multi: true,
-    },
-  ],
-} )
-export class EcabsIncrementComponent extends ElementBaseComponent implements ControlValueAccessor, AfterViewInit {
-  @Input() digitsOnly!: boolean;
-  @Input() allowDecimal!: boolean;
-  @Input() allowHyphen!: boolean;
-
-  @Output() onblur = new EventEmitter<any>();
-  val!: string | number;
-
-  get value(): string | number {
-    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;
-    }
-  }
-
-  onChange: any = () => { };
-  onTouch: any = () => { };
-
-  writeValue( value: any ): void {
-    this.value = value;
-  }
-
-  registerOnChange( fn: any ): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched( fn: any ): void {
-    this.onTouch = fn;
-  }
-
-  blurChange( e: any ): void {
-    this.onblur.emit( e );
-  }
-
-  increment(): void {
-    this.value = +this.value + 1;
-  }
-
-  decrement(): void {
-    this.value = +this.value - 1;
-  }
-}

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

@@ -1,15 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-import { DigitsOnlyDirectivesModule } from '../base/directives/digits-only.directive.module';
-import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
-import { EcabsIncrementComponent } from './ecabs-increment.component';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-
-@NgModule( {
-  declarations: [ EcabsIncrementComponent ],
-  imports: [ CommonModule, MatInputModule, MatIconModule, ElementWrapperModule, FormsModule, DigitsOnlyDirectivesModule ],
-  exports: [ EcabsIncrementComponent ],
-} )
-export class EcabsIncrementModule { }

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

@@ -1,26 +0,0 @@
-<app-element-wrapper [data]="getData()">
-  <div class="form-field__input--wrapper">
-    <input
-      appDigitsOnly
-      [digitsOnly]="digitsOnly"
-      [decimal]="allowDecimal"
-      [allowHyphen]="allowHyphen"
-      class="form-field__input"
-      [type]="type"
-      [id]="name"
-      [(ngModel)]="value"
-      [placeholder]="placeholder"
-      (blur)="onTouch()"
-      [disabled]="disabled"
-      [maxlength]="maxLength"
-      [max]="max"
-      [step]="step"
-      (blur)="blurChange($event)"
-    />
-
-    <div class="form-field__input--suffix" *ngIf="type !== 'number'">
-      <ng-content select="mat-icon"></ng-content>
-      <ng-content select=".suffix"></ng-content>
-    </div>
-  </div>
-</app-element-wrapper>

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

@@ -1,85 +0,0 @@
-import { AfterViewInit, Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';
-import { ControlValueAccessor, UntypedFormControl, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
-import ElementBaseComponent from '../base/element-base';
-
-@Component( {
-  selector: 'ecabs-input',
-  templateUrl: './ecabs-input.component.html',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: EcabsInputComponent,
-      multi: true,
-    },
-  ],
-} )
-export class EcabsInputComponent
-  extends ElementBaseComponent
-  implements ControlValueAccessor, AfterViewInit, OnInit {
-  @Input()
-  digitsOnly!: boolean;
-
-  @Input()
-  allowDecimal!: boolean;
-
-  @Input()
-  allowHyphen!: boolean;
-
-  @Input() max!: number;
-  @Input() step!: number;
-
-  @Output() onblur = new EventEmitter<any>();
-  val!: string | number;
-
-  get value(): string | number {
-    return this.val;
-  }
-
-  set value( val ) {
-    if ( val !== undefined && this.val !== val ) {
-      this.val = val;
-      this.onChange( val );
-
-      if ( this.getData()?.control?.updateOn !== 'blur' ) {
-        this.onTouch( val );
-      }
-    }
-  }
-
-  constructor( private injector: Injector ) {
-    super();
-  }
-
-  ngOnInit(): void {
-    if ( this.type === 'number' ) {
-      this.digitsOnly = true;
-    }
-  }
-
-  ngAfterViewInit(): void {
-    const ngControl: NgControl = this.injector.get( NgControl, null ) as NgControl;
-    if ( ngControl ) {
-      this.control = ngControl.control as UntypedFormControl;
-    }
-  }
-
-  onChange: any = () => { };
-
-  onTouch: any = () => { };
-
-  writeValue( value: any ): void {
-    this.value = value;
-  }
-
-  registerOnChange( fn: any ): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched( fn: any ): void {
-    this.onTouch = fn;
-  }
-
-  blurChange( e: any ): void {
-    this.onblur.emit( e );
-  }
-}

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

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { EcabsInputComponent } from './ecabs-input.component';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { ElementWrapperModule } from '../base/element-wrapper/element-wrapper.module';
-import { FormsModule } from '@angular/forms';
-import { DigitsOnlyDirectivesModule } from '../base/directives/digits-only.directive.module';
-
-@NgModule( {
-  declarations: [ EcabsInputComponent ],
-  imports: [ CommonModule, MatInputModule, ElementWrapperModule, FormsModule, DigitsOnlyDirectivesModule ],
-  exports: [ EcabsInputComponent ],
-} )
-export class EcabsInputModule { }

package/src/lib/ecabs-language-selector/ecabs-language-selector.component.html

@@ -1,17 +0,0 @@
-<mat-form-field [ngClass]="{'flag-only': flagOnly}">
-  <mat-select class="capitalize" [(ngModel)]="selectedLang" name="language" (ngModelChange)="toggleLang()"
-              panelClass="wide-select">
-    <mat-select-trigger>
-      <div class="flex items-center" [matTooltip]="tooltip" [matTooltipDisabled]="!flagOnly || !tooltip">
-        <span [ngClass]="flagClass(matchSelected())"></span>
-        <div *ngIf="!flagOnly" class="ml-2">{{standardLang(matchSelected())}}</div>
-      </div>
-    </mat-select-trigger>
-    <mat-option class="capitalize" *ngFor="let lang of languages" [value]="lang">
-      <div class="flex items-center">
-        <span [ngClass]="flagClass(lang)"></span>
-        <div class="ml-2">{{standardLang(lang)}}</div>
-      </div>
-    </mat-option>
-  </mat-select>
-</mat-form-field>

package/src/lib/ecabs-language-selector/ecabs-language-selector.component.scss

@@ -1,26 +0,0 @@
-:host::ng-deep {
-  .mat-mdc-select, .mat-select {
-    padding: 0;
-    border: 0;
-    .mat-mdc-select-arrow-wrapper, .mat-select-arrow-wrapper {
-      display: none;
-    }
-    &, .mdc-list-item {
-      font-size: 12px;
-    }
-  }
-  .mat-select-panel-wrap {
-    .mat-option {
-      font-size: 12px;
-    }
-  }
-  .mat-mdc-form-field .mat-mdc-form-field-wrapper .mat-mdc-form-field-infix {
-    width: auto;
-  }
-
-  .flag-only {
-    .mat-select .mat-select-arrow-wrapper {
-      width: 0;
-    }
-  }
-}

package/src/lib/ecabs-language-selector/ecabs-language-selector.component.ts

@@ -1,63 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-
-@Component( {
-  selector: 'ecabs-language-selector',
-  templateUrl: './ecabs-language-selector.component.html',
-  styleUrls: [ './ecabs-language-selector.component.scss' ],
-} )
-export class EcabsLanguageSelectorComponent implements OnChanges {
-  @Input()
-  languages: string[] = [];
-
-  @Input()
-  currentLanguage: string;
-
-  @Input()
-  showLabelTitle: boolean = true;
-
-  @Input()
-  flagOnly: boolean;
-
-  @Input()
-  tooltip: string;
-
-  @Output()
-  languageChanged: EventEmitter<string> = new EventEmitter<string>();
-
-  selectedLang: string;
-
-  get panelClass(): string {
-    return this.showLabelTitle ? 'wide-select' : 'wide-select no-title';
-  }
-
-  ngOnChanges(): void {
-    this.selectedLang = this.currentLanguage;
-  }
-
-  toggleLang(): void {
-    return this.matchSelected() ? this.languageChanged.emit( this.matchSelected() ) : undefined;
-  }
-
-  matchSelected(): string {
-    return this.languages?.find( ( lang ) => lang === this.selectedLang );
-  }
-
-  standardLang( code: string ): string {
-    return this.standardise( code );
-  }
-
-  flagClass( lang: string ): string {
-    return `fi fi-${ lang?.slice( -2 ).toLowerCase() }`;
-  }
-
-  private standardise( code: string ): string {
-    if ( !code ) {
-      return undefined;
-    }
-    const lang = new Intl.DisplayNames( [ code ], {
-      type: 'language',
-      languageDisplay: 'standard',
-    } );
-    return lang.of( code );
-  }
-}

package/src/lib/ecabs-language-selector/ecabs-language-selector.module.ts

@@ -1,22 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {EcabsLanguageSelectorComponent} from './ecabs-language-selector.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
-import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyTooltipModule as MatTooltipModule} from "@angular/material/legacy-tooltip";
-
-@NgModule({
-  declarations: [EcabsLanguageSelectorComponent],
-  imports: [
-    CommonModule,
-    MatSelectModule,
-    MatFormFieldModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatTooltipModule
-  ],
-  exports: [EcabsLanguageSelectorComponent],
-})
-export class EcabsLanguageSelectorModule {
-}

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

@@ -1,7 +0,0 @@
-<div
-  class="flex absolute left-0 top-0 right-0 bottom-0 z-50 items-center justify-center"
-  [ngStyle]="{ backgroundColor: backgroundColor }"
-  *ngIf="loading"
->
-  <ecabs-loading-spinner [size]="size" *ngIf="loading"></ecabs-loading-spinner>
-</div>

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

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

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

@@ -1,11 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component( {
-  selector: 'ecabs-loading',
-  templateUrl: './ecabs-loading.component.html',
-} )
-export class EcabsLoadingComponent {
-  @Input() loading = false;
-  @Input() backgroundColor = 'white';
-  @Input() size: 'large' | 'medium' | 'tiny' = 'medium';
-}