@testgorilla/tgo-ui 2.10.999 → 2.11.1

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

@@ -0,0 +1,193 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TagComponent } from './tag.component';
+import { ElementRef } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+describe('TagComponent', () => {
+  let component: TagComponent;
+  let fixture: ComponentFixture<TagComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TagComponent],
+      imports: [MatTooltipModule]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TagComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  it('should emit onClose event when close() is called', () => {
+    jest.spyOn(component.close, 'emit');
+    component.onClose();
+    expect(component.close.emit).toHaveBeenCalled();
+  });
+
+  it('should set tabIndex correctly', () => {
+    component.isDisabled = true;
+    expect(component.tabIndex).toBe(-1);
+
+    component.isDisabled = false;
+    component.readOnly = true;
+    expect(component.tabIndex).toBe(-1);
+
+    component.readOnly = false;
+    expect(component.tabIndex).toBe(0);
+  });
+
+  it('should update label text and check for ellipsis on label change', () => {
+    component.labelElement = { nativeElement: { offsetWidth: 100, scrollWidth: 50 } } as ElementRef<HTMLElement>;
+    //@ts-expect-error
+    component.labelText = 'Sample Label';
+    //@ts-expect-error
+    jest.spyOn(component, 'isLabelEllipseActive');
+
+    component.label = 'New Label';
+
+    //@ts-expect-error
+    expect(component.labelText).toBe('New Label');
+    //@ts-expect-error
+    expect(component.isLabelEllipseActive).toHaveBeenCalled();
+  });
+
+  describe('when tag pressed', () => {
+    let onPressEventSpy: jest.SpyInstance
+    beforeEach(() => {
+      onPressEventSpy = jest.spyOn(component.press, 'emit');
+    })
+    it('should emit onPress event', () => {
+      component.readOnly = false;
+      component.allowClose = false;
+      component.onPress();
+      expect(onPressEventSpy).toHaveBeenCalledWith(component.isSelected);
+    });
+
+    it('should not call press() when readOnly is true', () => {
+      component.readOnly = true;
+      component.onPress();
+      expect(onPressEventSpy).toHaveBeenCalledTimes(0)
+    });
+
+    it('should not call press() when allowClose is true', () => {
+      component.allowClose = true;
+      component.onPress();
+      expect(onPressEventSpy).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('should have default values for various inputs', () => {
+    expect(component.isSelected).toBe(false); // Default selected state
+    expect(component.isDisabled).toBe(false); // Default disabled state
+    expect(component.applicationTheme).toBe('light'); // Default theme
+  });
+
+  it('should emit "press" event when pressed', () => {
+    jest.spyOn(component.press, 'emit'); // Spy on the "press" event
+
+    component.onPress(); // Simulate a press action
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.press.emit).toHaveBeenCalled(); // The event should be emitted
+  });
+
+  it('should emit "close" event when closed', () => {
+    jest.spyOn(component.close, 'emit'); // Spy on the "close" event
+
+    component.onClose(); // Simulate a close action
+
+    fixture.detectChanges(); // Trigger change detection
+
+    expect(component.close.emit).toHaveBeenCalled(); // The event should be emitted
+  });
+
+  it('should set the hover state correctly', () => {
+    component.setHoverState(true); // Set hover state to true
+
+    //@ts-ignore
+    expect(component.isHovered).toBe(true); // Hover state should be true
+
+    component.setHoverState(false); // Set hover state to false
+
+    //@ts-ignore
+    expect(component.isHovered).toBe(false); // Hover state should be false
+  });
+
+  it('should set the shrink state correctly', () => {
+    component.setShrinkState(true); // Set shrink state to true
+
+    //@ts-ignore
+    expect(component.shrink).toBe(true); // Shrink state should be true
+
+    component.setShrinkState(false); // Set shrink state to false
+
+    //@ts-ignore
+    expect(component.shrink).toBe(false); // Shrink state should be false
+  });
+
+  it('should check if the label is truncated', () => {
+    //@ts-ignore
+    component.labelText = 'A very long label text that should be truncated';
+
+    // Mock the labelElement for the test
+    //@ts-ignore
+    component.labelElement = new ElementRef({
+      offsetWidth: 50, // Mocked width
+      scrollWidth: 100, // Scroll width is greater, indicating truncation
+    });
+
+    //@ts-ignore
+    component.isLabelEllipseActive(); // Trigger the ellipsis check
+
+    fixture.detectChanges(); // Trigger change detection
+
+    // Now you can test if the ellipsis logic works
+    //@ts-ignore
+    component.isEllipseActiveObs$.subscribe((isTruncated) => {
+      expect(isTruncated).toBe(true); // Should indicate truncation
+    });
+  });
+
+  it('should return the correct tabIndex based on disabled and readOnly states', () => {
+    component.isDisabled = true; // Set disabled to true
+
+    expect(component.tabIndex).toBe(-1); // Should return -1 when disabled
+
+    component.isDisabled = false; // Set disabled to false
+    component.readOnly = true; // Set readOnly to true
+
+    expect(component.tabIndex).toBe(-1); // Should return -1 when read-only
+
+    component.readOnly = false; // Set read-only to false
+
+    //@ts-ignore
+    expect(component.tabIndex).toBe(0); // Should return 0 when not disabled or read-only
+  });
+
+  it('should return "filled" correctly based on other inputs', () => {
+    component.readOnly = true;
+    expect(component.filled).toBe(true); // Should return true when read-only
+
+    component.readOnly = false;
+    component.allowClose = true; // Set allowClose to true
+
+    expect(component.filled).toBe(true); // Should return true when allowClose is true
+
+    component.allowClose = false;
+    component.isSelected = true; // Set isSelected to true
+
+    expect(component.filled).toBe(true); // Should return true when selected
+  });
+});

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

@@ -0,0 +1,125 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TagComponent } from './tag.component';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { within, userEvent } from '@storybook/testing-library';
+import { transformTheme } from '../../utils/transform-theme';
+import { FileUploadComponent } from '../file-upload/file-upload.component';
+
+const parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12298-62808&mode=design&t=VGuLMZFB3q1OtVZa-4',
+  },
+};
+export default {
+  title: 'Tag',
+  component: TagComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [TagComponent],
+      imports: [IconComponentModule, MatTooltipModule],
+    }),
+  ],
+} as Meta;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+Default.parameters = parameters;
+
+export const Suggestion = Template.bind({});
+Suggestion.args = {
+  label: 'Label',
+};
+Suggestion.parameters = parameters;
+
+export const SuggestionWithIcon = Template.bind({});
+SuggestionWithIcon.args = {
+  label: 'Label',
+  icon: 'Folder',
+};
+SuggestionWithIcon.parameters = parameters;
+
+export const Filter = Template.bind({});
+Filter.args = {
+  label: 'Label',
+  isSelected: true,
+  showIconWhenSelected: true,
+};
+Filter.parameters = parameters;
+
+Filter.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  await new Promise(r => setTimeout(r, 1000));
+  await userEvent.click(canvas.getByTestId('tag--container'));
+  await new Promise(r => setTimeout(r, 1000));
+  await userEvent.click(canvas.getByTestId('tag--container'));
+  await userEvent.unhover(canvas.getByTestId('tag--container'));
+};
+
+export const Input = Template.bind({});
+Input.args = {
+  label: 'Label',
+  allowClose: true,
+};
+Input.parameters = parameters;
+
+export const InputWithIcon = Template.bind({});
+InputWithIcon.args = {
+  label: 'Label',
+  icon: 'Assessment',
+  allowClose: true,
+};
+InputWithIcon.parameters = parameters;
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+  label: 'Label',
+  readOnly: true,
+};
+ReadOnly.parameters = parameters;
+
+export const TruncatedLabel: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" [isSelected]="true" showIconWhenSelected="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" allowClose="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" readOnly="true"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" icon="Folder"></ui-tag>
+    <ui-tag applicationTheme="${_theme}" label="Long label to show how truncated text looks like" icon="Assessment" allowClose="true"></ui-tag>
+  `,
+    };
+  },
+} as Story;
+TruncatedLabel.parameters = parameters;
+
+export const Disabled: Story = {
+  render: (args: FileUploadComponent, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Suggestion"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Filter(Selected)" [isSelected]="true" showIconWhenSelected="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Input Without Icon" allowClose="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Read-only" readOnly="true"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Suggestion With Icon" icon="Folder"></ui-tag>
+  <ui-tag applicationTheme="${_theme}" isDisabled="true" label="Input With Icon" icon="Assessment" allowClose="true"></ui-tag>`,
+    };
+  },
+} as Story;
+Disabled.parameters = parameters;

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

