@testgorilla/tgo-ui 2.9.0 → 2.10.1

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

@@ -0,0 +1,160 @@
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatSort, Sort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { DataPropertyGetterPipe } from '../../pipes/data-property-getter';
+import { ColumnTypeEnum, IDataSource, ITableColumn, ITableDetailColumn } from './deprecated-table.model';
+
+@Component({
+  selector: 'ui-deprecated-table',
+  templateUrl: './deprecated-table.component.html',
+  styleUrls: ['./deprecated-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 DeprecatedTableComponent<T extends IDataSource, TDetail extends IDataSource> implements OnInit {
+  /**
+   * @ignore
+   */
+  @ViewChild(MatSort) set matSort(matSort: MatSort) {
+    this.dataSource.sort = matSort;
+    this.dataSource.sortingDataAccessor = (item, property) => this.dataPropertyGetterPipe.transform(item, property);
+  }
+
+  /**
+   * @ignore
+   */
+  @Input() tableDetails = false;
+
+  /**
+   * Data to be rendered
+   *
+   * @ignore
+   * @type {IDataSource}
+   * @memberof TableComponent
+   */
+  @Input() set tableData(data: T[] | null) {
+    if (data?.length) {
+      this.setTableDataSource(data);
+    }
+  }
+
+  /**
+   * Data structure to select which columns should be rendered and their capabilities
+   *
+   * @type {ITableColumn}
+   * @memberof TableComponent
+   */
+  @Input() tableColumns: ITableColumn<T>[] = [];
+
+  /**
+   * Data structure to select which columns should be rendered and their capabilities
+   *
+   * @type {ITableColumn}
+   * @memberof TableComponent
+   */
+  @Input() tableDetailColumns: ITableDetailColumn<T, TDetail>;
+
+  /**
+   * @ignore
+   */
+  @Output() onSortEvent: EventEmitter<Sort> = new EventEmitter<Sort>();
+
+  /**
+   * @ignore
+   */
+  @Output() onRowClickEvent: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * @ignore
+   */
+  @Output() onDetailRowClickEvent: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * @ignore
+   */
+  dataSource = new MatTableDataSource<any>([]);
+
+  /**
+   * @ignore
+   */
+  dataSourceDetail = new MatTableDataSource<any>([]);
+
+  /**
+   * @ignore
+   */
+  elementDetail: any;
+
+  /**
+   * @ignore
+   */
+  columnsToDisplay: string[] = [];
+
+  /**
+   * @ignore
+   */
+  columnsDetailToDisplay: string[] = [];
+
+  /**
+   * @ignore
+   */
+  DataType = ColumnTypeEnum;
+
+  ngOnInit(): void {
+    this.columnsToDisplay = this.tableColumns.map((tableColumn: ITableColumn<T>) => tableColumn.headerName);
+    if (this.tableDetailColumns) {
+      this.columnsDetailToDisplay = this.tableDetailColumns.columnDefs.map(
+        (tableColumn: ITableColumn<TDetail>) => tableColumn.headerName
+      );
+    }
+  }
+
+  constructor(private dataPropertyGetterPipe: DataPropertyGetterPipe) {}
+
+  onSort(sortParams: Sort) {
+    const columnSort = this.tableColumns.find((column: ITableColumn<T>) => column.headerName === sortParams.active);
+    if (columnSort?.field) {
+      sortParams.active = columnSort?.field;
+    }
+    this.onSortEvent.emit(sortParams);
+  }
+
+  onRowClick(rowParams: any) {
+    this.onRowClickEvent.emit(rowParams);
+  }
+
+  onDetailRowClick(rowParams: any) {
+    this.onDetailRowClickEvent.emit(rowParams);
+  }
+
+  toggleRow(element: T) {
+    this.elementDetail = this.elementDetail === element ? null : element;
+    if (this.elementDetail) {
+      this.tableDetailColumns.setDetailRowData({
+        data: element,
+        setDetailDataSource: this.setTableDetailDataSource.bind(this),
+      });
+    }
+  }
+
+  /**
+   * @ignore
+   */
+  private setTableDataSource(data: T[]) {
+    this.dataSource = new MatTableDataSource<any>(data);
+  }
+
+  /**
+   * @ignore
+   */
+  private setTableDetailDataSource(rowData: TDetail[]) {
+    this.dataSourceDetail = new MatTableDataSource<any>(rowData);
+  }
+}

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

@@ -0,0 +1,51 @@
+import { Type } from '@angular/core';
+
+export type IDataSource = {
+  [key: string]: any;
+};
+
+export interface ITableColumn<T> {
+  headerName: string;
+  headerTooltip?: string;
+  field?: string;
+  type?: ColumnTypeEnum;
+  function?: (v: T) => string;
+  renderer?: (v: T) => IComponentRenderer | string;
+  sortable?: boolean;
+  styles?: IColumnStyles;
+}
+
+export interface IComponentRenderer {
+  component: Type<any>;
+  inputs?: any;
+  outputs?: { [key: string]: any };
+}
+
+export interface IDetailRowDataParams<T, TDetail> {
+  data: T;
+  setDetailDataSource(rowData: TDetail[]): void;
+}
+
+export interface ITableDetailColumn<T, TDetail> {
+  columnDefs: ITableColumn<TDetail>[];
+  setDetailRowData: (params: IDetailRowDataParams<T, TDetail>) => void;
+}
+
+export interface IColumnStyles {
+  alignment?: ColumnAlignmentEnum;
+  width?: string;
+  'min-width'?: string;
+  padding?: string;
+}
+
+export enum ColumnTypeEnum {
+  FIELD = 'field',
+  FUNCTION = 'function',
+  RENDERER = 'renderer',
+}
+
+export enum ColumnAlignmentEnum {
+  LEFT = 'left',
+  RIGHT = 'right',
+  CENTER = 'center',
+}

package/projects/tgo-canopy-ui/components/deprecated-table/directives/dynamic-component.directive.ts

@@ -0,0 +1,41 @@
+import { ComponentRef, Directive, EventEmitter, Input, OnDestroy, ViewContainerRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { IComponentRenderer } from '../deprecated-table.model';
+
+@Directive({
+  selector: '[dynamicComponent]',
+  standalone: true,
+})
+export class DynamicComponentDirective implements OnDestroy {
+  private subscription = new Subscription();
+  private compRef: ComponentRef<any>;
+
+  @Input() set dynamicComponent(componentRenderer: IComponentRenderer) {
+    if (componentRenderer.component) {
+      this.compRef = this.vcr.createComponent(componentRenderer.component);
+
+      if (componentRenderer.inputs) {
+        Object.keys(componentRenderer.inputs).map(
+          inputName => (this.compRef.instance[inputName] = componentRenderer.inputs[inputName])
+        );
+      }
+
+      if (componentRenderer.outputs) {
+        Object.keys(componentRenderer.outputs).map(output => {
+          this.subscription.add(
+            (this.compRef.instance[output] as EventEmitter<any>).subscribe(componentRenderer.outputs?.[output])
+          );
+        });
+      }
+    }
+  }
+
+  constructor(private vcr: ViewContainerRef) {}
+
+  ngOnDestroy() {
+    if (this.compRef) {
+      this.compRef.destroy();
+    }
+    this.subscription.unsubscribe();
+  }
+}

package/projects/tgo-canopy-ui/components/dialog/__snapshots__/dialog.component.spec.ts.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog Component should render correctly 1`] = `
+<ui-dialog
+  applicationTheme={[Function String]}
+  canCloseFn={[Function Function]}
+  closeEvent={[Function EventEmitter_]}
+  companyColor={[Function String]}
+  data={[Function Object]}
+  defaultAppTheme="null"
+  dialogRef={[Function MatDialogMock]}
+  disableButtons="false"
+  disableClose="false"
+  disablePrimaryButton="false"
+  language={[Function String]}
+  primaryButtonClickEvent={[Function EventEmitter_]}
+  primaryButtonLabel=""
+  primaryButtonType={[Function String]}
+  secondaryButtonClickEvent={[Function EventEmitter_]}
+  secondaryButtonLabel=""
+  secondaryButtonType={[Function String]}
+  showCloseButton={[Function Boolean]}
+  title=""
+  translationContext={[Function String]}
+>
+  <div
+    class="dialog-container"
+    theme="light"
+  >
+    <div
+      class="mat-mdc-dialog-title mdc-dialog__title dialog-title"
+      mat-dialog-title=""
+    >
+      <h3
+        class="bold"
+      >
+      </h3>
+      <div>
+        <ui-button
+          class="close"
+          iconname="Close"
+          variant="text"
+        />
+      </div>
+    </div>
+    <mat-dialog-content
+      class="mat-mdc-dialog-content mdc-dialog__content"
+    />
+  </div>
+</ui-dialog>
+`;

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

@@ -0,0 +1,41 @@
+<div class="dialog-container" [attr.theme]="applicationTheme">
+  <div mat-dialog-title class="dialog-title">
+    <h3 class="bold">{{ title }}</h3>
+    <div *ngIf="showCloseButton">
+      <ui-button
+        variant="text"
+        [justIcon]="true"
+        [disabled]="disableButtons || disableClose"
+        [applicationTheme]="applicationTheme"
+        class="close"
+        iconName="Close"
+        [label]="(translationContext + 'CLOSE_LABEL') | uiTranslate : language"
+        (click)="onClose($event)"
+        (buttonClickEvent)="dismiss()"
+      ></ui-button>
+    </div>
+  </div>
+  <mat-dialog-content>
+    <ng-content></ng-content>
+  </mat-dialog-content>
+  <div mat-dialog-actions *ngIf="secondaryButtonLabel !== '' || primaryButtonLabel !== ''">
+    <ui-button
+      [companyColor]="companyColor"
+      [variant]="secondaryButtonType"
+      [applicationTheme]="applicationTheme"
+      *ngIf="!!secondaryButtonLabel"
+      [label]="secondaryButtonLabel"
+      (click)="onSecondaryButtonClick($event)"
+    ></ui-button>
+    <ui-button
+      [variant]="primaryButtonType"
+      *ngIf="!!primaryButtonLabel"
+      [disabled]="disableButtons || disablePrimaryButton"
+      [applicationTheme]="applicationTheme"
+      (click)="onPrimaryButtonClick($event)"
+      [label]="primaryButtonLabel"
+      [companyColor]="companyColor"
+      (buttonClickEvent)="dismiss()"
+    ></ui-button>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { DialogComponent } from './dialog.component';
+import { DialogService } from './dialog.service';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+
+@NgModule({
+  declarations: [DialogComponent],
+  imports: [CommonModule, MatDialogModule, ButtonComponentModule, UiTranslatePipe],
+  exports: [DialogComponent],
+  providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }, { provide: MatDialogRef, useValue: {} }, DialogService],
+})
+export class DialogComponentModule {}

package/projects/tgo-canopy-ui/components/dialog/dialog.component.scss

@@ -0,0 +1,133 @@
+@use '../../theme/variables' as *;
+@use '../../theme/breakpoints-mixin' as *;
+
+.ui-dialog-wrapper {
+  display: flex;
+  flex-flow: column;
+  &.small {
+    width: 600px;
+  }
+  &.large {
+    width: 956px;
+  }
+
+  .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface {
+    border-radius: 8px;
+    padding: 16px;
+  }
+
+  &.dark, &.light {
+    .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface {
+      padding: 32px;
+    }
+
+    .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface {
+      border-radius: 10px;
+    }
+
+    .dialog-title {
+      height: 40px;
+      padding: 0;
+      margin-bottom: 32px;
+    }
+
+    .mat-mdc-dialog-content {
+      padding: 0;
+    }
+
+    .mat-mdc-dialog-actions {
+      padding: 0;
+      margin-top: 32px;
+    }
+  }
+
+  .mat-mdc-dialog-content {
+    font-size: $font-size;
+    color: $tgo-black;
+    line-height: 20px;
+  }
+
+  &.dark {
+    .mat-mdc-dialog-container {
+      --mdc-dialog-container-color: #424242;
+    }
+
+    .mat-mdc-dialog-content {
+      color: $tgo-white!important;
+    }
+
+    .dialog-title {
+      --mdc-dialog-subhead-color: #{$tgo-white};
+    }
+  }
+}
+
+.dialog-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+
+  .close {
+    margin-right: -24px;
+  }
+
+  &:before {
+    content: none;
+  }
+}
+
+.mat-mdc-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  column-gap: 16px;
+  padding: 16px 0 0 0;
+  margin-bottom: 0;
+  min-height: 48px;
+}
+
+@include screen('large') {
+  .ui-dialog-wrapper {
+    .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface {
+      min-width: 320px;
+      max-width: 600px;
+      border-radius: 0;
+    }
+  }
+
+  .mat-mdc-dialog-content {
+    max-height: 524px;
+  }
+}
+
+@include screen('medium') {
+  .cdk-overlay-pane.ui-dialog-wrapper {
+    max-width: 100% !important;
+    min-height: 100%;
+    display: flex;
+    flex-flow: column;
+
+    .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface {
+      min-width: 100%;
+      max-width: 100%;
+      height: 100%;
+      display: flex;
+      flex-grow: 1;
+      border-radius: 0;
+    }
+  }
+
+  ui-dialog {
+    height: 100%;
+    display: flex;
+    flex-flow: column;
+  }
+
+  .mat-mdc-dialog-content {
+    max-height: unset;
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+  }
+}