@testgorilla/tgo-ui 2.30.13 → 2.31.1

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

@@ -0,0 +1,104 @@
+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";
+import { SegmentedButton } from "./segmented-button.model";
+
+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 manualChangeValue is called', () => {
+    jest.spyOn(component.buttonSelected, 'emit');
+    const newValue = 2;
+    component.manualChangeValue({ 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);
+  });
+
+  it('should set and get the value correctly', () => {
+    component.value = 'test';
+    expect(component.value).toBe('test');
+  });
+
+  it('should emit buttonSelected when the manualChangeValue is called', () => {
+    const emitSpy = jest.spyOn(component.buttonSelected, 'emit');
+
+    component.manualChangeValue({ value: 'test' });
+    expect(emitSpy).toHaveBeenCalledWith('test');
+  });
+
+  it('should write value correctly', () => {
+    component.writeValue('test');
+    expect(component.value).toBe('test');
+  });
+
+  it('should register onChange function', () => {
+    const fn = jest.fn();
+    component.registerOnChange(fn);
+    component.value = 'test';
+    expect(fn).toHaveBeenCalledWith('test');
+  });
+
+  it('should register onTouch function', () => {
+    const fn = jest.fn();
+    component.registerOnTouched(fn);
+    component.onTouch();
+    expect(fn).toHaveBeenCalled();
+  });
+
+  it('should set disabled state', () => {
+    component.setDisabledState(true);
+    expect(component.disabled).toBe(true);
+
+    component.setDisabledState(false);
+    expect(component.disabled).toBe(false);
+  });
+
+  it('should initialize with default values', () => {
+    expect(component.disabled).toBe(false);
+  });
+
+  it('should accept buttonConfig input', () => {
+    const buttonConfig: SegmentedButton[] = [
+      { label: 'Button 1', value: '1' },
+      { label: 'Button 2', value: '2' },
+    ];
+    component.buttonConfig = buttonConfig;
+    fixture.detectChanges();
+    expect(component.buttonConfig).toBe(buttonConfig);
+  });
+});

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

