@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,160 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,51 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-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

@@ -1,133 +0,0 @@
-@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;
-  }
-}