@@ -0,0 +1,213 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter, Inject,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  ViewChild
+} from '@angular/core';
+import { debounceTime, map, ReplaySubject } from 'rxjs';
+import { IconColor, IconName } from '../icon/icon.model';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@Component({
+  selector: 'ui-tag',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+})
+export class TagComponent implements AfterViewInit, OnInit {
+  /**
+   * Tag's label
+   *
+   * @memberof TagComponent
+   */
+  @Input() set label(value: string) {
+    this.labelText = value;
+    if (this.labelElement) {
+      this.isLabelEllipseActive();
+    }
+  }
+
+  /**
+   * Icon
+   *
+   * @type {string}
+   * @memberof TagComponent
+   */
+  @Input() icon: IconName = '';
+
+  /**
+   * Whether to allow the tag to be closed.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() allowClose = false;
+
+  /**
+   * Whether the tag is in read-only mode.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() readOnly = false;
+
+  /**
+   * Whether the tag is selected.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() isSelected = false;
+
+  /**
+   * Display icon when is selected
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() showIconWhenSelected = false;
+
+  /**
+   * Specifies whether the element is disabled.
+   *
+   * @type {boolean}
+   * @default false
+   * @memberof TagComponent
+   */
+  @Input() isDisabled = false;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof TagComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * A string representing the ARIA label for accessibility.
+   * This label is used to provide an accessible name for the input element.
+   * @type {string}
+   * @memberof TagComponent
+   */
+  @Input() ariaLabel: string;
+
+  /**
+   * A string representing the ARIA requirement for accessibility.
+   * This attribute is used to indicate whether an input field is required for form submission.
+   * @type {boolean}
+   * @memberof TagComponent
+   */
+  @Input() ariaRequired = false;
+
+  /**
+   * Event triggered when the tag should be closed.
+   *
+   * @event
+   * @memberof TagComponent
+   */
+  @Output() close = new EventEmitter<void>();
+
+  /**
+   * Event triggered when a press action occurs.
+   *
+   * @event
+   * @memberof TagComponent
+   */
+  @Output() press = new EventEmitter<boolean>();
+
+  /**
+   * Subject that needs to be triggered when Label input changes, to check if it's truncated
+   * @private
+   * @type {void}
+   * @memberof TagComponent
+   */
+  private checkLabelEllipsis$ = new ReplaySubject<void>(1);
+
+  /**
+   * Observable that indicates if the Label is truncated
+   * debounceTime is used to wait for view to be initialized after receiving a new Label input
+   * @protected
+   * @type {boolean}
+   * @memberof TagComponent
+   */
+  protected isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(
+    debounceTime(100),
+    map(() => {
+      const el = this.labelElement.nativeElement;
+      return el.offsetWidth < el.scrollWidth;
+    })
+  );
+  protected labelText = '';
+  protected isHovered = false;
+  protected shrink = false;
+  protected iconToPass: IconName;
+  protected iconColor: IconColor;
+
+  @ViewChild('labelElement') labelElement: ElementRef<HTMLElement>;
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit(): void {
+    this.iconToPass = this.icon;
+    this.iconColor = 'black';
+  }
+
+  ngAfterViewInit(): void {
+    this.isLabelEllipseActive();
+  }
+
+  onPress(): void {
+    if (!this.readOnly && !this.allowClose) {
+      this.isSelected = this.showIconWhenSelected ? !this.isSelected : false;
+      this.press.emit(this.isSelected);
+    }
+  }
+
+  setHoverState(state: boolean) {
+    this.isHovered = state;
+    if (this.applicationTheme !== 'classic') {
+      if (state) {
+        this.iconToPass = `${this.icon}-filled` as IconName;
+      } else {
+        this.iconToPass = this.icon;
+      }
+      this.iconColor = this.isHovered ? 'white' : 'black';
+    }
+  }
+
+  setShrinkState(state: boolean) {
+    this.shrink = state;
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  private isLabelEllipseActive(): void {
+    this.checkLabelEllipsis$.next();
+  }
+
+  get tabIndex(): number {
+    return this.isDisabled || this.readOnly ? -1 : 0;
+  }
+
+  get filled(): boolean {
+    return this.readOnly || this.allowClose || this.isSelected;
+  }
+}

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

@@ -0,0 +1,24 @@
+<div class="toggle" [ngClass]="classes">
+  <div
+    [style.--max-width]="maxWidth + 'px'"
+    [tabIndex]="0"
+    class="toggle-container"
+    [ngClass]="{ 'active': selected }"
+    (click)="onToggle()"
+    [attr.aria-label]="ariaLabel"
+    [attr.aria-required]="ariaRequired"
+  >
+    <div
+      class="label"
+      uiEllipseText
+      [matTooltipShowDelay]="800"
+      [matTooltip]="showLabelTooltip ? label : ''"
+      (onChangeTextState)="changeTextState($event)"
+    >
+      {{ label ? label : selected ? (translateContext + 'ON' | uiTranslate : language) : (translateContext + 'OFF' | uiTranslate : language) }}
+    </div>
+    <div class="knob"></div>
+  </div>
+  <div *ngIf="message && selected" class="message">{{ message }}</div>
+</div>
+

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToggleComponent } from './toggle.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { EllipseTextDirective } from '../../directives/ellipse-text.directive';
+import { MatInputModule } from '@angular/material/input';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+@NgModule({
+  declarations: [ToggleComponent],
+  imports: [CommonModule, MatTooltipModule, EllipseTextDirective, MatInputModule, UiTranslatePipe],
+  exports: [ToggleComponent],
+})
+export class ToggleComponentModule {}