@dmytrokhylko/tb-cdu-ui 0.2.5 → 0.4.0

package/README.md

@@ -5,7 +5,7 @@ ThingsBoard Custom Development Unit shared UI components library — base table,
 ## Installation
 
 ```bash
-npm install @dmytrokhylko/tb-cdu-ui
+yarn add @dmytrokhylko/tb-cdu-ui
 ```
 
 ## Package structure
@@ -30,6 +30,12 @@ import { BaseTableComponent } from '@dmytrokhylko/tb-cdu-ui/core';
 | `LoadingOverlayComponent` | `<tb-cd-loading-overlay>` | — |
 | `ActionButtonComponent` | `<tb-cd-action-button>` | — |
 
+## Widgets
+
+| Widget | Selector | Docs |
+|---|---|---|
+| `TbCdEntitiesTableComponent` | `<tb-cd-entities-table>` | [widgets/entities-table](./widgets/entities-table/README.md) |
+
 ## Adapters
 
 | Adapter | Description |
@@ -72,19 +78,22 @@ Secondary entry points are discovered automatically by ng-packagr from directori
 ## Development
 
 ```bash
-npm ci                  # install dependencies
-npm run build           # production build → dist/tb-cdu-ui/
-npm run watch           # development build with watch
-npm run format          # format source files with Prettier
-npm run format:check    # check formatting without writing
-npm test                # run unit tests
+yarn install            # install dependencies
+yarn build              # production build → dist/tb-cdu-ui/
+yarn watch              # development build with watch
+yarn format             # format source files with Prettier
+yarn format:check       # check formatting without writing
+yarn test               # run unit tests
+yarn lint               # lint source files
 ```
 
 ### Publishing
 
-Releases are published automatically to npm when a `v*` tag is pushed to `master`:
+Bump the version and publish in one step — CI handles the rest:
 
 ```bash
-git tag v1.0.0
+yarn version --patch    # or --minor / --major
 git push origin master --tags
 ```
+
+Pushing a `v*` tag triggers the GitHub Actions workflow which builds and publishes to npm automatically.

package/core/index.d.ts

@@ -4,7 +4,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { FormControl } from '@angular/forms';
 import { PageEvent } from '@angular/material/paginator';
 import { SortDirection, Sort } from '@angular/material/sort';
-import { Direction, PageLink, DataKeyType, EntityFilter, widgetType, KeyFilter, EntityId, DataEntry } from '@shared/public-api';
+import { DataEntry, Direction, PageLink, DataKeyType, EntityFilter, widgetType, KeyFilter, EntityId } from '@shared/public-api';
 import { EntityColumn } from '@home/components/public-api';
 import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
 import { IWidgetSubscription } from '@core/public-api';
@@ -23,15 +23,6 @@ declare class ActionButtonComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionButtonComponent, "tb-cd-action-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
 }
 
