@testgorilla/tgo-ui 2.11.1 → 2.11.3

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

@@ -1,290 +0,0 @@
-<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] | memoizeFunc : callRenderer">
-              </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

@@ -1,35 +0,0 @@
-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';
-import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
-
-@NgModule({
-  declarations: [TableComponent, SentenceCasePipe],
-  imports: [
-    CommonModule,
-    MatTableModule,
-    MatTooltipModule,
-    SkeletonComponent,
-    PaginatorComponentModule,
-    ButtonComponentModule,
-    MatSortModule,
-    IconComponentModule,
-    EllipseTextDirective,
-    DynamicComponentDirective,
-    DataPropertyGetterPipe,
-    MemoizeFuncPipe,
-  ],
-  exports: [TableComponent],
-})
-export class TableComponentModule {}

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

@@ -1,201 +0,0 @@
-@use "../../theme/variables" as *;
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
-
-.flex-left {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.table-container {
-  --mat-table-background-color: #{$tgo-white};
-  overflow: hidden;
-  border: 1px $tgo-medium solid;
-  border-radius: 8px;
-
-  ::ng-deep.mat-sort-header-arrow {
-    color: $tgo-black;
-  }
-
-  .table-header {
-    min-height: 56px;
-    padding: 8px 8px;
-    background: $tgo-white;
-    line-height: 24px;
-    font-size: 16px;
-    font-weight: bold;
-    text-transform: uppercase;
-    @extend .flex-left;
-  }
-
-  .table-wrapper {
-    max-width: 100%;
-    overflow: auto;
-
-    table.main-table {
-      width: 100%;
-      box-shadow: unset;
-      border-top: 1px $tgo-medium solid;
-
-      ::ng-deep.mat-sort-header-arrow {
-        margin-left: 8px;
-      }
-
-      .mdc-data-table__cell,
-      .mdc-data-table__header-cell {
-        padding: 8px 24px;
-      }
-
-      th {
-        font-size: 14px;
-        line-height: 16px;
-        text-transform: uppercase;
-      }
-
-      td {
-        font-size: 14px;
-        line-height: 20px;
-
-        .row-value {
-          display: flex;
-          gap: 8px;
-
-        }
-
-        ::ng-deep .table-skeleton-loader ngx-skeleton-loader {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          line-height: unset;
-
-          .skeleton-loader {
-            margin-bottom: 0;
-          }
-        }
-      }
-
-      ::ng-deep thead {
-        background: $background-color !important;
-      }
-
-       .mat-mdc-table-sticky-border-elem-left {
-        box-shadow: 24px 8px 24px 0 $box-shadow;
-      }
-
-      .mat-mdc-table-sticky-border-elem-right {
-        box-shadow: 0 8px 24px 4px $box-shadow;
-      }
-    }
-  }
-
-  .column-title {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-weight: 700;
-  }
-
-
-  &.without-title {
-    table {
-      border: unset !important;
-    }
-  }
-
-  &.disable-border-radius {
-    border-radius: 0!important;
-  }
-
-  ::ng-deep .mat-mdc-paginator-container {
-    padding: 0 24px;
-  }
-
-  &[theme="dark"], &[theme="light"] {
-
-    tr.selected {
-      background: $grayscale-10!important;
-    }
-
-    border-radius: 10px;
-    .table-header {
-      padding: 8px 24px;
-      text-transform: none;
-    }
-    .table-wrapper table {
-      th {
-        text-transform: none;
-      }
-
-      .mat-mdc-table-sticky-border-elem-right {
-        box-shadow: 0 8px 24px 4px $box-shadow-rebrand!important;
-      }
-
-      .mat-mdc-table-sticky-border-elem-left {
-        box-shadow: 24px 8px 24px 0 $box-shadow-rebrand!important;
-      }
-
-      ::ng-deep {
-        thead {
-          background-color: $tgo-white !important;
-        }
-        :not(thead) tr {
-          &:hover {
-            background-color: $brand-10;
-          }
-        }
-      }
-    }
-  }
-  ::ng-deep {
-    tr.detail-row {
-      height: 0;
-
-      td {
-        border: unset!important;
-      }
-    }
-
-
-    .mat-column-expandedDetail {
-      padding: 0!important;
-    }
-
-    .element-detail {
-      overflow: hidden!important;
-      display: flex!important;
-
-      table {
-        background-color: $tgo-light;
-
-        .mat-mdc-header-row {
-          visibility: collapse;
-        }
-
-        .mat-mdc-cell {
-          border-width: 0px;
-        }
-      }
-    }
-  }
-}
-
-ui-paginator {
-  width: 100%;
-  display: flex;
-  border-top: 1px solid $tgo-medium;
-  justify-content: flex-end;
-}
-
-::ng-deep .mat-mdc-tooltip {
-  background-color: $tgo-petrol-60w;
-  font-family: "Open Sans", serif;
-  font-weight: normal;
-  font-size: 12px;
-  border-radius: 4px;
-  overflow: visible;
-  max-width: 248px;
-  padding: 6px 2px;
-  --mdc-plain-tooltip-container-color: none;
-  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
-}