@testgorilla/tgo-ui 2.10.999 → 2.11.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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