@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,118 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
+import { Step } from './stepper.model';
+import { Observable } from 'rxjs';
+import { IS_MOBILE_TOKEN } from '../../providers/is-mobile';
+import { LanguageService } from '../../utils/localization/language.service';
+import { ApplicationTheme } from "../../models/application-theme.model";
+
+@Component({
+  selector: 'ui-stepper',
+  templateUrl: './stepper.component.html',
+  styleUrls: ['./stepper.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StepperComponent {
+  /**
+   * Input property to set the steps for the stepper.
+   * The first step will be marked as visited automatically.
+   *
+   * @memberof StepperComponent
+   */
+  @Input() set steps(itemSteps: Step[]) {
+    this.itemSteps = itemSteps;
+    const [first, ...other] = itemSteps;
+    first.isVisited = true;
+    this.itemSteps = [first, ...other];
+  }
+
+  /**
+   * Input property to set the selected index of the stepper.
+   * Default value is 0.
+   *
+   * @memberof StepperComponent
+   */
+  @Input() selectedIndex = 0;
+
+  /**
+   * Input property indicating whether the final icon should be displayed.
+   * Default value is false.
+   *
+   * @memberof StepperComponent
+   */
+  @Input() lastStepFinalIcon = false;
+
+  /**
+   * The language to be used
+   *
+   * @type {Language}
+   * @memberof StepperComponent
+   */
+  @Input() language = LanguageService.defaultLanguage;
+
+  /**
+   *
+   * Defines the application theme
+   *
+   * @type {ApplicationTheme}
+   * @memberof StepperComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   * A string representing the ARIA label for accessibility.
+   * This label is used to provide an accessible name for the input element.
+   * @type {string}
+   * @memberof StepperComponent
+   */
+  @Input() ariaLabel: string;
+
+  /**
+   * A string representing the ARIA requirement for accessibility.
+   * This attribute is used to indicate whether an input field is required for form submission.
+   * @type {boolean}
+   * @memberof StepperComponent
+   */
+  @Input() ariaRequired = false;
+
+  @Output() selectionChange = new EventEmitter<{ selectedIndex: number; previousIndex: number; step: Step }>();
+
+  private isOpened = false;
+  protected itemSteps: Step[] = [];
+  protected progressValue = 0;
+  protected translationContext = 'STEPPER.';
+
+  get isOpen(): boolean {
+    return this.isOpened;
+  }
+
+  set isOpen(value: boolean) {
+    this.isOpened = value;
+  }
+
+  constructor(
+    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,
+    @Inject(IS_MOBILE_TOKEN) protected readonly isMobile$: Observable<boolean>
+  ) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  protected onSelect(changedIndex: number, step: Step): void {
+    if (!step.isVisited && this.selectedIndex !== changedIndex) {
+      step.isVisited = true;
+    }
+    this.selectionChange.emit({ selectedIndex: changedIndex, previousIndex: this.selectedIndex, step });
+
+    this.selectedIndex = changedIndex;
+    this.onCloseStepList();
+  }
+
+  protected showStepsToggle(): void {
+    this.isOpen = !this.isOpen;
+  }
+
+  protected onCloseStepList(): void {
+    this.isOpen = false;
+  }
+}

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

@@ -0,0 +1,10 @@
+import { IconName } from '../icon/icon.model';
+
+export interface Step {
+  label: string;
+  isVisited?: boolean;
+  iconName?: IconName;
+  disabled?: boolean;
+  submitted?: boolean;
+  showIconWhenSelected?: boolean;
+}

package/projects/tgo-canopy-ui/components/table/sentence-case.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sentencecase',
+})
+export class SentenceCasePipe implements PipeTransform {
+  transform(value: string | undefined): string {
+    if (!value) {
+      return '';
+    }
+    return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+  }
+}

package/projects/tgo-canopy-ui/components/table/sentence-case.spec.ts

