@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,97 @@
+@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

@@ -0,0 +1,176 @@
+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

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,12 @@
+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';