@testgorilla/tgo-ui 2.30.13 → 2.31.1

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

@@ -0,0 +1,305 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core';
+import {
+  ColumnEllipse,
+  ColumnType,
+  ComponentRenderer,
+  DataSource,
+  Pagination,
+  ScrollSettings,
+  TableColumn,
+  TableConfig,
+  TableConfigWithPagination,
+  TableData,
+  TableDetailColumn,
+} from './table.model';
+import { PageEvent } from '@angular/material/paginator';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { sortByOrder } from '../../utils/table.utils';
+import { MatTableDataSource } from '@angular/material/table';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Sort } from '@angular/material/sort';
+import { BehaviorSubject, fromEvent, Observable } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { IS_MOBILE_TOKEN } from '../../providers/is-mobile';
+
+@Component({
+  selector: 'ui-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('expandDetail', [
+      state('collapsed, void', style({ height: '0px' })),
+      state('expanded', style({ height: '*' })),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+      transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
+})
+export class TableComponent<T extends DataSource, TDetail extends DataSource> implements OnChanges, AfterViewInit {
+  /**
+   * Table configuration
+   *
+   * @type {TableConfig}
+   * @memberof TableComponent
+   */
+  @Input({ required: true }) config: TableConfigWithPagination<T>;
+
+  /**
+   * Input property for providing the table data.
+   *
+   * @type {TableData}
+   * @memberof TableComponent
+   */
+  @Input() data: TableData;
+
+  /**
+   * Input property indicating whether the table is in a loading state.
+   *
+   * @type {boolean}
+   * @memberof TableComponent
+   * @default false
+   */
+  @Input() loading = false;
+
+  /**
+   *
+   * Defines the application theme
+   * @type {ApplicationTheme}
+   * @memberof TableComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * Data structure to select which columns should be rendered and their capabilities
+   *
+   * @type {TableDetailColumn}
+   * @memberof TableComponent
+   */
+  @Input() tableDetailColumns: TableDetailColumn<T, TDetail>;
+  @Input() tableDetails = false;
+
+  /**
+   * Disable border radius for table
+   *
+   * @type {boolean}
+   * @memberof TableComponent
+   */
+  @Input() disableBorderRadius = false;
+
+  /**
+   * Condensed table
+   *
+   * @type {boolean}
+   * @memberof TableComponent
+   */
+  @Input() isCondensed = false;
+
+  /**
+   * Sticky header
+   *
+   * @type {boolean}
+   * @memberof TableComponent
+   */
+  @Input() stickyHeader = false;
+
+  /**
+   * Max height
+   *
+   * @type {string}
+   * @memberof TableComponent
+   */
+  @Input() maxHeight = '576px';
+
+  @Output() onRowClickEvent: EventEmitter<any> = new EventEmitter<any>();
+  @Output() onDetailRowClickEvent: EventEmitter<any> = new EventEmitter<any>();
+  @Output() paginatorChange = new EventEmitter<PageEvent>();
+  @Output() sortChange = new EventEmitter<Sort>();
+
+  @ViewChild('table') table: ElementRef;
+
+  protected tableData: TableData;
+  protected sourceData: TableData;
+  protected columnsTooltipState: ColumnEllipse[] = [];
+  protected tableConfig: TableConfigWithPagination<T>;
+  protected displayedColumns: string[] = [];
+  protected columnsDetailToDisplay: string[] = [];
+  protected skeletonStyleConfig = {
+    background: '#F6F6F6',
+    'border-radius': '4px',
+    height: '24px',
+  };
+  protected dataSourceDetail = new MatTableDataSource<any>([]);
+  protected elementDetail: any;
+  protected readonly DataType = ColumnType;
+  protected scrollSettings$ = new BehaviorSubject<ScrollSettings>({
+    scrollEnd: false,
+    horizontalScroll: false,
+    scrollStart: false,
+  });
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    private destroyRef: DestroyRef,
+    @Inject(IS_MOBILE_TOKEN) protected readonly isMobile$: Observable<boolean>
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  ngOnInit() {
+    this.setTableConfig(this.config);
+    this.setTableData(this.data);
+
+    if (this.applicationTheme !== 'classic') {
+      this.skeletonStyleConfig.background = '#F4F4F4';
+    }
+    document.body.setAttribute('theme', this.applicationTheme);
+
+    if (this.tableDetailColumns) {
+      const filteredColumns = this.tableDetailColumns.columnDefs.filter(column => !column.hidden);
+      this.columnsDetailToDisplay = filteredColumns.length
+        ? filteredColumns.map((tableColumn: TableColumn<TDetail>) => tableColumn.title!)
+        : [];
+    }
+
+    if (this.tableConfig?.sortable && this.tableConfig?.sort) {
+      this.onSortChange(this.tableConfig.sort as Sort, false);
+    }
+  }
+
+  ngAfterViewInit() {
+    this.hasTableScroll();
+    fromEvent(this.table.nativeElement, 'scroll')
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.hasTableScroll());
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['config'] && changes['config'].currentValue) {
+      const config = changes['config'].currentValue as TableConfig<T>;
+      this.setTableConfig(config);
+    }
+    if (changes['data']?.currentValue) {
+      this.setTableData(changes['data'].currentValue as TableData);
+    }
+  }
+
+  hasTableScroll(): void {
+    const table = this.table.nativeElement;
+    const horizontalScroll = table.scrollWidth > table.clientWidth;
+    const scrollEnd = table.scrollLeft + table.clientWidth >= table.scrollWidth;
+    this.scrollSettings$.next({
+      scrollStart: !table.scrollLeft,
+      scrollEnd,
+      horizontalScroll,
+    });
+  }
+
+  callRenderer([rendererFn, element]: [(v: T) => ComponentRenderer | string, T]): any {
+    if (rendererFn) {
+      return rendererFn(element);
+    }
+  }
+
+  protected onPaginatorChange(event: PageEvent): void {
+    this.paginatorChange.emit(event);
+  }
+
+  protected onChangeColumnSize(columnIndex: number, showTooltip: boolean): void {
+    this.columnsTooltipState = this.columnsTooltipState.map(column => {
+      if (column.index === columnIndex) {
+        column.showTooltip = showTooltip;
+      }
+      return column;
+    });
+  }
+
+  protected onSortChange(sortState: Sort, emitEvent = true): void {
+    if (emitEvent) {
+      this.sortChange.emit(sortState);
+    }
+
+    if (this.tableConfig?.sortable) {
+      this.tableData = [
+        ...this.tableData.sort((a, b) => {
+          const isAsc = sortState.direction === 'asc';
+          const aVal = a[sortState.active];
+          const bVal = b[sortState.active];
+          return (aVal < bVal ? -1 : 1) * (isAsc ? 1 : -1);
+        }),
+      ];
+
+      if (!sortState.direction) {
+        this.tableData = [...this.sourceData];
+      }
+    }
+  }
+
+  protected onRowClick(rowParams: any): void {
+    this.onRowClickEvent.emit(rowParams);
+  }
+
+  protected onDetailRowClick(rowParams: any): void {
+    this.onDetailRowClickEvent.emit(rowParams);
+  }
+
+  protected toggleRow(element: T): void {
+    if (this.tableDetails) {
+      this.elementDetail = this.elementDetail === element ? null : element;
+      if (this.elementDetail) {
+        this.tableDetailColumns.setDetailRowData({
+          data: element,
+          setDetailDataSource: this.setTableDetailDataSource.bind(this),
+        });
+      }
+    }
+  }
+
+  private setTableDetailDataSource(rowData: TDetail[]): void {
+    this.dataSourceDetail = new MatTableDataSource<any>(rowData);
+  }
+
+  private setTableConfig(config: TableConfig<T>): void {
+    config.pagination = config?.pagination ?? this.defaultPaginationConfig;
+
+    this.tableConfig = config as TableConfigWithPagination<T>;
+
+    this.columnsTooltipState = config.columns.map((column, index) => ({
+      index,
+      showTooltip: column.showTooltip ?? false,
+    }));
+    this.displayedColumns = sortByOrder<T>(config.columns.filter(column => !column.hidden)).map(
+      column => column.uniqueId ?? column.key
+    );
+  }
+
+  private setTableData(data: TableData): void {
+    this.sourceData = data;
+    this.tableData = data;
+  }
+
+  private defaultPaginationConfig: Pagination = {
+    currentPage: 0,
+    itemsPerPage: 10,
+    itemsPerPageOptions: [10, 25, 50],
+    totalItems: 20,
+  };
+
+  trackColumnUniqueId = (index: number, column: TableColumn<T>): string => column.uniqueId ?? column.key;
+}

