@testgorilla/tgo-ui 2.11.0 → 2.11.1

package/projects/tgo-canopy-ui/public-api.ts

@@ -0,0 +1,184 @@
+/* eslint-disable */
+
+/* Components */
+// Alert Banner
+export * from './components/alert-banner/alert-banner.component';
+export * from './components/alert-banner/alert-banner.component.module';
+// Button
+export * from './components/button/button.component';
+export * from './components/button/button.component.module';
+export * from './components/button/button.model';
+// Card
+export * from './components/card/card.component';
+export * from './components/card/card.component.module';
+export * from './components/card/card.model';
+// Checkbox
+export * from './components/checkbox/checkbox.component';
+export * from './components/checkbox/checkbox.component.module';
+// Dialog
+export * from './components/dialog/dialog.component';
+export * from './components/dialog/dialog.component.module';
+export * from './components/dialog/dialog.service';
+// Elevation shadow
+export * from './components/elevation-shadow/elevation-shadow.component';
+export * from './components/elevation-shadow/elevation-shadow.component.module';
+export * from './components/elevation-shadow/elevation-shadow.constant';
+// Field
+export * from './components/field/field.component';
+export * from './components/field/field.component.module';
+export * from './components/field/field.model';
+// File upload
+export * from './components/file-upload/file-upload.component';
+export * from './components/file-upload/file-upload.component.module';
+// Icon
+export * from './components/icon/icon.component';
+export * from './components/icon/icon.component.module';
+export * from './components/icon/icon.model';
+// Icon + label
+export * from './components/icon-label/icon-label.component';
+export * from './components/icon-label/icon-label.component.module';
+// Logo
+export * from './components/logo/logo.component';
+export * from './components/logo/logo.component.module';
+export * from './components/logo/logo.model';
+// Navbar
+export * from './components/navbar/navbar.component';
+export * from './components/navbar/navbar.component.module';
+export * from './components/navbar/navbar.model';
+// Deprecated Paginator
+export * from './components/deprecated-paginator/deprecated-paginator.component';
+export * from './components/deprecated-paginator/deprecated-paginator.component.module';
+// Progress bar
+export * from './components/progress-bar/progress-bar.component';
+export * from './components/progress-bar/progress-bar.component.module';
+// Radio button
+export * from './components/radio-button/radio-button.component';
+export * from './components/radio-button/radio-button.component.module';
+// Snackbar
+export * from './components/snackbar/snackbar.component';
+export * from './components/snackbar/snackbar.component.module';
+export * from './components/snackbar/snackbar.model';
+export * from './components/snackbar/snackbar.service';
+// Deprecated Table
+export * from './pipes/data-property-getter';
+export * from './components/deprecated-table/deprecated-table.component';
+export * from './components/deprecated-table/deprecated-table.component.module';
+export * from './components/deprecated-table/deprecated-table.model';
+// Tag
+export * from './components/tag/tag.component';
+export * from './components/tag/tag.component.module';
+export * from './components/tag/tag.model';
+// Tooltip
+export * from './components/tooltip/tooltip.component';
+export * from './components/tooltip/tooltip.component.module';
+export * from './components/tooltip/tooltip.model';
+// Dropdown
+export * from './components/dropdown/dropdown.component';
+export * from './components/dropdown/dropdown.component.module';
+export * from './components/dropdown/dropdown.model';
+// Spinner
+export * from './components/spinner/spinner.component';
+export * from './components/spinner/spinner.module';
+export * from './components/spinner/spinner.model'
+// Confirm Dialog
+export * from './components/confirm-dialog/confirm-dialog.component';
+export * from './components/confirm-dialog/confirm-dialog.component.module';
+// Datepicker
+export * from './components/datepicker/datepicker.component'
+export * from './components/datepicker/datepicker.component.module'
+// Rating
+export * from './components/rating/rating.component'
+export * from './components/rating/rating.component.module'
+// Scale
+export * from './components/scale/scale.component'
+export * from './components/scale/scale.component.module'
+// Tag
+export * from './components/tag/tag.component'
+export * from './components/tag/tag.component.module'
+// Toggle
+export * from './components/toggle/toggle.component'
+export * from './components/toggle/toggle.component.module'
+// Avatar
+export * from './components/avatar/avatar.component'
+export * from './components/avatar/avatar.component.module'
+export * from './components/avatar/avatar.model'
+// Stepper
+export * from './components/stepper/stepper.component'
+export * from './components/stepper/stepper.component.module'
+// Input Autocomplete
+export * from './components/autocomplete/autocomplete.component'
+export * from './components/autocomplete/autocomplete.component.module'
+export * from './components/autocomplete/autocomplete.model'
+// Badge
+export * from './components/badge/badge.component'
+export * from './components/badge/badge.component.module'
+export * from './components/badge/badge.model'
+// Radial Progress
+export * from './components/radial-progress/radial-progress.component'
+export * from './components/radial-progress/radial-progress.component.module'
+export * from './components/radial-progress/radial-progress.model'
+// Empty State
+export * from './components/empty-state/empty-state.component'
+export * from './components/empty-state/empty-state.component.module'
+export * from './components/empty-state/empty-state.model'
+// Table
+export * from './components/table/table.component';
+export * from './components/table/table.component.module';
+export * from './components/table/table.model'
+// Paginator
+export * from './components/paginator/paginator.component';
+export * from './components/paginator/paginator.component.module';
+// Skeleton
+export * from './components/skeleton/skeleton.component';
+// Side Sheet
+export * from './components/side-sheet/side-sheet.component';
+export * from './components/side-sheet/side-sheet.component.module';
+export * from './components/side-sheet/side-sheet.service';
+export * from './components/side-sheet/side-sheet.model';
+// Slider
+export * from './components/slider/slider.component';
+export * from './components/slider/slider.component.module';
+export * from './components/slider/slider.model';
+// Segmented Bar
+export * from './components/segmented-bar/segmented-bar.component';
+export * from './components/segmented-bar/segmented-bar.component.module';
+export * from './components/segmented-bar/segmented-bar.model';
+// Page Header
+export * from './components/page-header/page-header.component';
+export * from './components/page-header/page-header.component.module';
+// Accordion
+export * from './components/accordion/accordion.component';
+export * from './components/accordion/accordion.component.module';
+export * from './components/accordion/accordion.model'
+// Divider
+export * from './components/divider/divider.component';
+export * from './components/divider/divider.model';
+export * from './components/divider/divider.component.module';
+// Tabs
+export * from './components/tabs/tabs.component.module';
+export * from './components/tabs/tabs.component';
+export * from './components/tabs/tabs.model';
+export * from './components/tabs/tab.directive';
+// Language
+export * from './utils/localization/language.model';
+//Overflow Menu
+export * from './components/overflow-menu/overflow-menu.component.module';
+export * from './components/overflow-menu/overflow-menu.component';
+//Application Theme
+export * from './models/application-theme.model';
+// Segmented Button
+export * from './components/segmented-button/segmented-button.component';
+export * from './components/segmented-button/segmented-button.model';
+export * from './components/segmented-button/segmented-button.component.module';
+// Password Criteria
+export * from './components/password-criteria/password.component';
+export * from './components/password-criteria/password.component.module';
+// Phone Input
+export * from './components/phone-input/phone-input.component';
+export * from './components/phone-input/phone-input.component.module';
+export * from './components/phone-input/phone-input.model';
+// Colors
+export * from './models/colors.model';
+// Password Strength
+export * from './components/password-strength/password-strength.component';
+export * from './components/password-strength/password-strength.component.module';

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
+  });
+});