@paperless/angular 0.1.0-alpha.196 → 0.1.0-alpha.198

package/fesm2015/paperless-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Input, Output, ViewChild, Directive, HostListener, ChangeDetectionStrategy, HostBinding, TemplateRef, ContentChild, ContentChildren, NgModule } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild, Directive, HostListener, ChangeDetectionStrategy, HostBinding, TemplateRef, ContentChild, ContentChildren, Host, NgModule } from '@angular/core';
 import { FormControl, FormGroup, FormArray, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { __decorate } from 'tslib';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
@@ -1720,10 +1720,10 @@ class TableCell {
     }
 }
 TableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n    <p-loader\n        *ngSwitchCase=\"'loading'\"\n        variant=\"ghost\"\n        class=\"rounded flex-1 w-full h-6\"\n    ></p-loader>\n\n    <div *ngSwitchCase=\"'header'\" class=\"flex\">\n        <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"'default'\" class=\"flex\">\n        <ng-container *ngIf=\"template; else valueTemplate\">\n            <ng-container\n                *ngTemplateOutlet=\"template; context: data\"\n            ></ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n\n<ng-template #valueTemplate>\n    {{ data.value }}\n</ng-template>\n", styles: [":host{@apply flex gap-4 items-center;}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }] });
+TableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n    <p-loader\n        *ngSwitchCase=\"'loading'\"\n        variant=\"ghost\"\n        class=\"rounded flex-1 w-full h-6\"\n    ></p-loader>\n\n    <div *ngSwitchCase=\"'header'\" class=\"flex\">\n        <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"'default'\" class=\"flex\">\n        <ng-container *ngIf=\"template; else valueTemplate\">\n            <ng-container\n                *ngTemplateOutlet=\"template; context: data\"\n            ></ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n\n<ng-template #valueTemplate>\n    {{ data.value }}\n</ng-template>\n", styles: [":host{display:flex;align-items:center;gap:1rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: PLoader, selector: "p-loader", inputs: ["color", "modalDescription", "modalTitle", "show", "variant"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableCell, decorators: [{
             type: Component,
-            args: [{ selector: 'p-table-cell-ngx', template: "<ng-container *ngIf=\"checkbox\">\n    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n    <p-loader\n        *ngSwitchCase=\"'loading'\"\n        variant=\"ghost\"\n        class=\"rounded flex-1 w-full h-6\"\n    ></p-loader>\n\n    <div *ngSwitchCase=\"'header'\" class=\"flex\">\n        <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"'default'\" class=\"flex\">\n        <ng-container *ngIf=\"template; else valueTemplate\">\n            <ng-container\n                *ngTemplateOutlet=\"template; context: data\"\n            ></ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n\n<ng-template #valueTemplate>\n    {{ data.value }}\n</ng-template>\n", styles: [":host{@apply flex gap-4 items-center;}\n"] }]
+            args: [{ selector: 'p-table-cell-ngx', template: "<ng-container *ngIf=\"checkbox\">\n    <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n    <p-loader\n        *ngSwitchCase=\"'loading'\"\n        variant=\"ghost\"\n        class=\"rounded flex-1 w-full h-6\"\n    ></p-loader>\n\n    <div *ngSwitchCase=\"'header'\" class=\"flex\">\n        <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n\n    <div *ngSwitchCase=\"'default'\" class=\"flex\">\n        <ng-container *ngIf=\"template; else valueTemplate\">\n            <ng-container\n                *ngTemplateOutlet=\"template; context: data\"\n            ></ng-container>\n        </ng-container>\n    </div>\n</ng-container>\n\n<ng-template #valueTemplate>\n    {{ data.value }}\n</ng-template>\n", styles: [":host{display:flex;align-items:center;gap:1rem}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], index: [{
@@ -1750,7 +1750,6 @@ let TableColumn = class TableColumn {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        console.log(this.el);
         proxyOutputs(this, this.el, ['tableDefinitionChanged']);
     }
 };
@@ -2322,13 +2321,13 @@ let TableComponent = class TableComponent {
     }
 };
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TableComponent, 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" }, outputs: { selectedRowsChange: "selectedRowsChange", rowClick: "rowClick", rowSelected: "rowSelected", rowDeselected: "rowDeselected", quickFilter: "quickFilter", queryChange: "queryChange", filter: "filter", edit: "edit", pageChange: "pageChange", pageSizeChange: "pageSizeChange", export: "export" }, 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]=\"index === 0 ? checkboxTemplate : undefined\"\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]=\"index === 0 ? checkboxTemplate : undefined\"\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            <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 *ngFor=\"let col of columns; let index = index\">\n                    <p-table-cell-ngx\n                        [definition]=\"col\"\n                        [item]=\"item\"\n                        [checkbox]=\"index === 0 ? checkboxTemplate : undefined\"\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)=\"_checkboxChange($event.target, rowIndex)\"\n                            [disabled]=\"_checkboxDisabled(item)\"\n                            [checked]=\"_selectionContains(item, rowIndex)\"\n                        />\n                    </ng-template>\n                </ng-container>\n            </p-table-row>\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", styles: [":host{@apply flex flex-col;}\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: 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 });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TableComponent, 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" }, outputs: { selectedRowsChange: "selectedRowsChange", rowClick: "rowClick", rowSelected: "rowSelected", rowDeselected: "rowDeselected", quickFilter: "quickFilter", queryChange: "queryChange", filter: "filter", edit: "edit", pageChange: "pageChange", pageSizeChange: "pageSizeChange", export: "export" }, 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]=\"index === 0 ? checkboxTemplate : undefined\"\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]=\"index === 0 ? checkboxTemplate : undefined\"\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            <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 *ngFor=\"let col of columns; let index = index\">\n                    <p-table-cell-ngx\n                        [definition]=\"col\"\n                        [item]=\"item\"\n                        [checkbox]=\"index === 0 ? checkboxTemplate : undefined\"\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)=\"_checkboxChange($event.target, rowIndex)\"\n                            [disabled]=\"_checkboxDisabled(item)\"\n                            [checked]=\"_selectionContains(item, rowIndex)\"\n                        />\n                    </ng-template>\n                </ng-container>\n            </p-table-row>\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", 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: 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 });
 TableComponent = __decorate([
     UntilDestroy({ checkProperties: true })
 ], TableComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            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]=\"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]=\"index === 0 ? checkboxTemplate : undefined\"\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]=\"index === 0 ? checkboxTemplate : undefined\"\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            <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 *ngFor=\"let col of columns; let index = index\">\n                    <p-table-cell-ngx\n                        [definition]=\"col\"\n                        [item]=\"item\"\n                        [checkbox]=\"index === 0 ? checkboxTemplate : undefined\"\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)=\"_checkboxChange($event.target, rowIndex)\"\n                            [disabled]=\"_checkboxDisabled(item)\"\n                            [checked]=\"_selectionContains(item, rowIndex)\"\n                        />\n                    </ng-template>\n                </ng-container>\n            </p-table-row>\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", styles: [":host{@apply flex flex-col;}\n"] }]
