@paperless/angular 0.1.0-alpha.195 → 0.1.0-alpha.197

package/fesm2015/paperless-angular.mjs

@@ -1,10 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, Input, Output, ViewChild, Directive, HostListener, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild, Directive, HostListener, ChangeDetectionStrategy, HostBinding, TemplateRef, ContentChild, ContentChildren, 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';
 import { timer, fromEvent } from 'rxjs';
 import { startWith, pairwise, map, filter, debounce } from 'rxjs/operators';
+import { objectGetByPath } from '@paperless/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 class FormBaseComponent {
     constructor() {
@@ -356,297 +359,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 args: ['focusout']
             }] } });
 
-class PageSizeSelectDirective extends BaseValueAccessor {
-    constructor(el) {
-        super(el);
-    }
-    writeValue(value) {
-        this.el.nativeElement.page = this.lastValue =
-            value == null ? '' : value;
-    }
-    registerOnChange(fn) {
-        super.registerOnChange((value) => fn(value === '' ? null : parseInt(value, 10)));
-    }
-}
-PageSizeSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PageSizeSelectDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PageSizeSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: PageSizeSelectDirective, selector: "p-page-size-select", host: { listeners: { "sizeChange": "handleChangeEvent($event.detail)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: PageSizeSelectDirective,
-            multi: true,
-        },
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PageSizeSelectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    /* tslint:disable-next-line:directive-selector */
-                    selector: 'p-page-size-select',
-                    host: {
-                        '(sizeChange)': 'handleChangeEvent($event.detail)',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: PageSizeSelectDirective,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class PaginationDirective extends BaseValueAccessor {
-    constructor(el) {
-        super(el);
-    }
-    writeValue(value) {
-        this.el.nativeElement.page = this.lastValue =
-            value == null ? '' : value;
-    }
-    registerOnChange(fn) {
-        super.registerOnChange((value) => fn(value === '' ? null : parseInt(value, 10)));
-    }
-}
-PaginationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PaginationDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PaginationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: PaginationDirective, selector: "p-pagination", host: { listeners: { "pageChange": "handleChangeEvent($event.detail)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: PaginationDirective,
-            multi: true,
-        },
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PaginationDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    /* tslint:disable-next-line:directive-selector */
-                    selector: 'p-pagination',
-                    host: {
-                        '(pageChange)': 'handleChangeEvent($event.detail)',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: PaginationDirective,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-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;
-    }
-}
-SelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SelectDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-SelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: SelectDirective, selector: "p-select", host: { listeners: { "valueChange": "handleChangeEvent($event.detail)" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: SelectDirective,
-            multi: true,
-        },
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SelectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'p-select',
-                    host: {
-                        '(valueChange)': 'handleChangeEvent($event.detail)',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: SelectDirective,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class TableFooterDirective extends BaseValueAccessor {
-    constructor(el) {
-        super(el);
-        this.lastValue = {
-            page: 1,
-            pageSize: 12,
-        };
-    }
-    writeValue(value) {
-        this.el.nativeElement.page = this.lastValue.page =
-            (value === null || value === void 0 ? void 0 : value.page) == null ? '' : value === null || value === void 0 ? void 0 : value.page;
-        this.el.nativeElement.pageSize = this.lastValue.pageSize =
-            (value === null || value === void 0 ? void 0 : value.pageSize) == null ? '' : value === null || value === void 0 ? void 0 : value.pageSize;
-    }
-    handleChange(value, type) {
-        this.handleChangeEvent(Object.assign(Object.assign({}, this.lastValue), { [type]: value }));
-    }
-}
-TableFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableFooterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TableFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TableFooterDirective, selector: "p-table-footer", host: { listeners: { "pageChange": "handleChange($event.detail, \"page\")", "pageSizeChange": "handleChange($event.detail, \"pageSize\")" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: TableFooterDirective,
-            multi: true,
-        },
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    /* tslint:disable-next-line:directive-selector */
-                    selector: 'p-table-footer',
-                    host: {
-                        '(pageChange)': 'handleChange($event.detail, "page")',
-                        '(pageSizeChange)': 'handleChange($event.detail, "pageSize")',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: TableFooterDirective,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class TableHeaderDirective extends BaseValueAccessor {
-    constructor(el) {
-        super(el);
-        this.lastValue = {
-            query: '',
-            quickFilter: undefined,
-        };
-    }
-    writeValue(value) {
-        this.el.nativeElement.query = this.lastValue.query = value === null || value === void 0 ? void 0 : value.query;
-        this.lastValue.quickFilter = value === null || value === void 0 ? void 0 : value.quickFilter;
-        if (value === null || value === void 0 ? void 0 : value.quickFilter) {
-            this._setActiveQuickFilter(value.quickFilter);
-        }
-    }
-    handleChange(value, type) {
-        this.handleChangeEvent(Object.assign(Object.assign({}, this.lastValue), { [type]: value }));
-        if (type === 'quickFilter' && typeof value !== 'string') {
-            this._setActiveQuickFilter(value);
-        }
-    }
-    _setActiveQuickFilter(quickFilter) {
-        this.el.nativeElement.activeQuickFilterIdentifier =
-            quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.identifier;
-    }
-}
-TableHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TableHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TableHeaderDirective, selector: "p-table-header", host: { listeners: { "queryChange": "handleChange($event.detail, \"query\")", "quickFilter": "handleChange($event.detail, \"quickFilter\")" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: TableHeaderDirective,
-            multi: true,
-        },
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    /* tslint:disable-next-line:directive-selector */
-                    selector: 'p-table-header',
-                    host: {
-                        '(queryChange)': 'handleChange($event.detail, "query")',
-                        '(quickFilter)': 'handleChange($event.detail, "quickFilter")',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: TableHeaderDirective,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-class TableDirective extends BaseValueAccessor {
-    constructor(el) {
-        super(el);
-        this.lastValue = {
-            query: '',
-            quickFilter: undefined,
-            page: 1,
-            pageSize: 12,
-            selectedRows: [],
-        };
-    }
-    writeValue(value) {
-        this.el.nativeElement.query = this.lastValue.query = value === null || value === void 0 ? void 0 : value.query;
-        this.lastValue.quickFilter = value === null || value === void 0 ? void 0 : value.quickFilter;
-        this.el.nativeElement.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.el.nativeElement.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.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.el.nativeElement.activeQuickFilterIdentifier =
-            quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.identifier;
-    }
-}
-TableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TableDirective, selector: "p-table", 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.detail, \"selectedRows\")" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: TableDirective,
-            multi: true,
-        },
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    /* tslint:disable-next-line:directive-selector */
-                    selector: 'p-table',
-                    host: {
-                        '(queryChange)': 'handleChange($event.detail, "query")',
-                        '(quickFilter)': 'handleChange($event.detail, "quickFilter")',
-                        '(pageChange)': 'handleChange($event.detail, "page")',
-                        '(pageSizeChange)': 'handleChange($event.detail, "pageSize")',
-                        '(selectedRowsChange)': 'handleChange($event.detail, "selectedRows")',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: TableDirective,
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-
-// Custom directives
-const CUSTOM_DIRECTIVES = [
-    PaginationDirective,
-    PageSizeSelectDirective,
-    TableFooterDirective,
-    TableHeaderDirective,
-    TableDirective,
-    SelectDirective,
-];
-
 /* eslint-disable */
 const proxyInputs = (Cmp, inputs) => {
     const Prototype = Cmp.prototype;
@@ -1746,135 +1458,1154 @@ PTableContainer = __decorate([
 ], PTableContainer);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableContainer, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'p-table-container',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let PTableFooter = class PTableFooter {
+            args: [{
+                    selector: 'p-table-container',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let PTableFooter = class PTableFooter {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['pageChange', 'pageSizeChange', 'export']);
+    }
+};
+PTableFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableFooter, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PTableFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PTableFooter, selector: "p-table-footer", inputs: { enableExport: "enableExport", enablePageSize: "enablePageSize", enablePagination: "enablePagination", hideOnSinglePage: "hideOnSinglePage", page: "page", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", total: "total" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PTableFooter = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: undefined,
+        inputs: ['enableExport', 'enablePageSize', 'enablePagination', 'hideOnSinglePage', 'page', 'pageSize', 'pageSizeOptions', 'total']
+    })
+], PTableFooter);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableFooter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-table-footer',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['enableExport', 'enablePageSize', 'enablePagination', 'hideOnSinglePage', 'page', 'pageSize', 'pageSizeOptions', 'total']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let PTableHeader = class PTableHeader {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['quickFilter', 'queryChange', 'filter', 'edit']);
+    }
+};
+PTableHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PTableHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PTableHeader, selector: "p-table-header", inputs: { activeQuickFilterIdentifier: "activeQuickFilterIdentifier", canEdit: "canEdit", editButtonTemplate: "editButtonTemplate", enableEdit: "enableEdit", enableFilter: "enableFilter", enableSearch: "enableSearch", filterButtonTemplate: "filterButtonTemplate", itemsSelectedAmount: "itemsSelectedAmount", query: "query", quickFilters: "quickFilters", selectedFiltersAmount: "selectedFiltersAmount" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PTableHeader = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: undefined,
+        inputs: ['activeQuickFilterIdentifier', 'canEdit', 'editButtonTemplate', 'enableEdit', 'enableFilter', 'enableSearch', 'filterButtonTemplate', 'itemsSelectedAmount', 'query', 'quickFilters', 'selectedFiltersAmount']
+    })
+], PTableHeader);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-table-header',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['activeQuickFilterIdentifier', 'canEdit', 'editButtonTemplate', 'enableEdit', 'enableFilter', 'enableSearch', 'filterButtonTemplate', 'itemsSelectedAmount', 'query', 'quickFilters', 'selectedFiltersAmount']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let PTableRow = class PTableRow {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+PTableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableRow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PTableRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PTableRow, selector: "p-table-row", inputs: { enableHover: "enableHover", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PTableRow = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: undefined,
+        inputs: ['enableHover', 'variant']
+    })
+], PTableRow);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-table-row',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['enableHover', 'variant']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let PToastContainer = class PToastContainer {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+PToastContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PToastContainer, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PToastContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PToastContainer, selector: "p-toast-container", inputs: { placement: "placement" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PToastContainer = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: undefined,
+        inputs: ['placement']
+    })
+], PToastContainer);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PToastContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-toast-container',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['placement']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+let PTooltip = class PTooltip {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+        proxyOutputs(this, this.el, ['isOpen']);
+    }
+};
+PTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTooltip, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PTooltip, selector: "p-tooltip", inputs: { canManuallyClose: "canManuallyClose", placement: "placement", popover: "popover", show: "show", strategy: "strategy", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PTooltip = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: undefined,
+        inputs: ['canManuallyClose', 'placement', 'popover', 'show', 'strategy', 'variant']
+    })
+], PTooltip);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTooltip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-tooltip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    inputs: ['canManuallyClose', 'placement', 'popover', 'show', 'strategy', 'variant']
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+
+/* eslint-disable max-len */
+class TableCell {
+    constructor() {
+        /**
+         * The variant of the column
+         */
+        this.variant = 'default';
+        /**
+         * The index of the column
+         */
+        this.index = 0;
+        /**
+         * The index of the row
+         */
+        this.rowIndex = 0;
+    }
+    get class() {
+        return this.getColumnClasses();
+    }
+    get data() {
+        var _a;
+        if (this.variant === 'header') {
+            return {
+                value: this.value,
+            };
+        }
+        return {
+            value: (_a = this.value) !== null && _a !== void 0 ? _a : objectGetByPath(this.item, this.definition.path),
+            item: this.item,
+            index: this.index,
+            rowIndex: this.rowIndex,
+        };
+    }
+    // render() {
+    // 	return (
+    // 		<Host
+    // 			class={{
+    // 				'p-table-column': true,
+    // 				[`variant-${this.variant}`]: true,
+    // 				...this._getColumnClasses(),
+    // 			}}
+    // 		>
+    // 			{this.checkbox}
+    // 			{this.variant === 'loading' ? (
+    // 				<p-loader
+    // 					variant="ghost"
+    // 					class="rounded flex-1 w-full h-6"
+    // 				/>
+    // 			) : (
+    // 				<div class="flex">
+    // 					{this.variant === 'header' ? (
+    // 						this.data.value
+    // 					) : this.definition.useSlot ? (
+    // 						<slot />
+    // 					) : (
+    // 						this.template(this.data as TableDefinitionData)
+    // 					)}
+    // 				</div>
+    // 			)}
+    // 		</Host>
+    // 	);
+    // }
+    getColumnClasses() {
+        var _a, _b, _c, _d, _e, _f;
+        const sizes = this.definition ? this._getSizes(this.definition) : {};
+        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);
+    }
+    /*
+     With this, we shall hack the system in ways no one would ever have thought.
+
+     w-1/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12 w-10/12 w-11/12 w-12/12
+     tablet:w-1/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12 tablet:w-10/12 tablet:w-11/12 tablet:w-12/12
+     desktop-xs:w-1/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12
+     desktop-xs:w-1/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12
+     desktop-sm:w-1/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-12/12
+     desktop:w-1/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12 desktop:w-10/12 desktop:w-11/12 desktop:w-12/12
+     desktop-lg:w-1/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-12/12
+     desktop-xl:w-1/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-12/12
+
+
+        ⠀⠀⠀⠀⠀⣠⣴⣶⣿⣿⠿⣷⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣶⣷⠿⣿⣿⣶⣦⣀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣶⣦⣬⡉⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠚⢉⣥⣴⣾⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀
+        ⠀⠀⠀⡾⠿⠛⠛⠛⠛⠿⢿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⣿⣿⠿⠿⠛⠛⠛⠛⠿⢧⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⣠⣤⠶⠶⠶⠰⠦⣤⣀⠀⠙⣷⠀⠀⠀⠀⠀⠀⠀⢠⡿⠋⢀⣀⣤⢴⠆⠲⠶⠶⣤⣄⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠘⣆⠀⠀⢠⣾⣫⣶⣾⣿⣿⣿⣿⣷⣯⣿⣦⠈⠃⡇⠀⠀⠀⠀⢸⠘⢁⣶⣿⣵⣾⣿⣿⣿⣿⣷⣦⣝⣷⡄⠀⠀⡰⠂⠀
+        ⠀⠀⣨⣷⣶⣿⣧⣛⣛⠿⠿⣿⢿⣿⣿⣛⣿⡿⠀⠀⡇⠀⠀⠀⠀⢸⠀⠈⢿⣟⣛⠿⢿⡿⢿⢿⢿⣛⣫⣼⡿⣶⣾⣅⡀⠀
+        ⢀⡼⠋⠁⠀⠀⠈⠉⠛⠛⠻⠟⠸⠛⠋⠉⠁⠀⠀⢸⡇⠀⠀⠄⠀⢸⡄⠀⠀⠈⠉⠙⠛⠃⠻⠛⠛⠛⠉⠁⠀⠀⠈⠙⢧⡀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡇⢠⠀⠀⠀⢸⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⡇⠀⠀⠀⠀⢸⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠟⠁⣿⠇⠀⠀⠀⠀⢸⡇⠙⢿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠰⣄⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⠖⡾⠁⠀⠀⣿⠀⠀⠀⠀⠀⠘⣿⠀⠀⠙⡇⢸⣷⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀
+        ⠀⠀⢻⣷⡦⣤⣤⣤⡴⠶⠿⠛⠉⠁⠀⢳⠀⢠⡀⢿⣀⠀⠀⠀⠀⣠⡟⢀⣀⢠⠇⠀⠈⠙⠛⠷⠶⢦⣤⣤⣤⢴⣾⡏⠀⠀
+        ⠀⠀⠈⣿⣧⠙⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⢊⣙⠛⠒⠒⢛⣋⡚⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⡿⠁⣾⡿⠀⠀⠀
+        ⠀⠀⠀⠘⣿⣇⠈⢿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⡿⢿⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⡟⠁⣼⡿⠁⠀⠀⠀
+        ⠀⠀⠀⠀⠘⣿⣦⠀⠻⣿⣷⣦⣤⣤⣶⣶⣶⣿⣿⣿⣿⠏⠀⠀⠻⣿⣿⣿⣿⣶⣶⣶⣦⣤⣴⣿⣿⠏⢀⣼⡿⠁⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠘⢿⣷⣄⠙⠻⠿⠿⠿⠿⠿⢿⣿⣿⣿⣁⣀⣀⣀⣀⣙⣿⣿⣿⠿⠿⠿⠿⠿⠿⠟⠁⣠⣿⡿⠁⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠈⠻⣯⠙⢦⣀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠀⠀⠀⠀⠀⣠⠴⢋⣾⠟⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠙⢧⡀⠈⠉⠒⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠐⠒⠉⠁⢀⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⣠⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢦⡀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢀⡴⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+    */
+    _getSizes({ sizes } /* Table Definition */) {
+        if (sizes === 'auto' || !sizes) {
+            return {
+                'w-auto': true,
+            };
+        }
+        if (typeof sizes === 'object') {
+            const classes = {};
+            for (const size of Object.keys(sizes)) {
+                if (size === 'default') {
+                    classes[`w-${sizes.default}/12`] = true;
+                    continue;
+                }
+                classes[`${size}:w-${sizes[`${size}`]}/12`] = true;
+            }
+            return classes;
+        }
+        // is a number.
+        return {
+            [`w-${sizes}/12`]: true,
+        };
+    }
+}
+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{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{display:flex;align-items:center;gap:1rem}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }], definition: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], checkbox: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+let TableColumn = class TableColumn {
     constructor(c, r, z) {
         this.z = z;
         c.detach();
         this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['pageChange', 'pageSizeChange', 'export']);
+        proxyOutputs(this, this.el, ['tableDefinitionChanged']);
     }
 };
