@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-table.mjs

@@ -1,426 +1,725 @@
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { NgClass, NgStyle, NgTemplateOutlet, AsyncPipe, UpperCasePipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, ViewChild, Output, Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { MatSort, MatSortHeader, MatSortModule } from '@angular/material/sort';
-import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatNoDataRow, MatTableModule } from '@angular/material/table';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import * as i1 from 'rxjs';
-import { BehaviorSubject, fromEvent } from 'rxjs';
-import { ButtonComponent, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { IS_MOBILE_TOKEN, DynamicComponentDirective, EllipseTextDirective, DataPropertyGetterPipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';
-import { IconComponent, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { PaginatorComponent, PaginatorComponentModule } from '@testgorilla/tgo-ui/components/paginator';
-import { SkeletonComponent } from '@testgorilla/tgo-ui/components/skeleton';
-
-class SentenceCasePipe {
-    transform(value) {
-        if (!value) {
-            return '';
-        }
-        return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SentenceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: SentenceCasePipe, isStandalone: true, name: "sentencecase" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SentenceCasePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'sentencecase' }]
-        }] });
-
+import { animate, state, style, transition, trigger } from "@angular/animations";
+import { AsyncPipe, CommonModule, NgClass, NgStyle, NgTemplateOutlet, UpperCasePipe } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, NgModule, Optional, Output, Pipe, ViewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { MatSort, MatSortHeader, MatSortModule } from "@angular/material/sort";
+import { MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef, MatTable, MatTableDataSource, MatTableModule } from "@angular/material/table";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import * as i1 from "rxjs";
+import { BehaviorSubject, fromEvent } from "rxjs";
+import { ButtonComponent, ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { DataPropertyGetterPipe, DynamicComponentDirective, EllipseTextDirective, IS_MOBILE_TOKEN, MemoizeFuncPipe } from "@testgorilla/tgo-ui/components/core";
+import { IconComponent, IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { PaginatorComponent, PaginatorComponentModule } from "@testgorilla/tgo-ui/components/paginator";
+import { SkeletonComponent } from "@testgorilla/tgo-ui/components/skeleton";
+var SentenceCasePipe = class SentenceCasePipe {
+	transform(value) {
+		if (!value) return "";
+		return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SentenceCasePipe,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Pipe
+		});
+	}
+	static {
+		this.ɵpipe = i0.ɵɵngDeclarePipe({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SentenceCasePipe,
+			isStandalone: true,
+			name: "sentencecase"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SentenceCasePipe,
+	decorators: [{
+		type: Pipe,
+		args: [{ name: "sentencecase" }]
+	}]
+});
 var ColumnType;
-(function (ColumnType) {
-    ColumnType["FIELD"] = "field";
-    ColumnType["FUNCTION"] = "function";
-    ColumnType["RENDERER"] = "renderer";
+(function(ColumnType) {
+	ColumnType["FIELD"] = "field";
+	ColumnType["FUNCTION"] = "function";
+	ColumnType["RENDERER"] = "renderer";
 })(ColumnType || (ColumnType = {}));
 var ColumnAlignment;
-(function (ColumnAlignment) {
-    ColumnAlignment["LEFT"] = "left";
-    ColumnAlignment["RIGHT"] = "right";
-    ColumnAlignment["CENTER"] = "center";
+(function(ColumnAlignment) {
+	ColumnAlignment["LEFT"] = "left";
+	ColumnAlignment["RIGHT"] = "right";
+	ColumnAlignment["CENTER"] = "center";
 })(ColumnAlignment || (ColumnAlignment = {}));
 var ColumnTypeEnum;
-(function (ColumnTypeEnum) {
-    ColumnTypeEnum["FIELD"] = "field";
-    ColumnTypeEnum["FUNCTION"] = "function";
-    ColumnTypeEnum["RENDERER"] = "renderer";
+(function(ColumnTypeEnum) {
+	ColumnTypeEnum["FIELD"] = "field";
+	ColumnTypeEnum["FUNCTION"] = "function";
+	ColumnTypeEnum["RENDERER"] = "renderer";
 })(ColumnTypeEnum || (ColumnTypeEnum = {}));
 var ColumnAlignmentEnum;
-(function (ColumnAlignmentEnum) {
-    ColumnAlignmentEnum["LEFT"] = "left";
-    ColumnAlignmentEnum["RIGHT"] = "right";
-    ColumnAlignmentEnum["CENTER"] = "center";
+(function(ColumnAlignmentEnum) {
+	ColumnAlignmentEnum["LEFT"] = "left";
+	ColumnAlignmentEnum["RIGHT"] = "right";
+	ColumnAlignmentEnum["CENTER"] = "center";
 })(ColumnAlignmentEnum || (ColumnAlignmentEnum = {}));
-
-/**
- * Sorting table columns by order value if set.
- * The rest columns keep the same ordering and displayed after the sorted ones.
- */
 const sortByOrder = (columns) => {
-    const withOrderColumns = columns.filter(v => v.order);
-    const withoutOrderColumns = columns.filter(v => !v.order);
-    if (!withOrderColumns.length) {
-        return columns;
-    }
-    if (withoutOrderColumns.length) {
-        const sortedColumns = new Array(columns.length);
-        withOrderColumns.forEach(column => (sortedColumns[(column.order ?? 1) - 1] = column));
-        withoutOrderColumns.forEach(column => {
-            const emptyIndex = sortedColumns.findIndex(v => !v);
-            sortedColumns[emptyIndex] = column;
-        });
-        return sortedColumns;
-    }
-    else {
-        const sortedOrderedColumns = withOrderColumns.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-        return [...sortedOrderedColumns, ...withoutOrderColumns];
-    }
+	const withOrderColumns = columns.filter((v) => v.order);
+	const withoutOrderColumns = columns.filter((v) => !v.order);
+	if (!withOrderColumns.length) return columns;
+	if (withoutOrderColumns.length) {
+		const sortedColumns = new Array(columns.length);
+		withOrderColumns.forEach((column) => sortedColumns[(column.order ?? 1) - 1] = column);
+		withoutOrderColumns.forEach((column) => {
+			const emptyIndex = sortedColumns.findIndex((v) => !v);
+			sortedColumns[emptyIndex] = column;
+		});
+		return sortedColumns;
+	} else return [...withOrderColumns.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), ...withoutOrderColumns];
 };
-
-class TableComponent {
-    constructor(defaultAppTheme, destroyRef, isMobile$) {
-        this.defaultAppTheme = defaultAppTheme;
-        this.destroyRef = destroyRef;
-        this.isMobile$ = isMobile$;
-        /**
-         * Input property indicating whether the table is in a loading state.
-         *
-         * @type {boolean}
-         * @memberof TableComponent
-         * @default false
-         */
-        this.loading = false;
-        /**
-         *
-         * Defines the application theme
-         * @type {ApplicationTheme}
-         * @memberof TableComponent
-         */
-        this.applicationTheme = 'light';
-        this.tableDetails = false;
-        /**
-         * Disable border radius for table
-         *
-         * @type {boolean}
-         * @memberof TableComponent
-         */
-        this.disableBorderRadius = false;
-        /**
-         * Condensed table
-         *
-         * @type {boolean}
-         * @memberof TableComponent
-         */
-        this.isCondensed = false;
-        /**
-         * Sticky header
-         *
-         * @type {boolean}
-         * @memberof TableComponent
-         */
-        this.stickyHeader = false;
-        /**
-         * Max height
-         *
-         * @type {string}
-         * @memberof TableComponent
-         */
-        this.maxHeight = '576px';
-        this.testId = null;
-        this.ariaLabel = '';
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix -- public output; dropping on- prefix is breaking, deferred to the breaking-change MAJOR (see plan)
-        this.onRowClickEvent = new EventEmitter();
-        // eslint-disable-next-line @angular-eslint/no-output-on-prefix -- public output; dropping on- prefix is breaking, deferred to the breaking-change MAJOR (see plan)
-        this.onDetailRowClickEvent = new EventEmitter();
-        this.paginatorChange = new EventEmitter();
-        this.sortChange = new EventEmitter();
-        this.columnsTooltipState = [];
-        this.displayedColumns = [];
-        this.columnsDetailToDisplay = [];
-        this.skeletonStyleConfig = {
-            background: '#F6F6F6',
-            'border-radius': '4px',
-            height: '24px',
-        };
-        this.dataSourceDetail = new MatTableDataSource([]);
-        this.DataType = ColumnType;
-        this.scrollSettings$ = new BehaviorSubject({
-            scrollEnd: false,
-            horizontalScroll: false,
-            scrollStart: false,
-        });
-        this.defaultPaginationConfig = {
-            currentPage: 0,
-            itemsPerPage: 10,
-            itemsPerPageOptions: [10, 25, 50],
-            totalItems: 20,
-        };
-        this.trackColumnUniqueId = (index, column) => column.uniqueId ?? column.key;
-        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.title ?? '')
-                : [];
-        }
-        if (this.tableConfig?.sortable && this.tableConfig?.sort) {
-            this.onSortChange(this.tableConfig.sort, false);
-        }
-    }
-    ngAfterViewInit() {
-        this.hasTableScroll();
-        fromEvent(this.table.nativeElement, 'scroll')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.hasTableScroll());
-    }
-    ngOnChanges(changes) {
-        if (changes['config']?.currentValue) {
-            const config = changes['config'].currentValue;
-            this.setTableConfig(config);
-        }
-        if (changes['data']?.currentValue) {
-            this.setTableData(changes['data'].currentValue);
-        }
-    }
-    hasTableScroll() {
-        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]) {
-        return rendererFn ? rendererFn(element) : undefined;
-    }
-    onPaginatorChange(event) {
-        this.paginatorChange.emit(event);
-    }
-    onChangeColumnSize(columnIndex, showTooltip) {
-        this.columnsTooltipState = this.columnsTooltipState.map(column => {
-            if (column.index === columnIndex) {
-                column.showTooltip = showTooltip;
-            }
-            return column;
-        });
-    }
-    onSortChange(sortState, emitEvent = true) {
-        if (this.loading) {
-            return;
-        }
-        if (emitEvent) {
-            this.sortChange.emit(sortState);
-        }
-        if (this.tableConfig?.sortable) {
-            this.tableData = [
-                ...this.tableData.sort((a, b) => {
-                    const isAsc = sortState.direction === 'asc';
-                    // Cell values are dynamically keyed (TableData is Record<string, any>); assert a
-                    // comparable type — the cast is erased at runtime so JS relational compare is unchanged.
-                    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];
-            }
-        }
-    }
-    onRowClick(rowParams, rowIndex) {
-        this.onRowClickEvent.emit({ ...rowParams, index: rowIndex });
-    }
-    onDetailRowClick(rowParams) {
-        this.onDetailRowClickEvent.emit(rowParams);
-    }
-    toggleRow(element) {
-        if (this.tableDetails) {
-            this.elementDetail = this.elementDetail === element ? null : element;
-            if (this.elementDetail) {
-                this.tableDetailColumns.setDetailRowData({
-                    data: element,
-                    setDetailDataSource: this.setTableDetailDataSource.bind(this),
-                });
-            }
-        }
-    }
-    setTableDetailDataSource(rowData) {
-        this.dataSourceDetail = new MatTableDataSource(rowData);
-    }
-    setTableConfig(config) {
-        config.pagination = config?.pagination ?? this.defaultPaginationConfig;
-        this.tableConfig = config;
-        this.columnsTooltipState = config.columns.map((column, index) => ({
-            index,
-            showTooltip: column.showTooltip ?? false,
-        }));
-        this.displayedColumns = sortByOrder(config.columns.filter(column => !column.hidden)).map(column => column.uniqueId ?? column.key);
-    }
-    setTableData(data) {
-        this.sourceData = data;
-        this.tableData = data;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TableComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.DestroyRef }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: TableComponent, isStandalone: true, selector: "ui-table", inputs: { config: "config", data: "data", loading: "loading", applicationTheme: "applicationTheme", tableDetailColumns: "tableDetailColumns", tableDetails: "tableDetails", disableBorderRadius: "disableBorderRadius", isCondensed: "isCondensed", stickyHeader: "stickyHeader", maxHeight: "maxHeight", testId: "testId", ariaLabel: "ariaLabel" }, outputs: { onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent", paginatorChange: "paginatorChange", sortChange: "sortChange" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #tableContainer\n  class=\"table-container\"\n  [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\n  [attr.theme]=\"applicationTheme\"\n>\n  @if (tableConfig?.title) {\n    <div class=\"table-header\">\n      {{ tableConfig.title | sentencecase }}\n      <ng-content select=\"[title-actions]\"></ng-content>\n    </div>\n  }\n  @if (scrollSettings$ | async; as scrollSettings) {\n    <div #table class=\"table-wrapper\" [class.sticky-header]=\"stickyHeader\" [style.--table-max-height]=\"maxHeight\">\n      <table\n        [attr.data-testid]=\"testId ?? 'table-main'\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [tabIndex]=\"0\"\n        class=\"main-table\"\n        [class.condensed]=\"isCondensed\"\n        [class.sort-disabled]=\"loading\"\n        mat-table\n        [dataSource]=\"tableData\"\n        matSort\n        [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\n        [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n        [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n        (matSortChange)=\"onSortChange($event)\"\n        multiTemplateDataRows\n      >\n        @for (column of tableConfig.columns; track trackColumnUniqueId(i, column); let i = $index; let isLast = $last) {\n          @if (isLast && column.isSticky && column.allowSort) {\n            <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\n              <th\n                mat-header-cell\n                [start]=\"column.sortStart ?? 'asc'\"\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n                [style.font-weight]=\"'bold'\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"column.styles?.alignment\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (isLast && column.isSticky && !column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\"\n            >\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n                [style.font-weight]=\"'bold'\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"column.styles?.alignment\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!(isLast && column.isSticky) && column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n            >\n              <th\n                mat-header-cell\n                [start]=\"column.sortStart ?? 'asc'\"\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"column.styles?.alignment\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!(isLast && column.isSticky) && !column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n            >\n              <th\n                mat-header-cell\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"column.styles?.alignment\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n        }\n        <ng-container matColumnDef=\"expandedDetail\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n            @if (dataSourceDetail.data.length) {\n              <div class=\"element-detail\" [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n                <table\n                  data-testid=\"table-detail\"\n                  mat-table\n                  [dataSource]=\"dataSourceDetail\"\n                  [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\n                >\n                  @for (tableColumn of tableDetailColumns.columnDefs; track tableColumn) {\n                    <ng-container [matColumnDef]=\"tableColumn.title ?? ''\">\n                      <th\n                        mat-header-cell\n                        *matHeaderCellDef=\"let element\"\n                        arrowPosition=\"after\"\n                        [ngStyle]=\"{ width: tableColumn.styles?.width }\"\n                        [ngClass]=\"tableColumn.styles?.alignment ? 'th-' + tableColumn.styles?.alignment : ''\"\n                      >\n                        {{ tableColumn.title | uppercase }}\n                      </th>\n                      <td\n                        mat-cell\n                        *matCellDef=\"let element\"\n                        (click)=\"onDetailRowClick(element)\"\n                        [align]=\"tableColumn.styles?.alignment\"\n                        [ngClass]=\"tableColumn.styles?.alignment ? 'td-' + tableColumn.styles?.alignment : ''\"\n                        [ngStyle]=\"{ width: tableColumn.styles?.width }\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn }\"\n                        ></ng-container>\n                      </td>\n                    </ng-container>\n                  }\n                  <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n                  <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay\"></tr>\n                </table>\n              </div>\n            }\n          </td>\n        </ng-container>\n        <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n          <div class=\"align-wrapper\">\n            @switch (tableColumn.type) {\n              @case (DataType.FIELD) {\n                {{ element | dataPropertyGetter: tableColumn.key }}\n              }\n              @case (DataType.FUNCTION) {\n                {{ tableColumn.function?.(element) }}\n              }\n              @case (DataType.RENDERER) {\n                <ng-template [dynamicComponent]=\"$any([tableColumn.renderer, element] | memoizeFunc: callRenderer)\">\n                </ng-template>\n              }\n              @default {\n                {{ element | dataPropertyGetter: tableColumn.key }}\n              }\n            }\n          </div>\n        </ng-template>\n        <tr\n          mat-header-row\n          *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\"\n          [class.is-title-present]=\"tableConfig.title\"\n        ></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: displayedColumns\"\n          [ngClass]=\"{\n            'expanded-row': elementDetail === row,\n            'row-clickable': tableDetails,\n            selected: row?.selected,\n            'last-row': row === tableData[tableData.length - 1] && !elementDetail,\n          }\"\n          (click)=\"toggleRow(row)\"\n        ></tr>\n        @if (tableDetails && tableDetailColumns?.columnDefs?.length) {\n          <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n        }\n        @if (tableConfig.noDataRowTpl) {\n          <tr *matNoDataRow>\n            <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\n          </tr>\n        }\n      </table>\n    </div>\n  }\n\n  @if (!tableConfig?.hidePagination && tableConfig?.pagination) {\n    <ui-paginator\n      [disabled]=\"loading\"\n      [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n      [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\n      [length]=\"tableConfig.pagination?.totalItems ?? 0\"\n      [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\n      [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\n      (paginatorChange)=\"onPaginatorChange($event)\"\n    ></ui-paginator>\n  }\n</div>\n\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\n  @if (!i && tableDetails) {\n    <ui-button\n      [applicationTheme]=\"applicationTheme\"\n      variant=\"icon-button\"\n      [ngClass]=\"{ opened: elementDetail && element === elementDetail }\"\n      [iconName]=\"\n        elementDetail && element === elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\n      \"\n    ></ui-button>\n  }\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\n  <div class=\"header-section\">\n    <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\" class=\"column-title\"\n      >{{ column.title | sentencecase }}\n    </span>\n    @if (column?.showTooltip) {\n      <ui-icon\n        [name]=\"'Help-in-line'\"\n        [matTooltipClass]=\"applicationTheme\"\n        [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title) : '') || ''\"\n      ></ui-icon>\n    }\n  </div>\n</ng-template>\n", styles: ["@import\"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\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #e0e0e0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table.sort-disabled ::ng-deep .mat-sort-header{pointer-events:none;cursor:default}.table-container .table-wrapper table.main-table.sort-disabled ::ng-deep .mat-sort-header .mat-sort-header-container{cursor:default}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table tr.is-title-present th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #e0e0e0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #d3d3d3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #d3d3d3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: SkeletonComponent, selector: "ui-skeleton", inputs: ["count", "theme", "appearance", "isAiTheme", "applicationTheme"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: PaginatorComponent, selector: "ui-paginator", inputs: ["pageSizeOptions", "length", "pageSize", "disabled", "applicationTheme", "currentPage", "testId", "ariaLabel"], outputs: ["paginatorChange"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DataPropertyGetterPipe, name: "dataPropertyGetter" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: SentenceCasePipe, name: "sentencecase" }], 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)')),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-table', 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)')),
-                        ]),
-                    ], imports: [
-                        NgClass,
-                        MatTable,
-                        MatSort,
-                        MatColumnDef,
-                        MatHeaderCellDef,
-                        MatHeaderCell,
-                        MatSortHeader,
-                        NgStyle,
-                        NgTemplateOutlet,
-                        MatCellDef,
-                        MatCell,
-                        SkeletonComponent,
-                        MatHeaderRowDef,
-                        MatHeaderRow,
-                        MatRowDef,
-                        MatRow,
-                        DynamicComponentDirective,
-                        MatNoDataRow,
-                        PaginatorComponent,
-                        ButtonComponent,
-                        EllipseTextDirective,
-                        IconComponent,
-                        MatTooltip,
-                        AsyncPipe,
-                        UpperCasePipe,
-                        DataPropertyGetterPipe,
-                        MemoizeFuncPipe,
-                        SentenceCasePipe,
-                    ], template: "<div\n  #tableContainer\n  class=\"table-container\"\n  [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\n  [attr.theme]=\"applicationTheme\"\n>\n  @if (tableConfig?.title) {\n    <div class=\"table-header\">\n      {{ tableConfig.title | sentencecase }}\n      <ng-content select=\"[title-actions]\"></ng-content>\n    </div>\n  }\n  @if (scrollSettings$ | async; as scrollSettings) {\n    <div #table class=\"table-wrapper\" [class.sticky-header]=\"stickyHeader\" [style.--table-max-height]=\"maxHeight\">\n      <table\n        [attr.data-testid]=\"testId ?? 'table-main'\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [tabIndex]=\"0\"\n        class=\"main-table\"\n        [class.condensed]=\"isCondensed\"\n        [class.sort-disabled]=\"loading\"\n        mat-table\n        [dataSource]=\"tableData\"\n        matSort\n        [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\n        [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n        [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n        (matSortChange)=\"onSortChange($event)\"\n        multiTemplateDataRows\n      >\n        @for (column of tableConfig.columns; track trackColumnUniqueId(i, column); let i = $index; let isLast = $last) {\n          @if (isLast && column.isSticky && column.allowSort) {\n            <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\n              <th\n                mat-header-cell\n                [start]=\"column.sortStart ?? 'asc'\"\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n                [style.font-weight]=\"'bold'\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"column.styles?.alignment\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (isLast && column.isSticky && !column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\"\n            >\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n                [style.font-weight]=\"'bold'\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"column.styles?.alignment\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!(isLast && column.isSticky) && column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n            >\n              <th\n                mat-header-cell\n                [start]=\"column.sortStart ?? 'asc'\"\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"column.styles?.alignment\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!(isLast && column.isSticky) && !column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n            >\n              <th\n                mat-header-cell\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [ngStyle]=\"{ width: column.styles?.width, minWidth: column.styles?.['min-width'] }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + column.styles?.alignment : ''\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"column.styles?.alignment\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + column.styles?.alignment : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n        }\n        <ng-container matColumnDef=\"expandedDetail\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n            @if (dataSourceDetail.data.length) {\n              <div class=\"element-detail\" [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n                <table\n                  data-testid=\"table-detail\"\n                  mat-table\n                  [dataSource]=\"dataSourceDetail\"\n                  [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\n                >\n                  @for (tableColumn of tableDetailColumns.columnDefs; track tableColumn) {\n                    <ng-container [matColumnDef]=\"tableColumn.title ?? ''\">\n                      <th\n                        mat-header-cell\n                        *matHeaderCellDef=\"let element\"\n                        arrowPosition=\"after\"\n                        [ngStyle]=\"{ width: tableColumn.styles?.width }\"\n                        [ngClass]=\"tableColumn.styles?.alignment ? 'th-' + tableColumn.styles?.alignment : ''\"\n                      >\n                        {{ tableColumn.title | uppercase }}\n                      </th>\n                      <td\n                        mat-cell\n                        *matCellDef=\"let element\"\n                        (click)=\"onDetailRowClick(element)\"\n                        [align]=\"tableColumn.styles?.alignment\"\n                        [ngClass]=\"tableColumn.styles?.alignment ? 'td-' + tableColumn.styles?.alignment : ''\"\n                        [ngStyle]=\"{ width: tableColumn.styles?.width }\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn }\"\n                        ></ng-container>\n                      </td>\n                    </ng-container>\n                  }\n                  <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n                  <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay\"></tr>\n                </table>\n              </div>\n            }\n          </td>\n        </ng-container>\n        <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n          <div class=\"align-wrapper\">\n            @switch (tableColumn.type) {\n              @case (DataType.FIELD) {\n                {{ element | dataPropertyGetter: tableColumn.key }}\n              }\n              @case (DataType.FUNCTION) {\n                {{ tableColumn.function?.(element) }}\n              }\n              @case (DataType.RENDERER) {\n                <ng-template [dynamicComponent]=\"$any([tableColumn.renderer, element] | memoizeFunc: callRenderer)\">\n                </ng-template>\n              }\n              @default {\n                {{ element | dataPropertyGetter: tableColumn.key }}\n              }\n            }\n          </div>\n        </ng-template>\n        <tr\n          mat-header-row\n          *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\"\n          [class.is-title-present]=\"tableConfig.title\"\n        ></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: displayedColumns\"\n          [ngClass]=\"{\n            'expanded-row': elementDetail === row,\n            'row-clickable': tableDetails,\n            selected: row?.selected,\n            'last-row': row === tableData[tableData.length - 1] && !elementDetail,\n          }\"\n          (click)=\"toggleRow(row)\"\n        ></tr>\n        @if (tableDetails && tableDetailColumns?.columnDefs?.length) {\n          <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n        }\n        @if (tableConfig.noDataRowTpl) {\n          <tr *matNoDataRow>\n            <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\n          </tr>\n        }\n      </table>\n    </div>\n  }\n\n  @if (!tableConfig?.hidePagination && tableConfig?.pagination) {\n    <ui-paginator\n      [disabled]=\"loading\"\n      [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n      [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\n      [length]=\"tableConfig.pagination?.totalItems ?? 0\"\n      [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\n      [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\n      (paginatorChange)=\"onPaginatorChange($event)\"\n    ></ui-paginator>\n  }\n</div>\n\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\n  @if (!i && tableDetails) {\n    <ui-button\n      [applicationTheme]=\"applicationTheme\"\n      variant=\"icon-button\"\n      [ngClass]=\"{ opened: elementDetail && element === elementDetail }\"\n      [iconName]=\"\n        elementDetail && element === elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\n      \"\n    ></ui-button>\n  }\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\n  <div class=\"header-section\">\n    <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\" class=\"column-title\"\n      >{{ column.title | sentencecase }}\n    </span>\n    @if (column?.showTooltip) {\n      <ui-icon\n        [name]=\"'Help-in-line'\"\n        [matTooltipClass]=\"applicationTheme\"\n        [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title) : '') || ''\"\n      ></ui-icon>\n    }\n  </div>\n</ng-template>\n", styles: ["@import\"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\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #e0e0e0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table.sort-disabled ::ng-deep .mat-sort-header{pointer-events:none;cursor:default}.table-container .table-wrapper table.main-table.sort-disabled ::ng-deep .mat-sort-header .mat-sort-header-container{cursor:default}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table tr.is-title-present th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #e0e0e0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #d3d3d3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #d3d3d3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: i0.DestroyRef }, { type: i1.Observable, decorators: [{
-                    type: Inject,
-                    args: [IS_MOBILE_TOKEN]
-                }] }], propDecorators: { config: [{
-                type: Input,
-                args: [{ required: true }]
-            }], data: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], applicationTheme: [{
-                type: Input
-            }], tableDetailColumns: [{
-                type: Input
-            }], tableDetails: [{
-                type: Input
-            }], disableBorderRadius: [{
-                type: Input
-            }], isCondensed: [{
-                type: Input
-            }], stickyHeader: [{
-                type: Input
-            }], maxHeight: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], onRowClickEvent: [{
-                type: Output
-            }], onDetailRowClickEvent: [{
-                type: Output
-            }], paginatorChange: [{
-                type: Output
-            }], sortChange: [{
-                type: Output
-            }], table: [{
-                type: ViewChild,
-                args: ['table']
-            }] } });
-
-class TableComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: TableComponentModule, imports: [CommonModule,
-            MatTableModule,
-            MatTooltipModule,
-            SkeletonComponent,
-            PaginatorComponentModule,
-            ButtonComponentModule,
-            MatSortModule,
-            IconComponentModule,
-            EllipseTextDirective,
-            DynamicComponentDirective,
-            DataPropertyGetterPipe,
-            MemoizeFuncPipe,
-            TableComponent,
-            SentenceCasePipe], exports: [TableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TableComponentModule, imports: [CommonModule,
-            MatTableModule,
-            MatTooltipModule,
-            SkeletonComponent,
-            PaginatorComponentModule,
-            ButtonComponentModule,
-            MatSortModule,
-            IconComponentModule,
-            TableComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TableComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatTableModule,
-                        MatTooltipModule,
-                        SkeletonComponent,
-                        PaginatorComponentModule,
-                        ButtonComponentModule,
-                        MatSortModule,
-                        IconComponentModule,
-                        EllipseTextDirective,
-                        DynamicComponentDirective,
-                        DataPropertyGetterPipe,
-                        MemoizeFuncPipe,
-                        TableComponent,
-                        SentenceCasePipe,
-                    ],
-                    exports: [TableComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var TableComponent = class TableComponent {
+	constructor(defaultAppTheme, destroyRef, isMobile$) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.destroyRef = destroyRef;
+		this.isMobile$ = isMobile$;
+		this.loading = false;
+		this.applicationTheme = "light";
+		this.tableDetails = false;
+		this.disableBorderRadius = false;
+		this.isCondensed = false;
+		this.stickyHeader = false;
+		this.maxHeight = "576px";
+		this.testId = null;
+		this.ariaLabel = "";
+		this.onRowClickEvent = new EventEmitter();
+		this.onDetailRowClickEvent = new EventEmitter();
+		this.paginatorChange = new EventEmitter();
+		this.sortChange = new EventEmitter();
+		this.columnsTooltipState = [];
+		this.displayedColumns = [];
+		this.columnsDetailToDisplay = [];
+		this.skeletonStyleConfig = {
+			background: "#F6F6F6",
+			"border-radius": "4px",
+			height: "24px"
+		};
+		this.dataSourceDetail = new MatTableDataSource([]);
+		this.DataType = ColumnType;
+		this.scrollSettings$ = new BehaviorSubject({
+			scrollEnd: false,
+			horizontalScroll: false,
+			scrollStart: false
+		});
+		this.defaultPaginationConfig = {
+			currentPage: 0,
+			itemsPerPage: 10,
+			itemsPerPageOptions: [
+				10,
+				25,
+				50
+			],
+			totalItems: 20
+		};
+		this.trackColumnUniqueId = (index, column) => column.uniqueId ?? column.key;
+		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.title ?? "") : [];
+		}
+		if (this.tableConfig?.sortable && this.tableConfig?.sort) this.onSortChange(this.tableConfig.sort, false);
+	}
+	ngAfterViewInit() {
+		this.hasTableScroll();
+		fromEvent(this.table.nativeElement, "scroll").pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.hasTableScroll());
+	}
+	ngOnChanges(changes) {
+		if (changes["config"]?.currentValue) {
+			const config = changes["config"].currentValue;
+			this.setTableConfig(config);
+		}
+		if (changes["data"]?.currentValue) this.setTableData(changes["data"].currentValue);
+	}
+	hasTableScroll() {
+		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]) {
+		return rendererFn ? rendererFn(element) : void 0;
+	}
+	onPaginatorChange(event) {
+		this.paginatorChange.emit(event);
+	}
+	onChangeColumnSize(columnIndex, showTooltip) {
+		this.columnsTooltipState = this.columnsTooltipState.map((column) => {
+			if (column.index === columnIndex) column.showTooltip = showTooltip;
+			return column;
+		});
+	}
+	onSortChange(sortState, emitEvent = true) {
+		if (this.loading) return;
+		if (emitEvent) this.sortChange.emit(sortState);
+		if (this.tableConfig?.sortable) {
+			this.tableData = [...this.tableData.sort((a, b) => {
+				const isAsc = sortState.direction === "asc";
+				return (a[sortState.active] < b[sortState.active] ? -1 : 1) * (isAsc ? 1 : -1);
+			})];
+			if (!sortState.direction) this.tableData = [...this.sourceData];
+		}
+	}
+	onRowClick(rowParams, rowIndex) {
+		this.onRowClickEvent.emit({
+			...rowParams,
+			index: rowIndex
+		});
+	}
+	onDetailRowClick(rowParams) {
+		this.onDetailRowClickEvent.emit(rowParams);
+	}
+	toggleRow(element) {
+		if (this.tableDetails) {
+			this.elementDetail = this.elementDetail === element ? null : element;
+			if (this.elementDetail) this.tableDetailColumns.setDetailRowData({
+				data: element,
+				setDetailDataSource: this.setTableDetailDataSource.bind(this)
+			});
+		}
+	}
+	setTableDetailDataSource(rowData) {
+		this.dataSourceDetail = new MatTableDataSource(rowData);
+	}
+	setTableConfig(config) {
+		config.pagination = config?.pagination ?? this.defaultPaginationConfig;
+		this.tableConfig = config;
+		this.columnsTooltipState = config.columns.map((column, index) => ({
+			index,
+			showTooltip: column.showTooltip ?? false
+		}));
+		this.displayedColumns = sortByOrder(config.columns.filter((column) => !column.hidden)).map((column) => column.uniqueId ?? column.key);
+	}
+	setTableData(data) {
+		this.sourceData = data;
+		this.tableData = data;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TableComponent,
+			deps: [
+				{
+					token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+					optional: true
+				},
+				{ token: i0.DestroyRef },
+				{ token: IS_MOBILE_TOKEN }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: TableComponent,
+			isStandalone: true,
+			selector: "ui-table",
+			inputs: {
+				config: "config",
+				data: "data",
+				loading: "loading",
+				applicationTheme: "applicationTheme",
+				tableDetailColumns: "tableDetailColumns",
+				tableDetails: "tableDetails",
+				disableBorderRadius: "disableBorderRadius",
+				isCondensed: "isCondensed",
+				stickyHeader: "stickyHeader",
+				maxHeight: "maxHeight",
+				testId: "testId",
+				ariaLabel: "ariaLabel"
+			},
+			outputs: {
+				onRowClickEvent: "onRowClickEvent",
+				onDetailRowClickEvent: "onDetailRowClickEvent",
+				paginatorChange: "paginatorChange",
+				sortChange: "sortChange"
+			},
+			viewQueries: [{
+				propertyName: "table",
+				first: true,
+				predicate: ["table"],
+				descendants: true
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<div\n  #tableContainer\n  class=\"table-container\"\n  [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\n  [attr.theme]=\"applicationTheme\"\n>\n  @if (tableConfig?.title) {\n    <div class=\"table-header\">\n      {{ tableConfig.title | sentencecase }}\n      <ng-content select=\"[title-actions]\"></ng-content>\n    </div>\n  }\n  @if (scrollSettings$ | async; as scrollSettings) {\n    <div #table class=\"table-wrapper\" [class.sticky-header]=\"stickyHeader\" [style.--table-max-height]=\"maxHeight\">\n      <table\n        [attr.data-testid]=\"testId ?? 'table-main'\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [tabIndex]=\"0\"\n        class=\"main-table\"\n        [class.condensed]=\"isCondensed\"\n        [class.sort-disabled]=\"loading\"\n        mat-table\n        [dataSource]=\"tableData\"\n        matSort\n        [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\n        [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n        [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n        (matSortChange)=\"onSortChange($event)\"\n        multiTemplateDataRows\n      >\n        @for (column of tableConfig.columns; track trackColumnUniqueId(i, column); let i = $index; let isLast = $last) {\n          @if (isLast && column.isSticky && column.allowSort) {\n            <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\n              <th\n                mat-header-cell\n                [start]=\"column.sortStart ?? 'asc'\"\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [ngStyle]=\"{\n                  width: $safeNavigationMigration(column.styles?.width),\n                  minWidth: $safeNavigationMigration(column.styles?.['min-width']),\n                }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + $safeNavigationMigration(column.styles?.alignment) : ''\"\n                [style.font-weight]=\"'bold'\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"$safeNavigationMigration(column.styles?.alignment)\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + $safeNavigationMigration(column.styles?.alignment) : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (isLast && column.isSticky && !column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\"\n            >\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [ngStyle]=\"{\n                  width: $safeNavigationMigration(column.styles?.width),\n                  minWidth: $safeNavigationMigration(column.styles?.['min-width']),\n                }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + $safeNavigationMigration(column.styles?.alignment) : ''\"\n                [style.font-weight]=\"'bold'\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"$safeNavigationMigration(column.styles?.alignment)\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + $safeNavigationMigration(column.styles?.alignment) : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!(isLast && column.isSticky) && column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n            >\n              <th\n                mat-header-cell\n                [start]=\"column.sortStart ?? 'asc'\"\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [ngStyle]=\"{\n                  width: $safeNavigationMigration(column.styles?.width),\n                  minWidth: $safeNavigationMigration(column.styles?.['min-width']),\n                }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + $safeNavigationMigration(column.styles?.alignment) : ''\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"$safeNavigationMigration(column.styles?.alignment)\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + $safeNavigationMigration(column.styles?.alignment) : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!(isLast && column.isSticky) && !column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n            >\n              <th\n                mat-header-cell\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [ngStyle]=\"{\n                  width: $safeNavigationMigration(column.styles?.width),\n                  minWidth: $safeNavigationMigration(column.styles?.['min-width']),\n                }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + $safeNavigationMigration(column.styles?.alignment) : ''\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"$safeNavigationMigration(column.styles?.alignment)\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + $safeNavigationMigration(column.styles?.alignment) : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n        }\n        <ng-container matColumnDef=\"expandedDetail\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n            @if (dataSourceDetail.data.length) {\n              <div class=\"element-detail\" [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n                <table\n                  data-testid=\"table-detail\"\n                  mat-table\n                  [dataSource]=\"dataSourceDetail\"\n                  [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\n                >\n                  @for (tableColumn of tableDetailColumns.columnDefs; track tableColumn) {\n                    <ng-container [matColumnDef]=\"tableColumn.title ?? ''\">\n                      <th\n                        mat-header-cell\n                        *matHeaderCellDef=\"let element\"\n                        arrowPosition=\"after\"\n                        [ngStyle]=\"{ width: $safeNavigationMigration(tableColumn.styles?.width) }\"\n                        [ngClass]=\"\n                          tableColumn.styles?.alignment\n                            ? 'th-' + $safeNavigationMigration(tableColumn.styles?.alignment)\n                            : ''\n                        \"\n                      >\n                        {{ tableColumn.title | uppercase }}\n                      </th>\n                      <td\n                        mat-cell\n                        *matCellDef=\"let element\"\n                        (click)=\"onDetailRowClick(element)\"\n                        [align]=\"$safeNavigationMigration(tableColumn.styles?.alignment)\"\n                        [ngClass]=\"\n                          tableColumn.styles?.alignment\n                            ? 'td-' + $safeNavigationMigration(tableColumn.styles?.alignment)\n                            : ''\n                        \"\n                        [ngStyle]=\"{ width: $safeNavigationMigration(tableColumn.styles?.width) }\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn }\"\n                        ></ng-container>\n                      </td>\n                    </ng-container>\n                  }\n                  <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n                  <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay\"></tr>\n                </table>\n              </div>\n            }\n          </td>\n        </ng-container>\n        <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n          <div class=\"align-wrapper\">\n            @switch (tableColumn.type) {\n              @case (DataType.FIELD) {\n                {{ element | dataPropertyGetter: tableColumn.key }}\n              }\n              @case (DataType.FUNCTION) {\n                {{ tableColumn.function?.(element) }}\n              }\n              @case (DataType.RENDERER) {\n                <ng-template [dynamicComponent]=\"$any([tableColumn.renderer, element] | memoizeFunc: callRenderer)\">\n                </ng-template>\n              }\n              @default {\n                {{ element | dataPropertyGetter: tableColumn.key }}\n              }\n            }\n          </div>\n        </ng-template>\n        <tr\n          mat-header-row\n          *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\"\n          [class.is-title-present]=\"tableConfig.title\"\n        ></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: displayedColumns\"\n          [ngClass]=\"{\n            'expanded-row': elementDetail === row,\n            'row-clickable': tableDetails,\n            selected: $safeNavigationMigration(row?.selected),\n            'last-row': row === tableData[tableData.length - 1] && !elementDetail,\n          }\"\n          (click)=\"toggleRow(row)\"\n        ></tr>\n        @if (tableDetails && tableDetailColumns?.columnDefs?.length) {\n          <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n        }\n        @if (tableConfig.noDataRowTpl) {\n          <tr *matNoDataRow>\n            <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\n          </tr>\n        }\n      </table>\n    </div>\n  }\n\n  @if (!tableConfig?.hidePagination && tableConfig?.pagination) {\n    <ui-paginator\n      [disabled]=\"loading\"\n      [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n      [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\n      [length]=\"tableConfig.pagination?.totalItems ?? 0\"\n      [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\n      [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\n      (paginatorChange)=\"onPaginatorChange($event)\"\n    ></ui-paginator>\n  }\n</div>\n\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\n  @if (!i && tableDetails) {\n    <ui-button\n      [applicationTheme]=\"applicationTheme\"\n      variant=\"icon-button\"\n      [ngClass]=\"{ opened: elementDetail && element === elementDetail }\"\n      [iconName]=\"\n        elementDetail && element === elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\n      \"\n    ></ui-button>\n  }\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\n  <div class=\"header-section\">\n    <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\" class=\"column-title\"\n      >{{ column.title | sentencecase }}\n    </span>\n    @if (column?.showTooltip) {\n      <ui-icon\n        [name]=\"'Help-in-line'\"\n        [matTooltipClass]=\"applicationTheme\"\n        [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title) : '') || ''\"\n      ></ui-icon>\n    }\n  </div>\n</ng-template>\n",
+			styles: ["@import\"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\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #e0e0e0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table.sort-disabled ::ng-deep .mat-sort-header{pointer-events:none;cursor:default}.table-container .table-wrapper table.main-table.sort-disabled ::ng-deep .mat-sort-header .mat-sort-header-container{cursor:default}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table tr.is-title-present th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #e0e0e0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #d3d3d3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #d3d3d3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "component",
+					type: MatTable,
+					selector: "mat-table, table[mat-table]",
+					exportAs: ["matTable"]
+				},
+				{
+					kind: "directive",
+					type: MatSort,
+					selector: "[matSort]",
+					inputs: [
+						"matSortActive",
+						"matSortStart",
+						"matSortDirection",
+						"matSortDisableClear",
+						"matSortDisabled"
+					],
+					outputs: ["matSortChange"],
+					exportAs: ["matSort"]
+				},
+				{
+					kind: "directive",
+					type: MatColumnDef,
+					selector: "[matColumnDef]",
+					inputs: ["matColumnDef"]
+				},
+				{
+					kind: "directive",
+					type: MatHeaderCellDef,
+					selector: "[matHeaderCellDef]"
+				},
+				{
+					kind: "directive",
+					type: MatHeaderCell,
+					selector: "mat-header-cell, th[mat-header-cell]"
+				},
+				{
+					kind: "component",
+					type: MatSortHeader,
+					selector: "[mat-sort-header]",
+					inputs: [
+						"mat-sort-header",
+						"arrowPosition",
+						"start",
+						"disabled",
+						"sortActionDescription",
+						"disableClear"
+					],
+					exportAs: ["matSortHeader"]
+				},
+				{
+					kind: "directive",
+					type: NgStyle,
+					selector: "[ngStyle]",
+					inputs: ["ngStyle"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatCellDef,
+					selector: "[matCellDef]"
+				},
+				{
+					kind: "directive",
+					type: MatCell,
+					selector: "mat-cell, td[mat-cell]"
+				},
+				{
+					kind: "component",
+					type: SkeletonComponent,
+					selector: "ui-skeleton",
+					inputs: [
+						"count",
+						"theme",
+						"appearance",
+						"isAiTheme",
+						"applicationTheme"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatHeaderRowDef,
+					selector: "[matHeaderRowDef]",
+					inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"]
+				},
+				{
+					kind: "component",
+					type: MatHeaderRow,
+					selector: "mat-header-row, tr[mat-header-row]",
+					exportAs: ["matHeaderRow"]
+				},
+				{
+					kind: "directive",
+					type: MatRowDef,
+					selector: "[matRowDef]",
+					inputs: ["matRowDefColumns", "matRowDefWhen"]
+				},
+				{
+					kind: "component",
+					type: MatRow,
+					selector: "mat-row, tr[mat-row]",
+					exportAs: ["matRow"]
+				},
+				{
+					kind: "directive",
+					type: DynamicComponentDirective,
+					selector: "[dynamicComponent]",
+					inputs: ["dynamicComponent"]
+				},
+				{
+					kind: "directive",
+					type: MatNoDataRow,
+					selector: "ng-template[matNoDataRow]"
+				},
+				{
+					kind: "component",
+					type: PaginatorComponent,
+					selector: "ui-paginator",
+					inputs: [
+						"pageSizeOptions",
+						"length",
+						"pageSize",
+						"disabled",
+						"applicationTheme",
+						"currentPage",
+						"testId",
+						"ariaLabel"
+					],
+					outputs: ["paginatorChange"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "directive",
+					type: EllipseTextDirective,
+					selector: "[uiEllipseText]",
+					inputs: [
+						"isMultiline",
+						"maxDiffPixels",
+						"refresh"
+					],
+					outputs: ["onChangeTextState"]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "directive",
+					type: MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UpperCasePipe,
+					name: "uppercase"
+				},
+				{
+					kind: "pipe",
+					type: DataPropertyGetterPipe,
+					name: "dataPropertyGetter"
+				},
+				{
+					kind: "pipe",
+					type: MemoizeFuncPipe,
+					name: "memoizeFunc"
+				},
+				{
+					kind: "pipe",
+					type: SentenceCasePipe,
+					name: "sentencecase"
+				}
+			],
+			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)"))
+			])],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TableComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-table",
+			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)"))
+			])],
+			imports: [
+				NgClass,
+				MatTable,
+				MatSort,
+				MatColumnDef,
+				MatHeaderCellDef,
+				MatHeaderCell,
+				MatSortHeader,
+				NgStyle,
+				NgTemplateOutlet,
+				MatCellDef,
+				MatCell,
+				SkeletonComponent,
+				MatHeaderRowDef,
+				MatHeaderRow,
+				MatRowDef,
+				MatRow,
+				DynamicComponentDirective,
+				MatNoDataRow,
+				PaginatorComponent,
+				ButtonComponent,
+				EllipseTextDirective,
+				IconComponent,
+				MatTooltip,
+				AsyncPipe,
+				UpperCasePipe,
+				DataPropertyGetterPipe,
+				MemoizeFuncPipe,
+				SentenceCasePipe
+			],
+			template: "<div\n  #tableContainer\n  class=\"table-container\"\n  [ngClass]=\"{ 'without-title': !tableConfig?.title, 'disable-border-radius': disableBorderRadius }\"\n  [attr.theme]=\"applicationTheme\"\n>\n  @if (tableConfig?.title) {\n    <div class=\"table-header\">\n      {{ tableConfig.title | sentencecase }}\n      <ng-content select=\"[title-actions]\"></ng-content>\n    </div>\n  }\n  @if (scrollSettings$ | async; as scrollSettings) {\n    <div #table class=\"table-wrapper\" [class.sticky-header]=\"stickyHeader\" [style.--table-max-height]=\"maxHeight\">\n      <table\n        [attr.data-testid]=\"testId ?? 'table-main'\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [tabIndex]=\"0\"\n        class=\"main-table\"\n        [class.condensed]=\"isCondensed\"\n        [class.sort-disabled]=\"loading\"\n        mat-table\n        [dataSource]=\"tableData\"\n        matSort\n        [matSortStart]=\"tableConfig?.sort?.defaultSortStart ?? 'asc'\"\n        [matSortActive]=\"tableConfig?.sort?.active ?? ''\"\n        [matSortDirection]=\"tableConfig?.sort?.direction ?? ''\"\n        (matSortChange)=\"onSortChange($event)\"\n        multiTemplateDataRows\n      >\n        @for (column of tableConfig.columns; track trackColumnUniqueId(i, column); let i = $index; let isLast = $last) {\n          @if (isLast && column.isSticky && column.allowSort) {\n            <ng-container [matColumnDef]=\"column.uniqueId ?? column.key\" [stickyEnd]=\"!scrollSettings?.scrollEnd\">\n              <th\n                mat-header-cell\n                [start]=\"column.sortStart ?? 'asc'\"\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [ngStyle]=\"{\n                  width: $safeNavigationMigration(column.styles?.width),\n                  minWidth: $safeNavigationMigration(column.styles?.['min-width']),\n                }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + $safeNavigationMigration(column.styles?.alignment) : ''\"\n                [style.font-weight]=\"'bold'\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"$safeNavigationMigration(column.styles?.alignment)\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + $safeNavigationMigration(column.styles?.alignment) : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (isLast && column.isSticky && !column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [stickyEnd]=\"scrollSettings.horizontalScroll ? !scrollSettings.scrollEnd : true\"\n            >\n              <th\n                mat-header-cell\n                *matHeaderCellDef\n                [attr.sortable]=\"column.allowSort ?? false\"\n                [ngStyle]=\"{\n                  width: $safeNavigationMigration(column.styles?.width),\n                  minWidth: $safeNavigationMigration(column.styles?.['min-width']),\n                }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + $safeNavigationMigration(column.styles?.alignment) : ''\"\n                [style.font-weight]=\"'bold'\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"$safeNavigationMigration(column.styles?.alignment)\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + $safeNavigationMigration(column.styles?.alignment) : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!(isLast && column.isSticky) && column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n            >\n              <th\n                mat-header-cell\n                [start]=\"column.sortStart ?? 'asc'\"\n                [mat-sort-header]=\"column.sortHeader ?? column.key\"\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [ngStyle]=\"{\n                  width: $safeNavigationMigration(column.styles?.width),\n                  minWidth: $safeNavigationMigration(column.styles?.['min-width']),\n                }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + $safeNavigationMigration(column.styles?.alignment) : ''\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"$safeNavigationMigration(column.styles?.alignment)\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + $safeNavigationMigration(column.styles?.alignment) : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n          @if (!(isLast && column.isSticky) && !column.allowSort) {\n            <ng-container\n              [matColumnDef]=\"column.uniqueId ?? column.key\"\n              [sticky]=\"(isMobile$ | async) ? false : !scrollSettings.scrollStart && !!column.isSticky\"\n            >\n              <th\n                mat-header-cell\n                [attr.sortable]=\"column.allowSort ?? false\"\n                *matHeaderCellDef\n                [style.font-weight]=\"'bold'\"\n                [ngStyle]=\"{\n                  width: $safeNavigationMigration(column.styles?.width),\n                  minWidth: $safeNavigationMigration(column.styles?.['min-width']),\n                }\"\n                [ngClass]=\"column.styles?.alignment ? 'th-' + $safeNavigationMigration(column.styles?.alignment) : ''\"\n              >\n                @if (column.headerCellTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      column.headerCellTemplate;\n                      context: { $implicit: column.title, column, colIndex: i }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <ng-container\n                    [ngTemplateOutlet]=\"columnHeader\"\n                    [ngTemplateOutletContext]=\"{ i, column }\"\n                  ></ng-container>\n                }\n              </th>\n              <td\n                mat-cell\n                *matCellDef=\"let element; let rowIndex = dataIndex\"\n                [align]=\"$safeNavigationMigration(column.styles?.alignment)\"\n                [ngClass]=\"[column.styles?.alignment ? 'td-' + $safeNavigationMigration(column.styles?.alignment) : '']\"\n                (click)=\"\n                  onRowClick(element, rowIndex); column?.rowCellTemplateClick ? column!.rowCellTemplateClick?.() : ''\n                \"\n              >\n                @if (loading) {\n                  <ui-skeleton\n                    class=\"table-skeleton-loader\"\n                    [count]=\"1\"\n                    [theme]=\"skeletonStyleConfig\"\n                    [appearance]=\"'line'\"\n                  ></ui-skeleton>\n                } @else {\n                  <div class=\"row-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"expandButton\"\n                      [ngTemplateOutletContext]=\"{ index: i, element }\"\n                    ></ng-container>\n                    @if (column?.type) {\n                      <ng-container\n                        *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn: column }\"\n                      ></ng-container>\n                    } @else {\n                      @if (column.rowCellTemplate) {\n                        <ng-container\n                          *ngTemplateOutlet=\"column.rowCellTemplate; context: { $implicit: element, rowIndex }\"\n                        ></ng-container>\n                      } @else {\n                        <span\n                          [style.font-weight]=\"column.bold ? 'bold' : 'normal'\"\n                          [style.font-size]=\"column.fontSize ?? '14px'\"\n                          >{{ element | dataPropertyGetter: column.key }}</span\n                        >\n                      }\n                    }\n                  </div>\n                }\n              </td>\n            </ng-container>\n          }\n        }\n        <ng-container matColumnDef=\"expandedDetail\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\n            @if (dataSourceDetail.data.length) {\n              <div class=\"element-detail\" [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n                <table\n                  data-testid=\"table-detail\"\n                  mat-table\n                  [dataSource]=\"dataSourceDetail\"\n                  [ngClass]=\"{ 'hide-borders': element === tableData[tableData.length - 1] }\"\n                >\n                  @for (tableColumn of tableDetailColumns.columnDefs; track tableColumn) {\n                    <ng-container [matColumnDef]=\"tableColumn.title ?? ''\">\n                      <th\n                        mat-header-cell\n                        *matHeaderCellDef=\"let element\"\n                        arrowPosition=\"after\"\n                        [ngStyle]=\"{ width: $safeNavigationMigration(tableColumn.styles?.width) }\"\n                        [ngClass]=\"\n                          tableColumn.styles?.alignment\n                            ? 'th-' + $safeNavigationMigration(tableColumn.styles?.alignment)\n                            : ''\n                        \"\n                      >\n                        {{ tableColumn.title | uppercase }}\n                      </th>\n                      <td\n                        mat-cell\n                        *matCellDef=\"let element\"\n                        (click)=\"onDetailRowClick(element)\"\n                        [align]=\"$safeNavigationMigration(tableColumn.styles?.alignment)\"\n                        [ngClass]=\"\n                          tableColumn.styles?.alignment\n                            ? 'td-' + $safeNavigationMigration(tableColumn.styles?.alignment)\n                            : ''\n                        \"\n                        [ngStyle]=\"{ width: $safeNavigationMigration(tableColumn.styles?.width) }\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"tableDataTpl; context: { element, tableColumn }\"\n                        ></ng-container>\n                      </td>\n                    </ng-container>\n                  }\n                  <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n                  <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay\"></tr>\n                </table>\n              </div>\n            }\n          </td>\n        </ng-container>\n        <ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n          <div class=\"align-wrapper\">\n            @switch (tableColumn.type) {\n              @case (DataType.FIELD) {\n                {{ element | dataPropertyGetter: tableColumn.key }}\n              }\n              @case (DataType.FUNCTION) {\n                {{ tableColumn.function?.(element) }}\n              }\n              @case (DataType.RENDERER) {\n                <ng-template [dynamicComponent]=\"$any([tableColumn.renderer, element] | memoizeFunc: callRenderer)\">\n                </ng-template>\n              }\n              @default {\n                {{ element | dataPropertyGetter: tableColumn.key }}\n              }\n            }\n          </div>\n        </ng-template>\n        <tr\n          mat-header-row\n          *matHeaderRowDef=\"displayedColumns; sticky: stickyHeader\"\n          [class.is-title-present]=\"tableConfig.title\"\n        ></tr>\n        <tr\n          mat-row\n          *matRowDef=\"let row; columns: displayedColumns\"\n          [ngClass]=\"{\n            'expanded-row': elementDetail === row,\n            'row-clickable': tableDetails,\n            selected: $safeNavigationMigration(row?.selected),\n            'last-row': row === tableData[tableData.length - 1] && !elementDetail,\n          }\"\n          (click)=\"toggleRow(row)\"\n        ></tr>\n        @if (tableDetails && tableDetailColumns?.columnDefs?.length) {\n          <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n        }\n        @if (tableConfig.noDataRowTpl) {\n          <tr *matNoDataRow>\n            <ng-container *ngTemplateOutlet=\"tableConfig.noDataRowTpl\"></ng-container>\n          </tr>\n        }\n      </table>\n    </div>\n  }\n\n  @if (!tableConfig?.hidePagination && tableConfig?.pagination) {\n    <ui-paginator\n      [disabled]=\"loading\"\n      [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n      [pageSize]=\"tableConfig.pagination?.itemsPerPage ?? 25\"\n      [length]=\"tableConfig.pagination?.totalItems ?? 0\"\n      [currentPage]=\"tableConfig.pagination?.currentPage ?? 0\"\n      [pageSizeOptions]=\"tableConfig.pagination?.itemsPerPageOptions ?? [10, 25, 50]\"\n      (paginatorChange)=\"onPaginatorChange($event)\"\n    ></ui-paginator>\n  }\n</div>\n\n<ng-template #expandButton let-i=\"index\" let-element=\"element\">\n  @if (!i && tableDetails) {\n    <ui-button\n      [applicationTheme]=\"applicationTheme\"\n      variant=\"icon-button\"\n      [ngClass]=\"{ opened: elementDetail && element === elementDetail }\"\n      [iconName]=\"\n        elementDetail && element === elementDetail ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\n      \"\n    ></ui-button>\n  }\n</ng-template>\n\n<ng-template #columnHeader let-column=\"column\" let-i=\"i\">\n  <div class=\"header-section\">\n    <span uiEllipseText (onChangeTextState)=\"onChangeColumnSize(i, $event)\" class=\"column-title\"\n      >{{ column.title | sentencecase }}\n    </span>\n    @if (column?.showTooltip) {\n      <ui-icon\n        [name]=\"'Help-in-line'\"\n        [matTooltipClass]=\"applicationTheme\"\n        [matTooltip]=\"(column?.showTooltip ? (column?.tooltip ? column.tooltip : column.title) : '') || ''\"\n      ></ui-icon>\n    }\n  </div>\n</ng-template>\n",
+			styles: ["@import\"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\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host-context(.without-table-border) .table-container{border:none}.flex-left,.table-container .table-header{display:flex;justify-content:flex-start;align-items:center}.table-container{--mat-table-background-color: #ffffff;overflow:hidden;border:1px #e0e0e0 solid;border-radius:8px}.table-container ::ng-deep .mat-sort-header-arrow{color:#000}.table-container .table-header{min-height:56px;padding:8px;background:#fff;line-height:24px;font-size:16px;font-weight:700;text-transform:uppercase;display:flex;justify-content:space-between}.table-container .table-wrapper{max-width:100%;overflow:auto}.table-container .table-wrapper.sticky-header{max-height:var(--table-max-height);overflow-y:auto}.table-container .table-wrapper table.main-table{width:100%;box-shadow:unset}.table-container .table-wrapper table.main-table.sort-disabled ::ng-deep .mat-sort-header{pointer-events:none;cursor:default}.table-container .table-wrapper table.main-table.sort-disabled ::ng-deep .mat-sort-header .mat-sort-header-container{cursor:default}.table-container .table-wrapper table.main-table ::ng-deep .mat-sort-header-arrow{margin-left:8px}.table-container .table-wrapper table.main-table .mdc-data-table__cell,.table-container .table-wrapper table.main-table .mdc-data-table__header-cell{padding:8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:not(:first-child):not(:last-child),.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:not(:first-child):not(:last-child){padding:8px 12px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:first-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:first-child{padding:8px 12px 8px 24px}.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-row .mdc-data-table__header-cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__cell:last-child,.table-container .table-wrapper table.main-table.condensed .mat-mdc-header-row .mdc-data-table__header-cell:last-child{padding:8px 24px 8px 12px}.table-container .table-wrapper table.main-table th{font-size:14px;line-height:16px;text-transform:uppercase}.table-container .table-wrapper table.main-table tr.is-title-present th.mat-mdc-header-cell.mdc-data-table__header-cell{border-top:1px solid #e0e0e0}.table-container .table-wrapper table.main-table td{font-size:14px;line-height:20px}.table-container .table-wrapper table.main-table td .row-value{display:flex;align-items:center;gap:16px}.table-container .table-wrapper table.main-table td .row-value ui-icon ::ng-deep mat-icon{transition:all .3s!important;font-size:24px}.table-container .table-wrapper table.main-table td .row-value ui-icon.opened ::ng-deep mat-icon{transform:rotate(180deg)}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader{display:flex;justify-content:center;align-items:center;line-height:unset}.table-container .table-wrapper table.main-table td ::ng-deep .table-skeleton-loader ngx-skeleton-loader .skeleton-loader{margin-bottom:0}.table-container .table-wrapper table.main-table ::ng-deep thead{background:#f6f6f6!important}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #00000014}.table-container .table-wrapper table.main-table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #00000014}.table-container .header-section{display:flex;gap:4px;align-items:center}.table-container .header-section .column-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;max-width:fit-content;font-weight:700}.table-container.without-title table{border:unset!important}.table-container.disable-border-radius{border-radius:0!important}.table-container ::ng-deep .mat-mdc-paginator-container{padding:0 24px}.table-container[theme=dark] tr.selected,.table-container[theme=light] tr.selected{background:#f4f4f4!important}.table-container[theme=dark],.table-container[theme=light]{border-radius:10px}.table-container[theme=dark] .table-header,.table-container[theme=light] .table-header{padding:8px 24px;text-transform:none}.table-container[theme=dark] .table-wrapper table th,.table-container[theme=light] .table-wrapper table th{text-transform:none}.table-container[theme=dark] .table-wrapper table td,.table-container[theme=light] .table-wrapper table td{transition:border .3s}.table-container[theme=dark] .table-wrapper table tr.last-row td,.table-container[theme=light] .table-wrapper table tr.last-row td{--mat-table-row-item-outline-color: rgb(0, 0, 0, 0)}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-right,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-right{box-shadow:0 8px 24px 4px #24242414!important}.table-container[theme=dark] .table-wrapper table .mat-mdc-table-sticky-border-elem-left,.table-container[theme=light] .table-wrapper table .mat-mdc-table-sticky-border-elem-left{box-shadow:24px 8px 24px #24242414!important}.table-container[theme=dark] .table-wrapper table ::ng-deep thead,.table-container[theme=light] .table-wrapper table ::ng-deep thead{background-color:#fff!important}.table-container[theme=dark] .table-wrapper table ::ng-deep :not(thead) tr:hover,.table-container[theme=light] .table-wrapper table ::ng-deep :not(thead) tr:hover{background-color:#fff2fc}.table-container ::ng-deep tr.detail-row{height:0}.table-container ::ng-deep tr.detail-row td{border:unset!important}.table-container ::ng-deep .mat-column-expandedDetail{padding:0!important}.table-container ::ng-deep .element-detail{overflow:hidden!important;display:flex!important}.table-container ::ng-deep .element-detail table{background-color:#fff;border-bottom:1px solid #d3d3d3;transition:border .3s}.table-container ::ng-deep .element-detail table.hide-borders{border-bottom:unset}.table-container ::ng-deep .element-detail table .mat-mdc-header-row{visibility:collapse}.table-container ::ng-deep .element-detail table .mat-mdc-cell{border-width:0}.table-container ::ng-deep .element-detail table td:first-child{padding-left:64px!important}table th.th-right{text-align:right}table th.th-right ::ng-deep .header-section{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .header-section{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .header-section{justify-content:center}table td.td-right{text-align:right}table td.td-right div{justify-content:end}table td.td-left{text-align:left}table td.td-left div{justify-content:start}table td.td-center{text-align:center}table td.td-center div{justify-content:center}::ng-deep table:not(.main-table) thead{display:none!important}ui-paginator{width:100%;display:flex;justify-content:flex-end;border-top:1px solid #d3d3d3}ui-paginator ::ng-deep .mat-mdc-paginator{width:100%}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+			}]
+		},
+		{ type: i0.DestroyRef },
+		{
+			type: i1.Observable,
+			decorators: [{
+				type: Inject,
+				args: [IS_MOBILE_TOKEN]
+			}]
+		}
+	],
+	propDecorators: {
+		config: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		data: [{ type: Input }],
+		loading: [{ type: Input }],
+		applicationTheme: [{ type: Input }],
+		tableDetailColumns: [{ type: Input }],
+		tableDetails: [{ type: Input }],
+		disableBorderRadius: [{ type: Input }],
+		isCondensed: [{ type: Input }],
+		stickyHeader: [{ type: Input }],
+		maxHeight: [{ type: Input }],
+		testId: [{ type: Input }],
+		ariaLabel: [{ type: Input }],
+		onRowClickEvent: [{ type: Output }],
+		onDetailRowClickEvent: [{ type: Output }],
+		paginatorChange: [{ type: Output }],
+		sortChange: [{ type: Output }],
+		table: [{
+			type: ViewChild,
+			args: ["table"]
+		}]
+	}
+});
+var TableComponentModule = class TableComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TableComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TableComponentModule,
+			imports: [
+				CommonModule,
+				MatTableModule,
+				MatTooltipModule,
+				SkeletonComponent,
+				PaginatorComponentModule,
+				ButtonComponentModule,
+				MatSortModule,
+				IconComponentModule,
+				EllipseTextDirective,
+				DynamicComponentDirective,
+				DataPropertyGetterPipe,
+				MemoizeFuncPipe,
+				TableComponent,
+				SentenceCasePipe
+			],
+			exports: [TableComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TableComponentModule,
+			imports: [
+				CommonModule,
+				MatTableModule,
+				MatTooltipModule,
+				SkeletonComponent,
+				PaginatorComponentModule,
+				ButtonComponentModule,
+				MatSortModule,
+				IconComponentModule,
+				TableComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TableComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				MatTableModule,
+				MatTooltipModule,
+				SkeletonComponent,
+				PaginatorComponentModule,
+				ButtonComponentModule,
+				MatSortModule,
+				IconComponentModule,
+				EllipseTextDirective,
+				DynamicComponentDirective,
+				DataPropertyGetterPipe,
+				MemoizeFuncPipe,
+				TableComponent,
+				SentenceCasePipe
+			],
+			exports: [TableComponent]
+		}]
+	}]
+});
 export { ColumnAlignment, ColumnAlignmentEnum, ColumnType, ColumnTypeEnum, SentenceCasePipe, TableComponent, TableComponentModule, sortByOrder };
-//# sourceMappingURL=testgorilla-tgo-ui-components-table.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-table.mjs.map