@colijnit/sharedcomponents 261.1.2 → 261.20.0

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

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

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

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

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

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

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

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