-interface EntityColumnExtended<T = unknown> extends EntityColumn {
-    nullDisplayValue?: string;
-    headerStyle?: Record<string, string>;
-    cellTemplate?: TemplateRef<{
-        $implicit: unknown;
-        entity: T;
-    }>;
-}
-
 declare enum LoadingPhase {
     IDLE = "idle",
     GENERATING = "generating",
@@ -56,6 +47,23 @@ declare const getLoadingState: {
     fetching: () => LoadingState;
 };
 
+interface TbCdEntityColumn<T = unknown> extends EntityColumn {
+    nullDisplayValue?: string;
+    headerStyle?: Record<string, string>;
+    cellTemplate?: TemplateRef<{
+        $implicit: unknown;
+        entity: T;
+    }>;
+    parseValue?: (dataPoint: DataEntry | null) => unknown;
+}
+
+interface TableRowMenuItem<T> {
+    id: string;
+    icon: string;
+    label?: string;
+    disabled?: (entity: T) => boolean;
+    handler: (entity: T) => void;
+}
 interface TableRowAction<T> {
     id: string;
     icon: string;
@@ -63,6 +71,14 @@ interface TableRowAction<T> {
     visible?: (entity: T) => boolean;
     disabled?: (entity: T) => boolean;
     handler?: (entity: T) => void;
+    menuItems?: TableRowMenuItem<T>[];
+}
+interface TableHeaderMenuAction {
+    id: string;
+    icon: string;
+    label?: string;
+    disabled?: () => boolean;
+    handler?: () => void;
 }
 interface TableHeaderAction {
     id: string;
@@ -71,6 +87,14 @@ interface TableHeaderAction {
     visible?: () => boolean;
     disabled?: () => boolean;
     handler?: () => void;
+    menuItems?: TableHeaderMenuAction[];
+}
+interface TableBulkMenuItem<T> {
+    id: string;
+    icon: string;
+    label?: string;
+    disabled?: (selected: T[]) => boolean;
+    handler: (selected: T[]) => void;
 }
 interface TableBulkAction<T> {
     id: string;
@@ -79,6 +103,7 @@ interface TableBulkAction<T> {
     visible?: () => boolean;
     disabled?: (selected: T[]) => boolean;
     handler?: (selected: T[]) => void;
+    menuItems?: TableBulkMenuItem<T>[];
 }
 interface TableState {
     pageIndex: number;
@@ -90,11 +115,16 @@ interface TableState {
 
 declare class BaseTableComponent<T> implements AfterViewInit {
     dataSource: _angular_core.InputSignal<T[]>;
-    columns: _angular_core.InputSignal<EntityColumnExtended<T>[]>;
+    columns: _angular_core.InputSignal<TbCdEntityColumn<T>[]>;
     displayedColumns: _angular_core.InputSignal<string[]>;
     loadingState: _angular_core.InputSignal<LoadingState>;
     widgetTitle: _angular_core.InputSignal<string>;
     noDataMessage: _angular_core.InputSignal<string>;
+    titleStyle: _angular_core.InputSignal<Record<string, string>>;
+    columnHeaderStyle: _angular_core.InputSignal<Record<string, string>>;
+    backgroundColor: _angular_core.InputSignal<string | null>;
+    color: _angular_core.InputSignal<string | null>;
+    readonly tableColorStyle: _angular_core.Signal<Record<string, string>>;
     totalElements: _angular_core.InputSignal<number>;
     pageSizeOptions: _angular_core.InputSignal<number[]>;
     selectionEnabled: _angular_core.InputSignal<boolean>;
@@ -114,7 +144,7 @@ declare class BaseTableComponent<T> implements AfterViewInit {
     cellClick: _angular_core.OutputEmitterRef<{
         event: Event;
         entity: T;
-        column: EntityColumnExtended<T>;
+        column: TbCdEntityColumn<T>;
     }>;
     actionClick: _angular_core.OutputEmitterRef<{
         event: Event;
@@ -151,6 +181,11 @@ declare class BaseTableComponent<T> implements AfterViewInit {
     protected readonly LoadingPhase: typeof LoadingPhase;
     private injector;
     private destroyRef;
+    private document;
+    private menuStyleEl;
+    readonly paginatorSelectConfig: {
+        panelClass: string;
+    };
     constructor();
     ngAfterViewInit(): void;
     onPaginate(event: PageEvent): void;
@@ -162,7 +197,7 @@ declare class BaseTableComponent<T> implements AfterViewInit {
     masterToggle(): void;
     toggleRow(entity: T): void;
     clearSelection(): void;
-    onCellClick(event: Event, entity: T, column: EntityColumnExtended<T>): void;
+    onCellClick(event: Event, entity: T, column: TbCdEntityColumn<T>): void;
     onRowClick(event: MouseEvent, entity: T): void;
     isExpanded(entity: T): boolean;
     readonly isExpandedRow: (_: number, row: T) => boolean;
@@ -175,9 +210,10 @@ declare class BaseTableComponent<T> implements AfterViewInit {
     onActionClick(event: Event, entity: T, action: TableRowAction<T>): void;
     onHeaderActionClick(event: Event, action: TableHeaderAction): void;
     onBulkActionClick(event: Event, action: TableBulkAction<T>): void;
+    private updateMenuOverlayStyles;
     private clone;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseTableComponent<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseTableComponent<any>, "tb-cd-base-table", never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": true; "isSignal": true; }; "loadingState": { "alias": "loadingState"; "required": true; "isSignal": true; }; "widgetTitle": { "alias": "widgetTitle"; "required": false; "isSignal": true; }; "noDataMessage": { "alias": "noDataMessage"; "required": false; "isSignal": true; }; "totalElements": { "alias": "totalElements"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "selectionEnabled": { "alias": "selectionEnabled"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "headerActions": { "alias": "headerActions"; "required": false; "isSignal": true; }; "bulkActions": { "alias": "bulkActions"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expandedRowTemplate": { "alias": "expandedRowTemplate"; "required": false; "isSignal": true; }; "expansionTrackBy": { "alias": "expansionTrackBy"; "required": false; "isSignal": true; }; "selectionTrackBy": { "alias": "selectionTrackBy"; "required": false; "isSignal": true; }; "clearSelectionTrigger": { "alias": "clearSelectionTrigger"; "required": false; "isSignal": true; }; "pageLink": { "alias": "pageLink"; "required": false; "isSignal": true; }; }, { "pageLink": "pageLinkChange"; "rowClick": "rowClick"; "cellClick": "cellClick"; "actionClick": "actionClick"; "headerActionClick": "headerActionClick"; "bulkActionClick": "bulkActionClick"; "selectionChange": "selectionChange"; "expansionChange": "expansionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BaseTableComponent<any>, "tb-cd-base-table", never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "displayedColumns": { "alias": "displayedColumns"; "required": true; "isSignal": true; }; "loadingState": { "alias": "loadingState"; "required": true; "isSignal": true; }; "widgetTitle": { "alias": "widgetTitle"; "required": false; "isSignal": true; }; "noDataMessage": { "alias": "noDataMessage"; "required": false; "isSignal": true; }; "titleStyle": { "alias": "titleStyle"; "required": false; "isSignal": true; }; "columnHeaderStyle": { "alias": "columnHeaderStyle"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "totalElements": { "alias": "totalElements"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "selectionEnabled": { "alias": "selectionEnabled"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "headerActions": { "alias": "headerActions"; "required": false; "isSignal": true; }; "bulkActions": { "alias": "bulkActions"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expandedRowTemplate": { "alias": "expandedRowTemplate"; "required": false; "isSignal": true; }; "expansionTrackBy": { "alias": "expansionTrackBy"; "required": false; "isSignal": true; }; "selectionTrackBy": { "alias": "selectionTrackBy"; "required": false; "isSignal": true; }; "clearSelectionTrigger": { "alias": "clearSelectionTrigger"; "required": false; "isSignal": true; }; "pageLink": { "alias": "pageLink"; "required": false; "isSignal": true; }; }, { "pageLink": "pageLinkChange"; "rowClick": "rowClick"; "cellClick": "cellClick"; "actionClick": "actionClick"; "headerActionClick": "headerActionClick"; "bulkActionClick": "bulkActionClick"; "selectionChange": "selectionChange"; "expansionChange": "expansionChange"; }, never, never, true, never>;
 }
 
 declare class LoadingOverlayComponent {
@@ -251,4 +287,4 @@ declare function collectSubscriptionData<T extends {
 }>(subscription: IWidgetSubscription, valueTransformer?: (keyName: string, dataPoint: DataEntry | null) => unknown): T[];
 
 export { ActionButtonComponent, BaseTableComponent, DEFAULT_PAGE_LINK_PAGE_SIZE, DEFAULT_PAGE_SIZES, LoadingOverlayComponent, LoadingPhase, TbSubscriptionDatasource, TbSubscriptionDatasourcePaginated, collectSubscriptionData, getLoadingState };
-export type { EntityColumnExtended, LoadingState, SubscriptionDataKey, TableBulkAction, TableHeaderAction, TableRowAction, TableState, TbSubscriptionDatasourceConfig, TbSubscriptionDatasourcePaginatedConfig };
+export type { LoadingState, SubscriptionDataKey, TableBulkAction, TableBulkMenuItem, TableHeaderAction, TableHeaderMenuAction, TableRowAction, TableRowMenuItem, TableState, TbCdEntityColumn, TbSubscriptionDatasourceConfig, TbSubscriptionDatasourcePaginatedConfig };

package/fesm2022/dmytrokhylko-tb-cdu-ui-core.mjs

@@ -8,7 +8,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import * as i6 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import * as i1$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i14 from '@angular/forms';
 import { FormControl } from '@angular/forms';
@@ -60,13 +60,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
             args: [{ standalone: true, imports: [MatButtonModule, MatIconModule], selector: 'tb-cd-action-button', template: "<button\n  mat-flat-button\n  class=\"action-button\"\n  [style.--mat-button-filled-container-color]=\"resolvedBackgroundColor()\"\n  [style.--mat-button-filled-label-text-color]=\"resolvedTextColor()\"\n  (click)=\"handleClick()\">\n  @if (icon()) {\n    <mat-icon>{{ icon() }}</mat-icon>\n  }\n  @if (label()) {\n    <span class=\"action-button__label\">{{ label() }}</span>\n  }\n</button>\n", styles: [":host{display:inline-flex}.action-button{display:inline-flex;align-items:center;gap:6px;border-radius:4px;min-width:unset}.action-button mat-icon{font-size:18px;width:18px;height:18px;flex-shrink:0}.action-button__label{font-size:14px;font-weight:500;line-height:1}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
-const DEFAULT_PAGE_LINK_PAGE_SIZE = 20;
-const DEFAULT_PAGE_SIZES = [
-    DEFAULT_PAGE_LINK_PAGE_SIZE,
-    DEFAULT_PAGE_LINK_PAGE_SIZE * 5,
-    DEFAULT_PAGE_LINK_PAGE_SIZE * 10,
-];
-
 var LoadingPhase;
 (function (LoadingPhase) {
     LoadingPhase["IDLE"] = "idle";
@@ -121,6 +114,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
             args: [{ standalone: true, imports: [TranslateModule, MatProgressSpinnerModule], selector: 'tb-cd-loading-overlay', template: "<div class=\"loading-overlay\">\n  <mat-spinner diameter=\"50\" [mode]=\"spinnerMode()\" [value]=\"percentage()\"></mat-spinner>\n  <span class=\"loading-text\">\n    @switch (state().phase) {\n      @case (LoadingPhase.POLLING) {\n        @if (spinnerMode() === 'determinate') {\n          {{ processingDeterminate() | translate }} {{ pollingProcessed() }}/{{ pollingTotal() }}\n        } @else {\n          {{ processingIndeterminate() | translate }}\n        }\n      }\n      @case (LoadingPhase.GENERATING) {\n        {{ generating() | translate }}\n      }\n      @case (LoadingPhase.FETCHING) {\n        {{ fetching() | translate }}\n      }\n    }\n  </span>\n</div>\n", styles: [".loading-overlay{position:absolute;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#ffffffb3;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.loading-text{margin-top:1rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}\n"] }]
         }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], generating: [{ type: i0.Input, args: [{ isSignal: true, alias: "generating", required: false }] }], processingDeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "processingDeterminate", required: false }] }], processingIndeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "processingIndeterminate", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }] } });
 
+const DEFAULT_PAGE_LINK_PAGE_SIZE = 20;
+const DEFAULT_PAGE_SIZES = [
+    DEFAULT_PAGE_LINK_PAGE_SIZE,
+    DEFAULT_PAGE_LINK_PAGE_SIZE * 5,
+    DEFAULT_PAGE_LINK_PAGE_SIZE * 10,
+];
+
 class BaseTableComponent {
     dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
@@ -128,6 +128,20 @@ class BaseTableComponent {
     loadingState = input.required(...(ngDevMode ? [{ debugName: "loadingState" }] : []));
     widgetTitle = input('widget.widget-title', ...(ngDevMode ? [{ debugName: "widgetTitle" }] : []));
     noDataMessage = input('entity.no-data', ...(ngDevMode ? [{ debugName: "noDataMessage" }] : []));
+    titleStyle = input({}, ...(ngDevMode ? [{ debugName: "titleStyle" }] : []));
+    columnHeaderStyle = input({}, ...(ngDevMode ? [{ debugName: "columnHeaderStyle" }] : []));
+    backgroundColor = input(null, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
+    color = input(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
+    tableColorStyle = computed(() => {
+        const bg = this.backgroundColor();
+        const fg = this.color();
+        const style = {};
+        if (bg)
+            style['--tb-cdu-bg-color'] = bg;
+        if (fg)
+            style['--tb-cdu-fg-color'] = fg;
+        return style;
+    }, ...(ngDevMode ? [{ debugName: "tableColorStyle" }] : []));
     totalElements = input(0, ...(ngDevMode ? [{ debugName: "totalElements" }] : []));
     pageSizeOptions = input(DEFAULT_PAGE_SIZES, ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
     selectionEnabled = input(false, ...(ngDevMode ? [{ debugName: "selectionEnabled" }] : []));
@@ -184,6 +198,9 @@ class BaseTableComponent {
     LoadingPhase = LoadingPhase;
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT);
+    menuStyleEl = null;
+    paginatorSelectConfig = { panelClass: 'tb-cdu-paginator-select' };
     constructor() {
         effect(() => {
             const data = this.dataSource();
@@ -205,6 +222,12 @@ class BaseTableComponent {
             this.selectionCount.set(this.selection.selected.length);
             this.selectionChange.emit(this.selection.selected);
         });
+        effect(() => {
+            const bg = this.backgroundColor();
+            const fg = this.color();
+            this.updateMenuOverlayStyles(bg, fg);
+        });
+        this.destroyRef.onDestroy(() => this.menuStyleEl?.remove());
     }
     ngAfterViewInit() {
         if (this.pageLink().textSearch) {
@@ -389,16 +412,36 @@ class BaseTableComponent {
             this.bulkActionClick.emit({ event, action, selected: this.selection.selected });
         }
     }
+    updateMenuOverlayStyles(bg, fg) {
+        if (!bg && !fg) {
+            this.menuStyleEl?.remove();
+            this.menuStyleEl = null;
+            return;
+        }
+        if (!this.menuStyleEl) {
+            this.menuStyleEl = this.document.createElement('style');
+            this.document.head.appendChild(this.menuStyleEl);
+        }
+        const bgRule = bg ? `background-color: ${bg} !important;` : '';
+        const fgRule = fg ? `color: ${fg} !important;` : '';
+        this.menuStyleEl.textContent = `
+      .tb-cdu-actions-menu .mat-mdc-menu-content { ${bgRule} }
+      .tb-cdu-actions-menu .mat-mdc-menu-item { ${fgRule} }
+      .tb-cdu-actions-menu .mat-mdc-menu-item .mat-icon { ${fgRule} }
+      .tb-cdu-paginator-select.mat-mdc-select-panel { ${bgRule} }
+      .tb-cdu-paginator-select.mat-mdc-select-panel .mat-mdc-option { ${fgRule} }
+    `;
+    }
     clone(link) {
         return Object.assign(Object.create(Object.getPrototypeOf(link)), link);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: BaseTableComponent, isStandalone: true, selector: "tb-cd-base-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: true, transformFunction: null }, loadingState: { classPropertyName: "loadingState", publicName: "loadingState", isSignal: true, isRequired: true, transformFunction: null }, widgetTitle: { classPropertyName: "widgetTitle", publicName: "widgetTitle", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, bulkActions: { classPropertyName: "bulkActions", publicName: "bulkActions", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, expansionTrackBy: { classPropertyName: "expansionTrackBy", publicName: "expansionTrackBy", isSignal: true, isRequired: false, transformFunction: null }, selectionTrackBy: { classPropertyName: "selectionTrackBy", publicName: "selectionTrackBy", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionTrigger: { classPropertyName: "clearSelectionTrigger", publicName: "clearSelectionTrigger", isSignal: true, isRequired: false, transformFunction: null }, pageLink: { classPropertyName: "pageLink", publicName: "pageLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageLink: "pageLinkChange", rowClick: "rowClick", cellClick: "cellClick", actionClick: "actionClick", headerActionClick: "headerActionClick", bulkActionClick: "bulkActionClick", selectionChange: "selectionChange", expansionChange: "expansionChange" }, viewQueries: [{ propertyName: "searchInputField", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: (MatTable), descendants: true, isSignal: true }, { propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tb-table-widget tb-absolute-fill\">\n  <div class=\"tb-absolute-fill flex flex-1 flex-col\">\n    <mat-toolbar class=\"mat-mdc-table-toolbar\" [class.!hidden]=\"toolbarMode() !== 'default'\">\n      <span\n        class=\"tb-entity-table-title\"\n        [matTooltip]=\"widgetTitle() | translate\"\n        matTooltipPosition=\"above\"\n        [matTooltipShowDelay]=\"500\"\n        [matTooltipHideDelay]=\"200\">\n        {{ widgetTitle() | translate }}\n      </span>\n      <span class=\"flex-1\"></span>\n      @for (action of visibleHeaderActions(); track action.id) {\n        <button\n          mat-icon-button\n          [attr.data-testid]=\"action.id\"\n          [disabled]=\"action.disabled ? action.disabled() : false\"\n          (click)=\"onHeaderActionClick($event, action)\"\n          [matTooltip]=\"action.label ? (action.label | translate) : null\"\n          matTooltipPosition=\"above\">\n          <mat-icon>{{ action.icon }}</mat-icon>\n        </button>\n      }\n      <button\n        mat-icon-button\n        [disabled]=\"loadingState().phase !== LoadingPhase.IDLE\"\n        (click)=\"enterFilterMode()\"\n        matTooltip=\"{{ 'action.search' | translate }}\"\n        matTooltipPosition=\"above\">\n        <mat-icon>search</mat-icon>\n      </button>\n    </mat-toolbar>\n    <mat-toolbar class=\"mat-mdc-table-toolbar\" [class.!hidden]=\"toolbarMode() !== 'search'\">\n      <div class=\"mat-toolbar-tools\">\n        <button mat-icon-button matTooltip=\"{{ 'action.search' | translate }}\" matTooltipPosition=\"above\">\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-form-field class=\"flex-1\">\n          <mat-label>&nbsp;</mat-label>\n          <input #searchInput matInput [formControl]=\"searchControl\" placeholder=\"{{ 'entity.search' | translate }}\" />\n        </mat-form-field>\n        <button\n          mat-icon-button\n          (click)=\"exitFilterMode()\"\n          matTooltip=\"{{ 'action.close' | translate }}\"\n          matTooltipPosition=\"above\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    @if (selectionEnabled()) {\n      <mat-toolbar class=\"mat-mdc-table-toolbar mat-mdc-table-toolbar--bulk\" [class.!hidden]=\"toolbarMode() !== 'bulk'\">\n        <span class=\"tb-entity-table-title\"\n          >{{ selection.selected.length }} {{ 'widgets.segmented-button.selected' | translate }}</span\n        >\n        <span class=\"flex-1\"></span>\n        @for (action of visibleBulkActions(); track action.id) {\n          <button\n            mat-icon-button\n            [disabled]=\"action.disabled ? action.disabled(selection.selected) : false\"\n            (click)=\"onBulkActionClick($event, action)\"\n            [matTooltip]=\"action.label ? (action.label | translate) : null\"\n            matTooltipPosition=\"above\">\n            <mat-icon>{{ action.icon }}</mat-icon>\n          </button>\n        }\n        <button\n          mat-icon-button\n          (click)=\"clearSelection()\"\n          matTooltip=\"{{ 'action.close' | translate }}\"\n          matTooltipPosition=\"above\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-toolbar>\n    }\n    <div\n      #tableScrollContainer\n      cdkScrollable\n      class=\"table-container flex-1 relative\"\n      [style.overflow]=\"loadingState().phase !== LoadingPhase.IDLE ? 'hidden' : 'auto'\">\n      @if (loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING) {\n        <tb-cd-loading-overlay [state]=\"loadingState()\"></tb-cd-loading-overlay>\n      }\n\n      <table\n        mat-table\n        [dataSource]=\"dataSource()\"\n        [multiTemplateDataRows]=\"true\"\n        matSort\n        [matSortActive]=\"pageLink().sortOrder?.property || ''\"\n        [matSortDirection]=\"pageLinkSortDirection()\"\n        (matSortChange)=\"onSort($event)\">\n        @if (selectionEnabled()) {\n          <ng-container matColumnDef=\"select\" sticky>\n            <mat-header-cell *matHeaderCellDef class=\"select-cell\">\n              <mat-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\" (change)=\"masterToggle()\">\n              </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"select-cell\">\n              <mat-checkbox\n                [checked]=\"selection.isSelected(entity)\"\n                (change)=\"toggleRow(entity)\"\n                (click)=\"$event.stopPropagation()\">\n              </mat-checkbox>\n            </mat-cell>\n          </ng-container>\n        }\n        @for (column of columns(); track column.def) {\n          <ng-container [matColumnDef]=\"column.def\">\n            <mat-header-cell\n              *matHeaderCellDef\n              mat-sort-header\n              [disabled]=\"!column.sortable\"\n              [style]=\"column.headerStyle\"\n              class=\"column-header\">\n              {{ column.title | translate }}\n            </mat-header-cell>\n\n            <mat-cell\n              *matCellDef=\"let entity; let row = index\"\n              [style]=\"entity[column.def + '_style']\"\n              (click)=\"onCellClick($event, entity, column)\">\n              @if (column.cellTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entity[column.name], entity: entity }\"></ng-container>\n              } @else {\n                {{ entity[column.name] ?? (column.nullDisplayValue ? (column.nullDisplayValue | translate) : '') }}\n              }\n            </mat-cell>\n          </ng-container>\n        }\n        @if (rowActions().length > 0 || expandable()) {\n          <ng-container matColumnDef=\"actions\" stickyEnd>\n            <mat-header-cell *matHeaderCellDef class=\"actions-cell\"></mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"actions-cell\">\n              <div class=\"actions-cell-inner\">\n                <div class=\"actions-buttons-full\">\n                  @for (action of rowActions(); track action.id) {\n                    @if (!action.visible || action.visible(entity)) {\n                      <button\n                        mat-icon-button\n                        [attr.data-testid]=\"action.id\"\n                        [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                        (click)=\"onActionClick($event, entity, action)\"\n                        [matTooltip]=\"action.label ? (action.label | translate) : null\"\n                        matTooltipPosition=\"above\">\n                        <mat-icon>{{ action.icon }}</mat-icon>\n                      </button>\n                    }\n                  }\n                  @if (expandable()) {\n                    <button mat-icon-button data-testid=\"expand-row\" (click)=\"onExpandToggleClick($event, entity)\">\n                      <mat-icon>{{ isExpanded(entity) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                    </button>\n                  }\n                </div>\n                <div class=\"actions-buttons-menu\">\n                  <button\n                    mat-icon-button\n                    [matMenuTriggerFor]=\"actionsMenu\"\n                    (click)=\"$event.stopPropagation()\"\n                    matTooltip=\"{{ 'action.actions' | translate }}\"\n                    matTooltipPosition=\"above\">\n                    <mat-icon>more_vert</mat-icon>\n                  </button>\n                  <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n                    @for (action of rowActions(); track action.id) {\n                      @if (!action.visible || action.visible(entity)) {\n                        <button\n                          mat-menu-item\n                          [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                          (click)=\"onActionClick($event, entity, action)\">\n                          <mat-icon>{{ action.icon }}</mat-icon>\n                          <span>{{ action.label || '' | translate }}</span>\n                        </button>\n                      }\n                    }\n                    @if (expandable()) {\n                      <button mat-menu-item (click)=\"onExpandToggleClick($event, entity)\">\n                        <mat-icon>{{ isExpanded(entity) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                        <span>{{ (isExpanded(entity) ? 'action.collapse' : 'action.expand') | translate }}</span>\n                      </button>\n                    }\n                  </mat-menu>\n                </div>\n              </div>\n            </mat-cell>\n          </ng-container>\n        }\n        @if (expandable()) {\n          <ng-container matColumnDef=\"expandedDetail\">\n            <td\n              mat-cell\n              *matCellDef=\"let entity\"\n              class=\"expanded-detail-cell\"\n              [attr.colspan]=\"effectiveDisplayedColumns().length\"\n              [attr.data-expand-key]=\"expansionTrackBy()(entity)\">\n              @if (isExpanded(entity) && expandedRowTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"expandedRowTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entity, entity: entity }\"></ng-container>\n              }\n            </td>\n          </ng-container>\n        }\n        <mat-header-row *matHeaderRowDef=\"effectiveDisplayedColumns(); sticky: true\"></mat-header-row>\n        <mat-row\n          [class.invisible]=\"isLoadingState()\"\n          [class.tb-expandable]=\"expandable()\"\n          *matRowDef=\"let entity; columns: effectiveDisplayedColumns(); let row = index\"\n          (click)=\"onRowClick($event, entity)\"></mat-row>\n        @if (expandable()) {\n          <tr\n            mat-row\n            *matRowDef=\"let entity; when: isExpandedRow; columns: detailRowColumns()\"\n            class=\"detail-row\"\n            [class.invisible]=\"\n              loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING\n            \"></tr>\n        }\n      </table>\n      @if (loadingState().phase === LoadingPhase.IDLE && dataSource().length === 0) {\n        <span class=\"no-data-found flex items-center justify-center\">\n          {{ noDataMessage() | translate }}\n        </span>\n      }\n      @if (loadingState().phase === LoadingPhase.FETCHING) {\n        <tb-cd-loading-overlay [state]=\"loadingState()\"></tb-cd-loading-overlay>\n      }\n    </div>\n    <mat-divider></mat-divider>\n    <mat-paginator\n      [disabled]=\"loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING\"\n      [length]=\"totalElements()\"\n      [pageIndex]=\"pageLink().page\"\n      [pageSize]=\"pageLink().pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (page)=\"onPaginate($event)\"\n      showFirstLastButtons></mat-paginator>\n  </div>\n</div>\n", styles: [":host{width:100%;height:100%;display:block;position:relative}:host .mat-mdc-icon-button{--mat-icon-button-state-layer-color: transparent;--mat-icon-button-ripple-color: transparent}:host .tb-table-widget .table-container{position:relative}:host .tb-table-widget .mat-mdc-table-toolbar{padding:0 12px}:host .tb-table-widget .mat-mdc-table-toolbar .tb-entity-table-title{color:#909090;font-size:16px;font-weight:700;letter-spacing:normal;padding:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tb-table-widget .mat-mdc-table-toolbar--bulk{background-color:#e8f0fe}:host .tb-table-widget .mat-mdc-table-toolbar--bulk .tb-entity-table-title{color:#0000008a}:host .tb-table-widget .mat-mdc-table .column-header{color:#0000008a;font-size:14px}:host .tb-table-widget .mat-mdc-table .mat-mdc-header-cell{background-color:#fff}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.invisible{visibility:hidden}:host .tb-table-widget .mat-mdc-table .select-cell{flex:0 0 48px;padding-right:0}:host .tb-table-widget .mat-mdc-table .actions-cell{white-space:nowrap;padding:0}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner{display:flex;justify-content:flex-end;align-items:center}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-menu{display:none}@media(max-width:599px){:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-full{display:none}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-menu{display:flex}}:host .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.select-cell,:host .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.actions-cell{background-color:#fff;z-index:2!important}:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover{background-color:#f5f5f5}:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover .mat-mdc-cell.select-cell,:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover .mat-mdc-cell.actions-cell{background-color:#f5f5f5}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.tb-expandable{cursor:pointer}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row{min-height:0;cursor:default}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row:hover{background-color:inherit}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row .expanded-detail-cell{padding:0;overflow:hidden}:host .tb-table-widget span.no-data-found{position:absolute;inset:60px 0 0}\n", ":host .tb-table-widget .mat-mdc-table,:host .tb-table-widget .mat-mdc-paginator,:host .tb-table-widget mat-toolbar.mat-mdc-table-toolbar:not([color=primary]){background:transparent}:host .tb-table-widget mat-toolbar{height:39px;max-height:39px}:host .tb-table-widget mat-toolbar .mat-toolbar-tools{height:39px;max-height:39px}:host .tb-table-widget .table-container{overflow:auto}:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-footer-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-header-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-footer-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-header-cell:nth-child(n+2):nth-last-child(n+2){padding:0 5px}:host .tb-table-widget .mat-mdc-row.mat-row-select mat-cell:nth-child(2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-footer-cell:nth-child(2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-header-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-footer-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-header-cell:nth-child(2){padding:0 5px}:host .tb-table-widget .mat-mdc-row.mat-row-select mat-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-footer-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-header-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-footer-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-header-cell:nth-child(n+3):nth-last-child(n+2){padding:0 5px}:host .tb-table-widget .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{border-color:var(--mat-tab-header-pagination-disabled-icon-color)}:host .mat-mdc-input-element::placeholder{color:var(--mat-table-header-headline-color)}:host .mat-mdc-table .mat-mdc-header-row{background-color:var(--tb-orig-background-color)}:host .mat-mdc-table .mat-mdc-cell.mat-mdc-table-sticky,:host .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky{background-color:var(--tb-orig-background-color)}:host .mat-mdc-table .mat-mdc-row{background-color:#0000}:host .mat-mdc-table .mat-mdc-row.tb-current-entity{background-color:var(--tb-current-entity-color)}:host .mat-mdc-table .mat-mdc-row.tb-current-entity .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-current-entity-sticky-color)}:host .mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity){background-color:var(--tb-hover-color)}:host .mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-hover-sticky-color)}:host .mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity){background-color:var(--tb-selected-color)}:host .mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-selected-sticky-color)}:host .mat-mdc-table .mat-mdc-row,:host .mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky{transition:background-color .2s;background-color:var(--tb-orig-background-color)}:host-context(.tb-has-timewindow) .tb-table-widget mat-toolbar{height:65px;max-height:65px}:host-context(.tb-has-timewindow) .tb-table-widget mat-toolbar .mat-toolbar-tools{height:65px;max-height:65px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LoadingOverlayComponent, selector: "tb-cd-loading-overlay", inputs: ["state", "mode", "generating", "processingDeterminate", "processingIndeterminate", "fetching"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: BaseTableComponent, isStandalone: true, selector: "tb-cd-base-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: true, transformFunction: null }, loadingState: { classPropertyName: "loadingState", publicName: "loadingState", isSignal: true, isRequired: true, transformFunction: null }, widgetTitle: { classPropertyName: "widgetTitle", publicName: "widgetTitle", isSignal: true, isRequired: false, transformFunction: null }, noDataMessage: { classPropertyName: "noDataMessage", publicName: "noDataMessage", isSignal: true, isRequired: false, transformFunction: null }, titleStyle: { classPropertyName: "titleStyle", publicName: "titleStyle", isSignal: true, isRequired: false, transformFunction: null }, columnHeaderStyle: { classPropertyName: "columnHeaderStyle", publicName: "columnHeaderStyle", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, bulkActions: { classPropertyName: "bulkActions", publicName: "bulkActions", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, expansionTrackBy: { classPropertyName: "expansionTrackBy", publicName: "expansionTrackBy", isSignal: true, isRequired: false, transformFunction: null }, selectionTrackBy: { classPropertyName: "selectionTrackBy", publicName: "selectionTrackBy", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionTrigger: { classPropertyName: "clearSelectionTrigger", publicName: "clearSelectionTrigger", isSignal: true, isRequired: false, transformFunction: null }, pageLink: { classPropertyName: "pageLink", publicName: "pageLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageLink: "pageLinkChange", rowClick: "rowClick", cellClick: "cellClick", actionClick: "actionClick", headerActionClick: "headerActionClick", bulkActionClick: "bulkActionClick", selectionChange: "selectionChange", expansionChange: "expansionChange" }, viewQueries: [{ propertyName: "searchInputField", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: (MatTable), descendants: true, isSignal: true }, { propertyName: "tableScrollContainer", first: true, predicate: ["tableScrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tb-table-widget tb-absolute-fill\" [style]=\"tableColorStyle()\">\n  <div class=\"tb-absolute-fill flex flex-1 flex-col\">\n    <mat-toolbar\n      class=\"mat-mdc-table-toolbar\"\n      [class.!hidden]=\"toolbarMode() !== 'default'\"\n      [style.background-color]=\"backgroundColor() || null\"\n      [style.color]=\"color() || null\">\n      <span\n        class=\"tb-entity-table-title\"\n        [ngStyle]=\"titleStyle()\"\n        [matTooltip]=\"widgetTitle() | translate\"\n        matTooltipPosition=\"above\"\n        [matTooltipShowDelay]=\"500\"\n        [matTooltipHideDelay]=\"200\">\n        {{ widgetTitle() | translate }}\n      </span>\n      <span class=\"flex-1\"></span>\n      @for (action of visibleHeaderActions(); track action.id) {\n        @if (action.menuItems?.length) {\n          <button\n            mat-icon-button\n            [attr.data-testid]=\"action.id\"\n            [disabled]=\"action.disabled ? action.disabled() : false\"\n            [matMenuTriggerFor]=\"headerDropdown\"\n            [matTooltip]=\"action.label ? (action.label | translate) : null\"\n            matTooltipPosition=\"above\">\n            <mat-icon>{{ action.icon }}</mat-icon>\n          </button>\n          <mat-menu #headerDropdown=\"matMenu\" xPosition=\"before\" class=\"tb-cdu-actions-menu\">\n            @for (item of action.menuItems!; track item.id) {\n              <button\n                mat-menu-item\n                [disabled]=\"item.disabled ? item.disabled() : false\"\n                (click)=\"item.handler && item.handler()\">\n                <mat-icon>{{ item.icon }}</mat-icon>\n                <span>{{ item.label ? (item.label | translate) : '' }}</span>\n              </button>\n            }\n          </mat-menu>\n        } @else {\n          <button\n            mat-icon-button\n            [attr.data-testid]=\"action.id\"\n            [disabled]=\"action.disabled ? action.disabled() : false\"\n            (click)=\"onHeaderActionClick($event, action)\"\n            [matTooltip]=\"action.label ? (action.label | translate) : null\"\n            matTooltipPosition=\"above\">\n            <mat-icon>{{ action.icon }}</mat-icon>\n          </button>\n        }\n      }\n      <button\n        mat-icon-button\n        [disabled]=\"loadingState().phase !== LoadingPhase.IDLE\"\n        (click)=\"enterFilterMode()\"\n        matTooltip=\"{{ 'action.search' | translate }}\"\n        matTooltipPosition=\"above\">\n        <mat-icon>search</mat-icon>\n      </button>\n    </mat-toolbar>\n    <mat-toolbar\n      class=\"mat-mdc-table-toolbar\"\n      [class.!hidden]=\"toolbarMode() !== 'search'\"\n      [style.background-color]=\"backgroundColor() || null\"\n      [style.color]=\"color() || null\">\n      <div class=\"mat-toolbar-tools\">\n        <button mat-icon-button matTooltip=\"{{ 'action.search' | translate }}\" matTooltipPosition=\"above\">\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-form-field class=\"flex-1\">\n          <mat-label>&nbsp;</mat-label>\n          <input #searchInput matInput [formControl]=\"searchControl\" placeholder=\"{{ 'entity.search' | translate }}\" />\n        </mat-form-field>\n        <button\n          mat-icon-button\n          (click)=\"exitFilterMode()\"\n          matTooltip=\"{{ 'action.close' | translate }}\"\n          matTooltipPosition=\"above\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    @if (selectionEnabled()) {\n      <mat-toolbar\n        class=\"mat-mdc-table-toolbar mat-mdc-table-toolbar--bulk\"\n        [class.!hidden]=\"toolbarMode() !== 'bulk'\"\n        [style.background-color]=\"backgroundColor() || null\"\n        [style.color]=\"color() || null\">\n        <span class=\"tb-entity-table-title\"\n          >{{ selection.selected.length }} {{ 'widgets.segmented-button.selected' | translate }}</span\n        >\n        <span class=\"flex-1\"></span>\n        @for (action of visibleBulkActions(); track action.id) {\n          @if (action.menuItems?.length) {\n            <button\n              mat-icon-button\n              [disabled]=\"action.disabled ? action.disabled(selection.selected) : false\"\n              [matMenuTriggerFor]=\"bulkActionMenu\"\n              [matTooltip]=\"action.label ? (action.label | translate) : null\"\n              matTooltipPosition=\"above\">\n              <mat-icon>{{ action.icon }}</mat-icon>\n            </button>\n            <mat-menu #bulkActionMenu=\"matMenu\" xPosition=\"before\" class=\"tb-cdu-actions-menu\">\n              @for (item of action.menuItems!; track item.id) {\n                <button\n                  mat-menu-item\n                  [disabled]=\"item.disabled ? item.disabled(selection.selected) : false\"\n                  (click)=\"item.handler(selection.selected)\">\n                  <mat-icon>{{ item.icon }}</mat-icon>\n                  <span>{{ item.label ? (item.label | translate) : '' }}</span>\n                </button>\n              }\n            </mat-menu>\n          } @else {\n            <button\n              mat-icon-button\n              [disabled]=\"action.disabled ? action.disabled(selection.selected) : false\"\n              (click)=\"onBulkActionClick($event, action)\"\n              [matTooltip]=\"action.label ? (action.label | translate) : null\"\n              matTooltipPosition=\"above\">\n              <mat-icon>{{ action.icon }}</mat-icon>\n            </button>\n          }\n        }\n        <button\n          mat-icon-button\n          (click)=\"clearSelection()\"\n          matTooltip=\"{{ 'action.close' | translate }}\"\n          matTooltipPosition=\"above\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-toolbar>\n    }\n    <div\n      #tableScrollContainer\n      cdkScrollable\n      class=\"table-container flex-1 relative\"\n      [style.overflow]=\"loadingState().phase !== LoadingPhase.IDLE ? 'hidden' : 'auto'\">\n      @if (loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING) {\n        <tb-cd-loading-overlay [state]=\"loadingState()\"></tb-cd-loading-overlay>\n      }\n\n      <table\n        mat-table\n        [dataSource]=\"dataSource()\"\n        [style.color]=\"color() || null\"\n        [multiTemplateDataRows]=\"true\"\n        matSort\n        [matSortActive]=\"pageLink().sortOrder?.property || ''\"\n        [matSortDirection]=\"pageLinkSortDirection()\"\n        (matSortChange)=\"onSort($event)\">\n        @if (selectionEnabled()) {\n          <ng-container matColumnDef=\"select\" sticky>\n            <mat-header-cell *matHeaderCellDef class=\"select-cell\">\n              <mat-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\" (change)=\"masterToggle()\">\n              </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"select-cell\">\n              <mat-checkbox\n                [checked]=\"selection.isSelected(entity)\"\n                (change)=\"toggleRow(entity)\"\n                (click)=\"$event.stopPropagation()\">\n              </mat-checkbox>\n            </mat-cell>\n          </ng-container>\n        }\n        @for (column of columns(); track column.def) {\n          <ng-container [matColumnDef]=\"column.def\">\n            <mat-header-cell\n              *matHeaderCellDef\n              mat-sort-header\n              [disabled]=\"!column.sortable\"\n              [ngStyle]=\"columnHeaderStyle()\"\n              [style]=\"column.headerStyle\"\n              class=\"column-header\">\n              {{ column.title | translate }}\n            </mat-header-cell>\n\n            <mat-cell\n              *matCellDef=\"let entity; let row = index\"\n              [style]=\"entity[column.def + '_style']\"\n              (click)=\"onCellClick($event, entity, column)\">\n              @if (column.cellTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entity[column.name], entity: entity }\"></ng-container>\n              } @else {\n                {{ entity[column.name] ?? (column.nullDisplayValue ? (column.nullDisplayValue | translate) : '') }}\n              }\n            </mat-cell>\n          </ng-container>\n        }\n        @if (rowActions().length > 0 || expandable()) {\n          <ng-container matColumnDef=\"actions\" stickyEnd>\n            <mat-header-cell *matHeaderCellDef class=\"actions-cell\"></mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"actions-cell\">\n              <div class=\"actions-cell-inner\">\n                <div class=\"actions-buttons-full\">\n                  @for (action of rowActions(); track action.id) {\n                    @if (!action.visible || action.visible(entity)) {\n                      @if (action.menuItems?.length) {\n                        <button\n                          mat-icon-button\n                          [attr.data-testid]=\"action.id\"\n                          [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                          [matMenuTriggerFor]=\"rowSubMenu\"\n                          (click)=\"$event.stopPropagation()\"\n                          [matTooltip]=\"action.label ? (action.label | translate) : null\"\n                          matTooltipPosition=\"above\">\n                          <mat-icon>{{ action.icon }}</mat-icon>\n                        </button>\n                        <mat-menu #rowSubMenu=\"matMenu\" xPosition=\"before\" class=\"tb-cdu-actions-menu\">\n                          @for (item of action.menuItems!; track item.id) {\n                            <button\n                              mat-menu-item\n                              [disabled]=\"item.disabled ? item.disabled(entity) : false\"\n                              (click)=\"item.handler(entity)\">\n                              <mat-icon>{{ item.icon }}</mat-icon>\n                              <span>{{ item.label ? (item.label | translate) : '' }}</span>\n                            </button>\n                          }\n                        </mat-menu>\n                      } @else {\n                        <button\n                          mat-icon-button\n                          [attr.data-testid]=\"action.id\"\n                          [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                          (click)=\"onActionClick($event, entity, action)\"\n                          [matTooltip]=\"action.label ? (action.label | translate) : null\"\n                          matTooltipPosition=\"above\">\n                          <mat-icon>{{ action.icon }}</mat-icon>\n                        </button>\n                      }\n                    }\n                  }\n                  @if (expandable()) {\n                    <button mat-icon-button data-testid=\"expand-row\" (click)=\"onExpandToggleClick($event, entity)\">\n                      <mat-icon>{{ isExpanded(entity) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                    </button>\n                  }\n                </div>\n                <div class=\"actions-buttons-menu\">\n                  <button\n                    mat-icon-button\n                    [matMenuTriggerFor]=\"actionsMenu\"\n                    (click)=\"$event.stopPropagation()\"\n                    matTooltip=\"{{ 'action.actions' | translate }}\"\n                    matTooltipPosition=\"above\">\n                    <mat-icon>more_vert</mat-icon>\n                  </button>\n                  <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\" class=\"tb-cdu-actions-menu\">\n                    @for (action of rowActions(); track action.id) {\n                      @if (!action.visible || action.visible(entity)) {\n                        @if (action.menuItems?.length) {\n                          @for (item of action.menuItems!; track item.id) {\n                            <button\n                              mat-menu-item\n                              [disabled]=\"item.disabled ? item.disabled(entity) : false\"\n                              (click)=\"item.handler(entity)\">\n                              <mat-icon>{{ item.icon }}</mat-icon>\n                              <span>{{ item.label ? (item.label | translate) : '' }}</span>\n                            </button>\n                          }\n                        } @else {\n                          <button\n                            mat-menu-item\n                            [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                            (click)=\"onActionClick($event, entity, action)\">\n                            <mat-icon>{{ action.icon }}</mat-icon>\n                            <span>{{ action.label || '' | translate }}</span>\n                          </button>\n                        }\n                      }\n                    }\n                    @if (expandable()) {\n                      <button mat-menu-item (click)=\"onExpandToggleClick($event, entity)\">\n                        <mat-icon>{{ isExpanded(entity) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                        <span>{{ (isExpanded(entity) ? 'action.collapse' : 'action.expand') | translate }}</span>\n                      </button>\n                    }\n                  </mat-menu>\n                </div>\n              </div>\n            </mat-cell>\n          </ng-container>\n        }\n        @if (expandable()) {\n          <ng-container matColumnDef=\"expandedDetail\">\n            <td\n              mat-cell\n              *matCellDef=\"let entity\"\n              class=\"expanded-detail-cell\"\n              [attr.colspan]=\"effectiveDisplayedColumns().length\"\n              [attr.data-expand-key]=\"expansionTrackBy()(entity)\">\n              @if (isExpanded(entity) && expandedRowTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"expandedRowTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entity, entity: entity }\"></ng-container>\n              }\n            </td>\n          </ng-container>\n        }\n        <mat-header-row *matHeaderRowDef=\"effectiveDisplayedColumns(); sticky: true\"></mat-header-row>\n        <mat-row\n          [class.invisible]=\"isLoadingState()\"\n          [class.tb-expandable]=\"expandable()\"\n          *matRowDef=\"let entity; columns: effectiveDisplayedColumns(); let row = index\"\n          (click)=\"onRowClick($event, entity)\"></mat-row>\n        @if (expandable()) {\n          <tr\n            mat-row\n            *matRowDef=\"let entity; when: isExpandedRow; columns: detailRowColumns()\"\n            class=\"detail-row\"\n            [class.invisible]=\"\n              loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING\n            \"></tr>\n        }\n      </table>\n      @if (loadingState().phase === LoadingPhase.IDLE && dataSource().length === 0) {\n        <span class=\"no-data-found flex items-center justify-center\">\n          {{ noDataMessage() | translate }}\n        </span>\n      }\n      @if (loadingState().phase === LoadingPhase.FETCHING) {\n        <tb-cd-loading-overlay [state]=\"loadingState()\"></tb-cd-loading-overlay>\n      }\n    </div>\n    <mat-divider></mat-divider>\n    <mat-paginator\n      [style.background-color]=\"backgroundColor() || null\"\n      [style.color]=\"color() || null\"\n      [selectConfig]=\"paginatorSelectConfig\"\n      [disabled]=\"loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING\"\n      [length]=\"totalElements()\"\n      [pageIndex]=\"pageLink().page\"\n      [pageSize]=\"pageLink().pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (page)=\"onPaginate($event)\"\n      showFirstLastButtons></mat-paginator>\n  </div>\n</div>\n", styles: [":host{width:100%;height:100%;display:block;position:relative}:host .mat-mdc-icon-button{--mat-icon-button-state-layer-color: transparent;--mat-icon-button-ripple-color: transparent}:host ::ng-deep .mat-mdc-icon-button,:host ::ng-deep .mat-mdc-icon-button .mat-icon{color:var(--tb-cdu-fg-color)!important}:host ::ng-deep .mat-mdc-table .mat-mdc-cell{color:var(--tb-cdu-fg-color)!important}:host ::ng-deep mat-paginator{--mat-paginator-enabled-icon-color: var(--tb-cdu-fg-color);--mat-paginator-disabled-icon-color: var(--tb-cdu-fg-color);--mat-paginator-container-text-color: var(--tb-cdu-fg-color);--mat-paginator-container-background-color: var(--tb-cdu-bg-color)}:host ::ng-deep mat-paginator .mat-mdc-select-value,:host ::ng-deep mat-paginator .mat-mdc-select-arrow,:host ::ng-deep mat-paginator .mat-mdc-select-trigger,:host ::ng-deep mat-paginator .mat-mdc-paginator-range-label,:host ::ng-deep mat-paginator .mat-mdc-paginator-page-size-label{color:var(--tb-cdu-fg-color)!important}:host .tb-table-widget .table-container{position:relative;background-color:var(--tb-cdu-bg-color, transparent)}:host .tb-table-widget .mat-mdc-table-toolbar{padding:0 12px}:host .tb-table-widget .mat-mdc-table-toolbar .tb-entity-table-title{color:var(--tb-cdu-fg-color, rgb(144, 144, 144));font-size:16px;font-weight:700;letter-spacing:normal;padding:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tb-table-widget .mat-mdc-table-toolbar--bulk{background-color:var(--tb-cdu-bg-color, #e8f0fe)}:host .tb-table-widget .mat-mdc-table-toolbar--bulk .tb-entity-table-title{color:var(--tb-cdu-fg-color, rgba(0, 0, 0, .5411764706))}:host .tb-table-widget .mat-mdc-table{background-color:var(--tb-cdu-bg-color, inherit)}:host .tb-table-widget .mat-mdc-table .column-header{color:var(--tb-cdu-fg-color, rgba(0, 0, 0, .5411764706));font-size:14px}:host .tb-table-widget .mat-mdc-table .mat-mdc-header-cell{background-color:var(--tb-cdu-bg-color, #ffffff)}:host .tb-table-widget .mat-mdc-table .mat-mdc-row{background-color:var(--tb-cdu-bg-color, inherit)}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.invisible{visibility:hidden}:host .tb-table-widget .mat-mdc-table .select-cell{flex:0 0 48px;padding-right:0}:host .tb-table-widget .mat-mdc-table .actions-cell{white-space:nowrap;padding:0}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner{display:flex;justify-content:flex-end;align-items:center}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-menu{display:none}@media(max-width:599px){:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-full{display:none}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-menu{display:flex}}:host .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.select-cell,:host .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.actions-cell{background-color:var(--tb-cdu-bg-color, #ffffff);z-index:2!important}:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover{background-color:color-mix(in srgb,var(--tb-cdu-bg-color, white) 92%,var(--tb-cdu-fg-color, #000000) 8%)}:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover .mat-mdc-cell.select-cell,:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover .mat-mdc-cell.actions-cell{background-color:color-mix(in srgb,var(--tb-cdu-bg-color, white) 92%,var(--tb-cdu-fg-color, #000000) 8%)}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.tb-expandable{cursor:pointer}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row{min-height:0;cursor:default}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row:hover{background-color:inherit}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row .expanded-detail-cell{padding:0;overflow:hidden}:host .tb-table-widget span.no-data-found{position:absolute;inset:60px 0 0}\n", ":host .tb-table-widget .mat-mdc-table,:host .tb-table-widget .mat-mdc-paginator,:host .tb-table-widget mat-toolbar.mat-mdc-table-toolbar:not([color=primary]){background:transparent}:host .tb-table-widget mat-toolbar{height:39px;max-height:39px}:host .tb-table-widget mat-toolbar .mat-toolbar-tools{height:39px;max-height:39px}:host .tb-table-widget .table-container{overflow:auto}:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-footer-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-header-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-footer-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-header-cell:nth-child(n+2):nth-last-child(n+2){padding:0 5px}:host .tb-table-widget .mat-mdc-row.mat-row-select mat-cell:nth-child(2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-footer-cell:nth-child(2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-header-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-footer-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-header-cell:nth-child(2){padding:0 5px}:host .tb-table-widget .mat-mdc-row.mat-row-select mat-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-footer-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-header-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-footer-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-header-cell:nth-child(n+3):nth-last-child(n+2){padding:0 5px}:host .tb-table-widget .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{border-color:var(--mat-tab-header-pagination-disabled-icon-color)}:host .mat-mdc-input-element::placeholder{color:var(--mat-table-header-headline-color)}:host .mat-mdc-table .mat-mdc-header-row{background-color:var(--tb-orig-background-color)}:host .mat-mdc-table .mat-mdc-cell.mat-mdc-table-sticky,:host .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky{background-color:var(--tb-orig-background-color)}:host .mat-mdc-table .mat-mdc-row{background-color:#0000}:host .mat-mdc-table .mat-mdc-row.tb-current-entity{background-color:var(--tb-current-entity-color)}:host .mat-mdc-table .mat-mdc-row.tb-current-entity .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-current-entity-sticky-color)}:host .mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity){background-color:var(--tb-hover-color)}:host .mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-hover-sticky-color)}:host .mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity){background-color:var(--tb-selected-color)}:host .mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-selected-sticky-color)}:host .mat-mdc-table .mat-mdc-row,:host .mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky{transition:background-color .2s;background-color:var(--tb-orig-background-color)}:host-context(.tb-has-timewindow) .tb-table-widget mat-toolbar{height:65px;max-height:65px}:host-context(.tb-has-timewindow) .tb-table-widget mat-toolbar .mat-toolbar-tools{height:65px;max-height:65px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i7.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: LoadingOverlayComponent, selector: "tb-cd-loading-overlay", inputs: ["state", "mode", "generating", "processingDeterminate", "processingIndeterminate", "fetching"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BaseTableComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule, SharedModule, LoadingOverlayComponent, CdkScrollableModule, MatCheckboxModule], selector: 'tb-cd-base-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tb-table-widget tb-absolute-fill\">\n  <div class=\"tb-absolute-fill flex flex-1 flex-col\">\n    <mat-toolbar class=\"mat-mdc-table-toolbar\" [class.!hidden]=\"toolbarMode() !== 'default'\">\n      <span\n        class=\"tb-entity-table-title\"\n        [matTooltip]=\"widgetTitle() | translate\"\n        matTooltipPosition=\"above\"\n        [matTooltipShowDelay]=\"500\"\n        [matTooltipHideDelay]=\"200\">\n        {{ widgetTitle() | translate }}\n      </span>\n      <span class=\"flex-1\"></span>\n      @for (action of visibleHeaderActions(); track action.id) {\n        <button\n          mat-icon-button\n          [attr.data-testid]=\"action.id\"\n          [disabled]=\"action.disabled ? action.disabled() : false\"\n          (click)=\"onHeaderActionClick($event, action)\"\n          [matTooltip]=\"action.label ? (action.label | translate) : null\"\n          matTooltipPosition=\"above\">\n          <mat-icon>{{ action.icon }}</mat-icon>\n        </button>\n      }\n      <button\n        mat-icon-button\n        [disabled]=\"loadingState().phase !== LoadingPhase.IDLE\"\n        (click)=\"enterFilterMode()\"\n        matTooltip=\"{{ 'action.search' | translate }}\"\n        matTooltipPosition=\"above\">\n        <mat-icon>search</mat-icon>\n      </button>\n    </mat-toolbar>\n    <mat-toolbar class=\"mat-mdc-table-toolbar\" [class.!hidden]=\"toolbarMode() !== 'search'\">\n      <div class=\"mat-toolbar-tools\">\n        <button mat-icon-button matTooltip=\"{{ 'action.search' | translate }}\" matTooltipPosition=\"above\">\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-form-field class=\"flex-1\">\n          <mat-label>&nbsp;</mat-label>\n          <input #searchInput matInput [formControl]=\"searchControl\" placeholder=\"{{ 'entity.search' | translate }}\" />\n        </mat-form-field>\n        <button\n          mat-icon-button\n          (click)=\"exitFilterMode()\"\n          matTooltip=\"{{ 'action.close' | translate }}\"\n          matTooltipPosition=\"above\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    @if (selectionEnabled()) {\n      <mat-toolbar class=\"mat-mdc-table-toolbar mat-mdc-table-toolbar--bulk\" [class.!hidden]=\"toolbarMode() !== 'bulk'\">\n        <span class=\"tb-entity-table-title\"\n          >{{ selection.selected.length }} {{ 'widgets.segmented-button.selected' | translate }}</span\n        >\n        <span class=\"flex-1\"></span>\n        @for (action of visibleBulkActions(); track action.id) {\n          <button\n            mat-icon-button\n            [disabled]=\"action.disabled ? action.disabled(selection.selected) : false\"\n            (click)=\"onBulkActionClick($event, action)\"\n            [matTooltip]=\"action.label ? (action.label | translate) : null\"\n            matTooltipPosition=\"above\">\n            <mat-icon>{{ action.icon }}</mat-icon>\n          </button>\n        }\n        <button\n          mat-icon-button\n          (click)=\"clearSelection()\"\n          matTooltip=\"{{ 'action.close' | translate }}\"\n          matTooltipPosition=\"above\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-toolbar>\n    }\n    <div\n      #tableScrollContainer\n      cdkScrollable\n      class=\"table-container flex-1 relative\"\n      [style.overflow]=\"loadingState().phase !== LoadingPhase.IDLE ? 'hidden' : 'auto'\">\n      @if (loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING) {\n        <tb-cd-loading-overlay [state]=\"loadingState()\"></tb-cd-loading-overlay>\n      }\n\n      <table\n        mat-table\n        [dataSource]=\"dataSource()\"\n        [multiTemplateDataRows]=\"true\"\n        matSort\n        [matSortActive]=\"pageLink().sortOrder?.property || ''\"\n        [matSortDirection]=\"pageLinkSortDirection()\"\n        (matSortChange)=\"onSort($event)\">\n        @if (selectionEnabled()) {\n          <ng-container matColumnDef=\"select\" sticky>\n            <mat-header-cell *matHeaderCellDef class=\"select-cell\">\n              <mat-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\" (change)=\"masterToggle()\">\n              </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"select-cell\">\n              <mat-checkbox\n                [checked]=\"selection.isSelected(entity)\"\n                (change)=\"toggleRow(entity)\"\n                (click)=\"$event.stopPropagation()\">\n              </mat-checkbox>\n            </mat-cell>\n          </ng-container>\n        }\n        @for (column of columns(); track column.def) {\n          <ng-container [matColumnDef]=\"column.def\">\n            <mat-header-cell\n              *matHeaderCellDef\n              mat-sort-header\n              [disabled]=\"!column.sortable\"\n              [style]=\"column.headerStyle\"\n              class=\"column-header\">\n              {{ column.title | translate }}\n            </mat-header-cell>\n\n            <mat-cell\n              *matCellDef=\"let entity; let row = index\"\n              [style]=\"entity[column.def + '_style']\"\n              (click)=\"onCellClick($event, entity, column)\">\n              @if (column.cellTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entity[column.name], entity: entity }\"></ng-container>\n              } @else {\n                {{ entity[column.name] ?? (column.nullDisplayValue ? (column.nullDisplayValue | translate) : '') }}\n              }\n            </mat-cell>\n          </ng-container>\n        }\n        @if (rowActions().length > 0 || expandable()) {\n          <ng-container matColumnDef=\"actions\" stickyEnd>\n            <mat-header-cell *matHeaderCellDef class=\"actions-cell\"></mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"actions-cell\">\n              <div class=\"actions-cell-inner\">\n                <div class=\"actions-buttons-full\">\n                  @for (action of rowActions(); track action.id) {\n                    @if (!action.visible || action.visible(entity)) {\n                      <button\n                        mat-icon-button\n                        [attr.data-testid]=\"action.id\"\n                        [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                        (click)=\"onActionClick($event, entity, action)\"\n                        [matTooltip]=\"action.label ? (action.label | translate) : null\"\n                        matTooltipPosition=\"above\">\n                        <mat-icon>{{ action.icon }}</mat-icon>\n                      </button>\n                    }\n                  }\n                  @if (expandable()) {\n                    <button mat-icon-button data-testid=\"expand-row\" (click)=\"onExpandToggleClick($event, entity)\">\n                      <mat-icon>{{ isExpanded(entity) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                    </button>\n                  }\n                </div>\n                <div class=\"actions-buttons-menu\">\n                  <button\n                    mat-icon-button\n                    [matMenuTriggerFor]=\"actionsMenu\"\n                    (click)=\"$event.stopPropagation()\"\n                    matTooltip=\"{{ 'action.actions' | translate }}\"\n                    matTooltipPosition=\"above\">\n                    <mat-icon>more_vert</mat-icon>\n                  </button>\n                  <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\n                    @for (action of rowActions(); track action.id) {\n                      @if (!action.visible || action.visible(entity)) {\n                        <button\n                          mat-menu-item\n                          [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                          (click)=\"onActionClick($event, entity, action)\">\n                          <mat-icon>{{ action.icon }}</mat-icon>\n                          <span>{{ action.label || '' | translate }}</span>\n                        </button>\n                      }\n                    }\n                    @if (expandable()) {\n                      <button mat-menu-item (click)=\"onExpandToggleClick($event, entity)\">\n                        <mat-icon>{{ isExpanded(entity) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                        <span>{{ (isExpanded(entity) ? 'action.collapse' : 'action.expand') | translate }}</span>\n                      </button>\n                    }\n                  </mat-menu>\n                </div>\n              </div>\n            </mat-cell>\n          </ng-container>\n        }\n        @if (expandable()) {\n          <ng-container matColumnDef=\"expandedDetail\">\n            <td\n              mat-cell\n              *matCellDef=\"let entity\"\n              class=\"expanded-detail-cell\"\n              [attr.colspan]=\"effectiveDisplayedColumns().length\"\n              [attr.data-expand-key]=\"expansionTrackBy()(entity)\">\n              @if (isExpanded(entity) && expandedRowTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"expandedRowTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entity, entity: entity }\"></ng-container>\n              }\n            </td>\n          </ng-container>\n        }\n        <mat-header-row *matHeaderRowDef=\"effectiveDisplayedColumns(); sticky: true\"></mat-header-row>\n        <mat-row\n          [class.invisible]=\"isLoadingState()\"\n          [class.tb-expandable]=\"expandable()\"\n          *matRowDef=\"let entity; columns: effectiveDisplayedColumns(); let row = index\"\n          (click)=\"onRowClick($event, entity)\"></mat-row>\n        @if (expandable()) {\n          <tr\n            mat-row\n            *matRowDef=\"let entity; when: isExpandedRow; columns: detailRowColumns()\"\n            class=\"detail-row\"\n            [class.invisible]=\"\n              loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING\n            \"></tr>\n        }\n      </table>\n      @if (loadingState().phase === LoadingPhase.IDLE && dataSource().length === 0) {\n        <span class=\"no-data-found flex items-center justify-center\">\n          {{ noDataMessage() | translate }}\n        </span>\n      }\n      @if (loadingState().phase === LoadingPhase.FETCHING) {\n        <tb-cd-loading-overlay [state]=\"loadingState()\"></tb-cd-loading-overlay>\n      }\n    </div>\n    <mat-divider></mat-divider>\n    <mat-paginator\n      [disabled]=\"loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING\"\n      [length]=\"totalElements()\"\n      [pageIndex]=\"pageLink().page\"\n      [pageSize]=\"pageLink().pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (page)=\"onPaginate($event)\"\n      showFirstLastButtons></mat-paginator>\n  </div>\n</div>\n", styles: [":host{width:100%;height:100%;display:block;position:relative}:host .mat-mdc-icon-button{--mat-icon-button-state-layer-color: transparent;--mat-icon-button-ripple-color: transparent}:host .tb-table-widget .table-container{position:relative}:host .tb-table-widget .mat-mdc-table-toolbar{padding:0 12px}:host .tb-table-widget .mat-mdc-table-toolbar .tb-entity-table-title{color:#909090;font-size:16px;font-weight:700;letter-spacing:normal;padding:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tb-table-widget .mat-mdc-table-toolbar--bulk{background-color:#e8f0fe}:host .tb-table-widget .mat-mdc-table-toolbar--bulk .tb-entity-table-title{color:#0000008a}:host .tb-table-widget .mat-mdc-table .column-header{color:#0000008a;font-size:14px}:host .tb-table-widget .mat-mdc-table .mat-mdc-header-cell{background-color:#fff}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.invisible{visibility:hidden}:host .tb-table-widget .mat-mdc-table .select-cell{flex:0 0 48px;padding-right:0}:host .tb-table-widget .mat-mdc-table .actions-cell{white-space:nowrap;padding:0}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner{display:flex;justify-content:flex-end;align-items:center}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-menu{display:none}@media(max-width:599px){:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-full{display:none}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-menu{display:flex}}:host .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.select-cell,:host .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.actions-cell{background-color:#fff;z-index:2!important}:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover{background-color:#f5f5f5}:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover .mat-mdc-cell.select-cell,:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover .mat-mdc-cell.actions-cell{background-color:#f5f5f5}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.tb-expandable{cursor:pointer}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row{min-height:0;cursor:default}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row:hover{background-color:inherit}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row .expanded-detail-cell{padding:0;overflow:hidden}:host .tb-table-widget span.no-data-found{position:absolute;inset:60px 0 0}\n", ":host .tb-table-widget .mat-mdc-table,:host .tb-table-widget .mat-mdc-paginator,:host .tb-table-widget mat-toolbar.mat-mdc-table-toolbar:not([color=primary]){background:transparent}:host .tb-table-widget mat-toolbar{height:39px;max-height:39px}:host .tb-table-widget mat-toolbar .mat-toolbar-tools{height:39px;max-height:39px}:host .tb-table-widget .table-container{overflow:auto}:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-footer-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-header-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-footer-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-header-cell:nth-child(n+2):nth-last-child(n+2){padding:0 5px}:host .tb-table-widget .mat-mdc-row.mat-row-select mat-cell:nth-child(2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-footer-cell:nth-child(2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-header-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-footer-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-header-cell:nth-child(2){padding:0 5px}:host .tb-table-widget .mat-mdc-row.mat-row-select mat-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-footer-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-header-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-footer-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-header-cell:nth-child(n+3):nth-last-child(n+2){padding:0 5px}:host .tb-table-widget .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{border-color:var(--mat-tab-header-pagination-disabled-icon-color)}:host .mat-mdc-input-element::placeholder{color:var(--mat-table-header-headline-color)}:host .mat-mdc-table .mat-mdc-header-row{background-color:var(--tb-orig-background-color)}:host .mat-mdc-table .mat-mdc-cell.mat-mdc-table-sticky,:host .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky{background-color:var(--tb-orig-background-color)}:host .mat-mdc-table .mat-mdc-row{background-color:#0000}:host .mat-mdc-table .mat-mdc-row.tb-current-entity{background-color:var(--tb-current-entity-color)}:host .mat-mdc-table .mat-mdc-row.tb-current-entity .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-current-entity-sticky-color)}:host .mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity){background-color:var(--tb-hover-color)}:host .mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-hover-sticky-color)}:host .mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity){background-color:var(--tb-selected-color)}:host .mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-selected-sticky-color)}:host .mat-mdc-table .mat-mdc-row,:host .mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky{transition:background-color .2s;background-color:var(--tb-orig-background-color)}:host-context(.tb-has-timewindow) .tb-table-widget mat-toolbar{height:65px;max-height:65px}:host-context(.tb-has-timewindow) .tb-table-widget mat-toolbar .mat-toolbar-tools{height:65px;max-height:65px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: true }] }], loadingState: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingState", required: true }] }], widgetTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetTitle", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectionEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabled", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], bulkActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkActions", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], expansionTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansionTrackBy", required: false }] }], selectionTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionTrackBy", required: false }] }], clearSelectionTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSelectionTrigger", required: false }] }], pageLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLink", required: false }] }, { type: i0.Output, args: ["pageLinkChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], headerActionClick: [{ type: i0.Output, args: ["headerActionClick"] }], bulkActionClick: [{ type: i0.Output, args: ["bulkActionClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], searchInputField: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], tableScrollContainer: [{ type: i0.ViewChild, args: ['tableScrollContainer', { isSignal: true }] }] } });
+            args: [{ standalone: true, imports: [CommonModule, SharedModule, LoadingOverlayComponent, CdkScrollableModule, MatCheckboxModule], selector: 'tb-cd-base-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tb-table-widget tb-absolute-fill\" [style]=\"tableColorStyle()\">\n  <div class=\"tb-absolute-fill flex flex-1 flex-col\">\n    <mat-toolbar\n      class=\"mat-mdc-table-toolbar\"\n      [class.!hidden]=\"toolbarMode() !== 'default'\"\n      [style.background-color]=\"backgroundColor() || null\"\n      [style.color]=\"color() || null\">\n      <span\n        class=\"tb-entity-table-title\"\n        [ngStyle]=\"titleStyle()\"\n        [matTooltip]=\"widgetTitle() | translate\"\n        matTooltipPosition=\"above\"\n        [matTooltipShowDelay]=\"500\"\n        [matTooltipHideDelay]=\"200\">\n        {{ widgetTitle() | translate }}\n      </span>\n      <span class=\"flex-1\"></span>\n      @for (action of visibleHeaderActions(); track action.id) {\n        @if (action.menuItems?.length) {\n          <button\n            mat-icon-button\n            [attr.data-testid]=\"action.id\"\n            [disabled]=\"action.disabled ? action.disabled() : false\"\n            [matMenuTriggerFor]=\"headerDropdown\"\n            [matTooltip]=\"action.label ? (action.label | translate) : null\"\n            matTooltipPosition=\"above\">\n            <mat-icon>{{ action.icon }}</mat-icon>\n          </button>\n          <mat-menu #headerDropdown=\"matMenu\" xPosition=\"before\" class=\"tb-cdu-actions-menu\">\n            @for (item of action.menuItems!; track item.id) {\n              <button\n                mat-menu-item\n                [disabled]=\"item.disabled ? item.disabled() : false\"\n                (click)=\"item.handler && item.handler()\">\n                <mat-icon>{{ item.icon }}</mat-icon>\n                <span>{{ item.label ? (item.label | translate) : '' }}</span>\n              </button>\n            }\n          </mat-menu>\n        } @else {\n          <button\n            mat-icon-button\n            [attr.data-testid]=\"action.id\"\n            [disabled]=\"action.disabled ? action.disabled() : false\"\n            (click)=\"onHeaderActionClick($event, action)\"\n            [matTooltip]=\"action.label ? (action.label | translate) : null\"\n            matTooltipPosition=\"above\">\n            <mat-icon>{{ action.icon }}</mat-icon>\n          </button>\n        }\n      }\n      <button\n        mat-icon-button\n        [disabled]=\"loadingState().phase !== LoadingPhase.IDLE\"\n        (click)=\"enterFilterMode()\"\n        matTooltip=\"{{ 'action.search' | translate }}\"\n        matTooltipPosition=\"above\">\n        <mat-icon>search</mat-icon>\n      </button>\n    </mat-toolbar>\n    <mat-toolbar\n      class=\"mat-mdc-table-toolbar\"\n      [class.!hidden]=\"toolbarMode() !== 'search'\"\n      [style.background-color]=\"backgroundColor() || null\"\n      [style.color]=\"color() || null\">\n      <div class=\"mat-toolbar-tools\">\n        <button mat-icon-button matTooltip=\"{{ 'action.search' | translate }}\" matTooltipPosition=\"above\">\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-form-field class=\"flex-1\">\n          <mat-label>&nbsp;</mat-label>\n          <input #searchInput matInput [formControl]=\"searchControl\" placeholder=\"{{ 'entity.search' | translate }}\" />\n        </mat-form-field>\n        <button\n          mat-icon-button\n          (click)=\"exitFilterMode()\"\n          matTooltip=\"{{ 'action.close' | translate }}\"\n          matTooltipPosition=\"above\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </mat-toolbar>\n    @if (selectionEnabled()) {\n      <mat-toolbar\n        class=\"mat-mdc-table-toolbar mat-mdc-table-toolbar--bulk\"\n        [class.!hidden]=\"toolbarMode() !== 'bulk'\"\n        [style.background-color]=\"backgroundColor() || null\"\n        [style.color]=\"color() || null\">\n        <span class=\"tb-entity-table-title\"\n          >{{ selection.selected.length }} {{ 'widgets.segmented-button.selected' | translate }}</span\n        >\n        <span class=\"flex-1\"></span>\n        @for (action of visibleBulkActions(); track action.id) {\n          @if (action.menuItems?.length) {\n            <button\n              mat-icon-button\n              [disabled]=\"action.disabled ? action.disabled(selection.selected) : false\"\n              [matMenuTriggerFor]=\"bulkActionMenu\"\n              [matTooltip]=\"action.label ? (action.label | translate) : null\"\n              matTooltipPosition=\"above\">\n              <mat-icon>{{ action.icon }}</mat-icon>\n            </button>\n            <mat-menu #bulkActionMenu=\"matMenu\" xPosition=\"before\" class=\"tb-cdu-actions-menu\">\n              @for (item of action.menuItems!; track item.id) {\n                <button\n                  mat-menu-item\n                  [disabled]=\"item.disabled ? item.disabled(selection.selected) : false\"\n                  (click)=\"item.handler(selection.selected)\">\n                  <mat-icon>{{ item.icon }}</mat-icon>\n                  <span>{{ item.label ? (item.label | translate) : '' }}</span>\n                </button>\n              }\n            </mat-menu>\n          } @else {\n            <button\n              mat-icon-button\n              [disabled]=\"action.disabled ? action.disabled(selection.selected) : false\"\n              (click)=\"onBulkActionClick($event, action)\"\n              [matTooltip]=\"action.label ? (action.label | translate) : null\"\n              matTooltipPosition=\"above\">\n              <mat-icon>{{ action.icon }}</mat-icon>\n            </button>\n          }\n        }\n        <button\n          mat-icon-button\n          (click)=\"clearSelection()\"\n          matTooltip=\"{{ 'action.close' | translate }}\"\n          matTooltipPosition=\"above\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </mat-toolbar>\n    }\n    <div\n      #tableScrollContainer\n      cdkScrollable\n      class=\"table-container flex-1 relative\"\n      [style.overflow]=\"loadingState().phase !== LoadingPhase.IDLE ? 'hidden' : 'auto'\">\n      @if (loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING) {\n        <tb-cd-loading-overlay [state]=\"loadingState()\"></tb-cd-loading-overlay>\n      }\n\n      <table\n        mat-table\n        [dataSource]=\"dataSource()\"\n        [style.color]=\"color() || null\"\n        [multiTemplateDataRows]=\"true\"\n        matSort\n        [matSortActive]=\"pageLink().sortOrder?.property || ''\"\n        [matSortDirection]=\"pageLinkSortDirection()\"\n        (matSortChange)=\"onSort($event)\">\n        @if (selectionEnabled()) {\n          <ng-container matColumnDef=\"select\" sticky>\n            <mat-header-cell *matHeaderCellDef class=\"select-cell\">\n              <mat-checkbox [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\" (change)=\"masterToggle()\">\n              </mat-checkbox>\n            </mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"select-cell\">\n              <mat-checkbox\n                [checked]=\"selection.isSelected(entity)\"\n                (change)=\"toggleRow(entity)\"\n                (click)=\"$event.stopPropagation()\">\n              </mat-checkbox>\n            </mat-cell>\n          </ng-container>\n        }\n        @for (column of columns(); track column.def) {\n          <ng-container [matColumnDef]=\"column.def\">\n            <mat-header-cell\n              *matHeaderCellDef\n              mat-sort-header\n              [disabled]=\"!column.sortable\"\n              [ngStyle]=\"columnHeaderStyle()\"\n              [style]=\"column.headerStyle\"\n              class=\"column-header\">\n              {{ column.title | translate }}\n            </mat-header-cell>\n\n            <mat-cell\n              *matCellDef=\"let entity; let row = index\"\n              [style]=\"entity[column.def + '_style']\"\n              (click)=\"onCellClick($event, entity, column)\">\n              @if (column.cellTemplate) {\n                <ng-container\n                  [ngTemplateOutlet]=\"column.cellTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entity[column.name], entity: entity }\"></ng-container>\n              } @else {\n                {{ entity[column.name] ?? (column.nullDisplayValue ? (column.nullDisplayValue | translate) : '') }}\n              }\n            </mat-cell>\n          </ng-container>\n        }\n        @if (rowActions().length > 0 || expandable()) {\n          <ng-container matColumnDef=\"actions\" stickyEnd>\n            <mat-header-cell *matHeaderCellDef class=\"actions-cell\"></mat-header-cell>\n            <mat-cell *matCellDef=\"let entity\" class=\"actions-cell\">\n              <div class=\"actions-cell-inner\">\n                <div class=\"actions-buttons-full\">\n                  @for (action of rowActions(); track action.id) {\n                    @if (!action.visible || action.visible(entity)) {\n                      @if (action.menuItems?.length) {\n                        <button\n                          mat-icon-button\n                          [attr.data-testid]=\"action.id\"\n                          [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                          [matMenuTriggerFor]=\"rowSubMenu\"\n                          (click)=\"$event.stopPropagation()\"\n                          [matTooltip]=\"action.label ? (action.label | translate) : null\"\n                          matTooltipPosition=\"above\">\n                          <mat-icon>{{ action.icon }}</mat-icon>\n                        </button>\n                        <mat-menu #rowSubMenu=\"matMenu\" xPosition=\"before\" class=\"tb-cdu-actions-menu\">\n                          @for (item of action.menuItems!; track item.id) {\n                            <button\n                              mat-menu-item\n                              [disabled]=\"item.disabled ? item.disabled(entity) : false\"\n                              (click)=\"item.handler(entity)\">\n                              <mat-icon>{{ item.icon }}</mat-icon>\n                              <span>{{ item.label ? (item.label | translate) : '' }}</span>\n                            </button>\n                          }\n                        </mat-menu>\n                      } @else {\n                        <button\n                          mat-icon-button\n                          [attr.data-testid]=\"action.id\"\n                          [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                          (click)=\"onActionClick($event, entity, action)\"\n                          [matTooltip]=\"action.label ? (action.label | translate) : null\"\n                          matTooltipPosition=\"above\">\n                          <mat-icon>{{ action.icon }}</mat-icon>\n                        </button>\n                      }\n                    }\n                  }\n                  @if (expandable()) {\n                    <button mat-icon-button data-testid=\"expand-row\" (click)=\"onExpandToggleClick($event, entity)\">\n                      <mat-icon>{{ isExpanded(entity) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                    </button>\n                  }\n                </div>\n                <div class=\"actions-buttons-menu\">\n                  <button\n                    mat-icon-button\n                    [matMenuTriggerFor]=\"actionsMenu\"\n                    (click)=\"$event.stopPropagation()\"\n                    matTooltip=\"{{ 'action.actions' | translate }}\"\n                    matTooltipPosition=\"above\">\n                    <mat-icon>more_vert</mat-icon>\n                  </button>\n                  <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\" class=\"tb-cdu-actions-menu\">\n                    @for (action of rowActions(); track action.id) {\n                      @if (!action.visible || action.visible(entity)) {\n                        @if (action.menuItems?.length) {\n                          @for (item of action.menuItems!; track item.id) {\n                            <button\n                              mat-menu-item\n                              [disabled]=\"item.disabled ? item.disabled(entity) : false\"\n                              (click)=\"item.handler(entity)\">\n                              <mat-icon>{{ item.icon }}</mat-icon>\n                              <span>{{ item.label ? (item.label | translate) : '' }}</span>\n                            </button>\n                          }\n                        } @else {\n                          <button\n                            mat-menu-item\n                            [disabled]=\"action.disabled ? action.disabled(entity) : false\"\n                            (click)=\"onActionClick($event, entity, action)\">\n                            <mat-icon>{{ action.icon }}</mat-icon>\n                            <span>{{ action.label || '' | translate }}</span>\n                          </button>\n                        }\n                      }\n                    }\n                    @if (expandable()) {\n                      <button mat-menu-item (click)=\"onExpandToggleClick($event, entity)\">\n                        <mat-icon>{{ isExpanded(entity) ? 'expand_less' : 'expand_more' }}</mat-icon>\n                        <span>{{ (isExpanded(entity) ? 'action.collapse' : 'action.expand') | translate }}</span>\n                      </button>\n                    }\n                  </mat-menu>\n                </div>\n              </div>\n            </mat-cell>\n          </ng-container>\n        }\n        @if (expandable()) {\n          <ng-container matColumnDef=\"expandedDetail\">\n            <td\n              mat-cell\n              *matCellDef=\"let entity\"\n              class=\"expanded-detail-cell\"\n              [attr.colspan]=\"effectiveDisplayedColumns().length\"\n              [attr.data-expand-key]=\"expansionTrackBy()(entity)\">\n              @if (isExpanded(entity) && expandedRowTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"expandedRowTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entity, entity: entity }\"></ng-container>\n              }\n            </td>\n          </ng-container>\n        }\n        <mat-header-row *matHeaderRowDef=\"effectiveDisplayedColumns(); sticky: true\"></mat-header-row>\n        <mat-row\n          [class.invisible]=\"isLoadingState()\"\n          [class.tb-expandable]=\"expandable()\"\n          *matRowDef=\"let entity; columns: effectiveDisplayedColumns(); let row = index\"\n          (click)=\"onRowClick($event, entity)\"></mat-row>\n        @if (expandable()) {\n          <tr\n            mat-row\n            *matRowDef=\"let entity; when: isExpandedRow; columns: detailRowColumns()\"\n            class=\"detail-row\"\n            [class.invisible]=\"\n              loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING\n            \"></tr>\n        }\n      </table>\n      @if (loadingState().phase === LoadingPhase.IDLE && dataSource().length === 0) {\n        <span class=\"no-data-found flex items-center justify-center\">\n          {{ noDataMessage() | translate }}\n        </span>\n      }\n      @if (loadingState().phase === LoadingPhase.FETCHING) {\n        <tb-cd-loading-overlay [state]=\"loadingState()\"></tb-cd-loading-overlay>\n      }\n    </div>\n    <mat-divider></mat-divider>\n    <mat-paginator\n      [style.background-color]=\"backgroundColor() || null\"\n      [style.color]=\"color() || null\"\n      [selectConfig]=\"paginatorSelectConfig\"\n      [disabled]=\"loadingState().phase === LoadingPhase.GENERATING || loadingState().phase === LoadingPhase.POLLING\"\n      [length]=\"totalElements()\"\n      [pageIndex]=\"pageLink().page\"\n      [pageSize]=\"pageLink().pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions()\"\n      (page)=\"onPaginate($event)\"\n      showFirstLastButtons></mat-paginator>\n  </div>\n</div>\n", styles: [":host{width:100%;height:100%;display:block;position:relative}:host .mat-mdc-icon-button{--mat-icon-button-state-layer-color: transparent;--mat-icon-button-ripple-color: transparent}:host ::ng-deep .mat-mdc-icon-button,:host ::ng-deep .mat-mdc-icon-button .mat-icon{color:var(--tb-cdu-fg-color)!important}:host ::ng-deep .mat-mdc-table .mat-mdc-cell{color:var(--tb-cdu-fg-color)!important}:host ::ng-deep mat-paginator{--mat-paginator-enabled-icon-color: var(--tb-cdu-fg-color);--mat-paginator-disabled-icon-color: var(--tb-cdu-fg-color);--mat-paginator-container-text-color: var(--tb-cdu-fg-color);--mat-paginator-container-background-color: var(--tb-cdu-bg-color)}:host ::ng-deep mat-paginator .mat-mdc-select-value,:host ::ng-deep mat-paginator .mat-mdc-select-arrow,:host ::ng-deep mat-paginator .mat-mdc-select-trigger,:host ::ng-deep mat-paginator .mat-mdc-paginator-range-label,:host ::ng-deep mat-paginator .mat-mdc-paginator-page-size-label{color:var(--tb-cdu-fg-color)!important}:host .tb-table-widget .table-container{position:relative;background-color:var(--tb-cdu-bg-color, transparent)}:host .tb-table-widget .mat-mdc-table-toolbar{padding:0 12px}:host .tb-table-widget .mat-mdc-table-toolbar .tb-entity-table-title{color:var(--tb-cdu-fg-color, rgb(144, 144, 144));font-size:16px;font-weight:700;letter-spacing:normal;padding:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tb-table-widget .mat-mdc-table-toolbar--bulk{background-color:var(--tb-cdu-bg-color, #e8f0fe)}:host .tb-table-widget .mat-mdc-table-toolbar--bulk .tb-entity-table-title{color:var(--tb-cdu-fg-color, rgba(0, 0, 0, .5411764706))}:host .tb-table-widget .mat-mdc-table{background-color:var(--tb-cdu-bg-color, inherit)}:host .tb-table-widget .mat-mdc-table .column-header{color:var(--tb-cdu-fg-color, rgba(0, 0, 0, .5411764706));font-size:14px}:host .tb-table-widget .mat-mdc-table .mat-mdc-header-cell{background-color:var(--tb-cdu-bg-color, #ffffff)}:host .tb-table-widget .mat-mdc-table .mat-mdc-row{background-color:var(--tb-cdu-bg-color, inherit)}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.invisible{visibility:hidden}:host .tb-table-widget .mat-mdc-table .select-cell{flex:0 0 48px;padding-right:0}:host .tb-table-widget .mat-mdc-table .actions-cell{white-space:nowrap;padding:0}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner{display:flex;justify-content:flex-end;align-items:center}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-menu{display:none}@media(max-width:599px){:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-full{display:none}:host .tb-table-widget .mat-mdc-table .actions-cell .actions-cell-inner .actions-buttons-menu{display:flex}}:host .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.select-cell,:host .tb-table-widget .mat-mdc-table .mat-mdc-row .mat-mdc-cell.actions-cell{background-color:var(--tb-cdu-bg-color, #ffffff);z-index:2!important}:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover{background-color:color-mix(in srgb,var(--tb-cdu-bg-color, white) 92%,var(--tb-cdu-fg-color, #000000) 8%)}:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover .mat-mdc-cell.select-cell,:host .tb-table-widget .mat-mdc-table .mat-mdc-row:hover .mat-mdc-cell.actions-cell{background-color:color-mix(in srgb,var(--tb-cdu-bg-color, white) 92%,var(--tb-cdu-fg-color, #000000) 8%)}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.tb-expandable{cursor:pointer}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row{min-height:0;cursor:default}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row:hover{background-color:inherit}:host .tb-table-widget .mat-mdc-table .mat-mdc-row.detail-row .expanded-detail-cell{padding:0;overflow:hidden}:host .tb-table-widget span.no-data-found{position:absolute;inset:60px 0 0}\n", ":host .tb-table-widget .mat-mdc-table,:host .tb-table-widget .mat-mdc-paginator,:host .tb-table-widget mat-toolbar.mat-mdc-table-toolbar:not([color=primary]){background:transparent}:host .tb-table-widget mat-toolbar{height:39px;max-height:39px}:host .tb-table-widget mat-toolbar .mat-toolbar-tools{height:39px;max-height:39px}:host .tb-table-widget .table-container{overflow:auto}:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-footer-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row:not(.mat-row-select) mat-header-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-footer-cell:nth-child(n+2):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row:not(.mat-row-select) mat-header-cell:nth-child(n+2):nth-last-child(n+2){padding:0 5px}:host .tb-table-widget .mat-mdc-row.mat-row-select mat-cell:nth-child(2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-footer-cell:nth-child(2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-header-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-footer-cell:nth-child(2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-header-cell:nth-child(2){padding:0 5px}:host .tb-table-widget .mat-mdc-row.mat-row-select mat-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-footer-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-row.mat-row-select mat-header-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-footer-cell:nth-child(n+3):nth-last-child(n+2),:host .tb-table-widget .mat-mdc-header-row.mat-row-select mat-header-cell:nth-child(n+3):nth-last-child(n+2){padding:0 5px}:host .tb-table-widget .mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{border-color:var(--mat-tab-header-pagination-disabled-icon-color)}:host .mat-mdc-input-element::placeholder{color:var(--mat-table-header-headline-color)}:host .mat-mdc-table .mat-mdc-header-row{background-color:var(--tb-orig-background-color)}:host .mat-mdc-table .mat-mdc-cell.mat-mdc-table-sticky,:host .mat-mdc-table .mat-mdc-header-cell.mat-mdc-table-sticky{background-color:var(--tb-orig-background-color)}:host .mat-mdc-table .mat-mdc-row{background-color:#0000}:host .mat-mdc-table .mat-mdc-row.tb-current-entity{background-color:var(--tb-current-entity-color)}:host .mat-mdc-table .mat-mdc-row.tb-current-entity .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-current-entity-sticky-color)}:host .mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity){background-color:var(--tb-hover-color)}:host .mat-mdc-table .mat-mdc-row:hover:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-hover-sticky-color)}:host .mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity){background-color:var(--tb-selected-color)}:host .mat-mdc-table .mat-mdc-row.mat-row-select.mat-selected:not(.tb-current-entity) .mat-mdc-cell.mat-mdc-table-sticky{background-color:var(--tb-selected-sticky-color)}:host .mat-mdc-table .mat-mdc-row,:host .mat-mdc-table .mat-mdc-row .mat-mdc-cell.mat-mdc-table-sticky{transition:background-color .2s;background-color:var(--tb-orig-background-color)}:host-context(.tb-has-timewindow) .tb-table-widget mat-toolbar{height:65px;max-height:65px}:host-context(.tb-has-timewindow) .tb-table-widget mat-toolbar .mat-toolbar-tools{height:65px;max-height:65px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: true }] }], loadingState: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingState", required: true }] }], widgetTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetTitle", required: false }] }], noDataMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataMessage", required: false }] }], titleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleStyle", required: false }] }], columnHeaderStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHeaderStyle", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], selectionEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabled", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], bulkActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkActions", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], expansionTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "expansionTrackBy", required: false }] }], selectionTrackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionTrackBy", required: false }] }], clearSelectionTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSelectionTrigger", required: false }] }], pageLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageLink", required: false }] }, { type: i0.Output, args: ["pageLinkChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], headerActionClick: [{ type: i0.Output, args: ["headerActionClick"] }], bulkActionClick: [{ type: i0.Output, args: ["bulkActionClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], expansionChange: [{ type: i0.Output, args: ["expansionChange"] }], searchInputField: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], tableScrollContainer: [{ type: i0.ViewChild, args: ['tableScrollContainer', { isSignal: true }] }] } });
 
 class TbSubscriptionDatasource {
     config;