@testgorilla/tgo-ui 2.10.999 → 2.11.1

package/projects/tgo-canopy-ui/models/colors.model.ts

@@ -0,0 +1,88 @@
+export enum Color {
+  // Teal colors
+  TGO_TEAL_60B = '#1C443C',
+  TGO_TEAL_30B = '#31766A',
+  TGO_TEAL_DEFAULT = '#46A997',
+  TGO_TEAL_30W = '#7EC3B6',
+  TGO_TEAL_60W = '#B5DDD5',
+  TGO_TEAL_SECONDARY = '#CBD6CB',
+  TGO_TEAL_90W = '#ECF6F5',
+
+  // Petrol colors
+  TGO_PETROL_60B = '#102930',
+  TGO_PETROL_30B = '#1B4754',
+  TGO_PETROL_DEFAULT = '#276678',
+  TGO_PETROL_30W = '#6894A0',
+  TGO_PETROL_60W = '#A9C2C9',
+  TGO_PETROL_SECONDARY = '#C8D7DE',
+  TGO_PETROL_90W = '#E9F0F1',
+
+  // Error colors
+  TGO_ERROR_60B = '#513131',
+  TGO_ERROR_30B = '#8E5655',
+  TGO_ERROR_60W = '#E3C3C6',
+  TGO_ERROR_SECONDARY = '#F0DAD9',
+  TGO_ERROR_DEFAULT = '#CB7B7A',
+
+  // Warning colors
+  TGO_WARNING_SECONDARY = '#F0D6BB',
+  TGO_WARNING_DEFAULT = '#CCA45F',
+
+  // Black colors - grayscale
+  TGO_BLACK = '#000000',
+  TGO_DARK = '#888888',
+  TGO_MEDIUM = '#E0E0E0',
+  TGO_GREY = '#EDEDED',
+  TGO_LIGHT = '#F6F6F6',
+  TGO_WHITE = '#FFFFFF',
+
+  // Brand colors
+  BRAND_60 = '#A90686',
+  BRAND_50 = '#D410AA',
+  BRAND_40 = '#FF54DA',
+  BRAND_30 = '#FFB3EE',
+  BRAND_20 = '#FFE6FA',
+  BRAND_10 = '#FFF2FC',
+
+  // Grayscale colors
+  GRAYSCALE_50 = '#666666',
+  GRAYSCALE_40 = '#919191',
+  GRAYSCALE_30 = '#D3D3D3',
+  GRAYSCALE_20 = '#E9E9E9',
+  GRAYSCALE_10 = '#F4F4F4',
+
+  // Additional colors
+  BLACK = '#242424',
+
+  // Accent colors
+  ACCENT_20 = '#FFF5ED',
+  ACCENT_10 = '#FFFAF6',
+
+  // Informative colors
+  INFORMATIVE_50 = '#1A47AA',
+  INFORMATIVE_40 = '#0165FC',
+  INFORMATIVE_30 = '#277CFD',
+  INFORMATIVE_20 = '#99C1FE',
+  INFORMATIVE_10 = '#D9E8FF',
+
+  // Success colors
+  SUCCESS_50 = '#88B901',
+  SUCCESS_40 = '#A0D900',
+  SUCCESS_30 = '#C6E866',
+  SUCCESS_20 = '#E2F4B3',
+  SUCCESS_10 = '#F5FAE3',
+
+  // Error additional colors
+  ERROR_50 = '#E02800',
+  ERROR_40 = '#FF3003',
+  ERROR_30 = '#FF6E4F',
+  ERROR_20 = '#FFAC9A',
+  ERROR_10 = '#FFEAE6',
+
+  // Warning additional colors
+  WARNING_50 = '#D07D00',
+  WARNING_40 = '#FF9A03',
+  WARNING_30 = '#FFC268',
+  WARNING_20 = '#FFE1B3',
+  WARNING_10 = '#FFF5E6',
+}

package/projects/tgo-canopy-ui/models/screen-breakpoints.model.ts

@@ -0,0 +1,4 @@
+export enum ScreenBreakpoints {
+  MOBILE = 600,
+  TABLET = 1023,
+}

package/projects/tgo-canopy-ui/pipes/data-property-getter.spec.ts

