@paperless/angular 2.18.6 → 2.19.1

package/fesm2020/paperless-angular.mjs

@@ -3023,7 +3023,7 @@ class TableCell {
         /**
          * The variant of the column
          */
-        this.variant = "default";
+        this.variant = 'default';
         /**
          * The index of the column
          */
@@ -3044,21 +3044,21 @@ class TableCell {
     }
     get class() {
         return cn(getTableCellColumnClasses(this.definition, this.variant, this.checkboxOffset), {
-            "sticky left-4 z-[2]": !!this.definition?.sticky,
-            "bg-gradient-to-r from-white to-transparent dark:from-hurricane-700 from-80%": this.definition?.sticky && this.definition?.sticky !== "secondary",
-            "bg-gradient-to-r from-off-white-300 to-transparent dark:from-hurricane-400 from-80%": this.definition?.sticky && this.definition?.sticky === "secondary",
-            "flex-shrink": !this.scrollable,
-            "flex-shrink-0": this.scrollable,
+            'sticky left-4 z-[2]': !!this.definition?.sticky,
+            'bg-gradient-to-r from-white to-transparent dark:from-hurricane-700 from-80%': this.definition?.sticky && this.definition?.sticky !== 'secondary',
+            'bg-gradient-to-r from-off-white-300 to-transparent dark:from-hurricane-400 from-80%': this.definition?.sticky && this.definition?.sticky === 'secondary',
+            'flex-shrink': !this.scrollable,
+            'flex-shrink-0': this.scrollable,
         });
     }
     get data() {
-        if (this.variant === "header" || this.variant === "header-secondary") {
+        if (this.variant === 'header' || this.variant === 'header-secondary') {
             return {
                 value: this.value,
             };
         }
         return {
-            value: (this.value ?? this.definition?.path)
+            value: this.value ?? this.definition?.path
                 ? objectGetByPath(this.item, this.definition.path)
                 : null,
             item: this.item,
@@ -3066,12 +3066,27 @@ class TableCell {
             rowIndex: this.rowIndex,
         };
     }
+    get contentClass() {
+        const align = this.variant === 'header'
+            ? this.definition?.headerAlign ?? this.definition?.align
+            : this.definition?.align;
+        return cn('overflow-hidden text-ellipsis', {
+            flex: this.definition?.flex,
+            'flex-1': this.definition?.flex,
+            'justify-start': this.definition?.flex && (align === undefined || align === 'start'),
+            'justify-end': this.definition?.flex && align === 'end',
+            'justify-center': this.definition?.flex && align === 'end',
+            'text-start': !this.definition?.flex && (align === undefined || align === 'start'),
+            'text-center': !this.definition?.flex && align === 'center',
+            'text-end': !this.definition?.flex && align === 'end',
+        });
+    }
 }
 TableCell.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
 TableCell.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableCell, selector: "p-table-cell-ngx", inputs: { variant: "variant", index: "index", rowIndex: "rowIndex", definition: "definition", item: "item", value: "value", checkbox: "checkbox", checkboxOffset: "checkboxOffset", template: "template", scrollable: "scrollable" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div\n\t\t*ngIf=\"variant === 'header' || variant === 'header-secondary'\"\n\t\t[class]=\"\n\t\t\tcn('overflow-hidden text-ellipsis', {\n\t\t\t\t'text-start':\n\t\t\t\t\tdefinition?.align === undefined || definition.align === 'start',\n\t\t\t\t'text-center': definition.align === 'center',\n\t\t\t\t'text-end': definition.align === 'end'\n\t\t\t})\n\t\t\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\t[class]=\"\n\t\t\tcn('overflow-hidden text-ellipsis', {\n\t\t\t\tflex: definition?.flex,\n\t\t\t\t'flex-1': definition?.flex,\n\t\t\t\t'justify-start':\n\t\t\t\t\tdefinition?.flex &&\n\t\t\t\t\t(definition?.align === undefined || definition.align === 'start'),\n\t\t\t\t'justify-end': definition?.flex && definition.align === 'end',\n\t\t\t\t'justify-center': definition?.flex && definition.align === 'end',\n\t\t\t\t'text-start':\n\t\t\t\t\t!definition?.flex &&\n\t\t\t\t\t(definition?.align === undefined || definition.align === 'start'),\n\t\t\t\t'text-center': !definition?.flex && definition.align === 'center',\n\t\t\t\t'text-end': !definition?.flex && definition.align === 'end'\n\t\t\t})\n\t\t\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t<ng-container *ngIf=\"data.value\">\n\t\t{{ data.value }}\n\t</ng-container>\n\n\t<ng-content *ngIf=\"!data.value\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.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: "15.2.9", ngImport: i0, type: TableCell, decorators: [{
             type: Component,
-            args: [{ selector: "p-table-cell-ngx", template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div\n\t\t*ngIf=\"variant === 'header' || variant === 'header-secondary'\"\n\t\t[class]=\"\n\t\t\tcn('overflow-hidden text-ellipsis', {\n\t\t\t\t'text-start':\n\t\t\t\t\tdefinition?.align === undefined || definition.align === 'start',\n\t\t\t\t'text-center': definition.align === 'center',\n\t\t\t\t'text-end': definition.align === 'end'\n\t\t\t})\n\t\t\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\t[class]=\"\n\t\t\tcn('overflow-hidden text-ellipsis', {\n\t\t\t\tflex: definition?.flex,\n\t\t\t\t'flex-1': definition?.flex,\n\t\t\t\t'justify-start':\n\t\t\t\t\tdefinition?.flex &&\n\t\t\t\t\t(definition?.align === undefined || definition.align === 'start'),\n\t\t\t\t'justify-end': definition?.flex && definition.align === 'end',\n\t\t\t\t'justify-center': definition?.flex && definition.align === 'end',\n\t\t\t\t'text-start':\n\t\t\t\t\t!definition?.flex &&\n\t\t\t\t\t(definition?.align === undefined || definition.align === 'start'),\n\t\t\t\t'text-center': !definition?.flex && definition.align === 'center',\n\t\t\t\t'text-end': !definition?.flex && definition.align === 'end'\n\t\t\t})\n\t\t\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t<ng-container *ngIf=\"data.value\">\n\t\t{{ data.value }}\n\t</ng-container>\n\n\t<ng-content *ngIf=\"!data.value\"></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'p-table-cell-ngx', template: "<ng-container *ngIf=\"checkbox\">\n\t<ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n</ng-container>\n\n<ng-container [ngSwitch]=\"variant\">\n\t<p-loader\n\t\t*ngSwitchCase=\"'loading'\"\n\t\tvariant=\"ghost\"\n\t\tclass=\"h-6 w-full flex-1 rounded\"\n\t></p-loader>\n\n\t<ng-container *ngSwitchCase=\"'actions'\">\n\t\t<ng-container *ngIf=\"template\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</ng-container>\n\n\t<div\n\t\t*ngIf=\"variant === 'header' || variant === 'header-secondary'\"\n\t\t[class]=\"\n\t\t\tcn('overflow-hidden text-ellipsis', {\n\t\t\t\t'text-start':\n\t\t\t\t\tdefinition?.align === undefined || definition.align === 'start',\n\t\t\t\t'text-center': definition.align === 'center',\n\t\t\t\t'text-end': definition.align === 'end'\n\t\t\t})\n\t\t\"\n\t>\n\t\t<ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n\t</div>\n\n\t<div\n\t\t*ngSwitchCase=\"'default'\"\n\t\t[class]=\"\n\t\t\tcn('overflow-hidden text-ellipsis', {\n\t\t\t\tflex: definition?.flex,\n\t\t\t\t'flex-1': definition?.flex,\n\t\t\t\t'justify-start':\n\t\t\t\t\tdefinition?.flex &&\n\t\t\t\t\t(definition?.align === undefined || definition.align === 'start'),\n\t\t\t\t'justify-end': definition?.flex && definition.align === 'end',\n\t\t\t\t'justify-center': definition?.flex && definition.align === 'end',\n\t\t\t\t'text-start':\n\t\t\t\t\t!definition?.flex &&\n\t\t\t\t\t(definition?.align === undefined || definition.align === 'start'),\n\t\t\t\t'text-center': !definition?.flex && definition.align === 'center',\n\t\t\t\t'text-end': !definition?.flex && definition.align === 'end'\n\t\t\t})\n\t\t\"\n\t>\n\t\t<ng-container *ngIf=\"template; else valueTemplate\">\n\t\t\t<ng-container *ngTemplateOutlet=\"template; context: data\"></ng-container>\n\t\t</ng-container>\n\t</div>\n</ng-container>\n\n<ng-template #valueTemplate>\n\t<ng-container *ngIf=\"data.value\">\n\t\t{{ data.value }}\n\t</ng-container>\n\n\t<ng-content *ngIf=\"!data.value\"></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], index: [{
@@ -3094,7 +3109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], class: [{
                 type: HostBinding,
-                args: ["class"]
+                args: ['class']
             }] } });
 
 let TableColumn = class TableColumn {
@@ -3106,12 +3121,13 @@ let TableColumn = class TableColumn {
     }
 };
 TableColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableColumn, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TableColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumn, selector: "p-table-column", inputs: { align: "align", flex: "flex", name: "name", path: "path", sizes: "sizes", variant: "variant", useSlot: "useSlot", hasCheckbox: "hasCheckbox", sticky: "sticky" }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableColumn, selector: "p-table-column", inputs: { align: "align", headerAlign: "headerAlign", flex: "flex", name: "name", path: "path", sizes: "sizes", variant: "variant", useSlot: "useSlot", hasCheckbox: "hasCheckbox", sticky: "sticky" }, 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: [
             'align',
+            'headerAlign',
             'flex',
             'name',
             'path',
@@ -3131,6 +3147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     template: '<ng-content></ng-content>',
                     inputs: [
                         'align',
+                        'headerAlign',
                         'flex',
                         'name',
                         'path',
@@ -3615,7 +3632,7 @@ const defaultSizeOptions = [12, 24, 68, 136];
 let Table = class Table {
     constructor(_cd) {
         this._cd = _cd;
-        this.className = "flex flex-col z-0";
+        this.className = 'flex flex-col z-0';
         this.theme = state.theme;
         /**
          * Wether data is loading
@@ -3660,7 +3677,7 @@ let Table = class Table {
         /**
          * The floating menu amount item text
          */
-        this.floatingMenuAmountSelectedText = "0 items selected";
+        this.floatingMenuAmountSelectedText = '0 items selected';
         /**
          * Wether the floating menu has been shown atleast once
          */
@@ -3709,7 +3726,7 @@ let Table = class Table {
         /**
          * The action button icon
          */
-        this.actionButtonIcon = "pencil";
+        this.actionButtonIcon = 'pencil';
         /**
          * Wether the action button is enabled
          */
@@ -3776,11 +3793,11 @@ let Table = class Table {
          */
         this.hideOnSinglePage = true;
         /* Empty state start */
-        this.emptyStateType = "no_filter";
-        this.emptyStateIllustration = "table";
-        this.emptyStateActionIcon = "plus";
+        this.emptyStateType = 'no_filter';
+        this.emptyStateIllustration = 'table';
+        this.emptyStateActionIcon = 'plus';
         this.enableEmptyStateAction = true;
-        this.emptyStateFilteredIllustration = "search";
+        this.emptyStateFilteredIllustration = 'search';
         /**
          * Wether to enable scrolling
          */
@@ -3806,10 +3823,10 @@ let Table = class Table {
         this._ctrlDown = false;
         this.filterModalShow$ = new BehaviorSubject(false);
         this._rowActionsSubscriptions = [];
-        this.filterModalHeaderText = "Filters";
-        this.filterModalSaveText = "Save";
-        this.filterModalCancelText = "Cancel";
-        this.filterModalResetText = "Reset filters";
+        this.filterModalHeaderText = 'Filters';
+        this.filterModalSaveText = 'Save';
+        this.filterModalCancelText = 'Cancel';
+        this.filterModalResetText = 'Reset filters';
         this.filterModalShowReset = false;
         this.filterModalShowResetMobile = false;
         this.filterModalShow = new EventEmitter();
@@ -3841,37 +3858,37 @@ let Table = class Table {
     }
     ngOnInit() {
         this._parseItems(this.items);
-        onStateChange("theme", (value) => this._checkTheme(value));
+        onStateChange('theme', value => this._checkTheme(value));
         this.loadingRows = Array.from({
             length: this.amountOfLoadingRows,
         });
         this.filterModalShow$
             .pipe(untilDestroyed(this), distinctUntilChanged())
-            .subscribe((value) => this.filterModalShow.next(value));
+            .subscribe(value => this.filterModalShow.next(value));
     }
     ngOnChanges(changes) {
-        if (changes["items"]) {
-            this._parseItems(changes["items"].currentValue);
+        if (changes['items']) {
+            this._parseItems(changes['items'].currentValue);
         }
-        if (changes["amountOfLoadingRows"]) {
+        if (changes['amountOfLoadingRows']) {
             this.loadingRows = Array.from({
-                length: changes["amountOfLoadingRows"].currentValue,
+                length: changes['amountOfLoadingRows'].currentValue,
             });
         }
         let calculateRowSelectionData = false;
-        if (changes["enableRowSelection"]) {
+        if (changes['enableRowSelection']) {
             this._inputEnableRowSelection =
-                changes["enableRowSelection"].currentValue;
+                changes['enableRowSelection'].currentValue;
             calculateRowSelectionData = true;
         }
-        if (changes["rowSelectionLimit"]) {
-            this._inputRowSelectionLimit = changes["rowSelectionLimit"].currentValue;
+        if (changes['rowSelectionLimit']) {
+            this._inputRowSelectionLimit = changes['rowSelectionLimit'].currentValue;
             calculateRowSelectionData = true;
         }
-        if (calculateRowSelectionData || changes["selectedRows"]) {
+        if (calculateRowSelectionData || changes['selectedRows']) {
             this._setRowSelectionData();
         }
-        if (changes["enableScroll"]?.currentValue) {
+        if (changes['enableScroll']?.currentValue) {
             this._checkChangesSubscriptions();
         }
     }
@@ -3897,19 +3914,19 @@ let Table = class Table {
         this._calculateColumnWidths();
     }
     keyDown({ key }) {
-        if (key !== "Control" || this._ctrlDown === true) {
+        if (key !== 'Control' || this._ctrlDown === true) {
             return;
         }
         this._ctrlDown = true;
     }
     keyUp({ key }) {
-        if (key !== "Control" || this._ctrlDown === false) {
+        if (key !== 'Control' || this._ctrlDown === false) {
             return;
         }
         this._ctrlDown = false;
     }
     visibilityChange() {
-        if (document.visibilityState !== "hidden" || this._ctrlDown === false) {
+        if (document.visibilityState !== 'hidden' || this._ctrlDown === false) {
             return;
         }
         this._ctrlDown = false;
@@ -3950,7 +3967,7 @@ let Table = class Table {
         if (!actions?.length) {
             return [];
         }
-        return actions.filter((a) => !a.showFunction || a.showFunction(this.parsedItems[rowIndex]));
+        return actions.filter(a => !a.showFunction || a.showFunction(this.parsedItems[rowIndex]));
     }
     onContainerXScroll(ev) {
         if (!this.enableScroll) {
@@ -3978,7 +3995,7 @@ let Table = class Table {
         let definitionsArray = Array.from(this.extraHeaderDefinitions);
         definitionsArray = this._parseDefinitions(definitionsArray);
         for (const col of definitionsArray) {
-            col.sticky = col.sticky === true ? "secondary" : false;
+            col.sticky = col.sticky === true ? 'secondary' : false;
         }
         this.extraHeaders$.next(definitionsArray);
     }
@@ -4020,7 +4037,7 @@ let Table = class Table {
         }
         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));
+            const row = this.parsedItems.find(d => this._getSelectionValue(d, i) === this._getSelectionValue(value, i));
             if (!row) {
                 continue;
             }
@@ -4069,7 +4086,7 @@ let Table = class Table {
         return this.selectionKey ? row?.[this.selectionKey] || index : index;
     }
     _selectionContains(row, index, returnIndex = false) {
-        const returnValue = this.selectedRows.findIndex((item) => this._getSelectionValue(row, index) ===
+        const returnValue = this.selectedRows.findIndex(item => this._getSelectionValue(row, index) ===
             this._getSelectionValue(item, index));
         return !returnIndex ? returnValue >= 0 : returnValue;
     }
@@ -4112,8 +4129,8 @@ let Table = class Table {
     }
     _rowClick($event, index) {
         const target = $event.target;
-        if (target.tagName.toLowerCase() === "input" ||
-            target.type === "checkbox") {
+        if (target.tagName.toLowerCase() === 'input' ||
+            target.type === 'checkbox') {
             return;
         }
         const row = this._findRow(target);
@@ -4140,17 +4157,17 @@ let Table = class Table {
         this._checkboxChange(checkbox, index);
     }
     _getActionRouterLink(routerLink, rowIndex) {
-        if (typeof routerLink === "function") {
+        if (typeof routerLink === 'function') {
             const item = this.parsedItems[rowIndex];
             return this._getActionRouterLink(routerLink(item), rowIndex);
         }
-        if (typeof routerLink === "string" || Array.isArray(routerLink)) {
+        if (typeof routerLink === 'string' || Array.isArray(routerLink)) {
             return new BehaviorSubject(routerLink);
         }
         return routerLink;
     }
     _getActionQueryParams(queryParams, rowIndex) {
-        if (typeof queryParams === "function") {
+        if (typeof queryParams === 'function') {
             const item = this.parsedItems[rowIndex];
             return this._getActionQueryParams(queryParams(item), rowIndex);
         }
@@ -4169,8 +4186,8 @@ let Table = class Table {
         if (!action.action) {
             return;
         }
-        if (action.type === "multi" ||
-            (action.type === "both" && rowIndex === undefined)) {
+        if (action.type === 'multi' ||
+            (action.type === 'both' && rowIndex === undefined)) {
             action.action.emit({
                 items: this.selectedRows,
                 multi: true,
@@ -4195,7 +4212,7 @@ let Table = class Table {
         if (!el) {
             return el;
         }
-        if (el?.tagName?.toLowerCase() === "p-table-row") {
+        if (el?.tagName?.toLowerCase() === 'p-table-row') {
             return el;
         }
         return this._findRow(el?.parentElement);
@@ -4204,11 +4221,11 @@ let Table = class Table {
         if (!el) {
             return null;
         }
-        if (el.getAttribute("data-is-action") !== null &&
-            el.getAttribute("data-is-action") !== "false") {
+        if (el.getAttribute('data-is-action') !== null &&
+            el.getAttribute('data-is-action') !== 'false') {
             return el;
         }
-        if (el?.tagName?.toLowerCase() === "p-table-row") {
+        if (el?.tagName?.toLowerCase() === 'p-table-row') {
             return null;
         }
         return this._findRowAction(el?.parentElement);
@@ -4228,14 +4245,14 @@ let Table = class Table {
                     subscription.unsubscribe();
                 }
             }
-            this._rowActionsSubscriptions = actions.map((action) => action._loadingChanged
+            this._rowActionsSubscriptions = actions.map(action => action._loadingChanged
                 .pipe(untilDestroyed(this))
                 .subscribe(() => this._cd.detectChanges()));
             // we hack this to any[] to make it work..
-            const rowActionsRow = actions.filter((a) => a.type === "both" || a.type === "single");
-            const rowActionsFloating = actions.filter((a) => (this._inputEnableRowSelection &&
-                (a.type === "both" || a.type === "multi")) ||
-                (mobile && a.type === "single" && !a.routerLink));
+            const rowActionsRow = actions.filter(a => a.type === 'both' || a.type === 'single');
+            const rowActionsFloating = actions.filter(a => (this._inputEnableRowSelection &&
+                (a.type === 'both' || a.type === 'multi')) ||
+                (mobile && a.type === 'single' && !a.routerLink));
             let rowSelectionLimit = this._inputRowSelectionLimit;
             if (mobile && // we're mobile
                 rowActionsFloating?.length && // we have atleast 1 item in _rowActionsFloating
@@ -4254,15 +4271,15 @@ let Table = class Table {
             this.rowActionsRow$.next(rowActionsRow);
             this.rowActionsFloatingAll$.next(rowActionsFloating);
             this.floatingMenuShown$
-                .pipe(take(1), filter((v) => !!v))
+                .pipe(take(1), filter(v => !!v))
                 .subscribe(() => this._showFloatingMenu());
         }, 200);
     }
     _showFloatingMenu() {
-        this.rowActionsFloatingAll$.pipe(take(1)).subscribe((actions) => {
+        this.rowActionsFloatingAll$.pipe(take(1)).subscribe(actions => {
             if (this.rowSelectionLimit === 1 &&
-                actions.findIndex((a) => (a.type === "single" || a.type === "both") && a.showFunction) >= 0) {
-                actions = actions.filter((a) => a.type === "multi" ||
+                actions.findIndex(a => (a.type === 'single' || a.type === 'both') && a.showFunction) >= 0) {
+                actions = actions.filter(a => a.type === 'multi' ||
                     !a.showFunction ||
                     a.showFunction(this.selectedRows[0]));
             }
@@ -4271,18 +4288,18 @@ let Table = class Table {
         });
     }
     _parseDefinitions(definitionsArray) {
-        return definitionsArray.map((definition) => this._parseDefinitionSizes(definition));
+        return definitionsArray.map(definition => this._parseDefinitionSizes(definition));
     }
     _parseDefinitionSizes(definition) {
         const definitionAny = definition;
-        let parsedSizes = { default: "full" };
+        let parsedSizes = { default: 'full' };
         for (const [index, size] of tableColumSizesOptions.entries()) {
-            if (definitionAny.sizes === "auto" ||
-                definitionAny.sizes === "hidden" ||
-                definitionAny.sizes === "full" ||
-                typeof definitionAny.sizes === "number") {
+            if (definitionAny.sizes === 'auto' ||
+                definitionAny.sizes === 'hidden' ||
+                definitionAny.sizes === 'full' ||
+                typeof definitionAny.sizes === 'number') {
                 parsedSizes[size] =
-                    definitionAny.sizes === "auto" ? "full" : definitionAny.sizes;
+                    definitionAny.sizes === 'auto' ? 'full' : definitionAny.sizes;
                 continue;
             }
             parsedSizes[size] =
@@ -4315,23 +4332,23 @@ let Table = class Table {
             clearTimeout(this._calculateColumnWidthsTimeout);
             this._calculateColumnWidthsTimeout = 0;
         }
-        const rows = this.tableRows.map((c) => c.nativeElement);
-        const cells = rows.flatMap((row) => Array.from(row.querySelectorAll("p-table-cell-ngx")));
+        const rows = this.tableRows.map(c => c.nativeElement);
+        const cells = rows.flatMap(row => Array.from(row.querySelectorAll('p-table-cell-ngx')));
         this._calculateColumnWidthsTimeout = setTimeout(async () => {
             this._setRowsWidth(rows);
             const promises = [];
             for (const cell of cells) {
                 if (cell.style.width?.length) {
-                    cell.style.width = "unset";
+                    cell.style.width = 'unset';
                 }
-                promises.push(new Promise((resolve) => setTimeout(() => {
+                promises.push(new Promise(resolve => setTimeout(() => {
                     const rect = cell.getBoundingClientRect();
-                    cell.setAttribute("style", `width: ${rect.width}px !important`);
+                    cell.setAttribute('style', `width: ${rect.width}px !important`);
                     resolve();
                 }, 100)));
             }
             await Promise.all(promises);
-            this._setRowsWidth(rows, "min-content");
+            this._setRowsWidth(rows, 'min-content');
             this._resetScrollPosition();
         }, 200);
     }
@@ -4342,21 +4359,21 @@ let Table = class Table {
             if (!shadow) {
                 continue;
             }
-            const firstDiv = shadow.querySelector("*:nth-child(1)");
+            const firstDiv = shadow.querySelector('*:nth-child(1)');
             if (!firstDiv) {
                 continue;
             }
-            const secondDiv = firstDiv.querySelector("*:nth-child(1)");
+            const secondDiv = firstDiv.querySelector('*:nth-child(1)');
             if (!secondDiv) {
                 continue;
             }
             if (value === null) {
-                firstDiv.setAttribute("style", "");
-                secondDiv.setAttribute("style", "");
+                firstDiv.setAttribute('style', '');
+                secondDiv.setAttribute('style', '');
                 continue;
             }
-            firstDiv.setAttribute("style", "width: min-content;");
-            secondDiv.setAttribute("style", "width: min-content;");
+            firstDiv.setAttribute('style', 'width: min-content;');
+            secondDiv.setAttribute('style', 'width: min-content;');
             if (i === 0) {
                 this._totalWidth = firstDiv.getBoundingClientRect().width;
             }
@@ -4395,13 +4412,13 @@ Table = __decorate([
 ], Table);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: "p-table-ngx", changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\n\t\tclass=\"mb-8\"\n\t\t[quickFilters]=\"quickFilters\"\n\t\t[activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n\t\t(quickFilter)=\"onQuickFilter($event)\"\n\t\t[enableSearch]=\"enableSearch\"\n\t\t[query]=\"query\"\n\t\t(queryChange)=\"onQueryChange($event)\"\n\t\t[enableFilter]=\"enableFilter\"\n\t\t[enableFilterDesktop]=\"enableFilterDesktop\"\n\t\t[selectedFiltersAmount]=\"selectedFiltersAmount\"\n\t\t[filterButtonTemplate]=\"filterButtonTemplate\"\n\t\t(filter)=\"filterModalShow$.next(true)\"\n\t\t[enableAction]=\"enableAction\"\n\t\t[canUseAction]=\"actionButtonEnabled\"\n\t\t[actionButtonTemplate]=\"actionButtonTemplate\"\n\t\t[actionLoading]=\"actionButtonLoading\"\n\t\t[actionText]=\"actionButtonText\"\n\t\t[actionIcon]=\"actionButtonIcon\"\n\t\t(action)=\"action.emit()\"\n\t\t[itemsSelectedAmount]=\"selectedRows.length\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"headerLoading\"\n\t>\n\t\t<ng-container *ngIf=\"headerCustomFilterTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomFilterTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"headerCustomActionsTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomActionsTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</p-table-header>\n\n\t<div\n\t\tclass=\"relative flex-1\"\n\t\t*ngIf=\"enableScroll; else rowsTemplate\"\n\t>\n\t\t<div\n\t\t\tclass=\"flex flex-col overflow-x-auto\"\n\t\t\t#scrollContainer\n\t\t\t[class]=\"\n\t\t\t\tcn(\n\t\t\t\t\t'before:absolute before:top-0 before:left-0 before:z-[1] before:pointer-events-none',\n\t\t\t\t\t'before:w-24 before:h-full before:transition-opacity',\n\t\t\t\t\t'before:bg-gradient-to-r before:from-white dark:before:from-hurricane-700 before:via-white/80 dark:before:via-hurricane-700/90 before:to-transparent',\n\t\t\t\t\t'after:absolute after:top-0 after:right-0 after:z-[0] before:pointer-events-none',\n\t\t\t\t\t'after:w-24 after:h-full after:transition-opacity',\n\t\t\t\t\t'after:bg-gradient-to-l after:from-white after:dark:from-hurricane-700 after:via-white/80 dark:after:via-hurricane-700/90 after:to-transparent',\n\t\t\t\t\t{\n\t\t\t\t\t\t'before:opacity-0': reachedScrollStart$ | async,\n\t\t\t\t\t\t'after:opacity-0': reachedScrollEnd$ | async,\n\t\t\t\t\t\t'before:opacity-100': (reachedScrollStart$ | async) === false,\n\t\t\t\t\t\t'after:opacity-100': (reachedScrollEnd$ | async) === false\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t\"\n\t\t\t(scroll)=\"onContainerXScroll($event)\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"rowsTemplate\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[usedInTable]=\"true\"\n\t\t\t[class]=\"\n\t\t\t\tfloatingMenuContainerClass({\n\t\t\t\t\thasFooter: enableFooter && (footerHidden$ | async) === false,\n\t\t\t\t\tactive: selectedRows.length > 0,\n\t\t\t\t\tshown: $any(floatingMenuShown$ | async)\n\t\t\t\t})\n\t\t\t\"\n\t\t\t[amount]=\"floatingMenuAmountSelectedText\"\n\t\t\t[enableAmountSelected]=\"!!(rowActionsFloating$ | async)?.length\"\n\t\t\t(close)=\"_selectAllChange(null, false)\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t*ngFor=\"let action of rowActionsFloating$ | async\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[disabled]=\"\n\t\t\t\t\t(action['type'] === 'single' && selectedRows.length > 1) ||\n\t\t\t\t\taction['disabled']\n\t\t\t\t\"\n\t\t\t\t[loading]=\"action['loading']\"\n\t\t\t\t[icon]=\"action['icon']\"\n\t\t\t\t[iconRotate]=\"action['iconRotate']\"\n\t\t\t\t[iconFlip]=\"action['iconFlip']\"\n\t\t\t\t(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action['label'] }}\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePaginationSize]=\"enablePaginationSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePaginationPages]=\"enablePaginationPages\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[loading]=\"footerLoading\"\n\t\t(hiddenChange)=\"footerHidden$.next($event.detail)\"\n\t\t[tableHeaderHasAction]=\"enableHeader && enableAction && actionButtonEnabled\"\n\t></p-table-footer>\n</p-table-container>\n\n<ng-template #rowsTemplate>\n\t<p-table-row\n\t\t*ngIf=\"(extraHeaders$ | async)?.length\"\n\t\tvariant=\"header-secondary\"\n\t\tclass=\"z-[2]\"\n\t\t[isLast]=\"true\"\n\t>\n\t\t<ng-container *ngFor=\"let col of extraHeaders$ | async; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\tvariant=\"header-secondary\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkboxOffset]=\"index === 0 && enableRowSelection\"\n\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t>\n\t\t\t\t<b>{{ col.name }}</b>\n\t\t\t</p-table-cell-ngx>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns$ | async; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\t[value]=\"col.name\"\n\t\t\t\tvariant=\"header\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkbox]=\"\n\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t: undefined\n\t\t\t\t\"\n\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<p-checkbox\n\t\t\t\t\t(checkedChange)=\"_selectAllChange($event)\"\n\t\t\t\t\t[checked]=\"_selectionContainsAll()\"\n\t\t\t\t\t[indeterminate]=\"_selectionIndeterminate()\"\n\t\t\t\t\t[class.opacity-0]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t\t[disabled]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t></p-checkbox>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-1 flex-col\">\n\t\t<ng-container *ngIf=\"loading; else contentTemplate\">\n\t\t\t<p-table-row\n\t\t\t\t*ngFor=\"let r of loadingRows; let rowIndex = index\"\n\t\t\t\tclass=\"group\"\n\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t[isLast]=\"rowIndex === loadingRows.length - 1\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns$ | async; let index = index\">\n\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\tvariant=\"loading\"\n\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t\t\t></p-table-cell-ngx>\n\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclass=\"h-6 w-6 rounded\"\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\n\t\t<ng-template #contentTemplate>\n\t\t\t<ng-container *ngIf=\"parsedItems?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of parsedItems; let rowIndex = index\"\n\t\t\t\t\tclass=\"group\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t[isLast]=\"rowIndex === parsedItems.length - 1\"\n\t\t\t\t\t(click)=\"_rowClick($event, rowIndex)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\tparseRowActionsRow(\n\t\t\t\t\t\t\t\trowActionsRow$ | async,\n\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t) as rowActionsRow\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t*ngFor=\"let col of columns$ | async; let index = index\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t\t<p-checkbox\n\t\t\t\t\t\t\t\t\t(checkedChange)=\"_checkboxChange($event.target, rowIndex)\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t\t></p-checkbox>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t<p-table-row-actions-container\n\t\t\t\t\t\t\t*ngIf=\"!!rowActionsRow?.length && !(isMobile$ | async)\"\n\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\tslot=\"actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ng-container *ngFor=\"let action of rowActionsRow\">\n\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t\t\t\taction.showFunction\n\t\t\t\t\t\t\t\t\t\t\t? action.showFunction(parsedItems[rowIndex])\n\t\t\t\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t[content]=\"action['label']\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\t\tdata-is-action\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\t\t\t\t\t[icon]=\"action['icon']\"\n\t\t\t\t\t\t\t\t\t\t[iconRotate]=\"action['iconRotate']\"\n\t\t\t\t\t\t\t\t\t\ticonFlip=\"action.iconFlip\"\n\t\t\t\t\t\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t[loading]=\"action['loading']\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"action['disabled']\"\n\t\t\t\t\t\t\t\t\t\t[routerLink]=\"\n\t\t\t\t\t\t\t\t\t\t\taction.routerLink\n\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionRouterLink(action.routerLink, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t  | async)\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t[queryParams]=\"\n\t\t\t\t\t\t\t\t\t\t\taction.queryParams\n\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionQueryParams(action.queryParams, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t  | async)\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t(onClick)=\"_rowActionClick(action, rowIndex)\"\n\t\t\t\t\t\t\t\t\t></p-button>\n\t\t\t\t\t\t\t\t</p-tooltip>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</p-table-row-actions-container>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</p-table-row>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\n\t\t<ng-container *ngFor=\"let customRow of customRows\">\n\t\t\t<p-table-row\n\t\t\t\t[variant]=\"customRow.variant\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\t'z-[2]': customRow.variant === 'secondary'\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"customRow.templateRef\"></ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n\t<p-modal\n\t\t[header]=\"filterModalHeaderText\"\n\t\t[show]=\"filterModalShow$ | async\"\n\t\t(closed)=\"filterModalShow$.next(false)\"\n\t>\n\t\t<div\n\t\t\tslot=\"content\"\n\t\t\tclass=\"flex flex-col gap-6\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"filterModalTemplate\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass=\"flex w-full justify-between gap-4\"\n\t\t>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowResetMobile\"\n\t\t\t\tclass=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset(true)\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowReset\"\n\t\t\t\tclass=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset()\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\tclass=\"ml-auto w-full tablet:w-auto\"\n\t\t\t\ticon=\"checkmark\"\n\t\t\t\t(onClick)=\"onFilterModalSave()\"\n\t\t\t>\n\t\t\t\t{{ filterModalSaveText }}\n\t\t\t</p-button>\n\t\t</div>\n\t</p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n\t<p-empty-state\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"my-16 self-center\"\n\t\t[illustration]=\"emptyStateFilteredIllustration\"\n\t\t[header]=\"emptyStateFilteredHeader\"\n\t\t[content]=\"emptyStateFilteredContent\"\n\t\t[enableAction]=\"false\"\n\t></p-empty-state>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<p-empty-state\n\t\tclass=\"my-16 self-center\"\n\t\t[illustration]=\"emptyStateIllustration\"\n\t\t[header]=\"emptyStateHeader\"\n\t\t[content]=\"emptyStateContent\"\n\t\t[enableAction]=\"enableEmptyStateAction\"\n\t\t[actionText]=\"emptyStateAction\"\n\t\t[actionIcon]=\"emptyStateActionIcon\"\n\t\t(action)=\"emptyStateClicked()\"\n\t></p-empty-state>\n</ng-template>\n" }]
+            args: [{ selector: 'p-table-ngx', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p-table-container>\n\t<p-table-header\n\t\t*ngIf=\"enableHeader\"\n\t\tclass=\"mb-8\"\n\t\t[quickFilters]=\"quickFilters\"\n\t\t[activeQuickFilterIdentifier]=\"activeQuickFilterIdentifier\"\n\t\t(quickFilter)=\"onQuickFilter($event)\"\n\t\t[enableSearch]=\"enableSearch\"\n\t\t[query]=\"query\"\n\t\t(queryChange)=\"onQueryChange($event)\"\n\t\t[enableFilter]=\"enableFilter\"\n\t\t[enableFilterDesktop]=\"enableFilterDesktop\"\n\t\t[selectedFiltersAmount]=\"selectedFiltersAmount\"\n\t\t[filterButtonTemplate]=\"filterButtonTemplate\"\n\t\t(filter)=\"filterModalShow$.next(true)\"\n\t\t[enableAction]=\"enableAction\"\n\t\t[canUseAction]=\"actionButtonEnabled\"\n\t\t[actionButtonTemplate]=\"actionButtonTemplate\"\n\t\t[actionLoading]=\"actionButtonLoading\"\n\t\t[actionText]=\"actionButtonText\"\n\t\t[actionIcon]=\"actionButtonIcon\"\n\t\t(action)=\"action.emit()\"\n\t\t[itemsSelectedAmount]=\"selectedRows.length\"\n\t\t[enableExport]=\"enableExport\"\n\t\t(export)=\"export.emit()\"\n\t\t[loading]=\"headerLoading\"\n\t>\n\t\t<ng-container *ngIf=\"headerCustomFilterTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomFilterTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"headerCustomActionsTemplate\">\n\t\t\t<ng-container\n\t\t\t\t*ngTemplateOutlet=\"headerCustomActionsTemplate\"\n\t\t\t></ng-container>\n\t\t</ng-container>\n\t</p-table-header>\n\n\t<div\n\t\tclass=\"relative flex-1\"\n\t\t*ngIf=\"enableScroll; else rowsTemplate\"\n\t>\n\t\t<div\n\t\t\tclass=\"flex flex-col overflow-x-auto\"\n\t\t\t#scrollContainer\n\t\t\t[class]=\"\n\t\t\t\tcn(\n\t\t\t\t\t'before:absolute before:top-0 before:left-0 before:z-[1] before:pointer-events-none',\n\t\t\t\t\t'before:w-24 before:h-full before:transition-opacity',\n\t\t\t\t\t'before:bg-gradient-to-r before:from-white dark:before:from-hurricane-700 before:via-white/80 dark:before:via-hurricane-700/90 before:to-transparent',\n\t\t\t\t\t'after:absolute after:top-0 after:right-0 after:z-[0] before:pointer-events-none',\n\t\t\t\t\t'after:w-24 after:h-full after:transition-opacity',\n\t\t\t\t\t'after:bg-gradient-to-l after:from-white after:dark:from-hurricane-700 after:via-white/80 dark:after:via-hurricane-700/90 after:to-transparent',\n\t\t\t\t\t{\n\t\t\t\t\t\t'before:opacity-0': reachedScrollStart$ | async,\n\t\t\t\t\t\t'after:opacity-0': reachedScrollEnd$ | async,\n\t\t\t\t\t\t'before:opacity-100': (reachedScrollStart$ | async) === false,\n\t\t\t\t\t\t'after:opacity-100': (reachedScrollEnd$ | async) === false\n\t\t\t\t\t}\n\t\t\t\t)\n\t\t\t\"\n\t\t\t(scroll)=\"onContainerXScroll($event)\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"rowsTemplate\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t<ng-container *ngIf=\"enableFloatingMenu && enableRowSelection\">\n\t\t<p-floating-menu-container\n\t\t\t[usedInTable]=\"true\"\n\t\t\t[class]=\"\n\t\t\t\tfloatingMenuContainerClass({\n\t\t\t\t\thasFooter: enableFooter && (footerHidden$ | async) === false,\n\t\t\t\t\tactive: selectedRows.length > 0,\n\t\t\t\t\tshown: $any(floatingMenuShown$ | async)\n\t\t\t\t})\n\t\t\t\"\n\t\t\t[amount]=\"floatingMenuAmountSelectedText\"\n\t\t\t[enableAmountSelected]=\"!!(rowActionsFloating$ | async)?.length\"\n\t\t\t(close)=\"_selectAllChange(null, false)\"\n\t\t>\n\t\t\t<p-floating-menu-item\n\t\t\t\t*ngFor=\"let action of rowActionsFloating$ | async\"\n\t\t\t\tslot=\"floating-menu-item\"\n\t\t\t\t[disabled]=\"\n\t\t\t\t\t(action['type'] === 'single' && selectedRows.length > 1) ||\n\t\t\t\t\taction['disabled']\n\t\t\t\t\"\n\t\t\t\t[loading]=\"action['loading']\"\n\t\t\t\t[icon]=\"action['icon']\"\n\t\t\t\t[iconRotate]=\"action['iconRotate']\"\n\t\t\t\t[iconFlip]=\"action['iconFlip']\"\n\t\t\t\t(click)=\"_rowActionClick(action)\"\n\t\t\t>\n\t\t\t\t{{ action['label'] }}\n\t\t\t</p-floating-menu-item>\n\t\t</p-floating-menu-container>\n\t</ng-container>\n\n\t<p-table-footer\n\t\t*ngIf=\"enableFooter\"\n\t\t[hideOnSinglePage]=\"hideOnSinglePage\"\n\t\t[enablePaginationSize]=\"enablePaginationSize\"\n\t\t[pageSize]=\"pageSize\"\n\t\t[pageSizeOptions]=\"pageSizeOptions\"\n\t\t(pageSizeChange)=\"onPageSizeChange($event)\"\n\t\t[enablePaginationPages]=\"enablePaginationPages\"\n\t\t[page]=\"page\"\n\t\t[total]=\"total\"\n\t\t(pageChange)=\"onPageChange($event)\"\n\t\t[loading]=\"footerLoading\"\n\t\t(hiddenChange)=\"footerHidden$.next($event.detail)\"\n\t\t[tableHeaderHasAction]=\"enableHeader && enableAction && actionButtonEnabled\"\n\t></p-table-footer>\n</p-table-container>\n\n<ng-template #rowsTemplate>\n\t<p-table-row\n\t\t*ngIf=\"(extraHeaders$ | async)?.length\"\n\t\tvariant=\"header-secondary\"\n\t\tclass=\"z-[2]\"\n\t\t[isLast]=\"true\"\n\t>\n\t\t<ng-container *ngFor=\"let col of extraHeaders$ | async; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\tvariant=\"header-secondary\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkboxOffset]=\"index === 0 && enableRowSelection\"\n\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t>\n\t\t\t\t<b>{{ col.name }}</b>\n\t\t\t</p-table-cell-ngx>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<p-table-row variant=\"header\">\n\t\t<ng-container *ngFor=\"let col of columns$ | async; let index = index\">\n\t\t\t<p-table-cell-ngx\n\t\t\t\t[definition]=\"col\"\n\t\t\t\t[value]=\"col.name\"\n\t\t\t\tvariant=\"header\"\n\t\t\t\t[index]=\"index\"\n\t\t\t\t[checkbox]=\"\n\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t: undefined\n\t\t\t\t\"\n\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t></p-table-cell-ngx>\n\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t<p-checkbox\n\t\t\t\t\t(checkedChange)=\"_selectAllChange($event)\"\n\t\t\t\t\t[checked]=\"_selectionContainsAll()\"\n\t\t\t\t\t[indeterminate]=\"_selectionIndeterminate()\"\n\t\t\t\t\t[class.opacity-0]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t\t[disabled]=\"rowSelectionLimit !== undefined\"\n\t\t\t\t></p-checkbox>\n\t\t\t</ng-template>\n\t\t</ng-container>\n\t</p-table-row>\n\n\t<div class=\"flex flex-1 flex-col\">\n\t\t<ng-container *ngIf=\"loading; else contentTemplate\">\n\t\t\t<p-table-row\n\t\t\t\t*ngFor=\"let r of loadingRows; let rowIndex = index\"\n\t\t\t\tclass=\"group\"\n\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t[isLast]=\"rowIndex === loadingRows.length - 1\"\n\t\t\t>\n\t\t\t\t<ng-container *ngFor=\"let col of columns$ | async; let index = index\">\n\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\tvariant=\"loading\"\n\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t\t\t></p-table-cell-ngx>\n\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t<p-loader\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\tclass=\"h-6 w-6 rounded\"\n\t\t\t\t\t\t></p-loader>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\n\t\t<ng-template #contentTemplate>\n\t\t\t<ng-container *ngIf=\"parsedItems?.length; else emptyStateTemplate\">\n\t\t\t\t<p-table-row\n\t\t\t\t\t*ngFor=\"let item of parsedItems; let rowIndex = index\"\n\t\t\t\t\tclass=\"group\"\n\t\t\t\t\t[enableHover]=\"enableRowSelection || enableRowClick\"\n\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t[isLast]=\"rowIndex === parsedItems.length - 1\"\n\t\t\t\t\t(click)=\"_rowClick($event, rowIndex)\"\n\t\t\t\t>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\tparseRowActionsRow(\n\t\t\t\t\t\t\t\trowActionsRow$ | async,\n\t\t\t\t\t\t\t\trowIndex\n\t\t\t\t\t\t\t) as rowActionsRow\n\t\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t*ngFor=\"let col of columns$ | async; let index = index\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<p-table-cell-ngx\n\t\t\t\t\t\t\t\t[definition]=\"col\"\n\t\t\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t\t\t[checkbox]=\"\n\t\t\t\t\t\t\t\t\t(index === 0 || col.hasCheckbox) && enableRowSelection\n\t\t\t\t\t\t\t\t\t\t? checkboxTemplate\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t[index]=\"index\"\n\t\t\t\t\t\t\t\t[rowIndex]=\"rowIndex\"\n\t\t\t\t\t\t\t\t[template]=\"col.template\"\n\t\t\t\t\t\t\t\t[scrollable]=\"this.enableScroll\"\n\t\t\t\t\t\t\t></p-table-cell-ngx>\n\n\t\t\t\t\t\t\t<ng-template #checkboxTemplate>\n\t\t\t\t\t\t\t\t<p-checkbox\n\t\t\t\t\t\t\t\t\t(checkedChange)=\"_checkboxChange($event.target, rowIndex)\"\n\t\t\t\t\t\t\t\t\t[disabled]=\"_checkboxDisabled(item, rowIndex)\"\n\t\t\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\t\t></p-checkbox>\n\t\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t</ng-container>\n\n\t\t\t\t\t\t<p-table-row-actions-container\n\t\t\t\t\t\t\t*ngIf=\"!!rowActionsRow?.length && !(isMobile$ | async)\"\n\t\t\t\t\t\t\t[checked]=\"_selectionContains(item, rowIndex)\"\n\t\t\t\t\t\t\tslot=\"actions\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ng-container *ngFor=\"let action of rowActionsRow\">\n\t\t\t\t\t\t\t\t<p-tooltip\n\t\t\t\t\t\t\t\t\t*ngIf=\"\n\t\t\t\t\t\t\t\t\t\taction.showFunction\n\t\t\t\t\t\t\t\t\t\t\t? action.showFunction(parsedItems[rowIndex])\n\t\t\t\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t[content]=\"action['label']\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<p-button\n\t\t\t\t\t\t\t\t\t\tdata-is-action\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t\tslot=\"trigger\"\n\t\t\t\t\t\t\t\t\t\t[icon]=\"action['icon']\"\n\t\t\t\t\t\t\t\t\t\t[iconRotate]=\"action['iconRotate']\"\n\t\t\t\t\t\t\t\t\t\ticonFlip=\"action.iconFlip\"\n\t\t\t\t\t\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t[loading]=\"action['loading']\"\n\t\t\t\t\t\t\t\t\t\t[disabled]=\"action['disabled']\"\n\t\t\t\t\t\t\t\t\t\t[routerLink]=\"\n\t\t\t\t\t\t\t\t\t\t\taction.routerLink\n\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionRouterLink(action.routerLink, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t  | async)\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t[queryParams]=\"\n\t\t\t\t\t\t\t\t\t\t\taction.queryParams\n\t\t\t\t\t\t\t\t\t\t\t\t? (_getActionQueryParams(action.queryParams, rowIndex)\n\t\t\t\t\t\t\t\t\t\t\t\t  | async)\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\t\t(onClick)=\"_rowActionClick(action, rowIndex)\"\n\t\t\t\t\t\t\t\t\t></p-button>\n\t\t\t\t\t\t\t\t</p-tooltip>\n\t\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t</p-table-row-actions-container>\n\t\t\t\t\t</ng-container>\n\t\t\t\t</p-table-row>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\n\t\t<ng-container *ngFor=\"let customRow of customRows\">\n\t\t\t<p-table-row\n\t\t\t\t[variant]=\"customRow.variant\"\n\t\t\t\t[class]=\"{\n\t\t\t\t\t'z-[2]': customRow.variant === 'secondary'\n\t\t\t\t}\"\n\t\t\t>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"customRow.templateRef\"></ng-container>\n\t\t\t</p-table-row>\n\t\t</ng-container>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"filterModalTemplate\">\n\t<p-modal\n\t\t[header]=\"filterModalHeaderText\"\n\t\t[show]=\"filterModalShow$ | async\"\n\t\t(closed)=\"filterModalShow$.next(false)\"\n\t>\n\t\t<div\n\t\t\tslot=\"content\"\n\t\t\tclass=\"flex flex-col gap-6\"\n\t\t>\n\t\t\t<ng-container *ngTemplateOutlet=\"filterModalTemplate\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\tslot=\"footer\"\n\t\t\tclass=\"flex w-full justify-between gap-4\"\n\t\t>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowResetMobile\"\n\t\t\t\tclass=\"flex w-full tablet:w-auto desktop-xs:hidden\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset(true)\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\t*ngIf=\"filterModalShowReset\"\n\t\t\t\tclass=\"hidden w-full tablet:w-auto desktop-xs:flex\"\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\t(onClick)=\"onFilterModalReset()\"\n\t\t\t>\n\t\t\t\t{{ filterModalResetText }}\n\t\t\t</p-button>\n\t\t\t<p-button\n\t\t\t\tclass=\"ml-auto w-full tablet:w-auto\"\n\t\t\t\ticon=\"checkmark\"\n\t\t\t\t(onClick)=\"onFilterModalSave()\"\n\t\t\t>\n\t\t\t\t{{ filterModalSaveText }}\n\t\t\t</p-button>\n\t\t</div>\n\t</p-modal>\n</ng-container>\n\n<ng-template #emptyStateTemplate>\n\t<p-empty-state\n\t\t*ngIf=\"emptyStateType === 'filtered'; else emptyStateNonFilterTemplate\"\n\t\tclass=\"my-16 self-center\"\n\t\t[illustration]=\"emptyStateFilteredIllustration\"\n\t\t[header]=\"emptyStateFilteredHeader\"\n\t\t[content]=\"emptyStateFilteredContent\"\n\t\t[enableAction]=\"false\"\n\t></p-empty-state>\n</ng-template>\n\n<ng-template #emptyStateNonFilterTemplate>\n\t<p-empty-state\n\t\tclass=\"my-16 self-center\"\n\t\t[illustration]=\"emptyStateIllustration\"\n\t\t[header]=\"emptyStateHeader\"\n\t\t[content]=\"emptyStateContent\"\n\t\t[enableAction]=\"enableEmptyStateAction\"\n\t\t[actionText]=\"emptyStateAction\"\n\t\t[actionIcon]=\"emptyStateActionIcon\"\n\t\t(action)=\"emptyStateClicked()\"\n\t></p-empty-state>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { className: [{
                 type: HostBinding,
-                args: ["class"]
+                args: ['class']
             }], theme: [{
                 type: HostBinding,
-                args: ["attr.data-theme"]
+                args: ['attr.data-theme']
             }], items: [{
                 type: Input
             }], loading: [{
@@ -4530,7 +4547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 args: [TableCell, { read: ElementRef }]
             }], scrollContainer: [{
                 type: ViewChild,
-                args: ["scrollContainer"]
+                args: ['scrollContainer']
             }], emptyStateActionClick: [{
                 type: Output
             }], shadow: [{
@@ -4585,16 +4602,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Output
             }], onResize: [{
                 type: HostListener,
-                args: ["window:resize", ["$event"]]
+                args: ['window:resize', ['$event']]
             }], keyDown: [{
                 type: HostListener,
-                args: ["document:keydown", ["$event"]]
+                args: ['document:keydown', ['$event']]
             }], keyUp: [{
                 type: HostListener,
-                args: ["document:keyup", ["$event"]]
+                args: ['document:keyup', ['$event']]
             }], visibilityChange: [{
                 type: HostListener,
-                args: ["document:visibilitychange", ["$event"]]
+                args: ['document:visibilitychange', ['$event']]
             }] } });
 
 const TABLE_COMPONENTS = [