@testgorilla/tgo-ui 2.10.1 → 2.10.3

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

@@ -1,50 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SegmentedButtonComponent } from './segmented-button.component';
-import { MatButtonToggleModule } from "@angular/material/button-toggle";
-import { By } from "@angular/platform-browser";
-
-describe('SegmentedButtonComponent', () => {
-  let component: SegmentedButtonComponent;
-  let fixture: ComponentFixture<SegmentedButtonComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [SegmentedButtonComponent],
-      imports: [MatButtonToggleModule],
-    });
-    fixture = TestBed.createComponent(SegmentedButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should set buttonConfig correctly', () => {
-    const buttonConfig = [{ label: 'Button 1', value: 1 }, { label: 'Button 2', value: 2 }];
-    component.buttonConfig = buttonConfig as any;
-    expect(component.buttonConfig).toEqual(buttonConfig);
-  });
-
-  it('should emit buttonSelected event when value changes', () => {
-    jest.spyOn(component.buttonSelected, 'emit');
-    const newValue = 2;
-    component.value = newValue;
-    expect(component.buttonSelected.emit).toHaveBeenCalledWith(newValue);
-  });
-
-  it('should call onChange method when value changes', () => {
-    const newValue = 2;
-    jest.spyOn(component, 'onChange');
-    component.value = newValue;
-    expect(component.onChange).toHaveBeenCalledWith(newValue);
-  });
-
-  it('should write value correctly', () => {
-    const newValue = 2;
-    component.writeValue(newValue);
-    expect(component.value).toEqual(newValue);
-  });
-});

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

@@ -1,48 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { transformTheme } from '../../utils/transform-theme';
-import { SegmentedButtonComponent } from './segmented-button.component';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { IconComponentModule } from '../icon/icon.component.module';
-
-export default {
-  title: 'Segmented Button',
-  component: SegmentedButtonComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [SegmentedButtonComponent],
-      imports: [CommonModule, MatTooltipModule, MatButtonToggleModule, IconComponentModule],
-      providers: [],
-    }),
-  ],
-} as Meta;
-
-const Template: Story = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FwPmwOHXkG8SqzPCqxiK23/Canopy-UI-Components-library?type=design&node-id=2003-22090&mode=design&t=yllzXO1siDKHttxQ-4',
-  },
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  buttonConfig: [
-    { label: 'StartButton', value: 1 },
-    { label: 'MiddleButton', value: 2 },
-    { label: 'EndButton', value: 3 },
-  ],
-};
-
-Default.parameters = parameters;

package/projects/tgo-canopy-ui/components/segmented-button/segmented-button.component.ts

@@ -1,54 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
-import { SegmentedButton } from './segmented-button.model';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  selector: 'ui-segmented-button',
-  templateUrl: './segmented-button.component.html',
-  styleUrls: ['./segmented-button.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SegmentedButtonComponent),
-      multi: true,
-    },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SegmentedButtonComponent implements ControlValueAccessor {
-  /**
-   * Input property to set the buttons for the segmented button.
-   * @type SegmentedButton
-   * @memberof SegmentedButtonComponent
-   */
-  @Input({ required: true }) buttonConfig: SegmentedButton[];
-
-  @Output() buttonSelected = new EventEmitter<any>();
-
-  protected _value: any;
-
-  set value(v: any) {
-    this._value = v;
-    this.onChange(v);
-    this.buttonSelected.emit(v);
-  }
-
-  get value(): any {
-    return this._value;
-  }
-
-  onChange = (v: any) => {};
-  onTouch = () => {};
-
-  writeValue(obj: any): void {
-    this.value = obj;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouch = fn;
-  }
-}

package/projects/tgo-canopy-ui/components/segmented-button/segmented-button.model.ts

@@ -1,7 +0,0 @@
-import { TemplateRef } from "@angular/core";
-
-export interface SegmentedButton {
-  value: string;
-  label?: string;
-  template?: TemplateRef<any>;
-}

package/projects/tgo-canopy-ui/components/side-sheet/side-sheet.component.html