-PTableFooter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableFooter, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableFooter.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PTableFooter, selector: "p-table-footer", inputs: { enableExport: "enableExport", enablePageSize: "enablePageSize", enablePagination: "enablePagination", hideOnSinglePage: "hideOnSinglePage", page: "page", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", total: "total" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableFooter = __decorate([
+TableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableColumn, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: TableColumn, selector: "p-table-column", inputs: { align: "align", name: "name", path: "path", sizes: "sizes", type: "type", useSlot: "useSlot" }, 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 });
+TableColumn = __decorate([
     ProxyCmp({
         defineCustomElementFn: undefined,
-        inputs: ['enableExport', 'enablePageSize', 'enablePagination', 'hideOnSinglePage', 'page', 'pageSize', 'pageSizeOptions', 'total']
+        inputs: ['align', 'name', 'path', 'sizes', 'type', 'useSlot'],
     })
-], PTableFooter);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableFooter, decorators: [{
+], TableColumn);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableColumn, decorators: [{
             type: Component,
             args: [{
-                    selector: 'p-table-footer',
+                    selector: 'p-table-column',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
-                    inputs: ['enableExport', 'enablePageSize', 'enablePagination', 'hideOnSinglePage', 'page', 'pageSize', 'pageSizeOptions', 'total']
+                    inputs: ['align', 'name', 'path', 'sizes', 'type', 'useSlot'],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let PTableHeader = class PTableHeader {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['quickFilter', 'queryChange', 'filter', 'edit']);
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { template: [{
+                type: ContentChild,
+                args: [TemplateRef, {
+                        read: TemplateRef,
+                        static: true,
+                    }]
+            }] } });
+
+const defaultSize = 12;
+const defaultSizeOptions = [12, 24, 68, 136];
+
+class TableFooterDirective extends BaseValueAccessor {
+    constructor(el) {
+        super(el);
+        this.lastValue = {
+            page: 1,
+            pageSize: 12,
+        };
+    }
+    writeValue(value) {
+        this.el.nativeElement.page = this.lastValue.page =
+            (value === null || value === void 0 ? void 0 : value.page) == null ? '' : value === null || value === void 0 ? void 0 : value.page;
+        this.el.nativeElement.pageSize = this.lastValue.pageSize =
+            (value === null || value === void 0 ? void 0 : value.pageSize) == null ? '' : value === null || value === void 0 ? void 0 : value.pageSize;
+    }
+    handleChange(value, type) {
+        this.handleChangeEvent(Object.assign(Object.assign({}, this.lastValue), { [type]: value }));
+    }
+}
+TableFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableFooterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TableFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TableFooterDirective, selector: "p-table-footer", host: { listeners: { "pageChange": "handleChange($event.detail, \"page\")", "pageSizeChange": "handleChange($event.detail, \"pageSize\")" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: TableFooterDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'p-table-footer',
+                    host: {
+                        '(pageChange)': 'handleChange($event.detail, "page")',
+                        '(pageSizeChange)': 'handleChange($event.detail, "pageSize")',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TableFooterDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class TableHeaderDirective extends BaseValueAccessor {
+    constructor(el) {
+        super(el);
+        this.lastValue = {
+            query: '',
+            quickFilter: undefined,
+        };
+    }
+    writeValue(value) {
+        this.el.nativeElement.query = this.lastValue.query = value === null || value === void 0 ? void 0 : value.query;
+        this.lastValue.quickFilter = value === null || value === void 0 ? void 0 : value.quickFilter;
+        if (value === null || value === void 0 ? void 0 : value.quickFilter) {
+            this._setActiveQuickFilter(value.quickFilter);
+        }
+    }
+    handleChange(value, type) {
+        this.handleChangeEvent(Object.assign(Object.assign({}, this.lastValue), { [type]: value }));
+        if (type === 'quickFilter' && typeof value !== 'string') {
+            this._setActiveQuickFilter(value);
+        }
+    }
+    _setActiveQuickFilter(quickFilter) {
+        this.el.nativeElement.activeQuickFilterIdentifier =
+            quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.identifier;
+    }
+}
+TableHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableHeaderDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TableHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TableHeaderDirective, selector: "p-table-header", host: { listeners: { "queryChange": "handleChange($event.detail, \"query\")", "quickFilter": "handleChange($event.detail, \"quickFilter\")" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: TableHeaderDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'p-table-header',
+                    host: {
+                        '(queryChange)': 'handleChange($event.detail, "query")',
+                        '(quickFilter)': 'handleChange($event.detail, "quickFilter")',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TableHeaderDirective,
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+let TableComponent = class TableComponent {
+    constructor() {
+        /**
+         * Wether data is loading
+         */
+        this.loading = false;
+        /**
+         * The amount of loading rows to show
+         */
+        this.amountOfLoadingRows = 4;
+        /**
+         * Wether to enable selection
+         */
+        this.enableRowSelection = true;
+        /**
+         * Wether to enable row clicking
+         */
+        this.enableRowClick = true;
+        /**
+         * The current selection of items
+         */
+        this.selectedRows = [];
+        /**
+         * Event whenever the current selection changes
+         */
+        this.selectedRowsChange = new EventEmitter();
+        /**
+         * Event whenever a row is clicked
+         */
+        this.rowClick = new EventEmitter();
+        /**
+         * Event whenever a row is selected
+         */
+        this.rowSelected = new EventEmitter();
+        /**
+         * Event whenever a row is deselected
+         */
+        this.rowDeselected = new EventEmitter();
+        /** START HEADER */
+        /**
+         * Quick filters to show
+         */
+        this.quickFilters = [];
+        /**
+         * Wether to show the search input
+         */
+        this.enableSearch = true;
+        /**
+         * Wether to show the filter button
+         */
+        this.enableFilter = true;
+        /**
+         * Wether to show the edit button
+         */
+        this.enableEdit = true;
+        /**
+         * Event when one of the quick filters is clicked
+         */
+        this.quickFilter = new EventEmitter();
+        /**
+         * Event when the query changes
+         */
+        this.queryChange = new EventEmitter();
+        /**
+         * Event when the filter button is clicked
+         */
+        this.filter = new EventEmitter();
+        /**
+         * Event when the edit button is clicked
+         */
+        this.edit = new EventEmitter();
+        /** START FOOTER */
+        /**
+         * Wether to enable page size select
+         */
+        this.enablePageSize = true;
+        /**
+         * Wether to enable pagination
+         */
+        this.enablePagination = true;
+        /**
+         * Wether to enable export
+         */
+        this.enableExport = true;
+        /**
+         * The current page
+         */
+        this.page = 1;
+        /**
+         * Event whenever the page changes
+         */
+        this.pageChange = new EventEmitter();
+        /**
+         * The amount of items per page
+         */
+        this.pageSize = defaultSize;
+        /**
+         * The options for the page size
+         */
+        this.pageSizeOptions = defaultSizeOptions;
+        /**
+         * Event whenever the page changes
+         */
+        this.pageSizeChange = new EventEmitter();
+        /**
+         * Event whenever the page changes
+         */
+        this.export = new EventEmitter();
+        /**
+         * Wether to hide when there is only 1 page available
+         */
+        this.hideOnSinglePage = true;
+        this.columns = [];
+        this.parsedItems = [];
+        this.loadingRows = Array.from({
+            length: this.amountOfLoadingRows,
+        });
+        this._ctrlDown = false;
+    }
+    set columnDefinitions(v) {
+        this._columnDefinitions = v;
+        this._generateColumns();
+    }
+    get columnDefinitions() {
+        return this._columnDefinitions;
+    }
+    ngOnInit() {
+        this._parseItems(this.items);
+        // this._generateColumns();
+    }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this._parseItems(changes['items'].currentValue);
+        }
+    }
+    //  @HostListener('body:tableDefinitionChanged', { target: 'body' })
+    //  onTableDefinitionUpdated() {
+    //      this._generateColumns();
+    //  }
+    keyDown({ key }) {
+        if (key !== 'Control' || this._ctrlDown === true) {
+            return;
+        }
+        this._ctrlDown = true;
+    }
+    keyUp({ key }) {
+        if (key !== 'Control' || this._ctrlDown === false) {
+            return;
+        }
+        this._ctrlDown = false;
+    }
+    visibilityChange() {
+        if (document.visibilityState !== 'hidden' || this._ctrlDown === false) {
+            return;
+        }
+        this._ctrlDown = false;
+    }
+    onQueryChange({ detail }) {
+        this.queryChange.emit(detail);
+    }
+    onQuickFilter({ detail }) {
+        this.quickFilter.emit(detail);
+    }
+    onPageSizeChange({ detail }) {
+        this.pageSizeChange.emit(detail);
+    }
+    onPageChange({ detail }) {
+        this.pageChange.emit(detail);
+    }
+    _parseItems(items) {
+        if (!items) {
+            this.parsedItems = [];
+            return;
+        }
+        if (Array.isArray(items)) {
+            this.parsedItems = items;
+            return;
+        }
+        this.parsedItems = JSON.parse(items);
+    }
+    _generateColumns() {
+        // const definitions =
+        // 	this._el.nativeElement.querySelectorAll('p-table-definition');
+        this.columns = Array.from(this._columnDefinitions);
+    }
+    //  private _getHeader() {
+    //      return (
+    //          <p-table-row variant="header">
+    //              {this._columns.map((col: TableDefinition, index) => (
+    //                  <p-table-column
+    //                      definition={col}
+    //                      value={col.name}
+    //                      variant="header"
+    //                      checkbox={this._getCheckbox(index, null, 'header')}
+    //                      index={index}
+    //                  ></p-table-column>
+    //              ))}
+    //          </p-table-row>
+    //      );
+    //  }
+    //  private _getRows() {
+    //      if (this.loading) {
+    //          return Array.from(
+    //              {
+    //                  length: this.amountOfLoadingRows,
+    //              },
+    //              (_, i) => (
+    //                  <p-table-row
+    //                      enableHover={
+    //                          this.enableRowSelection || this.enableRowClick
+    //                      }
+    //                  >
+    //                      {this._getLoadingColumns(i)}
+    //                  </p-table-row>
+    //              )
+    //          );
+    //      }
+    //      return this._items.map((item, index) => (
+    //          <p-table-row
+    //              enableHover={this.enableRowSelection || this.enableRowClick}
+    //              onClick={(ev) => this._rowClick(ev, index)}
+    //          >
+    //              {this._getRowColumns(item, index)}
+    //          </p-table-row>
+    //      ));
+    //  }
+    //  private _getRowColumns(item, index) {
+    //      return this._columns.map((col: TableDefinition, colIndex) => {
+    //          return (
+    //              <p-table-column
+    //                  definition={col}
+    //                  item={item}
+    //                  checkbox={this._getCheckbox(colIndex, index)}
+    //                  index={colIndex}
+    //                  rowIndex={index}
+    //              ></p-table-column>
+    //          );
+    //      });
+    //  }
+    //  private _getLoadingColumns(index) {
+    //      return this._columns.map((col: TableDefinition, colIndex) => {
+    //          return (
+    //              <p-table-column
+    //                  definition={col}
+    //                  variant="loading"
+    //                  checkbox={this._getCheckbox(colIndex, index, 'loading')}
+    //                  index={colIndex}
+    //                  rowIndex={index}
+    //              ></p-table-column>
+    //          );
+    //      });
+    //  }
+    //  private _getCheckbox(
+    //      index,
+    //      rowIndex,
+    //      variant: 'header' | 'default' | 'loading' = 'default'
+    //  ) {
+    //      if (!this.enableRowSelection || !this.selectionKey || index !== 0) {
+    //          return;
+    //      }
+    //      if (variant === 'loading') {
+    //          return <p-loader variant="ghost" class="rounded w-6 h-6" />;
+    //      }
+    //      if (variant === 'header') {
+    //          return (
+    //              <input
+    //                  class="p-input"
+    //                  type="checkbox"
+    //                  onChange={(ev) => this._selectAllChange(ev)}
+    //                  checked={this._selectionContainsAll()}
+    //                  indeterminate={this._selectionIndeterminate()}
+    //              />
+    //          );
+    //      }
+    //      const item = this._items[rowIndex];
+    //      return (
+    //          <input
+    //              class="p-input"
+    //              type="checkbox"
+    //              onChange={(ev) => this._checkboxChange(ev?.target, rowIndex)}
+    //              disabled={this.canSelectKey && !item[this.canSelectKey]}
+    //              checked={this._selectionContains(item, rowIndex)}
+    //          />
+    //      );
+    //  }
+    _checkboxDisabled(item) {
+        return this.canSelectKey && !item[this.canSelectKey];
+    }
+    _selectAllChange($event) {
+        if (!this.enableRowSelection) {
+            return;
+        }
+        const value = this._getCheckedValue($event.target);
+        if (value) {
+            const toAdd = [];
+            for (let i = 0; i < this.parsedItems.length; i++) {
+                const row = this.parsedItems[i];
+                if (this.canSelectKey && !row[this.canSelectKey]) {
+                    continue;
+                }
+                if (this._selectionContains(row, i)) {
+                    continue;
+                }
+                toAdd.push(row);
+                this.rowSelected.emit(row);
+            }
+            this.selectedRows = [...this.selectedRows, ...toAdd];
+            this.selectedRowsChange.emit(this.selectedRows);
+            return;
+        }
+        for (let i = 0; i < this.selectedRows.length; i++) {
+            const value = this.selectedRows[i];
+            const row = this.parsedItems.find((d) => this._getSelectionValue(d, i) ===
+                this._getSelectionValue(value, i));
+            if (!row) {
+                continue;
+            }
+            this.rowDeselected.emit(row);
+        }
+        this.selectedRows = [];
+        this.selectedRowsChange.emit(this.selectedRows);
+    }
+    _checkboxChange(target, index) {
+        if (!this.enableRowSelection) {
+            return;
+        }
+        const row = this.parsedItems[index];
+        if (this.canSelectKey && !row[this.canSelectKey]) {
+            target.checked = false;
+            return;
+        }
+        const value = this._getCheckedValue(target);
+        if (value) {
+            this.selectedRows = [...this.selectedRows, row];
+            this.selectedRowsChange.emit(this.selectedRows);
+            this.rowSelected.emit(row);
+            return;
+        }
+        const indexOfToRemove = this._selectionContains(row, index, true);
+        // we need to do this, because splice does not trigger the selection setter.
+        const selection = [...this.selectedRows];
+        selection.splice(indexOfToRemove, 1);
+        this.selectedRows = selection;
+        this.selectedRowsChange.emit(this.selectedRows);
+        this.rowDeselected.emit(row);
+    }
+    _getCheckedValue(target) {
+        return target === null || target === void 0 ? void 0 : target.checked;
+    }
+    _getSelectionValue(row, index) {
+        return this.selectionKey ? (row === null || row === void 0 ? void 0 : row[this.selectionKey]) || index : index;
+    }
+    _selectionContains(row, index, returnIndex = false) {
+        const returnValue = this.selectedRows.findIndex((item) => this._getSelectionValue(row, index) ===
+            this._getSelectionValue(item, index));
+        return !returnIndex ? returnValue >= 0 : returnValue;
+    }
+    _selectionContainsAll() {
+        var _a, _b;
+        let returnValue = true;
+        if (!((_a = this.parsedItems) === null || _a === void 0 ? void 0 : _a.length)) {
+            return false;
+        }
+        for (let i = 0; i < ((_b = this.parsedItems) === null || _b === void 0 ? void 0 : _b.length); i++) {
+            const item = this.parsedItems[i];
+            const contains = this._selectionContains(item, i);
+            if (!contains) {
+                returnValue = false;
+                break;
+            }
+        }
+        return returnValue;
+    }
+    _selectionIndeterminate() {
+        var _a, _b, _c;
+        if (!((_a = this.parsedItems) === null || _a === void 0 ? void 0 : _a.length) || !((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.length)) {
+            return false;
+        }
+        let containsCount = 0;
+        for (let i = 0; i < ((_c = this.parsedItems) === null || _c === void 0 ? void 0 : _c.length); i++) {
+            const item = this.parsedItems[i];
+            const contains = this._selectionContains(item, i);
+            if (contains) {
+                containsCount++;
+            }
+        }
+        return containsCount > 0 && containsCount !== this.parsedItems.length;
+    }
+    _rowClick($event, index) {
+        const target = $event.target;
+        if (target.tagName.toLowerCase() === 'input' ||
+            target.type === 'checkbox') {
+            return;
+        }
+        const row = this._findRow($event.target);
+        if (this.enableRowClick) {
+            const action = this._findRowAction($event.target);
+            if (action) {
+                return;
+            }
+            const item = this.parsedItems[index];
+            this.rowClick.emit({
+                item,
+                ctrlDown: this._ctrlDown,
+            });
+            return;
+        }
+        if (!this.enableRowSelection) {
+            return;
+        }
+        const checkbox = row === null || row === void 0 ? void 0 : row.querySelector('input[type="checkbox"]');
+        if (!checkbox) {
+            return;
+        }
+        checkbox.checked = !checkbox.checked;
+        this._checkboxChange(checkbox, index);
+    }
+    _findRow(el) {
+        var _a;
+        if (!el) {
+            return el;
+        }
+        if (((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'p-table-row') {
+            return el;
+        }
+        return this._findRow(el === null || el === void 0 ? void 0 : el.parentElement);
+    }
+    _findRowAction(el) {
+        var _a;
+        if (!el) {
+            return null;
+        }
+        if (el.getAttribute('data-is-action') !== null &&
+            el.getAttribute('data-is-action') !== 'false') {
+            return el;
+        }
+        if (((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'p-table-row') {
+            return null;
+        }
+        return this._findRowAction(el === null || el === void 0 ? void 0 : el.parentElement);
+    }
+};
+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{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{display:flex;flex-direction:column}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { items: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], amountOfLoadingRows: [{
+                type: Input
+            }], enableRowSelection: [{
+                type: Input
+            }], enableRowClick: [{
+                type: Input
+            }], selectedRows: [{
+                type: Input
+            }], selectedRowsChange: [{
+                type: Output
+            }], selectionKey: [{
+                type: Input
+            }], canSelectKey: [{
+                type: Input
+            }], rowClick: [{
+                type: Output
+            }], rowSelected: [{
+                type: Output
+            }], rowDeselected: [{
+                type: Output
+            }], quickFilters: [{
+                type: Input
+            }], activeQuickFilterIdentifier: [{
+                type: Input
+            }], enableSearch: [{
+                type: Input
+            }], query: [{
+                type: Input
+            }], enableFilter: [{
+                type: Input
+            }], selectedFiltersAmount: [{
+                type: Input
+            }], filterButtonTemplate: [{
+                type: Input
+            }], enableEdit: [{
+                type: Input
+            }], editButtonTemplate: [{
+                type: Input
+            }], quickFilter: [{
+                type: Output
+            }], queryChange: [{
+                type: Output
+            }], filter: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], enablePageSize: [{
+                type: Input
+            }], enablePagination: [{
+                type: Input
+            }], enableExport: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], pageSize: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], pageSizeChange: [{
+                type: Output
+            }], export: [{
+                type: Output
+            }], hideOnSinglePage: [{
+                type: Input
+            }], columnDefinitions: [{
+                type: ContentChildren,
+                args: [TableColumn]
+            }], keyDown: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }], keyUp: [{
+                type: HostListener,
+                args: ['document:keyup', ['$event']]
+            }], visibilityChange: [{
+                type: HostListener,
+                args: ['document:visibilitychange', ['$event']]
+            }] } });
+
+const COMPONENTS = [TableComponent, TableColumn, TableCell];
+
+class PageSizeSelectDirective extends BaseValueAccessor {
+    constructor(el) {
+        super(el);
     }
-};
-PTableHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableHeader, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PTableHeader, selector: "p-table-header", inputs: { activeQuickFilterIdentifier: "activeQuickFilterIdentifier", canEdit: "canEdit", editButtonTemplate: "editButtonTemplate", enableEdit: "enableEdit", enableFilter: "enableFilter", enableSearch: "enableSearch", filterButtonTemplate: "filterButtonTemplate", itemsSelectedAmount: "itemsSelectedAmount", query: "query", quickFilters: "quickFilters", selectedFiltersAmount: "selectedFiltersAmount" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableHeader = __decorate([
-    ProxyCmp({
-        defineCustomElementFn: undefined,
-        inputs: ['activeQuickFilterIdentifier', 'canEdit', 'editButtonTemplate', 'enableEdit', 'enableFilter', 'enableSearch', 'filterButtonTemplate', 'itemsSelectedAmount', 'query', 'quickFilters', 'selectedFiltersAmount']
-    })
-], PTableHeader);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableHeader, decorators: [{
-            type: Component,
+    writeValue(value) {
+        this.el.nativeElement.page = this.lastValue =
+            value == null ? '' : value;
+    }
+    registerOnChange(fn) {
+        super.registerOnChange((value) => fn(value === '' ? null : parseInt(value, 10)));
+    }
+}
+PageSizeSelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PageSizeSelectDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PageSizeSelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: PageSizeSelectDirective, selector: "p-page-size-select", host: { listeners: { "sizeChange": "handleChangeEvent($event.detail)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: PageSizeSelectDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PageSizeSelectDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'p-table-header',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['activeQuickFilterIdentifier', 'canEdit', 'editButtonTemplate', 'enableEdit', 'enableFilter', 'enableSearch', 'filterButtonTemplate', 'itemsSelectedAmount', 'query', 'quickFilters', 'selectedFiltersAmount']
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'p-page-size-select',
+                    host: {
+                        '(sizeChange)': 'handleChangeEvent($event.detail)',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: PageSizeSelectDirective,
+                            multi: true,
+                        },
+                    ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let PTableRow = class PTableRow {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class PaginationDirective extends BaseValueAccessor {
+    constructor(el) {
+        super(el);
     }
-};
-PTableRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableRow, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTableRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PTableRow, selector: "p-table-row", inputs: { enableHover: "enableHover", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTableRow = __decorate([
-    ProxyCmp({
-        defineCustomElementFn: undefined,
-        inputs: ['enableHover', 'variant']
-    })
-], PTableRow);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTableRow, decorators: [{
-            type: Component,
+    writeValue(value) {
+        this.el.nativeElement.page = this.lastValue =
+            value == null ? '' : value;
+    }
+    registerOnChange(fn) {
+        super.registerOnChange((value) => fn(value === '' ? null : parseInt(value, 10)));
+    }
+}
+PaginationDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PaginationDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PaginationDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: PaginationDirective, selector: "p-pagination", host: { listeners: { "pageChange": "handleChangeEvent($event.detail)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: PaginationDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PaginationDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'p-table-row',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['enableHover', 'variant']
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'p-pagination',
+                    host: {
+                        '(pageChange)': 'handleChangeEvent($event.detail)',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: PaginationDirective,
+                            multi: true,
+                        },
+                    ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let PToastContainer = class PToastContainer {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class SelectDirective extends BaseValueAccessor {
+    constructor(el) {
+        super(el);
     }
-};
-PToastContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PToastContainer, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PToastContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PToastContainer, selector: "p-toast-container", inputs: { placement: "placement" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PToastContainer = __decorate([
-    ProxyCmp({
-        defineCustomElementFn: undefined,
-        inputs: ['placement']
-    })
-], PToastContainer);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PToastContainer, decorators: [{
-            type: Component,
+    writeValue(value) {
+        this.el.nativeElement.value = this.lastValue =
+            value == null ? '' : value;
+    }
+}
+SelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SelectDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: SelectDirective, selector: "p-select", host: { listeners: { "valueChange": "handleChangeEvent($event.detail)" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: SelectDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: SelectDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'p-toast-container',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['placement']
+                    selector: 'p-select',
+                    host: {
+                        '(valueChange)': 'handleChangeEvent($event.detail)',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SelectDirective,
+                            multi: true,
+                        },
+                    ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
-let PTooltip = class PTooltip {
-    constructor(c, r, z) {
-        this.z = z;
-        c.detach();
-        this.el = r.nativeElement;
-        proxyOutputs(this, this.el, ['isOpen']);
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+class TableDirective extends BaseValueAccessor {
+    constructor(el) {
+        super(el);
+        this.lastValue = {
+            query: '',
+            quickFilter: undefined,
+            page: 1,
+            pageSize: 12,
+            selectedRows: [],
+        };
     }
-};
-PTooltip.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTooltip, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PTooltip.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: PTooltip, selector: "p-tooltip", inputs: { canManuallyClose: "canManuallyClose", placement: "placement", popover: "popover", show: "show", strategy: "strategy", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-PTooltip = __decorate([
-    ProxyCmp({
-        defineCustomElementFn: undefined,
-        inputs: ['canManuallyClose', 'placement', 'popover', 'show', 'strategy', 'variant']
-    })
-], PTooltip);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PTooltip, decorators: [{
-            type: Component,
+    writeValue(value) {
+        this.el.nativeElement.query = this.lastValue.query = value === null || value === void 0 ? void 0 : value.query;
+        this.lastValue.quickFilter = value === null || value === void 0 ? void 0 : value.quickFilter;
+        this.el.nativeElement.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.el.nativeElement.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.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.el.nativeElement.activeQuickFilterIdentifier =
+            quickFilter === null || quickFilter === void 0 ? void 0 : quickFilter.identifier;
+    }
+}
+TableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.7", type: TableDirective, selector: "p-table", 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.detail, \"selectedRows\")" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: TableDirective,
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: TableDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'p-tooltip',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: '<ng-content></ng-content>',
-                    inputs: ['canManuallyClose', 'placement', 'popover', 'show', 'strategy', 'variant']
+                    /* tslint:disable-next-line:directive-selector */
+                    selector: 'p-table',
+                    host: {
+                        '(queryChange)': 'handleChange($event.detail, "query")',
+                        '(quickFilter)': 'handleChange($event.detail, "quickFilter")',
+                        '(pageChange)': 'handleChange($event.detail, "page")',
+                        '(pageSizeChange)': 'handleChange($event.detail, "pageSize")',
+                        '(selectedRowsChange)': 'handleChange($event.detail, "selectedRows")',
+                    },
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: TableDirective,
+                            multi: true,
+                        },
+                    ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+
+// Custom directives
+const CUSTOM_DIRECTIVES = [
+    PaginationDirective,
+    PageSizeSelectDirective,
+    TableFooterDirective,
+    TableHeaderDirective,
+    TableDirective,
+    SelectDirective,
+];
 
 const DIRECTIVES = [
     PAccordion,
@@ -1931,13 +2662,14 @@ 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, PaginationDirective, PageSizeSelectDirective, TableFooterDirective, TableHeaderDirective, TableDirective, SelectDirective], 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, PaginationDirective, PageSizeSelectDirective, TableFooterDirective, TableHeaderDirective, TableDirective, SelectDirective] });
-PaperlessModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: PaperlessModule });
+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.ɵ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,
             args: [{
-                    declarations: [...DIRECTIVES, ...CUSTOM_DIRECTIVES],
-                    exports: [...DIRECTIVES, ...CUSTOM_DIRECTIVES],
+                    imports: [CommonModule],
+                    declarations: [...DIRECTIVES, ...COMPONENTS, ...CUSTOM_DIRECTIVES],
+                    exports: [...DIRECTIVES, ...COMPONENTS, ...CUSTOM_DIRECTIVES],
                 }]
         }] });
 
@@ -1949,5 +2681,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseTableComponent, BaseUploadComponent, BaseValueAccessor, 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, 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 };
 //# sourceMappingURL=paperless-angular.mjs.map