@paperless/angular 2.18.2 → 2.18.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/esm2020/lib/modules/table/components/table/table.component.mjs +92 -89
- package/fesm2015/paperless-angular.mjs +79 -76
- package/fesm2015/paperless-angular.mjs.map +1 -1
- package/fesm2020/paperless-angular.mjs +79 -76
- package/fesm2020/paperless-angular.mjs.map +1 -1
- package/lib/modules/table/components/table/table.component.d.ts +12 -12
- package/package.json +1 -1
|
@@ -3615,7 +3615,7 @@ const defaultSizeOptions = [12, 24, 68, 136];
|
|
|
3615
3615
|
let Table = class Table {
|
|
3616
3616
|
constructor(_cd) {
|
|
3617
3617
|
this._cd = _cd;
|
|
3618
|
-
this.className =
|
|
3618
|
+
this.className = "flex flex-col z-0";
|
|
3619
3619
|
this.theme = state.theme;
|
|
3620
3620
|
/**
|
|
3621
3621
|
* Wether data is loading
|
|
@@ -3660,7 +3660,7 @@ let Table = class Table {
|
|
|
3660
3660
|
/**
|
|
3661
3661
|
* The floating menu amount item text
|
|
3662
3662
|
*/
|
|
3663
|
-
this.floatingMenuAmountSelectedText =
|
|
3663
|
+
this.floatingMenuAmountSelectedText = "0 items selected";
|
|
3664
3664
|
/**
|
|
3665
3665
|
* Wether the floating menu has been shown atleast once
|
|
3666
3666
|
*/
|
|
@@ -3709,7 +3709,7 @@ let Table = class Table {
|
|
|
3709
3709
|
/**
|
|
3710
3710
|
* The action button icon
|
|
3711
3711
|
*/
|
|
3712
|
-
this.actionButtonIcon =
|
|
3712
|
+
this.actionButtonIcon = "pencil";
|
|
3713
3713
|
/**
|
|
3714
3714
|
* Wether the action button is enabled
|
|
3715
3715
|
*/
|
|
@@ -3776,11 +3776,11 @@ let Table = class Table {
|
|
|
3776
3776
|
*/
|
|
3777
3777
|
this.hideOnSinglePage = true;
|
|
3778
3778
|
/* Empty state start */
|
|
3779
|
-
this.emptyStateType =
|
|
3780
|
-
this.emptyStateIllustration =
|
|
3781
|
-
this.emptyStateActionIcon =
|
|
3779
|
+
this.emptyStateType = "no_filter";
|
|
3780
|
+
this.emptyStateIllustration = "table";
|
|
3781
|
+
this.emptyStateActionIcon = "plus";
|
|
3782
3782
|
this.enableEmptyStateAction = true;
|
|
3783
|
-
this.emptyStateFilteredIllustration =
|
|
3783
|
+
this.emptyStateFilteredIllustration = "search";
|
|
3784
3784
|
/**
|
|
3785
3785
|
* Wether to enable scrolling
|
|
3786
3786
|
*/
|
|
@@ -3806,10 +3806,10 @@ let Table = class Table {
|
|
|
3806
3806
|
this._ctrlDown = false;
|
|
3807
3807
|
this.filterModalShow$ = new BehaviorSubject(false);
|
|
3808
3808
|
this._rowActionsSubscriptions = [];
|
|
3809
|
-
this.filterModalHeaderText =
|
|
3810
|
-
this.filterModalSaveText =
|
|
3811
|
-
this.filterModalCancelText =
|
|
3812
|
-
this.filterModalResetText =
|
|
3809
|
+
this.filterModalHeaderText = "Filters";
|
|
3810
|
+
this.filterModalSaveText = "Save";
|
|
3811
|
+
this.filterModalCancelText = "Cancel";
|
|
3812
|
+
this.filterModalResetText = "Reset filters";
|
|
3813
3813
|
this.filterModalShowReset = false;
|
|
3814
3814
|
this.filterModalShowResetMobile = false;
|
|
3815
3815
|
this.filterModalShow = new EventEmitter();
|
|
@@ -3841,37 +3841,37 @@ let Table = class Table {
|
|
|
3841
3841
|
}
|
|
3842
3842
|
ngOnInit() {
|
|
3843
3843
|
this._parseItems(this.items);
|
|
3844
|
-
onStateChange(
|
|
3844
|
+
onStateChange("theme", (value) => this._checkTheme(value));
|
|
3845
3845
|
this.loadingRows = Array.from({
|
|
3846
3846
|
length: this.amountOfLoadingRows,
|
|
3847
3847
|
});
|
|
3848
3848
|
this.filterModalShow$
|
|
3849
3849
|
.pipe(untilDestroyed(this), distinctUntilChanged())
|
|
3850
|
-
.subscribe(value => this.filterModalShow.next(value));
|
|
3850
|
+
.subscribe((value) => this.filterModalShow.next(value));
|
|
3851
3851
|
}
|
|
3852
3852
|
ngOnChanges(changes) {
|
|
3853
|
-
if (changes[
|
|
3854
|
-
this._parseItems(changes[
|
|
3853
|
+
if (changes["items"]) {
|
|
3854
|
+
this._parseItems(changes["items"].currentValue);
|
|
3855
3855
|
}
|
|
3856
|
-
if (changes[
|
|
3856
|
+
if (changes["amountOfLoadingRows"]) {
|
|
3857
3857
|
this.loadingRows = Array.from({
|
|
3858
|
-
length: changes[
|
|
3858
|
+
length: changes["amountOfLoadingRows"].currentValue,
|
|
3859
3859
|
});
|
|
3860
3860
|
}
|
|
3861
3861
|
let calculateRowSelectionData = false;
|
|
3862
|
-
if (changes[
|
|
3862
|
+
if (changes["enableRowSelection"]) {
|
|
3863
3863
|
this._inputEnableRowSelection =
|
|
3864
|
-
changes[
|
|
3864
|
+
changes["enableRowSelection"].currentValue;
|
|
3865
3865
|
calculateRowSelectionData = true;
|
|
3866
3866
|
}
|
|
3867
|
-
if (changes[
|
|
3868
|
-
this._inputRowSelectionLimit = changes[
|
|
3867
|
+
if (changes["rowSelectionLimit"]) {
|
|
3868
|
+
this._inputRowSelectionLimit = changes["rowSelectionLimit"].currentValue;
|
|
3869
3869
|
calculateRowSelectionData = true;
|
|
3870
3870
|
}
|
|
3871
|
-
if (calculateRowSelectionData || changes[
|
|
3871
|
+
if (calculateRowSelectionData || changes["selectedRows"]) {
|
|
3872
3872
|
this._setRowSelectionData();
|
|
3873
3873
|
}
|
|
3874
|
-
if (changes[
|
|
3874
|
+
if (changes["enableScroll"]?.currentValue) {
|
|
3875
3875
|
this._checkChangesSubscriptions();
|
|
3876
3876
|
}
|
|
3877
3877
|
}
|
|
@@ -3897,19 +3897,19 @@ let Table = class Table {
|
|
|
3897
3897
|
this._calculateColumnWidths();
|
|
3898
3898
|
}
|
|
3899
3899
|
keyDown({ key }) {
|
|
3900
|
-
if (key !==
|
|
3900
|
+
if (key !== "Control" || this._ctrlDown === true) {
|
|
3901
3901
|
return;
|
|
3902
3902
|
}
|
|
3903
3903
|
this._ctrlDown = true;
|
|
3904
3904
|
}
|
|
3905
3905
|
keyUp({ key }) {
|
|
3906
|
-
if (key !==
|
|
3906
|
+
if (key !== "Control" || this._ctrlDown === false) {
|
|
3907
3907
|
return;
|
|
3908
3908
|
}
|
|
3909
3909
|
this._ctrlDown = false;
|
|
3910
3910
|
}
|
|
3911
3911
|
visibilityChange() {
|
|
3912
|
-
if (document.visibilityState !==
|
|
3912
|
+
if (document.visibilityState !== "hidden" || this._ctrlDown === false) {
|
|
3913
3913
|
return;
|
|
3914
3914
|
}
|
|
3915
3915
|
this._ctrlDown = false;
|
|
@@ -3950,7 +3950,7 @@ let Table = class Table {
|
|
|
3950
3950
|
if (!actions?.length) {
|
|
3951
3951
|
return [];
|
|
3952
3952
|
}
|
|
3953
|
-
return actions.filter(a => !a.showFunction || a.showFunction(this.parsedItems[rowIndex]));
|
|
3953
|
+
return actions.filter((a) => !a.showFunction || a.showFunction(this.parsedItems[rowIndex]));
|
|
3954
3954
|
}
|
|
3955
3955
|
onContainerXScroll(ev) {
|
|
3956
3956
|
if (!this.enableScroll) {
|
|
@@ -4017,7 +4017,7 @@ let Table = class Table {
|
|
|
4017
4017
|
}
|
|
4018
4018
|
for (let i = 0; i < this.selectedRows.length; i++) {
|
|
4019
4019
|
const value = this.selectedRows[i];
|
|
4020
|
-
const row = this.parsedItems.find(d => this._getSelectionValue(d, i) === this._getSelectionValue(value, i));
|
|
4020
|
+
const row = this.parsedItems.find((d) => this._getSelectionValue(d, i) === this._getSelectionValue(value, i));
|
|
4021
4021
|
if (!row) {
|
|
4022
4022
|
continue;
|
|
4023
4023
|
}
|
|
@@ -4066,7 +4066,7 @@ let Table = class Table {
|
|
|
4066
4066
|
return this.selectionKey ? row?.[this.selectionKey] || index : index;
|
|
4067
4067
|
}
|
|
4068
4068
|
_selectionContains(row, index, returnIndex = false) {
|
|
4069
|
-
const returnValue = this.selectedRows.findIndex(item => this._getSelectionValue(row, index) ===
|
|
4069
|
+
const returnValue = this.selectedRows.findIndex((item) => this._getSelectionValue(row, index) ===
|
|
4070
4070
|
this._getSelectionValue(item, index));
|
|
4071
4071
|
return !returnIndex ? returnValue >= 0 : returnValue;
|
|
4072
4072
|
}
|
|
@@ -4109,8 +4109,8 @@ let Table = class Table {
|
|
|
4109
4109
|
}
|
|
4110
4110
|
_rowClick($event, index) {
|
|
4111
4111
|
const target = $event.target;
|
|
4112
|
-
if (target.tagName.toLowerCase() ===
|
|
4113
|
-
target.type ===
|
|
4112
|
+
if (target.tagName.toLowerCase() === "input" ||
|
|
4113
|
+
target.type === "checkbox") {
|
|
4114
4114
|
return;
|
|
4115
4115
|
}
|
|
4116
4116
|
const row = this._findRow(target);
|
|
@@ -4137,17 +4137,17 @@ let Table = class Table {
|
|
|
4137
4137
|
this._checkboxChange(checkbox, index);
|
|
4138
4138
|
}
|
|
4139
4139
|
_getActionRouterLink(routerLink, rowIndex) {
|
|
4140
|
-
if (typeof routerLink ===
|
|
4140
|
+
if (typeof routerLink === "function") {
|
|
4141
4141
|
const item = this.parsedItems[rowIndex];
|
|
4142
4142
|
return this._getActionRouterLink(routerLink(item), rowIndex);
|
|
4143
4143
|
}
|
|
4144
|
-
if (typeof routerLink ===
|
|
4144
|
+
if (typeof routerLink === "string" || Array.isArray(routerLink)) {
|
|
4145
4145
|
return new BehaviorSubject(routerLink);
|
|
4146
4146
|
}
|
|
4147
4147
|
return routerLink;
|
|
4148
4148
|
}
|
|
4149
4149
|
_getActionQueryParams(queryParams, rowIndex) {
|
|
4150
|
-
if (typeof queryParams ===
|
|
4150
|
+
if (typeof queryParams === "function") {
|
|
4151
4151
|
const item = this.parsedItems[rowIndex];
|
|
4152
4152
|
return this._getActionQueryParams(queryParams(item), rowIndex);
|
|
4153
4153
|
}
|
|
@@ -4166,8 +4166,8 @@ let Table = class Table {
|
|
|
4166
4166
|
if (!action.action) {
|
|
4167
4167
|
return;
|
|
4168
4168
|
}
|
|
4169
|
-
if (action.type ===
|
|
4170
|
-
(action.type ===
|
|
4169
|
+
if (action.type === "multi" ||
|
|
4170
|
+
(action.type === "both" && rowIndex === undefined)) {
|
|
4171
4171
|
action.action.emit({
|
|
4172
4172
|
items: this.selectedRows,
|
|
4173
4173
|
multi: true,
|
|
@@ -4192,7 +4192,7 @@ let Table = class Table {
|
|
|
4192
4192
|
if (!el) {
|
|
4193
4193
|
return el;
|
|
4194
4194
|
}
|
|
4195
|
-
if (el?.tagName?.toLowerCase() ===
|
|
4195
|
+
if (el?.tagName?.toLowerCase() === "p-table-row") {
|
|
4196
4196
|
return el;
|
|
4197
4197
|
}
|
|
4198
4198
|
return this._findRow(el?.parentElement);
|
|
@@ -4201,11 +4201,11 @@ let Table = class Table {
|
|
|
4201
4201
|
if (!el) {
|
|
4202
4202
|
return null;
|
|
4203
4203
|
}
|
|
4204
|
-
if (el.getAttribute(
|
|
4205
|
-
el.getAttribute(
|
|
4204
|
+
if (el.getAttribute("data-is-action") !== null &&
|
|
4205
|
+
el.getAttribute("data-is-action") !== "false") {
|
|
4206
4206
|
return el;
|
|
4207
4207
|
}
|
|
4208
|
-
if (el?.tagName?.toLowerCase() ===
|
|
4208
|
+
if (el?.tagName?.toLowerCase() === "p-table-row") {
|
|
4209
4209
|
return null;
|
|
4210
4210
|
}
|
|
4211
4211
|
return this._findRowAction(el?.parentElement);
|
|
@@ -4225,14 +4225,14 @@ let Table = class Table {
|
|
|
4225
4225
|
subscription.unsubscribe();
|
|
4226
4226
|
}
|
|
4227
4227
|
}
|
|
4228
|
-
this._rowActionsSubscriptions = actions.map(action => action._loadingChanged
|
|
4228
|
+
this._rowActionsSubscriptions = actions.map((action) => action._loadingChanged
|
|
4229
4229
|
.pipe(untilDestroyed(this))
|
|
4230
4230
|
.subscribe(() => this._cd.detectChanges()));
|
|
4231
4231
|
// we hack this to any[] to make it work..
|
|
4232
|
-
const rowActionsRow = actions.filter(a => a.type ===
|
|
4233
|
-
const rowActionsFloating = actions.filter(a => (this._inputEnableRowSelection &&
|
|
4234
|
-
(a.type ===
|
|
4235
|
-
(mobile && a.type ===
|
|
4232
|
+
const rowActionsRow = actions.filter((a) => a.type === "both" || a.type === "single");
|
|
4233
|
+
const rowActionsFloating = actions.filter((a) => (this._inputEnableRowSelection &&
|
|
4234
|
+
(a.type === "both" || a.type === "multi")) ||
|
|
4235
|
+
(mobile && a.type === "single" && !a.routerLink));
|
|
4236
4236
|
let rowSelectionLimit = this._inputRowSelectionLimit;
|
|
4237
4237
|
if (mobile && // we're mobile
|
|
4238
4238
|
rowActionsFloating?.length && // we have atleast 1 item in _rowActionsFloating
|
|
@@ -4251,15 +4251,15 @@ let Table = class Table {
|
|
|
4251
4251
|
this.rowActionsRow$.next(rowActionsRow);
|
|
4252
4252
|
this.rowActionsFloatingAll$.next(rowActionsFloating);
|
|
4253
4253
|
this.floatingMenuShown$
|
|
4254
|
-
.pipe(take(1), filter(v => !!v))
|
|
4254
|
+
.pipe(take(1), filter((v) => !!v))
|
|
4255
4255
|
.subscribe(() => this._showFloatingMenu());
|
|
4256
4256
|
}, 200);
|
|
4257
4257
|
}
|
|
4258
4258
|
_showFloatingMenu() {
|
|
4259
|
-
this.rowActionsFloatingAll$.pipe(take(1)).subscribe(actions => {
|
|
4259
|
+
this.rowActionsFloatingAll$.pipe(take(1)).subscribe((actions) => {
|
|
4260
4260
|
if (this.rowSelectionLimit === 1 &&
|
|
4261
|
-
actions.findIndex(a => (a.type ===
|
|
4262
|
-
actions = actions.filter(a => a.type ===
|
|
4261
|
+
actions.findIndex((a) => (a.type === "single" || a.type === "both") && a.showFunction) >= 0) {
|
|
4262
|
+
actions = actions.filter((a) => a.type === "multi" ||
|
|
4263
4263
|
!a.showFunction ||
|
|
4264
4264
|
a.showFunction(this.selectedRows[0]));
|
|
4265
4265
|
}
|
|
@@ -4268,18 +4268,18 @@ let Table = class Table {
|
|
|
4268
4268
|
});
|
|
4269
4269
|
}
|
|
4270
4270
|
_parseDefinitions(definitionsArray) {
|
|
4271
|
-
return definitionsArray.map(definition => this._parseDefinitionSizes(definition));
|
|
4271
|
+
return definitionsArray.map((definition) => this._parseDefinitionSizes(definition));
|
|
4272
4272
|
}
|
|
4273
4273
|
_parseDefinitionSizes(definition) {
|
|
4274
4274
|
const definitionAny = definition;
|
|
4275
|
-
let parsedSizes = { default:
|
|
4275
|
+
let parsedSizes = { default: "full" };
|
|
4276
4276
|
for (const [index, size] of tableColumSizesOptions.entries()) {
|
|
4277
|
-
if (definitionAny.sizes ===
|
|
4278
|
-
definitionAny.sizes ===
|
|
4279
|
-
definitionAny.sizes ===
|
|
4280
|
-
typeof definitionAny.sizes ===
|
|
4277
|
+
if (definitionAny.sizes === "auto" ||
|
|
4278
|
+
definitionAny.sizes === "hidden" ||
|
|
4279
|
+
definitionAny.sizes === "full" ||
|
|
4280
|
+
typeof definitionAny.sizes === "number") {
|
|
4281
4281
|
parsedSizes[size] =
|
|
4282
|
-
definitionAny.sizes ===
|
|
4282
|
+
definitionAny.sizes === "auto" ? "full" : definitionAny.sizes;
|
|
4283
4283
|
continue;
|
|
4284
4284
|
}
|
|
4285
4285
|
parsedSizes[size] =
|
|
@@ -4312,23 +4312,23 @@ let Table = class Table {
|
|
|
4312
4312
|
clearTimeout(this._calculateColumnWidthsTimeout);
|
|
4313
4313
|
this._calculateColumnWidthsTimeout = 0;
|
|
4314
4314
|
}
|
|
4315
|
-
const rows = this.tableRows.map(c => c.nativeElement);
|
|
4316
|
-
const cells = rows.flatMap(row => Array.from(row.querySelectorAll(
|
|
4315
|
+
const rows = this.tableRows.map((c) => c.nativeElement);
|
|
4316
|
+
const cells = rows.flatMap((row) => Array.from(row.querySelectorAll("p-table-cell-ngx")));
|
|
4317
4317
|
this._calculateColumnWidthsTimeout = setTimeout(async () => {
|
|
4318
4318
|
this._setRowsWidth(rows);
|
|
4319
4319
|
const promises = [];
|
|
4320
4320
|
for (const cell of cells) {
|
|
4321
4321
|
if (cell.style.width?.length) {
|
|
4322
|
-
cell.style.width =
|
|
4322
|
+
cell.style.width = "unset";
|
|
4323
4323
|
}
|
|
4324
|
-
promises.push(new Promise(resolve => setTimeout(() => {
|
|
4324
|
+
promises.push(new Promise((resolve) => setTimeout(() => {
|
|
4325
4325
|
const rect = cell.getBoundingClientRect();
|
|
4326
|
-
cell.setAttribute(
|
|
4326
|
+
cell.setAttribute("style", `width: ${rect.width}px !important`);
|
|
4327
4327
|
resolve();
|
|
4328
4328
|
}, 100)));
|
|
4329
4329
|
}
|
|
4330
4330
|
await Promise.all(promises);
|
|
4331
|
-
this._setRowsWidth(rows,
|
|
4331
|
+
this._setRowsWidth(rows, "min-content");
|
|
4332
4332
|
this._resetScrollPosition();
|
|
4333
4333
|
}, 200);
|
|
4334
4334
|
}
|
|
@@ -4339,21 +4339,21 @@ let Table = class Table {
|
|
|
4339
4339
|
if (!shadow) {
|
|
4340
4340
|
continue;
|
|
4341
4341
|
}
|
|
4342
|
-
const firstDiv = shadow.querySelector(
|
|
4342
|
+
const firstDiv = shadow.querySelector("*:nth-child(1)");
|
|
4343
4343
|
if (!firstDiv) {
|
|
4344
4344
|
continue;
|
|
4345
4345
|
}
|
|
4346
|
-
const secondDiv = firstDiv.querySelector(
|
|
4346
|
+
const secondDiv = firstDiv.querySelector("*:nth-child(1)");
|
|
4347
4347
|
if (!secondDiv) {
|
|
4348
4348
|
continue;
|
|
4349
4349
|
}
|
|
4350
4350
|
if (value === null) {
|
|
4351
|
-
firstDiv.setAttribute(
|
|
4352
|
-
secondDiv.setAttribute(
|
|
4351
|
+
firstDiv.setAttribute("style", "");
|
|
4352
|
+
secondDiv.setAttribute("style", "");
|
|
4353
4353
|
continue;
|
|
4354
4354
|
}
|
|
4355
|
-
firstDiv.setAttribute(
|
|
4356
|
-
secondDiv.setAttribute(
|
|
4355
|
+
firstDiv.setAttribute("style", "width: min-content;");
|
|
4356
|
+
secondDiv.setAttribute("style", "width: min-content;");
|
|
4357
4357
|
if (i === 0) {
|
|
4358
4358
|
this._totalWidth = firstDiv.getBoundingClientRect().width;
|
|
4359
4359
|
}
|
|
@@ -4365,6 +4365,9 @@ let Table = class Table {
|
|
|
4365
4365
|
}
|
|
4366
4366
|
this.reachedScrollStart$.next(true);
|
|
4367
4367
|
this.reachedScrollEnd$.next(false);
|
|
4368
|
+
this._calculateScrollPosition({
|
|
4369
|
+
target: this.scrollContainer.nativeElement,
|
|
4370
|
+
});
|
|
4368
4371
|
}
|
|
4369
4372
|
_calculateScrollPosition({ target }) {
|
|
4370
4373
|
this.reachedScrollStart$.next(target.scrollLeft < 10);
|
|
@@ -4389,13 +4392,13 @@ Table = __decorate([
|
|
|
4389
4392
|
], Table);
|
|
4390
4393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Table, decorators: [{
|
|
4391
4394
|
type: Component,
|
|
4392
|
-
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\n\t\tclass=\"mb-8\"\n\t\t[quickFilters]=\"quickFilters\"\n\t\t[activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n\t\t(quickFilter)=\"onQuickFilter($event)\"\n\t\t[enableSearch]=\"enableSearch\"\n\t\t[query]=\"query\"\n\t\t(queryChange)=\"onQueryChange($event)\"\n\t\t[enableFilter]=\"enableFilter\"\n\t\t[enableFilterDesktop]=\"enableFilterDesktop\"\n\t\t[selectedFiltersAmount]=\"selectedFiltersAmount\"\n\t\t[filterButtonTemplate]=\"filterButtonTemplate\"\n\t\t(filter)=\"filterModalShow$.next(true)\"\n\t\t[enableAction]=\"enableAction\"\n\t\t[canUseAction]=\"actionButtonEnabled\"\n\t\t[actionButtonTemplate]=\"actionButtonTemplate\"\n\t\t[actionLoading]=\"actionButtonLoading\"\n\t\t[actionText]=\"actionButtonText\"\n\t\t[actionIcon]=\"actionButtonIcon\"\n\t\t(action)=\"action.emit()\"\n\t\t[itemsSelectedAmount]=\"selectedRows.length\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"headerLoading\"\n\t>\n\t\t<ng-container *ngIf=\"headerCustomFilterTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomFilterTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"headerCustomActionsTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomActionsTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</p-table-header>\n\n\t<div\n\t\tclass=\"relative flex-1\"\n\t\t*ngIf=\"enableScroll; else rowsTemplate\"\n\t>\n\t\t<div\n\t\t\tclass=\"flex flex-col overflow-x-auto\"\n\t\t\t#scrollContainer\n\t\t\t[class]=\"\n\t\t\t\tcn(\n\t\t\t\t\t'before:absolute before:top-0 before:left-0 before:z-[1] before:pointer-events-none',\n\t\t\t\t\t'before:w-24 before:h-full before:transition-opacity',\n\t\t\t\t\t'before:bg-gradient-to-r before:from-white dark:before:from-hurricane-700 before:via-white/80 dark:before:via-hurricane-700/90 before:to-transparent',\n\t\t\t\t\t'after:absolute after:top-0 after:right-0 after:z-[0] before:pointer-events-none',\n\t\t\t\t\t'after:w-24 after:h-full after:transition-opacity',\n\t\t\t\t\t'after:bg-gradient-to-l after:from-white after:dark:from-hurricane-700 after:via-white/80 dark:after:via-hurricane-700/90 after:to-transparent',\n\t\t\t\t\t{\n\t\t\t\t\t\t'before:opacity-0': reachedScrollStart$ | async,\n\t\t\t\t\t\t'after:opacity-0': reachedScrollEnd$ | async,\n\t\t\t\t\t\t'before:opacity-100': (reachedScrollStart$ | async) === false,\n\t\t\t\t\t\t'after:opacity-100': (reachedScrollEnd$ | async) === false\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t\"\n\t\t\t(scroll)=\"onContainerXScroll($event)\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"rowsTemplate\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[usedInTable]=\"true\"\n\t\t\t[class]=\"\n\t\t\t\tfloatingMenuContainerClass({\n\t\t\t\t\thasFooter: enableFooter && (footerHidden$ | async) === false,\n\t\t\t\t\tactive: selectedRows.length > 0,\n\t\t\t\t\tshown: $any(floatingMenuShown$ | async)\n\t\t\t\t})\n\t\t\t\"\n\t\t\t[amount]=\"floatingMenuAmountSelectedText\"\n\t\t\t[enableAmountSelected]=\"!!(rowActionsFloating$ | async)?.length\"\n\t\t\t(close)=\"_selectAllChange(null, false)\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t*ngFor=\"let action of rowActionsFloating$ | async\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[disabled]=\"\n\t\t\t\t\t(action['type'] === 'single' && selectedRows.length > 1) ||\n\t\t\t\t\taction['disabled']\n\t\t\t\t\"\n\t\t\t\t[loading]=\"action['loading']\"\n\t\t\t\t[icon]=\"action['icon']\"\n\t\t\t\t[iconRotate]=\"action['iconRotate']\"\n\t\t\t\t[iconFlip]=\"action['iconFlip']\"\n\t\t\t\t(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action['label'] }}\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePaginationSize]=\"enablePaginationSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePaginationPages]=\"enablePaginationPages\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[loading]=\"footerLoading\"\n\t\t(hiddenChange)=\"footerHidden$.next($event.detail)\"\n\t\t[tableHeaderHasAction]=\"enableHeader && enableAction && actionButtonEnabled\"\n\t></p-table-footer>\n</p-table-container>\n\n<ng-template #rowsTemplate>\n\t<p-table-row\n\t\t*ngIf=\"(extraHeaders$ | async)?.length\"\n\t\tvariant=\"header-secondary\"\n\t\tclassName=\"z-[2]\"\n\t\t[isLast]=\"true\"\n\t>\n\t\t<ng-container *ngFor=\"let col of extraHeaders$ | async; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\tvariant=\"header-secondary\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkboxOffset]=\"index === 0 && enableRowSelection\"\n\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t>\n\t\t\t\t<b>{{ col.name }}</b>\n\t\t\t</p-table-cell-ngx>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns$ | async; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\t[value]=\"col.name\"\n\t\t\t\tvariant=\"header\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkbox]=\"\n\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t: undefined\n\t\t\t\t\"\n\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<p-checkbox\n\t\t\t\t\t(checkedChange)=\"_selectAllChange($event)\"\n\t\t\t\t\t[checked]=\"_selectionContainsAll()\"\n\t\t\t\t\t[indeterminate]=\"_selectionIndeterminate()\"\n\t\t\t\t\t[class.opacity-0]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t\t[disabled]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t></p-checkbox>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-1 flex-col\">\n\t\t<ng-container *ngIf=\"loading; else contentTemplate\">\n\t\t\t<p-table-row\n\t\t\t\t*ngFor=\"let r of loadingRows; let rowIndex = index\"\n\t\t\t\tclass=\"group\"\n\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t[isLast]=\"rowIndex === loadingRows.length - 1\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns$ | async; let index = index\">\n\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\tvariant=\"loading\"\n\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t\t\t></p-table-cell-ngx>\n\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclass=\"h-6 w-6 rounded\"\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\n\t\t<ng-template #contentTemplate>\n\t\t\t<ng-container *ngIf=\"parsedItems?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of parsedItems; let rowIndex = index\"\n\t\t\t\t\tclass=\"group\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t[isLast]=\"rowIndex === parsedItems.length - 1\"\n\t\t\t\t\t(click)=\"_rowClick($event, rowIndex)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\tparseRowActionsRow(\n\t\t\t\t\t\t\t\trowActionsRow$ | async,\n\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t) as rowActionsRow\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t*ngFor=\"let col of columns$ | async; let index = index\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t\t<p-checkbox\n\t\t\t\t\t\t\t\t\t(checkedChange)=\"_checkboxChange($event.target, rowIndex)\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t\t></p-checkbox>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t<p-table-row-actions-container\n\t\t\t\t\t\t\t*ngIf=\"!!rowActionsRow?.length && !(isMobile$ | async)\"\n\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\tslot=\"actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ng-container *ngFor=\"let action of rowActionsRow\">\n\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t\t\t\taction.showFunction\n\t\t\t\t\t\t\t\t\t\t\t? action.showFunction(parsedItems[rowIndex])\n\t\t\t\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t[content]=\"action['label']\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\t\tdata-is-action\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\t\t\t\t\t[icon]=\"action['icon']\"\n\t\t\t\t\t\t\t\t\t\t[iconRotate]=\"action['iconRotate']\"\n\t\t\t\t\t\t\t\t\t\ticonFlip=\"action.iconFlip\"\n\t\t\t\t\t\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t[loading]=\"action['loading']\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"action['disabled']\"\n\t\t\t\t\t\t\t\t\t\t[routerLink]=\"\n\t\t\t\t\t\t\t\t\t\t\taction.routerLink\n\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionRouterLink(action.routerLink, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t | async)\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t[queryParams]=\"\n\t\t\t\t\t\t\t\t\t\t\taction.queryParams\n\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionQueryParams(action.queryParams, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t | async)\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t(onClick)=\"_rowActionClick(action, rowIndex)\"\n\t\t\t\t\t\t\t\t\t></p-button>\n\t\t\t\t\t\t\t\t</p-tooltip>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</p-table-row-actions-container>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</p-table-row>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\n\t\t<ng-container *ngFor=\"let customRow of customRows\">\n\t\t\t<p-table-row\n\t\t\t\t[variant]=\"customRow.variant\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\t'z-[2]': customRow.variant === 'secondary'\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"customRow.templateRef\"></ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n\t<p-modal\n\t\t[header]=\"filterModalHeaderText\"\n\t\t[show]=\"filterModalShow$ | async\"\n\t\t(closed)=\"filterModalShow$.next(false)\"\n\t>\n\t\t<div\n\t\t\tslot=\"content\"\n\t\t\tclass=\"flex flex-col gap-6\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"filterModalTemplate\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass=\"flex w-full justify-between gap-4\"\n\t\t>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowResetMobile\"\n\t\t\t\tclass=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset(true)\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowReset\"\n\t\t\t\tclass=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset()\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\tclass=\"ml-auto w-full tablet:w-auto\"\n\t\t\t\ticon=\"checkmark\"\n\t\t\t\t(onClick)=\"onFilterModalSave()\"\n\t\t\t>\n\t\t\t\t{{ filterModalSaveText }}\n\t\t\t</p-button>\n\t\t</div>\n\t</p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n\t<p-empty-state\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"my-16 self-center\"\n\t\t[illustration]=\"emptyStateFilteredIllustration\"\n\t\t[header]=\"emptyStateFilteredHeader\"\n\t\t[content]=\"emptyStateFilteredContent\"\n\t\t[enableAction]=\"false\"\n\t></p-empty-state>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<p-empty-state\n\t\tclass=\"my-16 self-center\"\n\t\t[illustration]=\"emptyStateIllustration\"\n\t\t[header]=\"emptyStateHeader\"\n\t\t[content]=\"emptyStateContent\"\n\t\t[enableAction]=\"enableEmptyStateAction\"\n\t\t[actionText]=\"emptyStateAction\"\n\t\t[actionIcon]=\"emptyStateActionIcon\"\n\t\t(action)=\"emptyStateClicked()\"\n\t></p-empty-state>\n</ng-template>\n" }]
|
|
4395
|
+
args: [{ selector: "p-table-ngx", changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\n\t\tclass=\"mb-8\"\n\t\t[quickFilters]=\"quickFilters\"\n\t\t[activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n\t\t(quickFilter)=\"onQuickFilter($event)\"\n\t\t[enableSearch]=\"enableSearch\"\n\t\t[query]=\"query\"\n\t\t(queryChange)=\"onQueryChange($event)\"\n\t\t[enableFilter]=\"enableFilter\"\n\t\t[enableFilterDesktop]=\"enableFilterDesktop\"\n\t\t[selectedFiltersAmount]=\"selectedFiltersAmount\"\n\t\t[filterButtonTemplate]=\"filterButtonTemplate\"\n\t\t(filter)=\"filterModalShow$.next(true)\"\n\t\t[enableAction]=\"enableAction\"\n\t\t[canUseAction]=\"actionButtonEnabled\"\n\t\t[actionButtonTemplate]=\"actionButtonTemplate\"\n\t\t[actionLoading]=\"actionButtonLoading\"\n\t\t[actionText]=\"actionButtonText\"\n\t\t[actionIcon]=\"actionButtonIcon\"\n\t\t(action)=\"action.emit()\"\n\t\t[itemsSelectedAmount]=\"selectedRows.length\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"headerLoading\"\n\t>\n\t\t<ng-container *ngIf=\"headerCustomFilterTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomFilterTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"headerCustomActionsTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomActionsTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</p-table-header>\n\n\t<div\n\t\tclass=\"relative flex-1\"\n\t\t*ngIf=\"enableScroll; else rowsTemplate\"\n\t>\n\t\t<div\n\t\t\tclass=\"flex flex-col overflow-x-auto\"\n\t\t\t#scrollContainer\n\t\t\t[class]=\"\n\t\t\t\tcn(\n\t\t\t\t\t'before:absolute before:top-0 before:left-0 before:z-[1] before:pointer-events-none',\n\t\t\t\t\t'before:w-24 before:h-full before:transition-opacity',\n\t\t\t\t\t'before:bg-gradient-to-r before:from-white dark:before:from-hurricane-700 before:via-white/80 dark:before:via-hurricane-700/90 before:to-transparent',\n\t\t\t\t\t'after:absolute after:top-0 after:right-0 after:z-[0] before:pointer-events-none',\n\t\t\t\t\t'after:w-24 after:h-full after:transition-opacity',\n\t\t\t\t\t'after:bg-gradient-to-l after:from-white after:dark:from-hurricane-700 after:via-white/80 dark:after:via-hurricane-700/90 after:to-transparent',\n\t\t\t\t\t{\n\t\t\t\t\t\t'before:opacity-0': reachedScrollStart$ | async,\n\t\t\t\t\t\t'after:opacity-0': reachedScrollEnd$ | async,\n\t\t\t\t\t\t'before:opacity-100': (reachedScrollStart$ | async) === false,\n\t\t\t\t\t\t'after:opacity-100': (reachedScrollEnd$ | async) === false\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t\"\n\t\t\t(scroll)=\"onContainerXScroll($event)\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"rowsTemplate\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[usedInTable]=\"true\"\n\t\t\t[class]=\"\n\t\t\t\tfloatingMenuContainerClass({\n\t\t\t\t\thasFooter: enableFooter && (footerHidden$ | async) === false,\n\t\t\t\t\tactive: selectedRows.length > 0,\n\t\t\t\t\tshown: $any(floatingMenuShown$ | async)\n\t\t\t\t})\n\t\t\t\"\n\t\t\t[amount]=\"floatingMenuAmountSelectedText\"\n\t\t\t[enableAmountSelected]=\"!!(rowActionsFloating$ | async)?.length\"\n\t\t\t(close)=\"_selectAllChange(null, false)\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t*ngFor=\"let action of rowActionsFloating$ | async\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[disabled]=\"\n\t\t\t\t\t(action['type'] === 'single' && selectedRows.length > 1) ||\n\t\t\t\t\taction['disabled']\n\t\t\t\t\"\n\t\t\t\t[loading]=\"action['loading']\"\n\t\t\t\t[icon]=\"action['icon']\"\n\t\t\t\t[iconRotate]=\"action['iconRotate']\"\n\t\t\t\t[iconFlip]=\"action['iconFlip']\"\n\t\t\t\t(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action['label'] }}\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePaginationSize]=\"enablePaginationSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePaginationPages]=\"enablePaginationPages\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[loading]=\"footerLoading\"\n\t\t(hiddenChange)=\"footerHidden$.next($event.detail)\"\n\t\t[tableHeaderHasAction]=\"enableHeader && enableAction && actionButtonEnabled\"\n\t></p-table-footer>\n</p-table-container>\n\n<ng-template #rowsTemplate>\n\t<p-table-row\n\t\t*ngIf=\"(extraHeaders$ | async)?.length\"\n\t\tvariant=\"header-secondary\"\n\t\tclassName=\"z-[2]\"\n\t\t[isLast]=\"true\"\n\t>\n\t\t<ng-container *ngFor=\"let col of extraHeaders$ | async; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\tvariant=\"header-secondary\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkboxOffset]=\"index === 0 && enableRowSelection\"\n\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t>\n\t\t\t\t<b>{{ col.name }}</b>\n\t\t\t</p-table-cell-ngx>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns$ | async; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\t[value]=\"col.name\"\n\t\t\t\tvariant=\"header\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkbox]=\"\n\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t: undefined\n\t\t\t\t\"\n\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<p-checkbox\n\t\t\t\t\t(checkedChange)=\"_selectAllChange($event)\"\n\t\t\t\t\t[checked]=\"_selectionContainsAll()\"\n\t\t\t\t\t[indeterminate]=\"_selectionIndeterminate()\"\n\t\t\t\t\t[class.opacity-0]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t\t[disabled]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t></p-checkbox>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-1 flex-col\">\n\t\t<ng-container *ngIf=\"loading; else contentTemplate\">\n\t\t\t<p-table-row\n\t\t\t\t*ngFor=\"let r of loadingRows; let rowIndex = index\"\n\t\t\t\tclass=\"group\"\n\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t[isLast]=\"rowIndex === loadingRows.length - 1\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns$ | async; let index = index\">\n\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\tvariant=\"loading\"\n\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t\t\t></p-table-cell-ngx>\n\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclass=\"h-6 w-6 rounded\"\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\n\t\t<ng-template #contentTemplate>\n\t\t\t<ng-container *ngIf=\"parsedItems?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of parsedItems; let rowIndex = index\"\n\t\t\t\t\tclass=\"group\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t[isLast]=\"rowIndex === parsedItems.length - 1\"\n\t\t\t\t\t(click)=\"_rowClick($event, rowIndex)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\tparseRowActionsRow(\n\t\t\t\t\t\t\t\trowActionsRow$ | async,\n\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t) as rowActionsRow\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t*ngFor=\"let col of columns$ | async; let index = index\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t\t<p-checkbox\n\t\t\t\t\t\t\t\t\t(checkedChange)=\"_checkboxChange($event.target, rowIndex)\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t\t></p-checkbox>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t<p-table-row-actions-container\n\t\t\t\t\t\t\t*ngIf=\"!!rowActionsRow?.length && !(isMobile$ | async)\"\n\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\tslot=\"actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ng-container *ngFor=\"let action of rowActionsRow\">\n\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t\t\t\taction.showFunction\n\t\t\t\t\t\t\t\t\t\t\t? action.showFunction(parsedItems[rowIndex])\n\t\t\t\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t[content]=\"action['label']\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\t\tdata-is-action\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\t\t\t\t\t[icon]=\"action['icon']\"\n\t\t\t\t\t\t\t\t\t\t[iconRotate]=\"action['iconRotate']\"\n\t\t\t\t\t\t\t\t\t\ticonFlip=\"action.iconFlip\"\n\t\t\t\t\t\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t[loading]=\"action['loading']\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"action['disabled']\"\n\t\t\t\t\t\t\t\t\t\t[routerLink]=\"\n\t\t\t\t\t\t\t\t\t\t\taction.routerLink\n\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionRouterLink(action.routerLink, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t | async)\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t[queryParams]=\"\n\t\t\t\t\t\t\t\t\t\t\taction.queryParams\n\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionQueryParams(action.queryParams, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t | async)\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t(onClick)=\"_rowActionClick(action, rowIndex)\"\n\t\t\t\t\t\t\t\t\t></p-button>\n\t\t\t\t\t\t\t\t</p-tooltip>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</p-table-row-actions-container>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</p-table-row>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\n\t\t<ng-container *ngFor=\"let customRow of customRows\">\n\t\t\t<p-table-row\n\t\t\t\t[variant]=\"customRow.variant\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\t'z-[2]': customRow.variant === 'secondary'\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"customRow.templateRef\"></ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n\t<p-modal\n\t\t[header]=\"filterModalHeaderText\"\n\t\t[show]=\"filterModalShow$ | async\"\n\t\t(closed)=\"filterModalShow$.next(false)\"\n\t>\n\t\t<div\n\t\t\tslot=\"content\"\n\t\t\tclass=\"flex flex-col gap-6\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"filterModalTemplate\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass=\"flex w-full justify-between gap-4\"\n\t\t>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowResetMobile\"\n\t\t\t\tclass=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset(true)\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowReset\"\n\t\t\t\tclass=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset()\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\tclass=\"ml-auto w-full tablet:w-auto\"\n\t\t\t\ticon=\"checkmark\"\n\t\t\t\t(onClick)=\"onFilterModalSave()\"\n\t\t\t>\n\t\t\t\t{{ filterModalSaveText }}\n\t\t\t</p-button>\n\t\t</div>\n\t</p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n\t<p-empty-state\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"my-16 self-center\"\n\t\t[illustration]=\"emptyStateFilteredIllustration\"\n\t\t[header]=\"emptyStateFilteredHeader\"\n\t\t[content]=\"emptyStateFilteredContent\"\n\t\t[enableAction]=\"false\"\n\t></p-empty-state>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<p-empty-state\n\t\tclass=\"my-16 self-center\"\n\t\t[illustration]=\"emptyStateIllustration\"\n\t\t[header]=\"emptyStateHeader\"\n\t\t[content]=\"emptyStateContent\"\n\t\t[enableAction]=\"enableEmptyStateAction\"\n\t\t[actionText]=\"emptyStateAction\"\n\t\t[actionIcon]=\"emptyStateActionIcon\"\n\t\t(action)=\"emptyStateClicked()\"\n\t></p-empty-state>\n</ng-template>\n" }]
|
|
4393
4396
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { className: [{
|
|
4394
4397
|
type: HostBinding,
|
|
4395
|
-
args: [
|
|
4398
|
+
args: ["class"]
|
|
4396
4399
|
}], theme: [{
|
|
4397
4400
|
type: HostBinding,
|
|
4398
|
-
args: [
|
|
4401
|
+
args: ["attr.data-theme"]
|
|
4399
4402
|
}], items: [{
|
|
4400
4403
|
type: Input
|
|
4401
4404
|
}], loading: [{
|
|
@@ -4524,7 +4527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4524
4527
|
args: [TableCell, { read: ElementRef }]
|
|
4525
4528
|
}], scrollContainer: [{
|
|
4526
4529
|
type: ViewChild,
|
|
4527
|
-
args: [
|
|
4530
|
+
args: ["scrollContainer"]
|
|
4528
4531
|
}], emptyStateActionClick: [{
|
|
4529
4532
|
type: Output
|
|
4530
4533
|
}], shadow: [{
|
|
@@ -4579,16 +4582,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
4579
4582
|
type: Output
|
|
4580
4583
|
}], onResize: [{
|
|
4581
4584
|
type: HostListener,
|
|
4582
|
-
args: [
|
|
4585
|
+
args: ["window:resize", ["$event"]]
|
|
4583
4586
|
}], keyDown: [{
|
|
4584
4587
|
type: HostListener,
|
|
4585
|
-
args: [
|
|
4588
|
+
args: ["document:keydown", ["$event"]]
|
|
4586
4589
|
}], keyUp: [{
|
|
4587
4590
|
type: HostListener,
|
|
4588
|
-
args: [
|
|
4591
|
+
args: ["document:keyup", ["$event"]]
|
|
4589
4592
|
}], visibilityChange: [{
|
|
4590
4593
|
type: HostListener,
|
|
4591
|
-
args: [
|
|
4594
|
+
args: ["document:visibilitychange", ["$event"]]
|
|
4592
4595
|
}] } });
|
|
4593
4596
|
|
|
4594
4597
|
const TABLE_COMPONENTS = [
|