@testgorilla/tgo-ui 2.10.0 → 2.10.1

package/projects/tgo-canopy-ui/services/custom-event-manager.service.spec.ts

@@ -0,0 +1,57 @@
+import { TestBed } from '@angular/core/testing';
+import { CustomEventManagerService } from './custom-event-manager.service';
+import { NgZone } from '@angular/core';
+
+describe('CustomEventManagerService', () => {
+  let customEventManager: CustomEventManagerService;
+  let ngZoneSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        CustomEventManagerService,
+        { provide: NgZone, useValue: new NgZone({}) }, // Mock NgZone
+      ],
+    });
+
+    customEventManager = TestBed.inject(CustomEventManagerService);
+    //@ts-expect-error
+    ngZoneSpy = jest.spyOn(customEventManager.zone, 'runOutsideAngular');
+  });
+
+  afterEach(() => {
+    ngZoneSpy.mockRestore();
+  });
+
+  it('should be created', () => {
+    expect(customEventManager).toBeTruthy();
+  });
+
+  it('should add event listener outside the Angular zone for events ending with "out-zone"', () => {
+    const element = document.createElement('div');
+    const eventName = 'custom-event.out-zone';
+    const handler = jest.fn();
+
+    const result = customEventManager.addEventListener(element, eventName, handler);
+
+    expect(ngZoneSpy).toHaveBeenCalled();
+    expect(result).toEqual(expect.any(Function));
+
+    // Clean up if needed (e.g., remove the event listener)
+    result();
+  });
+
+  it('should add event listener within the Angular zone for events not ending with "out-zone"', () => {
+    const element = document.createElement('div');
+    const eventName = 'regular-event';
+    const handler = jest.fn();
+
+    const result = customEventManager.addEventListener(element, eventName, handler);
+
+    expect(ngZoneSpy).not.toHaveBeenCalled();
+    expect(result).toEqual(expect.any(Function));
+
+    // Clean up if needed (e.g., remove the event listener)
+    result();
+  });
+});

package/projects/tgo-canopy-ui/services/custom-event-manager.service.ts

@@ -0,0 +1,28 @@
+import { Inject, Injectable, NgZone } from '@angular/core';
+import { EVENT_MANAGER_PLUGINS, EventManager } from '@angular/platform-browser';
+
+/**
+ * Used to override the EventManager and run the events with '.out-zone' suffix in outer zone.
+ * Useful for @HostListener events that are running in Angular Zone and triggering changeDetection cycles
+ */
+@Injectable()
+export class CustomEventManagerService extends EventManager {
+  constructor(@Inject(EVENT_MANAGER_PLUGINS) private plugins: any[], private zone: NgZone) {
+    super(plugins, zone);
+  }
+
+  /**
+   *
+   * @param element - HTML Element for which the event listener will be added
+   * @param eventName - the name of the event
+   * @param handler - callback function
+   */
+  override addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
+    if (eventName.endsWith('out-zone')) {
+      const [name] = eventName.split('.');
+      return this.zone.runOutsideAngular(() => super.addEventListener(element, name, handler));
+    }
+
+    return super.addEventListener(element, eventName, handler);
+  }
+}

package/projects/tgo-canopy-ui/test-utils/mock-file.spec.ts

@@ -0,0 +1,44 @@
+import { createFileFromMockFile, createMockFileList, MockFile } from './mock-file';
+
+describe('createFileFromMockFile', () => {
+  it('should create a File object from a MockFile', () => {
+    const mockFile: MockFile = {
+      name: 'test.txt',
+      body: 'Hello, world!',
+      mimeType: 'text/plain',
+    };
+
+    const file = createFileFromMockFile(mockFile);
+
+    expect(file.name).toBe('test.txt');
+    expect(file.type).toBe('text/plain');
+    expect(file.size).toBe(13);
+  });
+});
+
+describe('createMockFileList', () => {
+  it('should create a FileList from an array of MockFiles', () => {
+    const mockFiles: MockFile[] = [
+      {
+        name: 'test1.txt',
+        body: 'File 1',
+        mimeType: 'text/plain',
+      },
+      {
+        name: 'test2.txt',
+        body: 'File 2',
+        mimeType: 'text/plain',
+      },
+    ];
+
+    const fileList = createMockFileList(mockFiles);
+
+    expect(fileList.length).toBe(2);
+    expect(fileList.item(0)!.name).toBe('test1.txt');
+    expect(fileList.item(0)!.type).toBe('text/plain');
+    expect(fileList.item(0)!.size).toBe(6);
+    expect(fileList.item(1)!.name).toBe('test2.txt');
+    expect(fileList.item(1)!.type).toBe('text/plain');
+    expect(fileList.item(1)!.size).toBe(6);
+  });
+});