+            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]=\"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]=\"index === 0 ? checkboxTemplate : undefined\"\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]=\"index === 0 ? checkboxTemplate : undefined\"\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            <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 *ngFor=\"let col of columns; let index = index\">\n                    <p-table-cell-ngx\n                        [definition]=\"col\"\n                        [item]=\"item\"\n                        [checkbox]=\"index === 0 ? checkboxTemplate : undefined\"\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)=\"_checkboxChange($event.target, rowIndex)\"\n                            [disabled]=\"_checkboxDisabled(item)\"\n                            [checked]=\"_selectionContains(item, rowIndex)\"\n                        />\n                    </ng-template>\n                </ng-container>\n            </p-table-row>\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", styles: [":host{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { items: [{
                 type: Input
             }], loading: [{
@@ -2496,10 +2495,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
 class SelectDirective extends BaseValueAccessor {
     constructor(el) {
         super(el);
-        console.log(el);
     }
     writeValue(value) {
-        console.log(value);
         this.el.nativeElement.value = this.lastValue =
             value == null ? '' : value;
     }
@@ -2529,6 +2526,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
+/* eslint-disable @angular-eslint/no-host-metadata-property */
+class TableNgxDirective extends BaseValueAccessor {
+    constructor(el, _base) {
+        super(el);
+        this._base = _base;
+        this.lastValue = {
+            query: '',
+            quickFilter: undefined,
+            page: 1,
+            pageSize: 12,
+            selectedRows: [],
+        };
+    }
+    writeValue(value) {
+        this._base.query = this.lastValue.query = value === null || value === void 0 ? void 0 : value.query;
+        // this.el.nativeElement.query = this.lastValue.query = value?.query;
+        this.lastValue.quickFilter = value === null || value === void 0 ? void 0 : value.quickFilter;
+        this._base.page = this.lastValue.page =
+            (value === null || value === void 0 ? void 0 : value.page) == null ? 1 : value === null || value === void 0 ? void 0 : value.page;
+        this._base.pageSize = this.lastValue.pageSize =
+            (value === null || value === void 0 ? void 0 : value.pageSize) == null ? 12 : value === null || value === void 0 ? void 0 : value.pageSize;
+        // this.el.nativeElement.page = this.lastValue.page =
+        // 	value?.page == null ? 1 : value?.page;
+        // this.el.nativeElement.pageSize = this.lastValue.pageSize =
+        // 	value?.pageSize == null ? 12 : value?.pageSize;
+        this.lastValue.selectedRows =
+            (value === null || value === void 0 ? void 0 : value.selectedRows) == null ? [] : value === null || value === void 0 ? void 0 : value.selectedRows;
+        if (value === null || value === void 0 ? void 0 : value.quickFilter) {
+            this._setActiveQuickFilter(value.quickFilter);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    handleChange(value, type) {
+        this.handleChangeEvent(Object.assign(Object.assign({}, this.lastValue), { [type]: value }));
+        if (type === 'quickFilter' && typeof value === 'object') {
+            this._setActiveQuickFilter(value);
+        }
+    }
+    _setActiveQuickFilter(quickFilter) {
+        this._base.activeQuickFilterIdentifier = quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.identifier;
+        // this.el.nativeElement.activeQuickFilterIdentifier =
+        // 	quickFilter?.identifier;
+    }
+}
+TableNgxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableNgxDirective, deps: [{ token: i0.ElementRef }, { token: TableComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+TableNgxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TableNgxDirective, selector: "p-table-ngx", host: { listeners: { "queryChange": "handleChange($event.detail, \"query\")", "quickFilter": "handleChange($event.detail, \"quickFilter\")", "pageChange": "handleChange($event.detail, \"page\")", "pageSizeChange": "handleChange($event.detail, \"pageSize\")", "selectedRowsChange": "handleChange($event, \"selectedRows\")" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: TableNgxDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableNgxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'p-table-ngx',
+                    host: {
+                        '(queryChange)': 'handleChange($event.detail, "query")',
+                        '(quickFilter)': 'handleChange($event.detail, "quickFilter")',
+                        '(pageChange)': 'handleChange($event.detail, "page")',
+                        '(pageSizeChange)': 'handleChange($event.detail, "pageSize")',
+                        '(selectedRowsChange)': 'handleChange($event, "selectedRows")',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TableNgxDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: TableComponent, decorators: [{
+                        type: Host
+                    }] }];
+    } });
+
 class TableDirective extends BaseValueAccessor {
     constructor(el) {
         super(el);
@@ -2607,6 +2686,7 @@ const CUSTOM_DIRECTIVES = [
     TableFooterDirective,
     TableHeaderDirective,
     TableDirective,
+    TableNgxDirective,
     SelectDirective,
 ];
 
@@ -2665,7 +2745,7 @@ const DIRECTIVES = [
 class PaperlessModule {
 }
 PaperlessModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PaperlessModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PaperlessModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: PaperlessModule, declarations: [PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, 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, PToastContainer, PTooltip, TableComponent, TableColumn, TableCell, PaginationDirective, PageSizeSelectDirective, TableFooterDirective, TableHeaderDirective, TableDirective, SelectDirective], imports: [CommonModule], exports: [PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, 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, PToastContainer, PTooltip, TableComponent, TableColumn, TableCell, PaginationDirective, PageSizeSelectDirective, TableFooterDirective, TableHeaderDirective, TableDirective, SelectDirective] });
+PaperlessModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.7", ngImport: i0, type: PaperlessModule, declarations: [PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, 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, PToastContainer, PTooltip, TableComponent, TableColumn, TableCell, PaginationDirective, PageSizeSelectDirective, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective, SelectDirective], imports: [CommonModule], exports: [PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, 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, PToastContainer, PTooltip, TableComponent, TableColumn, TableCell, PaginationDirective, PageSizeSelectDirective, TableFooterDirective, TableHeaderDirective, TableDirective, TableNgxDirective, SelectDirective] });
 PaperlessModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PaperlessModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PaperlessModule, decorators: [{
             type: NgModule,
@@ -2684,5 +2764,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseTableComponent, BaseUploadComponent, BaseValueAccessor, COMPONENTS, CUSTOM_DIRECTIVES, FormBaseComponent, PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, 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, PToastContainer, PTooltip, PageSizeSelectDirective, PaginationDirective, PaperlessModule, SelectDirective, TableCell, TableColumn, TableComponent, TableDirective, TableFooterDirective, TableHeaderDirective };
+export { BaseTableComponent, BaseUploadComponent, BaseValueAccessor, COMPONENTS, CUSTOM_DIRECTIVES, FormBaseComponent, PAccordion, PAvatar, PAvatarGroup, PButton, PCardBody, PCardContainer, PCardHeader, PContentSlider, PCounter, PDivider, PDropdown, PDropdownMenuContainer, PDropdownMenuItem, PHelper, 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, PToastContainer, PTooltip, PageSizeSelectDirective, PaginationDirective, PaperlessModule, SelectDirective, TableCell, TableColumn, TableComponent, TableDirective, TableFooterDirective, TableHeaderDirective, TableNgxDirective };
 //# sourceMappingURL=paperless-angular.mjs.map