@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/components/side-panel/side-panel.service.spec.ts

@@ -0,0 +1,115 @@
+import { TestBed } from '@angular/core/testing';
+import { Component, EmbeddedViewRef, TemplateRef } from '@angular/core';
+import { ApplicationRef, ComponentRef, Injector } from '@angular/core';
+import { SidePanelService } from './side-panel.service';
+import { SidePanelComponent } from './side-panel.component';
+import { SIDE_PANEL_CONFIG, SidePanelConfig } from './side-panel.model';
+
+@Component({ template: '<div>Test Content</div>' })
+class TestContentComponent {}
+
+describe('SidePanelService', () => {
+  let service: SidePanelService;
+  let appRef: ApplicationRef;
+  let sidePanelConfig: SidePanelConfig;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        SidePanelService,
+        { provide: SIDE_PANEL_CONFIG, useValue: { position: 'right' } },
+        ApplicationRef,
+      ],
+    });
+
+    service = TestBed.inject(SidePanelService);
+    appRef = TestBed.inject(ApplicationRef);
+    sidePanelConfig = TestBed.inject(SIDE_PANEL_CONFIG);
+  });
+
+  afterEach(() => {
+    service.destroyComponent();
+  });
+
+  describe('open', () => {
+    it('should create SidePanelComponent and attach it to the ApplicationRef', () => {
+      const attachViewSpy = jest.spyOn(appRef, 'attachView');
+      service.open(TestContentComponent, {});
+      expect(attachViewSpy).toHaveBeenCalled();
+      expect(service['SidePanelComponentRef']).toBeDefined();
+    });
+
+    it('should load a component when content is of type Component', () => {
+      service.open(TestContentComponent, {});
+      expect(service['contentComponentRef']).toBeDefined();
+      expect(service['embeddedViewRef']).toBeUndefined();
+    });
+
+
+    it('should apply default configuration if no config is passed', () => {
+      service.open(TestContentComponent, {});
+      const actualConfig = service['defaultSidePanelConfig'];
+      expect(actualConfig.position).toBe('right');
+    });
+  });
+
+  describe('destroyComponent', () => {
+    it('should detach and destroy SidePanelComponentRef if it exists', () => {
+      service.open(TestContentComponent, {});
+      const detachViewSpy = jest.spyOn(appRef, 'detachView');
+      const destroySpy = jest.spyOn(service['SidePanelComponentRef']!, 'destroy');
+
+      service.destroyComponent();
+      expect(detachViewSpy).toHaveBeenCalled();
+      expect(destroySpy).toHaveBeenCalled();
+      expect(service['SidePanelComponentRef']).toBeUndefined();
+    });
+
+    it('should destroy contentComponentRef if it exists', () => {
+      service.open(TestContentComponent, {});
+      const destroySpy = jest.spyOn(service['contentComponentRef']!, 'destroy');
+
+      service.destroyComponent();
+      expect(destroySpy).toHaveBeenCalled();
+      expect(service['contentComponentRef']).toBeUndefined();
+    });
+  });
+
+  describe('createSidePanelInjector', () => {
+    it('should create an injector with the provided config', () => {
+      const config: any = { position: 'left' };
+      const injector = service['createSidePanelInjector'](config);
+      const injectedConfig = injector.get(SidePanelConfig);
+
+      expect(injectedConfig.position).toBe('left');
+    });
+  });
+
+  describe('createSidePanelComponent', () => {
+    it('should create a SidePanelComponent with the specified position', () => {
+      const injector = service['createSidePanelInjector'](sidePanelConfig);
+      const componentRef = service['createSidePanelComponent']('left', injector);
+      const rootElement = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+
+      expect(rootElement.querySelector('.side-panel')?.classList).toContain('left');
+    });
+
+    it('should append the component to the document body', () => {
+      const injector = service['createSidePanelInjector'](sidePanelConfig);
+      const componentRef = service['createSidePanelComponent']('right', injector);
+
+      const sidePanelEl = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+      expect(document.body.contains(sidePanelEl)).toBe(true);
+
+      document.body.removeChild(sidePanelEl);
+    });
+  });
+
+  describe('loadComponent', () => {
+    it('should load the component in the side panel container', () => {
+      service.open(TestContentComponent, {});
+      const viewContainerRef = service['SidePanelComponentRef']?.instance.sidePanelContainer();
+      expect(viewContainerRef!.length).toBe(1);
+    });
+  });
+});

