@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

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

@@ -1,212 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { IKeyboardEvent } from '../../models/keyboard-events.model';
-import { ChecklistComponent } from './checklist.component';
-import { ChecklistItem } from './checklist.model';
-
-const createTest = () => {
-  const items: ChecklistItem[] = [
-    {
-      value: '1',
-      label: 'Item 1',
-      checked: false,
-    },
-    {
-      value: '2',
-      label: 'Item 2',
-      checked: false,
-      disabled: true,
-    },
-    {
-      value: '3',
-      label: 'Item 3',
-      checked: false,
-      disabled: false,
-      hasLink: true,
-    },
-    {
-      value: '4',
-      label: 'Item 4',
-      checked: false,
-      disabled: false,
-      hasLink: true,
-    },
-  ];
-  TestBed.configureTestingModule({
-    imports: [ChecklistComponent],
-  });
-
-  const fixture = TestBed.createComponent(ChecklistComponent);
-  const component = fixture.componentInstance;
-  fixture.componentRef.setInput('items', items);
-  fixture.componentRef.setInput('footerButtonLabel', 'Dismiss');
-  fixture.detectChanges();
-  const footerButtonSpy = jest.spyOn(component.footerButtonClicked, 'emit');
-  const completedSpy = jest.spyOn(component.completed, 'emit');
-  const selectItemSpy = jest.spyOn(component, 'selectItem');
-  const selectedItemSpy = jest.spyOn(component.selectedItem, 'set');
-  const locators = {
-    getFooterButton: () => fixture.debugElement.query(By.css(`[data-testid="checklist-footer-button"`)),
-    getChecklistItem: (index: number) =>
-      fixture.debugElement.query(By.css(`[data-testid="checklist-item"]:nth-child(${index})`)),
-  };
-  return { fixture, component, footerButtonSpy, selectItemSpy, selectedItemSpy, locators, items };
-};
-
-describe('ChecklistComponent', () => {
-  it('should create', () => {
-    const { component } = createTest();
-    expect(component).toBeTruthy();
-  });
-
-  describe('#selectItem', () => {
-    it('should select item', () => {
-      const { fixture, selectItemSpy, items } = createTest();
-
-      const item = items[0];
-      fixture.componentInstance.selectItem(item);
-
-      expect(selectItemSpy).toHaveBeenCalledWith(item);
-    });
-
-    it('should emit selectedItem if item is disabled', () => {
-      const { fixture, selectedItemSpy, items } = createTest();
-
-      const item = items[1];
-      fixture.componentInstance.selectItem(item);
-
-      expect(selectedItemSpy).not.toHaveBeenCalled();
-    });
-
-    it('should emit selectedItem if item is already selected', () => {
-      const { fixture, selectedItemSpy, items } = createTest();
-
-      const item = items[0];
-      fixture.componentInstance.selectItem(item);
-      fixture.componentInstance.selectItem(item);
-
-      expect(selectedItemSpy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  it('should invoke selectItem when item clicked', () => {
-    const { fixture, locators, selectItemSpy, items } = createTest();
-
-    const item = locators.getChecklistItem(1);
-    item.triggerEventHandler('click', null);
-    fixture.detectChanges();
-
-    expect(selectItemSpy).toHaveBeenCalledWith(items[0]);
-    expect(items[0].checked).toBe(true);
-  });
-
-  it('should emit footerButtonClicked when footer button clicked', () => {
-    const { fixture, locators, footerButtonSpy } = createTest();
-
-    const footerBtn = locators.getFooterButton();
-    footerBtn.triggerEventHandler('buttonClickEvent', new Event('buttonClickEvent'));
-    fixture.detectChanges();
-
-    expect(footerButtonSpy).toHaveBeenCalled();
-  });
-
-  describe('#next', () => {
-    it('should select next item', () => {
-      const { component, items } = createTest();
-      const currentIndex = component.currentIndex();
-      component.next();
-
-      expect(component.currentIndex()).toBe(currentIndex + 1);
-      expect(component.selectedItem()).toBe(items[currentIndex + 1]);
-    });
-
-    it('should not select next item if current item is last', () => {
-      const { component, items } = createTest();
-      component.selectItem(items[items.length - 1]);
-      const currentIndex = component.currentIndex();
-      component.next();
-
-      expect(component.currentIndex()).toBe(currentIndex);
-    });
-  });
-
-  describe('#prev', () => {
-    it('should select previous item', () => {
-      const { fixture, component, items } = createTest();
-      component.selectItem(items[3]);
-      fixture.detectChanges();
-
-      component.prev();
-      fixture.detectChanges();
-
-      expect(component.currentIndex()).toBe(2);
-    });
-
-    it('should not select previous item if current item is first', () => {
-      const { fixture, component, items } = createTest();
-      component.selectItem(items[0]);
-      fixture.detectChanges();
-
-      component.prev();
-      fixture.detectChanges();
-
-      expect(component.currentIndex()).toBe(0);
-    });
-  });
-
-  describe('#keydownHandler', () => {
-    it('should select item if space key pressed', () => {
-      const { fixture, component, items, selectItemSpy } = createTest();
-      const item = items[0];
-      const event = new KeyboardEvent('keydown', { key: IKeyboardEvent.SPACE });
-
-      component.keydownHandler(event, item);
-      fixture.detectChanges();
-
-      expect(selectItemSpy).toHaveBeenCalledWith(item);
-      expect(item.checked).toBe(true);
-    });
-
-    it('should select item if enter key pressed', () => {
-      const { fixture, component, items, selectItemSpy } = createTest();
-      const item = items[0];
-      const event = new KeyboardEvent('keydown', { key: IKeyboardEvent.ENTER });
-
-      component.keydownHandler(event, item);
-      fixture.detectChanges();
-
-      expect(selectItemSpy).toHaveBeenCalledWith(item);
-      expect(item.checked).toBe(true);
-    });
-
-    it('should not select item if key is not space or enter', () => {
-      const { fixture, component, items, selectItemSpy } = createTest();
-      const item = items[0];
-      const event = new KeyboardEvent('keydown', { key: 'A' });
-
-      component.keydownHandler(event, item);
-      fixture.detectChanges();
-
-      expect(selectItemSpy).not.toHaveBeenCalled();
-      expect(item.checked).toBe(false);
-    });
-  });
-
-  it('should emit completed when all items are checked', () => {
-    const { fixture, component, items } = createTest();
-    const completedSpy = jest.spyOn(component.completed, 'emit');
-    fixture.componentRef.setInput('autocheck', true);
-
-    component.items.set(
-      items.map(item => {
-        item.disabled = false;
-        item.checked = true;
-        return item;
-      })
-    );
-
-    fixture.detectChanges();
-
-    expect(completedSpy).toHaveBeenCalled();
-  });
-});

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

@@ -1,85 +0,0 @@
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { transformTheme } from '../../utils/transform-theme';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { ChecklistComponent } from './checklist.component';
-
-export default {
-  title: 'Checklist',
-  component: ChecklistComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [],
-      imports: [ChecklistComponent, ProgressBarComponentModule, ButtonComponentModule, UiTranslatePipe],
-    }),
-  ],
-} as Meta;
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12588-65219&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Basic = Template.bind({ parameters });
-Basic.args = {
-  items: [
-    { label: 'Item', value: 1, checked: true },
-    { label: 'Item2', value: 2, checked: false, disabled: false },
-    { label: 'Item3', value: 3, checked: false, hasLink: false },
-    { label: 'Item4', value: 4, checked: false, hasLink: false },
-    { label: 'Item5', value: 5, checked: false, hasLink: false, reselect: true },
-    { label: 'Item6', value: 6, checked: false, hasLink: false },
-    { label: 'Item7', value: 7, checked: false, hasLink: false },
-  ],
-  footerButtonLabel: 'Button',
-  label: 'Content',
-  autocheck: true,
-};
-
-export const ManualCheck = Template.bind({ parameters });
-ManualCheck.args = {
-  items: [
-    { label: 'Item', value: 1, checked: true, hasLink: true },
-    { label: 'Item2', value: 2, checked: false, hasLink: false },
-    { label: 'Item3', value: 3, checked: false, hasLink: true },
-  ],
-  footerButtonLabel: 'Button',
-  label: 'Manual Check',
-  autocheck: false,
-};
-
-export const Disabled = Template.bind({ parameters });
-
-Disabled.args = {
-  items: [
-    { label: 'Item', value: 1, checked: true, disabled: true },
-    { label: 'Item2', value: 2, checked: false, disabled: true },
-    { label: 'Item3', value: 3, checked: false, disabled: true },
-  ],
-  footerButtonLabel: 'Button',
-  label: 'Disabled items',
-};
-export const WithItemLink = Template.bind({ parameters });
-WithItemLink.args = {
-  items: [
-    { label: 'Item', value: 1, checked: true, hasLink: true },
-    { label: 'Item2', value: 2, checked: false, hasLink: true },
-    { label: 'Item3', value: 3, checked: false, hasLink: true },
-  ],
-  footerButtonLabel: 'Button',
-  label: 'Content',
-};

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

@@ -1,169 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  ModelSignal,
-  Optional,
-  computed,
-  input,
-  model,
-  output,
-} from '@angular/core';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { IKeyboardEvent } from '../../models/keyboard-events.model';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { Language } from '../../utils/localization/language.model';
-import { LanguageService } from '../../utils/localization/language.service';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { DividerComponentModule } from '../divider/divider.component.module';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { ProgressBarComponentModule } from '../progress-bar/progress-bar.component.module';
-import { RadioButtonComponentModule } from '../radio-button/radio-button.component.module';
-import type { ChecklistItem } from './checklist.model';
-
-@Component({
-  selector: 'ui-checklist',
-  standalone: true,
-  imports: [
-    ProgressBarComponentModule,
-    RadioButtonComponentModule,
-    IconComponentModule,
-    ButtonComponentModule,
-    DividerComponentModule,
-    UiTranslatePipe,
-    AsyncPipe,
-  ],
-  templateUrl: './checklist.component.html',
-  styleUrl: './checklist.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ChecklistComponent {
-  /**
-   * Label for the checklist
-   * @type {string}
-   * @memberof ChecklistComponent
-   */
-  label = input('');
-
-  /**
-   * Items for the checklist
-   * @type {ModelSignal<ChecklistItem[]>}
-   * @memberof ChecklistComponent
-   */
-  items = model<ChecklistItem[]>([]);
-
-  /**
-   * Application theme
-   * @type {ApplicationTheme}
-   * @memberof ChecklistComponent
-   */
-  applicationTheme = input<ApplicationTheme | undefined>(undefined);
-  readonly theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme);
-
-  /**
-   * Confirm button label
-   * @type {string}
-   * @memberof ChecklistComponent
-   */
-  footerButtonLabel = input<string | undefined>(undefined);
-
-  /**
-   * A string representing the ARIA requirement for accessibility.
-   * This attribute is used to indicate whether an input field is required for form submission.
-   * @type {string}
-   * @memberof ChecklistComponent
-   */
-  ariaLabel = input<string | undefined>(undefined);
-
-  /**
-   * The language to be used
-   * @property language
-   * @type {Language}
-   * @memberof ChecklistComponent
-   */
-  language = input(LanguageService.defaultLanguage);
-
-  /**
-   * A boolean property that determines whether the checklist items should be automatically checked.
-   *
-   * @type {boolean}
-   */
-  autocheck = input(true);
-
-  /**
-   * Event emitter that triggers when the footer button is clicked.
-   * Emits a void event.
-   */
-  footerButtonClicked = output<void>();
-
-  /**
-   * An output event emitter that signifies the completion of a task or process.
-   * This event does not carry any payload.
-   */
-  readonly completed = output<void>();
-
-  /**
-   * Represents the currently selected item in the checklist.
-   * This is an instance of the `ChecklistItem` supports two-way binding.
-   */
-  selectedItem = model<ChecklistItem>();
-
-  readonly currentIndex = computed(() => {
-    const items = this.items();
-    const selectedItem = this.selectedItem();
-    return selectedItem ? items.indexOf(selectedItem) : -1;
-  });
-
-  protected progress = computed(() => {
-    const items = this.items();
-    const total = items.length;
-    const checked = items.filter(item => item.checked).length;
-    const progressValue = Number(((checked / total) * 100).toFixed(0));
-    if (progressValue === 100) {
-      this.completed.emit();
-    }
-    return progressValue;
-  });
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
-  ) {}
-
-  selectItem(item: ChecklistItem) {
-    if ((item.checked || item.disabled || this.selectedItem() === item) && !item.reselect) {
-      return;
-    }
-    if (this.autocheck()) {
-      item.checked = item?.reselect ? !item.checked : true;
-      this.items.set([...this.items()]);
-    }
-    this.selectedItem.set(item);
-  }
-
-  keydownHandler($event: KeyboardEvent, item: ChecklistItem) {
-    if (IKeyboardEvent.SPACE === $event.key || IKeyboardEvent.ENTER === $event.key) {
-      $event.preventDefault();
-      this.selectItem(item);
-    }
-  }
-
-  next() {
-    const currentIndex = this.currentIndex();
-    if (currentIndex < this.items().length - 1) {
-      this.selectItem(this.items()[currentIndex + 1]);
-    }
-  }
-
-  prev() {
-    const currentIndex = this.currentIndex();
-    if (currentIndex > 0) {
-      this.selectItem(this.items()[currentIndex - 1]);
-    }
-  }
-
-  footerButtonClick(event: Event) {
-    event.preventDefault();
-    this.footerButtonClicked.emit();
-  }
-}

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

