@testgorilla/tgo-ui 2.10.1 → 2.10.2

package/projects/tgo-canopy-ui/components/paginator/paginator.component.ts

@@ -1,67 +0,0 @@
-import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
-import { MatPaginatorSelectConfig, PageEvent } from '@angular/material/paginator';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-paginator',
-  templateUrl: './paginator.component.html',
-  styleUrls: ['./paginator.component.scss']
-})
-export class PaginatorComponent {
-  /**
-   * Paginator size options
-   *
-   * @type {number[]}
-   * @memberof PaginatorComponent
-   */
-  @Input() pageSizeOptions = [10, 25, 50];
-
-  /**
-   * Data length
-   *
-   * @type {number}
-   * @memberof PaginatorComponent
-   */
-  @Input() length = 0;
-
-  /**
-   * Page size
-   *
-   * @type {number}
-   * @memberof PaginatorComponent
-   */
-  @Input() pageSize = 25;
-
-  /**
-   * Disabled
-   *
-   * @type {boolean}
-   * @memberOf PaginatorComponent
-   */
-  @Input() disabled = false;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof PaginatorComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  @Output() paginatorChange: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
-
-  selectConfig: MatPaginatorSelectConfig = { panelClass: 'ui-dropdown-list' };
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  onPaginatorChange(paginator: PageEvent) {
-    this.paginatorChange.emit(paginator);
-  }
-}

package/projects/tgo-canopy-ui/components/password-criteria/password.component.html

@@ -1,31 +0,0 @@
-<div class="password-criteria-container">
-
-  <ui-field [applicationTheme]="'dark'"
-            [formControl]="formControl"
-            [type]="'password'"
-            [placeholder]="('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate : language) + (required ? ' *' : '')"
-            (keydown.enter)="showError = true"
-            (focusout)="showError = true"
-  ></ui-field>
-
-  <div class="criteria-container" *ngIf="showCriteria">
-
-    <div class="progress">
-      <ui-progress-bar [progress]="progressValue === 1 ? 0 : progressValue" [applicationTheme]="'dark'"></ui-progress-bar>
-    </div>
-
-    <div
-      *ngFor="let criterion of criteria"
-      class="criterion"
-      [ngClass]="{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }"
-    >
-      <ui-icon [size]="'24'"
-               [color]="'rebrand-black'"
-               [name]="!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'"
-               applicationTheme="dark"
-      ></ui-icon>
-      <span>{{ criterion.translateKey | uiTranslate : language }}</span>
-    </div>
-  </div>
-
-</div>

package/projects/tgo-canopy-ui/components/password-criteria/password.component.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PasswordComponent } from './password.component';
-import { FieldComponentModule } from '../field/field.component.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-
-@NgModule({
-  declarations: [PasswordComponent],
-  exports: [PasswordComponent],
-  imports: [
-    CommonModule,
-    FieldComponentModule,
-    ReactiveFormsModule,
-    IconComponentModule,
-    ProgressBarComponentModule,
-    UiTranslatePipe,
-  ],
-})
-export class PasswordComponentModule {}

package/projects/tgo-canopy-ui/components/password-criteria/password.component.scss