package/projects/tgo-canopy-ui/test-utils/mock-file.ts

@@ -0,0 +1,24 @@
+export interface MockFile {
+  name: string;
+  body: string;
+  mimeType: string;
+}
+
+export const createFileFromMockFile = (file: MockFile): File => {
+  const blob = new Blob([file.body], { type: file.mimeType }) as any;
+  blob['lastModifiedDate'] = new Date();
+  blob['name'] = file.name;
+  return blob as File;
+};
+
+export const createMockFileList = (files: MockFile[]) => {
+  const fileList: FileList = {
+    length: files.length,
+    item(index: number): File {
+      return fileList[index];
+    },
+  };
+  files.forEach((file, index) => (fileList[index] = createFileFromMockFile(file)));
+
+  return fileList;
+};

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

@@ -0,0 +1,20 @@
+import 'jest-preset-angular/setup-jest';
+
+Object.defineProperty(window, 'CSS', { value: null });
+Object.defineProperty(window, 'getComputedStyle', {
+  value: () => ({
+    display: 'none',
+    appearance: ['-webkit-appearance'],
+    getPropertyValue: () => { return ''; }
+  }),
+});
+
+Object.defineProperty(document, 'doctype', {
+  value: '<!DOCTYPE html>',
+});
+Object.defineProperty(document.body.style, 'transform', {
+  value: () => ({
+    enumerable: true,
+    configurable: true,
+  }),
+});

package/projects/tgo-canopy-ui/utils/alert-bars.utils.spec.ts

@@ -0,0 +1,47 @@
+import { alertBarsUtil } from './alert-bars.utils';
+import { tgoIcons } from '../components/icon/icon.config';
+
+describe('alertBarsUtil', () => {
+  describe('setIcon()', () => {
+    it('should return Info icon', () => {
+      const icon = alertBarsUtil.setIcon('info');
+      expect(tgoIcons).toContain(icon);
+    });
+    it('should return Success icon', () => {
+      const icon = alertBarsUtil.setIcon('success');
+      expect(tgoIcons).toContain(icon);
+    });
+    it('should return Warning icon', () => {
+      const icon = alertBarsUtil.setIcon('warning');
+      expect(tgoIcons).toContain(icon);
+    });
+    it('should return Error icon', () => {
+      const icon = alertBarsUtil.setIcon('error');
+      expect(tgoIcons).toContain(icon);
+    });
+    it('should return empty string', () => {
+      const icon = alertBarsUtil.setIcon('test');
+      expect(icon).toBe('');
+    });
+  });
+  describe('setPosition()', () => {
+    it('should return fixed', () => {
+      const position = alertBarsUtil.setPosition(true);
+      expect(position).toBe('fixed');
+    });
+    it('should return fiexed', () => {
+      const position = alertBarsUtil.setPosition(false);
+      expect(position).toBe('static');
+    });
+  });
+  describe('setCssClass()', () => {
+    it('should return cssClass with full-width', () => {
+      const cssClass = alertBarsUtil.setCssClass(true, 'type', 'fixed');
+      expect(cssClass).toContain('full-width');
+    });
+    it('should not return cssClass with full-width', () => {
+      const cssClass = alertBarsUtil.setCssClass(false, 'type', 'fixed');
+      expect(cssClass).not.toContain('full-width');
+    });
+  });
+});

package/projects/tgo-canopy-ui/utils/alert-bars.utils.ts

