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

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

@@ -1,153 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { StepperComponent } from './stepper.component';
-import { NO_ERRORS_SCHEMA } from "@angular/core";
-import { Step } from "./stepper.model";
-import { ApplicationTheme } from "../../models/application-theme.model";
-import { of } from "rxjs";
-import { UiTranslatePipe } from "../../pipes/ui-translate.pipe";
-
-describe('StepperComponent', () => {
-  let component: StepperComponent;
-  let fixture: ComponentFixture<StepperComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [StepperComponent],
-      imports: [UiTranslatePipe],
-      schemas: [NO_ERRORS_SCHEMA],
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(StepperComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should emit selectionChange event when onSelect is called', () => {
-    const steps: Step[] = [{ label: 'Step 1' }, { label: 'Step 2' }, { label: 'Step 3' }];
-    component.steps = steps;
-
-    const emitSpy = jest.spyOn(component.selectionChange, 'emit');
-
-    const selectedIndex = 1;
-    //@ts-expect-error
-    component.onSelect(selectedIndex, component.itemSteps[selectedIndex]);
-
-    expect(emitSpy).toHaveBeenCalledWith({
-      selectedIndex,
-      previousIndex: 0, // Assuming the default selectedIndex is 0
-      //@ts-expect-error
-      step: component.itemSteps[selectedIndex]
-    });
-  });
-
-  it('should update isOpen on showStepsToggle', () => {
-    component.isOpen = false;
-    //@ts-expect-error
-    component.showStepsToggle();
-    expect(component.isOpen).toBe(true);
-    //@ts-expect-error
-    component.showStepsToggle();
-    expect(component.isOpen).toBe(false);
-  });
-
-  it('should set isOpen to false on onCloseStepList', () => {
-    component.isOpen = true;
-    //@ts-expect-error
-    component.onCloseStepList();
-    expect(component.isOpen).toBe(false);
-  });
-  it('should emit selectionChange event  with correct data', () => {
-    const steps: Step[] = [
-      { label: 'Step 1', isVisited: true },
-      { label: 'Step 2', isVisited: false },
-      { label: 'Step 3', isVisited: false },
-    ];
-    component.steps = steps;
-
-    const expectedSelectedIndex = 1;
-    const expectedPreviousIndex = 0;
-    const expectedStep = steps[expectedSelectedIndex];
-
-    const emitSpy = jest.spyOn(component.selectionChange, 'emit');
-
-    // @ts-ignore
-    component.onSelect(expectedSelectedIndex, expectedStep);
-
-    expect(emitSpy).toHaveBeenCalledWith({
-      selectedIndex: expectedSelectedIndex,
-      previousIndex: expectedPreviousIndex,
-      step: expectedStep,
-    });
-  });
-
-  it('should toggle isOpen on showStepsToggle', () => {
-    component.isOpen = false;
-    // @ts-ignore
-    component.showStepsToggle();
-    expect(component.isOpen).toBe(true);
-    // @ts-ignore
-    component.showStepsToggle();
-    expect(component.isOpen).toBe(false);
-  });
-
-  it('should set isOpen to false on onCloseStepList', () => {
-    component.isOpen = true;
-    // @ts-ignore
-    component.onCloseStepList();
-    expect(component.isOpen).toBe(false);
-  });
-
-  it('should auto select the first step as visited if firstStepAutoSelect is true', () => {
-    const steps: Step[] = [{ label: 'Step 1' }, { label: 'Step 2' }];
-    component.steps = steps;
-    // @ts-ignore
-    expect(component.itemSteps[0].isVisited).toBe(true);
-  });
-
-  it('should not auto select the first step as visited if firstStepAutoSelect is false', () => {
-    component.setFirstStepAutoSelect = false;
-    const steps: Step[] = [{ label: 'Step 1' }, { label: 'Step 2' }];
-    component.steps = steps;
-    // @ts-ignore
-    expect(component.itemSteps[0].isVisited).toBe(undefined);
-  });
-
-  it('should update selectedIndex and mark step as visited on onSelect', () => {
-    const steps: Step[] = [{ label: 'Step 1' }, { label: 'Step 2' }];
-    component.steps = steps;
-    const selectedIndex = 1;
-    const step = steps[selectedIndex];
-    // @ts-ignore
-    component.onSelect(selectedIndex, step);
-    // @ts-ignore
-    expect(component.selectedIndex).toBe(selectedIndex);
-    expect(step.isVisited).toBe(true);
-  });
-
-  it('should not mark step as visited if it is already visited on onSelect', () => {
-    const steps: Step[] = [{ label: 'Step 1', isVisited: true }, { label: 'Step 2', isVisited: true }];
-    component.steps = steps;
-    const selectedIndex = 1;
-    const step = steps[selectedIndex];
-    // @ts-ignore
-    component.onSelect(selectedIndex, step);
-    expect(step.isVisited).toBe(true);
-  });
-
-  it('should set applicationTheme to defaultAppTheme if provided', () => {
-    const defaultAppTheme: ApplicationTheme = 'dark';
-    const component = new StepperComponent(defaultAppTheme, of(false), {} as any, {} as any);
-    expect(component.applicationTheme).toBe(defaultAppTheme);
-  });
-
-  it('should not change applicationTheme if defaultAppTheme is not provided', () => {
-    const component = new StepperComponent('light', of(false), {} as any, {} as any);
-    expect(component.applicationTheme).toBe('light');
-  });
-});

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