@@ -0,0 +1,42 @@
+import { DataPropertyGetterPipe } from "./data-property-getter";
+
+describe('DataPropertyGetterPipe', () => {
+  let pipe: DataPropertyGetterPipe;
+
+  beforeEach(() => {
+    pipe = new DataPropertyGetterPipe();
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return the value of the specified property', () => {
+    const obj = { a: { b: { c: 'value' } } };
+    const result = pipe.transform(obj, 'a.b.c');
+    expect(result).toBe('value');
+  });
+
+  it('should return an empty string if the property path is invalid', () => {
+    const obj = { a: { b: { c: 'value' } } };
+    const result = pipe.transform(obj, 'a.b.x');
+    expect(result).toBe('');
+  });
+
+  it('should return an empty string if the object is null or undefined', () => {
+    expect(pipe.transform({}, 'a.b.c')).toBe('');
+    expect(pipe.transform({ }, 'a.b.c')).toBe('');
+  });
+
+  it('should return the value of the property even if the path contains array indices', () => {
+    const obj = { a: [{ b: { c: 'value' } }] };
+    const result = pipe.transform(obj, 'a[0].b.c');
+    expect(result).toBe('value');
+  });
+
+  it('should return the correct value if the key is a number', () => {
+    const obj = { '1': 'value' };
+    const result = pipe.transform(obj, '1');
+    expect(result).toBe('value');
+  });
+})

package/projects/tgo-canopy-ui/pipes/data-property-getter.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+// TODO: Check type (backend could return a number)
+type DataPropertyGetterType = string;
+
+@Pipe({
+  name: 'dataPropertyGetter',
+  standalone: true,
+})
+export class DataPropertyGetterPipe implements PipeTransform {
+  transform(obj: object, keyName: string = '') {
+    return this.getDeepVal(obj, keyName);
+  }
+
+  private getDeepVal(obj: any, path: string) {
+    if (typeof obj === 'undefined' || obj === null) {
+      return '';
+    }
+    const splittedPath = path.split(/[\.\[\]\"\']{1,2}/);
+    for (let i = 0, l = splittedPath.length; i < l; i++) {
+      if (splittedPath[i] === '') {
+        continue;
+      }
+      obj = obj[splittedPath[i]];
+      if (typeof obj === 'undefined' || obj === null) {
+        return '';
+      }
+    }
+    return obj;
+  }
+}

package/projects/tgo-canopy-ui/pipes/has-validation-error.pipe.spec.ts

@@ -0,0 +1,32 @@
+import { HasValidationErrorPipe } from './has-validation-error.pipe';
+
+describe('HasValidationErrorPipe', () => {
+  let pipe: HasValidationErrorPipe;
+  it('create an instance', () => {
+    pipe = new HasValidationErrorPipe();
+    expect(pipe).toBeTruthy();
+  });
+
+  beforeEach(() => {
+    pipe = new HasValidationErrorPipe();
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return true if value has validation errors', () => {
+    const value = { maxlength: true };
+    expect(pipe.transform(value)).toBe(true);
+  });
+
+  it('should return false if value is null or undefined', () => {
+    expect(pipe.transform(null)).toBe(false);
+    expect(pipe.transform(undefined)).toBe(false);
+  });
+
+  it('should return false if value has no validation errors', () => {
+    const value = { someOtherKey: 'value' };
+    expect(pipe.transform(value)).toBe(false);
+  });
+});

package/projects/tgo-canopy-ui/pipes/has-validation-error.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'hasValidationError',
+  standalone: true,
+})
+export class HasValidationErrorPipe implements PipeTransform {
+  /**
+   * List of the error types that are handled
+   */
+  private readonly errorTypes = ['maxlength', 'minlength', 'min', 'max', 'required', 'email'];
+
+  /**
+   * Checks if the error on the NgControl is in the list of handled error types
+   * @param value
+   */
+  transform(value: Record<string, any> | null | undefined): boolean {
+    return value ? !!Object.keys(value).filter(key => this.errorTypes.includes(key)).length : false;
+  }
+}

package/projects/tgo-canopy-ui/pipes/memoize-func.pipe.spec.ts

@@ -0,0 +1,19 @@
+import { MemoizeFuncPipe } from './memoize-func.pipe';
+
+describe('MemoizeFuncPipe', () => {
+  const pipe = new MemoizeFuncPipe();
+  const arg = true;
+  const methodWrapper = {
+    func: (args: any) => args,
+  };
+  let funcSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    funcSpy = jest.spyOn(methodWrapper, 'func');
+  });
+
+  it('should execute passed function with arguments', () => {
+    pipe.transform(arg, methodWrapper.func);
+    expect(funcSpy).toHaveBeenCalledWith(arg);
+  });
+});