@@ -0,0 +1,36 @@
+import { IconName } from '../components/icon/icon.model';
+import { AlertVariant } from './alert-bar.model';
+
+export const alertBarsUtil = {
+  //Set css class and iconName according type
+  setIcon: (alertType: string): IconName => {
+    if (alertType === 'success') {
+      return 'Round-check';
+    }
+    if (alertType === 'info') {
+      return 'Info';
+    }
+    if (alertType === 'warning') {
+      return 'Warning';
+    }
+    if (alertType === 'error') {
+      return 'Error';
+    }
+    return '';
+  },
+
+  //Set cssClass for fixed or static position
+  setPosition: (fixed: boolean): string => {
+    if (fixed === true) {
+      return 'fixed';
+    } else {
+      return 'static';
+    }
+  },
+
+  //Set css class for alertbanner
+  setCssClass: (fullWidth: boolean, type: string, position: string, variant: AlertVariant = 'banner'): string => {
+    const isFullWidth = !!fullWidth ? 'full-width' : '';
+    return `${type} ${position} ${isFullWidth} ${variant}`;
+  },
+};

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

@@ -0,0 +1,68 @@
+import { AutocompleteUtils } from './autocomplete-utils'; // Adjust the import path as needed
+
+describe('AutocompleteUtils', () => {
+  it('should transform display value for primitive values', () => {
+    const result = AutocompleteUtils.transformDisplayValue(42, 'text');
+    expect(result).toBe(42); // For primitive values, it returns the value itself
+  });
+
+  it('should transform display value for non-primitive values', () => {
+    const obj = { text: 'Hello' };
+    const result = AutocompleteUtils.transformDisplayValue(obj, 'text');
+    expect(result).toBe('Hello'); // For objects, it uses the provided text field
+  });
+
+  it('should filter items by primitive values', () => {
+    const items = ['apple', 'banana', 'orange'];
+    const filtered = AutocompleteUtils.filterItems(items, 'ban');
+    expect(filtered).toEqual(['banana']); // Finds 'banana' in 'ban'
+  });
+
+  it('should filter items by non-primitive values', () => {
+    const items = [{ name: 'John' }, { name: 'Jane' }, { name: 'James' }];
+    const filtered = AutocompleteUtils.filterItems(items, 'ja', 'name');
+    expect(filtered).toEqual([{ name: 'Jane' }, { name: 'James' }]); // Matches 'ja' in 'name'
+  });
+
+  it('should exclude suggestions for primitive values', () => {
+    const items = ['apple', 'banana', 'orange'];
+    const excludeItems = ['banana'];
+    const result = AutocompleteUtils.excludeSuggestions(items, excludeItems);
+    expect(result).toEqual(['apple', 'orange']); // Excludes 'banana'
+  });
+
+  it('should exclude suggestions for non-primitive values', () => {
+    const items = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
+    const excludeItems = [{ id: 2, name: 'Jane' }];
+    const result = AutocompleteUtils.excludeSuggestions(items, excludeItems, 'id');
+    expect(result).toEqual([{ id: 1, name: 'John' }]); // Excludes 'Jane' by 'id'
+  });
+
+  it('should check if value is primitive', () => {
+    expect(AutocompleteUtils.isPrimitive(42)).toBeTruthy(); // 42 is primitive
+    expect(AutocompleteUtils.isPrimitive({ name: 'John' })).toBeFalsy(); // Object is not primitive
+  });
+
+  it('should check if value is an array', () => {
+    expect(AutocompleteUtils.isArray([1, 2, 3])).toBeTruthy(); // It's an array
+    expect(AutocompleteUtils.isArray('string')).toBeFalsy(); // Not an array
+  });
+
+  it('should create a value item', () => {
+    const result = AutocompleteUtils.createValueItem('item', 'text', 'value');
+    expect(result).toEqual({ text: 'item', value: 'item' }); // Should create an object with text and value fields
+  });
+
+  it('should find a duplicate in a primitive array', () => {
+    const items = [1, 2, 3, 4];
+    const result = AutocompleteUtils.findDuplicate(items, 3);
+    expect(result).toBe(3); // Should find '3' in the array
+  });
+
+  it('should find a duplicate in a non-primitive array', () => {
+    const items = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
+    const selectedValue = { id: 2, name: 'Jane' };
+    const result = AutocompleteUtils.findDuplicate(items, selectedValue, 'id');
+    expect(result).toEqual({ id: 2, name: 'Jane' }); // Finds the object with 'id'
+  });
+});

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

