@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
|
@@ -3609,7 +3609,7 @@ const defaultSizeOptions = [12, 24, 68, 136];
|
|
|
3609
3609
|
let Table = class Table {
|
|
3610
3610
|
constructor(_cd) {
|
|
3611
3611
|
this._cd = _cd;
|
|
3612
|
-
this.className =
|
|
3612
|
+
this.className = "flex flex-col z-0";
|
|
3613
3613
|
this.theme = state.theme;
|
|
3614
3614
|
/**
|
|
3615
3615
|
* Wether data is loading
|
|
@@ -3654,7 +3654,7 @@ let Table = class Table {
|
|
|
3654
3654
|
/**
|
|
3655
3655
|
* The floating menu amount item text
|
|
3656
3656
|
*/
|
|
3657
|
-
this.floatingMenuAmountSelectedText =
|
|
3657
|
+
this.floatingMenuAmountSelectedText = "0 items selected";
|
|
3658
3658
|
/**
|
|
3659
3659
|
* Wether the floating menu has been shown atleast once
|
|
3660
3660
|
*/
|
|
@@ -3703,7 +3703,7 @@ let Table = class Table {
|
|
|
3703
3703
|
/**
|
|
3704
3704
|
* The action button icon
|
|
3705
3705
|
*/
|
|
3706
|
-
this.actionButtonIcon =
|
|
3706
|
+
this.actionButtonIcon = "pencil";
|
|
3707
3707
|
/**
|
|
3708
3708
|
* Wether the action button is enabled
|
|
3709
3709
|
*/
|
|
@@ -3770,11 +3770,11 @@ let Table = class Table {
|
|
|
3770
3770
|
*/
|
|
3771
3771
|
this.hideOnSinglePage = true;
|
|
3772
3772
|
/* Empty state start */
|
|
3773
|
-
this.emptyStateType =
|
|
3774
|
-
this.emptyStateIllustration =
|
|
3775
|
-
this.emptyStateActionIcon =
|
|
3773
|
+
this.emptyStateType = "no_filter";
|
|
3774
|
+
this.emptyStateIllustration = "table";
|
|
3775
|
+
this.emptyStateActionIcon = "plus";
|
|
3776
3776
|
this.enableEmptyStateAction = true;
|
|
3777
|
-
this.emptyStateFilteredIllustration =
|
|
3777
|
+
this.emptyStateFilteredIllustration = "search";
|
|
3778
3778
|
/**
|
|
3779
3779
|
* Wether to enable scrolling
|
|
3780
3780
|
*/
|
|
@@ -3800,10 +3800,10 @@ let Table = class Table {
|
|
|
3800
3800
|
this._ctrlDown = false;
|
|
3801
3801
|
this.filterModalShow$ = new BehaviorSubject(false);
|
|
3802
3802
|
this._rowActionsSubscriptions = [];
|
|
3803
|
-
this.filterModalHeaderText =
|
|
3804
|
-
this.filterModalSaveText =
|
|
3805
|
-
this.filterModalCancelText =
|
|
3806
|
-
this.filterModalResetText =
|
|
3803
|
+
this.filterModalHeaderText = "Filters";
|
|
3804
|
+
this.filterModalSaveText = "Save";
|
|
3805
|
+
this.filterModalCancelText = "Cancel";
|
|
3806
|
+
this.filterModalResetText = "Reset filters";
|
|
3807
3807
|
this.filterModalShowReset = false;
|
|
3808
3808
|
this.filterModalShowResetMobile = false;
|
|
3809
3809
|
this.filterModalShow = new EventEmitter();
|
|
@@ -3835,38 +3835,38 @@ let Table = class Table {
|
|
|
3835
3835
|
}
|
|
3836
3836
|
ngOnInit() {
|
|
3837
3837
|
this._parseItems(this.items);
|
|
3838
|
-
onStateChange(
|
|
3838
|
+
onStateChange("theme", (value) => this._checkTheme(value));
|
|
3839
3839
|
this.loadingRows = Array.from({
|
|
3840
3840
|
length: this.amountOfLoadingRows,
|
|
3841
3841
|
});
|
|
3842
3842
|
this.filterModalShow$
|
|
3843
3843
|
.pipe(untilDestroyed(this), distinctUntilChanged())
|
|
3844
|
-
.subscribe(value => this.filterModalShow.next(value));
|
|
3844
|
+
.subscribe((value) => this.filterModalShow.next(value));
|
|
3845
3845
|
}
|
|
3846
3846
|
ngOnChanges(changes) {
|
|
3847
3847
|
var _a;
|
|
3848
|
-
if (changes[
|
|
3849
|
-
this._parseItems(changes[
|
|
3848
|
+
if (changes["items"]) {
|
|
3849
|
+
this._parseItems(changes["items"].currentValue);
|
|
3850
3850
|
}
|
|
3851
|
-
if (changes[
|
|
3851
|
+
if (changes["amountOfLoadingRows"]) {
|
|
3852
3852
|
this.loadingRows = Array.from({
|
|
3853
|
-
length: changes[
|
|
3853
|
+
length: changes["amountOfLoadingRows"].currentValue,
|
|
3854
3854
|
});
|
|
3855
3855
|
}
|
|
3856
3856
|
let calculateRowSelectionData = false;
|
|
3857
|
-
if (changes[
|
|
3857
|
+
if (changes["enableRowSelection"]) {
|
|
3858
3858
|
this._inputEnableRowSelection =
|
|
3859
|
-
changes[
|
|
3859
|
+
changes["enableRowSelection"].currentValue;
|
|
3860
3860
|
calculateRowSelectionData = true;
|
|
3861
3861
|
}
|
|
3862
|
-
if (changes[
|
|
3863
|
-
this._inputRowSelectionLimit = changes[
|
|
3862
|
+
if (changes["rowSelectionLimit"]) {
|
|
3863
|
+
this._inputRowSelectionLimit = changes["rowSelectionLimit"].currentValue;
|
|
3864
3864
|
calculateRowSelectionData = true;
|
|
3865
3865
|
}
|
|
3866
|
-
if (calculateRowSelectionData || changes[
|
|
3866
|
+
if (calculateRowSelectionData || changes["selectedRows"]) {
|
|
3867
3867
|
this._setRowSelectionData();
|
|
3868
3868
|
}
|
|
3869
|
-
if ((_a = changes[
|
|
3869
|
+
if ((_a = changes["enableScroll"]) === null || _a === void 0 ? void 0 : _a.currentValue) {
|
|
3870
3870
|
this._checkChangesSubscriptions();
|
|
3871
3871
|
}
|
|
3872
3872
|
}
|
|
@@ -3892,19 +3892,19 @@ let Table = class Table {
|
|
|
3892
3892
|
this._calculateColumnWidths();
|
|
3893
3893
|
}
|
|
3894
3894
|
keyDown({ key }) {
|
|
3895
|
-
if (key !==
|
|
3895
|
+
if (key !== "Control" || this._ctrlDown === true) {
|
|
3896
3896
|
return;
|
|
3897
3897
|
}
|
|
3898
3898
|
this._ctrlDown = true;
|
|
3899
3899
|
}
|
|
3900
3900
|
keyUp({ key }) {
|
|
3901
|
-
if (key !==
|
|
3901
|
+
if (key !== "Control" || this._ctrlDown === false) {
|
|
3902
3902
|
return;
|
|
3903
3903
|
}
|
|
3904
3904
|
this._ctrlDown = false;
|
|
3905
3905
|
}
|
|
3906
3906
|
visibilityChange() {
|
|
3907
|
-
if (document.visibilityState !==
|
|
3907
|
+
if (document.visibilityState !== "hidden" || this._ctrlDown === false) {
|
|
3908
3908
|
return;
|
|
3909
3909
|
}
|
|
3910
3910
|
this._ctrlDown = false;
|
|
@@ -3945,7 +3945,7 @@ let Table = class Table {
|
|
|
3945
3945
|
if (!(actions === null || actions === void 0 ? void 0 : actions.length)) {
|
|
3946
3946
|
return [];
|
|
3947
3947
|
}
|
|
3948
|
-
return actions.filter(a => !a.showFunction || a.showFunction(this.parsedItems[rowIndex]));
|
|
3948
|
+
return actions.filter((a) => !a.showFunction || a.showFunction(this.parsedItems[rowIndex]));
|
|
3949
3949
|
}
|
|
3950
3950
|
onContainerXScroll(ev) {
|
|
3951
3951
|
if (!this.enableScroll) {
|
|
@@ -4012,7 +4012,7 @@ let Table = class Table {
|
|
|
4012
4012
|
}
|
|
4013
4013
|
for (let i = 0; i < this.selectedRows.length; i++) {
|
|
4014
4014
|
const value = this.selectedRows[i];
|
|
4015
|
-
const row = this.parsedItems.find(d => this._getSelectionValue(d, i) === this._getSelectionValue(value, i));
|
|
4015
|
+
const row = this.parsedItems.find((d) => this._getSelectionValue(d, i) === this._getSelectionValue(value, i));
|
|
4016
4016
|
if (!row) {
|
|
4017
4017
|
continue;
|
|
4018
4018
|
}
|
|
@@ -4061,7 +4061,7 @@ let Table = class Table {
|
|
|
4061
4061
|
return this.selectionKey ? (row === null || row === void 0 ? void 0 : row[this.selectionKey]) || index : index;
|
|
4062
4062
|
}
|
|
4063
4063
|
_selectionContains(row, index, returnIndex = false) {
|
|
4064
|
-
const returnValue = this.selectedRows.findIndex(item => this._getSelectionValue(row, index) ===
|
|
4064
|
+
const returnValue = this.selectedRows.findIndex((item) => this._getSelectionValue(row, index) ===
|
|
4065
4065
|
this._getSelectionValue(item, index));
|
|
4066
4066
|
return !returnIndex ? returnValue >= 0 : returnValue;
|
|
4067
4067
|
}
|
|
@@ -4106,8 +4106,8 @@ let Table = class Table {
|
|
|
4106
4106
|
}
|
|
4107
4107
|
_rowClick($event, index) {
|
|
4108
4108
|
const target = $event.target;
|
|
4109
|
-
if (target.tagName.toLowerCase() ===
|
|
4110
|
-
target.type ===
|
|
4109
|
+
if (target.tagName.toLowerCase() === "input" ||
|
|
4110
|
+
target.type === "checkbox") {
|
|
4111
4111
|
return;
|
|
4112
4112
|
}
|
|
4113
4113
|
const row = this._findRow(target);
|
|
@@ -4134,17 +4134,17 @@ let Table = class Table {
|
|
|
4134
4134
|
this._checkboxChange(checkbox, index);
|
|
4135
4135
|
}
|
|
4136
4136
|
_getActionRouterLink(routerLink, rowIndex) {
|
|
4137
|
-
if (typeof routerLink ===
|
|
4137
|
+
if (typeof routerLink === "function") {
|
|
4138
4138
|
const item = this.parsedItems[rowIndex];
|
|
4139
4139
|
return this._getActionRouterLink(routerLink(item), rowIndex);
|
|
4140
4140
|
}
|
|
4141
|
-
if (typeof routerLink ===
|
|
4141
|
+
if (typeof routerLink === "string" || Array.isArray(routerLink)) {
|
|
4142
4142
|
return new BehaviorSubject(routerLink);
|
|
4143
4143
|
}
|
|
4144
4144
|
return routerLink;
|
|
4145
4145
|
}
|
|
4146
4146
|
_getActionQueryParams(queryParams, rowIndex) {
|
|
4147
|
-
if (typeof queryParams ===
|
|
4147
|
+
if (typeof queryParams === "function") {
|
|
4148
4148
|
const item = this.parsedItems[rowIndex];
|
|
4149
4149
|
return this._getActionQueryParams(queryParams(item), rowIndex);
|
|
4150
4150
|
}
|
|
@@ -4163,8 +4163,8 @@ let Table = class Table {
|
|
|
4163
4163
|
if (!action.action) {
|
|
4164
4164
|
return;
|
|
4165
4165
|
}
|
|
4166
|
-
if (action.type ===
|
|
4167
|
-
(action.type ===
|
|
4166
|
+
if (action.type === "multi" ||
|
|
4167
|
+
(action.type === "both" && rowIndex === undefined)) {
|
|
4168
4168
|
action.action.emit({
|
|
4169
4169
|
items: this.selectedRows,
|
|
4170
4170
|
multi: true,
|
|
@@ -4190,7 +4190,7 @@ let Table = class Table {
|
|
|
4190
4190
|
if (!el) {
|
|
4191
4191
|
return el;
|
|
4192
4192
|
}
|
|
4193
|
-
if (((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) ===
|
|
4193
|
+
if (((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "p-table-row") {
|
|
4194
4194
|
return el;
|
|
4195
4195
|
}
|
|
4196
4196
|
return this._findRow(el === null || el === void 0 ? void 0 : el.parentElement);
|
|
@@ -4200,11 +4200,11 @@ let Table = class Table {
|
|
|
4200
4200
|
if (!el) {
|
|
4201
4201
|
return null;
|
|
4202
4202
|
}
|
|
4203
|
-
if (el.getAttribute(
|
|
4204
|
-
el.getAttribute(
|
|
4203
|
+
if (el.getAttribute("data-is-action") !== null &&
|
|
4204
|
+
el.getAttribute("data-is-action") !== "false") {
|
|
4205
4205
|
return el;
|
|
4206
4206
|
}
|
|
4207
|
-
if (((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) ===
|
|
4207
|
+
if (((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "p-table-row") {
|
|
4208
4208
|
return null;
|
|
4209
4209
|
}
|
|
4210
4210
|
return this._findRowAction(el === null || el === void 0 ? void 0 : el.parentElement);
|
|
@@ -4224,14 +4224,14 @@ let Table = class Table {
|
|
|
4224
4224
|
subscription.unsubscribe();
|
|
4225
4225
|
}
|
|
4226
4226
|
}
|
|
4227
|
-
this._rowActionsSubscriptions = actions.map(action => action._loadingChanged
|
|
4227
|
+
this._rowActionsSubscriptions = actions.map((action) => action._loadingChanged
|
|
4228
4228
|
.pipe(untilDestroyed(this))
|
|
4229
4229
|
.subscribe(() => this._cd.detectChanges()));
|
|
4230
4230
|
// we hack this to any[] to make it work..
|
|
4231
|
-
const rowActionsRow = actions.filter(a => a.type ===
|
|
4232
|
-
const rowActionsFloating = actions.filter(a => (this._inputEnableRowSelection &&
|
|
4233
|
-
(a.type ===
|
|
4234
|
-
(mobile && a.type ===
|
|
4231
|
+
const rowActionsRow = actions.filter((a) => a.type === "both" || a.type === "single");
|
|
4232
|
+
const rowActionsFloating = actions.filter((a) => (this._inputEnableRowSelection &&
|
|
4233
|
+
(a.type === "both" || a.type === "multi")) ||
|
|
4234
|
+
(mobile && a.type === "single" && !a.routerLink));
|
|
4235
4235
|
let rowSelectionLimit = this._inputRowSelectionLimit;
|
|
4236
4236
|
if (mobile && // we're mobile
|
|
4237
4237
|
(rowActionsFloating === null || rowActionsFloating === void 0 ? void 0 : rowActionsFloating.length) && // we have atleast 1 item in _rowActionsFloating
|
|
@@ -4250,15 +4250,15 @@ let Table = class Table {
|
|
|
4250
4250
|
this.rowActionsRow$.next(rowActionsRow);
|
|
4251
4251
|
this.rowActionsFloatingAll$.next(rowActionsFloating);
|
|
4252
4252
|
this.floatingMenuShown$
|
|
4253
|
-
.pipe(take(1), filter(v => !!v))
|
|
4253
|
+
.pipe(take(1), filter((v) => !!v))
|
|
4254
4254
|
.subscribe(() => this._showFloatingMenu());
|
|
4255
4255
|
}, 200);
|
|
4256
4256
|
}
|
|
4257
4257
|
_showFloatingMenu() {
|
|
4258
|
-
this.rowActionsFloatingAll$.pipe(take(1)).subscribe(actions => {
|
|
4258
|
+
this.rowActionsFloatingAll$.pipe(take(1)).subscribe((actions) => {
|
|
4259
4259
|
if (this.rowSelectionLimit === 1 &&
|
|
4260
|
-
actions.findIndex(a => (a.type ===
|
|
4261
|
-
actions = actions.filter(a => a.type ===
|
|
4260
|
+
actions.findIndex((a) => (a.type === "single" || a.type === "both") && a.showFunction) >= 0) {
|
|
4261
|
+
actions = actions.filter((a) => a.type === "multi" ||
|
|
4262
4262
|
!a.showFunction ||
|
|
4263
4263
|
a.showFunction(this.selectedRows[0]));
|
|
4264
4264
|
}
|
|
@@ -4267,19 +4267,19 @@ let Table = class Table {
|
|
|
4267
4267
|
});
|
|
4268
4268
|
}
|
|
4269
4269
|
_parseDefinitions(definitionsArray) {
|
|
4270
|
-
return definitionsArray.map(definition => this._parseDefinitionSizes(definition));
|
|
4270
|
+
return definitionsArray.map((definition) => this._parseDefinitionSizes(definition));
|
|
4271
4271
|
}
|
|
4272
4272
|
_parseDefinitionSizes(definition) {
|
|
4273
4273
|
var _a;
|
|
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] =
|
|
@@ -4311,24 +4311,24 @@ let Table = class Table {
|
|
|
4311
4311
|
clearTimeout(this._calculateColumnWidthsTimeout);
|
|
4312
4312
|
this._calculateColumnWidthsTimeout = 0;
|
|
4313
4313
|
}
|
|
4314
|
-
const rows = this.tableRows.map(c => c.nativeElement);
|
|
4315
|
-
const cells = rows.flatMap(row => Array.from(row.querySelectorAll(
|
|
4314
|
+
const rows = this.tableRows.map((c) => c.nativeElement);
|
|
4315
|
+
const cells = rows.flatMap((row) => Array.from(row.querySelectorAll("p-table-cell-ngx")));
|
|
4316
4316
|
this._calculateColumnWidthsTimeout = setTimeout(() => __awaiter(this, void 0, void 0, function* () {
|
|
4317
4317
|
var _a;
|
|
4318
4318
|
this._setRowsWidth(rows);
|
|
4319
4319
|
const promises = [];
|
|
4320
4320
|
for (const cell of cells) {
|
|
4321
4321
|
if ((_a = cell.style.width) === null || _a === void 0 ? void 0 : _a.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
|
yield 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 = [
|