@dmytrokhylko/tb-cdu-ui 0.1.7 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,581 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, output, computed, Component, model, signal, viewChild, inject, Injector, DestroyRef, effect, untracked, afterNextRender, ChangeDetectionStrategy } from '@angular/core';
3
+ import * as i1 from '@angular/material/button';
4
+ import { MatButtonModule } from '@angular/material/button';
5
+ import * as i2 from '@angular/material/icon';
6
+ import { MatIconModule } from '@angular/material/icon';
7
+ import { SelectionModel } from '@angular/cdk/collections';
8
+ import * as i6 from '@angular/cdk/scrolling';
9
+ import { CdkScrollableModule } from '@angular/cdk/scrolling';
10
+ import * as i1$2 from '@angular/common';
11
+ import { CommonModule } from '@angular/common';
12
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
13
+ import * as i14 from '@angular/forms';
14
+ import { FormControl } from '@angular/forms';
15
+ import * as i3 from '@angular/material/checkbox';
16
+ import { MatCheckboxModule } from '@angular/material/checkbox';
17
+ import * as i10 from '@angular/material/table';
18
+ import { MatTable } from '@angular/material/table';
19
+ import { PageLink, Direction, SharedModule, EntityKeyType } from '@shared/public-api';
20
+ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
21
+ import * as i1$1 from '@angular/material/progress-spinner';
22
+ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
23
+ import * as i2$1 from '@ngx-translate/core';
24
+ import { TranslateModule } from '@ngx-translate/core';
25
+ import * as i5 from '@angular/material/input';
26
+ import * as i7 from '@angular/material/toolbar';
27
+ import * as i8 from '@angular/material/menu';
28
+ import * as i9 from '@angular/material/tooltip';
29
+ import * as i11 from '@angular/material/paginator';
30
+ import * as i12 from '@angular/material/sort';
31
+ import * as i13 from '@angular/material/divider';
32
+ import { findEntityKeyByColumnDef } from '@home/components/public-api';
33
+
34
+ class ActionButtonComponent {
35
+ icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : []));
36
+ label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : []));
37
+ backgroundColor = input(null, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
38
+ textColor = input(null, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
39
+ clicked = output();
40
+ resolvedBackgroundColor = computed(() => {
41
+ const bg = this.backgroundColor();
42
+ if (!bg)
43
+ return null;
44
+ return bg.startsWith('--') ? `var(${bg})` : bg;
45
+ }, ...(ngDevMode ? [{ debugName: "resolvedBackgroundColor" }] : []));
46
+ resolvedTextColor = computed(() => {
47
+ const color = this.textColor();
48
+ if (!color)
49
+ return null;
50
+ return color.startsWith('--') ? `var(${color})` : color;
51
+ }, ...(ngDevMode ? [{ debugName: "resolvedTextColor" }] : []));
52
+ handleClick() {
53
+ this.clicked.emit();
54
+ }
55
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
56
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ActionButtonComponent, isStandalone: true, selector: "tb-cd-action-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
57
+ }
58
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ActionButtonComponent, decorators: [{
59
+ type: Component,
60
+ 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"] }]
61
+ }], 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"] }] } });
62
+
63
+ const DEFAULT_PAGE_LINK_PAGE_SIZE = 20;
64
+ const DEFAULT_PAGE_SIZES = [
65
+ DEFAULT_PAGE_LINK_PAGE_SIZE,
66
+ DEFAULT_PAGE_LINK_PAGE_SIZE * 5,
67
+ DEFAULT_PAGE_LINK_PAGE_SIZE * 10,
68
+ ];
69
+
70
+ var LoadingPhase;
71
+ (function (LoadingPhase) {
72
+ LoadingPhase["IDLE"] = "idle";
73
+ LoadingPhase["GENERATING"] = "generating";
74
+ LoadingPhase["POLLING"] = "polling";
75
+ LoadingPhase["FETCHING"] = "fetching";
76
+ })(LoadingPhase || (LoadingPhase = {}));
77
+ const getLoadingState = {
78
+ idle: () => ({ phase: LoadingPhase.IDLE }),
79
+ generating: () => ({ phase: LoadingPhase.GENERATING }),
80
+ polling: (processed, total) => ({
81
+ phase: LoadingPhase.POLLING,
82
+ processed,
83
+ total,
84
+ }),
85
+ fetching: () => ({ phase: LoadingPhase.FETCHING }),
86
+ };
87
+
88
+ class LoadingOverlayComponent {
89
+ state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
90
+ mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : []));
91
+ generating = input('loading.generating', ...(ngDevMode ? [{ debugName: "generating" }] : []));
92
+ processingDeterminate = input('loading.polling.determinate', ...(ngDevMode ? [{ debugName: "processingDeterminate" }] : []));
93
+ processingIndeterminate = input('loading.polling.indeterminate', ...(ngDevMode ? [{ debugName: "processingIndeterminate" }] : []));
94
+ fetching = input('loading.fetching', ...(ngDevMode ? [{ debugName: "fetching" }] : []));
95
+ LoadingPhase = LoadingPhase;
96
+ spinnerMode = computed(() => {
97
+ if (this.state().phase !== LoadingPhase.POLLING || this.mode() !== 'determinate') {
98
+ return 'indeterminate';
99
+ }
100
+ return this.percentage() > 0 ? 'determinate' : 'indeterminate';
101
+ }, ...(ngDevMode ? [{ debugName: "spinnerMode" }] : []));
102
+ percentage = computed(() => {
103
+ const state = this.state();
104
+ return state.phase === LoadingPhase.POLLING && state.total > 0
105
+ ? Math.floor((state.processed / state.total) * 100)
106
+ : 0;
107
+ }, ...(ngDevMode ? [{ debugName: "percentage" }] : []));
108
+ pollingProcessed = computed(() => {
109
+ const state = this.state();
110
+ return state.phase === LoadingPhase.POLLING ? state.processed : 0;
111
+ }, ...(ngDevMode ? [{ debugName: "pollingProcessed" }] : []));
112
+ pollingTotal = computed(() => {
113
+ const state = this.state();
114
+ return state.phase === LoadingPhase.POLLING ? state.total : 0;
115
+ }, ...(ngDevMode ? [{ debugName: "pollingTotal" }] : []));
116
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
117
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: LoadingOverlayComponent, isStandalone: true, selector: "tb-cd-loading-overlay", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, generating: { classPropertyName: "generating", publicName: "generating", isSignal: true, isRequired: false, transformFunction: null }, processingDeterminate: { classPropertyName: "processingDeterminate", publicName: "processingDeterminate", isSignal: true, isRequired: false, transformFunction: null }, processingIndeterminate: { classPropertyName: "processingIndeterminate", publicName: "processingIndeterminate", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
118
+ }
119
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
120
+ type: Component,
121
+ 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"] }]
122
+ }], 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 }] }] } });
123
+
124
+ class BaseTableComponent {
125
+ dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
126
+ columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
127
+ displayedColumns = input.required(...(ngDevMode ? [{ debugName: "displayedColumns" }] : []));
128
+ loadingState = input.required(...(ngDevMode ? [{ debugName: "loadingState" }] : []));
129
+ widgetTitle = input('widget.widget-title', ...(ngDevMode ? [{ debugName: "widgetTitle" }] : []));
130
+ noDataMessage = input('entity.no-data', ...(ngDevMode ? [{ debugName: "noDataMessage" }] : []));
131
+ totalElements = input(0, ...(ngDevMode ? [{ debugName: "totalElements" }] : []));
132
+ pageSizeOptions = input(DEFAULT_PAGE_SIZES, ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
133
+ selectionEnabled = input(false, ...(ngDevMode ? [{ debugName: "selectionEnabled" }] : []));
134
+ rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
135
+ headerActions = input([], ...(ngDevMode ? [{ debugName: "headerActions" }] : []));
136
+ bulkActions = input([], ...(ngDevMode ? [{ debugName: "bulkActions" }] : []));
137
+ expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
138
+ expandedRowTemplate = input(null, ...(ngDevMode ? [{ debugName: "expandedRowTemplate" }] : []));
139
+ expansionTrackBy = input((entity) => entity, ...(ngDevMode ? [{ debugName: "expansionTrackBy" }] : []));
140
+ selectionTrackBy = input((entity) => entity, ...(ngDevMode ? [{ debugName: "selectionTrackBy" }] : []));
141
+ clearSelectionTrigger = input(undefined, ...(ngDevMode ? [{ debugName: "clearSelectionTrigger" }] : []));
142
+ pageLink = model(new PageLink(this.pageSizeOptions()[0]), ...(ngDevMode ? [{ debugName: "pageLink" }] : []));
143
+ rowClick = output();
144
+ cellClick = output();
145
+ actionClick = output();
146
+ headerActionClick = output();
147
+ bulkActionClick = output();
148
+ selectionChange = output();
149
+ expansionChange = output();
150
+ textSearchMode = signal(false, ...(ngDevMode ? [{ debugName: "textSearchMode" }] : []));
151
+ selection = new SelectionModel(true, []);
152
+ expandedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedKeys" }] : []));
153
+ lastExpandedKey = signal(null, ...(ngDevMode ? [{ debugName: "lastExpandedKey" }] : []));
154
+ detailRowColumns = computed(() => ['expandedDetail'], ...(ngDevMode ? [{ debugName: "detailRowColumns" }] : []));
155
+ selectionCount = signal(0, ...(ngDevMode ? [{ debugName: "selectionCount" }] : []));
156
+ isLoadingState = computed(() => {
157
+ return this.loadingState().phase === LoadingPhase.GENERATING || this.loadingState().phase === LoadingPhase.POLLING;
158
+ }, ...(ngDevMode ? [{ debugName: "isLoadingState" }] : []));
159
+ toolbarMode = computed(() => {
160
+ if (this.selectionEnabled() && this.selectionCount() > 0)
161
+ return 'bulk';
162
+ if (this.textSearchMode())
163
+ return 'search';
164
+ return 'default';
165
+ }, ...(ngDevMode ? [{ debugName: "toolbarMode" }] : []));
166
+ effectiveDisplayedColumns = computed(() => {
167
+ const cols = [...this.displayedColumns()];
168
+ if (this.selectionEnabled())
169
+ cols.unshift('select');
170
+ if (this.rowActions().length > 0 || this.expandable())
171
+ cols.push('actions');
172
+ return cols;
173
+ }, ...(ngDevMode ? [{ debugName: "effectiveDisplayedColumns" }] : []));
174
+ visibleHeaderActions = computed(() => this.headerActions().filter((action) => !action.visible || action.visible()), ...(ngDevMode ? [{ debugName: "visibleHeaderActions" }] : []));
175
+ visibleBulkActions = computed(() => this.bulkActions().filter((action) => !action.visible || action.visible()), ...(ngDevMode ? [{ debugName: "visibleBulkActions" }] : []));
176
+ pageLinkSortDirection = computed(() => {
177
+ const order = this.pageLink().sortOrder;
178
+ return order && order.direction ? order.direction.toLowerCase() : '';
179
+ }, ...(ngDevMode ? [{ debugName: "pageLinkSortDirection" }] : []));
180
+ searchControl = new FormControl('', { nonNullable: true });
181
+ searchInputField = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputField" }] : []));
182
+ table = viewChild((MatTable), ...(ngDevMode ? [{ debugName: "table" }] : []));
183
+ tableScrollContainer = viewChild('tableScrollContainer', ...(ngDevMode ? [{ debugName: "tableScrollContainer" }] : []));
184
+ LoadingPhase = LoadingPhase;
185
+ injector = inject(Injector);
186
+ destroyRef = inject(DestroyRef);
187
+ constructor() {
188
+ effect(() => {
189
+ const data = this.dataSource();
190
+ untracked(() => {
191
+ this.reconcileSelection(data);
192
+ this.reconcileExpansion(data);
193
+ });
194
+ });
195
+ let clearSelectionInitialized = false;
196
+ effect(() => {
197
+ this.clearSelectionTrigger();
198
+ if (!clearSelectionInitialized) {
199
+ clearSelectionInitialized = true;
200
+ return;
201
+ }
202
+ untracked(() => this.selection.clear());
203
+ });
204
+ this.selection.changed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
205
+ this.selectionCount.set(this.selection.selected.length);
206
+ this.selectionChange.emit(this.selection.selected);
207
+ });
208
+ }
209
+ ngAfterViewInit() {
210
+ if (this.pageLink().textSearch) {
211
+ this.searchControl.patchValue(this.pageLink().textSearch, { emitEvent: false });
212
+ }
213
+ this.searchControl.valueChanges
214
+ .pipe(debounceTime(300), distinctUntilChanged((prev, current) => (this.pageLink().textSearch ?? '') === current.trim()), takeUntilDestroyed(this.destroyRef))
215
+ .subscribe((searchValue) => {
216
+ const current = this.clone(this.pageLink());
217
+ current.textSearch = searchValue.trim();
218
+ current.page = 0;
219
+ this.pageLink.set(current);
220
+ });
221
+ }
222
+ onPaginate(event) {
223
+ const current = this.clone(this.pageLink());
224
+ current.page = event.pageIndex;
225
+ current.pageSize = event.pageSize;
226
+ this.pageLink.set(current);
227
+ }
228
+ onSort(event) {
229
+ const current = this.clone(this.pageLink());
230
+ current.sortOrder = event.direction
231
+ ? { property: event.active, direction: Direction[event.direction.toUpperCase()] }
232
+ : undefined;
233
+ current.page = 0;
234
+ this.pageLink.set(current);
235
+ }
236
+ enterFilterMode() {
237
+ this.textSearchMode.set(true);
238
+ afterNextRender(() => {
239
+ const input = this.searchInputField()?.nativeElement;
240
+ if (input) {
241
+ input.focus();
242
+ input.setSelectionRange(0, 0);
243
+ }
244
+ }, { injector: this.injector });
245
+ }
246
+ exitFilterMode() {
247
+ this.textSearchMode.set(false);
248
+ this.searchControl.reset();
249
+ }
250
+ isAllSelected() {
251
+ return this.selection.selected.length === this.dataSource().length && this.dataSource().length > 0;
252
+ }
253
+ isIndeterminate() {
254
+ return this.selection.selected.length > 0 && !this.isAllSelected();
255
+ }
256
+ masterToggle() {
257
+ if (this.isAllSelected()) {
258
+ this.selection.clear();
259
+ }
260
+ else {
261
+ this.dataSource().forEach((row) => this.selection.select(row));
262
+ }
263
+ }
264
+ toggleRow(entity) {
265
+ this.selection.toggle(entity);
266
+ }
267
+ clearSelection() {
268
+ this.selection.clear();
269
+ }
270
+ onCellClick(event, entity, column) {
271
+ this.cellClick.emit({ event, entity, column });
272
+ }
273
+ onRowClick(event, entity) {
274
+ if (this.expandable()) {
275
+ this.toggleExpansion(entity, event.currentTarget);
276
+ return;
277
+ }
278
+ this.rowClick.emit(entity);
279
+ }
280
+ isExpanded(entity) {
281
+ return this.expandedKeys().has(this.expansionTrackBy()(entity));
282
+ }
283
+ isExpandedRow = (_, row) => this.isExpanded(row);
284
+ toggleExpansion(entity, rowElement) {
285
+ const key = this.expansionTrackBy()(entity);
286
+ const nextKeys = new Set(this.expandedKeys());
287
+ const wasExpanded = nextKeys.has(key);
288
+ if (wasExpanded) {
289
+ nextKeys.delete(key);
290
+ }
291
+ else {
292
+ nextKeys.add(key);
293
+ }
294
+ this.expandedKeys.set(nextKeys);
295
+ this.emitExpansionChange();
296
+ this.table()?.renderRows();
297
+ if (wasExpanded) {
298
+ return;
299
+ }
300
+ this.lastExpandedKey.set(key);
301
+ if (!rowElement) {
302
+ return;
303
+ }
304
+ afterNextRender(() => {
305
+ this.scrollExpandedRowUnderHeader(rowElement);
306
+ this.lastExpandedKey.set(null);
307
+ }, { injector: this.injector });
308
+ }
309
+ scrollExpandedRowUnderHeader(rowElement) {
310
+ const container = this.tableScrollContainer()?.nativeElement;
311
+ if (!container) {
312
+ return;
313
+ }
314
+ const headerRow = container.querySelector('.mat-mdc-header-row');
315
+ const headerHeight = headerRow?.offsetHeight ?? 0;
316
+ const containerRect = container.getBoundingClientRect();
317
+ const rowRect = rowElement.getBoundingClientRect();
318
+ const targetScrollTop = container.scrollTop + rowRect.top - containerRect.top - headerHeight;
319
+ container.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
320
+ }
321
+ reconcileSelection(data) {
322
+ if (this.selection.isEmpty()) {
323
+ return;
324
+ }
325
+ const trackBy = this.selectionTrackBy();
326
+ const previousSelected = this.selection.selected;
327
+ const dataKeySet = new Set(data.map(trackBy));
328
+ const nextSelected = data.filter((entity) => {
329
+ const key = trackBy(entity);
330
+ return dataKeySet.has(key) && previousSelected.some((previous) => trackBy(previous) === key);
331
+ });
332
+ this.selection.clear();
333
+ if (nextSelected.length > 0) {
334
+ this.selection.select(...nextSelected);
335
+ }
336
+ }
337
+ reconcileExpansion(data) {
338
+ const previousKeys = this.expandedKeys();
339
+ if (previousKeys.size === 0) {
340
+ return;
341
+ }
342
+ const trackBy = this.expansionTrackBy();
343
+ const nextKeys = new Set();
344
+ for (const entity of data) {
345
+ const key = trackBy(entity);
346
+ if (previousKeys.has(key)) {
347
+ nextKeys.add(key);
348
+ }
349
+ }
350
+ if (nextKeys.size === previousKeys.size) {
351
+ return;
352
+ }
353
+ this.expandedKeys.set(nextKeys);
354
+ this.emitExpansionChange();
355
+ }
356
+ emitExpansionChange() {
357
+ const keys = this.expandedKeys();
358
+ const trackBy = this.expansionTrackBy();
359
+ const expandedEntities = this.dataSource().filter((entity) => keys.has(trackBy(entity)));
360
+ this.expansionChange.emit(expandedEntities);
361
+ }
362
+ onExpandToggleClick(event, entity) {
363
+ event.stopPropagation();
364
+ const rowElement = event.target.closest('mat-row');
365
+ this.toggleExpansion(entity, rowElement);
366
+ }
367
+ onActionClick(event, entity, action) {
368
+ event.stopPropagation();
369
+ if (action.handler) {
370
+ action.handler(entity);
371
+ }
372
+ else {
373
+ this.actionClick.emit({ event, entity, action });
374
+ }
375
+ }
376
+ onHeaderActionClick(event, action) {
377
+ if (action.handler) {
378
+ action.handler();
379
+ }
380
+ else {
381
+ this.headerActionClick.emit({ event, action });
382
+ }
383
+ }
384
+ onBulkActionClick(event, action) {
385
+ if (action.handler) {
386
+ action.handler(this.selection.selected);
387
+ }
388
+ else {
389
+ this.bulkActionClick.emit({ event, action, selected: this.selection.selected });
390
+ }
391
+ }
392
+ clone(link) {
393
+ return Object.assign(Object.create(Object.getPrototypeOf(link)), link);
394
+ }
395
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BaseTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
396
+ 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 });
397
+ }
398
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: BaseTableComponent, decorators: [{
399
+ type: Component,
400
+ 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"] }]
401
+ }], 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 }] }] } });
402
+
403
+ class TbSubscriptionDatasource {
404
+ config;
405
+ data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
406
+ loadingState = signal(getLoadingState.fetching(), ...(ngDevMode ? [{ debugName: "loadingState" }] : []));
407
+ subscription = null;
408
+ subscriptionSub = null;
409
+ constructor(config) {
410
+ this.config = config;
411
+ const injector = config.injector;
412
+ effect(() => {
413
+ const entityFilter = config.entityFilter();
414
+ untracked(() => this.recreateSubscription(entityFilter, config.widgetType));
415
+ }, { injector });
416
+ injector.get(DestroyRef).onDestroy(() => this.cleanup());
417
+ }
418
+ refresh() {
419
+ this.recreateSubscription(this.config.entityFilter(), this.config.widgetType);
420
+ }
421
+ recreateSubscription(entityFilter, widgetType) {
422
+ this.cleanup();
423
+ this.loadingState.set(getLoadingState.fetching());
424
+ const options = {
425
+ type: widgetType,
426
+ datasources: [
427
+ {
428
+ type: 'entity',
429
+ dataKeys: this.config.dataKeys,
430
+ entityFilter,
431
+ },
432
+ ],
433
+ hasDataPageLink: false,
434
+ useDashboardTimewindow: true,
435
+ callbacks: {
436
+ onDataUpdated: () => this.onDataUpdated(),
437
+ },
438
+ };
439
+ this.subscriptionSub = this.config.ctx
440
+ .subscriptionApi.createSubscription(options, true)
441
+ .subscribe((subscription) => {
442
+ this.subscription = subscription;
443
+ });
444
+ }
445
+ onDataUpdated() {
446
+ if (!this.subscription) {
447
+ return;
448
+ }
449
+ this.data.set(this.config.dataMapper(this.subscription));
450
+ this.loadingState.set(getLoadingState.idle());
451
+ this.config.ctx.detectChanges();
452
+ }
453
+ cleanup() {
454
+ this.subscriptionSub?.unsubscribe();
455
+ this.subscriptionSub = null;
456
+ this.subscription?.destroy();
457
+ this.subscription = null;
458
+ }
459
+ }
460
+ class TbSubscriptionDatasourcePaginated {
461
+ config;
462
+ data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
463
+ totalElements = signal(0, ...(ngDevMode ? [{ debugName: "totalElements" }] : []));
464
+ loadingState = signal(getLoadingState.fetching(), ...(ngDevMode ? [{ debugName: "loadingState" }] : []));
465
+ subscription = null;
466
+ subscriptionSub = null;
467
+ constructor(config) {
468
+ this.config = config;
469
+ const injector = config.injector;
470
+ effect(() => {
471
+ const entityFilter = config.entityFilter();
472
+ const pageLink = untracked(() => config.pageLink());
473
+ untracked(() => this.recreateSubscription(entityFilter, pageLink, config.widgetType));
474
+ }, { injector });
475
+ effect(() => {
476
+ const pageLink = config.pageLink();
477
+ untracked(() => {
478
+ if (this.subscription) {
479
+ this.subscription.subscribeForPaginatedData(0, this.toEntityPageLink(pageLink), config.keyFilters ?? []);
480
+ }
481
+ });
482
+ }, { injector });
483
+ injector.get(DestroyRef).onDestroy(() => this.cleanup());
484
+ }
485
+ refresh() {
486
+ if (this.subscription) {
487
+ this.subscription.subscribeForPaginatedData(0, this.toEntityPageLink(untracked(() => this.config.pageLink())), this.config.keyFilters ?? []);
488
+ }
489
+ }
490
+ recreateSubscription(entityFilter, pageLink, widgetType) {
491
+ this.cleanup();
492
+ this.loadingState.set(getLoadingState.fetching());
493
+ const options = {
494
+ type: widgetType,
495
+ datasources: [
496
+ {
497
+ type: 'entity',
498
+ dataKeys: this.config.dataKeys,
499
+ entityFilter,
500
+ },
501
+ ],
502
+ hasDataPageLink: true,
503
+ useDashboardTimewindow: true,
504
+ callbacks: {
505
+ onDataUpdated: () => this.onDataUpdated(),
506
+ },
507
+ };
508
+ this.subscriptionSub = this.config.ctx
509
+ .subscriptionApi.createSubscription(options, true)
510
+ .subscribe((subscription) => {
511
+ this.subscription = subscription;
512
+ subscription.subscribeForPaginatedData(0, this.toEntityPageLink(pageLink), this.config.keyFilters ?? []);
513
+ });
514
+ }
515
+ onDataUpdated() {
516
+ if (!this.subscription) {
517
+ return;
518
+ }
519
+ this.data.set(this.config.dataMapper(this.subscription));
520
+ this.totalElements.set(this.subscription.datasourcePages?.[0]?.totalElements ?? 0);
521
+ this.loadingState.set(getLoadingState.idle());
522
+ this.config.ctx.detectChanges();
523
+ }
524
+ toEntityPageLink(pageLink) {
525
+ const entityPageLink = {
526
+ page: pageLink.page,
527
+ pageSize: pageLink.pageSize,
528
+ textSearch: pageLink.textSearch,
529
+ dynamic: true,
530
+ };
531
+ if (pageLink.sortOrder) {
532
+ const entityKey = findEntityKeyByColumnDef(pageLink.sortOrder.property, this.config.columns);
533
+ if (entityKey) {
534
+ entityPageLink.sortOrder = {
535
+ key: entityKey,
536
+ direction: pageLink.sortOrder.direction,
537
+ };
538
+ }
539
+ }
540
+ else {
541
+ entityPageLink.sortOrder = {
542
+ key: { key: 'createdTime', type: EntityKeyType.ENTITY_FIELD },
543
+ direction: Direction.DESC,
544
+ };
545
+ }
546
+ return entityPageLink;
547
+ }
548
+ cleanup() {
549
+ this.subscriptionSub?.unsubscribe();
550
+ this.subscriptionSub = null;
551
+ this.subscription?.destroy();
552
+ this.subscription = null;
553
+ }
554
+ }
555
+ function collectSubscriptionData(subscription, valueTransformer) {
556
+ const itemMap = {};
557
+ for (const datasource of subscription.datasources ?? []) {
558
+ itemMap[datasource.name] = {
559
+ id: datasource.entity.id,
560
+ name: datasource.name,
561
+ };
562
+ }
563
+ for (const datasourceData of subscription.data ?? []) {
564
+ const item = itemMap[datasourceData.datasource.name];
565
+ if (!item) {
566
+ continue;
567
+ }
568
+ const rawValue = datasourceData.data[0]?.[1] ?? null;
569
+ item[datasourceData.dataKey.name] = valueTransformer
570
+ ? valueTransformer(datasourceData.dataKey.name, datasourceData.data[0])
571
+ : rawValue;
572
+ }
573
+ return Object.values(itemMap);
574
+ }
575
+
576
+ /**
577
+ * Generated bundle index. Do not edit.
578
+ */
579
+
580
+ export { ActionButtonComponent, BaseTableComponent, DEFAULT_PAGE_LINK_PAGE_SIZE, DEFAULT_PAGE_SIZES, LoadingOverlayComponent, LoadingPhase, TbSubscriptionDatasource, TbSubscriptionDatasourcePaginated, collectSubscriptionData, getLoadingState };
581
+ //# sourceMappingURL=dmytrokhylko-tb-cdu-ui-core.mjs.map