@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/autocomplete/autocomplete.model.ts

@@ -0,0 +1,28 @@
+export type AutocompleteType = 'single' | 'multi' | 'large';
+
+export enum Autocomplete {
+  SINGLE = 'single',
+  MULTI = 'multi',
+  LARGE = 'large',
+}
+
+export enum Padding {
+  AUTOCOMPLETE_CONTAINER = 40,
+  DROPDOWN_CONTAINER = 60,
+  AUTOCOMPLETE_SPACE_CONTAINER = 65,
+  DROPDOWN_SPACE_CONTAINER = 85,
+}
+
+export const AMOUNT_TAG_WIDTH = 33;
+
+export enum Timeout {
+  VIEW_INITIALIZED_AFTER_ACTION = 150,
+  VIEW_INITIALIZED_COMPONENT_LOAD = 600,
+}
+
+export enum DropdownVariation {
+  AUTOCOMPLETE = 'autocomplete',
+  DROPDOWN = 'dropdown',
+}
+
+export type AutocompleteSize = 'small' | 'medium';

package/projects/tgo-canopy-ui/components/autocomplete/includes.pipe.spec.ts

@@ -0,0 +1,33 @@
+import { IncludesPipe } from './includes.pipe';
+
+describe('IncludesPipe', () => {
+  let pipe: IncludesPipe;
+
+  beforeEach(() => {
+    pipe = new IncludesPipe();
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return true if value is included in the array', () => {
+    const result = pipe.transform('apple', ['apple', 'banana', 'orange']);
+    expect(result).toBe(true);
+  });
+
+  it('should return false if value is not included in the array', () => {
+    const result = pipe.transform('grape', ['apple', 'banana', 'orange']);
+    expect(result).toBe(false);
+  });
+
+  it('should handle non-array values and return false if not equal', () => {
+    const result = pipe.transform('apple', 'not an apple');
+    expect(result).toBe(false);
+  });
+
+  it('should handle non-array values and return true if equal', () => {
+    const result = pipe.transform('apple', 'apple');
+    expect(result).toBe(true);
+  });
+});

package/projects/tgo-canopy-ui/components/autocomplete/includes.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * The purpose of this pipe is to determine if the value is present in the values array.
+ * If values is an array, the method uses the includes method to check for inclusion.
+ * If values is not an array, it checks for strict equality between value and values.
+ */
+@Pipe({
+  name: 'includes',
+})
+export class IncludesPipe implements PipeTransform {
+  transform(value: any, values: any, valueField?: string): boolean {
+    return Array.isArray(values)
+      ? !!values?.find(v => (valueField ? v?.[valueField] === value?.[valueField] : value === v))
+      : valueField
+      ? value?.[valueField] === values?.[valueField]
+      : value === values;
+  }
+}

package/projects/tgo-canopy-ui/components/autocomplete/prevent-input.directive.spec.ts

@@ -0,0 +1,46 @@
+import { PreventInputDirective } from './prevent-input.directive';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { Component } from "@angular/core";
+import { By } from "@angular/platform-browser";
+
+@Component({
+  template: `<input uiPreventInput [uiPreventInput]="true" />`
+})
+class TestComponent {}
+
+describe('PreventInputDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      imports: [PreventInputDirective]
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+  });
+
+  it('should create an instance', () => {
+    const directive = new PreventInputDirective();
+    expect(directive).toBeTruthy();
+  });
+
+  it('should prevent input for non-allowed keys', () => {
+    const inputEl = fixture.debugElement.query(By.directive(PreventInputDirective)).nativeElement;
+    const event = new KeyboardEvent('keydown', { key: 'a' });
+    jest.spyOn(event, 'preventDefault');
+    inputEl.dispatchEvent(event);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should not prevent input for allowed keys', () => {
+    const inputEl = fixture.debugElement.query(By.directive(PreventInputDirective)).nativeElement;
+    const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Backspace', 'Tab', 'Delete', 'Control', 'Shift', 'Alt'];
+    allowedKeys.forEach(key => {
+      const event = new KeyboardEvent('keydown', { key });
+      jest.spyOn(event, 'preventDefault');
+      inputEl.dispatchEvent(event);
+      expect(event.preventDefault).not.toHaveBeenCalled();
+    });
+  });
+});