package/projects/tgo-canopy-ui/pipes/memoize-func.pipe.ts

@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ *   USAGE:
+ *   {{ argument | memoizeFunc : method [: context] }}
+ *
+ *   You could provide multiple arguments for the function like that:
+ *   {{ [argument1, argument2] | memoizeFunc : method [: context] }}
+ *
+ *
+ *   FUNCTION WITH CONTEXT
+ *   We still could have optimization in impure functions with Angular pipes. Just provide context as second parameter
+ *   to the memoizeFunc pipe.
+ *
+ *   {{ argument | memoizeFunc : method : this }}
+ *
+ *   Alternative variant use 'bind'
+ *
+ *   {{ argument | memoizeFunc : method.bind(this) }}
+ *
+ * */
+@Pipe({
+  name: 'memoizeFunc',
+  standalone: true,
+})
+export class MemoizeFuncPipe implements PipeTransform {
+  transform<T, K>(value: T, handler: (value: T) => K, context?: any): K {
+    if (context) {
+      return handler.call(context, value);
+    }
+
+    return handler(value);
+  }
+}

package/projects/tgo-canopy-ui/pipes/name-initials.pipe.spec.ts

@@ -0,0 +1,44 @@
+import { NameInitialsPipe } from './name-initials.pipe';
+
+describe('NameInitialsPipe', () => {
+  const pipe = new NameInitialsPipe()
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return initials for a full name', () => {
+    const result = pipe.transform('John Doe');
+    expect(result).toBe('JD');
+  });
+
+  it('should return initials for a single name', () => {
+    const result = pipe.transform('John');
+    expect(result).toBe('Jo');
+  });
+
+  it('should handle empty string', () => {
+    const result = pipe.transform('');
+    expect(result).toBe('');
+  });
+
+  it('should handle input with leading/trailing spaces', () => {
+    const result = pipe.transform('  John Doe  ');
+    expect(result).toBe('JD');
+  });
+
+  it('should handle input with multiple spaces between names', () => {
+    const result = pipe.transform('John    Doe');
+    expect(result).toBe('JD');
+  });
+
+  it('should handle input with multiple spaces after the name', () => {
+    const result = pipe.transform('John    ');
+    expect(result).toBe('Jo');
+  });
+
+  it('should return first and last name for multiple words name', () => {
+    const result = pipe.transform('GOLLA ALLI ANIL KUMAR');
+    expect(result).toBe('GK');
+  });
+});

package/projects/tgo-canopy-ui/pipes/name-initials.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'nameInitials',
+})
+export class NameInitialsPipe implements PipeTransform {
+  transform(value: string): string {
+    const initials = value.split(' ').filter(Boolean);
+    if (initials.length > 1) {
+      return initials
+        .map((initial, i) => (i === 0 || i === initials.length - 1 ? initial[0].toUpperCase() : ''))
+        .join('');
+    } else {
+      const firstLetters = value.substring(0, 2);
+      return `${firstLetters[0]?.toUpperCase() ?? ''}${firstLetters[1]?.toLowerCase() ?? ''}`;
+    }
+  }
+}

package/projects/tgo-canopy-ui/pipes/ui-translate.pipe.spec.ts

@@ -0,0 +1,45 @@
+import { UiTranslatePipe } from './ui-translate.pipe';
+
+const translationsMock = {
+  en: {
+    KEY: 'English Key',
+    FIRST_LVL_KEY: { SECOND_LVL_KEY: 'Nested English Key' },
+    NOTIFICATION: {
+      ATTEMPTS: 'You have {{attemptsAmount}} attempts left'
+    }
+  },
+  es: {
+    KEY: 'Spanish Key',
+    FIRST_LVL_KEY: { SECOND_LVL_KEY: 'Nested Spanish Key' },
+  },
+};
+
+describe('UiTranslatePipe', () => {
+  let pipe: UiTranslatePipe;
+
+  beforeEach(() => {
+    pipe = new UiTranslatePipe();
+    //@ts-expect-error
+    pipe.LANGS = translationsMock;
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should translate a simple key in English', () => {
+    const result = pipe.transform('KEY', 'en');
+    expect(result).toBe('English Key');
+  });
+
+  it('should translate a nested key in Spanish', () => {
+    const result = pipe.transform('FIRST_LVL_KEY.SECOND_LVL_KEY', 'es');
+    expect(result).toBe('Nested English Key');
+  });
+
+  it('should interpolate values in the translation', () => {
+    const interpolationData = { attemptsAmount: 5 };
+    const result = pipe.transform('NOTIFICATION.ATTEMPTS', 'en', interpolationData);
+    expect(result).toBe('You have 5 attempts left');
+  });
+});