@@ -0,0 +1,87 @@
+import { Meta, moduleMetadata, StoryFn } 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';
+import { BadgeComponentModule } from '../badge/badge.component.module';
+
+export default {
+  title: 'Segmented Button',
+  component: SegmentedButtonComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [SegmentedButtonComponent],
+      imports: [CommonModule, MatTooltipModule, MatButtonToggleModule, IconComponentModule, BadgeComponentModule],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: StoryFn = (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;
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  buttonConfig: [
+    { label: 'StartButton', value: 1, disabled: true },
+    { label: 'MiddleButton', value: 2 },
+    { label: 'EndButton', value: 3 },
+  ],
+};
+
+Disabled.parameters = parameters;
+
+export const WithTemplate: StoryFn = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+      <ng-template #badgeTpl>
+        <ui-badge
+          label="Suggested"
+          variant="primary"
+          rebrandColor="info"
+          style="position: absolute; top: -10px; left: -20px"
+        ></ui-badge>
+        Label
+      </ng-template>
+      <ui-segmented-button applicationTheme="${_theme}"
+            [buttonConfig]="
+        [
+        { value: 1, template: badgeTpl },
+        { label: 'MiddleButton', value: 2 },
+        { label: 'EndButton', value: 3 },
+      ]"
+      >
+      </ui-segmented-button>      `
+    };
+  },
+} as StoryFn;

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

@@ -0,0 +1,110 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  forwardRef,
+  Inject,
+  Input,
+  Optional,
+  Output
+} from '@angular/core';
+import { SegmentedButton } from './segmented-button.model';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ApplicationTheme } from '../../models/application-theme.model';
+
+@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[];
+
+  /**
+   * Whether the component is disabled.
+   * Default: false.
+   *
+   * @type {boolean}
+   * @memberof SegmentedButtonComponent
+   */
+  @Input() disabled = false;
+
+  /**
+   * Indicator of the Segmented Button width
+   *
+   * @memberof SegmentedButtonComponent
+   */
+  @Input() fullWidth = false;
+
+  /**
+   * Selected button
+   *
+   * @memberof SegmentedButtonComponent
+   */
+  @Input() set value(v: any) {
+    this._value = v;
+    this.onChange(v);
+  }
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof SegmentedButtonComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  @Output() buttonSelected = new EventEmitter<any>();
+
+  protected _value: any;
+
+  get value(): any {
+    return this._value;
+  }
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  onChange = (v: any) => {};
+  onTouch = () => {};
+
+  writeValue(obj: any): void {
+    this.value = obj;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  manualChangeValue({ value }: any) {
+    this.value = value;
+    this.buttonSelected.emit(value);
+  }
+}

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

@@ -0,0 +1,9 @@
+import { TemplateRef } from '@angular/core';
+
+export interface SegmentedButton {
+  value: string;
+  label?: string;
+  template?: TemplateRef<any>;
+  disabled?: boolean;
+  tooltip?: string;
+}

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

@@ -0,0 +1,28 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { SidePanelAnimationState } from './side-panel.model';
+
+export const sidePanelAnimationDuration = 150;
+
+export const sidePanelAnimation = [
+  trigger('slideInOut', [
+    state(`${SidePanelAnimationState.Open}`, style({ transform: 'translateX(0)' })),
+    state(`${SidePanelAnimationState.ClosedRight}`, style({ transform: 'translateX(100%)' })),
+    state(`${SidePanelAnimationState.ClosedLeft}`, style({ transform: 'translateX(-100%)' })),
+    transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedRight}`, [
+      animate(`${sidePanelAnimationDuration}ms ease-in-out`),
+    ]),
+    transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.ClosedLeft}`, [
+      animate(`${sidePanelAnimationDuration}ms ease-in-out`),
+    ]),
+  ]),
+];
+
+export const backdropAnimation = [
+  trigger('fadeInOut', [
+    state(`${SidePanelAnimationState.Open}`, style({ opacity: 0.25 })),
+    state(`${SidePanelAnimationState.Closed}`, style({ opacity: 0 })),
+    transition(`${SidePanelAnimationState.Open} <=> ${SidePanelAnimationState.Closed}`, [
+      animate(`${sidePanelAnimationDuration}ms ease-in-out`),
+    ]),
+  ]),
+];

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

@@ -0,0 +1,31 @@
+<div class="side-panel-backdrop" #sidePanelBackdrop (click)="close()" [@fadeInOut]="isOpen() ? 'open' : 'closed'"></div>
+<div class="side-panel" #sidePanel [@slideInOut]="animation()">
+  <div class="side-panel-header">
+    <div class="side-panel-title-container">
+      @if (showBackButton) {
+        <ui-button
+          class="side-panel-action"
+          [variant]="'icon-button'"
+          [iconName]="'Arrow-chevron-left-filled'"
+          (click)="close()"
+          [tooltip]="(('COMMON.BACK') | uiTranslate | async)!"
+          size="medium"
+        ></ui-button>
+      }
+      <span class="side-panel-title">{{ title }}</span>
+    </div>
+
+    <ui-button
+      class="side-panel-action"
+      [variant]="'icon-button'"
+      [iconName]="'Close'"
+      [tooltip]="(('COMMON.CLOSE') | uiTranslate | async)!"
+      (click)="close()"
+      size="medium"
+    ></ui-button>
+  </div>
+
+  <div class="side-panel-content">
+    <ng-container #sidePanelContainer></ng-container>
+  </div>
+</div>

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

@@ -0,0 +1,76 @@
+@use "../../theme/breakpoints-mixin" as *;
+@use '../../theme/variables' as *;
+
+.side-panel {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 600px;
+  background-color: $tgo-white;
+  padding: 32px;
+  box-shadow: 2px 24px 48px 8px $box-shadow;
+  z-index: 999999;
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
+  transform: translateX(100%);
+  @include screen('medium') {
+    width: 100%;
+  }
+}
+
+.side-panel-action {
+  margin-top: 1px;
+}
+
+.side-panel-title-container {
+  display: flex;
+  gap: 8px;
+}
+
+.side-panel.left {
+  left: 0;
+}
+
+.side-panel.right {
+  right: 0;
+}
+
+.side-panel-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: $tgo-black;
+  z-index: 899;
+  opacity: 0;
+}
+
+.side-panel-title {
+  font-weight: 900;
+  font-size: 24px;
+  display: block;
+  display: block;
+  display: -webkit-box;
+  max-height: 3em;
+  line-height: 1.5em;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
+.side-panel-content {
+  margin-top: 40px;
+  overflow: auto;
+}
+
+.side-panel-header {
+  position: sticky;
+  min-height: 30px;
+  display: flex;
+  justify-content: space-between;
+}

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

@@ -0,0 +1,100 @@
+import { ChangeDetectionStrategy, ElementRef, NO_ERRORS_SCHEMA, ViewContainerRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { sidePanelAnimationDuration } from './side-panel.animations';
+import { SidePanelComponent } from './side-panel.component';
+import { SidePanelAnimationState, SidePanelConfig } from './side-panel.model';
+import { SidePanelService } from './side-panel.service';
+
+describe('SidePanelComponent', () => {
+  let component: SidePanelComponent;
+  let fixture: ComponentFixture<SidePanelComponent>;
+  let mockSidePanelService: SidePanelService;
+  let mockSidePanelConfig: SidePanelConfig;
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    mockSidePanelConfig = {
+      title: 'Test Title',
+      showBackButton: true,
+      position: 'left',
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: SidePanelService,
+          useValue: {
+            destroyComponent: jest.fn(),
+          },
+        },
+        {
+          provide: SidePanelConfig,
+          useValue: mockSidePanelConfig,
+        },
+      ],
+      imports: [NoopAnimationsModule, UiTranslatePipe, SidePanelComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+
+    TestBed.overrideComponent(SidePanelComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default },
+    });
+
+    fixture = TestBed.createComponent(SidePanelComponent);
+    component = fixture.componentInstance;
+    mockSidePanelService = TestBed.inject(SidePanelService);
+
+    jest.spyOn(component, 'sidePanelContainer').mockReturnValue({} as unknown as ViewContainerRef);
+    jest.spyOn(component, 'sidePanel').mockReturnValue({} as unknown as ElementRef<HTMLDivElement>);
+    jest.spyOn(component, 'backdrop').mockReturnValue({} as unknown as ElementRef<HTMLDivElement>);
+
+    fixture.detectChanges();
+  });
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy();
+    expect(component.title).toBe(mockSidePanelConfig.title);
+    expect(component.showBackButton).toBe(mockSidePanelConfig.showBackButton);
+    expect(component.sidePanelPosition()).toBe(mockSidePanelConfig.position);
+  });
+
+  it('should set isOpen to true when open() is called', () => {
+    component.open();
+
+    jest.advanceTimersByTime(0);
+    expect(component.isOpen()).toBe(true);
+  });
+
+  it('should set isOpen to false and destroy component when close() is called', () => {
+    component.close();
+
+    expect(component.isOpen()).toBe(false);
+    jest.advanceTimersByTime(sidePanelAnimationDuration);
+
+    expect(mockSidePanelService.destroyComponent).toHaveBeenCalled();
+  });
+
+  it('should compute correct animation state when isOpen is true', () => {
+    component.isOpen.set(true);
+    expect(component.animation()).toBe(SidePanelAnimationState.Open);
+  });
+
+  it('should compute correct animation state when isOpen is false and sidePanelPosition is left', () => {
+    component.isOpen.set(false);
+    component.sidePanelPosition.set('left');
+    expect(component.animation()).toBe(SidePanelAnimationState.ClosedLeft);
+  });
+
+  it('should compute correct animation state when isOpen is false and sidePanelPosition is right', () => {
+    component.isOpen.set(false);
+    component.sidePanelPosition.set('right');
+    expect(component.animation()).toBe(SidePanelAnimationState.ClosedRight);
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+});

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

@@ -0,0 +1,72 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  signal,
+  viewChild,
+  ViewContainerRef
+} from '@angular/core';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { LanguageService } from '../../utils/localization/language.service';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { TooltipComponentModule } from '../tooltip/tooltip.component.module';
+import { backdropAnimation, sidePanelAnimation, sidePanelAnimationDuration } from './side-panel.animations';
+import { SidePanelAnimationState, SidePanelConfig, SidePanelPosition } from './side-panel.model';
+import { SidePanelService } from './side-panel.service';
+
+@Component({
+  selector: 'ui-side-panel',
+  templateUrl: './side-panel.component.html',
+  styleUrls: ['./side-panel.component.scss'],
+  animations: [sidePanelAnimation, backdropAnimation],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TooltipComponentModule, ButtonComponentModule, UiTranslatePipe, AsyncPipe],
+})
+export class SidePanelComponent {
+  title = '';
+  showBackButton = false;
+  sidePanelPosition = signal<SidePanelPosition>('right');
+
+  sidePanelContainer = viewChild.required('sidePanelContainer', { read: ViewContainerRef });
+  sidePanel = viewChild.required<ElementRef<HTMLDivElement>>('sidePanel');
+  backdrop = viewChild.required<ElementRef<HTMLDivElement>>('sidePanelBackdrop');
+  language = LanguageService.defaultLanguage;
+  isOpen = signal<boolean>(false);
+
+  animation = computed(() => {
+    if (this.isOpen()) {
+      return SidePanelAnimationState.Open;
+    }
+
+    return this.sidePanelPosition() === 'left'
+      ? SidePanelAnimationState.ClosedLeft
+      : SidePanelAnimationState.ClosedRight;
+  });
+
+  private sidePanelService = inject(SidePanelService);
+  private sidePanelConfig = inject(SidePanelConfig);
+
+  constructor() {
+    const { position, showBackButton, title } = this.sidePanelConfig;
+    this.sidePanelPosition.set(position);
+    this.showBackButton = showBackButton;
+    this.title = title;
+  }
+
+  open(): void {
+    setTimeout(() => {
+      this.isOpen.set(true);
+    });
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+    setTimeout(() => {
+      this.sidePanelService.destroyComponent();
+    }, sidePanelAnimationDuration);
+  }
+}

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

@@ -0,0 +1,27 @@
+import { InjectionToken } from "@angular/core";
+
+export type SidePanelPosition = 'left' | 'right';
+
+export enum SidePanelAnimationState {
+  Open = 'open',
+  Closed = 'closed',
+  ClosedRight = 'closedRight',
+  ClosedLeft = 'closedLeft',
+}
+
+export class SidePanelConfig {
+  title: string;
+  position: SidePanelPosition;
+  showBackButton: boolean;
+}
+
+export const defaultSidePanelConfig: SidePanelConfig = {
+  position: 'right',
+  showBackButton: false,
+  title: '',
+};
+
+export const SIDE_PANEL_CONFIG = new InjectionToken<SidePanelConfig>('SIDE_PANEL_CONFIG', {
+  providedIn: 'root',
+  factory: () => defaultSidePanelConfig,
+});