@paperless/angular 1.42.5 → 1.43.0
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/index.mjs +4 -2
- package/esm2020/lib/modules/table/components/table/table.component.mjs +103 -12
- package/esm2020/lib/modules/table/components/table-cell/table-cell.component.mjs +15 -3
- package/esm2020/lib/modules/table/components/table-row-action/table-row-action.component.mjs +52 -0
- package/esm2020/lib/modules/table/directives/index.mjs +1 -4
- package/esm2020/lib/modules/table/table.module.mjs +9 -9
- package/esm2020/lib/stencil/components.mjs +4 -4
- package/fesm2015/paperless-angular.mjs +165 -35
- package/fesm2015/paperless-angular.mjs.map +1 -1
- package/fesm2020/paperless-angular.mjs +167 -34
- package/fesm2020/paperless-angular.mjs.map +1 -1
- package/lib/modules/table/components/index.d.ts +3 -1
- package/lib/modules/table/components/table/table.component.d.ts +14 -2
- package/lib/modules/table/components/table-cell/table-cell.component.d.ts +6 -2
- package/lib/modules/table/components/table-row-action/table-row-action.component.d.ts +23 -0
- package/lib/modules/table/directives/index.d.ts +1 -3
- package/lib/modules/table/table.module.d.ts +8 -8
- package/lib/stencil/components.d.ts +1 -1
- package/package.json +1 -1
- package/paperless.css +12 -0
- package/esm2020/lib/modules/table/directives/p-table-floating-menu-content.directive.mjs +0 -16
- package/lib/modules/table/directives/p-table-floating-menu-content.directive.d.ts +0 -8
|
@@ -13,7 +13,7 @@ import { PlatformModule } from '@angular/cdk/platform';
|
|
|
13
13
|
import { PortalModule, CdkPortal, ComponentPortal } from '@angular/cdk/portal';
|
|
14
14
|
import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
|
|
15
15
|
import { startWith, tap, pairwise, map, filter, debounce } from 'rxjs/operators';
|
|
16
|
-
import { objectGetByPath, isTableColumnSizesKey } from '@paperless/core';
|
|
16
|
+
import { objectGetByPath, isTableColumnSizesKey, isMobile } from '@paperless/core';
|
|
17
17
|
import { v4 } from 'uuid';
|
|
18
18
|
import * as i1$2 from '@angular/platform-browser';
|
|
19
19
|
|
|
@@ -1056,10 +1056,10 @@ let PFloatingMenuItem = class PFloatingMenuItem {
|
|
|
1056
1056
|
}
|
|
1057
1057
|
};
|
|
1058
1058
|
PFloatingMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PFloatingMenuItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1059
|
-
PFloatingMenuItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PFloatingMenuItem, selector: "p-floating-menu-item", inputs: { hover: "hover" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1059
|
+
PFloatingMenuItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PFloatingMenuItem, selector: "p-floating-menu-item", inputs: { disabled: "disabled", hover: "hover" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1060
1060
|
PFloatingMenuItem = __decorate([
|
|
1061
1061
|
ProxyCmp({
|
|
1062
|
-
inputs: ['hover']
|
|
1062
|
+
inputs: ['disabled', 'hover']
|
|
1063
1063
|
})
|
|
1064
1064
|
], PFloatingMenuItem);
|
|
1065
1065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PFloatingMenuItem, decorators: [{
|
|
@@ -1069,7 +1069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
1069
1069
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1070
1070
|
template: '<ng-content></ng-content>',
|
|
1071
1071
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
1072
|
-
inputs: ['hover'],
|
|
1072
|
+
inputs: ['disabled', 'hover'],
|
|
1073
1073
|
}]
|
|
1074
1074
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
|
|
1075
1075
|
let PHelper = class PHelper {
|
|
@@ -2386,6 +2386,10 @@ class TableCell {
|
|
|
2386
2386
|
* The index of the row
|
|
2387
2387
|
*/
|
|
2388
2388
|
this.rowIndex = 0;
|
|
2389
|
+
/**
|
|
2390
|
+
* Wether the table has actions
|
|
2391
|
+
*/
|
|
2392
|
+
this.tableHasActions = false;
|
|
2389
2393
|
}
|
|
2390
2394
|
get class() {
|
|
2391
2395
|
return this.getColumnClasses();
|
|
@@ -2436,7 +2440,9 @@ class TableCell {
|
|
|
2436
2440
|
getColumnClasses() {
|
|
2437
2441
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
2438
2442
|
const sizes = this.definition ? this._getSizes(this.definition) : {};
|
|
2439
|
-
return Object.assign({ 'justify-start': !((_a = this.definition) === null || _a === void 0 ? void 0 : _a.align) || ((_b = this.definition) === null || _b === void 0 ? void 0 : _b.align) === 'start', 'justify-center': ((_c = this.definition) === null || _c === void 0 ? void 0 : _c.align) === 'center', 'justify-end': ((_d = this.definition) === null || _d === void 0 ? void 0 : _d.align) === 'end', 'font-semibold': this.variant !== 'header' && ((_e = this.definition) === null || _e === void 0 ? void 0 : _e.type) === 'th', 'text-storm-dark': this.variant !== 'header' && ((_f = this.definition) === null || _f === void 0 ? void 0 : _f.type) === 'th', 'pr-4': ((_g = this.definition) === null || _g === void 0 ? void 0 : _g.isLast) === false
|
|
2443
|
+
return Object.assign({ 'justify-start': !((_a = this.definition) === null || _a === void 0 ? void 0 : _a.align) || ((_b = this.definition) === null || _b === void 0 ? void 0 : _b.align) === 'start', 'justify-center': ((_c = this.definition) === null || _c === void 0 ? void 0 : _c.align) === 'center', 'justify-end': ((_d = this.definition) === null || _d === void 0 ? void 0 : _d.align) === 'end', 'font-semibold': this.variant !== 'header' && ((_e = this.definition) === null || _e === void 0 ? void 0 : _e.type) === 'th', 'text-storm-dark': this.variant !== 'header' && ((_f = this.definition) === null || _f === void 0 ? void 0 : _f.type) === 'th', 'pr-4': ((_g = this.definition) === null || _g === void 0 ? void 0 : _g.isLast) === false, 'group-hover:hidden': this.definition.isLast &&
|
|
2444
|
+
this.tableHasActions &&
|
|
2445
|
+
this.variant !== 'actions', 'group-hover:flex': this.variant === 'actions' && this.tableHasActions, hidden: this.variant === 'actions' && this.tableHasActions, flex: this.variant !== 'actions' }, sizes);
|
|
2440
2446
|
}
|
|
2441
2447
|
/*
|
|
2442
2448
|
With this, we shall hack the system in ways no one would ever have thought.
|
|
@@ -2547,10 +2553,10 @@ class TableCell {
|
|
|
2547
2553
|
}
|
|
2548
2554
|
}
|
|
2549
2555
|
TableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2550
|
-
TableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCell, selector: "p-table-cell-ngx", inputs: { variant: "variant", index: "index", rowIndex: "rowIndex", definition: "definition", item: "item", value: "value", checkbox: "checkbox", template: "template" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<div\n\t\t*ngSwitchCase=\"'header'\"\n\t\tclass=\"flex w-full overflow-hidden\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\tclass=\"flex min-w-0 flex-1\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"template; context: data\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t{{ data.value }}\n</ng-template>\n", styles: [":host{
|
|
2556
|
+
TableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCell, selector: "p-table-cell-ngx", inputs: { variant: "variant", index: "index", rowIndex: "rowIndex", definition: "definition", item: "item", value: "value", tableHasActions: "tableHasActions", checkbox: "checkbox", template: "template" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"template; context: data\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div\n\t\t*ngSwitchCase=\"'header'\"\n\t\tclass=\"flex w-full overflow-hidden\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\tclass=\"flex min-w-0 flex-1\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"template; context: data\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t{{ data.value }}\n</ng-template>\n", styles: [":host{align-items:center;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }] });
|
|
2551
2557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCell, decorators: [{
|
|
2552
2558
|
type: Component,
|
|
2553
|
-
args: [{ selector: 'p-table-cell-ngx', template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<div\n\t\t*ngSwitchCase=\"'header'\"\n\t\tclass=\"flex w-full overflow-hidden\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\tclass=\"flex min-w-0 flex-1\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"template; context: data\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t{{ data.value }}\n</ng-template>\n", styles: [":host{
|
|
2559
|
+
args: [{ selector: 'p-table-cell-ngx', template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"template; context: data\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div\n\t\t*ngSwitchCase=\"'header'\"\n\t\tclass=\"flex w-full overflow-hidden\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\tclass=\"flex min-w-0 flex-1\"\n\t\t[class.justify-start]=\"definition.align === 'start'\"\n\t\t[class.justify-center]=\"definition.align === 'center'\"\n\t\t[class.justify-end]=\"definition.align === 'end'\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"template; context: data\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t{{ data.value }}\n</ng-template>\n", styles: [":host{align-items:center;gap:1rem}\n"] }]
|
|
2554
2560
|
}], propDecorators: { variant: [{
|
|
2555
2561
|
type: Input
|
|
2556
2562
|
}], index: [{
|
|
@@ -2563,6 +2569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2563
2569
|
type: Input
|
|
2564
2570
|
}], value: [{
|
|
2565
2571
|
type: Input
|
|
2572
|
+
}], tableHasActions: [{
|
|
2573
|
+
type: Input
|
|
2566
2574
|
}], checkbox: [{
|
|
2567
2575
|
type: Input
|
|
2568
2576
|
}], template: [{
|
|
@@ -2645,20 +2653,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2645
2653
|
}]
|
|
2646
2654
|
}] });
|
|
2647
2655
|
|
|
2648
|
-
class TableFloatingMenuContentDirective {
|
|
2649
|
-
constructor(template) {
|
|
2650
|
-
this.template = template;
|
|
2651
|
-
}
|
|
2652
|
-
}
|
|
2653
|
-
TableFloatingMenuContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFloatingMenuContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2654
|
-
TableFloatingMenuContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TableFloatingMenuContentDirective, selector: "[p-table-floating-menu-content]", ngImport: i0 });
|
|
2655
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableFloatingMenuContentDirective, decorators: [{
|
|
2656
|
-
type: Directive,
|
|
2657
|
-
args: [{
|
|
2658
|
-
selector: '[p-table-floating-menu-content]',
|
|
2659
|
-
}]
|
|
2660
|
-
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
2661
|
-
|
|
2662
2656
|
class TableFooterDirective extends BaseValueAccessor {
|
|
2663
2657
|
constructor(el) {
|
|
2664
2658
|
super(el);
|
|
@@ -2951,9 +2945,55 @@ const TABLE_DIRECTIVES = [
|
|
|
2951
2945
|
TableNgxDirective,
|
|
2952
2946
|
TableFilterModalDirective,
|
|
2953
2947
|
TableCustomFilterDirective,
|
|
2954
|
-
TableFloatingMenuContentDirective,
|
|
2955
2948
|
];
|
|
2956
2949
|
|
|
2950
|
+
let TableRowAction = class TableRowAction {
|
|
2951
|
+
constructor(c, r, z) {
|
|
2952
|
+
this.z = z;
|
|
2953
|
+
/**
|
|
2954
|
+
* Event whenever a row is clicked
|
|
2955
|
+
*/
|
|
2956
|
+
this.action = new EventEmitter();
|
|
2957
|
+
c.detach();
|
|
2958
|
+
this.el = r.nativeElement;
|
|
2959
|
+
}
|
|
2960
|
+
};
|
|
2961
|
+
TableRowAction.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowAction, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2962
|
+
TableRowAction.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableRowAction, selector: "p-table-row-action", inputs: { disabled: "disabled", icon: "icon", iconFlip: "iconFlip", iconOnly: "iconOnly", iconRotate: "iconRotate", label: "label", type: "type" }, outputs: { action: "action" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2963
|
+
TableRowAction = __decorate([
|
|
2964
|
+
ProxyCmp({
|
|
2965
|
+
inputs: [
|
|
2966
|
+
'disabled',
|
|
2967
|
+
'icon',
|
|
2968
|
+
'iconFlip',
|
|
2969
|
+
'iconOnly',
|
|
2970
|
+
'iconRotate',
|
|
2971
|
+
'label',
|
|
2972
|
+
'type',
|
|
2973
|
+
],
|
|
2974
|
+
})
|
|
2975
|
+
], TableRowAction);
|
|
2976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableRowAction, decorators: [{
|
|
2977
|
+
type: Component,
|
|
2978
|
+
args: [{
|
|
2979
|
+
selector: 'p-table-row-action',
|
|
2980
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2981
|
+
template: '<ng-content></ng-content>',
|
|
2982
|
+
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
2983
|
+
inputs: [
|
|
2984
|
+
'disabled',
|
|
2985
|
+
'icon',
|
|
2986
|
+
'iconFlip',
|
|
2987
|
+
'iconOnly',
|
|
2988
|
+
'iconRotate',
|
|
2989
|
+
'label',
|
|
2990
|
+
'type',
|
|
2991
|
+
],
|
|
2992
|
+
}]
|
|
2993
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { action: [{
|
|
2994
|
+
type: Output
|
|
2995
|
+
}] } });
|
|
2996
|
+
|
|
2957
2997
|
const defaultSize = 12;
|
|
2958
2998
|
const defaultSizeOptions = [12, 24, 68, 136];
|
|
2959
2999
|
|
|
@@ -2979,6 +3019,10 @@ let Table = class Table {
|
|
|
2979
3019
|
* Wether to enable selection
|
|
2980
3020
|
*/
|
|
2981
3021
|
this.enableRowSelection = true;
|
|
3022
|
+
/**
|
|
3023
|
+
* A limit to the amount of rows that can be selected
|
|
3024
|
+
*/
|
|
3025
|
+
this.rowSelectionLimit = undefined;
|
|
2982
3026
|
/**
|
|
2983
3027
|
* Wether to enable row clicking
|
|
2984
3028
|
*/
|
|
@@ -3139,6 +3183,11 @@ let Table = class Table {
|
|
|
3139
3183
|
this.filterModalShow = new EventEmitter();
|
|
3140
3184
|
this.filterModalSave = new EventEmitter();
|
|
3141
3185
|
this.filterModalReset = new EventEmitter();
|
|
3186
|
+
this.rowActionsFloating$ = new BehaviorSubject([]);
|
|
3187
|
+
this.rowActionsRow$ = new BehaviorSubject([]);
|
|
3188
|
+
this.isMobile$ = new BehaviorSubject(isMobile());
|
|
3189
|
+
this._inputEnableRowSelection = this.enableRowSelection;
|
|
3190
|
+
this._inputRowSelectionLimit = this.rowSelectionLimit;
|
|
3142
3191
|
}
|
|
3143
3192
|
set columnDefinitions(v) {
|
|
3144
3193
|
this._columnDefinitions = v;
|
|
@@ -3147,6 +3196,13 @@ let Table = class Table {
|
|
|
3147
3196
|
get columnDefinitions() {
|
|
3148
3197
|
return this._columnDefinitions;
|
|
3149
3198
|
}
|
|
3199
|
+
set rowActions(v) {
|
|
3200
|
+
this._rowActions = v;
|
|
3201
|
+
this._setRowSelectionData();
|
|
3202
|
+
}
|
|
3203
|
+
get rowActions() {
|
|
3204
|
+
return this._rowActions;
|
|
3205
|
+
}
|
|
3150
3206
|
ngOnInit() {
|
|
3151
3207
|
this._parseItems(this.items);
|
|
3152
3208
|
this.loadingRows = Array.from({
|
|
@@ -3157,6 +3213,7 @@ let Table = class Table {
|
|
|
3157
3213
|
.subscribe((value) => this.filterModalShow.next(value));
|
|
3158
3214
|
}
|
|
3159
3215
|
ngOnChanges(changes) {
|
|
3216
|
+
var _a, _b;
|
|
3160
3217
|
if (changes['items']) {
|
|
3161
3218
|
this._parseItems(changes['items'].currentValue);
|
|
3162
3219
|
}
|
|
@@ -3165,6 +3222,23 @@ let Table = class Table {
|
|
|
3165
3222
|
length: changes['amountOfLoadingRows'].currentValue,
|
|
3166
3223
|
});
|
|
3167
3224
|
}
|
|
3225
|
+
let calculateRowSelectionData = false;
|
|
3226
|
+
if (changes['enableRowSelection']) {
|
|
3227
|
+
this._inputEnableRowSelection =
|
|
3228
|
+
changes['enableRowSelection'].currentValue;
|
|
3229
|
+
calculateRowSelectionData = true;
|
|
3230
|
+
}
|
|
3231
|
+
if (changes['rowSelectionLimit']) {
|
|
3232
|
+
this._inputRowSelectionLimit =
|
|
3233
|
+
changes['rowSelectionLimit'].currentValue;
|
|
3234
|
+
calculateRowSelectionData = true;
|
|
3235
|
+
}
|
|
3236
|
+
if (calculateRowSelectionData || changes['selectedRows']) {
|
|
3237
|
+
this._setRowSelectionData((_b = (_a = changes['selectedRows']) === null || _a === void 0 ? void 0 : _a.currentValue) !== null && _b !== void 0 ? _b : this.selectedRows);
|
|
3238
|
+
}
|
|
3239
|
+
}
|
|
3240
|
+
onResize() {
|
|
3241
|
+
this._setRowSelectionData();
|
|
3168
3242
|
}
|
|
3169
3243
|
keyDown({ key }) {
|
|
3170
3244
|
if (key !== 'Control' || this._ctrlDown === true) {
|
|
@@ -3224,8 +3298,6 @@ let Table = class Table {
|
|
|
3224
3298
|
this.parsedItems = JSON.parse(items);
|
|
3225
3299
|
}
|
|
3226
3300
|
_generateColumns() {
|
|
3227
|
-
// const definitions =
|
|
3228
|
-
// this._el.nativeElement.querySelectorAll('p-table-definition');
|
|
3229
3301
|
const definitionsArray = Array.from(this._columnDefinitions);
|
|
3230
3302
|
definitionsArray[definitionsArray.length - 1].isLast = true;
|
|
3231
3303
|
this.columns = definitionsArray;
|
|
@@ -3393,6 +3465,32 @@ let Table = class Table {
|
|
|
3393
3465
|
checkbox.checked = !checkbox.checked;
|
|
3394
3466
|
this._checkboxChange(checkbox, index);
|
|
3395
3467
|
}
|
|
3468
|
+
_rowActionClick(action, rowIndex) {
|
|
3469
|
+
if (action.disabled) {
|
|
3470
|
+
return;
|
|
3471
|
+
}
|
|
3472
|
+
if (!action.action) {
|
|
3473
|
+
return;
|
|
3474
|
+
}
|
|
3475
|
+
if (action.type === 'multi' ||
|
|
3476
|
+
(action.type === 'both' && rowIndex === undefined)) {
|
|
3477
|
+
action.action.emit({
|
|
3478
|
+
items: this.selectedRows,
|
|
3479
|
+
multi: true,
|
|
3480
|
+
ctrlDown: this._ctrlDown,
|
|
3481
|
+
});
|
|
3482
|
+
return;
|
|
3483
|
+
}
|
|
3484
|
+
if (rowIndex === undefined) {
|
|
3485
|
+
return;
|
|
3486
|
+
}
|
|
3487
|
+
const item = this.parsedItems[rowIndex];
|
|
3488
|
+
action.action.emit({
|
|
3489
|
+
item,
|
|
3490
|
+
multi: false,
|
|
3491
|
+
ctrlDown: this._ctrlDown,
|
|
3492
|
+
});
|
|
3493
|
+
}
|
|
3396
3494
|
_findRow(el) {
|
|
3397
3495
|
var _a;
|
|
3398
3496
|
if (!el) {
|
|
@@ -3417,15 +3515,47 @@ let Table = class Table {
|
|
|
3417
3515
|
}
|
|
3418
3516
|
return this._findRowAction(el === null || el === void 0 ? void 0 : el.parentElement);
|
|
3419
3517
|
}
|
|
3518
|
+
_setRowSelectionData(selectedRows = this.selectedRows) {
|
|
3519
|
+
if (this._resizeTimeout) {
|
|
3520
|
+
clearTimeout(this._resizeTimeout);
|
|
3521
|
+
}
|
|
3522
|
+
// We add a timeout here because it's a lot easier on the machine to do these when someone is done
|
|
3523
|
+
// resizing and playing around with their browser
|
|
3524
|
+
this._resizeTimeout = setTimeout(() => {
|
|
3525
|
+
const mobile = isMobile();
|
|
3526
|
+
this.isMobile$.next(mobile);
|
|
3527
|
+
const actions = Array.from(this._rowActions);
|
|
3528
|
+
// we hack this to any[] to make it work..
|
|
3529
|
+
const rowActionsRow = actions.filter((a) => a.type === 'both' || a.type === 'single');
|
|
3530
|
+
const rowActionsFloating = actions.filter((a) => a.type === 'both' || a.type === 'multi' || mobile);
|
|
3531
|
+
let rowSelectionLimit = this._inputRowSelectionLimit;
|
|
3532
|
+
if (mobile && // we're mobile
|
|
3533
|
+
(rowActionsFloating === null || rowActionsFloating === void 0 ? void 0 : rowActionsFloating.length) && // we have atleast 1 item in _rowActionsFloating
|
|
3534
|
+
((rowSelectionLimit !== undefined && this.enableRowSelection) ||
|
|
3535
|
+
!this.enableRowSelection)) {
|
|
3536
|
+
rowSelectionLimit = 1;
|
|
3537
|
+
}
|
|
3538
|
+
this.rowSelectionLimit = rowSelectionLimit;
|
|
3539
|
+
let enableRowSelection = this._inputEnableRowSelection;
|
|
3540
|
+
if (mobile && // we're mobile
|
|
3541
|
+
(rowActionsFloating === null || rowActionsFloating === void 0 ? void 0 : rowActionsFloating.length) && // we have atleast 1 item in _rowActionsFloating
|
|
3542
|
+
!enableRowSelection) {
|
|
3543
|
+
enableRowSelection = true;
|
|
3544
|
+
}
|
|
3545
|
+
this.enableRowSelection = enableRowSelection;
|
|
3546
|
+
this.rowActionsRow$.next(rowActionsRow);
|
|
3547
|
+
this.rowActionsFloating$.next(rowActionsFloating);
|
|
3548
|
+
}, 200);
|
|
3549
|
+
}
|
|
3420
3550
|
};
|
|
3421
3551
|
Table.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3422
|
-
Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Table, selector: "p-table-ngx", inputs: { items: "items", loading: "loading", headerLoading: "headerLoading", footerLoading: "footerLoading", amountOfLoadingRows: "amountOfLoadingRows", enableRowSelection: "enableRowSelection", rowSelectionLimit: "rowSelectionLimit", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", enableFloatingMenu: "enableFloatingMenu", floatingMenuAmountSelectedText: "floatingMenuAmountSelectedText", floatingMenuAmountSelectedTemplate: "floatingMenuAmountSelectedTemplate", enableHeader: "enableHeader", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableAction: "enableAction", actionButtonLoading: "actionButtonLoading", actionButtonIcon: "actionButtonIcon", actionButtonEnabled: "actionButtonEnabled", actionButtonText: "actionButtonText", actionButtonTemplate: "actionButtonTemplate", enableFooter: "enableFooter", enablePageSize: "enablePageSize", enablePagination: "enablePagination", enableExport: "enableExport", page: "page", total: "total", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hideOnSinglePage: "hideOnSinglePage", emptyStateType: "emptyStateType", emptyStateIllustration: "emptyStateIllustration", emptyStateHeader: "emptyStateHeader", emptyStateContent: "emptyStateContent", emptyStateAction: "emptyStateAction", enableEmptyStateAction: "enableEmptyStateAction", emptyStateFilteredIllustration: "emptyStateFilteredIllustration", emptyStateFilteredHeader: "emptyStateFilteredHeader", emptyStateFilteredContent: "emptyStateFilteredContent", shadow: "shadow", filterModalHeaderText: "filterModalHeaderText", filterModalSaveText: "filterModalSaveText", filterModalCancelText: "filterModalCancelText", filterModalResetText: "filterModalResetText", filterModalShowReset: "filterModalShowReset", filterModalShowResetMobile: "filterModalShowResetMobile" }, outputs: { selectedRowsChange: "selectedRowsChange", rowClick: "rowClick", rowSelected: "rowSelected", rowDeselected: "rowDeselected", quickFilter: "quickFilter", queryChange: "queryChange", filter: "filter", action: "action", pageChange: "pageChange", pageSizeChange: "pageSizeChange", export: "export", emptyStateActionClick: "emptyStateActionClick", filterModalShow: "filterModalShow", filterModalSave: "filterModalSave", filterModalReset: "filterModalReset" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:visibilitychange": "visibilityChange($event)" } }, queries: [{ propertyName: "floatingMenuContentTemplate", first: true, predicate: TableFloatingMenuContentDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "headerCustomFilterTemplate", first: true, predicate: TableCustomFilterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "filterModalTemplate", first: true, predicate: TableFilterModalDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "columnDefinitions", predicate: TableColumn }], usesOnChanges: true, ngImport: i0, template: "<p-table-container [shadow]=\"shadow\">\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\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[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[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\t</p-table-header>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns; 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></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t(change)=\"_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/>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-col flex-1\">\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\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns; 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) &&\n\t\t\t\t\t\t\tenableRowSelection\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></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=\"items?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of items; let rowIndex = index\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\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*ngFor=\"let col of columns; let index = index\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) &&\n\t\t\t\t\t\t\t\tenableRowSelection\n\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t(change)=\"\n\t\t\t\t\t\t\t\t\t_checkboxChange($event.target, rowIndex)\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ng-template>\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\t</div>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePageSize]=\"enablePageSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePagination]=\"enablePagination\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"footerLoading\"\n\t></p-table-footer>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[class.inactive]=\"!selectedRows.length\"\n\t\t\t[class.shown]=\"floatingMenuShown$ | async\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t[hover]=\"false\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!floatingMenuContentTemplate,\n\t\t\t\t\t'tablet:flex': !!floatingMenuContentTemplate\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t{{ floatingMenuAmountSelectedText }}\n\t\t\t</p-floating-menu-item>\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!floatingMenuContentTemplate,\n\t\t\t\t\t'tablet:flex': !!floatingMenuContentTemplate\n\t\t\t\t}\"\n\t\t\t></p-divider>\n\t\t\t<ng-container *ngIf=\"floatingMenuContentTemplate\">\n\t\t\t\t<ng-container\n\t\t\t\t\t*ngTemplateOutlet=\"floatingMenuContentTemplate\"\n\t\t\t\t></ng-container>\n\t\t\t\t<p-divider\n\t\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\t\tvariant=\"vertical\"\n\t\t\t\t></p-divider>\n\t\t\t</ng-container>\n\t\t\t<p-floating-menu-item (click)=\"_selectAllChange(null, false)\">\n\t\t\t\t<p-icon variant=\"negative\"></p-icon>\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n</p-table-container>\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 slot=\"content\" class=\"flex flex-col gap-6\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"filterModalTemplate\"\n\t\t\t></ng-container>\n\t\t</div>\n\t\t<div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\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<div\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateFilteredIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateFilteredHeader }}\n\t\t</p>\n\t\t<p class=\"mb-14 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateFilteredContent }}\n\t\t</p>\n\t</div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<div\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t\t[class.cursor-pointer]=\"enableEmptyStateAction\"\n\t\t(click)=\"emptyStateClicked()\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateHeader }}\n\t\t</p>\n\t\t<p class=\"mb-6 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateContent }}\n\t\t</p>\n\t\t<p-button\n\t\t\t*ngIf=\"enableEmptyStateAction\"\n\t\t\tvariant=\"secondary\"\n\t\t\ticon=\"plus\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{{ emptyStateAction }}\n\t\t</p-button>\n\t</div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}:host p-table-container{position:relative}:host p-table-container p-floating-menu-container{position:fixed;bottom:1rem;left:50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:forwards floatingMenuContainerIn .3s ease!important}@media (min-width: 40rem){:host p-table-container p-floating-menu-container{position:absolute;bottom:4rem}}:host p-table-container p-floating-menu-container:not(.shown){display:none}:host p-table-container p-floating-menu-container.inactive{animation:forwards floatingMenuContainerOut .3s ease!important}@keyframes floatingMenuContainerOut{0%{display:flex;transform:translateY(0) translate(-50%);opacity:100}99%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(100%) translate(-50%);opacity:0;display:none}}@keyframes floatingMenuContainerIn{0%{transform:translateY(100%) translate(-50%);opacity:0;display:none}1%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(0) translate(-50%);opacity:100;display:flex}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PButton, selector: "p-button", inputs: ["chevron", "chevronPosition", "disabled", "href", "icon", "iconFlip", "iconOnly", "iconPosition", "iconRotate", "inheritText", "loading", "size", "target", "type", "underline", "variant"] }, { kind: "component", type: PDivider, selector: "p-divider", inputs: ["variant"] }, { kind: "component", type: PFloatingMenuContainer, selector: "p-floating-menu-container", inputs: ["usedInTable"] }, { kind: "component", type: PFloatingMenuItem, selector: "p-floating-menu-item", inputs: ["hover"] }, { kind: "component", type: PIcon, selector: "p-icon", inputs: ["flip", "rotate", "size", "variant"] }, { kind: "component", type: PIllustration, selector: "p-illustration", inputs: ["variant"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }, { kind: "component", type: PModal, selector: "p-modal", inputs: ["applyBlur", "backdropClickClose", "header", "padding", "scrollLock", "show", "showClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container", inputs: ["shadow"] }, { kind: "component", type: PTableFooter, selector: "p-table-footer", inputs: ["enableExport", "enablePageSize", "enablePagination", "hideOnSinglePage", "loading", "page", "pageSize", "pageSizeOptions", "total"] }, { kind: "component", type: PTableHeader, selector: "p-table-header", inputs: ["actionButtonTemplate", "actionIcon", "actionLoading", "actionText", "activeQuickFilterIdentifier", "canUseAction", "enableAction", "enableFilter", "enableSearch", "filterButtonTemplate", "itemsSelectedAmount", "loading", "query", "quickFilters", "selectedFiltersAmount"] }, { kind: "component", type: PTableRow, selector: "p-table-row", inputs: ["enableHover", "variant"] }, { kind: "component", type: TableCell, selector: "p-table-cell-ngx", inputs: ["variant", "index", "rowIndex", "definition", "item", "value", "checkbox", "template"] }, { kind: "directive", type: TableFooterDirective, selector: "p-table-footer" }, { kind: "directive", type: TableHeaderDirective, selector: "p-table-header" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3552
|
+
Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: Table, selector: "p-table-ngx", inputs: { items: "items", loading: "loading", headerLoading: "headerLoading", footerLoading: "footerLoading", amountOfLoadingRows: "amountOfLoadingRows", enableRowSelection: "enableRowSelection", rowSelectionLimit: "rowSelectionLimit", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", enableFloatingMenu: "enableFloatingMenu", floatingMenuAmountSelectedText: "floatingMenuAmountSelectedText", floatingMenuAmountSelectedTemplate: "floatingMenuAmountSelectedTemplate", enableHeader: "enableHeader", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableAction: "enableAction", actionButtonLoading: "actionButtonLoading", actionButtonIcon: "actionButtonIcon", actionButtonEnabled: "actionButtonEnabled", actionButtonText: "actionButtonText", actionButtonTemplate: "actionButtonTemplate", enableFooter: "enableFooter", enablePageSize: "enablePageSize", enablePagination: "enablePagination", enableExport: "enableExport", page: "page", total: "total", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hideOnSinglePage: "hideOnSinglePage", emptyStateType: "emptyStateType", emptyStateIllustration: "emptyStateIllustration", emptyStateHeader: "emptyStateHeader", emptyStateContent: "emptyStateContent", emptyStateAction: "emptyStateAction", enableEmptyStateAction: "enableEmptyStateAction", emptyStateFilteredIllustration: "emptyStateFilteredIllustration", emptyStateFilteredHeader: "emptyStateFilteredHeader", emptyStateFilteredContent: "emptyStateFilteredContent", shadow: "shadow", filterModalHeaderText: "filterModalHeaderText", filterModalSaveText: "filterModalSaveText", filterModalCancelText: "filterModalCancelText", filterModalResetText: "filterModalResetText", filterModalShowReset: "filterModalShowReset", filterModalShowResetMobile: "filterModalShowResetMobile" }, outputs: { selectedRowsChange: "selectedRowsChange", rowClick: "rowClick", rowSelected: "rowSelected", rowDeselected: "rowDeselected", quickFilter: "quickFilter", queryChange: "queryChange", filter: "filter", action: "action", pageChange: "pageChange", pageSizeChange: "pageSizeChange", export: "export", emptyStateActionClick: "emptyStateActionClick", filterModalShow: "filterModalShow", filterModalSave: "filterModalSave", filterModalReset: "filterModalReset" }, host: { listeners: { "window:resize": "onResize($event)", "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:visibilitychange": "visibilityChange($event)" } }, queries: [{ propertyName: "headerCustomFilterTemplate", first: true, predicate: TableCustomFilterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "filterModalTemplate", first: true, predicate: TableFilterModalDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "columnDefinitions", predicate: TableColumn }, { propertyName: "rowActions", predicate: TableRowAction }], usesOnChanges: true, ngImport: i0, template: "<p-table-container [shadow]=\"shadow\">\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\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[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[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\t</p-table-header>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns; 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></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t(change)=\"_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/>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-col flex-1\">\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\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns; 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) &&\n\t\t\t\t\t\t\tenableRowSelection\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></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=\"items?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of items; let rowIndex = index\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\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*ngFor=\"let col of columns; let index = index\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) &&\n\t\t\t\t\t\t\t\tenableRowSelection\n\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t(change)=\"\n\t\t\t\t\t\t\t\t\t_checkboxChange($event.target, rowIndex)\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\tvariant=\"actions\"\n\t\t\t\t\t\t\t[definition]=\"columns[columns.length - 1]\"\n\t\t\t\t\t\t\t[item]=\"parsedItems[rowIndex]\"\n\t\t\t\t\t\t\t[index]=\"columns.length - 1\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[template]=\"actionsTemplate\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #actionsTemplate>\n\t\t\t\t\t\t\t<div class=\"flex ml-auto gap-2 items-center\">\n\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t[content]=\"action.label\"\n\t\t\t\t\t\t\t\t\t*ngFor=\"\n\t\t\t\t\t\t\t\t\t\tlet action of rowActionsRow$ | async\n\t\t\t\t\t\t\t\t\t\"\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=\"small\"\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(onClick)=\"\n\t\t\t\t\t\t\t\t\t\t\t_rowActionClick(action, rowIndex)\n\t\t\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</p-tooltip>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-template>\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\t</div>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePageSize]=\"enablePageSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePagination]=\"enablePagination\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"footerLoading\"\n\t></p-table-footer>\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.inactive]=\"!selectedRows.length\"\n\t\t\t[class.shown]=\"floatingMenuShown$ | async\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t[hover]=\"false\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t{{ floatingMenuAmountSelectedText }}\n\t\t\t</p-floating-menu-item>\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t></p-divider>\n\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(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action.label }}\n\t\t\t\t<p-icon\n\t\t\t\t\t[variant]=\"action.icon\"\n\t\t\t\t\t[rotate]=\"action.iconRotate\"\n\t\t\t\t\t[flip]=\"action.iconFlip\"\n\t\t\t\t/>\n\t\t\t</p-floating-menu-item>\n\n\t\t\t<p-floating-menu-item (click)=\"_selectAllChange(null, false)\">\n\t\t\t\t<p-icon variant=\"negative\"></p-icon>\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n</p-table-container>\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 slot=\"content\" class=\"flex flex-col gap-6\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"filterModalTemplate\"\n\t\t\t></ng-container>\n\t\t</div>\n\t\t<div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\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<div\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateFilteredIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateFilteredHeader }}\n\t\t</p>\n\t\t<p class=\"mb-14 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateFilteredContent }}\n\t\t</p>\n\t</div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<div\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t\t[class.cursor-pointer]=\"enableEmptyStateAction\"\n\t\t(click)=\"emptyStateClicked()\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateHeader }}\n\t\t</p>\n\t\t<p class=\"mb-6 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateContent }}\n\t\t</p>\n\t\t<p-button\n\t\t\t*ngIf=\"enableEmptyStateAction\"\n\t\t\tvariant=\"secondary\"\n\t\t\ticon=\"plus\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{{ emptyStateAction }}\n\t\t</p-button>\n\t</div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}:host p-table-container{position:relative}:host p-table-container p-floating-menu-container{position:fixed;bottom:1rem;left:50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:forwards floatingMenuContainerIn .3s ease!important}@media (min-width: 40rem){:host p-table-container p-floating-menu-container{position:absolute;bottom:4rem}}:host p-table-container p-floating-menu-container:not(.shown){display:none}:host p-table-container p-floating-menu-container.inactive{animation:forwards floatingMenuContainerOut .3s ease!important}@keyframes floatingMenuContainerOut{0%{display:flex;transform:translateY(0) translate(-50%);opacity:100}99%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(100%) translate(-50%);opacity:0;display:none}}@keyframes floatingMenuContainerIn{0%{transform:translateY(100%) translate(-50%);opacity:0;display:none}1%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(0) translate(-50%);opacity:100;display:flex}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PButton, selector: "p-button", inputs: ["chevron", "chevronPosition", "disabled", "href", "icon", "iconFlip", "iconOnly", "iconPosition", "iconRotate", "inheritText", "loading", "size", "target", "type", "underline", "variant"] }, { kind: "component", type: PDivider, selector: "p-divider", inputs: ["variant"] }, { kind: "component", type: PFloatingMenuContainer, selector: "p-floating-menu-container", inputs: ["usedInTable"] }, { kind: "component", type: PFloatingMenuItem, selector: "p-floating-menu-item", inputs: ["disabled", "hover"] }, { kind: "component", type: PIcon, selector: "p-icon", inputs: ["flip", "rotate", "size", "variant"] }, { kind: "component", type: PIllustration, selector: "p-illustration", inputs: ["variant"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }, { kind: "component", type: PModal, selector: "p-modal", inputs: ["applyBlur", "backdropClickClose", "header", "padding", "scrollLock", "show", "showClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container", inputs: ["shadow"] }, { kind: "component", type: PTableFooter, selector: "p-table-footer", inputs: ["enableExport", "enablePageSize", "enablePagination", "hideOnSinglePage", "loading", "page", "pageSize", "pageSizeOptions", "total"] }, { kind: "component", type: PTableHeader, selector: "p-table-header", inputs: ["actionButtonTemplate", "actionIcon", "actionLoading", "actionText", "activeQuickFilterIdentifier", "canUseAction", "enableAction", "enableFilter", "enableSearch", "filterButtonTemplate", "itemsSelectedAmount", "loading", "query", "quickFilters", "selectedFiltersAmount"] }, { kind: "component", type: PTableRow, selector: "p-table-row", inputs: ["enableHover", "variant"] }, { kind: "component", type: PTooltip, selector: "p-tooltip", inputs: ["canManuallyClose", "content", "enableUserInput", "offset", "placement", "show", "strategy", "variant"] }, { kind: "component", type: TableCell, selector: "p-table-cell-ngx", inputs: ["variant", "index", "rowIndex", "definition", "item", "value", "tableHasActions", "checkbox", "template"] }, { kind: "directive", type: TableFooterDirective, selector: "p-table-footer" }, { kind: "directive", type: TableHeaderDirective, selector: "p-table-header" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3423
3553
|
Table = __decorate([
|
|
3424
3554
|
UntilDestroy({ checkProperties: true })
|
|
3425
3555
|
], Table);
|
|
3426
3556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Table, decorators: [{
|
|
3427
3557
|
type: Component,
|
|
3428
|
-
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container [shadow]=\"shadow\">\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\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[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[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\t</p-table-header>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns; 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></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t(change)=\"_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/>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-col flex-1\">\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\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns; 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) &&\n\t\t\t\t\t\t\tenableRowSelection\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></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=\"items?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of items; let rowIndex = index\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\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*ngFor=\"let col of columns; let index = index\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) &&\n\t\t\t\t\t\t\t\tenableRowSelection\n\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t(change)=\"\n\t\t\t\t\t\t\t\t\t_checkboxChange($event.target, rowIndex)\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ng-template>\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\t</div>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePageSize]=\"enablePageSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePagination]=\"enablePagination\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"footerLoading\"\n\t></p-table-footer>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[class.inactive]=\"!selectedRows.length\"\n\t\t\t[class.shown]=\"floatingMenuShown$ | async\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t[hover]=\"false\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!floatingMenuContentTemplate,\n\t\t\t\t\t'tablet:flex': !!floatingMenuContentTemplate\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t{{ floatingMenuAmountSelectedText }}\n\t\t\t</p-floating-menu-item>\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!floatingMenuContentTemplate,\n\t\t\t\t\t'tablet:flex': !!floatingMenuContentTemplate\n\t\t\t\t}\"\n\t\t\t></p-divider>\n\t\t\t<ng-container *ngIf=\"floatingMenuContentTemplate\">\n\t\t\t\t<ng-container\n\t\t\t\t\t*ngTemplateOutlet=\"floatingMenuContentTemplate\"\n\t\t\t\t></ng-container>\n\t\t\t\t<p-divider\n\t\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\t\tvariant=\"vertical\"\n\t\t\t\t></p-divider>\n\t\t\t</ng-container>\n\t\t\t<p-floating-menu-item (click)=\"_selectAllChange(null, false)\">\n\t\t\t\t<p-icon variant=\"negative\"></p-icon>\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n</p-table-container>\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 slot=\"content\" class=\"flex flex-col gap-6\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"filterModalTemplate\"\n\t\t\t></ng-container>\n\t\t</div>\n\t\t<div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\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<div\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateFilteredIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateFilteredHeader }}\n\t\t</p>\n\t\t<p class=\"mb-14 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateFilteredContent }}\n\t\t</p>\n\t</div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<div\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t\t[class.cursor-pointer]=\"enableEmptyStateAction\"\n\t\t(click)=\"emptyStateClicked()\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateHeader }}\n\t\t</p>\n\t\t<p class=\"mb-6 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateContent }}\n\t\t</p>\n\t\t<p-button\n\t\t\t*ngIf=\"enableEmptyStateAction\"\n\t\t\tvariant=\"secondary\"\n\t\t\ticon=\"plus\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{{ emptyStateAction }}\n\t\t</p-button>\n\t</div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}:host p-table-container{position:relative}:host p-table-container p-floating-menu-container{position:fixed;bottom:1rem;left:50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:forwards floatingMenuContainerIn .3s ease!important}@media (min-width: 40rem){:host p-table-container p-floating-menu-container{position:absolute;bottom:4rem}}:host p-table-container p-floating-menu-container:not(.shown){display:none}:host p-table-container p-floating-menu-container.inactive{animation:forwards floatingMenuContainerOut .3s ease!important}@keyframes floatingMenuContainerOut{0%{display:flex;transform:translateY(0) translate(-50%);opacity:100}99%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(100%) translate(-50%);opacity:0;display:none}}@keyframes floatingMenuContainerIn{0%{transform:translateY(100%) translate(-50%);opacity:0;display:none}1%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(0) translate(-50%);opacity:100;display:flex}}\n"] }]
|
|
3558
|
+
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container [shadow]=\"shadow\">\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\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[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[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\t</p-table-header>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns; 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></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<input\n\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t(change)=\"_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/>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-col flex-1\">\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\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns; 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) &&\n\t\t\t\t\t\t\tenableRowSelection\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></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=\"items?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of items; let rowIndex = index\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\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*ngFor=\"let col of columns; let index = index\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) &&\n\t\t\t\t\t\t\t\tenableRowSelection\n\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"p-input\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t(change)=\"\n\t\t\t\t\t\t\t\t\t_checkboxChange($event.target, rowIndex)\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length &&\n\t\t\t\t\t\t\t!(isMobile$ | async)\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\tvariant=\"actions\"\n\t\t\t\t\t\t\t[definition]=\"columns[columns.length - 1]\"\n\t\t\t\t\t\t\t[item]=\"parsedItems[rowIndex]\"\n\t\t\t\t\t\t\t[index]=\"columns.length - 1\"\n\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t[tableHasActions]=\"\n\t\t\t\t\t\t\t\t!!(rowActionsRow$ | async)?.length\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t[template]=\"actionsTemplate\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</p-table-cell-ngx>\n\n\t\t\t\t\t\t<ng-template #actionsTemplate>\n\t\t\t\t\t\t\t<div class=\"flex ml-auto gap-2 items-center\">\n\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t[content]=\"action.label\"\n\t\t\t\t\t\t\t\t\t*ngFor=\"\n\t\t\t\t\t\t\t\t\t\tlet action of rowActionsRow$ | async\n\t\t\t\t\t\t\t\t\t\"\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=\"small\"\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(onClick)=\"\n\t\t\t\t\t\t\t\t\t\t\t_rowActionClick(action, rowIndex)\n\t\t\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</p-tooltip>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-template>\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\t</div>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePageSize]=\"enablePageSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePagination]=\"enablePagination\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"footerLoading\"\n\t></p-table-footer>\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.inactive]=\"!selectedRows.length\"\n\t\t\t[class.shown]=\"floatingMenuShown$ | async\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t[hover]=\"false\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t{{ floatingMenuAmountSelectedText }}\n\t\t\t</p-floating-menu-item>\n\t\t\t<p-divider\n\t\t\t\tclass=\"mx-0 text-storm\"\n\t\t\t\tvariant=\"vertical\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\thidden: !!(rowActionsFloating$ | async)?.length,\n\t\t\t\t\t'tablet:flex': !!(rowActionsFloating$ | async)?.length\n\t\t\t\t}\"\n\t\t\t></p-divider>\n\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(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action.label }}\n\t\t\t\t<p-icon\n\t\t\t\t\t[variant]=\"action.icon\"\n\t\t\t\t\t[rotate]=\"action.iconRotate\"\n\t\t\t\t\t[flip]=\"action.iconFlip\"\n\t\t\t\t/>\n\t\t\t</p-floating-menu-item>\n\n\t\t\t<p-floating-menu-item (click)=\"_selectAllChange(null, false)\">\n\t\t\t\t<p-icon variant=\"negative\"></p-icon>\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n</p-table-container>\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 slot=\"content\" class=\"flex flex-col gap-6\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"filterModalTemplate\"\n\t\t\t></ng-container>\n\t\t</div>\n\t\t<div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\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<div\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateFilteredIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateFilteredHeader }}\n\t\t</p>\n\t\t<p class=\"mb-14 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateFilteredContent }}\n\t\t</p>\n\t</div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<div\n\t\tclass=\"flex max-w-[20rem] flex-col items-center self-center py-24 text-center\"\n\t\t[class.cursor-pointer]=\"enableEmptyStateAction\"\n\t\t(click)=\"emptyStateClicked()\"\n\t>\n\t\t<p-illustration\n\t\t\t[variant]=\"emptyStateIllustration\"\n\t\t\tclass=\"mb-6\"\n\t\t></p-illustration>\n\t\t<p class=\"text-storm-default font-semibold\">\n\t\t\t{{ emptyStateHeader }}\n\t\t</p>\n\t\t<p class=\"mb-6 text-sm text-storm-medium\">\n\t\t\t{{ emptyStateContent }}\n\t\t</p>\n\t\t<p-button\n\t\t\t*ngIf=\"enableEmptyStateAction\"\n\t\t\tvariant=\"secondary\"\n\t\t\ticon=\"plus\"\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t{{ emptyStateAction }}\n\t\t</p-button>\n\t</div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}:host p-table-container{position:relative}:host p-table-container p-floating-menu-container{position:fixed;bottom:1rem;left:50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));animation:forwards floatingMenuContainerIn .3s ease!important}@media (min-width: 40rem){:host p-table-container p-floating-menu-container{position:absolute;bottom:4rem}}:host p-table-container p-floating-menu-container:not(.shown){display:none}:host p-table-container p-floating-menu-container.inactive{animation:forwards floatingMenuContainerOut .3s ease!important}@keyframes floatingMenuContainerOut{0%{display:flex;transform:translateY(0) translate(-50%);opacity:100}99%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(100%) translate(-50%);opacity:0;display:none}}@keyframes floatingMenuContainerIn{0%{transform:translateY(100%) translate(-50%);opacity:0;display:none}1%{transform:translateY(100%) translate(-50%);opacity:0;display:flex}to{transform:translateY(0) translate(-50%);opacity:100;display:flex}}\n"] }]
|
|
3429
3559
|
}], propDecorators: { items: [{
|
|
3430
3560
|
type: Input
|
|
3431
3561
|
}], loading: [{
|
|
@@ -3456,12 +3586,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3456
3586
|
type: Input
|
|
3457
3587
|
}], floatingMenuAmountSelectedTemplate: [{
|
|
3458
3588
|
type: Input
|
|
3459
|
-
}], floatingMenuContentTemplate: [{
|
|
3460
|
-
type: ContentChild,
|
|
3461
|
-
args: [TableFloatingMenuContentDirective, {
|
|
3462
|
-
read: TemplateRef,
|
|
3463
|
-
static: true,
|
|
3464
|
-
}]
|
|
3465
3589
|
}], rowClick: [{
|
|
3466
3590
|
type: Output
|
|
3467
3591
|
}], rowSelected: [{
|
|
@@ -3565,6 +3689,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3565
3689
|
read: TemplateRef,
|
|
3566
3690
|
static: true,
|
|
3567
3691
|
}]
|
|
3692
|
+
}], rowActions: [{
|
|
3693
|
+
type: ContentChildren,
|
|
3694
|
+
args: [TableRowAction]
|
|
3568
3695
|
}], filterModalHeaderText: [{
|
|
3569
3696
|
type: Input
|
|
3570
3697
|
}], filterModalSaveText: [{
|
|
@@ -3583,6 +3710,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3583
3710
|
type: Output
|
|
3584
3711
|
}], filterModalReset: [{
|
|
3585
3712
|
type: Output
|
|
3713
|
+
}], onResize: [{
|
|
3714
|
+
type: HostListener,
|
|
3715
|
+
args: ['window:resize', ['$event']]
|
|
3586
3716
|
}], keyDown: [{
|
|
3587
3717
|
type: HostListener,
|
|
3588
3718
|
args: ['document:keydown', ['$event']]
|
|
@@ -3594,12 +3724,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3594
3724
|
args: ['document:visibilitychange', ['$event']]
|
|
3595
3725
|
}] } });
|
|
3596
3726
|
|
|
3597
|
-
const TABLE_COMPONENTS = [Table, TableCell, TableColumn];
|
|
3727
|
+
const TABLE_COMPONENTS = [Table, TableCell, TableColumn, TableRowAction];
|
|
3598
3728
|
|
|
3599
3729
|
class TableModule {
|
|
3600
3730
|
}
|
|
3601
3731
|
TableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3602
|
-
TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TableModule, declarations: [Table, TableCell, TableColumn, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective, TableFilterModalDirective, TableCustomFilterDirective
|
|
3732
|
+
TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: TableModule, declarations: [Table, TableCell, TableColumn, TableRowAction, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective, TableFilterModalDirective, TableCustomFilterDirective], imports: [CommonModule, StencilModule], exports: [Table, TableCell, TableColumn, TableRowAction, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective, TableFilterModalDirective, TableCustomFilterDirective] });
|
|
3603
3733
|
TableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableModule, imports: [CommonModule, StencilModule] });
|
|
3604
3734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableModule, decorators: [{
|
|
3605
3735
|
type: NgModule,
|
|
@@ -3855,5 +3985,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3855
3985
|
* Generated bundle index. Do not edit.
|
|
3856
3986
|
*/
|
|
3857
3987
|
|
|
3858
|
-
export { BaseFormComponent, BaseTableComponent, BaseUploadComponent, BaseValueAccessor, CropperDirective, CustomCurrencyPipe, CustomDatePipe, DIRECTIVES$1 as DIRECTIVES, DatepickerDirective, FADE_IN, FADE_OUT, MODULES, OVERLAY_SERVICES, OverlayModule, OverlayRef, OverlayService, PAccordion, PAttachment, PAvatar, PAvatarGroup, PBackdrop, PButton, PCalendar, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PCropper, PDatepicker, PDivider, PDrawer, PDrawerBody, PDrawerContainer, PDrawerHeader, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PFloatingMenuContainer, PFloatingMenuItem, PHelper, PIPES, PIcon, PIllustration, PInfoPanel, PInputError, PInputGroup, PLabel, PLayout, PLoader, PModal, PModalBody, PModalContainer, PModalFooter, PModalHeader, PNavbar, PNavigationItem, PPageSizeSelect, PPagination, PPaginationItem, PProfile, PSegmentContainer, PSegmentItem, PSelect, PSliderIndicator, PStatus, PStepper, PStepperItem, PStepperLine, PTabGroup, PTabItem, PTableContainer, PTableFooter, PTableHeader, PTableRow, PToast, PTooltip, PageSizeSelectDirective, PaginationDirective, PaperlessModule, SLIDE_IN_BOTTOM_OUT_TOP, SLIDE_IN_TOP_OUT_BOTTOM, SafePipe, SelectDirective, StencilModule, TABLE_COMPONENTS, TABLE_DIRECTIVES, TOAST_COMPONENTS, TOAST_DIRECTIVES, TOAST_SERVICES, Table, TableCell, TableColumn, TableCustomFilterDirective, TableDirective, TableFilterModalDirective,
|
|
3988
|
+
export { BaseFormComponent, BaseTableComponent, BaseUploadComponent, BaseValueAccessor, CropperDirective, CustomCurrencyPipe, CustomDatePipe, DIRECTIVES$1 as DIRECTIVES, DatepickerDirective, FADE_IN, FADE_OUT, MODULES, OVERLAY_SERVICES, OverlayModule, OverlayRef, OverlayService, PAccordion, PAttachment, PAvatar, PAvatarGroup, PBackdrop, PButton, PCalendar, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PCropper, PDatepicker, PDivider, PDrawer, PDrawerBody, PDrawerContainer, PDrawerHeader, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PFloatingMenuContainer, PFloatingMenuItem, PHelper, PIPES, PIcon, PIllustration, PInfoPanel, PInputError, PInputGroup, PLabel, PLayout, PLoader, PModal, PModalBody, PModalContainer, PModalFooter, PModalHeader, PNavbar, PNavigationItem, PPageSizeSelect, PPagination, PPaginationItem, PProfile, PSegmentContainer, PSegmentItem, PSelect, PSliderIndicator, PStatus, PStepper, PStepperItem, PStepperLine, PTabGroup, PTabItem, PTableContainer, PTableFooter, PTableHeader, PTableRow, PToast, PTooltip, PageSizeSelectDirective, PaginationDirective, PaperlessModule, SLIDE_IN_BOTTOM_OUT_TOP, SLIDE_IN_TOP_OUT_BOTTOM, SafePipe, SelectDirective, StencilModule, TABLE_COMPONENTS, TABLE_DIRECTIVES, TOAST_COMPONENTS, TOAST_DIRECTIVES, TOAST_SERVICES, Table, TableCell, TableColumn, TableCustomFilterDirective, TableDirective, TableFilterModalDirective, TableFooterDirective, TableHeaderDirective, TableModule, TableNgxDirective, TableRowAction, ToastContainer, ToastDirective, ToastModule, ToastService, ToastVariants, createFormFilters };
|
|
3859
3989
|
//# sourceMappingURL=paperless-angular.mjs.map
|