package/projects/tgo-canopy-ui/pipes/ui-translate.pipe.ts

@@ -0,0 +1,71 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import en from '../assets/i18n/en.json';
+import es from '../assets/i18n/es.json';
+import de from '../assets/i18n/de.json';
+import * as daDk from '../assets/i18n/da-dk.json';
+import fr from '../assets/i18n/fr.json';
+import * as itIt from '../assets/i18n/it-it.json';
+import * as jaJp from '../assets/i18n/ja-jp.json';
+import * as nbNo from '../assets/i18n/nb-no.json';
+import nl from '../assets/i18n/nl.json';
+import * as plPl from '../assets/i18n/pl-pl.json';
+import * as ptBr from '../assets/i18n/pt-br.json';
+import * as svSe from '../assets/i18n/sv-se.json';
+
+/**
+ * Used for translations
+ */
+@Pipe({
+  name: 'uiTranslate',
+  standalone: true,
+})
+export class UiTranslatePipe implements PipeTransform {
+  protected readonly LANGS: { [key: string]: any } = {
+    en,
+    es,
+    de,
+    'da-dk': daDk,
+    fr,
+    'it-it': itIt,
+    'ja-jp': jaJp,
+    'nb-no': nbNo,
+    nl,
+    'pl-pl': plPl,
+    'pt-br': ptBr,
+    'sv-se': svSe,
+  };
+  /**
+   * Finds the translation by keys with interpolation if provided
+   * @param translateKey key, can have multiple keys separated with '.' eg ('KEY', 'FIRST_LVL_KEY.SECOND_LVL_KEY')
+   * @param activeLang current active language
+   * @param interpolationData data that will be used to replace interpolations in translated variant
+   * For example, for translate text like this
+   * 'You have {{attemptsAmount}} attempts left
+   * the interpolation object should be { attemptsAmount: 10 }
+   */
+  transform(translateKey: string, activeLang: string, interpolationData?: any): string {
+    const currentLangObject = JSON.parse(JSON.stringify(this.LANGS[activeLang]));
+    const enLangObject = JSON.parse(JSON.stringify(this.LANGS['en']));
+    const keys = translateKey.split('.');
+    const translation = keys.reduce((acc, currentKey) => acc && acc[currentKey], currentLangObject);
+
+    if (translation && interpolationData) {
+      return this.interpolate(translation, interpolationData);
+    }
+
+    const englishTranslation = keys.reduce((acc, currentKey) => acc && acc[currentKey], enLangObject);
+    return this.interpolate(englishTranslation, interpolationData);
+  }
+
+  /**
+   * Used to find and replace interpolation in text
+   * @param translation the translation text
+   * @param interpolationData the interpolation object
+   */
+  private interpolate(translation: string, interpolationData: { [key: string]: any }): string {
+    return translation?.replace(/{{(.*?)}}/g, (match: string, group: string) => {
+      const value = interpolationData[group.trim()] as string;
+      return value ?? match;
+    });
+  }
+}

package/projects/tgo-canopy-ui/polyfills.ts

@@ -0,0 +1,51 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */ // Run `npm install --save web-animations-js`.
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+(window as any).global = window;

package/projects/tgo-canopy-ui/providers/is-mobile.ts

@@ -0,0 +1,11 @@
+import { inject, InjectionToken } from '@angular/core';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { map } from 'rxjs';
+import { ScreenBreakpoints } from '../models/screen-breakpoints.model';
+
+export const IS_MOBILE_TOKEN = new InjectionToken('Is mobile', {
+  factory: () => {
+    const breakpointObserver = inject(BreakpointObserver);
+    return breakpointObserver.observe(`(max-width: ${ScreenBreakpoints.MOBILE}px)`).pipe(map(v => v.matches));
+  },
+});