@dmytrokhylko/tb-cdu-ui 0.1.5 → 0.2.3
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.
- package/README.md +64 -37
- package/core/index.d.ts +254 -0
- package/fesm2022/dmytrokhylko-tb-cdu-ui-core.mjs +581 -0
- package/fesm2022/dmytrokhylko-tb-cdu-ui-core.mjs.map +1 -0
- package/fesm2022/dmytrokhylko-tb-cdu-ui-widgets.mjs +8 -0
- package/fesm2022/dmytrokhylko-tb-cdu-ui-widgets.mjs.map +1 -0
- package/fesm2022/dmytrokhylko-tb-cdu-ui.mjs +2 -577
- package/fesm2022/dmytrokhylko-tb-cdu-ui.mjs.map +1 -1
- package/index.d.ts +2 -254
- package/package.json +21 -13
- package/widgets/index.d.ts +2 -0
|
@@ -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> </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> </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
|