@testgorilla/tgo-ui 2.10.999 → 2.11.1

package/projects/tgo-canopy-ui/utils/color-contrast.ts

@@ -0,0 +1,135 @@
+/**
+ * Function for adjusting the lightness of a color based on different events (hover, pressed, disabled).
+ * Accepts a hex color, transforms it to HSL, and based on color's L and event darkens or lightens it.
+ * Used to manage different colors based on application configuration
+ *
+ * @param hexColor color in hex format
+ * @param typeEvent interaction event
+ * @param theme
+ */
+export const adjustLightness = (hexColor: string, typeEvent: 'hover' | 'pressed' | 'disabled', theme: 'new' | 'classic' = 'new'): string => {
+  const hexRegex = /^#([0-9A-F]{3}){1,2}$/i;
+  if (hexColor && !hexRegex.test(hexColor)) {
+    throw new Error('Invalid HEX color format');
+  }
+
+  const hslColor = hexToHsl(hexColor);
+  const lightness = hslColor.l * 100;
+
+  if (theme === 'new') {
+    if (lightness > 70 && (typeEvent === 'hover' || typeEvent === 'pressed')) {
+      hslColor.l = clamp(hslColor.l - 10 / 100);
+    } else if (lightness < 30 && (typeEvent === 'hover' || typeEvent === 'pressed')) {
+      hslColor.l = clamp(hslColor.l + 10 / 100);
+    } else if (lightness < 70 && lightness > 30 && (typeEvent === 'hover' || typeEvent === 'pressed')) {
+      hslColor.l = clamp(hslColor.l - 10 / 100);
+    }
+  } else {
+    if (lightness > 70 && typeEvent === 'hover') {
+      hslColor.l = clamp(hslColor.l - 10 / 100);
+    } else if (lightness < 30 && typeEvent === 'hover') {
+      hslColor.l = clamp(hslColor.l + 10 / 100);
+    } else if (lightness < 70 && lightness > 30 && typeEvent === 'hover') {
+      hslColor.l = clamp(hslColor.l - 10 / 100);
+    } else if (lightness > 70 && typeEvent === 'pressed') {
+      hslColor.l = clamp(hslColor.l - 20 / 100);
+    } else if (lightness < 30 && typeEvent === 'pressed') {
+      hslColor.l = clamp(hslColor.l + 30 / 100);
+    } else if (lightness < 70 && lightness > 30 && typeEvent === 'pressed') {
+      hslColor.l = clamp(hslColor.l - 20 / 100);
+    } else if (lightness > 70 && typeEvent === 'disabled') {
+      hslColor.l = clamp(hslColor.l + 10 / 100);
+    } else if (lightness < 30 && typeEvent === 'disabled') {
+      hslColor.l = clamp(hslColor.l + 50 / 100);
+    } else if (lightness < 70 && lightness > 30 && typeEvent === 'disabled') {
+      hslColor.l = clamp(hslColor.l + 20 / 100);
+    }
+  }
+
+  return hslToHex(hslColor);
+};
+
+/**
+ * Transforms hex color to HSL in object variation.
+ * @param hexColor string value with hex color
+ */
+export const hexToHsl = (hexColor: string): { h: number; s: number; l: number } => {
+  const rgbColor = parseInt(hexColor.slice(1), 16);
+  const r = ((rgbColor >> 16) & 255) / 255;
+  const g = ((rgbColor >> 8) & 255) / 255;
+  const b = (rgbColor & 255) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+
+  let h = 0;
+  let s;
+  const l = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0; // grayscale
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+
+    h /= 6;
+  }
+
+  return { h, s, l };
+};
+
+/**
+ * Transforms HSL color, represented as an object and transforms it to hex string.
+ * @param hslColor accepts the HSL color like an object.
+ */
+export const hslToHex = (hslColor: { h: number; s: number; l: number }): string => {
+  const { h, s, l } = hslColor;
+
+  const hueToRgb = (p: number, q: number, t: number): number => {
+    if (t < 0) {
+      t += 1;
+    }
+    if (t > 1) {
+      t -= 1;
+    }
+    if (t < 1 / 6) {
+      return p + (q - p) * 6 * t;
+    }
+    if (t < 1 / 2) {
+      return q;
+    }
+    if (t < 2 / 3) {
+      return p + (q - p) * (2 / 3 - t) * 6;
+    }
+    return p;
+  };
+
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+
+  const r = hueToRgb(p, q, h + 1 / 3);
+  const g = hueToRgb(p, q, h);
+  const b = hueToRgb(p, q, h - 1 / 3);
+
+  const rgbColor = (Math.round(r * 255) << 16) | (Math.round(g * 255) << 8) | Math.round(b * 255);
+
+  return `#${rgbColor.toString(16).padStart(6, '0')}`;
+};
+
+/**
+ * Restricts the value to be within the range [0, 1].
+ * @param value
+ */
+const clamp = (value: number): number => Math.min(Math.max(value, 0), 1);