package/projects/tgo-canopy-ui/components/table/table.model.ts

@@ -0,0 +1,117 @@
+import { TemplateRef, Type } from '@angular/core';
+
+export interface TableConfig<T = any> {
+  columns: TableColumn<T>[];
+  pagination?: Pagination;
+  title?: string;
+  width?: number;
+  sort?: Sort;
+  hidePagination?: boolean;
+  noDataRowTpl?: TemplateRef<any>;
+  sortable?: boolean;
+}
+
+export interface TableConfigWithPagination<T> extends TableConfig<T> {
+  pagination?: Pagination;
+}
+
+export interface TableColumn<T = any> {
+  title?: string;
+  key: string;
+  allowMultiline?: boolean;
+  bold?: boolean;
+  showTooltip?: boolean;
+  tooltip?: string;
+  allowSort?: boolean;
+  isSticky?: boolean;
+  headerCellTemplate?: TemplateRef<any>;
+  rowCellTemplate?: TemplateRef<any>;
+  rowCellTemplateClick?: () => any;
+  sortHeader?: string;
+  hidden?: boolean;
+  order?: number;
+  fontSize?: '12px' | '14px';
+  field?: string;
+  type?: ColumnType;
+  function?: (v: T) => string;
+  renderer?: (v: T) => ComponentRenderer | string;
+  styles?: ColumnStyles;
+  sortStart?: SortDirection;
+  uniqueId?: string;
+}
+
+export interface Pagination {
+  itemsPerPageOptions: number[];
+  itemsPerPage: number;
+  currentPage: number;
+  totalItems: number;
+}
+
+export type TableData = Record<string, any>[];
+
+export interface ColumnEllipse {
+  index: number;
+  showTooltip: boolean;
+}
+
+export interface Sort {
+  active: string;
+  direction: SortDirection;
+  defaultSortStart?: SortDirection;
+}
+
+export type SortDirection = 'asc' | 'desc' | '';
+
+export interface TableDetailColumn<T, TDetail> {
+  columnDefs: TableColumn<TDetail>[];
+  setDetailRowData: (params: DetailRowDataParams<T, TDetail>) => void;
+}
+
+export interface DetailRowDataParams<T, TDetail> {
+  data: T;
+
+  setDetailDataSource(rowData: TDetail[]): void;
+}
+
+export enum ColumnType {
+  FIELD = 'field',
+  FUNCTION = 'function',
+  RENDERER = 'renderer',
+}
+
+export interface ComponentRenderer {
+  component: Type<any>;
+  inputs?: any;
+  outputs?: { [key: string]: any };
+}
+
+export interface ColumnStyles {
+  alignment?: ColumnAlignment;
+  width?: string;
+  'min-width'?: string;
+  padding?: string;
+}
+
+export enum ColumnAlignment {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center',
+}
+
+export enum ColumnTypeEnum {
+  FIELD = 'field',
+  FUNCTION = 'function',
+  RENDERER = 'renderer',
+}
+
+export enum ColumnAlignmentEnum {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center',
+}
+
+export type DataSource = {
+  [key: string]: any;
+};
+
+export type ScrollSettings = { scrollEnd: boolean; horizontalScroll: boolean; scrollStart: boolean };