@@ -1,8 +0,0 @@
-export interface ChecklistItem {
-  label: string;
-  value: string;
-  checked: boolean;
-  hasLink?: boolean;
-  disabled?: boolean;
-  reselect?: boolean;
-}

package/projects/tgo-canopy-ui/components/confirm-dialog/confirm-dialog.component.html

@@ -1,20 +0,0 @@
-<ng-container>
-  <ui-dialog
-    [title]="title ?? (('COMMON.CONFIRM') | uiTranslate | async)!"
-    [primaryButtonLabel]="confirmButtonText ?? (('COMMON.YES') | uiTranslate | async)!"
-    [secondaryButtonLabel]="showSecondaryButton ? (cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate | async)!) : undefined"
-    (primaryButtonClickEvent)="dialogRef.close(true)"
-    (secondaryButtonClickEvent)="dialogRef.close(false)"
-    (closeEvent)="dialogRef.close(null)"
-    primaryButtonType="primary"
-    secondaryButtonType="outlined"
-    [applicationTheme]="applicationTheme"
-    [showCloseButton]="showCloseButton"
-  >
-    <div class="message">{{ confirmMessage }}</div>
-    @if (confirmMessageHtml) {
-      <div class="message" [innerHTML]="confirmMessageHtml"></div>
-    }
-  </ui-dialog>
-
-</ng-container>

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