@@ -1,97 +0,0 @@
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { StepperComponent } from './stepper.component';
-import { MatStepperModule } from '@angular/material/stepper';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { StepComponentModule } from '../step/step.component.module';
-import { StepLineElementDirective } from '../../directives/step-line-element.directive';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { RadialProgressComponentModule } from '../radial-progress/radial-progress.component.module';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { transformTheme } from "../../utils/transform-theme";
-
-export default {
-  title: 'Stepper',
-  component: StepperComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [StepperComponent, StepLineElementDirective],
-      imports: [
-        MatStepperModule,
-        IconComponentModule,
-        StepComponentModule,
-        MatProgressSpinnerModule,
-        RadialProgressComponentModule,
-        UiTranslatePipe,
-      ],
-    }),
-  ],
-} as Meta;
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12476-16559&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-Template.args = {};
-
-export const Default = Template.bind({});
-Default.args = {
-  steps: [{ label: 'First' }, { label: 'Two' }, { label: 'Three' }, { label: 'Assessment result' }],
-};
-Default.parameters = parameters;
-
-export const VisitedAll = Template.bind({});
-VisitedAll.args = {
-  steps: [
-    { label: 'First', isVisited: true },
-    { label: 'Second', isVisited: true },
-    { label: 'Third', isVisited: true },
-  ],
-};
-
-VisitedAll.parameters = parameters;
-
-export const FinalIcon = Template.bind({});
-FinalIcon.args = {
-  steps: [{ label: 'First' }, { label: 'Second' }, { label: 'Third' }],
-  lastStepFinalIcon: true,
-};
-
-FinalIcon.parameters = parameters;
-
-export const CustomIcon = Template.bind({});
-CustomIcon.args = {
-  steps: [
-    { label: 'First', iconName: 'Team' },
-    { label: 'Second', iconName: 'Test' },
-    { label: 'Third', iconName: 'Delete', showIconWhenSelected: true },
-  ],
-  lastStepFinalIcon: true,
-};
-
-CustomIcon.parameters = parameters;
-
-export const Vertical = Template.bind({});
-Vertical.args = {
-  position: 'vertical',
-  steps: [
-    { label: 'First', iconName: 'Team' },
-    { label: 'Second', iconName: 'Test' },
-    { label: 'Third', iconName: 'Delete', showIconWhenSelected: true },
-  ],
-  lastStepFinalIcon: true,
-};
-
-Vertical.parameters = parameters;

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