@@ -0,0 +1,66 @@
+export class AutocompleteUtils {
+  static transformDisplayValue(value: any, textField: string): any {
+    return AutocompleteUtils.isPrimitive(value) ? value : value[textField];
+  }
+
+  static filterItems(items: any, inputValue: string, textField?: string): any {
+    if (!AutocompleteUtils.isPrimitive(items) && textField) {
+      return items.filter((item: any) => item[textField].toLowerCase().includes(inputValue.toLowerCase()));
+    } else {
+      return items.filter((item: any) => item.toLowerCase().includes(inputValue.toLowerCase()));
+    }
+  }
+
+  static isPrimitive(value: any): boolean {
+    if (Array.isArray(value)) {
+      return value.some(item => typeof item !== 'object');
+    } else {
+      return typeof value !== 'object';
+    }
+  }
+
+  static isArray(value: any): boolean {
+    return Array.isArray(value);
+  }
+
+  /// NEW
+  static throwInvalidSetupError(): void {
+    throw new Error(
+      `AutocompleteComponent textField/valueField properties are not provided!\n
+     Items list that has non primitive values requires textField & valueField to be passed.`
+    );
+  }
+
+  static excludeSuggestions(items: any[], excludeItems: any[], valueField?: string): any[] {
+    if (AutocompleteUtils.isPrimitive(items)) {
+      return items.filter(item => !excludeItems.find(excludeItem => excludeItem === item));
+    } else {
+      return valueField
+        ? items.filter(item => !excludeItems.find(excludeItem => excludeItem[valueField] === item[valueField]))
+        : [];
+    }
+  }
+
+  static shouldBeObject(value: any, textField: string, valueField: string): boolean {
+    return !!valueField && !!textField && typeof value !== 'object';
+  }
+
+  static createValueItem(value: any, textField: string, valueField: string): any {
+    return AutocompleteUtils.shouldBeObject(value, textField, valueField)
+      ? { [textField]: value, [valueField]: value }
+      : value;
+  }
+
+  static findDuplicate(value: any, selectedValue: any, lookupKey?: string): any {
+    if (AutocompleteUtils.isArray(value)) {
+      return value.find((v: any) => {
+        if (!AutocompleteUtils.isPrimitive(v) && lookupKey) {
+          return v[lookupKey] === selectedValue[lookupKey];
+        }
+        return v === selectedValue;
+      });
+    } else {
+      return value === selectedValue;
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import { adjustLightness, hslToHex } from "./color-contrast";
+
+describe('adjustLightness', () => {
+  it('should throw an error for invalid hex format', () => {
+    expect(() => adjustLightness('invalidHex', 'hover')).toThrowError('Invalid HEX color format');
+    expect(() => adjustLightness('#GGG', 'hover')).toThrowError('Invalid HEX color format');
+  });
+
+  it('should return empty string if no color is provided', () => {
+    expect(adjustLightness('', 'hover')).toBe('#1a1a1a');
+  });
+
+  it('should adjust lightness for "new" theme', () => {
+    // Test with a light color that gets darker on hover
+    expect(adjustLightness('#FFFFFF', 'hover', 'new')).toBe('#e6e6e6'); // Down by ~10%
+
+    // Test with a dark color that gets lighter on hover
+    expect(adjustLightness('#000000', 'hover', 'new')).toBe('#1a1a1a'); // Up by ~10%
+
+    // Test a color in the middle range
+    expect(adjustLightness('#808080', 'hover', 'new')).toBe('#676767'); // Down by ~10%
+  });
+
+  it('should adjust lightness for "classic" theme', () => {
+    // Test with light color pressed
+    expect(adjustLightness('#FFFFFF', 'pressed', 'classic')).toBe('#cccccc'); // Down by ~20%
+
+    // Test with dark color pressed
+    expect(adjustLightness('#000000', 'pressed', 'classic')).toBe('#4d4d4d'); // Up by ~30%
+  });
+
+  it('should adjust lightness for "disabled" interaction', () => {
+    // Test with a light color for the "disabled" event
+    expect(adjustLightness('#FFFFFF', 'disabled', 'classic')).toBe('#ffffff'); // No change or slight lightening
+
+    // Test with dark color "disabled"
+    expect(adjustLightness('#000000', 'disabled', 'classic')).toBe('#808080'); // More significant lightening
+  });
+});
+
+describe('hslToHex', () => {
+  it('should convert an HSL color to hex correctly', () => {
+    const hex = hslToHex({ h: 0, s: 1, l: 0.5 });
+    expect(hex).toBe('#ff0000'); // Should be red
+  });
+});

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' },
+  ];
+}