@@ -1,56 +0,0 @@
-@use '../../theme/variables' as *;
-
-.password-criteria-container {
-  .criteria-container {
-    margin-top: 14px;
-
-    .progress {
-      margin-bottom: 16px;
-    }
-
-    .criterion {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 8px;
-
-      ui-icon {
-       ::ng-deep svg {
-          color: $grayscale-20;
-        }
-      }
-
-      span {
-        text-align: center;
-        font-size: 14px;
-        line-height: 23px;
-        color: $black;
-      }
-
-      &.passed {
-        ui-icon {
-          ::ng-deep svg {
-            color: $black;
-          }
-        }
-
-        span {
-          color: $grayscale-50;
-          text-decoration: line-through;
-        }
-      }
-
-      &.error {
-        ui-icon {
-          ::ng-deep svg {
-            color: $error-50;
-          }
-        }
-
-        span {
-          color: $error-50;
-        }
-      }
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/password-criteria/password.component.spec.ts

@@ -1,45 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PasswordComponent } from './password.component';
-import { FormControl } from "@angular/forms";
-import { NO_ERRORS_SCHEMA } from "@angular/core";
-import { LanguageService } from "../../utils/localization/language.service";
-import { LanguageServiceStub } from "../../utils/localization/language.service.mocks";
-import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
-
-describe('PasswordCriteriaComponent', () => {
-  let component: PasswordComponent;
-  let fixture: ComponentFixture<PasswordComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PasswordComponent],
-      schemas: [NO_ERRORS_SCHEMA],
-      imports: [UiTranslatePipe],
-      providers: [{ provide: LanguageService, useClass: LanguageServiceStub },]
-    });
-    fixture = TestBed.createComponent(PasswordComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should count passed criteria correctly', () => {
-    // @ts-ignore
-    component.formControl = new FormControl('Test123@');
-    component.checkCriteria();
-    // @ts-ignore
-    expect(component.countPassed()).toBe(4);
-  });
-
-  it('should update progress value correctly', () => {
-    // @ts-ignore
-    component.formControl = new FormControl('Test123@');
-    component.checkCriteria();
-    // @ts-ignore
-    expect(component.progressValue).toBe(80);
-  });
-});

package/projects/tgo-canopy-ui/components/password-criteria/password.component.stories.ts

@@ -1,49 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { transformTheme } from '../../utils/transform-theme';
-import { PasswordComponent } from './password.component';
-import { FieldComponentModule } from '../field/field.component.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
-
-export default {
-  title: 'Password',
-  component: PasswordComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [PasswordComponent],
-      imports: [
-        IconComponentModule,
-        FieldComponentModule,
-        BrowserAnimationsModule,
-        ReactiveFormsModule,
-        ProgressBarComponentModule,
-        UiTranslatePipe
-      ],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Default = Template.bind({});
-
-Default.args = {};
-
-Default.parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FwPmwOHXkG8SqzPCqxiK23/Canopy-UI-Components-library?type=design&node-id=2423-14314&mode=design&t=lyl2yImApRluKzwj-4',
-  },
-};

package/projects/tgo-canopy-ui/components/password-criteria/password.component.ts

