@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,61 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { StepComponent } from './step.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-describe('StepComponent', () => {
-  let component: StepComponent;
-  let fixture: ComponentFixture<StepComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [StepComponent],
-      schemas: [NO_ERRORS_SCHEMA], // To prevent errors due to missing components or directives in the template
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(StepComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should create the component', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should default the applicationTheme to "light"', () => {
-    fixture.detectChanges(); // Trigger initialization
-    expect(component.applicationTheme).toBe('light'); // Default theme
-  });
-
-
-  it('should emit "stepSelected" event when a step is clicked', () => {
-    const index = 1;
-    jest.spyOn(component.stepSelected, 'emit'); // Spy on the output event
-
-    //@ts-ignore
-    component.onStepSelected(index);
-
-    expect(component.stepSelected.emit).toHaveBeenCalledWith(index); // Check that event is emitted with the correct index
-  });
-
-  it('should return true for "hasLastStepDefaultIcon" if "showIconWhenSelected" is false', () => {
-    component.showIconWhenSelected = false;
-
-    //@ts-ignore
-    expect(component.hasLastStepDefaultIcon).toBe(true); // Should be true when showIconWhenSelected is false
-  });
-
-  it('should return true for "hasLastStepDefaultIcon" if "showIconWhenSelected" is true and step is not selected', () => {
-    component.showIconWhenSelected = true;
-    component.selected = false;
-
-    //@ts-ignore
-    expect(component.hasLastStepDefaultIcon).toBe(true); // Should be true when step is not selected
-  });
-
-  it('should return false for "hasLastStepDefaultIcon" if "showIconWhenSelected" is true and step is selected', () => {
-    component.showIconWhenSelected = true;
-    component.selected = true;
-
-    //@ts-ignore
-    expect(component.hasLastStepDefaultIcon).toBe(false); // Should be false when step is selected
-  });
-});

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