package/projects/tgo-canopy-ui/components/autocomplete/prevent-input.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, HostListener, Input } from '@angular/core';
+
+@Directive({
+  selector: '[uiPreventInput]',
+  standalone: true
+})
+export class PreventInputDirective {
+  @Input() uiPreventInput: boolean;
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent): void {
+    const allowedKeys = [
+      'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Backspace', 'Tab', 'Delete', 'Control', 'Shift', 'Alt'
+    ];
+    if (!allowedKeys.includes(event.key) && !event.ctrlKey && !event.metaKey && this.uiPreventInput) {
+      event.preventDefault();
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/autocomplete/transform-Item.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { AutocompleteUtils } from '../../utils/autocomplete-utils';
+
+/**
+ * the TransformItemPipe is designed to selectively extract and return values from objects based on a specified field,
+ * providing a way to transform and display data a template.
+ */
+@Pipe({
+  name: 'transformItem',
+})
+export class TransformItemPipe implements PipeTransform {
+  transform(value: any, field: string, getValueList: boolean = false): any {
+    if (getValueList) {
+      return AutocompleteUtils.isArray(value) ? value.map((item: any) => field ? item[field] : item) : field ? value?.[field] : value;
+    }
+
+    if (AutocompleteUtils.isPrimitive(value)) {
+      return value;
+    } else if (!AutocompleteUtils.isPrimitive(value) && field && (value?.[field] || value[0][field])) {
+      return value?.[field] || value[0][field];
+    } else {
+      AutocompleteUtils.throwInvalidSetupError();
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/autocomplete/transform-item.pipe.spec.ts

@@ -0,0 +1,25 @@
+import { TransformItemPipe } from './transform-Item.pipe';
+import { AutocompleteUtils } from "../../utils/autocomplete-utils";
+
+describe('TransformItemPipe', () => {
+  let pipe: TransformItemPipe;
+
+  beforeEach(() => {
+    pipe = new TransformItemPipe();
+  });
+
+  it('transforms primitive value', () => {
+    const result = pipe.transform('test', 'someField');
+    expect(result).toBe('test');
+  });
+
+  it('transforms non-primitive value with a specified field', () => {
+    const input = { someField: 'test' };
+    const result = pipe.transform(input, 'someField');
+    expect(result).toBe('test');
+  });
+
+  it('throws an error for invalid setup', () => {
+    expect(() => pipe.transform([], '')).toThrowError();
+  });
+});

package/projects/tgo-canopy-ui/components/avatar/avatar.component.html

@@ -0,0 +1,32 @@
+<div
+  class="avatar-container"
+  [attr.type]="!imageUrl && !name ? 'icon' : 'initials'"
+  [ngClass]="[size]"
+  [attr.theme]="applicationTheme"
+  [ngStyle]="{ backgroundColor: backgroundAvatarColor }"
+>
+  <span *ngIf="name && !imageUrl">
+    {{ name | nameInitials }}
+  </span>
+  <img [attr.aria-hidden]="true" *ngIf="imageUrl" [attr.src]="imageUrl" [alt]="">
+  <ui-icon
+    *ngIf="!imageUrl && !name"
+    [attr.aria-hidden]="true"
+    [color]="applicationTheme === 'classic' ? 'dark' : 'rebrand-black'"
+    [applicationTheme]="applicationTheme"
+    [size]="iconSize[size]"
+    [name]="'User-profile'"
+  ></ui-icon>
+  <div class="edit-avatar" *ngIf="size === avatarSize.LARGE && allowEdit">
+    <ui-button
+      [applicationTheme]="applicationTheme"
+      [companyColor]="'black'"
+      [size]="'small'"
+      [iconName]="'Edit'"
+      [variant]="'icon-button'"
+      [tooltip]="tooltipText"
+      [ariaLabel]="(('AVATAR.EDIT_AVATAR') | uiTranslate | async)!"
+      (buttonClickEvent)="onEditClick($event)"
+    ></ui-button>
+  </div>
+</div>

package/projects/tgo-canopy-ui/components/avatar/avatar.component.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AvatarComponent } from './avatar.component';
+import { NameInitialsPipe } from '../../pipes/name-initials.pipe';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
+
+@NgModule({
+  declarations: [AvatarComponent, NameInitialsPipe],
+  imports: [CommonModule, IconComponentModule, MatTooltipModule, ButtonComponentModule, UiTranslatePipe],
+  exports: [AvatarComponent],
+})
+export class AvatarComponentModule {}

package/projects/tgo-canopy-ui/components/avatar/avatar.component.scss

@@ -0,0 +1,81 @@
+@use "../../theme/variables" as *;
+
+:host {
+  .clickable {
+    cursor: pointer;
+  }
+
+  .non-clickable {
+    pointer-events: none;
+  }
+
+  .avatar-container {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+    background: $tgo-teal-secondary;
+    position: relative;
+    user-select: none;
+
+    &[type="icon"] {
+      background: $tgo-medium;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 100%;
+    }
+
+    &.small {
+      width: 24px;
+      height: 24px;
+      font-size: 10px;
+    }
+
+    &.smallMedium {
+      width: 36px;
+      height: 36px;
+      font-size: 14px;
+    }
+
+    &.medium {
+      width: 48px;
+      height: 48px;
+      font-size: 20px;
+    }
+
+    &.large {
+      width: 120px;
+      height: 120px;
+      font-size: 50px;
+      letter-spacing: -2;
+    }
+
+    .edit-avatar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      background: $tgo-light;
+      width: 32px;
+      height: 32px;
+      border-radius: 100%;
+    }
+
+    &[theme="dark"], &[theme="light"] {
+      background: $grayscale-20;
+      color: $black;
+      .edit-avatar {
+        box-shadow: 0 4px 16px 0 #24242414;
+        background: $tgo-white;
+      }
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/avatar/avatar.component.spec.ts

@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvatarComponent } from './avatar.component';
+import { AvatarSize, iconSize } from "./avatar.model";
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
+
+describe('AvatarComponent', () => {
+  let component: AvatarComponent;
+  let fixture: ComponentFixture<AvatarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AvatarComponent ],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+      providers: [
+        {
+          provide: 'CANOPYUI_DEFAULT_APPLICATION_THEME',
+          useValue: 'app_theme'
+        }
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AvatarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default values for inputs', () => {
+    expect(component.size).toEqual(AvatarSize.SMALL);
+    expect(component.imageUrl).toEqual('');
+    expect(component.name).toEqual('');
+  });
+
+  it('should use iconSize and avatarSize from the model', () => {
+    //@ts-expect-error
+    expect(component.iconSize).toEqual(iconSize);
+    //@ts-expect-error
+    expect(component.avatarSize).toEqual(AvatarSize);
+  });
+
+  it('should apply theme provided by token', () => {
+    expect(component.applicationTheme).toEqual('app_theme');
+  });
+
+  it('should emit edit click', () => {
+    const editClickEmitterSpy = jest.spyOn(component.editClick, 'emit');
+    const event = new Event('click');
+    //@ts-expect-error
+    component.onEditClick(event);
+    expect(editClickEmitterSpy).toHaveBeenCalledTimes(1);
+    expect(editClickEmitterSpy).toHaveBeenCalledWith(event);
+  });
+});

package/projects/tgo-canopy-ui/components/avatar/avatar.component.stories.ts

@@ -0,0 +1,113 @@
+import { AvatarComponent } from './avatar.component';
+import { NameInitialsPipe } from '../../pipes/name-initials.pipe';
+import { AvatarSize } from './avatar.model';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { transformTheme } from "../../utils/transform-theme";
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
+import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12298-63689&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+
+export default {
+  title: 'Avatar',
+  component: AvatarComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [AvatarComponent, NameInitialsPipe],
+      imports: [IconComponentModule, MatTooltipModule, UiTranslatePipe, ButtonComponentModule],
+    }),
+  ],
+} as Meta;
+
+
+const Template: StoryFn = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = parameters;
+
+export const Editable = Template.bind({});
+Editable.args = {
+  size: AvatarSize.LARGE,
+  allowEdit: true,
+  tooltipText: 'Edit',
+};
+Editable.parameters = parameters;
+
+export const MultipleDefaultAvatar: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-avatar applicationTheme="${_theme}" size="small" ></ui-avatar>
+        <ui-avatar applicationTheme="${_theme}" size="medium" ></ui-avatar>
+        <ui-avatar applicationTheme="${_theme}" size="large"></ui-avatar>
+      `,
+    };
+  }
+} as StoryFn;
+MultipleDefaultAvatar.parameters = parameters;
+
+export const MultipleImageAvatar: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-avatar applicationTheme="${_theme}" size="small" imageUrl="/images/Avatar.png"></ui-avatar>
+        <ui-avatar applicationTheme="${_theme}" size="medium" imageUrl="/images/Avatar.png"></ui-avatar>
+        <ui-avatar applicationTheme="${_theme}" size="large" imageUrl="/images/Avatar.png"></ui-avatar>
+      `,
+    };
+  }
+} as StoryFn;
+MultipleImageAvatar.parameters = parameters;
+
+export const MultipleInitialsAvatar: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-avatar applicationTheme="${_theme}" [backgroundColor]="'RED'" size="small" name="LS"></ui-avatar>
+        <ui-avatar applicationTheme="${_theme}" size="medium" name="LS"></ui-avatar>
+        <ui-avatar applicationTheme="${_theme}" size="large" name="LS"></ui-avatar>
+      `,
+    };
+  }
+} as StoryFn;
+MultipleInitialsAvatar.parameters = parameters;
+
+export const Small = Template.bind({});
+Small.args = {
+  size: AvatarSize.SMALL,
+};
+Small.parameters = parameters;
+
+export const Medium = Template.bind({});
+Medium.args = {
+  size: AvatarSize.MEDIUM,
+  backgroundColor: 'red'
+};
+Medium.parameters = parameters;
+
+export const Large = Template.bind({});
+Large.args = {
+  size: AvatarSize.LARGE,
+};
+Large.parameters = parameters;

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

@@ -0,0 +1,93 @@
+import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
+import {
+  AvatarSize,
+  BackgroundAvatarColorType,
+  iconSize,
+  AvatarBackgroundColor
+} from './avatar.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss'],
+})
+export class AvatarComponent {
+  /**
+   * Input property for specifying the size of the avatar.
+   * @type {AvatarSize}
+   * @default AvatarSize.SMALL
+   * @memberof AvatarComponent
+   */
+  @Input() size = AvatarSize.SMALL;
+  /**
+   * Input property for specifying the URL of the image to display in the avatar.
+   * @type {string}
+   * @memberof AvatarComponent
+   */
+  @Input() imageUrl = '';
+
+  /**
+   * Input property for specifying the initials to display in the avatar.
+   * @type {string}
+   * @memberof AvatarComponent
+   */
+  @Input() name = '';
+
+  /**
+   * Input property for specifying the tooltip text for edit.
+   * @type {string}
+   * @memberof AvatarComponent
+   */
+  @Input() tooltipText = '';
+
+  /**
+   * Input property that makes avatar editable.
+   * @type {boolean}
+   * @memberof AvatarComponent
+   */
+  @Input() allowEdit = false;
+
+  /**
+   *
+   * Defines the application theme where
+   *
+   * @type {ApplicationTheme}
+   * @memberof AvatarComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   *
+   * Defines the background color
+   *
+   * @type {BackgroundAvatarColorType}
+   * @memberof AvatarComponent
+   */
+  @Input() set backgroundColor(colorName: BackgroundAvatarColorType) {
+    this.backgroundAvatarColor = AvatarBackgroundColor[colorName.toUpperCase() as keyof typeof AvatarBackgroundColor];
+  }
+
+  /**
+   * Event emitted when the edit button is clicked.
+   * @type {Event}
+   * @memberof AvatarComponent
+   */
+  @Output() editClick = new EventEmitter<Event>();
+
+  protected backgroundAvatarColor: string;
+  protected readonly iconSize = iconSize;
+  protected readonly avatarSize = AvatarSize;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  protected onEditClick(event: Event): void {
+    this.editClick.emit(event);
+  }
+}

package/projects/tgo-canopy-ui/components/avatar/avatar.model.ts

@@ -0,0 +1,27 @@
+import { IconSize } from '../icon/icon.model';
+
+export enum AvatarSize {
+  SMALL = 'small',
+  SMALL_MEDIUM = 'smallMedium',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+export const iconSize: Record<string, IconSize> = {
+  small: '16',
+  medium: '24',
+  large: '80',
+};
+
+export enum AvatarBackgroundColor {
+  PINK = '#FFE6FA',
+  BLUE ='#D9E8FF',
+  GREEN = '#E2F4B3',
+  ORANGE = '#FFE1B3',
+  RED = '#FFAC9A',
+}
+
+export type BackgroundAvatarColorType = 'red' | 'blue' | 'green' | 'orange' | 'pink';
+
+
+

package/projects/tgo-canopy-ui/components/badge/badge.component.html

@@ -0,0 +1,16 @@
+<div [class]="'badge badge-container-' + variant"
+     [attr.aria-label]="label"
+     [attr.theme]="applicationTheme"
+     [attr.color]="isClassicTheme ? color : rebrandColor"
+     [matTooltip]="(label.length > 25) ? label : ''"
+     [matTooltipClass]="applicationTheme"
+>
+  <ng-container [ngSwitch]="variant">
+    <ng-container *ngSwitchCase="badgeVariant.PRIMARY">
+      <ui-icon *ngIf="icon" class="badge-icon" [name]="icon" [color]="iconColor" ></ui-icon>
+    </ng-container>
+    <div *ngSwitchCase="badgeVariant.SECONDARY" class="point" [attr.color]="isClassicTheme ? color : rebrandColor"></div>
+    <div *ngSwitchCase="badgeVariant.NOTIFICATION" class="number-notification">{{ notificationsAmount }}</div>
+  </ng-container>
+  <div class="label" *ngIf="label && variant !== badgeVariant.NOTIFICATION">{{ label.length > 25 && truncateLabel ? (label | slice : 0 : 25) + '...' : label }}</div>
+</div>

package/projects/tgo-canopy-ui/components/badge/badge.component.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BadgeComponent } from './badge.component';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@NgModule({
+  declarations: [BadgeComponent],
+  imports: [CommonModule, IconComponentModule, MatTooltipModule],
+  exports: [BadgeComponent],
+})
+export class BadgeComponentModule {}