@paperless/angular 0.1.0-alpha.446 → 0.1.0-alpha.447
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 +6 -4
- package/esm2020/lib/modules/table/components/table-cell/table-cell.component.mjs +2 -1
- package/esm2020/lib/modules/table/components/table-column/table-column.component.mjs +7 -4
- package/fesm2015/paperless-angular.mjs +12 -7
- package/fesm2015/paperless-angular.mjs.map +1 -1
- package/fesm2020/paperless-angular.mjs +11 -5
- package/fesm2020/paperless-angular.mjs.map +1 -1
- package/lib/modules/table/components/table-column/table-column.component.d.ts +2 -1
- package/package.json +1 -1
- package/paperless.css +8 -0
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { ChangeDetectionStrategy, Component, ContentChild, TemplateRef, } from '@angular/core';
|
|
2
|
+
import { ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef, } from '@angular/core';
|
|
3
3
|
import { ProxyCmp, proxyOutputs, } from '../../../../stencil/angular-component-lib/utils';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
let TableColumn = class TableColumn {
|
|
6
6
|
constructor(c, r, z) {
|
|
7
7
|
this.z = z;
|
|
8
|
+
this.isLast = false;
|
|
8
9
|
c.detach();
|
|
9
10
|
this.el = r.nativeElement;
|
|
10
11
|
proxyOutputs(this, this.el, ['tableDefinitionChanged']);
|
|
11
12
|
}
|
|
12
13
|
};
|
|
13
14
|
TableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumn, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
-
TableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumn, selector: "p-table-column", inputs: { align: "align", name: "name", path: "path", sizes: "sizes", type: "type", useSlot: "useSlot", hasCheckbox: "hasCheckbox" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15
|
+
TableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumn, selector: "p-table-column", inputs: { align: "align", name: "name", path: "path", sizes: "sizes", type: "type", useSlot: "useSlot", hasCheckbox: "hasCheckbox", isLast: "isLast" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15
16
|
TableColumn = __decorate([
|
|
16
17
|
ProxyCmp({
|
|
17
18
|
defineCustomElementFn: undefined,
|
|
@@ -43,11 +44,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
43
44
|
'hasCheckbox',
|
|
44
45
|
],
|
|
45
46
|
}]
|
|
46
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: {
|
|
47
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { isLast: [{
|
|
48
|
+
type: Input
|
|
49
|
+
}], template: [{
|
|
47
50
|
type: ContentChild,
|
|
48
51
|
args: [TemplateRef, {
|
|
49
52
|
read: TemplateRef,
|
|
50
53
|
static: true,
|
|
51
54
|
}]
|
|
52
55
|
}] } });
|
|
53
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
56
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtY29sdW1uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3BhcGVybGVzcy9zcmMvbGliL21vZHVsZXMvdGFibGUvY29tcG9uZW50cy90YWJsZS1jb2x1bW4vdGFibGUtY29sdW1uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUNILHVCQUF1QixFQUV2QixTQUFTLEVBQ1QsWUFBWSxFQUdaLEtBQUssRUFFTCxXQUFXLEdBQ2QsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUNILFFBQVEsRUFDUixZQUFZLEdBQ2YsTUFBTSxpREFBaUQsQ0FBQzs7QUFtQ2xELElBQU0sV0FBVyxHQUFqQixNQUFNLFdBQVc7SUFXcEIsWUFBWSxDQUFvQixFQUFFLENBQWEsRUFBWSxDQUFTO1FBQVQsTUFBQyxHQUFELENBQUMsQ0FBUTtRQVIzRCxXQUFNLEdBQUcsS0FBSyxDQUFDO1FBU3BCLENBQUMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUNYLElBQUksQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDLGFBQWEsQ0FBQztRQUMxQixZQUFZLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDLENBQUM7SUFDNUQsQ0FBQzs7d0dBZlEsV0FBVzs0RkFBWCxXQUFXLG9QQUtOLFdBQVcsMkJBQ2YsV0FBVywyQ0FqQlgsMkJBQTJCO0FBVzVCLFdBQVc7SUExQnZCLFFBQVEsQ0FBQztRQUNOLHFCQUFxQixFQUFFLFNBQVM7UUFDaEMsTUFBTSxFQUFFO1lBQ0osT0FBTztZQUNQLE1BQU07WUFDTixNQUFNO1lBQ04sT0FBTztZQUNQLE1BQU07WUFDTixTQUFTO1lBQ1QsYUFBYTtTQUNoQjtLQUNKLENBQUM7R0FlVyxXQUFXLENBZ0J2QjtTQWhCWSxXQUFXOzJGQUFYLFdBQVc7a0JBZHZCLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07b0JBQy9DLFFBQVEsRUFBRSwyQkFBMkI7b0JBQ3JDLE1BQU0sRUFBRTt3QkFDSixPQUFPO3dCQUNQLE1BQU07d0JBQ04sTUFBTTt3QkFDTixPQUFPO3dCQUNQLE1BQU07d0JBQ04sU0FBUzt3QkFDVCxhQUFhO3FCQUNoQjtpQkFDSjtzSkFJWSxNQUFNO3NCQUFkLEtBQUs7Z0JBTUMsUUFBUTtzQkFKZCxZQUFZO3VCQUFDLFdBQVcsRUFBRTt3QkFDdkIsSUFBSSxFQUFFLFdBQVc7d0JBQ2pCLE1BQU0sRUFBRSxJQUFJO3FCQUNmIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIElucHV0LFxuICAgIE5nWm9uZSxcbiAgICBUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21wb25lbnRzIH0gZnJvbSAnQHBhcGVybGVzcy9jb3JlJztcbmltcG9ydCB7XG4gICAgUHJveHlDbXAsXG4gICAgcHJveHlPdXRwdXRzLFxufSBmcm9tICcuLi8uLi8uLi8uLi9zdGVuY2lsL2FuZ3VsYXItY29tcG9uZW50LWxpYi91dGlscyc7XG5cbmV4cG9ydCBkZWNsYXJlIGludGVyZmFjZSBQVGFibGVDb2x1bW4gZXh0ZW5kcyBDb21wb25lbnRzLlBUYWJsZUNvbHVtbiB7XG4gICAgLyoqXG4gICAgICogRXZlbnQgdG8gbGV0IHRoZSB0YWJsZSBrbm93IGl0IGhhcyB0byByZSByZW5kZXJcbiAgICAgKi9cbiAgICB0YWJsZURlZmluaXRpb25DaGFuZ2VkOiBFdmVudEVtaXR0ZXI8Q3VzdG9tRXZlbnQ8Ym9vbGVhbj4+O1xufVxuXG5AUHJveHlDbXAoe1xuICAgIGRlZmluZUN1c3RvbUVsZW1lbnRGbjogdW5kZWZpbmVkLFxuICAgIGlucHV0czogW1xuICAgICAgICAnYWxpZ24nLFxuICAgICAgICAnbmFtZScsXG4gICAgICAgICdwYXRoJyxcbiAgICAgICAgJ3NpemVzJyxcbiAgICAgICAgJ3R5cGUnLFxuICAgICAgICAndXNlU2xvdCcsXG4gICAgICAgICdoYXNDaGVja2JveCcsXG4gICAgXSxcbn0pXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3AtdGFibGUtY29sdW1uJyxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICB0ZW1wbGF0ZTogJzxuZy1jb250ZW50PjwvbmctY29udGVudD4nLFxuICAgIGlucHV0czogW1xuICAgICAgICAnYWxpZ24nLFxuICAgICAgICAnbmFtZScsXG4gICAgICAgICdwYXRoJyxcbiAgICAgICAgJ3NpemVzJyxcbiAgICAgICAgJ3R5cGUnLFxuICAgICAgICAndXNlU2xvdCcsXG4gICAgICAgICdoYXNDaGVja2JveCcsXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgVGFibGVDb2x1bW4ge1xuICAgIHByb3RlY3RlZCBlbDogSFRNTEVsZW1lbnQ7XG5cbiAgICBASW5wdXQoKSBpc0xhc3QgPSBmYWxzZTtcblxuICAgIEBDb250ZW50Q2hpbGQoVGVtcGxhdGVSZWYsIHtcbiAgICAgICAgcmVhZDogVGVtcGxhdGVSZWYsXG4gICAgICAgIHN0YXRpYzogdHJ1ZSxcbiAgICB9KVxuICAgIHB1YmxpYyB0ZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PiB8IHVuZGVmaW5lZDtcblxuICAgIGNvbnN0cnVjdG9yKGM6IENoYW5nZURldGVjdG9yUmVmLCByOiBFbGVtZW50UmVmLCBwcm90ZWN0ZWQgejogTmdab25lKSB7XG4gICAgICAgIGMuZGV0YWNoKCk7XG4gICAgICAgIHRoaXMuZWwgPSByLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgIHByb3h5T3V0cHV0cyh0aGlzLCB0aGlzLmVsLCBbJ3RhYmxlRGVmaW5pdGlvbkNoYW5nZWQnXSk7XG4gICAgfVxufVxuIl19
|
|
@@ -2294,9 +2294,9 @@ class TableCell {
|
|
|
2294
2294
|
// );
|
|
2295
2295
|
// }
|
|
2296
2296
|
getColumnClasses() {
|
|
2297
|
-
var _a, _b, _c, _d, _e, _f;
|
|
2297
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
2298
2298
|
const sizes = this.definition ? this._getSizes(this.definition) : {};
|
|
2299
|
-
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' }, sizes);
|
|
2299
|
+
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 }, sizes);
|
|
2300
2300
|
}
|
|
2301
2301
|
/*
|
|
2302
2302
|
With this, we shall hack the system in ways no one would ever have thought.
|
|
@@ -2435,13 +2435,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2435
2435
|
let TableColumn = class TableColumn {
|
|
2436
2436
|
constructor(c, r, z) {
|
|
2437
2437
|
this.z = z;
|
|
2438
|
+
this.isLast = false;
|
|
2438
2439
|
c.detach();
|
|
2439
2440
|
this.el = r.nativeElement;
|
|
2440
2441
|
proxyOutputs(this, this.el, ['tableDefinitionChanged']);
|
|
2441
2442
|
}
|
|
2442
2443
|
};
|
|
2443
2444
|
TableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumn, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2444
|
-
TableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumn, selector: "p-table-column", inputs: { align: "align", name: "name", path: "path", sizes: "sizes", type: "type", useSlot: "useSlot", hasCheckbox: "hasCheckbox" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2445
|
+
TableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumn, selector: "p-table-column", inputs: { align: "align", name: "name", path: "path", sizes: "sizes", type: "type", useSlot: "useSlot", hasCheckbox: "hasCheckbox", isLast: "isLast" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2445
2446
|
TableColumn = __decorate([
|
|
2446
2447
|
ProxyCmp({
|
|
2447
2448
|
defineCustomElementFn: undefined,
|
|
@@ -2472,7 +2473,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2472
2473
|
'hasCheckbox',
|
|
2473
2474
|
],
|
|
2474
2475
|
}]
|
|
2475
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: {
|
|
2476
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { isLast: [{
|
|
2477
|
+
type: Input
|
|
2478
|
+
}], template: [{
|
|
2476
2479
|
type: ContentChild,
|
|
2477
2480
|
args: [TemplateRef, {
|
|
2478
2481
|
read: TemplateRef,
|
|
@@ -3051,7 +3054,9 @@ let Table = class Table {
|
|
|
3051
3054
|
_generateColumns() {
|
|
3052
3055
|
// const definitions =
|
|
3053
3056
|
// this._el.nativeElement.querySelectorAll('p-table-definition');
|
|
3054
|
-
|
|
3057
|
+
const definitionsArray = Array.from(this._columnDefinitions);
|
|
3058
|
+
definitionsArray[definitionsArray.length - 1].isLast = true;
|
|
3059
|
+
this.columns = definitionsArray;
|
|
3055
3060
|
}
|
|
3056
3061
|
// private _getHeader() {
|
|
3057
3062
|
// return (
|
|
@@ -3311,13 +3316,13 @@ let Table = class Table {
|
|
|
3311
3316
|
}
|
|
3312
3317
|
};
|
|
3313
3318
|
Table.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3314
|
-
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", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", enableHeader: "enableHeader", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableEdit: "enableEdit", editButtonLoading: "editButtonLoading", editButtonIcon: "editButtonIcon", editButtonText: "editButtonText", editButtonTemplate: "editButtonTemplate", 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", 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", edit: "edit", 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: "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>\n <p-table-header\n *ngIf=\"enableHeader\"\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (quickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (queryChange)=\"(onQueryChange)\"\n [enableFilter]=\"enableFilter\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (filter)=\"filterModalShow$.next(true)\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n [editLoading]=\"editButtonLoading\"\n [editText]=\"editButtonText\"\n [editIcon]=\"editButtonIcon\"\n (edit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\n [loading]=\"headerLoading\"\n >\n <ng-container *ngIf=\"headerCustomFilterTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerCustomFilterTemplate\"\n ></ng-container>\n </ng-container>\n </p-table-header>\n\n <p-table-row variant=\"header\">\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n [value]=\"col.name\"\n variant=\"header\"\n [index]=\"index\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"_selectAllChange($event)\"\n [checked]=\"_selectionContainsAll()\"\n [indeterminate]=\"_selectionIndeterminate()\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"loading; else contentTemplate\">\n <p-table-row\n *ngFor=\"let r of loadingRows; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n >\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n variant=\"loading\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) &&\n enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <p-loader\n variant=\"ghost\"\n class=\"h-6 w-6 rounded\"\n ></p-loader>\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"items?.length; else emptyStateTemplate\">\n <p-table-row\n *ngFor=\"let item of items; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n (click)=\"_rowClick($event, rowIndex)\"\n >\n <ng-container\n *ngFor=\"let col of columns; let index = index\"\n >\n <p-table-cell-ngx\n [definition]=\"col\"\n [item]=\"item\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) &&\n enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n [template]=\"col.template\"\n ></p-table-cell-ngx>\n\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"\n _checkboxChange($event.target, rowIndex)\n \"\n [disabled]=\"_checkboxDisabled(item)\"\n [checked]=\"_selectionContains(item, rowIndex)\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n </ng-template>\n </div>\n\n <p-table-footer\n *ngIf=\"enableFooter\"\n [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (pageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (pageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (export)=\"export.emit()\"\n [loading]=\"footerLoading\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n <p-modal\n [header]=\"filterModalHeaderText\"\n [show]=\"filterModalShow$ | async\"\n (closed)=\"filterModalShow$.next(false)\"\n >\n <div slot=\"content\" class=\"flex flex-col gap-6\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n </div>\n <div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\n <p-button\n *ngIf=\"filterModalShowResetMobile\"\n class=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset(true)\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n *ngIf=\"filterModalShowReset\"\n class=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset()\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n class=\"ml-auto w-full tablet:w-auto\"\n icon=\"checkmark\"\n (onClick)=\"onFilterModalSave()\"\n >\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n <div\n *ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n class=\"\n flex\n max-w-[20rem]\n flex-col\n items-center\n self-center\n py-24\n text-center\n \"\n >\n <p-illustration\n [variant]=\"emptyStateFilteredIllustration\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"text-storm-default font-semibold\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"mb-14 text-sm text-storm-medium\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex\n max-w-[20rem]\n flex-col\n items-center\n self-center\n py-24\n text-center\n \"\n [class.cursor-pointer]=\"enableEmptyStateAction\"\n (click)=\"emptyStateClicked()\"\n >\n <p-illustration\n [variant]=\"emptyStateIllustration\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"text-storm-default font-semibold\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"mb-6 text-sm text-storm-medium\">\n {{ emptyStateContent }}\n </p>\n <p-button\n *ngIf=\"enableEmptyStateAction\"\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n >\n {{ emptyStateAction }}\n </p-button>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\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", "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", "scrollLock", "show", "showClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container" }, { 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: ["activeQuickFilterIdentifier", "canEdit", "editButtonTemplate", "editIcon", "editLoading", "editText", "enableEdit", "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 });
|
|
3319
|
+
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", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", enableHeader: "enableHeader", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableEdit: "enableEdit", editButtonLoading: "editButtonLoading", editButtonIcon: "editButtonIcon", editButtonText: "editButtonText", editButtonTemplate: "editButtonTemplate", 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", 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", edit: "edit", 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: "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>\n <p-table-header\n *ngIf=\"enableHeader\"\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (quickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (queryChange)=\"(onQueryChange)\"\n [enableFilter]=\"enableFilter\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (filter)=\"filterModalShow$.next(true)\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n [editLoading]=\"editButtonLoading\"\n [editText]=\"editButtonText\"\n [editIcon]=\"editButtonIcon\"\n (edit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\n [loading]=\"headerLoading\"\n >\n <ng-container *ngIf=\"headerCustomFilterTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerCustomFilterTemplate\"\n ></ng-container>\n </ng-container>\n </p-table-header>\n\n <p-table-row variant=\"header\">\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n [value]=\"col.name\"\n variant=\"header\"\n [index]=\"index\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"_selectAllChange($event)\"\n [checked]=\"_selectionContainsAll()\"\n [indeterminate]=\"_selectionIndeterminate()\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"loading; else contentTemplate\">\n <p-table-row\n *ngFor=\"let r of loadingRows; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n >\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n variant=\"loading\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) &&\n enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <p-loader\n variant=\"ghost\"\n class=\"h-6 w-6 rounded\"\n ></p-loader>\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"items?.length; else emptyStateTemplate\">\n <p-table-row\n *ngFor=\"let item of items; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n (click)=\"_rowClick($event, rowIndex)\"\n >\n <ng-container\n *ngFor=\"let col of columns; let index = index\"\n >\n <p-table-cell-ngx\n [definition]=\"col\"\n [item]=\"item\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) &&\n enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n [template]=\"col.template\"\n ></p-table-cell-ngx>\n\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"\n _checkboxChange($event.target, rowIndex)\n \"\n [disabled]=\"_checkboxDisabled(item)\"\n [checked]=\"_selectionContains(item, rowIndex)\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n </ng-template>\n </div>\n\n <p-table-footer\n *ngIf=\"enableFooter\"\n [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (pageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (pageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (export)=\"export.emit()\"\n [loading]=\"footerLoading\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n <p-modal\n [header]=\"filterModalHeaderText\"\n [show]=\"filterModalShow$ | async\"\n (closed)=\"filterModalShow$.next(false)\"\n >\n <div slot=\"content\" class=\"flex flex-col gap-6\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n </div>\n <div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\n <p-button\n *ngIf=\"filterModalShowResetMobile\"\n class=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset(true)\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n *ngIf=\"filterModalShowReset\"\n class=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset()\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n class=\"ml-auto w-full tablet:w-auto\"\n icon=\"checkmark\"\n (onClick)=\"onFilterModalSave()\"\n >\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n <div\n *ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n class=\"\n flex\n max-w-[20rem]\n flex-col\n items-center\n self-center\n py-24\n text-center\n \"\n >\n <p-illustration\n [variant]=\"emptyStateFilteredIllustration\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"text-storm-default font-semibold\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"mb-14 text-sm text-storm-medium\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex\n max-w-[20rem]\n flex-col\n items-center\n self-center\n py-24\n text-center\n \"\n [class.cursor-pointer]=\"enableEmptyStateAction\"\n (click)=\"emptyStateClicked()\"\n >\n <p-illustration\n [variant]=\"emptyStateIllustration\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"text-storm-default font-semibold\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"mb-6 text-sm text-storm-medium\">\n {{ emptyStateContent }}\n </p>\n <p-button\n *ngIf=\"enableEmptyStateAction\"\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n >\n {{ emptyStateAction }}\n </p-button>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}\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", "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", "scrollLock", "show", "showClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container" }, { 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: ["activeQuickFilterIdentifier", "canEdit", "editButtonTemplate", "editIcon", "editLoading", "editText", "enableEdit", "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 });
|
|
3315
3320
|
Table = __decorate([
|
|
3316
3321
|
UntilDestroy({ checkProperties: true })
|
|
3317
3322
|
], Table);
|
|
3318
3323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Table, decorators: [{
|
|
3319
3324
|
type: Component,
|
|
3320
|
-
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n <p-table-header\n *ngIf=\"enableHeader\"\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (quickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (queryChange)=\"(onQueryChange)\"\n [enableFilter]=\"enableFilter\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (filter)=\"filterModalShow$.next(true)\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n [editLoading]=\"editButtonLoading\"\n [editText]=\"editButtonText\"\n [editIcon]=\"editButtonIcon\"\n (edit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\n [loading]=\"headerLoading\"\n >\n <ng-container *ngIf=\"headerCustomFilterTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerCustomFilterTemplate\"\n ></ng-container>\n </ng-container>\n </p-table-header>\n\n <p-table-row variant=\"header\">\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n [value]=\"col.name\"\n variant=\"header\"\n [index]=\"index\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"_selectAllChange($event)\"\n [checked]=\"_selectionContainsAll()\"\n [indeterminate]=\"_selectionIndeterminate()\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"loading; else contentTemplate\">\n <p-table-row\n *ngFor=\"let r of loadingRows; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n >\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n variant=\"loading\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) &&\n enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <p-loader\n variant=\"ghost\"\n class=\"h-6 w-6 rounded\"\n ></p-loader>\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"items?.length; else emptyStateTemplate\">\n <p-table-row\n *ngFor=\"let item of items; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n (click)=\"_rowClick($event, rowIndex)\"\n >\n <ng-container\n *ngFor=\"let col of columns; let index = index\"\n >\n <p-table-cell-ngx\n [definition]=\"col\"\n [item]=\"item\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) &&\n enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n [template]=\"col.template\"\n ></p-table-cell-ngx>\n\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"\n _checkboxChange($event.target, rowIndex)\n \"\n [disabled]=\"_checkboxDisabled(item)\"\n [checked]=\"_selectionContains(item, rowIndex)\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n </ng-template>\n </div>\n\n <p-table-footer\n *ngIf=\"enableFooter\"\n [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (pageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (pageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (export)=\"export.emit()\"\n [loading]=\"footerLoading\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n <p-modal\n [header]=\"filterModalHeaderText\"\n [show]=\"filterModalShow$ | async\"\n (closed)=\"filterModalShow$.next(false)\"\n >\n <div slot=\"content\" class=\"flex flex-col gap-6\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n </div>\n <div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\n <p-button\n *ngIf=\"filterModalShowResetMobile\"\n class=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset(true)\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n *ngIf=\"filterModalShowReset\"\n class=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset()\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n class=\"ml-auto w-full tablet:w-auto\"\n icon=\"checkmark\"\n (onClick)=\"onFilterModalSave()\"\n >\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n <div\n *ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n class=\"\n flex\n max-w-[20rem]\n flex-col\n items-center\n self-center\n py-24\n text-center\n \"\n >\n <p-illustration\n [variant]=\"emptyStateFilteredIllustration\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"text-storm-default font-semibold\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"mb-14 text-sm text-storm-medium\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex\n max-w-[20rem]\n flex-col\n items-center\n self-center\n py-24\n text-center\n \"\n [class.cursor-pointer]=\"enableEmptyStateAction\"\n (click)=\"emptyStateClicked()\"\n >\n <p-illustration\n [variant]=\"emptyStateIllustration\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"text-storm-default font-semibold\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"mb-6 text-sm text-storm-medium\">\n {{ emptyStateContent }}\n </p>\n <p-button\n *ngIf=\"enableEmptyStateAction\"\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n >\n {{ emptyStateAction }}\n </p-button>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
|
|
3325
|
+
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n <p-table-header\n *ngIf=\"enableHeader\"\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (quickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (queryChange)=\"(onQueryChange)\"\n [enableFilter]=\"enableFilter\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (filter)=\"filterModalShow$.next(true)\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n [editLoading]=\"editButtonLoading\"\n [editText]=\"editButtonText\"\n [editIcon]=\"editButtonIcon\"\n (edit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\n [loading]=\"headerLoading\"\n >\n <ng-container *ngIf=\"headerCustomFilterTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerCustomFilterTemplate\"\n ></ng-container>\n </ng-container>\n </p-table-header>\n\n <p-table-row variant=\"header\">\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n [value]=\"col.name\"\n variant=\"header\"\n [index]=\"index\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) && enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"_selectAllChange($event)\"\n [checked]=\"_selectionContainsAll()\"\n [indeterminate]=\"_selectionIndeterminate()\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n\n <div class=\"flex flex-col\">\n <ng-container *ngIf=\"loading; else contentTemplate\">\n <p-table-row\n *ngFor=\"let r of loadingRows; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n >\n <ng-container *ngFor=\"let col of columns; let index = index\">\n <p-table-cell-ngx\n [definition]=\"col\"\n variant=\"loading\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) &&\n enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n ></p-table-cell-ngx>\n <ng-template #checkboxTemplate>\n <p-loader\n variant=\"ghost\"\n class=\"h-6 w-6 rounded\"\n ></p-loader>\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"items?.length; else emptyStateTemplate\">\n <p-table-row\n *ngFor=\"let item of items; let rowIndex = index\"\n [enableHover]=\"enableRowSelection || enableRowClick\"\n (click)=\"_rowClick($event, rowIndex)\"\n >\n <ng-container\n *ngFor=\"let col of columns; let index = index\"\n >\n <p-table-cell-ngx\n [definition]=\"col\"\n [item]=\"item\"\n [checkbox]=\"\n (index === 0 || col.hasCheckbox) &&\n enableRowSelection\n ? checkboxTemplate\n : undefined\n \"\n [index]=\"index\"\n [rowIndex]=\"rowIndex\"\n [template]=\"col.template\"\n ></p-table-cell-ngx>\n\n <ng-template #checkboxTemplate>\n <input\n class=\"p-input\"\n type=\"checkbox\"\n (change)=\"\n _checkboxChange($event.target, rowIndex)\n \"\n [disabled]=\"_checkboxDisabled(item)\"\n [checked]=\"_selectionContains(item, rowIndex)\"\n />\n </ng-template>\n </ng-container>\n </p-table-row>\n </ng-container>\n </ng-template>\n </div>\n\n <p-table-footer\n *ngIf=\"enableFooter\"\n [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (pageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (pageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (export)=\"export.emit()\"\n [loading]=\"footerLoading\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n <p-modal\n [header]=\"filterModalHeaderText\"\n [show]=\"filterModalShow$ | async\"\n (closed)=\"filterModalShow$.next(false)\"\n >\n <div slot=\"content\" class=\"flex flex-col gap-6\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n </div>\n <div slot=\"footer\" class=\"flex w-full justify-between gap-4\">\n <p-button\n *ngIf=\"filterModalShowResetMobile\"\n class=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset(true)\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n *ngIf=\"filterModalShowReset\"\n class=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n variant=\"secondary\"\n (onClick)=\"onFilterModalReset()\"\n >\n {{ filterModalResetText }}\n </p-button>\n <p-button\n class=\"ml-auto w-full tablet:w-auto\"\n icon=\"checkmark\"\n (onClick)=\"onFilterModalSave()\"\n >\n {{ filterModalSaveText }}\n </p-button>\n </div>\n </p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n <div\n *ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n class=\"\n flex\n max-w-[20rem]\n flex-col\n items-center\n self-center\n py-24\n text-center\n \"\n >\n <p-illustration\n [variant]=\"emptyStateFilteredIllustration\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"text-storm-default font-semibold\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"mb-14 text-sm text-storm-medium\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex\n max-w-[20rem]\n flex-col\n items-center\n self-center\n py-24\n text-center\n \"\n [class.cursor-pointer]=\"enableEmptyStateAction\"\n (click)=\"emptyStateClicked()\"\n >\n <p-illustration\n [variant]=\"emptyStateIllustration\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"text-storm-default font-semibold\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"mb-6 text-sm text-storm-medium\">\n {{ emptyStateContent }}\n </p>\n <p-button\n *ngIf=\"enableEmptyStateAction\"\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n >\n {{ emptyStateAction }}\n </p-button>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host .p-input[type=checkbox]{flex-shrink:0}\n"] }]
|
|
3321
3326
|
}], ctorParameters: function () { return []; }, propDecorators: { items: [{
|
|
3322
3327
|
type: Input
|
|
3323
3328
|
}], loading: [{
|