@@ -1,189 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component, DestroyRef, ElementRef,
-  EventEmitter,
-  Inject,
-  Input,
-  Optional,
-  Output, signal, ViewChild,
-} from '@angular/core';
-import { Step, StepperPosition } from './stepper.model';
-import { Observable } from 'rxjs';
-import { IS_MOBILE_TOKEN } from '../../providers/is-mobile';
-import { ApplicationTheme } from "../../models/application-theme.model";
-import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { FocusMonitor } from "@angular/cdk/a11y";
-
-@Component({
-  selector: 'ui-stepper',
-  templateUrl: './stepper.component.html',
-  styleUrls: ['./stepper.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class StepperComponent {
-  /**
-   *
-   * Auto selects first step as visited
-   * Defaults to true
-   *
-   * @memberof StepperComponent
-   */
-  @Input('firstStepAutoSelect') set setFirstStepAutoSelect(value: boolean) {
-    this.firstStepAutoSelect = value;
-    if (!this.firstStepAutoSelect) {
-      this.itemSteps = this.itemSteps.map((step, i) => ({
-        ...step,
-        isVisited: i === 0 && this.selectedIndex === -1 ? false : step.isVisited
-      }));
-    }
-  };
-
-  /**
-   * Input property to set the steps for the stepper.
-   * The first step will be marked as visited automatically.
-   *
-   * @memberof StepperComponent
-   */
-  @Input() set steps(itemSteps: Step[]) {
-    this.itemSteps = itemSteps;
-    if (itemSteps.length && this.firstStepAutoSelect) {
-      const [first, ...other] = itemSteps;
-      first.isVisited = true;
-      this.itemSteps = [first, ...other];
-    }
-
-  }
-
-  /**
-   * Input property to set the selected index of the stepper.
-   * Default value is 0.
-   *
-   * @memberof StepperComponent
-   */
-  @Input('selectedIndex') set setSelectedIndex(value: number) {
-    this.selectedIndex = value;
-    if (!this.firstStepAutoSelect) {
-      this.itemSteps = this.itemSteps.map((step, i) => ({
-        ...step,
-        isVisited: i === 0 && this.selectedIndex === -1 ? false : step.isVisited
-      }));
-    }
-  }
-
-  /**
-   * Input property indicating whether the final icon should be displayed.
-   * Default value is false.
-   *
-   * @memberof StepperComponent
-   */
-  @Input() lastStepFinalIcon = false;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof StepperComponent
-   */
-  @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 StepperComponent
-   */
-  @Input() ariaLabel: string;
-
-  /**
-   * Defines the stepper position
-   *
-   * @type {StepperPosition}
-   * @memberof StepperComponent
-   */
-  @Input() position: StepperPosition = 'horizontal';
-
-  /**
-   * 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 StepperComponent
-   */
-  @Input() ariaRequired = false;
-
-  @Output() selectionChange = new EventEmitter<{ selectedIndex: number; previousIndex: number; step: Step }>();
-
-  private isOpened = false;
-  private firstStepAutoSelect = true;
-  protected itemSteps: Step[] = [];
-  protected progressValue = 0;
-  protected translationContext = 'STEPPER.';
-  protected selectedIndex = 0;
-
-  get isOpen(): boolean {
-    return this.isOpened;
-  }
-
-  set isOpen(value: boolean) {
-    this.isOpened = value;
-  }
-
-  protected keyboardFocused = signal(false);
-
-  @ViewChild('stepper') stepperElement: ElementRef<HTMLElement>;
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    @Inject(IS_MOBILE_TOKEN) protected readonly isMobile$: Observable<boolean>,
-    protected focusMonitor: FocusMonitor,
-    protected destroyRef: DestroyRef,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this.subscriberFocus();
-  }
-
-  protected onSelect(changedIndex: number, step: Step): void {
-    if (!step.isVisited && this.selectedIndex !== changedIndex) {
-      step.isVisited = true;
-    }
-    this.selectionChange.emit({ selectedIndex: changedIndex, previousIndex: this.selectedIndex, step });
-
-    this.selectedIndex = changedIndex;
-    this.onCloseStepList();
-  }
-
-  protected showStepsToggle(): void {
-    this.isOpen = !this.isOpen;
-
-    setTimeout(() => {
-      this.selectedStepFocus();
-    })
-  }
-
-  protected onCloseStepList(): void {
-    this.isOpen = false;
-  }
-
-  protected subscriberFocus(): void {
-    if (!this.stepperElement) {
-      return;
-    }
-
-    this.focusMonitor.monitor(this.stepperElement.nativeElement)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(origin => this.keyboardFocused.set(origin === 'keyboard'));
-  }
-
-  private selectedStepFocus(): void {
-    const selectedElement = document.getElementById('step-' + this.selectedIndex);
-
-    if (this.keyboardFocused() && this.isOpen && selectedElement) {
-      this.focusMonitor.focusVia(selectedElement, 'keyboard');
-    }
-  }
-}

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

@@ -1,25 +0,0 @@
-import { IconName } from '../icon/icon.model';
-import { TemplateRef } from '@angular/core';
-
-export interface Step {
-  label: string;
-  isVisited?: boolean;
-  iconName?: IconName;
-  disabled?: boolean;
-  submitted?: boolean;
-  showIconWhenSelected?: boolean;
-  htmlDescription?: HtmlDescription[];
-  boldLabel?: boolean;
-  descriptionTpl?: TemplateRef<any>;
-  labelTooltip?: string;
-  alwaysShowIcon?: boolean;
-  context?: any;
-}
-
-export interface HtmlDescription {
-  text?: string;
-  iconName?: IconName;
-  iconTooltip?: string;
-}
-
-export type StepperPosition = 'horizontal' | 'vertical';

package/projects/tgo-canopy-ui/components/table/sentence-case.pipe.ts

@@ -1,13 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'sentencecase',
-})
-export class SentenceCasePipe implements PipeTransform {
-  transform(value: string | undefined): string {
-    if (!value) {
-      return '';
-    }
-    return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
-  }
-}