@@ -1,37 +0,0 @@
-<ng-container>
-  <mat-drawer-container class="side-sheet-container" [attr.theme]="applicationTheme" [hasBackdrop]="true">
-    <mat-drawer (closedStart)="onOpenChange(false)" (openedStart)="onOpenChange(true)" #drawer [mode]="'over'" [autoFocus]="false"  class="side-sheet-content" [position]="position">
-      <div class="header">
-        <div class="title">
-          <ui-button
-            *ngIf="showBackButton"
-            [variant]="'icon-button'"
-            [iconName]="applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'"
-            [companyColor]="applicationTheme === 'classic' ? '#000' : '#242424'"
-            [applicationTheme]="applicationTheme"
-            [tooltip]="('COMMON.BACK') | uiTranslate : language"
-            (click)="onClose()"
-          ></ui-button>
-          <span
-            *ngIf="title"
-            [matTooltip]="showTitleTooltip ? title : ''"
-            [matTooltipClass]="applicationTheme"
-          >{{ title }}</span>
-          <ui-logo *ngIf="showLogo"></ui-logo>
-        </div>
-        <ui-button
-          [variant]="'icon-button'"
-          [iconName]="'Close'"
-          [companyColor]="applicationTheme === 'classic' ? '#000' : '#242424'"
-          [applicationTheme]="applicationTheme"
-          [tooltip]="('COMMON.CLOSE') | uiTranslate : language"
-          (click)="onClose()"
-        ></ui-button>
-      </div>
-      <ng-container #container></ng-container>
-    </mat-drawer>
-    <mat-drawer-content>
-      <ng-content></ng-content>
-    </mat-drawer-content>
-  </mat-drawer-container>
-</ng-container>

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

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SideSheetComponent } from './side-sheet.component';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { LogoComponentModule } from "../logo/logo.component.module";
-
-@NgModule({
-  declarations: [SideSheetComponent],
-  exports: [SideSheetComponent],
-    imports: [
-        CommonModule,
-        IconComponentModule,
-        ButtonComponentModule,
-        MatTooltipModule,
-        MatSidenavModule,
-        UiTranslatePipe,
-        LogoComponentModule,
-    ],
-})
-export class SideSheetComponentModule {}

package/projects/tgo-canopy-ui/components/side-sheet/side-sheet.component.scss

@@ -1,97 +0,0 @@
-@use '../../theme/variables' as *;
-@use '../../theme/breakpoints-mixin' as *;
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
-
-.side-sheet-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: transparent;
-
-  ::ng-deep.mat-drawer-backdrop {
-    background-color: $tgo-black;
-    opacity: 25%;
-  }
-
-  .side-sheet-content {
-    width: 600px;
-    box-shadow: 2px 24px 48px 8px $box-shadow;
-    padding: 0 32px 32px;
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    z-index: 3;
-    background: $tgo-light;
-
-    .header {
-      background: $tgo-light;
-      padding: 32px 0;
-      width: 100%;
-      display: flex;
-      top: 0;
-      position: sticky;
-      justify-content: center;
-
-      ui-button {
-        margin-top: -5px;
-      }
-
-      .title {
-        display: flex;
-        justify-content: left;
-        margin-right: 8px;
-        width: 100%;
-        gap: 8px;
-
-        span {
-          line-height: 28px;
-          font-size: 20px;
-          font-weight: bold;
-          user-select: none;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-      }
-    }
-
-    @include screen('medium') {
-      padding: 0 16px 16px;
-      width: calc(100%);
-
-      .header {
-        padding: 32px 16px;
-      }
-    }
-  }
-  &[theme='dark'], &[theme="light"] {
-    .side-sheet-content {
-      box-shadow: $box-shadow-modal;
-
-      .header {
-        .title {
-          span {
-            color: $black;
-          }
-        }
-      }
-    }
-  }
-}
-
-::ng-deep .mat-mdc-tooltip {
-  background-color: $tgo-petrol-60w;
-  font-family: "Open Sans", serif;
-  font-weight: normal;
-  font-size: 12px;
-  border-radius: 4px;
-  overflow: visible;
-  max-width: 248px;
-  padding: 6px 2px;
-  --mdc-plain-tooltip-container-color: none;
-  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
-}

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