@@ -1,18 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { DialogComponentModule } from '../dialog/dialog.component.module';
-import { ConfirmDialogComponent } from './confirm-dialog.component';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-
-@NgModule({
-  declarations: [ConfirmDialogComponent],
-  exports: [ConfirmDialogComponent],
-  providers: [
-    { provide: MAT_DIALOG_DATA, useValue: {} },
-    { provide: MatDialogRef, useValue: {} },
-  ],
-  imports: [CommonModule, MatDialogModule, ButtonComponentModule, DialogComponentModule, UiTranslatePipe]
-})
-export class ConfirmDialogComponentModule {}

package/projects/tgo-canopy-ui/components/confirm-dialog/confirm-dialog.component.scss

@@ -1,3 +0,0 @@
-::ng-deep .ui-dialog-wrapper {
-  max-width: 600px !important;
-}

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

@@ -1,42 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { ConfirmDialogComponent } from './confirm-dialog.component';
-import { ConfirmDialogData } from './confirm-dialog.model';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-
-describe('ConfirmDialogComponent', () => {
-  let component: ConfirmDialogComponent;
-  let fixture: ComponentFixture<ConfirmDialogComponent>;
-  const mockData: ConfirmDialogData = {
-    message: 'Confirm?',
-    confirmButtonText: 'Yes',
-    cancelButtonText: 'Cancel',
-    title: 'Confirm',
-  };
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ConfirmDialogComponent],
-      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
-      imports: [UiTranslatePipe],
-      providers: [
-        { provide: MAT_DIALOG_DATA, useValue: mockData },
-        { provide: MatDialogRef, useValue: {} },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ConfirmDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-    expect(component.confirmMessage).toEqual(mockData.message);
-    expect(component.confirmButtonText).toEqual('Yes');
-    expect(component.cancelButtonText).toEqual('Cancel');
-    expect(component.title).toEqual('Confirm');
-  });
-});