@@ -1,106 +0,0 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, forwardRef, Input, Output } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import { LanguageService } from '../../utils/localization/language.service';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-@Component({
-  selector: 'ui-password-criteria',
-  templateUrl: './password.component.html',
-  styleUrls: ['./password.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => PasswordComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PasswordComponent implements ControlValueAccessor {
-  /**
-   * The language to be used
-   *
-   * @type {Language}
-   * @memberof PasswordComponent
-   */
-  @Input() language = LanguageService.defaultLanguage;
-
-  /**
-   * Show criteria for password. Defaults true
-   *
-   * @type {boolean}
-   * @memberof PasswordComponent
-   */
-  @Input() showCriteria = true;
-
-  /**
-   * Password is required or not
-   *
-   * @type {boolean}
-   * @memberof PasswordComponent
-   */
-  @Input() required = false;
-
-  @Output() passwordChange = new EventEmitter<string>();
-
-  @Output() allCriteriaPassed = new EventEmitter<boolean>();
-
-  protected formControl = new FormControl('', Validators.required);
-  protected criteriaPassed: { [key: string]: boolean } = {};
-  protected showError: boolean;
-  protected progressValue: number;
-  protected criteria: { translateKey: string; key: string }[] = [
-    { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },
-    { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },
-    { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },
-    { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },
-    { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },
-  ];
-
-  constructor(private readonly destroyRef: DestroyRef) {
-    this.formControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      this.checkCriteria();
-    });
-  }
-
-  checkCriteria(): void {
-    const password = this.formControl.value ?? '';
-    this.criteriaPassed = {
-      hasLowercase: /^(?=.*?[a-z])/.test(password),
-      hasUppercase: /^(?=.*?[A-Z])/.test(password),
-      hasNumber: /^(?=.*?[0-9])/.test(password),
-      hasSpecialChar: /^(?=.*?[" !#$%&'()*+,-./:;<=>?@[\]^_`{|}~])/.test(password),
-      hasMinLength: password.length >= 12,
-    };
-
-    const passedCount = this.countPassed();
-    this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);
-    this.passwordChange.emit(password);
-    this.allCriteriaPassed.emit(passedCount === Object.keys(this.criteriaPassed).length);
-    this.onChange(password);
-  }
-
-  countPassed(): number {
-    let count = 0;
-    for (const key in this.criteriaPassed) {
-      if (this.criteriaPassed.hasOwnProperty(key) && this.criteriaPassed[key]) {
-        count++;
-      }
-    }
-    return count;
-  }
-  onChange = (v: any) => {};
-  onTouch = () => {};
-
-  writeValue(obj: any): void {
-    this.formControl.setValue(obj);
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-}

package/projects/tgo-canopy-ui/components/password-strength/password-strength.component.html

@@ -1,19 +0,0 @@
-<div class="criteria-container">
-
-  <div class="progress">
-    <ui-progress-bar [progress]="progressValue === 1 ? 0 : progressValue" [applicationTheme]="applicationTheme"></ui-progress-bar>
-  </div>
-
-  <div
-    *ngFor="let criterion of criteria"
-    class="criterion"
-    [ngClass]="{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }"
-  >
-    <ui-icon [size]="'24'"
-             [color]="'rebrand-black'"
-             [name]="!criteriaPassed[criterion.key] ? infoIcon : checkIcon"
-             [applicationTheme]="applicationTheme"
-    ></ui-icon>
-    <span>{{ criterion.translateKey | uiTranslate : language }}</span>
-  </div>
-</div>

package/projects/tgo-canopy-ui/components/password-strength/password-strength.component.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PasswordStrengthComponent } from './password-strength.component';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-
-@NgModule({
-  declarations: [PasswordStrengthComponent],
-  imports: [CommonModule, IconComponentModule, ProgressBarComponentModule, UiTranslatePipe],
-  exports: [PasswordStrengthComponent],
-})
-export class PasswordStrengthComponentModule {}

package/projects/tgo-canopy-ui/components/password-strength/password-strength.component.scss

@@ -1,54 +0,0 @@
-@use '../../theme/variables' as *;
-
-.criteria-container {
-  margin-top: 14px;
-
-  .progress {
-    margin-bottom: 16px;
-  }
-
-  .criterion {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-
-    ui-icon {
-      ::ng-deep svg {
-        color: $grayscale-20;
-      }
-    }
-
-    span {
-      text-align: center;
-      font-size: 14px;
-      line-height: 23px;
-      color: $black;
-    }
-
-    &.passed {
-      ui-icon {
-        ::ng-deep svg {
-          color: $black;
-        }
-      }
-
-      span {
-        color: $grayscale-50;
-        text-decoration: line-through;
-      }
-    }
-
-    &.error {
-      ui-icon {
-        ::ng-deep svg {
-          color: $error-50;
-        }
-      }
-
-      span {
-        color: $error-50;
-      }
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/password-strength/password-strength.component.spec.ts

@@ -1,40 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { NO_ERRORS_SCHEMA } from "@angular/core";
-import { LanguageService } from "../../utils/localization/language.service";
-import { LanguageServiceStub } from "../../utils/localization/language.service.mocks";
-import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
-import { PasswordStrengthComponent } from './password-strength.component';
-
-describe('PasswordStrengthComponent', () => {
-  let component: PasswordStrengthComponent;
-  let fixture: ComponentFixture<PasswordStrengthComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PasswordStrengthComponent],
-      schemas: [NO_ERRORS_SCHEMA],
-      imports: [UiTranslatePipe],
-      providers: [{ provide: LanguageService, useClass: LanguageServiceStub },]
-    });
-    fixture = TestBed.createComponent(PasswordStrengthComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should count passed criteria correctly', () => {
-    component.checkCriteria('Test123@');
-    // @ts-expect-error
-    expect(component.countPassed()).toBe(4);
-  });
-
-  it('should update progress value correctly', () => {
-    component.checkCriteria('Test123@');
-    // @ts-ignore
-    expect(component.progressValue).toBe(80);
-  });
-});