@@ -0,0 +1,53 @@
+import { SentenceCasePipe } from "./sentence-case.pipe";
+
+describe('SentenceCasePipe', () => {
+  let pipe: SentenceCasePipe;
+
+  beforeEach(() => {
+    pipe = new SentenceCasePipe();
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should transform a lowercase string to sentence case', () => {
+    const result = pipe.transform('hello world');
+    expect(result).toBe('Hello world');
+  });
+
+  it('should transform an uppercase string to sentence case', () => {
+    const result = pipe.transform('HELLO WORLD');
+    expect(result).toBe('Hello world');
+  });
+
+  it('should transform a mixed-case string to sentence case', () => {
+    const result = pipe.transform('hElLo WoRlD');
+    expect(result).toBe('Hello world');
+  });
+
+  it('should return an empty string if the input is undefined', () => {
+    const result = pipe.transform(undefined);
+    expect(result).toBe('');
+  });
+
+  it('should return an empty string if the input is an empty string', () => {
+    const result = pipe.transform('');
+    expect(result).toBe('');
+  });
+
+  it('should handle a string with only one character', () => {
+    const result = pipe.transform('a');
+    expect(result).toBe('A');
+  });
+
+  it('should handle a string with a single uppercase character', () => {
+    const result = pipe.transform('A');
+    expect(result).toBe('A');
+  });
+
+  it('should not change a string that is already in sentence case', () => {
+    const result = pipe.transform('Hello world');
+    expect(result).toBe('Hello world');
+  });
+});

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