package/projects/tgo-canopy-ui/components/tabs/tab.directive.spec.ts

@@ -0,0 +1,77 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { TabDirective } from './tab.directive';
+import { TabsComponent } from './tabs.component';
+
+@Component({
+  template: `<ng-template uiTab [tabName]="tabName()" [tabLabel]="tabLabel()">TabContent</ng-template>`,
+})
+class TestComponent {
+  tabName = signal<string>('Test Tab');
+  tabLabel = signal<string>('Label');
+  directive = viewChild(TabDirective);
+}
+
+const createTest = async () => {
+  const testBed = TestBed.configureTestingModule({
+    declarations: [TestComponent],
+    imports: [TabDirective],
+    providers: [
+      {
+        provide: TabsComponent,
+        useValue: {
+          addTab: jest.fn(),
+          removeTab: jest.fn(),
+          updateTab: jest.fn(),
+        },
+      },
+    ],
+  });
+  await testBed.compileComponents();
+  const fixture = testBed.createComponent(TestComponent);
+  const component = fixture.componentInstance;
+  fixture.detectChanges();
+  const directive = component.directive();
+  const tabsComponentMock = TestBed.inject(TabsComponent);
+  return { testBed, directive, component, fixture, tabsComponentMock };
+};
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+describe('TabDirective', () => {
+  it('should create an instance', async () => {
+    const { directive } = await createTest();
+    expect(directive).toBeTruthy();
+  });
+  it('should add tab to parent TabsComponent ngOnInit hook', async () => {
+    const { tabsComponentMock } = await createTest();
+    const addTabSpy = jest.spyOn(tabsComponentMock, 'addTab');
+    expect(addTabSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should react to prop changes and run updateTab method using effect', async () => {
+    const { fixture, component, tabsComponentMock } = await createTest();
+    const addTabSpy = jest.spyOn(tabsComponentMock, 'updateTab');
+    component.tabName.set('Test Tab');
+    component.tabLabel.set('Label');
+    fixture.detectChanges();
+    expect(addTabSpy).toHaveBeenCalledWith('Test Tab', {
+      tabLabel: 'Label',
+      iconLeft: undefined,
+      iconRight: undefined,
+      disabled: false,
+      canLeave: undefined,
+      linkUrl: undefined,
+    });
+    component.tabLabel.set('New Label');
+    fixture.detectChanges();
+    expect(addTabSpy).toHaveBeenCalledWith('Test Tab', {
+      tabLabel: 'New Label',
+      iconLeft: undefined,
+      iconRight: undefined,
+      disabled: false,
+      canLeave: undefined,
+      linkUrl: undefined,
+    });
+  });
+});

package/projects/tgo-canopy-ui/components/tabs/tab.directive.ts

@@ -0,0 +1,53 @@
+import { booleanAttribute, DestroyRef, Directive, effect, inject, input, OnInit, TemplateRef } from '@angular/core';
+import { IconName } from '../icon/icon.model';
+import { TabsComponent } from './tabs.component';
+import { Tab } from './tabs.model';
+
+@Directive({
+  standalone: true,
+  selector: 'ng-template[uiTab]',
+})
+export class TabDirective implements OnInit {
+  tabLabel = input.required<string>();
+  tabName = input.required<string>();
+  iconLeft = input<IconName>();
+  iconRight = input<IconName>();
+  disabled = input<boolean, string>(false, { transform: booleanAttribute });
+  canLeave = input<(ctx?: { currentTab: Tab; nextTab: Tab }) => boolean | Promise<boolean>>();
+  linkUrl = input<string>();
+
+  private tabsComponent = inject(TabsComponent);
+  private template = inject(TemplateRef);
+
+  private syncProps = effect(() => {
+    this.tabsComponent.updateTab(this.tabName(), {
+      tabLabel: this.tabLabel(),
+      iconLeft: this.iconLeft(),
+      iconRight: this.iconRight(),
+      disabled: this.disabled(),
+      canLeave: this.canLeave(),
+      linkUrl: this.linkUrl(),
+    });
+  });
+
+  private cleanup = inject(DestroyRef).onDestroy(() => {
+    this.tabsComponent.removeTab(this.tabName());
+  });
+
+  ngOnInit(): void {
+    this.addTab();
+  }
+
+  private addTab(): void {
+    this.tabsComponent.addTab({
+      tabLabel: this.tabLabel(),
+      tabName: this.tabName(),
+      iconLeft: this.iconLeft(),
+      iconRight: this.iconRight(),
+      disabled: this.disabled(),
+      contentTemplateRef: this.template,
+      canLeave: this.canLeave(),
+      linkUrl: this.linkUrl(),
+    });
+  }
+}

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

@@ -0,0 +1,47 @@
+<mat-tab-group
+  #tabGroup
+  headerPosition="above"
+  class="tabs-container"
+  [ngClass]="'tabs-type-' + ((isMobile$ | async) ? 'underlined' : type)"
+  [attr.theme]="applicationTheme"
+  [dynamicHeight]="dynamicHeight"
+  [selectedIndex]="tabIndex()"
+  [animationDuration]="animationDuration"
+  (selectedTabChange)="onTabChange($event)"
+  role="tablist"
+>
+  <mat-tab
+    *ngFor="let tab of tabs; trackBy: trackByTabName;let i = index"
+    [disabled]="tab.disabled ?? false"
+    [attr.aria-label]="tab?.ariaLabel"
+  >
+    <ng-template mat-tab-label>
+      <a
+        data-test-role="tab-link"
+        [attr.data-testid]="tab.tabName"
+        class="tab-name"
+        [href]="tab?.linkUrl ? tab.linkUrl : '#'"
+        (click)="$event.preventDefault()"
+        [attr.aria-selected]="i === tabIndex()"
+        [attr.aria-label]="tab.tabLabel + (i === tabIndex() ? ', ' + ('TABS.SELECTED' | uiTranslate | async) : '')"
+        role="tab"
+      >
+        <ui-icon [size]="'24'" [tabindex]="1" class="left-icon" [name]="tab.iconLeft!" *ngIf="tab?.iconLeft"></ui-icon>
+        <span class="label">{{ tab.tabLabel }}</span>
+        <ui-icon
+          [size]="'24'"
+          class="right-icon"
+          [name]="tab.iconRight!"
+          *ngIf="tab?.iconRight"
+        ></ui-icon>
+      </a>
+    </ng-template>
+    <div
+      role="tabpanel"
+      [attr.id]="'tabpanel-' + i"
+      [attr.aria-labelledby]="'tab-' + i"
+    >
+      <ng-container *ngTemplateOutlet="tab.contentTemplateRef"></ng-container>
+    </div>
+  </mat-tab>
+</mat-tab-group>

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TabsComponent } from './tabs.component';
+import { MatTabsModule } from '@angular/material/tabs';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { TabDirective } from './tab.directive';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+@NgModule({
+  declarations: [TabsComponent],
+  imports: [TabDirective, CommonModule, MatTabsModule, IconComponentModule, UiTranslatePipe],
+  exports: [TabsComponent, TabDirective],
+})
+export class TabsComponentModule {}