@@ -1,134 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
-import { IconName } from '../icon/icon.model';
-import { ApplicationTheme } from "../../models/application-theme.model";
-
-@Component({
-  selector: 'ui-step',
-  templateUrl: './step.component.html',
-  styleUrls: ['./step.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class StepComponent {
-  /**
-   * Input property for the label of the step.
-   *
-   * @memberof StepComponent
-   */
-  @Input() label: string;
-
-  /**
-   * Input property indicating whether the step has been visited.
-   *
-   * @memberof StepComponent
-   */
-  @Input() isVisited: boolean;
-
-  /**
-   * Input property indicating whether the form has been submitted.
-   *
-   * @memberof StepComponent
-   */
-  @Input() submitted: boolean;
-
-  /**
-   * Input property for the icon associated with the step.
-   *
-   * @memberof StepComponent
-   */
-  @Input() icon: IconName | undefined = '';
-
-  /**
-   * Input property for the index of the step.
-   *
-   * @memberof StepComponent
-   */
-  @Input() index: number;
-
-  /**
-   * Input property indicating whether the step is currently selected.
-   *
-   * @memberof StepComponent
-   */
-  @Input() selected: boolean;
-
-  /**
-   * Input property indicating whether the step is the last step in the stepper.
-   *
-   * @memberof StepComponent
-   */
-  @Input() isLast: boolean;
-
-  /**
-   * Input property indicating the selected index in the stepper.
-   *
-   * @memberof StepComponent
-   */
-  @Input() selectedIndex: number;
-
-  /**
-   * Input property indicating whether the step is disabled.
-   *
-   * @memberof StepComponent
-   */
-  @Input() disabled = false;
-
-  /**
-   * Input property indicating whether the previous step has been visited.
-   *
-   * @memberof StepComponent
-   */
-  @Input() prevStepIsVisited: boolean | undefined = false;
-
-  /**
-   * Input property indicating whether the component is in mobile mode.
-   *
-   * @memberof StepComponent
-   */
-  @Input() mobileMode = false;
-
-  /**
-   * Input property indicating whether the final icon should be displayed.
-   *
-   * @memberof StepComponent
-   */
-  @Input() finalIcon = false;
-
-  /**
-   * Input property indicating to display icon when step is selected.
-   *
-   * @memberof StepComponent
-   */
-  @Input() showIconWhenSelected = false;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof StepComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  /**
-   * Event emitted when the step was clicked.
-   * @type {number}
-   * @memberof StepComponent
-   */
-  @Output() stepSelected = new EventEmitter<number>();
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  protected get hasLastStepDefaultIcon(): boolean {
-    return !this.showIconWhenSelected || (this.showIconWhenSelected && !this.selected);
-  }
-
-  protected onStepSelected(index: number): void {
-    this.stepSelected.emit(index);
-  }
-}

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

@@ -1,79 +0,0 @@
-<ng-container>
-  <div class="stepper-wrapper" [attr.theme]="applicationTheme" *ngIf="!(isMobile$ | async); else mobile">
-    <ng-container *ngFor="let step of itemSteps; index as i, last as isLast">
-      <div class="step" #stepElement>
-        <ui-step
-          [label]="step.label"
-          [isVisited]="step.isVisited!"
-          [icon]="step.iconName"
-          [index]="i"
-          [selected]="i === selectedIndex"
-          [selectedIndex]="selectedIndex"
-          [isLast]="isLast"
-          [disabled]="step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)"
-          [prevStepIsVisited]="itemSteps[i - 1]?.isVisited && step.isVisited"
-          [finalIcon]="isLast ? lastStepFinalIcon : false"
-          [showIconWhenSelected]="!!step.showIconWhenSelected"
-          (stepSelected)="onSelect($event, step)"
-          [applicationTheme]="applicationTheme"
-          [attr.aria-label]="ariaLabel + '--' + step.label"
-        ></ui-step>
-      </div>
-      <div *ngIf="!isLast" class="separator-line" [ngClass]="{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }">
-        <div [stepLineWidth]="stepElement" class="line"></div>
-      </div>
-    </ng-container>
-  </div>
-
-  <ng-template #mobile>
-    <div class="mobile-stepper-wrapper">
-      <div class="stepper">
-        <div class="progress-step">
-          <ui-radial-progress [applicationTheme]="applicationTheme" [value]="selectedIndex + 1" [total]="itemSteps.length"></ui-radial-progress>
-        </div>
-
-        <div class="step-info">
-          <div class="current-step">
-            <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>
-            <span>{{ itemSteps[selectedIndex].label }}</span>
-          </div>
-          <div class="next-step">
-            <span *ngIf="itemSteps.length !== selectedIndex + 1 else finalStep">{{ (('COMMON.NEXT') | uiTranslate : language) + ':'}} {{ itemSteps[selectedIndex + 1].label }}</span>
-            <ng-template #finalStep>
-              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate : language }}</span>
-            </ng-template>
-          </div>
-        </div>
-
-        <div class="open-steps" (click)="showStepsToggle()" [ngClass]="{ opened: isOpen }">
-          <ui-icon [applicationTheme]="applicationTheme" [size]="'24'" [name]="applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'"></ui-icon>
-        </div>
-      </div>
-
-      <div *ngIf="isOpen">
-        <div class="step-list">
-          <div class="step" *ngFor="let step of itemSteps; index as i, last as isLast">
-            <ui-step
-              [label]="step.label"
-              [isVisited]="step.isVisited!"
-              [icon]="step.iconName"
-              [index]="i"
-              [selected]="i === selectedIndex"
-              [selectedIndex]="selectedIndex"
-              [isLast]="isLast"
-              [disabled]="step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)"
-              [mobileMode]="true"
-              [finalIcon]="isLast ? lastStepFinalIcon : false"
-              [showIconWhenSelected]="!!step.showIconWhenSelected"
-              (stepSelected)="onSelect($event, step)"
-              [applicationTheme]="applicationTheme"
-              [attr.aria-label]="ariaLabel + '--' + step.label"
-            ></ui-step>
-          </div>
-        </div>
-        <div class="overlay" (click)="onCloseStepList()"></div>
-      </div>
-    </div>
-  </ng-template>
-
-</ng-container>

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

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { StepperComponent } from './stepper.component';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { StepComponentModule } from '../step/step.component.module';
-import { StepLineWidthDirective } from '../../directives/step-line-width.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 { MatInputModule } from '@angular/material/input';
-
-@NgModule({
-  declarations: [StepperComponent, StepLineWidthDirective],
-  imports: [
-    CommonModule,
-    IconComponentModule,
-    StepComponentModule,
-    MatProgressSpinnerModule,
-    RadialProgressComponentModule,
-    UiTranslatePipe,
-    MatInputModule,
-  ],
-  exports: [StepperComponent],
-})
-export class StepperComponentModule {}

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