@@ -1,176 +0,0 @@
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
-import { SideSheetComponent } from './side-sheet.component';
-import { SideSheetService } from './side-sheet.service';
-import { NO_ERRORS_SCHEMA, ViewContainerRef } from '@angular/core';
-import { MatDrawer } from '@angular/material/sidenav';
-import { BehaviorSubject, of, Subject } from 'rxjs';
-import { LanguageService } from '../../utils/localization/language.service';
-import { LanguageServiceStub } from '../../utils/localization/language.service.mocks';
-import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
-import { ApplicationTheme } from "../../models/application-theme.model";
-import { SideSheetConfig } from "./side-sheet.model";
-
-describe('SideSheetComponent', () => {
-  let component: SideSheetComponent;
-  let fixture: ComponentFixture<SideSheetComponent>;
-  let sideSheetService: jest.Mocked<SideSheetService>;
-
-  beforeEach(() => {
-    const sideSheetServiceMock = {
-      getComponentRef: jest.fn(),
-    };
-
-    TestBed.configureTestingModule({
-      declarations: [SideSheetComponent],
-      imports: [UiTranslatePipe],
-      providers: [
-        { provide: SideSheetService, useValue: sideSheetServiceMock },
-        { provide: LanguageService, useClass: LanguageServiceStub }
-      ],
-      schemas: [NO_ERRORS_SCHEMA],
-    });
-
-    fixture = TestBed.createComponent(SideSheetComponent);
-    component = fixture.componentInstance;
-    sideSheetService = TestBed.inject(SideSheetService) as jest.Mocked<SideSheetService>;
-
-    component.drawer = { toggle: () => {} } as MatDrawer;
-    //@ts-ignore
-    component.componentRef$ = of();
-  });
-
-  it('should have default position "end"', () => {
-    expect(component.position).toBe('end');
-  });
-
-  it('should set position based on input', () => {
-    component.position = 'start';
-    //@ts-ignore
-    expect(component.position).toBe('start');
-  });
-
-  it('should set language', () => {
-    const language = 'en'; // Set your desired language
-    // @ts-ignore
-    component.language = language;
-    expect(component.language).toBe(language);
-  });
-
-  it('should set application theme', () => {
-    const theme: ApplicationTheme = 'dark'; // Set your desired theme
-    component.applicationTheme = theme;
-    expect(component.applicationTheme).toBe(theme);
-  });
-
-  it('should set title, showBackButton, and showTitleTooltip based on config', () => {
-    const config = {
-      title: 'Test Title',
-      showBackButton: true,
-      showTitleTooltip: true,
-    };
-    // @ts-ignore
-    component.setConfig(config);
-    // @ts-ignore
-    expect(component.title).toBe(config.title);
-    // @ts-ignore
-    expect(component.showBackButton).toBe(config.showBackButton);
-    // @ts-ignore
-    expect(component.showTitleTooltip).toBe(config.showTitleTooltip);
-  });
-
-  it('should toggle drawer on onClose()', () => {
-    jest.spyOn(component.drawer, 'toggle');
-    // @ts-ignore
-    component.onClose();
-    expect(component.drawer.toggle).toHaveBeenCalled();
-  });
-
-  it('should interact with SideSheetService for component references', () => {
-    const componentRef$ = new Subject<SideSheetConfig | null>(); // Create a subject
-    jest.spyOn(sideSheetService, 'getComponentRef').mockReturnValue(componentRef$); // Mock the service
-    component.ngOnInit(); // Call ngOnInit
-
-    const drawer = component.drawer; // Get the drawer reference
-    jest.spyOn(drawer, 'toggle'); // Spy on the drawer toggle
-
-    componentRef$.next({ componentRef: { hostView: {} } }); // Simulate a component reference
-    fixture.detectChanges(); // Trigger change detection
-
-    componentRef$.next(null); // Simulate a null reference
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(drawer.toggle).toHaveBeenCalledTimes(0); // Should toggle again
-  });
-
-  it('should set side sheet configurations correctly', () => {
-    const closed$ = new Subject<void>();
-    //@ts-ignore
-    const config: SideSheetConfig = {
-      title: 'Test Title',
-      showLogo: true,
-      showBackButton: true,
-      showTitleTooltip: true,
-      closed: closed$,
-    };
-
-    //@ts-ignore
-    component.setConfig(config); // Set the configuration
-    fixture.detectChanges(); // Trigger change detection
-
-    //@ts-ignore
-    expect(component.title).toBe('Test Title'); // Should set the title
-    //@ts-ignore
-    expect(component.showLogo).toBe(true); // Should set the showLogo flag
-    //@ts-ignore
-    expect(component.showBackButton).toBe(true); // Should set the showBackButton flag
-    //@ts-ignore
-    expect(component.showTitleTooltip).toBe(true); // Should set the showTitleTooltip flag
-
-    const drawer = component.drawer;
-
-    closed$.next(); // Emit the closed event
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(drawer.close).toBe(undefined); // Should close the drawer
-  });
-
-  it('should set and get application theme correctly', () => {
-    expect(component.applicationTheme).toBe('light'); // Default application theme
-
-    component.applicationTheme = 'dark'; // Change the theme
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(component.applicationTheme).toBe('dark'); // Should update the theme
-  });
-
-  it('should close the side sheet on onClose', () => {
-    const drawer = component.drawer;
-    jest.spyOn(drawer, 'toggle'); // Spy on the drawer toggle
-
-    //@ts-ignore
-    component.onClose(); // Trigger the onClose event
-
-    fixture.detectChanges(); // Trigger change detection
-
-    expect(drawer.toggle).toHaveBeenCalled(); // Should toggle the drawer
-  });
-
-  it('should set component ref', (() => {
-    const configMock = { componentRef: { hostView: 'view' } };
-    component.container = { clear: jest.fn(), insert: (arg: any) => {} } as unknown as ViewContainerRef;
-    component.drawer = { toggle: jest.fn() } as unknown as MatDrawer;
-    //@ts-expect-error
-    const setConfigSpy = jest.spyOn(component, 'setConfig');
-    const drawerToggleSpy = jest.spyOn(component.drawer, 'toggle');
-    const containerClearSpy = jest.spyOn(component.container, 'clear');
-    const containerInsertSpy = jest.spyOn(component.container, 'insert');
-      //@ts-ignore
-    component.componentRef$ = new BehaviorSubject(configMock);
-    //@ts-ignore
-    component.setComponentRef();
-    expect(setConfigSpy).toHaveBeenCalledWith(configMock);
-    expect(containerClearSpy).toHaveBeenCalled();
-    expect(containerInsertSpy).toHaveBeenCalledWith(configMock.componentRef.hostView);
-    expect(drawerToggleSpy).toHaveBeenCalled();
-  }));
-});

