@colijnit/sharedcomponents 1.0.55 → 1.0.56

package/projects/sharedcomponents/src/lib/components/key-pad/key-pad.component.ts

@@ -0,0 +1,216 @@
+import {Component, EventEmitter, HostBinding, HostListener, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {Icon} from '../../enum/icon.enum';
+import {IconCacheService} from '../../service/icon-cache.service';
+import {KeyboardCode} from '../../enum/keyboard-code.enum';
+
+@Component({
+  selector: 'co-key-pad',
+  template: `
+    <div class="key-pad-wrapper">
+      <div class="key-pad-model-wrapper" *ngIf="showValue">
+        <co-responsive-text class="key-pad-model" [text]="internalModel" [class.negative]="isNegative"></co-responsive-text>
+      </div>
+      <div class="key-pad-button-wrapper">
+        <div class="key-pad-button button-7" (click)="handleButtonClick('7')"><co-responsive-text class="key-pad-button-text" [text]="'7'"></co-responsive-text></div>
+        <div class="key-pad-button button-8" (click)="handleButtonClick('8')"><co-responsive-text class="key-pad-button-text" [text]="'8'"></co-responsive-text></div>
+        <div class="key-pad-button button-9" (click)="handleButtonClick('9')"><co-responsive-text class="key-pad-button-text" [text]="'9'"></co-responsive-text></div>
+        <div class="key-pad-button button-bs" (click)="handleBsClick($event)">
+          <co-icon [iconData]="iconCacheService.getIcon(icons.DeleteLeftRegular)"></co-icon>
+        </div>
+        <div class="key-pad-button button-4" (click)="handleButtonClick('4')"><co-responsive-text class="key-pad-button-text" [text]="'4'"></co-responsive-text></div>
+        <div class="key-pad-button button-5" (click)="handleButtonClick('5')"><co-responsive-text class="key-pad-button-text" [text]="'5'"></co-responsive-text></div>
+        <div class="key-pad-button button-6" (click)="handleButtonClick('6')"><co-responsive-text class="key-pad-button-text" [text]="'6'"></co-responsive-text></div>
+        <div class="key-pad-button button-minus" (click)="handleMinusClick($event)"><co-responsive-text class="key-pad-button-text" [text]="'-'"></co-responsive-text></div>
+        <div class="key-pad-button button-1" (click)="handleButtonClick('1')"><co-responsive-text class="key-pad-button-text" [text]="'1'"></co-responsive-text></div>
+        <div class="key-pad-button button-2" (click)="handleButtonClick('2')"><co-responsive-text class="key-pad-button-text" [text]="'2'"></co-responsive-text></div>
+        <div class="key-pad-button button-3" (click)="handleButtonClick('3')"><co-responsive-text class="key-pad-button-text" [text]="'3'"></co-responsive-text></div>
+        <div class="key-pad-button button-enter" (click)="handleEnterClick($event)">
+          <co-responsive-text class="key-pad-button-text" [text]="'enter'"></co-responsive-text>
+        </div>
+        <div class="key-pad-button button-0" (click)="handleButtonClick('0')"><co-responsive-text class="key-pad-button-text" [text]="'0'"></co-responsive-text></div>
+        <div class="key-pad-button button-dot" (click)="handleButtonClick('.')"><co-responsive-text class="key-pad-button-text" [text]="'.'"></co-responsive-text></div>
+      </div>
+    </div>
+    `,
+  encapsulation: ViewEncapsulation.None
+})
+export class KeyPadComponent {
+  public icons: typeof Icon = Icon;
+
+  @Input()
+  public set model(value: number) {
+    this._model = value;
+    this._internalModel = this._model + "";
+  }
+
+  public get model(): number {
+    return this._model;
+  }
+
+  @Input()
+  public showValue: boolean = true;
+
+  @Input()
+  public resetModelOnInit: boolean = true;
+
+  @Input()
+  public emitModelChangeOnEnter: boolean = true;
+
+  @Output()
+  public modelChange: EventEmitter<number> = new EventEmitter<number>();
+
+  @Output()
+  public internalModelChange: EventEmitter<string> = new EventEmitter<string>();
+
+  @Output()
+  public enterClick: EventEmitter<void> = new EventEmitter<void>();
+
+  @HostBinding('class.co-key-pad')
+  public showClass() {
+    return true;
+  }
+
+  @HostListener('window:keydown', ['$event'])
+  public handleKeyDown(event: KeyboardEvent) {
+    if (document.activeElement instanceof HTMLBodyElement) {
+      this._keyDown(event);
+    }
+  }
+
+  private readonly _validKeyMap: Map<KeyboardCode | string, string> = new Map<KeyboardCode, string>([
+    [KeyboardCode.Digit0, "0"],
+    [KeyboardCode.Digit1, "1"],
+    [KeyboardCode.Digit2, "2"],
+    [KeyboardCode.Digit3, "3"],
+    [KeyboardCode.Digit4, "4"],
+    [KeyboardCode.Digit5, "5"],
+    [KeyboardCode.Digit6, "6"],
+    [KeyboardCode.Digit7, "7"],
+    [KeyboardCode.Digit8, "8"],
+    [KeyboardCode.Digit9, "9"],
+    [KeyboardCode.Numpad0, "0"],
+    [KeyboardCode.Numpad1, "1"],
+    [KeyboardCode.Numpad2, "2"],
+    [KeyboardCode.Numpad3, "3"],
+    [KeyboardCode.Numpad4, "4"],
+    [KeyboardCode.Numpad5, "5"],
+    [KeyboardCode.Numpad6, "6"],
+    [KeyboardCode.Numpad7, "7"],
+    [KeyboardCode.Numpad8, "8"],
+    [KeyboardCode.Numpad9, "9"],
+    [KeyboardCode.NumpadDecimal, "."],
+    [KeyboardCode.Period, "."]
+  ])
+
+  private _init: boolean = true;
+
+  constructor(public iconCacheService: IconCacheService) {
+  }
+
+  public set internalModel(value: string) {
+    this._internalModel = value;
+    this.isNegative = parseFloat(this._internalModel) < 0;
+    this.internalModelChange.emit(this._internalModel);
+  }
+
+  public get internalModel(): string {
+    return this._internalModel;
+  }
+
+  public isNegative: boolean = false;
+
+  private _model: number = 0;
+  private _internalModel: string = "0";
+  private _maxCharacters: number = 11;
+
+  public handleMinusClick(event: MouseEvent | KeyboardEvent): void {
+    const model: number = parseFloat(this.internalModel);
+    if (model !== 0) {
+      if (model < 0) {
+        this.internalModel = Math.abs(model) + "";
+      } else {
+        this.internalModel = -model + "";
+      }
+    }
+    this._emitModelChange();
+  }
+
+  public handleClearClick(event: MouseEvent | KeyboardEvent): void {
+    this.internalModel = "0";
+    this._emitModelChange();
+  }
+
+  public handleBsClick(event: MouseEvent | KeyboardEvent): void {
+    let wish: string = this.internalModel;
+    wish = wish.slice(0, wish.length - 1) || "0";
+    if (!isNaN(parseFloat(wish))) {
+      this.internalModel = parseFloat(wish) + "";
+    }
+    this._emitModelChange();
+  }
+
+  public handleButtonClick(chr: string): void {
+    this._updateModel(chr);
+  }
+
+  public handleEnterClick(event: MouseEvent | KeyboardEvent): void {
+    this._emitModelChange(true);
+    this.enterClick.emit();
+  }
+
+  private _updateModel(value: string): void {
+    if (this.resetModelOnInit && this._init) {
+      this._internalModel = "0";
+      this._init = false;
+    }
+    if (value === undefined || value === null ||
+      (value === '.' && this.internalModel.indexOf('.') > -1) ||
+      this.internalModel.length >= this._maxCharacters) {
+      return;
+    }
+    this.internalModel = this.internalModel !== "0" ? this.internalModel + value : value;
+    this._emitModelChange();
+  }
+
+  private _keyDown(event: KeyboardEvent): void {
+    if (this._isEnter(event)) {
+      this.handleEnterClick(event);
+    } else if (this._isMinus(event)) {
+      this.handleMinusClick(event);
+    } else if (this._isEscape(event)) {
+      this.handleClearClick(event);
+    } else if (this._isBackspace(event)) {
+      this.handleBsClick(event);
+    } else {
+      this._updateModel(this._validKeyMap.get(event.code));
+    }
+  }
+
+  private _isEnter(event: KeyboardEvent): boolean {
+    return event.code === KeyboardCode.Enter || event.code === KeyboardCode.NumpadEnter;
+  }
+
+  private _isMinus(event: KeyboardEvent): boolean {
+    return event.code === KeyboardCode.Minus || event.code === KeyboardCode.NumpadSubtract;
+  }
+
+  private _isEscape(event: KeyboardEvent): boolean {
+    return event.code === KeyboardCode.Escape;
+  }
+
+  private _isBackspace(event: KeyboardEvent): boolean {
+    return event.code === KeyboardCode.Backspace;
+  }
+
+  private _emitModelChange(enter: boolean = false): void {
+    if ((enter && this.emitModelChangeOnEnter) || (!enter && !this.emitModelChangeOnEnter)) {
+      const model: number = parseFloat(this.internalModel);
+      if (!isNaN(model)) {
+        if (enter && this.emitModelChangeOnEnter) {
+          this.model = model;
+        }
+        this.modelChange.emit(model);
+      }
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/key-pad/key-pad.module.ts

@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {KeyPadComponent} from './key-pad.component';
+import {IconModule, ResponsiveTextModule} from '@colijnit/corecomponents_v12';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IconModule,
+    ResponsiveTextModule
+  ],
+  declarations: [
+    KeyPadComponent
+  ],
+  exports: [
+    KeyPadComponent
+  ]
+})
+export class KeyPadModule {
+}

package/projects/sharedcomponents/src/lib/components/layout-switcher/layout-switcher.component.ts

@@ -0,0 +1,98 @@
+import {Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation} from "@angular/core";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {Icon} from "../../enum/icon.enum";
+import {IconCacheService} from "../../service/icon-cache.service";
+
+
+@Component({
+  selector: "co-layout-switcher",
+  template: `
+    <div class="mask-wrapper" [class.mask-wrapper-active]='showMaskSidebar' @showHideSidebar>
+      <div class="icon-wrapper" (click)="toggleMaskSidebar()">
+        <co-icon class="icon-mask" [iconData]="iconCacheService.getIcon(icon.BringForwardRegular)" [@positionIcon]="showMaskSidebar"></co-icon>
+
+        <co-icon class='icon-mask-sidebar-handle' [@positionHandle]='showMaskSidebar' [iconData]="showMaskSidebar ? iconCacheService.getIcon(this.icon.AngleLeftSolid) : iconCacheService.getIcon(this.icon.AngleRightSolid)"></co-icon>
+      </div>
+
+      <div class="mask-content" *ngIf="showMaskSidebar" @showHideSidebar>
+        <span *ngFor='let item of this.layoutItems' [class.active]="this.activeIndex === this.layoutItems.indexOf(item)" [textContent]="item" (click)='activeIndex = this.layoutItems.indexOf(item)' ></span>
+      </div>
+    </div>
+
+  `,
+  animations: [
+    trigger("showHideSidebar", [
+      state("void", style({"width": "0"})),
+      state("*", style({"width": "*"})),
+      transition("void <=> *", animate(200))
+    ]),
+    trigger("positionIcon", [
+      state("true", style({"left": "70px"})),
+      state("false", style({"left": "10px"})),
+      transition("true <=> false", animate(200))
+    ]),
+    trigger("positionHandle", [
+      state("true", style({"left": "15px"})),
+      state("false", style({"left": "75px"})),
+      transition("true <=> false", animate(200))
+    ])
+  ],
+  encapsulation: ViewEncapsulation.None
+})
+export class LayoutSwitcherComponent {
+  public readonly icon: typeof Icon = Icon;
+
+  @HostBinding('class.co-layout-switcher')
+  public showClass() {
+    return true;
+  }
+
+  @Input()
+  public layoutItems: string[] = [];
+
+  @Output()
+  public layoutSwitchEmit:EventEmitter<string> = new EventEmitter<string>();
+
+  public get activeIndex(): number {
+    return this._activeIndex;
+  }
+
+  public set activeIndex(index) {
+    this._activeIndex = index;
+    this.toggleMaskSidebar();
+    this.layoutSwitchEmit.emit(this.layoutItems[index]);
+  }
+
+  public showMaskSidebar: boolean = false;
+
+  private _activeIndex: number = 0;
+
+
+  constructor(public iconCacheService: IconCacheService) {
+  }
+
+  public toggleMaskSidebar(): void {
+    this.showMaskSidebar = !this.showMaskSidebar;
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+}

package/projects/sharedcomponents/src/lib/components/layout-switcher/layout-switcher.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {LayoutSwitcherComponent} from "./layout-switcher.component";
+import {IconModule} from "@colijnit/corecomponents_v12";
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IconModule
+  ],
+  declarations: [
+    LayoutSwitcherComponent,
+  ],
+  exports: [
+    LayoutSwitcherComponent
+  ]
+})
+export class LayoutSwitcherModule {
+
+}

