@colijnit/sharedcomponents 261.1.0 → 261.1.2

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,63 @@
+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 {
+    if (this.value == null) {
+      return GaugeColor.Disabled;
+    } else {
+      return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
+    }
+  }
+
+  private _setColor(): void {
+    if (this.value == null) {
+      this.color = GaugeColor.Disabled;
+    } else 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/input-code/input-code.component.ts

@@ -0,0 +1,187 @@
+import {ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, QueryList, ViewChildren, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  selector: 'co-input-code',
+  template: `
+      <div class="input-code-inputs">
+          <ng-container *ngFor="let value of inputArray; trackBy:trackByIndex; let i = index;">
+              <input class="value-text" *ngIf="!isSeparator(i)" size="1" (paste)="onPaste($event,i)"
+                     [value]="value" (keyup)="onChangeInput($event.target, i)"
+                     (focus)="onFocusInput($event.target, i)" #codeInput>
+              <span [textContent]="getSeparator(i)" *ngIf="isSeparator(i)" class="separator"></span>
+          </ng-container>
+      </div>
+      <input type="hidden" [(ngModel)]="model">
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class InputCodeComponent {
+  @ViewChildren('codeInput')
+  public codeInputs: QueryList<ElementRef>;
+
+  @Input()
+  public model: string;
+
+  // Pattern 3-2+5 will equal 3 inputs, dash separator, 2 inputs, plus separator, 5 inputs
+  @Input()
+  public set codePattern(pattern: string) {
+    this._reset();
+    if (pattern) {
+      this._parsePattern(pattern);
+    }
+    this.inputArray = [];
+    for (let i: number = 0, len: number = this.inputCount + this.separators.length; i < len; i++) {
+      this.inputArray.push('');
+    }
+    this._changeDetector.detectChanges();
+  }
+
+  @Output()
+  public completeChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  @Output()
+  public modelChange: EventEmitter<string> = new EventEmitter<string>();
+
+  @HostBinding('class.co-input-code')
+  public showClass() {
+    return true;
+  }
+
+  public inputArray: string[] = [];
+
+  public inputCount: number;
+
+  public separatorPositions: number[] = [];
+
+  public separators: string[] = [];
+
+  // aka 'valid'
+  public complete: boolean;
+
+  public trackByIndex = (index: number): number => {
+    return index;
+  };
+
+  constructor(
+    private _changeDetector: ChangeDetectorRef
+  ) {
+  }
+
+  ngOnDestroy(): void {
+    this.codeInputs.reset([]);
+  }
+
+  public getSeparator(index: number): string {
+    return this.separators[this.separatorPositions.indexOf(index)];
+  }
+
+  public isSeparator(index: number): boolean {
+    return this.separatorPositions.indexOf(index) > -1;
+  }
+
+  public onChangeInput(target: EventTarget, index: number): void {
+    if (!(target instanceof HTMLInputElement)) {
+      return;
+    }
+    const value: string = target.value;
+    const newValue: string = (value && value.length > 0) ? value[value.length - 1] : '';
+    if (value !== this.inputArray[index]) {
+      target.value = newValue;
+      this.inputArray[index] = newValue;
+      this.model = this._getInputValueArray().join('');
+      this.modelChange.next(this.model);
+      this._selectNextInput(index);
+    }
+    this._checkValidation();
+    this._changeDetector.detectChanges();
+  }
+
+  public onFocusInput(target: EventTarget, index: number): void {
+    if (target instanceof HTMLInputElement) {
+      target.select();
+    }
+    // target.value = "";
+    // this.inputArray[index] = "";
+  }
+
+  public onPaste(event: ClipboardEvent, index: number): void {
+    event.stopPropagation();
+    event.preventDefault();
+
+    const value: string = event.clipboardData.getData('text');
+    if (value.length < this.inputArray.length) {
+      for (let i: number = index; i < value.length; i++) {
+        this.inputArray[this._calculateIndex(i)] = value[i];
+        this.model = this._getInputValueArray().join('');
+        this.modelChange.next(this.model);
+      }
+      this._focusOnLastInput();
+      this._checkValidation();
+    }
+  }
+
+  public clearInputNumbers(): void {
+    this.model = undefined;
+    this.modelChange.next(this.model);
+    this.inputArray.fill('');
+    this._focusOnFirstInput();
+  }
+
+  private _checkValidation(): void {
+    this.complete = this.model && this.model.length === this._getInputValueArray().length;
+    this.completeChange.emit(this.complete);
+  }
+
+  private _getInputValueArray(): string[] {
+    return this.inputArray.filter((val: string, index: number) => {
+      return !this.isSeparator(index);
+    });
+  }
+
+  private _parsePattern(pattern: string): void {
+    pattern = pattern.replace(/^\D+/g, '').replace(/\D+$/g, '');
+    let position: number = 0;
+    const numbers: number[] = (pattern.match(/\d+/g) || []).map(number => parseInt(number));
+    this.separators = pattern.match(/\D/g) || [];
+    this.separatorPositions = this.separators.map((separator: string, index: number) => {
+      position = pattern.indexOf(separator, position);
+      let offset: number = 0;
+      let count: number = index;
+      while (count >= 0) {
+        offset += numbers[count];
+        count--;
+      }
+      return index + offset;
+    });
+    this.inputCount = numbers.reduce((prev: number, curr: number) => prev + curr);
+  }
+
+  private _reset(): void {
+    this.inputCount = 0;
+    this.separators = [];
+    this.separatorPositions = [];
+  }
+
+  private _selectNextInput(index: number): void {
+    const nextIndex: number = index - this.separatorPositions.filter(pos => pos <= index).length + 1;
+    const nextInput: ElementRef = this.codeInputs.toArray()[nextIndex];
+    if (nextInput) {
+      nextInput.nativeElement.focus();
+    }
+  }
+
+  private _focusOnLastInput(): void {
+    const controlElement: ElementRef = this.codeInputs.toArray()[this.codeInputs.toArray().length - 1];
+    if (controlElement) {
+      controlElement.nativeElement.focus();
+    }
+  }
+
+  private _focusOnFirstInput(): void {
+    this.codeInputs.first.nativeElement.focus();
+  }
+
+  private _calculateIndex(index: number): number {
+    return index + this.separatorPositions.filter(pos => pos <= index).length;
+  }
+} 

package/projects/sharedcomponents/src/lib/components/login/components/input-code/input-code.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {InputCodeComponent} from './input-code.component';
+import {FormsModule} from '@angular/forms';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  declarations: [
+    InputCodeComponent
+  ],
+  exports: [
+    InputCodeComponent
+  ]
+})
+export class InputCodeModule {
+}

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

@@ -0,0 +1,150 @@
+import {Directive, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import {CoreDialogService, 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';
+import {LoginComponentPageType} from '../../../enum/login-component-page.type.enum';
+import {SharedComponentsDictionaryService} from '../../../translation/shared-components-dictionary.service';
+
+@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>();
+
+    public loginResponse: boolean = false;
+    public submitButtonEnabled: boolean;
+    public validationErrorMessage: string;
+    public validationMessage: string;
+    public showBarcode: boolean = false;
+
+    constructor(
+        public iconCacheService: IconCacheService,
+        public loginService: LoginService,
+        protected dictionaryService: SharedComponentsDictionaryService,
+        protected formMasterService: FormMasterService,
+        protected dialogService: CoreDialogService
+    ) {
+    }
+
+    public hideRecaptcha(): void {
+        this.showRecaptcha = false;
+    }
+
+    public onFormValidityChange(valid: boolean): void {
+        this.submitButtonEnabled = valid;
+    }
+
+    protected async handleLoginResponse(loginResponse: LoginResponse): Promise<void> {
+        // if (loginResponse && loginResponse.isLogInStatusSuccess()) {
+        //     const userHasToSetupGoogleMFA: boolean = await this.loginService.isUserHasToSetUpGoogleAuthentication();
+        //     if (userHasToSetupGoogleMFA) {
+        //         this.loginService.type = LoginComponentPageType.MFACodeSetup;
+        //         await this.defineBarCode();
+        //         this.showBarcode = true;
+        //         return;
+        //     }
+        // }
+        if (loginResponse.loginStatus === LoginStatus.LOGIN_INCORRECT) {
+            this.loginResponse = true;
+            this.validationErrorMessage = "MESSAGE_LOGIN_FAILURE";
+        } else if (loginResponse.loginStatus === LoginStatus.SERVER_NOT_READY) {
+            this.loginResponse = true;
+            this.validationErrorMessage = "MESSAGE_SERVER_NOT_READY";
+        } else if (loginResponse.loginStatus === LoginStatus.CLIENT_NOT_SUITABLE) {
+            this.loginResponse = true;
+            this.validationErrorMessage = "MESSAGE_LOGGED_CLIENT_FAILURE";
+        } else if (loginResponse.loginStatus === LoginStatus.SERVER_FAILED_TO_START) {
+            this.loginResponse = true;
+            this.validationErrorMessage = "MESSAGE_SERVER_FAILED_TO_START";
+        } else if (loginResponse.loginStatus === LoginStatus.MFA_CONFIRMATION_CODE_NOT_FOUND) {
+            this.loginResponse = true;
+            this.validationErrorMessage = "MFA_CONFIRMATION_CODE_NOT_FOUND";
+            this.clearMFAInput();
+        } else if (loginResponse.loginStatus === LoginStatus.MFA_SMS_CODE_CONFIRMATION_SENT
+              || loginResponse.loginStatus === LoginStatus.MFA_EMAIL_CODE_CONFIRMATION_SENT
+              || loginResponse.loginStatus === LoginStatus.MFA_GOOGLE_CODE_CONFIRMATION_AWAIT) {
+            this.loginService.loginStatus = loginResponse.loginStatus;
+            this.loginService.type = LoginComponentPageType.MFACodeEntry;
+            this.loginService.verificationCodeLabel = this.getEnterVerificationCodeLabel(loginResponse.loginStatus);
+        } else if (loginResponse.loginStatus === "SUCCESS") {
+            this.loginResponse = false;
+            this.loginService.userLoggedIn.next(loginResponse);
+        } else {
+            this.validationErrorMessage = "MESSAGE_LOGIN_FAILURE2";
+            this.clearMFAInput();
+        }
+    }
+
+    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 "";
+        }
+    }
+
+    protected async defineBarCode(): Promise<void> {
+
+    }
+
+    protected async clearMFAInput(): Promise<void> {
+
+    }
+}