package/projects/tgo-canopy-ui/utils/localization/language.model.ts

@@ -0,0 +1,14 @@
+export enum Language {
+  en = 'en',
+  es = 'es',
+  nl = 'nl',
+  fr = 'fr',
+  de = 'de',
+  'it-it' = 'it-it',
+  'ja-jp' = 'ja-jp',
+  'pt-br' = 'pt-br',
+  'da-dk' = 'da-dk',
+  'nb-no' = 'nb-no',
+  'pl-pl' = 'pl-pl',
+  'sv-se' = 'sv-se',
+}

package/projects/tgo-canopy-ui/utils/localization/language.service.mocks.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+export class LanguageServiceStub {
+  setActiveLanguage(language: string) {}
+  init(language: string) {}
+}

package/projects/tgo-canopy-ui/utils/localization/language.service.spec.ts

@@ -0,0 +1,25 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { LanguageService } from './language.service';
+import { Language } from './language.model';
+
+describe('LanguageService', () => {
+  let languageService: LanguageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [LanguageService],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+
+    languageService = TestBed.inject(LanguageService);
+  });
+
+  it('should create service', () => {
+    expect(languageService).toBeTruthy();
+  });
+
+  it('should have default language', () => {
+    expect(LanguageService.defaultLanguage).toEqual(Language.en);
+  });
+});

package/projects/tgo-canopy-ui/utils/localization/language.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Language } from './language.model';
+//This type enforces all translations are present when some translation needs to live in the frontend
+export type TranslationMap = { [key in Language]: string };
+
+//This function retrieves all languages from the enum. It is used to initialize transloco
+export const getAvailableLangs = () => Object.values(Language);
+
+//This type is intended for UI uses only
+export type UILanguage = { code: Language | string; label: string };
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LanguageService {
+  static readonly defaultLanguage = Language.en;
+
+  readonly defaultLanguageList: UILanguage[] = [
+    { code: Language.en, label: 'English' },
+    { code: Language.es, label: 'Spanish' },
+    { code: Language.de, label: 'German' },
+    { code: Language.fr, label: 'French' },
+    { code: Language.nl, label: 'Dutch' },
+    { code: Language['it-it'], label: 'Italian' },
+    { code: Language['ja-jp'], label: 'Japanese' },
+    { code: Language['pt-br'], label: 'Portuguese' },
+    { code: Language['da-dk'], label: 'Danish' },
+    { code: Language['nb-no'], label: 'Norwegian' },
+    { code: Language['pl-pl'], label: 'Polish' },
+    { code: Language['sv-se'], label: 'Swedish' },
+  ];
+}

package/projects/tgo-canopy-ui/utils/table.utils.spec.ts