package/projects/tgo-canopy-ui/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,51 +0,0 @@
-import { Component, Inject, Input, Optional } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { ConfirmDialogData } from './confirm-dialog.model';
-import { LanguageService } from '../../utils/localization/language.service';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-
-@Component({
-  selector: 'ui-confirm-dialog',
-  templateUrl: './confirm-dialog.component.html',
-  styleUrls: ['./confirm-dialog.component.scss'],
-})
-export class ConfirmDialogComponent {
-  confirmMessage: string;
-  confirmButtonText: string | undefined;
-  cancelButtonText: string | undefined;
-  title: string | undefined;
-  lang = LanguageService.defaultLanguage;
-  confirmMessageHtml: SafeHtml | undefined;
-  showCloseButton = false;
-  showSecondaryButton = true;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof DialogComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) private data: ConfirmDialogData,
-    protected domSanitizer: DomSanitizer,
-  ) {
-    this.confirmMessage = data.message;
-    this.confirmButtonText = data.confirmButtonText;
-    this.cancelButtonText = data.cancelButtonText;
-    this.title = data.title;
-    this.lang = data.language ?? LanguageService.defaultLanguage;
-    this.confirmMessageHtml = data.messageHtml ? this.domSanitizer.bypassSecurityTrustHtml(data.messageHtml) : undefined;
-    this.showCloseButton = data.showCloseButton ?? false;
-    this.showSecondaryButton = data.showSecondaryButton ?? true;
-
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-}

package/projects/tgo-canopy-ui/components/confirm-dialog/confirm-dialog.model.ts

@@ -1,13 +0,0 @@
-import { Language } from '../../utils/localization/language.model';
-
-export interface ConfirmDialogData {
-  message: string;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-  title?: string;
-  color?: string;
-  language?: Language;
-  messageHtml?: string;
-  showCloseButton?: boolean;
-  showSecondaryButton?: boolean;
-}

package/projects/tgo-canopy-ui/components/confirm-dialog/confirm-dialog.stories.ts

@@ -1,37 +0,0 @@
-import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { DialogComponentModule } from '../dialog/dialog.component.module';
-import { ConfirmDialogComponent } from './confirm-dialog.component';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { transformTheme } from '../../utils/transform-theme';
-
-export default {
-  title: 'Dialog/Confirm Dialog',
-  component: ConfirmDialogComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [ConfirmDialogComponent],
-      imports: [ButtonComponentModule, MatDialogModule, DialogComponentModule, UiTranslatePipe],
-      providers: [
-        { provide: MAT_DIALOG_DATA, useValue: { message: 'Confirm?' } },
-        { provide: MatDialogRef, useValue: {} },
-      ],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Modal title',
-};