package/projects/tgo-canopy-ui/components/table/sentence-case.spec.ts

@@ -1,53 +0,0 @@
-import { SentenceCasePipe } from "./sentence-case.pipe";
-
-describe('SentenceCasePipe', () => {
-  let pipe: SentenceCasePipe;
-
-  beforeEach(() => {
-    pipe = new SentenceCasePipe();
-  });
-
-  it('should create an instance', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  it('should transform a lowercase string to sentence case', () => {
-    const result = pipe.transform('hello world');
-    expect(result).toBe('Hello world');
-  });
-
-  it('should transform an uppercase string to sentence case', () => {
-    const result = pipe.transform('HELLO WORLD');
-    expect(result).toBe('Hello world');
-  });
-
-  it('should transform a mixed-case string to sentence case', () => {
-    const result = pipe.transform('hElLo WoRlD');
-    expect(result).toBe('Hello world');
-  });
-
-  it('should return an empty string if the input is undefined', () => {
-    const result = pipe.transform(undefined);
-    expect(result).toBe('');
-  });
-
-  it('should return an empty string if the input is an empty string', () => {
-    const result = pipe.transform('');
-    expect(result).toBe('');
-  });
-
-  it('should handle a string with only one character', () => {
-    const result = pipe.transform('a');
-    expect(result).toBe('A');
-  });
-
-  it('should handle a string with a single uppercase character', () => {
-    const result = pipe.transform('A');
-    expect(result).toBe('A');
-  });
-
-  it('should not change a string that is already in sentence case', () => {
-    const result = pipe.transform('Hello world');
-    expect(result).toBe('Hello world');
-  });
-});