ecabs-components 1.0.17 → 1.0.19

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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