@@ -0,0 +1,47 @@
+import { sortByOrder } from './table.utils';
+import { TableColumn } from '../components/table/table.model';
+
+describe('sortByOrder', () => {
+  it('should return columns sorted by order when there are columns with order', () => {
+    const columns = [
+      { name: 'Column 1', order: 2 },
+      { name: 'Column 2', order: 1 },
+      { name: 'Column 3' },
+    ] as unknown as TableColumn<any>[];
+
+    const sortedColumns = sortByOrder(columns);
+
+    expect(sortedColumns).toEqual([
+      { name: 'Column 2', order: 1 },
+      { name: 'Column 1', order: 2 },
+      { name: 'Column 3'},
+    ]);
+  });
+
+  it('should return columns unchanged when there are no columns with order', () => {
+    const columns = [
+      { name: 'Column 1'},
+      { name: 'Column 2'},
+    ] as unknown as TableColumn<any>[];
+
+    const sortedColumns = sortByOrder(columns);
+
+    expect(sortedColumns).toEqual(columns);
+  });
+
+  it('should return columns with null order at the end', () => {
+    const columns = [
+      { name: 'Column 1'},
+      { name: 'Column 2', order: 1 },
+      { name: 'Column 3'},
+    ] as unknown as TableColumn<any>[];
+
+    const sortedColumns = sortByOrder(columns);
+
+    expect(sortedColumns).toEqual([
+      { name: 'Column 2', order: 1 },
+      { name: 'Column 1'},
+      { name: 'Column 3'},
+    ]);
+  });
+});

package/projects/tgo-canopy-ui/utils/table.utils.ts

@@ -0,0 +1,22 @@
+import { TableColumn } from '../components/table/table.model';
+
+/**
+ * Sorting table columns by order value if set.
+ * The rest columns keep the same ordering and displayed after the sorted ones.
+ */
+export const sortByOrder = <T>(columns: TableColumn<T>[]): TableColumn<T>[] => {
+  const withOrderColumns = columns.filter((v) => v.order);
+  const withoutOrderColumns = columns.filter((v) => !v.order)
+
+  if (withOrderColumns.length) {
+    const sortedColumns = Array(columns.length);
+    withOrderColumns.forEach(column => sortedColumns[column.order! - 1] = column);
+    withoutOrderColumns.forEach(column => {
+      const emptyIndex = sortedColumns.findIndex(v => !v);
+      sortedColumns[emptyIndex] = column;
+    });
+    return sortedColumns;
+  }
+
+  return columns;
+};

package/projects/tgo-canopy-ui/utils/transform-theme.ts

@@ -0,0 +1,9 @@
+export const transformTheme = (theme: string) => {
+  if (theme === 'Rebrand - Light BG') {
+    return 'light';
+  } else if (theme === 'Rebrand - Dark BG') {
+    return 'dark';
+  } else {
+    return 'classic';
+  }
+};

package/projects/tgo-canopy-ui/utils/transform.theme.spec.ts

@@ -0,0 +1,16 @@
+import { transformTheme } from "./transform-theme";
+
+test('should transform "Rebrand - Light BG" to "light"', () => {
+  const result = transformTheme('Rebrand - Light BG');
+  expect(result).toBe('light');
+});
+
+test('should transform "Rebrand - Dark BG" to "dark"', () => {
+  const result = transformTheme('Rebrand - Dark BG');
+  expect(result).toBe('dark');
+});
+
+test('should transform other themes to "classic"', () => {
+  const result = transformTheme('Some other theme');
+  expect(result).toBe('classic');
+});

package/projects/tgo-canopy-ui/utils/validators.utils.spec.ts

@@ -0,0 +1,16 @@
+import { FormControl } from '@angular/forms';
+import { ValidatorsUtil } from "./validators.utils";
+
+describe('ValidatorsUtil', () => {
+  it('should validate a password successfully', () => {
+    const passwordControl = new FormControl('ValidPassword123#$');
+
+    const validators = ValidatorsUtil.validatePassword();
+
+    // @ts-ignore
+    for (const validator of validators) {
+      const validationResult = validator(passwordControl);
+      expect(validationResult).toBeNull();
+    }
+  });
+});

package/projects/tgo-canopy-ui/utils/validators.utils.ts