package/projects/sharedcomponents/src/lib/components/linear-gauge/co-linear-gauge.component.ts

@@ -0,0 +1,57 @@
+import { Component, HostBinding, Input, ViewEncapsulation } from "@angular/core";
+import { GaugeColor } from "../../enum/gauge-color.enum";
+
+@Component({
+  selector: "co-linear-gauge",
+  template: `
+    <div class="linear-gauge"
+         [style.background]="getStyle()"
+         [style.border-color]="color"
+         [textContent]="count ? count : ''"
+    ></div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class CoLinearGaugeComponent {
+
+  @Input()
+  public set value(value: number) {
+    this._value = value;
+    this._setColor();
+  }
+
+  public get value(): number {
+    return this._value;
+  }
+
+  @Input()
+  public count: number;
+
+  @HostBinding("class.co-linear-gauge")
+  public showClass() {
+    return true;
+  }
+
+  private _value: number;
+  public color: GaugeColor = GaugeColor.Low;
+
+  public getStyle(): string {
+    return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
+  }
+
+  private _setColor(): void {
+    if (this.value <= 0) {
+      this.color = GaugeColor.Lowest;
+    } else if (this.value >= 1 && this.value < 25) {
+      this.color = GaugeColor.Low;
+    } else if (this.value >= 25 && this.value < 50) {
+      this.color = GaugeColor.MediumLow;
+    } else if (this.value >= 50 && this.value < 75) {
+      this.color = GaugeColor.MediumHigh;
+    } else if (this.value >= 75 && this.value < 100) {
+      this.color = GaugeColor.High;
+    } else if (this.value >= 100) {
+      this.color = GaugeColor.Highest;
+    }
+  }
+}

package/projects/sharedcomponents/src/lib/components/linear-gauge/co-linear-gauge.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { CoLinearGaugeComponent } from "./co-linear-gauge.component";
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    CoLinearGaugeComponent
+  ],
+  exports: [
+    CoLinearGaugeComponent
+  ]
+})
+export class CoLinearGaugeModule {
+}

package/projects/sharedcomponents/src/lib/components/login/components/login-base.component.ts

@@ -0,0 +1,98 @@
+import {Directive, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import {FormMasterService} from '@colijnit/corecomponents_v12';
+import {RecaptchaComponent} from 'ng-recaptcha';
+import {Icon} from '../../../enum/icon.enum';
+import {IconCacheService} from '../../../service/icon-cache.service';
+import {LoginService} from '../service/login.service';
+import {LoginComponentExtraActionType} from '../../../enum/login-component-extra-action-type.enum';
+import {LoginStatus} from '@colijnit/ioneconnector/build/enum/login-status.enum';
+import {LoginResponse} from '@colijnit/ioneconnector/build/model/login-response';
+
+@Directive()
+export abstract class LoginBaseComponent {
+    public readonly icons: typeof Icon = Icon;
+    public readonly extraActions: typeof LoginComponentExtraActionType = LoginComponentExtraActionType;
+
+    @ViewChild(RecaptchaComponent)
+    public recaptchaComponent: RecaptchaComponent;
+
+    @Input()
+    public title: string;
+
+    @Input()
+    public username: string;
+
+    @Input()
+    public password: string;
+
+    @Input()
+    public upId: number;
+
+    @Input()
+    public securityCode: string;
+
+    @Input()
+    public clientType: string;
+
+    @Input()
+    public clientVersion: string;
+
+    @Input()
+    public clientCompileRevision: string;
+
+    @Input()
+    public clientLanguage: string;
+
+    @Input()
+    public clientDeviceFingerprint: string;
+
+    @Input()
+    public showRecaptcha: boolean = false;
+
+    @Input()
+    public reCaptchaSiteKey: string;
+
+    @Input()
+    public extraAction: LoginComponentExtraActionType;
+
+    @Output()
+    public showChangePasswordForm: EventEmitter<string> = new EventEmitter<string>();
+
+    @Output()
+    public showMFAForm: EventEmitter<string> = new EventEmitter<string>();
+
+    @Output()
+    public loginReponseReceived: EventEmitter<LoginResponse> = new EventEmitter<LoginResponse>();
+
+    public submitButtonEnabled: boolean;
+    public validationErrorMessage: string;
+    public validationMessage: string;
+
+    constructor(
+        public iconCacheService: IconCacheService,
+        protected loginService: LoginService,
+        private _formMasterService: FormMasterService
+    ) {
+    }
+
+    protected getEnterVerificationCodeLabel(loginStatus: LoginStatus): string {
+        switch (loginStatus) {
+            case LoginStatus.MFA_SMS_CODE_CONFIRMATION_SENT:
+                return "ENTER_SMS_VERIFICATION_CODE";
+            case LoginStatus.MFA_EMAIL_CODE_CONFIRMATION_SENT:
+                return "ENTER_EMAIL_VERIFICATION_CODE";
+            case LoginStatus.MFA_GOOGLE_CODE_CONFIRMATION_AWAIT:
+                return "ENTER_GOOGLE_VERIFICATION_CODE";
+            default:
+                return "";
+        }
+    }
+
+    public hideRecaptcha(): void {
+        this.showRecaptcha = false;
+    }
+
+    public onFormValidityChange(valid: boolean): void {
+        this.submitButtonEnabled = valid;
+    }
+}