@paperless/angular 0.1.0-alpha.229 → 0.1.0-alpha.230
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/base/table.component.mjs +14 -1
- package/esm2020/lib/modules/table/components/table/table.component.mjs +35 -4
- package/esm2020/lib/modules/table/directives/index.mjs +4 -1
- package/esm2020/lib/modules/table/directives/p-table-filter-modal.directive.mjs +13 -0
- package/esm2020/lib/modules/table/directives/p-table-ngx.directive.mjs +3 -2
- package/esm2020/lib/modules/table/table.module.mjs +3 -2
- package/fesm2015/paperless-angular.mjs +62 -6
- package/fesm2015/paperless-angular.mjs.map +1 -1
- package/fesm2020/paperless-angular.mjs +61 -5
- package/fesm2020/paperless-angular.mjs.map +1 -1
- package/lib/modules/table/base/table.component.d.ts +4 -0
- package/lib/modules/table/components/table/table.component.d.ts +11 -2
- package/lib/modules/table/directives/index.d.ts +3 -1
- package/lib/modules/table/directives/p-table-filter-modal.directive.d.ts +5 -0
- package/lib/modules/table/directives/p-table-ngx.directive.d.ts +1 -0
- package/lib/modules/table/table.module.d.ts +4 -3
- package/package.json +1 -1
|
@@ -334,6 +334,7 @@ let BaseTableComponent = class BaseTableComponent extends FormBaseComponent {
|
|
|
334
334
|
page: 1,
|
|
335
335
|
quickFilter: null,
|
|
336
336
|
query: '',
|
|
337
|
+
filters: [],
|
|
337
338
|
selectedRows: [],
|
|
338
339
|
};
|
|
339
340
|
this.defaultTableValues = {};
|
|
@@ -372,6 +373,17 @@ let BaseTableComponent = class BaseTableComponent extends FormBaseComponent {
|
|
|
372
373
|
query,
|
|
373
374
|
};
|
|
374
375
|
}
|
|
376
|
+
get filters() {
|
|
377
|
+
if (!this.tableOptions) {
|
|
378
|
+
return this._defaultTableValues.filters;
|
|
379
|
+
}
|
|
380
|
+
return this.tableOptions.value.filters;
|
|
381
|
+
}
|
|
382
|
+
set filters(filters) {
|
|
383
|
+
this.tableValues = {
|
|
384
|
+
filters,
|
|
385
|
+
};
|
|
386
|
+
}
|
|
375
387
|
get selectedRows() {
|
|
376
388
|
if (!this.tableOptions) {
|
|
377
389
|
return this._defaultTableValues.selectedRows;
|
|
@@ -406,6 +418,7 @@ let BaseTableComponent = class BaseTableComponent extends FormBaseComponent {
|
|
|
406
418
|
page: this.parsedDefaultTableValues.page,
|
|
407
419
|
quickFilter: this.parsedDefaultTableValues.quickFilter,
|
|
408
420
|
query: this.parsedDefaultTableValues.query,
|
|
421
|
+
filters: this.parsedDefaultTableValues.filters,
|
|
409
422
|
selectedRows: this.parsedDefaultTableValues.selectedRows,
|
|
410
423
|
});
|
|
411
424
|
this.tableOptions.valueChanges
|
|
@@ -1901,6 +1914,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
1901
1914
|
}]
|
|
1902
1915
|
}] } });
|
|
1903
1916
|
|
|
1917
|
+
class TableFilterModalDirective {
|
|
1918
|
+
}
|
|
1919
|
+
TableFilterModalDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TableFilterModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1920
|
+
TableFilterModalDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.10", type: TableFilterModalDirective, selector: "p-table-filter-modal", ngImport: i0 });
|
|
1921
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TableFilterModalDirective, decorators: [{
|
|
1922
|
+
type: Directive,
|
|
1923
|
+
args: [{
|
|
1924
|
+
selector: 'p-table-filter-modal',
|
|
1925
|
+
}]
|
|
1926
|
+
}] });
|
|
1927
|
+
|
|
1904
1928
|
const defaultSize = 12;
|
|
1905
1929
|
const defaultSizeOptions = [12, 24, 68, 136];
|
|
1906
1930
|
|
|
@@ -2133,6 +2157,11 @@ let Table = class Table {
|
|
|
2133
2157
|
length: this.amountOfLoadingRows,
|
|
2134
2158
|
});
|
|
2135
2159
|
this._ctrlDown = false;
|
|
2160
|
+
this._filterModalShow = false;
|
|
2161
|
+
this.filterModalHeaderText = 'Filters';
|
|
2162
|
+
this.filterModalSaveText = 'Save';
|
|
2163
|
+
this.filterModalCancelText = 'Cancel';
|
|
2164
|
+
this.filterModalShown = new EventEmitter();
|
|
2136
2165
|
}
|
|
2137
2166
|
set columnDefinitions(v) {
|
|
2138
2167
|
this._columnDefinitions = v;
|
|
@@ -2141,6 +2170,13 @@ let Table = class Table {
|
|
|
2141
2170
|
get columnDefinitions() {
|
|
2142
2171
|
return this._columnDefinitions;
|
|
2143
2172
|
}
|
|
2173
|
+
set filterModalShow(value) {
|
|
2174
|
+
this._filterModalShow = value;
|
|
2175
|
+
this.filterModalShown.next(this._filterModalShow);
|
|
2176
|
+
}
|
|
2177
|
+
get filterModalShow() {
|
|
2178
|
+
return this._filterModalShow;
|
|
2179
|
+
}
|
|
2144
2180
|
ngOnInit() {
|
|
2145
2181
|
this._parseItems(this.items);
|
|
2146
2182
|
this.loadingRows = Array.from({
|
|
@@ -2192,6 +2228,10 @@ let Table = class Table {
|
|
|
2192
2228
|
onPageChange({ detail }) {
|
|
2193
2229
|
this.pageChange.emit(detail);
|
|
2194
2230
|
}
|
|
2231
|
+
filterModalSave() {
|
|
2232
|
+
this.filter.emit();
|
|
2233
|
+
this.filterModalShow = false;
|
|
2234
|
+
}
|
|
2195
2235
|
_parseItems(items) {
|
|
2196
2236
|
if (!items) {
|
|
2197
2237
|
this.parsedItems = [];
|
|
@@ -2462,13 +2502,13 @@ let Table = class Table {
|
|
|
2462
2502
|
}
|
|
2463
2503
|
};
|
|
2464
2504
|
Table.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2465
|
-
Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: Table, selector: "p-table-ngx", inputs: { items: "items", loading: "loading", amountOfLoadingRows: "amountOfLoadingRows", enableRowSelection: "enableRowSelection", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableEdit: "enableEdit", editButtonTemplate: "editButtonTemplate", enablePageSize: "enablePageSize", enablePagination: "enablePagination", enableExport: "enableExport", page: "page", total: "total", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hideOnSinglePage: "hideOnSinglePage", emptyStateType: "emptyStateType", emptyStateHeader: "emptyStateHeader", emptyStateContent: "emptyStateContent", emptyStateAction: "emptyStateAction", emptyStateFilteredHeader: "emptyStateFilteredHeader", emptyStateFilteredContent: "emptyStateFilteredContent" }, 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" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:visibilitychange": "visibilityChange($event)" } }, queries: [{ propertyName: "columnDefinitions", predicate: TableColumn }], usesOnChanges: true, ngImport: i0, template: "<p-table-container>\n <p-table-header\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (onQuickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (onQueryChange)=\"(onQueryChange)\"\n [enableFilter]=\"enableFilter\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (onFilter)=\"filter.emit()\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n (onEdit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\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 && 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 && 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=\"rounded w-6 h-6\"\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 && 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 [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (onPageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (onPageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (onExport)=\"export.emit()\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-template #emptyStateTemplate>\n <div\n *ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-search\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-14\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-overview\"\n class=\"cursor-pointer mb-6\"\n (click)=\"emptyStateActionClick.emit()\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-6\">\n {{ emptyStateContent }}\n </p>\n <p-button\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n (click)=\"emptyStateActionClick.emit()\"\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PButton, selector: "p-button", inputs: ["chevron", "chevronPosition", "disabled", "href", "icon", "iconFlip", "iconOnly", "iconPosition", "iconRotate", "inheritText", "loading", "size", "target", "variant", "width"] }, { 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: PTableContainer, selector: "p-table-container" }, { kind: "component", type: PTableFooter, selector: "p-table-footer", inputs: ["enableExport", "enablePageSize", "enablePagination", "hideOnSinglePage", "page", "pageSize", "pageSizeOptions", "total"] }, { kind: "component", type: PTableHeader, selector: "p-table-header", inputs: ["activeQuickFilterIdentifier", "canEdit", "editButtonTemplate", "enableEdit", "enableFilter", "enableSearch", "filterButtonTemplate", "itemsSelectedAmount", "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2505
|
+
Table.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.10", type: Table, selector: "p-table-ngx", inputs: { items: "items", loading: "loading", amountOfLoadingRows: "amountOfLoadingRows", enableRowSelection: "enableRowSelection", enableRowClick: "enableRowClick", selectedRows: "selectedRows", selectionKey: "selectionKey", canSelectKey: "canSelectKey", quickFilters: "quickFilters", activeQuickFilterIdentifier: "activeQuickFilterIdentifier", enableSearch: "enableSearch", query: "query", enableFilter: "enableFilter", selectedFiltersAmount: "selectedFiltersAmount", filterButtonTemplate: "filterButtonTemplate", enableEdit: "enableEdit", editButtonTemplate: "editButtonTemplate", enablePageSize: "enablePageSize", enablePagination: "enablePagination", enableExport: "enableExport", page: "page", total: "total", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", hideOnSinglePage: "hideOnSinglePage", emptyStateType: "emptyStateType", emptyStateHeader: "emptyStateHeader", emptyStateContent: "emptyStateContent", emptyStateAction: "emptyStateAction", emptyStateFilteredHeader: "emptyStateFilteredHeader", emptyStateFilteredContent: "emptyStateFilteredContent", filterModalHeaderText: "filterModalHeaderText", filterModalSaveText: "filterModalSaveText", filterModalCancelText: "filterModalCancelText" }, 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", filterModalShown: "filterModalShown" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:visibilitychange": "visibilityChange($event)" } }, queries: [{ 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 [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (onQuickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (onQueryChange)=\"(onQueryChange)\"\n [enableFilter]=\"!!filterModalTemplate\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (onFilter)=\"filterModalShow = !filterModalShow\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n (onEdit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\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 && 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 && 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=\"rounded w-6 h-6\"\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 && 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 [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (onPageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (onPageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (onExport)=\"export.emit()\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"!!filterModalTemplate\">\n <p-modal [header]=\"filterModalHeaderText\" [show]=\"filterModalShow\">\n <div slot=\"content\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n </div>\n <div slot=\"footer\" class=\"flex justify-between w-full\">\n <p-button\n variant=\"secondary\"\n icon=\"arrow\"\n icon-position=\"start\"\n icon-flip=\"horizontal\"\n >\n {{ filterModalCancelText }}\n </p-button>\n <p-button icon=\"arrow\" (onClick)=\"filterModalSave()\">\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 flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-search\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-14\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-overview\"\n class=\"cursor-pointer mb-6\"\n (click)=\"emptyStateActionClick.emit()\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-6\">\n {{ emptyStateContent }}\n </p>\n <p-button\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n (click)=\"emptyStateActionClick.emit()\"\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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", "width"] }, { 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: ["header", "show", "showMobileClose", "showMobileFooter", "size", "variant"] }, { kind: "component", type: PTableContainer, selector: "p-table-container" }, { kind: "component", type: PTableFooter, selector: "p-table-footer", inputs: ["enableExport", "enablePageSize", "enablePagination", "hideOnSinglePage", "page", "pageSize", "pageSizeOptions", "total"] }, { kind: "component", type: PTableHeader, selector: "p-table-header", inputs: ["activeQuickFilterIdentifier", "canEdit", "editButtonTemplate", "enableEdit", "enableFilter", "enableSearch", "filterButtonTemplate", "itemsSelectedAmount", "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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2466
2506
|
Table = __decorate([
|
|
2467
2507
|
UntilDestroy({ checkProperties: true })
|
|
2468
2508
|
], Table);
|
|
2469
2509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: Table, decorators: [{
|
|
2470
2510
|
type: Component,
|
|
2471
|
-
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n <p-table-header\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (onQuickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (onQueryChange)=\"(onQueryChange)\"\n [enableFilter]=\"
|
|
2511
|
+
args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n <p-table-header\n [quickFilters]=\"quickFilters\"\n [activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n (onQuickFilter)=\"(onQuickFilter)\"\n [enableSearch]=\"enableSearch\"\n [query]=\"query\"\n (onQueryChange)=\"(onQueryChange)\"\n [enableFilter]=\"!!filterModalTemplate\"\n [selectedFiltersAmount]=\"selectedFiltersAmount\"\n [filterButtonTemplate]=\"filterButtonTemplate\"\n (onFilter)=\"filterModalShow = !filterModalShow\"\n [enableEdit]=\"enableEdit\"\n [canEdit]=\"!!selectedRows.length\"\n [editButtonTemplate]=\"editButtonTemplate\"\n (onEdit)=\"edit.emit()\"\n [itemsSelectedAmount]=\"selectedRows.length\"\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 && 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 && 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=\"rounded w-6 h-6\"\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 && 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 [hideOnSinglePage]=\"hideOnSinglePage\"\n [enablePageSize]=\"enablePageSize\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (onPageSizeChange)=\"(pageSizeChange)\"\n [enablePagination]=\"enablePagination\"\n [page]=\"page\"\n [total]=\"total\"\n (onPageChange)=\"(pageChange)\"\n [enableExport]=\"enableExport\"\n (onExport)=\"export.emit()\"\n ></p-table-footer>\n</p-table-container>\n\n<ng-container *ngIf=\"!!filterModalTemplate\">\n <p-modal [header]=\"filterModalHeaderText\" [show]=\"filterModalShow\">\n <div slot=\"content\">\n <ng-container\n *ngTemplateOutlet=\"filterModalTemplate\"\n ></ng-container>\n </div>\n <div slot=\"footer\" class=\"flex justify-between w-full\">\n <p-button\n variant=\"secondary\"\n icon=\"arrow\"\n icon-position=\"start\"\n icon-flip=\"horizontal\"\n >\n {{ filterModalCancelText }}\n </p-button>\n <p-button icon=\"arrow\" (onClick)=\"filterModalSave()\">\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 flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-search\"\n class=\"mb-6\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateFilteredHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-14\">\n {{ emptyStateFilteredContent }}\n </p>\n </div>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n <div\n class=\"\n flex flex-col\n items-center\n text-center\n py-24\n max-w-[20rem]\n self-center\n \"\n >\n <p-illustration\n variant=\"empty-state-overview\"\n class=\"cursor-pointer mb-6\"\n (click)=\"emptyStateActionClick.emit()\"\n ></p-illustration>\n <p class=\"font-semibold text-storm-default\">\n {{ emptyStateHeader }}\n </p>\n <p class=\"text-sm text-storm-medium mb-6\">\n {{ emptyStateContent }}\n </p>\n <p-button\n variant=\"secondary\"\n icon=\"plus\"\n size=\"small\"\n (click)=\"emptyStateActionClick.emit()\"\n >\n {{ emptyStateAction }}\n </p-button>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
|
|
2472
2512
|
}], ctorParameters: function () { return []; }, propDecorators: { items: [{
|
|
2473
2513
|
type: Input
|
|
2474
2514
|
}], loading: [{
|
|
@@ -2558,6 +2598,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
2558
2598
|
}], columnDefinitions: [{
|
|
2559
2599
|
type: ContentChildren,
|
|
2560
2600
|
args: [TableColumn]
|
|
2601
|
+
}], filterModalTemplate: [{
|
|
2602
|
+
type: ContentChild,
|
|
2603
|
+
args: [TableFilterModalDirective, {
|
|
2604
|
+
read: TemplateRef,
|
|
2605
|
+
static: true,
|
|
2606
|
+
}]
|
|
2607
|
+
}], filterModalHeaderText: [{
|
|
2608
|
+
type: Input
|
|
2609
|
+
}], filterModalSaveText: [{
|
|
2610
|
+
type: Input
|
|
2611
|
+
}], filterModalCancelText: [{
|
|
2612
|
+
type: Input
|
|
2613
|
+
}], filterModalShown: [{
|
|
2614
|
+
type: Output
|
|
2561
2615
|
}], keyDown: [{
|
|
2562
2616
|
type: HostListener,
|
|
2563
2617
|
args: ['document:keydown', ['$event']]
|
|
@@ -2579,6 +2633,7 @@ class TableNgxDirective extends BaseValueAccessor {
|
|
|
2579
2633
|
this.lastValue = {
|
|
2580
2634
|
query: '',
|
|
2581
2635
|
quickFilter: undefined,
|
|
2636
|
+
filters: [],
|
|
2582
2637
|
page: 1,
|
|
2583
2638
|
pageSize: 12,
|
|
2584
2639
|
selectedRows: [],
|
|
@@ -2625,7 +2680,7 @@ class TableNgxDirective extends BaseValueAccessor {
|
|
|
2625
2680
|
// quickFilter?.identifier;
|
|
2626
2681
|
}
|
|
2627
2682
|
_checkEmptyStateType() {
|
|
2628
|
-
if (this.lastValue.query?.length || !this.lastValue.quickFilter?.default || (this._base.selectedFiltersAmount && this._base.selectedFiltersAmount > 0)) {
|
|
2683
|
+
if (this.lastValue.query?.length || !this.lastValue.quickFilter?.default || (this._base.selectedFiltersAmount && this._base.selectedFiltersAmount > 0) || this.lastValue.filters?.length) {
|
|
2629
2684
|
this._base.emptyStateType = 'filtered';
|
|
2630
2685
|
return;
|
|
2631
2686
|
}
|
|
@@ -2742,6 +2797,7 @@ const TABLE_DIRECTIVES = [
|
|
|
2742
2797
|
TableHeaderDirective,
|
|
2743
2798
|
TableDirective,
|
|
2744
2799
|
TableNgxDirective,
|
|
2800
|
+
TableFilterModalDirective,
|
|
2745
2801
|
];
|
|
2746
2802
|
|
|
2747
2803
|
const DIRECTIVES = [
|
|
@@ -2812,7 +2868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
2812
2868
|
class TableModule {
|
|
2813
2869
|
}
|
|
2814
2870
|
TableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2815
|
-
TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.10", ngImport: i0, type: TableModule, declarations: [Table, TableCell, TableColumn, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective], imports: [CommonModule, StencilModule], exports: [Table, TableCell, TableColumn, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective] });
|
|
2871
|
+
TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.10", ngImport: i0, type: TableModule, declarations: [Table, TableCell, TableColumn, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective, TableFilterModalDirective], imports: [CommonModule, StencilModule], exports: [Table, TableCell, TableColumn, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective, TableFilterModalDirective] });
|
|
2816
2872
|
TableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TableModule, imports: [CommonModule, StencilModule] });
|
|
2817
2873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImport: i0, type: TableModule, decorators: [{
|
|
2818
2874
|
type: NgModule,
|
|
@@ -3088,5 +3144,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.10", ngImpo
|
|
|
3088
3144
|
* Generated bundle index. Do not edit.
|
|
3089
3145
|
*/
|
|
3090
3146
|
|
|
3091
|
-
export { BaseTableComponent, BaseUploadComponent, BaseValueAccessor, CustomCurrencyPipe, CustomDatePipe, DIRECTIVES$1 as DIRECTIVES, FormBaseComponent, MODULES, PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, PIPES, PIcon, PIllustration, PInfoPanel, PInputGroup, PLabel, PLayout, PLoader, PModal, PModalBackdrop, 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, SafePipe, SelectDirective, StencilModule, TABLE_COMPONENTS, TABLE_DIRECTIVES, TOAST_COMPONENTS, TOAST_DIRECTIVES, TOAST_SERVICES, Table, TableCell, TableColumn, TableDirective, TableFooterDirective, TableHeaderDirective, TableModule, TableNgxDirective, ToastContainer, ToastDirective, ToastModule, ToastService, ToastVariants };
|
|
3147
|
+
export { BaseTableComponent, BaseUploadComponent, BaseValueAccessor, CustomCurrencyPipe, CustomDatePipe, DIRECTIVES$1 as DIRECTIVES, FormBaseComponent, MODULES, PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, PIPES, PIcon, PIllustration, PInfoPanel, PInputGroup, PLabel, PLayout, PLoader, PModal, PModalBackdrop, 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, SafePipe, SelectDirective, StencilModule, TABLE_COMPONENTS, TABLE_DIRECTIVES, TOAST_COMPONENTS, TOAST_DIRECTIVES, TOAST_SERVICES, Table, TableCell, TableColumn, TableDirective, TableFilterModalDirective, TableFooterDirective, TableHeaderDirective, TableModule, TableNgxDirective, ToastContainer, ToastDirective, ToastModule, ToastService, ToastVariants };
|
|
3092
3148
|
//# sourceMappingURL=paperless-angular.mjs.map
|