@@ -0,0 +1,9 @@
+import { ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+const PASSWORD_REGEX = /^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,\-./:;<=>?@!^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/;
+
+export class ValidatorsUtil {
+  public static validatePassword(): ValidationErrors | ValidatorFn[] {
+    return [Validators.required, Validators.minLength(12), Validators.pattern(PASSWORD_REGEX)];
+  }
+}

package/setupJest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/transloco.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rootTranslationsPath: 'projects/tgo-canopy-ui/assets/i18n/',
+  langs: ['en', 'es', 'nl', 'fr', 'de', 'it-it', 'ja-jp', 'pt-br', 'da-dk', 'nb-no', 'pl-pl', 'sv-se'],
+  keysManager: {},
+};

package/tsconfig.json

@@ -0,0 +1,46 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "strictPropertyInitialization": false,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "es2020",
+    "lib": ["es2020", "dom"],
+    "useDefineForClassFields": false,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "paths": {
+      "@testgorilla/tgo-ui": [
+        "./dist/tgo-ui"
+      ]
+    }
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "exclude": [
+    "./projects/tgo-canopy-ui/test.ts",
+    "./projects/tgo-canopy-ui/**/*.spec.ts"
+  ],
+  "include": [
+    "./projects/tgo-canopy-ui/**/*"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jest"],
+    "esModuleInterop": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true
+  },
+  "files": ["projects/tgo-canopy-ui/test.ts",
+    "projects/tgo-canopy-ui/polyfills.ts"
+  ],
+  "include": ["projects/**/*.spec.ts",
+    "projects/tgo-canopy-ui/**/*.d.ts"
+  ]
+}

package/tsconfig.ui.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": ["node"],
+    "lib": [
+      "dom",
+      "es2018"
+    ],
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "projects/tgo-canopy-ui/test.ts",
+    "projects/tgo-canopy-ui/**/*.spec.ts",
+    "projects/tgo-canopy-ui/**/*.stories.*",
+    "projects/tgo-canopy-ui/mocked-assets/**/*"
+  ],
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.ui.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.ui.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/visual-tests/component-page-objects/avatar-component.ts

@@ -0,0 +1,30 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class AvatarComponent extends BaseComponent {
+    constructor(
+        page: Page,
+        public name: string = '',
+        public size: string = '',
+        public imageUrl: string = '',
+        public tooltipText: string = '',
+        public allowEdit: boolean = false
+    ) {
+        super(page, 'ui-avatar', 'avatar');
+    }
+
+    async goTo(): Promise<void> {
+        const params = new URLSearchParams();
+
+        if (this.name) params.append('name', this.name);
+        if (this.size) params.append('size', this.size);
+        if (this.imageUrl) params.append('imageUrl', this.imageUrl);
+        if (this.tooltipText) params.append('tooltipText', this.tooltipText);
+        params.append('allowEdit', String(this.allowEdit));
+
+        const queryString = params.toString();
+        const url = `${this.baseUrl}/${this.componentName}?${queryString}`;
+        console.log(`Component URL: ${url}`);
+        await this.page.goto(url);
+    }
+}

package/visual-tests/component-page-objects/badge-component.ts

@@ -0,0 +1,33 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class BadgeComponent extends BaseComponent {
+    constructor(
+        page: Page,
+        public label: string = '',
+        public icon: string = '',
+        public color: string = '',
+        public variant: string = '',
+        public notificationsAmount: number = 0,
+        public applicationTheme: string = '',
+        public rebrandColor: string = ''
+    ) {
+        super(page, 'ui-badge', 'badge');
+    }
+
+    async goTo(): Promise<void> {
+        const params = new URLSearchParams();
+
+        if (this.label) params.append('label', this.label);
+        if (this.icon) params.append('icon', this.icon);
+        if (this.variant) params.append('variant', this.variant);
+        if (this.notificationsAmount) params.append('notificationsAmount', this.notificationsAmount.toString());
+        if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+        if (this.rebrandColor) params.append('rebrandColor', this.rebrandColor);
+
+        const queryString = params.toString();
+        const url = `${this.baseUrl}/${this.componentName}?${queryString}`;
+        console.log(`Component URL: ${url}`);
+        await this.page.goto(url);
+    }
+}