package/projects/tgo-canopy-ui/components/side-sheet/side-sheet.component.ts

@@ -1,110 +0,0 @@
-import {
-  Component,
-  DestroyRef,
-  EventEmitter,
-  Inject,
-  Input,
-  OnInit,
-  Optional,
-  Output,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-import { SideSheetService } from './side-sheet.service';
-import { SideSheetConfig, SideSheetPosition } from './side-sheet.model';
-import { MatDrawer } from '@angular/material/sidenav';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { LanguageService } from '../../utils/localization/language.service';
-import { ApplicationTheme } from '../../models/application-theme.model';
-
-@Component({
-  selector: 'ui-side-sheet',
-  templateUrl: './side-sheet.component.html',
-  styleUrls: ['./side-sheet.component.scss'],
-})
-export class SideSheetComponent implements OnInit {
-  /**
-   * Set position. Defaults "end"
-   *
-   * @type {SideSheetPosition}
-   * @memberof SideSheetComponent
-   */
-  @Input() position: SideSheetPosition = 'end';
-
-  /**
-   * The language to be used
-   *
-   * @type {Language}
-   * @memberof SideSheetComponent
-   */
-  @Input() language = LanguageService.defaultLanguage;
-
-  /**
-   *
-   * Defines the application theme
-   *
-   * @type {ApplicationTheme}
-   * @memberof SideSheetComponent
-   */
-  @Input() applicationTheme: ApplicationTheme = 'light';
-
-  @Output() openChange = new EventEmitter<boolean>();
-
-  @ViewChild('drawer') drawer: MatDrawer;
-  @ViewChild('container', { read: ViewContainerRef, static: false }) container: ViewContainerRef;
-
-  protected title = '';
-  protected showBackButton = false;
-  protected showTitleTooltip = false;
-  protected showLogo = false;
-  protected componentRef$ = this.sideSheetService.getComponentRef();
-
-  constructor(
-    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
-    private sideSheetService: SideSheetService,
-    private destroyRef: DestroyRef
-  ) {
-    if (defaultAppTheme) {
-      this.applicationTheme = defaultAppTheme;
-    }
-  }
-
-  ngOnInit(): void {
-    this.setComponentRef();
-  }
-
-  private setComponentRef(): void {
-    this.componentRef$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(config => {
-      if (config && config.componentRef && this.container && this.drawer) {
-        this.setConfig(config);
-        this.drawer.toggle();
-        this.container.clear();
-        this.container.insert(config.componentRef.hostView);
-      } else if (!config) {
-        this.drawer.toggle();
-        this.container.clear();
-      }
-    });
-  }
-
-  private setConfig(config: SideSheetConfig): void {
-    this.title = config.title ?? '';
-    this.showLogo = config.showLogo ?? false;
-    this.showBackButton = config.showBackButton ?? false;
-    this.showTitleTooltip = config.showTitleTooltip ?? false;
-
-    if (config.closed) {
-      config.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-        void this.drawer.close();
-      });
-    }
-  }
-
-  protected onClose(): void {
-    this.drawer.toggle();
-  }
-
-  onOpenChange(isOpened: boolean): void {
-    this.openChange.emit(isOpened);
-  }
-}

package/projects/tgo-canopy-ui/components/side-sheet/side-sheet.model.ts

@@ -1,12 +0,0 @@
-import { Observable } from 'rxjs';
-
-export interface SideSheetConfig {
-  componentRef: any;
-  title?: string;
-  showLogo?: boolean;
-  showBackButton?: boolean;
-  showTitleTooltip?: boolean;
-  closed?: Observable<void>;
-}
-
-export type SideSheetPosition = 'start' | 'end';