@@ -1,144 +0,0 @@
-@use "../../theme/variables" as *;
-
-.test {
-  &:after {
-    content: "22222ffff";
-    font-family: 'Roboto', sans-serif;
-  }
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-}
-
-.column {
-  display: flex;
-  flex-direction: column;
-}
-
-.stepper-wrapper {
-  width: 100%;
-  @extend .row;
-
-  .step {
-    @extend .row;
-    max-width: 200px;
-  }
-
-  .separator-line {
-    display: flex;
-    flex: 1 1 auto;
-    position: relative;
-
-    &.visited {
-      .line {
-        border-top: 2px solid $tgo-petrol-default;
-      }
-    }
-
-    .line {
-      position: absolute;
-      top: 45px;
-      border-top: 2px solid $tgo-petrol-secondary;
-      width: 100%;
-      left: 0;
-    }
-  }
-
-  &[theme="dark"], &[theme="light"] {
-    .separator-line {
-      &.visited {
-        .line {
-          border-top: 2px solid $black;
-        }
-      }
-
-      .line {
-        border-top: 2px solid $grayscale-30;
-      }
-    }
-  }
-}
-
-
-.mobile-stepper-wrapper {
-  width: 100%;
-  position: relative;
-
-  .stepper {
-    padding: 12px 16px;
-    height: 72px;
-    border: 1px solid $tgo-dark;
-    background: $tgo-white;
-    border-radius: 8px;
-    @extend .row;
-
-
-    .step-info {
-      @extend .column;
-      width: 100%;
-
-      .current-step {
-        font-weight: 700;
-        font-size: 16px;
-        line-height: 24px;
-      }
-
-      .next-step {
-        margin-top: 4px;
-        font-size: 14px;
-        line-height: 20px;
-      }
-
-      .current-step, .next-step {
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-    }
-
-    .open-steps {
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &.opened {
-        ::ng-deep ui-icon {
-          transform: rotateX(-180deg);
-        }
-      }
-    }
-
-    .progress-step {
-      position: relative;
-      width: 40px;
-      height: 40px;
-      margin-right: 16px;
-    }
-  }
-
-  .step-list {
-    @extend .column;
-    position: absolute;
-    width: 100%;
-    margin-top: 4px;
-    z-index: 1;
-    background: $tgo-white;
-    box-shadow: 0 8px 24px 4px $box-shadow;
-    border-bottom-right-radius: 8px;
-    border-bottom-left-radius: 8px;
-  }
-
-  .overlay {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    z-index: -1;
-    background: transparent;
-  }
-}

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

@@ -1,64 +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 { LanguageService } from '../../utils/localization/language.service';
-import { LanguageServiceStub } from '../../utils/localization/language.service.mocks';
-
-describe('StepperComponent', () => {
-  let component: StepperComponent;
-  let fixture: ComponentFixture<StepperComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ StepperComponent ],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers: [{ provide: LanguageService, useClass: LanguageServiceStub },]
-    })
-    .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);
-  });
-});

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

@@ -1,84 +0,0 @@
-import { Meta, moduleMetadata, Story } 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 { StepLineWidthDirective } from '../../directives/step-line-width.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, StepLineWidthDirective],
-      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: Story = (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;