@@ -0,0 +1,290 @@
+<div #tableContainer class="table-container" [ngClass]="{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }" [attr.theme]="applicationTheme">
+  <div *ngIf="tableConfig?.title" class="table-header">{{ tableConfig.title | sentencecase }}</div>
+  <div
+    #table
+    *ngIf="scrollSettings$ | async as scrollSettings"
+    class="table-wrapper">
+    <table
+      class="main-table"
+      mat-table
+      [dataSource]="tableData"
+      matSort
+      [matSortStart]="tableConfig?.sort?.defaultSortStart ?? 'asc'"
+      [matSortActive]="tableConfig?.sort?.active ?? ''"
+      [matSortDirection]="tableConfig?.sort?.direction ?? ''"
+      (matSortChange)="onSortChange($event)"
+      multiTemplateDataRows
+    >
+
+      <ng-container *ngFor="let column of tableConfig.columns; index as i, last as isLast; trackBy: trackColumnKey">
+        <ng-container *ngIf="isLast && column.isSticky && column.allowSort">
+            <ng-container [matColumnDef]="column.key" [stickyEnd]="!scrollSettings?.scrollEnd">
+            <th mat-header-cell
+                [start]="column.sortStart ?? 'asc'"
+                [mat-sort-header]="column.sortHeader ?? column.key"
+                *matHeaderCellDef
+                [attr.sortable]="column.allowSort ?? false"
+                [style.width]="column.widthPerc + '%'"
+                [style.min-width]="column.minWidthPx + 'px'"
+                [style.font-weight]="'bold'"
+                [matTooltipClass]="applicationTheme"
+                [matTooltip]="(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''"
+            >
+              <ng-container *ngIf="column.headerCellTemplate; else configValue">
+                <ng-container
+                  *ngTemplateOutlet="column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}"></ng-container>
+              </ng-container>
+              <ng-template #configValue>
+                 <span uiEllipseText (onChangeTextState)="onChangeColumnSize(i, $event)"
+                       class="column-title">{{ column.title | sentencecase }}</span>
+              </ng-template>
+            </th>
+
+            <td mat-cell
+                *matCellDef="let element; let rowIndex = dataIndex"
+                [style.width]="column.widthPerc + '%'"
+                [style.min-width]="column.minWidthPx + 'px'"
+                (click)="onRowClick(element)"
+            >
+              <ui-skeleton class="table-skeleton-loader" [count]="1" [theme]="skeletonStyleConfig" [appearance]="'line'"
+                           *ngIf="loading; else value"></ui-skeleton>
+              <ng-template #value>
+                <div class="row-value">
+                  <ui-icon [applicationTheme]="applicationTheme" *ngIf="!i && tableDetails"
+                           [name]="elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'"></ui-icon>
+
+                  <ng-container *ngIf="column.rowCellTemplate; else configData">
+                    <ng-container
+                      *ngTemplateOutlet="column.rowCellTemplate; context: {$implicit: element, rowIndex}"></ng-container>
+                  </ng-container>
+                  <ng-template #configData>
+                  <span [style.font-weight]="column.bold ? 'bold' : 'normal'"
+                        [style.font-size]="column.fontSize ?? '14px'">{{ element[column.key] }}</span>
+                  </ng-template>
+                </div>
+              </ng-template>
+            </td>
+          </ng-container>
+        </ng-container>
+
+        <ng-container *ngIf="isLast && column.isSticky && !column.allowSort">
+            <ng-container [matColumnDef]="column.key" [stickyEnd]="scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true">
+              <th mat-header-cell
+                  *matHeaderCellDef
+                  [attr.sortable]="column.allowSort ?? false"
+                  [style.width]="column.widthPerc + '%'"
+                  [style.min-width]="column.minWidthPx + 'px'"
+                  [style.font-weight]="'bold'"
+                  [matTooltipClass]="applicationTheme"
+                  [matTooltip]="(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''"
+              >
+                <ng-container *ngIf="column.headerCellTemplate; else configValue">
+                  <ng-container
+                    *ngTemplateOutlet="column.headerCellTemplate; context: {$implicit: column.title, column, colIndex: i}"></ng-container>
+                </ng-container>
+                <ng-template #configValue>
+                 <span uiEllipseText (onChangeTextState)="onChangeColumnSize(i, $event)"
+                       class="column-title">{{ column.title | sentencecase }}</span>
+                </ng-template>
+              </th>
+
+              <td mat-cell
+                  *matCellDef="let element; let rowIndex = dataIndex"
+                  [style.width]="column.widthPerc + '%'"
+                  [style.min-width]="column.minWidthPx + 'px'"
+                  (click)="onRowClick(element)"
+              >
+                <ui-skeleton class="table-skeleton-loader" [count]="1" [theme]="skeletonStyleConfig"
+                             [appearance]="'line'"
+                             *ngIf="loading; else value"></ui-skeleton>
+                <ng-template #value>
+                  <div class="row-value">
+                    <ui-icon [applicationTheme]="applicationTheme" *ngIf="!i && tableDetails"
+                             [name]="elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'"></ui-icon>
+
+                    <ng-container *ngIf="column.rowCellTemplate; else configData">
+                      <ng-container
+                        *ngTemplateOutlet="column.rowCellTemplate; context: { $implicit: element, rowIndex }"></ng-container>
+                    </ng-container>
+                    <ng-template #configData>
+                  <span [style.font-weight]="column.bold ? 'bold' : 'normal'"
+                        [style.font-size]="column.fontSize ?? '14px'">{{ element[column.key] }}</span>
+                    </ng-template>
+                  </div>
+                </ng-template>
+              </td>
+            </ng-container>
+        </ng-container>
+
+        <ng-container
+          *ngIf="!(isLast && column.isSticky) && column.allowSort">
+          <ng-container [matColumnDef]="column.key" [sticky]="(isMobile$ | async) ? false : !scrollSettings.scrollStart  && !!column.isSticky">
+            <th mat-header-cell
+                [start]="column.sortStart ?? 'asc'"
+                [mat-sort-header]="column.sortHeader ?? column.key"
+                [attr.sortable]="column.allowSort ?? false"
+                *matHeaderCellDef
+                [style.font-weight]="'bold'"
+                [style.width]="column.widthPerc + '%'"
+                [style.min-width]="column.minWidthPx + 'px'"
+                [matTooltipClass]="applicationTheme"
+                [matTooltip]="(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') || ''"
+            >
+              <ng-container *ngIf="column.headerCellTemplate; else configValue">
+                <ng-container
+                  *ngTemplateOutlet="column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }"></ng-container>
+              </ng-container>
+              <ng-template #configValue>
+                 <span uiEllipseText (onChangeTextState)="onChangeColumnSize(i, $event)"
+                       class="column-title">{{ column.title | sentencecase }}</span>
+              </ng-template>
+            </th>
+
+            <td mat-cell
+                *matCellDef="let element; let rowIndex = dataIndex"
+                [style.width]="column.widthPerc + '%'"
+                [style.min-width]="column.minWidthPx + 'px'"
+                (click)="onRowClick(element)"
+            >
+              <ui-skeleton class="table-skeleton-loader" [count]="1" [theme]="skeletonStyleConfig"
+                           [appearance]="'line'"
+                           *ngIf="loading; else value"></ui-skeleton>
+              <ng-template #value>
+                <div class="row-value">
+                  <ui-icon [applicationTheme]="applicationTheme" *ngIf="!i && tableDetails"
+                           [name]="elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'"></ui-icon>
+
+                  <ng-container *ngIf="column.rowCellTemplate; else configData">
+                    <ng-container
+                      *ngTemplateOutlet="column.rowCellTemplate; context: { $implicit: element, rowIndex }"></ng-container>
+                  </ng-container>
+                  <ng-template #configData>
+                  <span [style.font-weight]="column.bold ? 'bold' : 'normal'"
+                        [style.font-size]="column.fontSize ?? '14px'">{{ element[column.key] }}</span>
+                  </ng-template>
+                </div>
+
+              </ng-template>
+            </td>
+          </ng-container>
+        </ng-container>
+
+        <ng-container
+          *ngIf="!(isLast && column.isSticky) && !column.allowSort">
+          <ng-container [matColumnDef]="column.key" [sticky]="(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky">
+            <th mat-header-cell
+                [attr.sortable]="column.allowSort ?? false"
+                *matHeaderCellDef
+                [style.font-weight]="'bold'"
+                [matTooltipClass]="applicationTheme"
+                [matTooltip]="(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title ) : '') ?? ''"
+            >
+              <ng-container *ngIf="column.headerCellTemplate; else configValue">
+                <ng-container
+                  *ngTemplateOutlet="column.headerCellTemplate; context: { $implicit: column.title, column, colIndex: i }"></ng-container>
+              </ng-container>
+              <ng-template #configValue>
+                 <span uiEllipseText (onChangeTextState)="onChangeColumnSize(i, $event)"
+                       class="column-title">{{ column.title | sentencecase }}</span>
+              </ng-template>
+            </th>
+
+            <td mat-cell
+                *matCellDef="let element; let rowIndex = dataIndex"
+                [style.width]="column.widthPerc + '%'"
+                [style.min-width]="column.minWidthPx + 'px'"
+                (click)="onRowClick(element)"
+            >
+              <ui-skeleton class="table-skeleton-loader" [count]="1" [theme]="skeletonStyleConfig"
+                           [appearance]="'line'"
+                           *ngIf="loading; else value"></ui-skeleton>
+              <ng-template #value>
+                <div class="row-value">
+                  <ui-icon [applicationTheme]="applicationTheme" *ngIf="!i && tableDetails"
+                           [name]="elementDetail && element == elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'"></ui-icon>
+
+                  <ng-container *ngIf="column.rowCellTemplate; else configData">
+                    <ng-container
+                      *ngTemplateOutlet="column.rowCellTemplate; context: { $implicit:  element, rowIndex }"></ng-container>
+                  </ng-container>
+                  <ng-template #configData>
+                  <span [style.font-weight]="column.bold ? 'bold' : 'normal'"
+                        [style.font-size]="column.fontSize ?? '14px'">{{ element[column.key] }}</span>
+                  </ng-template>
+                </div>
+              </ng-template>
+            </td>
+          </ng-container>
+        </ng-container>
+
+      </ng-container>
+
+
+      <ng-container matColumnDef="expandedDetail">
+        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsDetailToDisplay.length">
+          <div class="element-detail" *ngIf="dataSourceDetail.data.length"
+               [@expandDetail]="element === elementDetail ? 'expanded' : 'collapsed'">
+            <table mat-table [dataSource]="dataSourceDetail">
+              <ng-container *ngFor="let tableColumn of tableDetailColumns.columnDefs"
+                            [matColumnDef]="tableColumn.title">
+                <th mat-header-cell *matHeaderCellDef="let element" arrowPosition="after"
+                    [ngStyle]="{width: tableColumn.styles?.width}"
+                    [ngClass]="tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''">
+                  {{ tableColumn.title | uppercase }}
+                </th>
+                <td mat-cell *matCellDef="let element" (click)="onDetailRowClick(element)"
+                    [align]="tableColumn.styles?.alignment"
+                    [ngClass]="tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''"
+                    [ngStyle]="{padding: tableColumn.styles?.padding}">
+                  <ng-container *ngTemplateOutlet="tableDataTpl; context: {element, tableColumn}"></ng-container>
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="columnsDetailToDisplay"></tr>
+              <tr mat-row *matRowDef="let rowDetail; columns: columnsDetailToDisplay;"></tr>
+            </table>
+          </div>
+        </td>
+      </ng-container>
+
+      <ng-template #tableDataTpl let-element="element" let-tableColumn="tableColumn">
+        <div class="align-wrapper">
+          <ng-container [ngSwitch]="tableColumn.type">
+            <ng-container *ngSwitchCase="DataType.FIELD">
+              {{ element | dataPropertyGetter: tableColumn.key }}
+            </ng-container>
+            <ng-container *ngSwitchCase="DataType.FUNCTION">
+              {{ tableColumn.function?.(element) }}
+            </ng-container>
+            <ng-container *ngSwitchCase="DataType.RENDERER">
+              <ng-template
+                [dynamicComponent]="tableColumn.renderer?.(element)">
+              </ng-template>
+            </ng-container>
+            <ng-container *ngSwitchDefault>
+              {{ element | dataPropertyGetter: tableColumn.key }}
+            </ng-container>
+          </ng-container>
+        </div>
+      </ng-template>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+          [ngClass]="{'expanded-row': elementDetail === row, 'row-clickable': tableDetails, 'selected': row?.selected }"
+          (click)="toggleRow(row)">
+      </tr>
+      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
+    </table>
+  </div>
+
+  <ui-paginator
+    *ngIf="!tableConfig?.hidePagination"
+    [disabled]="loading"
+    [applicationTheme]="applicationTheme !== 'classic' ? 'light' : 'classic'"
+    [pageSize]="tableConfig.pagination.itemsPerPage"
+    [length]="tableConfig.pagination.totalItems"
+    [pageSizeOptions]="tableConfig.pagination.itemsPerPageOptions"
+    (paginatorChange)="onPaginatorChange($event)"
+  ></ui-paginator>
+</div>
+

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

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TableComponent } from './table.component';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { SkeletonComponent } from '../skeleton/skeleton.component';
+import { PaginatorComponentModule } from '../paginator/paginator.component.module';
+import { EllipseTextDirective } from '../../directives/ellipse-text.directive';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { MatSortModule } from '@angular/material/sort';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { SentenceCasePipe } from './sentence-case.pipe';
+import { DataPropertyGetterPipe } from '../../pipes/data-property-getter';
+import { DynamicComponentDirective } from '../deprecated-table/directives/dynamic-component.directive';
+
+@NgModule({
+  declarations: [TableComponent, SentenceCasePipe],
+  imports: [
+    CommonModule,
+    MatTableModule,
+    MatTooltipModule,
+    SkeletonComponent,
+    PaginatorComponentModule,
+    ButtonComponentModule,
+    MatSortModule,
+    IconComponentModule,
+    EllipseTextDirective,
+    DynamicComponentDirective,
+    DataPropertyGetterPipe,
+  ],
+  exports: [TableComponent],
+})
+export class TableComponentModule {}