package/visual-tests/component-page-objects/base-component.ts

@@ -0,0 +1,44 @@
+import { Page, Locator } from 'playwright';
+import { baseUrl } from '../runConfig';
+
+export class BaseComponent {
+    protected page: Page;
+    protected componentSelector: string;
+    protected element: Locator;
+    protected baseUrl: string;
+    protected componentName: string;
+
+    constructor(
+        page: Page,
+        selector: string,
+        componentName: string,
+        baseUrlOverride: string = baseUrl
+    ) {
+        this.page = page;
+        this.componentSelector = selector;
+        this.componentName = componentName;
+        this.element = this.page.locator(selector);
+        this.baseUrl = baseUrlOverride;
+    }
+
+    async isVisible(): Promise<boolean> {
+        return this.element.isVisible();
+    }
+
+    async click(): Promise<void> {
+        await this.element.click();
+    }
+
+    async getText(): Promise<string> {
+        const text = await this.element.textContent();
+        return text ?? '';
+    }
+
+    async takeSnapshot(): Promise<void> {
+        try {
+            await this.element.screenshot({ path: `snapshots/${this.componentSelector}.png` });
+        } catch (error) {
+            console.error(`Failed to take snapshot: ${error}`);
+        }
+    }
+}

package/visual-tests/component-page-objects/checkbox-component.ts

@@ -0,0 +1,38 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class CheckboxComponent extends BaseComponent {
+    constructor(
+        page: Page,
+        public label: string = '',
+        public name: string = '',
+        public companyColor: string = '',
+        public checked: boolean = false,
+        public multiple: boolean = false,
+        public applicationTheme: string = 'light',
+        public indeterminate: boolean = false,
+        public disabled: boolean = false,
+        public hasError: boolean = false
+    ) {
+        super(page, 'ui-checkbox', 'checkbox');
+    }
+
+    async goTo(): Promise<void> {
+        const params = new URLSearchParams();
+
+        if (this.label) params.append('label', this.label);
+        if (this.name) params.append('name', this.name);
+        if (this.companyColor) params.append('companyColor', this.companyColor);
+        if (this.checked) params.append('checked', this.checked.toString());
+        if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+        if (this.multiple) params.append('multiple', this.multiple.toString());
+        if (this.disabled) params.append('disabled', this.disabled.toString());
+        if (this.indeterminate) params.append('indeterminate', this.indeterminate.toString());
+        if (this.hasError) params.append('hasError', this.hasError.toString());
+
+        const queryString = params.toString();
+        const url = `${this.baseUrl}/${this.componentName}?${queryString}`;
+        console.log(`Component URL: ${url}`);
+        await this.page.goto(url);
+    }
+}

package/visual-tests/component-page-objects/icon-component.ts

@@ -0,0 +1,32 @@
+import { Page } from 'playwright';
+import { BaseComponent } from './base-component';
+
+export class IconComponent extends BaseComponent {
+    constructor(
+        page: Page,
+        public name: string = '',
+        public color: string = '',
+        public size: string = '',
+        public filled: boolean = false,
+        public applicationTheme: string = '',
+        public cssClass: string = '',
+    ) {
+        super(page, 'ui-icon', 'icon');
+    }
+
+    async goTo(): Promise<void> {
+        const params = new URLSearchParams();
+
+        if (this.name) params.append('name', this.name);
+        if (this.color) params.append('color', this.color);
+        if (this.applicationTheme) params.append('applicationTheme', this.applicationTheme);
+        if (this.filled) params.append('filled', this.filled.toString());
+        if (this.size) params.append('size', this.size);
+        if (this.cssClass) params.append('cssClass', this.cssClass);
+
+        const queryString = params.toString();
+        const url = `${this.baseUrl}/${this.componentName}?${queryString}`;
+        console.log(`Component URL: ${url}`);
+        await this.page.goto(url);
+    }
+}