package/projects/tgo-canopy-ui/components/password-strength/password-strength.component.stories.ts

@@ -1,50 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { FieldComponentModule } from '../field/field.component.module';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ReactiveFormsModule } from '@angular/forms';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { PasswordStrengthComponent } from './password-strength.component';
-import { transformTheme } from '../../utils/transform-theme';
-
-export default {
-  title: 'Password Strength',
-  component: PasswordStrengthComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [PasswordStrengthComponent],
-      imports: [
-        IconComponentModule,
-        FieldComponentModule,
-        BrowserAnimationsModule,
-        ReactiveFormsModule,
-        ProgressBarComponentModule,
-        UiTranslatePipe,
-      ],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const NotFullyPassed = Template.bind({});
-NotFullyPassed.args = {
-  password: 'Test123',
-};
-
-export const FullyPassed = Template.bind({});
-FullyPassed.args = {
-  password: 'Test123@qqqqqq',
-};

package/projects/tgo-canopy-ui/components/password-strength/password-strength.component.ts

@@ -1,98 +0,0 @@
-import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { LanguageService } from '../../utils/localization/language.service';
-import { IconName } from '../icon/icon.model';
-
-@Component({
-  selector: 'ui-password-strength',
-  templateUrl: './password-strength.component.html',
-  styleUrls: ['./password-strength.component.scss'],
-})
-export class PasswordStrengthComponent {
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof PasswordStrengthComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * The language to be used
-   * @property language
-   * @type {Language}
-   * @memberof PasswordStrengthComponent
-   */
-  @Input() language = LanguageService.defaultLanguage;
-
-  /**
-   * The password that needs to be checked
-   * @property password
-   * @type {string}
-   * @memberof PasswordStrengthComponent
-   */
-  @Input() set password(value: string) {
-    this._password = value;
-    this.checkCriteria(this._password);
-  }
-
-  /**
-   * Event that outputs validation check result
-   * @property validationCheck
-   * @type {boolean}
-   * @memberof PasswordStrengthComponent
-   */
-  @Output() validationCheck = new EventEmitter<boolean>();
-
-  protected progressValue: number;
-  protected criteriaPassed: { [key: string]: boolean } = {};
-  private _password = '';
-  protected criteria: { translateKey: string; key: string }[] = [
-    { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },
-    { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },
-    { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },
-    { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },
-    { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },
-  ];
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
-  ) {
-    if (this.defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  checkCriteria(password: string): void {
-    this.criteriaPassed = {
-      hasLowercase: /^(?=.*?[a-z])/.test(password),
-      hasUppercase: /^(?=.*?[A-Z])/.test(password),
-      hasNumber: /^(?=.*?[0-9])/.test(password),
-      hasSpecialChar: /^(?=.*?[" !#$%&'()*+,-./:;<=>?@[\]^_`{|}~])/.test(password),
-      hasMinLength: password.length >= 12,
-    };
-
-    const passedCount = this.countPassed();
-    this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);
-    this.validationCheck.emit(passedCount === Object.keys(this.criteriaPassed).length);
-  }
-
-  private countPassed(): number {
-    let count = 0;
-    for (const key in this.criteriaPassed) {
-      if (this.criteriaPassed.hasOwnProperty(key) && this.criteriaPassed[key]) {
-        count++;
-      }
-    }
-    return count;
-  }
-
-  get infoIcon(): IconName {
-    return this.applicationTheme === 'classic' ? 'Info' : 'Info-in-line';
-  }
-
-  get checkIcon(): IconName {
-    return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';
-  }
-}

package/projects/tgo-canopy-ui/components/password-strength-demo/password-strength-demo.component.html

@@ -1,2 +0,0 @@
-<ui-field [formControl]="password"></ui-field>
-<ui-password-strength [password]="password.value ?? ''"></ui-password-strength>