package/projects/tgo-canopy-ui/components/side-panel/side-panel.service.ts

@@ -0,0 +1,97 @@
+import {
+  ApplicationRef,
+  ComponentRef,
+  createComponent,
+  EmbeddedViewRef,
+  EnvironmentInjector,
+  inject,
+  Injectable,
+  Injector,
+  TemplateRef,
+  Type,
+} from '@angular/core';
+import { SidePanelComponent } from './side-panel.component';
+import { SIDE_PANEL_CONFIG, SidePanelConfig, SidePanelPosition } from './side-panel.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SidePanelService {
+  private SidePanelComponentRef?: ComponentRef<SidePanelComponent>;
+  private contentComponentRef?: ComponentRef<any>;
+  private embeddedViewRef?: EmbeddedViewRef<any>;
+  private defaultSidePanelConfig: SidePanelConfig = inject(SIDE_PANEL_CONFIG);
+  private injector = inject(EnvironmentInjector);
+  private appRef = inject(ApplicationRef);
+
+  constructor() {}
+
+  open(content: Type<any> | TemplateRef<any>, config: Partial<SidePanelConfig>): void {
+    const panelConfig: SidePanelConfig = { ...this.defaultSidePanelConfig, ...config };
+
+    if (!this.SidePanelComponentRef) {
+      const injector = this.createSidePanelInjector(panelConfig);
+      const SidePanelComponentRef = this.createSidePanelComponent(panelConfig.position, injector);
+      this.SidePanelComponentRef = SidePanelComponentRef;
+    }
+
+    if (content instanceof TemplateRef) {
+      this.loadTemplate(content);
+    } else {
+      this.loadComponent(content);
+    }
+
+    this.SidePanelComponentRef.instance.open();
+  }
+
+  destroyComponent(): void {
+    if (this.SidePanelComponentRef) {
+      this.appRef.detachView(this.SidePanelComponentRef.hostView);
+      this.SidePanelComponentRef.destroy();
+      this.SidePanelComponentRef = undefined;
+    }
+
+    if (this.contentComponentRef) {
+      this.contentComponentRef.destroy();
+      this.contentComponentRef = undefined;
+    }
+  }
+
+  private createSidePanelInjector(config: SidePanelConfig): Injector {
+    return Injector.create({
+      providers: [{ provide: SidePanelConfig, useValue: config }]
+    });
+  }
+
+  private createSidePanelComponent(position: SidePanelPosition, injector: Injector): ComponentRef<SidePanelComponent> {
+    const sidePanelComponentRef = createComponent(SidePanelComponent, {
+      environmentInjector: this.injector,
+      elementInjector: injector,
+    });
+
+    this.appRef.attachView(sidePanelComponentRef.hostView);
+
+    const sidePanelEl = (sidePanelComponentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+    sidePanelEl.querySelector('.side-panel')?.classList.add(position);
+
+    document.body.appendChild(sidePanelEl);
+
+    return sidePanelComponentRef;
+  }
+
+  private loadComponent(component: Type<any>): void {
+    const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
+    if (viewContainerRef) {
+      viewContainerRef().clear();
+      this.contentComponentRef = viewContainerRef().createComponent(component);
+    }
+  }
+
+  private loadTemplate(template: TemplateRef<any>): void {
+    const viewContainerRef = this.SidePanelComponentRef?.instance.sidePanelContainer;
+    if (viewContainerRef) {
+      viewContainerRef().clear();
+      this.embeddedViewRef = viewContainerRef().createEmbeddedView(template);
+    }
+  }
+}

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 | async)!"
+            (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 | async)!"
+          (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,96 @@
+@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;
+    align-items: flex-start;
+    flex-direction: column;
+    z-index: 3;
+    background: $tgo-light;
+
+    .header {
+      background: $tgo-light;
+      padding: 32px 5px;
+      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,177 @@
+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 },
+        LanguageService,
+      ],
+      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;
+    // @ts-ignore
+    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,106 @@
+import {
+  Component,
+  DestroyRef,
+  EventEmitter, HostListener,
+  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 { 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';
+
+  /**
+   *
+   * 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;
+
+  @HostListener('keydown.esc', ['$event'])
+  onEscPress(_: KeyboardEvent): void {
+    void this.drawer.close();
+  }
+
+  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';