@updevs/components 1.0.0-alpha.10 → 1.0.0-alpha.100

package/fesm2022/updevs-components-table.mjs

@@ -1,13 +1,13 @@
-import { DataTypeEnum, StringColumnFilter, GuidColumnFilter, NumberColumnFilter, DateColumnFilter, BooleanColumnFilter, ColumnSort, SortDirectionEnum, BaseStore, FilterOperandEnum, FilterDateOperandEnum, FilterNumberOperandEnum, FilterBooleanOperandEnum, FilterGuidOperandEnum } from '@updevs/sdk/stores';
 import * as i0 from '@angular/core';
-import { inject, Directive, Component, input, ViewContainerRef, effect, computed, signal, Injectable, model, InjectionToken, Inject, EventEmitter, HostBinding, Output, viewChild, ElementRef, NgModule } from '@angular/core';
-import { DynamicComponentLoaderService, BaseComponent, ButtonModel } from '@updevs/sdk/layout';
+import { inject, Directive, Component, input, ViewContainerRef, effect, computed, signal, Injectable, model, InjectionToken, Inject, EventEmitter, Output, HostBinding, viewChild, ElementRef, NgModule } from '@angular/core';
 import { TextService } from '@updevs/sdk';
+import { DataTypeEnum, StringColumnFilter, FilterTypeEnum, GuidColumnFilter, SelectColumnFilter, NumberColumnFilter, DateColumnFilter, BooleanColumnFilter, SortDirectionEnum, ColumnSort, BaseStore, FilterOperandEnum, FilterDateOperandEnum, FilterNumberOperandEnum, FilterBooleanOperandEnum, FilterGuidOperandEnum } from '@updevs/sdk/stores';
+import { DynamicComponentLoaderService, BaseComponent, ButtonModel } from '@updevs/sdk/layout';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@updevs/icons';
 import { UpdIconsModule } from '@updevs/icons';
-import { DateTimeFormatEnum, BaseSignalStorage, Tools, SelectionModel, ServerResponseService } from '@updevs/sdk/core';
+import { DateTimeFormatEnum, Tools, SelectionModel, ServerResponseService } from '@updevs/sdk/core';
 import { BaseModal, ModalService, ModalAlertService, UpdModalModule } from '@updevs/components/modal';
 import { Subject, distinctUntilChanged, debounceTime, tap, switchMap, catchError, of, finalize, forkJoin } from 'rxjs';
 import * as i1$1 from '@jsverse/transloco';
@@ -17,7 +17,7 @@ import { UpdDragAndDropModule } from '@updevs/components/drag-and-drop';
 import { FormGroup, Validators } from '@angular/forms';
 import * as i3$1 from '@updevs/components/form';
 import { DynamicFieldType, UpdFormModule } from '@updevs/components/form';
-import { SecurityStorage } from '@updevs/sdk/security';
+import { BaseByUserSignalStorage } from '@updevs/sdk/security';
 import * as i4 from '@updevs/components/button';
 import { UpdButtonModule } from '@updevs/components/button';
 import * as i5$1 from '@updevs/components/paginator';
@@ -50,6 +50,87 @@ var ColumnTypeEnum;
     ColumnTypeEnum[ColumnTypeEnum["Guid"] = 11] = "Guid";
 })(ColumnTypeEnum || (ColumnTypeEnum = {}));
 
+class BaseColumn {
+    constructor() {
+        this.textService = inject(TextService);
+    }
+    static { this.alignmentClassMap = {
+        justify: { text: 'text-justify', nonText: 'justify-content-between' },
+        center: { text: 'text-center', nonText: 'justify-content-center' },
+        right: { text: 'text-end', nonText: 'justify-content-end' },
+        left: { text: 'text-start', nonText: 'justify-content-start' }
+    }; }
+    static { this.overflowClassMap = {
+        'no-wrap': 'text-nowrap',
+        wrap: 'text-wrap',
+        'word-break': 'text-break',
+        truncate: 'text-truncate'
+    }; }
+    static { this.decorationClassMap = {
+        underline: 'text-decoration-underline',
+        strikethrough: 'text-decoration-line-through',
+        none: 'text-decoration-none'
+    }; }
+    static { this.weightClassMap = {
+        bold: 'fw-bold',
+        bolder: 'fw-bolder',
+        light: 'fw-light',
+        lighter: 'fw-lighter',
+        normal: 'fw-normal'
+    }; }
+    get value() {
+        return this.record[this.config.name];
+    }
+    get isTextType() {
+        return this.config.type !== ColumnTypeEnum.Boolean
+            && this.config.type !== ColumnTypeEnum.Image
+            && this.config.type !== ColumnTypeEnum.Custom;
+    }
+    get prefix() {
+        return this.textService.getText(this.config.prefix);
+    }
+    get suffix() {
+        return this.textService.getText(this.config.suffix);
+    }
+    get prefixSpace() {
+        return !!this.prefix && this.config.shouldSpaceAfterPrefix ? ' ' : '';
+    }
+    get suffixSpace() {
+        return !!this.suffix && this.config.shouldSpaceBeforeSuffix ? ' ' : '';
+    }
+    get alignmentClass() {
+        const map = BaseColumn.alignmentClassMap[this.config.alignment] || BaseColumn.alignmentClassMap['left'];
+        return this.isTextType ? map.text : map.nonText;
+    }
+    get overflowClass() {
+        return BaseColumn.overflowClassMap[this.config.overflowStrategy] || 'text-truncate';
+    }
+    get decorationClass() {
+        return this.config.decoration ? BaseColumn.decorationClassMap[this.config.decoration] : '';
+    }
+    get weightClass() {
+        return BaseColumn.weightClassMap[this.config.weight] || 'fw-normal';
+    }
+    getRecordAs() {
+        return this.record;
+    }
+    getClasses() {
+        return [
+            this.alignmentClass,
+            this.overflowClass,
+            this.decorationClass,
+            this.weightClass,
+            this.config.isItalic ? 'fst-italic' : ''
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.4", type: BaseColumn, isStandalone: false, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseColumn, decorators: [{
+            type: Directive,
+            args: [{ standalone: false }]
+        }] });
+
 class BaseColumnModel {
     get dataType() {
         switch (this.type) {
@@ -103,100 +184,6 @@ class BaseColumnModel {
 class FiltersOperandsService {
 }
 
-class BaseColumn {
-    constructor() {
-        this.textService = inject(TextService);
-    }
-    get value() {
-        return this.record[this.config.name];
-    }
-    get isTextType() {
-        return this.config.type !== ColumnTypeEnum.Boolean
-            && this.config.type !== ColumnTypeEnum.Image
-            && this.config.type !== ColumnTypeEnum.Custom;
-    }
-    get prefix() {
-        return this.textService.getText(this.config.prefix);
-    }
-    get suffix() {
-        return this.textService.getText(this.config.suffix);
-    }
-    get prefixSpace() {
-        return !!this.prefix && this.config.shouldSpaceAfterPrefix ? ' ' : '';
-    }
-    get suffixSpace() {
-        return !!this.suffix && this.config.shouldSpaceBeforeSuffix ? ' ' : '';
-    }
-    get alignmentClass() {
-        const prefix = this.isTextType ? 'text' : 'justify-content';
-        switch (this.config.alignment) {
-            case 'justify':
-                return `${prefix}-${(this.isTextType ? 'justify' : 'between')}`;
-            case 'center':
-                return `${prefix}-center`;
-            case 'right':
-                return `${prefix}-end`;
-            default:
-                return `${prefix}-start`;
-        }
-    }
-    get overflowClass() {
-        switch (this.config.overflowStrategy) {
-            case 'no-wrap':
-                return 'text-nowrap';
-            case 'wrap':
-                return 'text-wrap';
-            case 'word-break':
-                return 'text-break';
-            default:
-                return 'text-truncate';
-        }
-    }
-    get decorationClass() {
-        switch (this.config.decoration) {
-            case 'underline':
-                return 'text-decoration-underline';
-            case 'strikethrough':
-                return 'text-decoration-line-through';
-            case 'none':
-                return 'text-decoration-none';
-            default:
-                return '';
-        }
-    }
-    get weightClass() {
-        switch (this.config.weight) {
-            case 'bold':
-                return 'fw-bold';
-            case 'bolder':
-                return 'fw-bolder';
-            case 'light':
-                return 'fw-light';
-            case 'lighter':
-                return 'fw-lighter';
-            default:
-                return 'fw-normal';
-        }
-    }
-    getRecordAs() {
-        return this.record;
-    }
-    getClasses() {
-        return [
-            this.alignmentClass,
-            this.overflowClass,
-            this.decorationClass,
-            this.weightClass,
-            this.config.isItalic ? 'fst-italic' : ''
-        ];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseColumn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: BaseColumn, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BaseColumn, decorators: [{
-            type: Directive
-        }] });
-
 class TextColumnComponent extends BaseColumn {
     getClasses() {
         return [
@@ -216,21 +203,21 @@ class TextColumnComponent extends BaseColumn {
                 return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: TextColumnComponent, selector: "upd-text-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TextColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: TextColumnComponent, isStandalone: false, selector: "upd-text-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TextColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TextColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-text-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
+            args: [{ standalone: false, selector: 'upd-text-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
         }] });
 
 class NumberColumnComponent extends BaseColumn {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NumberColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: NumberColumnComponent, selector: "upd-number-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | number:config.numberFormat }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NumberColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: NumberColumnComponent, isStandalone: false, selector: "upd-number-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | number:config.numberFormat }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: NumberColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: NumberColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-number-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | number:config.numberFormat }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
+            args: [{ standalone: false, selector: 'upd-number-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | number:config.numberFormat }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
         }] });
 
 class BooleanColumnComponent extends BaseColumn {
@@ -246,27 +233,27 @@ class BooleanColumnComponent extends BaseColumn {
         }
         return `text-${(!!this.value ? this.config.trueColor : this.config.falseColor)}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BooleanColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: BooleanColumnComponent, selector: "upd-boolean-column", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"getClasses()\">\n    @switch (config.displayType) {\n        @case ('text') {\n            {{ prefix }}{{ prefixSpace }}{{ !!value ? textService.getText(config.trueText) : textService.getText(config.falseText) }}{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('toggle') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [tablerIcon]=\"!!value ? 'toggle-right' : 'toggle-left'\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('icon') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [model]=\"!!value ? config.trueIcon : config.falseIcon\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BooleanColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: BooleanColumnComponent, isStandalone: false, selector: "upd-boolean-column", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"getClasses()\">\n    @switch (config.displayType) {\n        @case ('text') {\n            {{ prefix }}{{ prefixSpace }}{{ !!value ? textService.getText(config.trueText) : textService.getText(config.falseText) }}{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('toggle') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [tablerIcon]=\"!!value ? 'toggle-right' : 'toggle-left'\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('icon') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [model]=\"!!value ? config.trueIcon : config.falseIcon\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n    }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: BooleanColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BooleanColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-boolean-column', template: "<div [ngClass]=\"getClasses()\">\n    @switch (config.displayType) {\n        @case ('text') {\n            {{ prefix }}{{ prefixSpace }}{{ !!value ? textService.getText(config.trueText) : textService.getText(config.falseText) }}{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('toggle') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [tablerIcon]=\"!!value ? 'toggle-right' : 'toggle-left'\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('icon') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [model]=\"!!value ? config.trueIcon : config.falseIcon\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n    }\n</div>\n" }]
+            args: [{ standalone: false, selector: 'upd-boolean-column', template: "<div [ngClass]=\"getClasses()\">\n    @switch (config.displayType) {\n        @case ('text') {\n            {{ prefix }}{{ prefixSpace }}{{ !!value ? textService.getText(config.trueText) : textService.getText(config.falseText) }}{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('toggle') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [tablerIcon]=\"!!value ? 'toggle-right' : 'toggle-left'\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n        @case ('icon') {\n            {{ prefix }}{{ prefixSpace }}\n            <upd-icon [model]=\"!!value ? config.trueIcon : config.falseIcon\"></upd-icon>{{ suffixSpace }}{{ suffix }}\n        }\n    }\n</div>\n" }]
         }] });
 
 class DateTimeColumnComponent extends BaseColumn {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateTimeColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: DateTimeColumnComponent, selector: "upd-date-time-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | date:config.dateTimeFormat }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DateTimeColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: DateTimeColumnComponent, isStandalone: false, selector: "upd-date-time-column", usesInheritance: true, ngImport: i0, template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | date:config.dateTimeFormat }}{{ suffixSpace }}{{ suffix }}</span>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DateTimeColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DateTimeColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-date-time-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | date:config.dateTimeFormat }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
+            args: [{ standalone: false, selector: 'upd-date-time-column', template: "<span [ngClass]=\"getClasses()\">{{ prefix }}{{ prefixSpace }}{{ value | date:config.dateTimeFormat }}{{ suffixSpace }}{{ suffix }}</span>\n" }]
         }] });
 
 class TableColumnDirective {
     constructor() {
-        this.record = input.required();
-        this.config = input.required();
+        this.record = input.required(...(ngDevMode ? [{ debugName: "record" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.viewContainerRef = inject(ViewContainerRef);
         this.dynamicLoaderService = inject(DynamicComponentLoaderService);
         effect(() => {
@@ -287,24 +274,28 @@ class TableColumnDirective {
                 // @ts-ignore
                 return BooleanColumnComponent;
             case ColumnTypeEnum.Date:
+            case ColumnTypeEnum.DateTime:
                 // @ts-ignore
                 return DateTimeColumnComponent;
             case ColumnTypeEnum.Guid:
                 // @ts-ignore
                 return TextColumnComponent;
+            case ColumnTypeEnum.Custom:
+                return this.config().component;
             default:
                 throw Error();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.0", type: TableColumnDirective, selector: "[updTableColumn]", inputs: { record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: TableColumnDirective, isStandalone: false, selector: "[updTableColumn]", inputs: { record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableColumnDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableColumnDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: false,
                     selector: '[updTableColumn]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { record: [{ type: i0.Input, args: [{ isSignal: true, alias: "record", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class BooleanColumnModel extends BaseColumnModel {
     constructor(init) {
@@ -326,6 +317,15 @@ class BooleanColumnModel extends BaseColumnModel {
     }
 }
 
+class CustomColumnModel extends BaseColumnModel {
+    constructor(init) {
+        super(ColumnTypeEnum.Custom, init);
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}
+
 class DateTimeColumnModel extends BaseColumnModel {
     get dateTimeFormat() {
         return this.customFormat || this.format;
@@ -397,6 +397,24 @@ class TableConfigModel {
         this.data = [];
         this.preSelectedItems = [];
         this.searchInputDebounceTime = 300;
+        /**
+         * Actions added to each record row as a group of buttons.
+         */
+        this.customActions = [];
+        /**
+         * Actions added to the header of the table as regular buttons.
+         */
+        this.customHeaderActions = [];
+        /**
+         * Define custom filterable fields.
+         * If not provided and useColumnsAsFilters is true, filters will be auto-generated from columns.
+         */
+        this.filterFields = [];
+        /**
+         * Whether to use columns as filters.
+         * If false, filterFields must be provided.
+         */
+        this.useColumnsAsFilters = false;
         this.getIdFunction = (item) => item.id;
         if (!!init) {
             Object.assign(this, init);
@@ -407,8 +425,8 @@ class TableConfigModel {
 class ColumnsManagerComponent extends BaseModal {
     constructor() {
         super(...arguments);
-        this.config = computed(() => ({ columns: [this.visibleColumn(), this.hiddenColumn()], canReorder: true }));
-        this.columns = signal([]);
+        this.config = computed(() => ({ columns: [this.visibleColumn(), this.hiddenColumn()], canReorder: true }), ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
         this.visibleColumn = computed(() => ({
             name: 'visible',
             title: { text: 'UpDevs.Table.VisibleColumns', isTranslated: false },
@@ -417,7 +435,7 @@ class ColumnsManagerComponent extends BaseModal {
                 name: c.name,
                 text: c.title || { text: 'UpDevs.Table.ColumnTitleNotSet', isTranslated: false }
             }))
-        }));
+        }), ...(ngDevMode ? [{ debugName: "visibleColumn" }] : []));
         this.hiddenColumn = computed(() => ({
             name: 'hidden',
             title: { text: 'UpDevs.Table.HiddenColumns', isTranslated: false },
@@ -425,42 +443,38 @@ class ColumnsManagerComponent extends BaseModal {
                 name: c.name,
                 text: c.title || { text: 'UpDevs.Table.ColumnTitleNotSet', isTranslated: false }
             }))
-        }));
+        }), ...(ngDevMode ? [{ debugName: "hiddenColumn" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ColumnsManagerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: ColumnsManagerComponent, selector: "upd-columns-manager", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.ColumnsManager'\">\n    <upd-drag-and-drop [config]=\"config()\" [(columns)]=\"columns\"></upd-drag-and-drop>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.DragAndDropComponent, selector: "upd-drag-and-drop", inputs: ["config", "columns"], outputs: ["columnsChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ColumnsManagerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.4", type: ColumnsManagerComponent, isStandalone: false, selector: "upd-columns-manager", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.ColumnsManager'\">\n    <upd-drag-and-drop [config]=\"config()\" [(columns)]=\"columns\"></upd-drag-and-drop>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i2.DragAndDropComponent, selector: "upd-drag-and-drop", inputs: ["config", "columns"], outputs: ["columnsChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: ColumnsManagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ColumnsManagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-columns-manager', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.ColumnsManager'\">\n    <upd-drag-and-drop [config]=\"config()\" [(columns)]=\"columns\"></upd-drag-and-drop>\n</ng-container>\n" }]
+            args: [{ standalone: false, selector: 'upd-columns-manager', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.ColumnsManager'\">\n    <upd-drag-and-drop [config]=\"config()\" [(columns)]=\"columns\"></upd-drag-and-drop>\n</ng-container>\n" }]
         }] });
 
-class SavedViewsStorage extends BaseSignalStorage {
-    get loggedUserId() {
-        return this.securityStorage.getUserInfo()?.id || 'nl';
-    }
+class SavedViewsStorage extends BaseByUserSignalStorage {
     constructor() {
         super('saved-views');
-        this.securityStorage = inject(SecurityStorage);
         this.lastStateKey = 'last-state';
     }
     saveView(data) {
         data.id = data.id || Tools.Guid.generate();
-        data.userId = this.loggedUserId;
-        this.save(data, this.getUserKey(data.id, data.tableName));
+        data.userId = this._loggedUserId;
+        this.save(data, this._getUserKey(data.id, data.tableName));
     }
     saveLastState(data) {
         data.id = this.lastStateKey;
         this.saveView(data);
     }
     getById(tableName, id) {
-        return this.get(this.getUserKey(id, tableName));
+        return this.get(this._getUserKey(id, tableName));
     }
     getAll(tableName) {
         return computed(() => {
             const records = this.getAllItems();
             return records().filter(sv => sv.tableName.toLowerCase() === tableName.toLowerCase()
-                && sv.userId === this.loggedUserId
+                && sv.userId === this._loggedUserId
                 && sv.id !== this.lastStateKey);
         });
     }
@@ -475,29 +489,26 @@ class SavedViewsStorage extends BaseSignalStorage {
         });
     }
     removeViews(tableName, ...keys) {
-        super.remove(...keys.map(k => this.getUserKey(k, tableName)));
+        super.remove(...keys.map(k => this._getUserKey(k, tableName)));
     }
     getByName(tableName, name) {
         const records = this.getAllItems();
         return records().find(sv => sv.tableName.toLowerCase() === tableName.toLowerCase()
-            && sv.userId === this.loggedUserId
+            && sv.userId === this._loggedUserId
             && sv.name?.toLowerCase() === name?.toLowerCase()
             && sv.id !== this.lastStateKey);
     }
-    getUserKey(key, tableName) {
-        return `${this.loggedUserId}${this._separator}${tableName}${this._separator}${key}`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SavedViewsStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SavedViewsStorage }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SavedViewsStorage, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SavedViewsStorage }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SavedViewsStorage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SavedViewsStorage, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class SaveSearchComponent extends BaseModal {
     constructor() {
         super(...arguments);
-        this.formGroup = model(new FormGroup({}));
+        this.formGroup = model(new FormGroup({}), ...(ngDevMode ? [{ debugName: "formGroup" }] : []));
         this.formRows = [];
         this.savedViewsStorage = inject(SavedViewsStorage);
         this.uniqueNameValidator = () => (control) => {
@@ -549,12 +560,263 @@ class SaveSearchComponent extends BaseModal {
         this.savedViewsStorage.saveView(data);
         this.modalRef().close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SaveSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: SaveSearchComponent, selector: "upd-save-search", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.SaveSearch'\">\n    <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{ t('Title') }}</h5>\n    </div>\n    <div class=\"modal-body py-4\">\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n    </div>\n    <div class=\"modal-footer\">\n        <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"cancel()\">\n            {{ t('Cancel') }}\n        </upd-button>\n        <upd-button colorStyle=\"primary\" [iconModel]=\"{tablerIcon:'device-floppy'}\" (clicked)=\"save()\" [isDisabled]=\"!formGroup().valid\">\n            {{ t('Save') }}\n        </upd-button>\n    </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i3$1.FormComponent, selector: "upd-form", inputs: ["rows", "layout", "title", "hasActionsSection", "isCard", "isDisabled", "isLoading", "isSaving", "formData", "formGroup"], outputs: ["initialized", "dataLoaded", "submitted", "formDataChange", "formGroupChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SaveSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.4", type: SaveSearchComponent, isStandalone: false, selector: "upd-save-search", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.SaveSearch'\">\n    <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{ t('Title') }}</h5>\n    </div>\n    <div class=\"modal-body py-4\">\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n    </div>\n    <div class=\"modal-footer\">\n        <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"cancel()\">\n            {{ t('Cancel') }}\n        </upd-button>\n        <upd-button colorStyle=\"primary\" [iconModel]=\"{tablerIcon:'device-floppy'}\" (clicked)=\"save()\" [isDisabled]=\"!formGroup().valid\">\n            {{ t('Save') }}\n        </upd-button>\n    </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i3$1.FormComponent, selector: "upd-form", inputs: ["rows", "layout", "title", "hasActionsSection", "isCard", "isDisabled", "isLoading", "isSaving", "formData", "formGroup"], outputs: ["initialized", "dataLoaded", "submitted", "formDataChange", "formGroupChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SaveSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SaveSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-save-search', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.SaveSearch'\">\n    <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{ t('Title') }}</h5>\n    </div>\n    <div class=\"modal-body py-4\">\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n    </div>\n    <div class=\"modal-footer\">\n        <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"cancel()\">\n            {{ t('Cancel') }}\n        </upd-button>\n        <upd-button colorStyle=\"primary\" [iconModel]=\"{tablerIcon:'device-floppy'}\" (clicked)=\"save()\" [isDisabled]=\"!formGroup().valid\">\n            {{ t('Save') }}\n        </upd-button>\n    </div>\n</ng-container>\n" }]
+            args: [{ standalone: false, selector: 'upd-save-search', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.SaveSearch'\">\n    <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{ t('Title') }}</h5>\n    </div>\n    <div class=\"modal-body py-4\">\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n    </div>\n    <div class=\"modal-footer\">\n        <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"cancel()\">\n            {{ t('Cancel') }}\n        </upd-button>\n        <upd-button colorStyle=\"primary\" [iconModel]=\"{tablerIcon:'device-floppy'}\" (clicked)=\"save()\" [isDisabled]=\"!formGroup().valid\">\n            {{ t('Save') }}\n        </upd-button>\n    </div>\n</ng-container>\n" }]
+        }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }, { type: i0.Output, args: ["formGroupChange"] }] } });
+
+/**
+ * Service to manage the current search request state across table components.
+ * Uses Angular signals for reactive state management, eliminating the need for prop drilling.
+ * Should be provided at the table component level so each table instance has its own state.
+ */
+class CurrentSearchRequestService {
+    constructor() {
+        this._searchRequest = signal({}, ...(ngDevMode ? [{ debugName: "_searchRequest" }] : []));
+        this._isSearching = signal(false, ...(ngDevMode ? [{ debugName: "_isSearching" }] : []));
+        this._hasChanges = signal(false, ...(ngDevMode ? [{ debugName: "_hasChanges" }] : []));
+        /**
+         * Read-only signal for the current search request
+         */
+        this.searchRequest = this._searchRequest.asReadonly();
+        /**
+         * Read-only signal for the searching state
+         */
+        this.isSearching = this._isSearching.asReadonly();
+        /**
+         * Read-only signal indicating if the search request has changed from default
+         */
+        this.hasChanges = this._hasChanges.asReadonly();
+        /**
+         * Subject to trigger search operations
+         */
+        this.searchRequestSubject = new Subject();
+        /**
+         * Count of active filters (non-hidden)
+         */
+        this.activeFilterCount = computed(() => this.searchRequest().filters?.filter(f => !f.isHidden).length || 0, ...(ngDevMode ? [{ debugName: "activeFilterCount" }] : []));
+        /**
+         * Whether there are any active filters
+         */
+        this.hasFilters = computed(() => (this.searchRequest().filters?.length || 0) > 0, ...(ngDevMode ? [{ debugName: "hasFilters" }] : []));
+        /**
+         * Count of visible (non-hidden) filters
+         */
+        this.visibleFilterCount = computed(() => this.searchRequest().filters?.filter(f => !f.isHidden).length || 0, ...(ngDevMode ? [{ debugName: "visibleFilterCount" }] : []));
+        /**
+         * Whether there's a search description/text query
+         */
+        this.hasDescription = computed(() => !!this.searchRequest().description && this.searchRequest().description.length > 0, ...(ngDevMode ? [{ debugName: "hasDescription" }] : []));
+        /**
+         * Whether there are any sortings applied
+         */
+        this.hasSorting = computed(() => (this.searchRequest().sortings?.length || 0) > 0, ...(ngDevMode ? [{ debugName: "hasSorting" }] : []));
+        /**
+         * The current sorting (first one if multiple exist)
+         */
+        this.currentSorting = computed(() => this.hasSorting() ? this.searchRequest().sortings[0] : undefined, ...(ngDevMode ? [{ debugName: "currentSorting" }] : []));
+        /**
+         * Whether any search criteria is active (filters, description, or sorting)
+         */
+        this.hasAnySearchCriteria = computed(() => this.hasFilters() || this.hasDescription() || this.hasSorting(), ...(ngDevMode ? [{ debugName: "hasAnySearchCriteria" }] : []));
+        /**
+         * Current page number (1-indexed for display)
+         */
+        this.currentPageNumber = computed(() => (this.searchRequest().pageIndex || 0) + 1, ...(ngDevMode ? [{ debugName: "currentPageNumber" }] : []));
+        /**
+         * Whether pagination is configured
+         */
+        this.hasPagination = computed(() => !!this.searchRequest().pageSize && this.searchRequest().pageSize > 0, ...(ngDevMode ? [{ debugName: "hasPagination" }] : []));
+    }
+    /**
+     * Updates the entire search request
+     * @param request The new search request
+     */
+    updateSearchRequest(request) {
+        const previousRequest = this._searchRequest();
+        this._searchRequest.set(request);
+        // Only mark as changed if the new request is actually different from previous
+        if (!this.areSearchRequestsEqual(previousRequest, request)) {
+            this._hasChanges.set(true);
+        }
+    }
+    /**
+     * Partially updates the search request
+     * @param partial Partial search request properties to update
+     */
+    patchSearchRequest(partial) {
+        const previousRequest = this._searchRequest();
+        const newRequest = { ...previousRequest, ...partial };
+        this._searchRequest.set(newRequest);
+        // Only mark as changed if the patch actually changed something
+        if (!this.areSearchRequestsEqual(previousRequest, newRequest)) {
+            this._hasChanges.set(true);
+        }
+    }
+    /**
+     * Sets the searching state
+     * @param isSearching Whether a search is in progress
+     */
+    setSearching(isSearching) {
+        this._isSearching.set(isSearching);
+    }
+    /**
+     * Resets the search request to default state
+     */
+    reset() {
+        this._searchRequest.set({});
+        this._isSearching.set(false);
+        this._hasChanges.set(false);
+    }
+    /**
+     * Triggers a search operation by emitting on the searchRequestSubject
+     */
+    triggerSearch() {
+        this.searchRequestSubject.next(this._searchRequest());
+    }
+    /**
+     * Manually sets the hasChanges flag
+     * Useful for changes that aren't part of the search request but should enable Save View
+     * (e.g., column visibility changes)
+     * @param hasChanges Whether there are changes
+     */
+    setHasChanges(hasChanges) {
+        this._hasChanges.set(hasChanges);
+    }
+    /**
+     * Adds a filter to the search request
+     * @param filter The filter to add
+     */
+    addFilter(filter) {
+        const currentFilters = this.searchRequest().filters || [];
+        this.patchSearchRequest({ filters: [...currentFilters, filter] });
+    }
+    /**
+     * Removes a filter by name
+     * @param filterName The name of the filter column to remove
+     */
+    removeFilter(filterName) {
+        const currentFilters = this.searchRequest().filters || [];
+        this.patchSearchRequest({ filters: currentFilters.filter(f => f.column !== filterName) });
+    }
+    /**
+     * Removes a filter by index
+     * @param index The index of the filter to remove
+     */
+    removeFilterByIndex(index) {
+        const currentFilters = this.searchRequest().filters || [];
+        this.patchSearchRequest({ filters: currentFilters.filter((_, i) => i !== index) });
+    }
+    /**
+     * Updates a specific filter by column name
+     * @param columnName The column name of the filter to update
+     * @param newData Partial filter properties to update
+     */
+    updateFilter(columnName, newData) {
+        const currentFilters = this.searchRequest().filters || [];
+        this.patchSearchRequest({ filters: currentFilters.map(f => f.column === columnName ? { ...f, ...newData } : f) });
+    }
+    /**
+     * Updates a filter by its index position
+     * @param index The index of the filter to update
+     * @param newData Partial filter properties to update
+     */
+    updateFilterByIndex(index, newData) {
+        const currentFilters = this.searchRequest().filters || [];
+        if (index >= 0 && index < currentFilters.length) {
+            this.patchSearchRequest({ filters: currentFilters.map((f, i) => i === index ? { ...f, ...newData } : f) });
+        }
+    }
+    /**
+     * Clears all filters
+     */
+    clearFilters() {
+        this.patchSearchRequest({ filters: [] });
+    }
+    /**
+     * Sets the sorting (replaces existing sortings)
+     * @param column The column name to sort by
+     * @param direction The sort direction
+     */
+    setSorting(column, direction) {
+        this.patchSearchRequest({ sortings: [{ column, direction }] });
+    }
+    /**
+     * Clears all sorting
+     */
+    clearSorting() {
+        this.patchSearchRequest({ sortings: [] });
+    }
+    /**
+     * Sets the search description/text query
+     * @param description The search text
+     */
+    setDescription(description) {
+        this.patchSearchRequest({ description });
+    }
+    /**
+     * Clears the search description
+     */
+    clearDescription() {
+        this.patchSearchRequest({ description: '' });
+    }
+    /**
+     * Clears ALL search criteria (filters, description, sorting)
+     * Note: Does not reset pagination - use reset() for that
+     */
+    clearAll() {
+        this.patchSearchRequest({ filters: [], description: '', sortings: [] });
+    }
+    /**
+     * Clears all search criteria except pagination
+     * Useful when you want to reset search but maintain current page
+     */
+    clearAllExceptPagination() {
+        this.clearAll();
+    }
+    /**
+     * Deep comparison of two search requests
+     * @param a First search request
+     * @param b Second search request
+     * @returns true if they are equal, false otherwise
+     */
+    areSearchRequestsEqual(a, b) {
+        if ((a.description || '') !== (b.description || '')) {
+            return false;
+        }
+        const aFilters = a.filters || [];
+        const bFilters = b.filters || [];
+        if (aFilters.length !== bFilters.length) {
+            return false;
+        }
+        for (let i = 0; i < aFilters.length; i++) {
+            if (JSON.stringify(aFilters[i]) !== JSON.stringify(bFilters[i])) {
+                return false;
+            }
+        }
+        const aSortings = a.sortings || [];
+        const bSortings = b.sortings || [];
+        if (aSortings.length !== bSortings.length) {
+            return false;
+        }
+        for (let i = 0; i < aSortings.length; i++) {
+            if (JSON.stringify(aSortings[i]) !== JSON.stringify(bSortings[i])) {
+                return false;
+            }
+        }
+        if (a.pageSize !== b.pageSize || a.pageIndex !== b.pageIndex) {
+            return false;
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CurrentSearchRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CurrentSearchRequestService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CurrentSearchRequestService, decorators: [{
+            type: Injectable
         }] });
 
 class FilterTools {
@@ -562,42 +824,64 @@ class FilterTools {
         return filters.map(f => ({
             name: f.column,
             value: f.value,
-            operandConfig: operands[f.dataType].find(op => op.operand === f.operand)
+            operandConfig: f.type && operands[f.type] ? operands[f.type].find(op => op.operand === f.operand) : undefined,
+            isHidden: f.isHidden,
+            type: f.type
         }));
     }
-    static convertToRequestFilter(filters, columns) {
+    static convertToRequestFilter(filters, filtersConfigs = [], columns = []) {
         return filters.map(af => {
-            const col = columns.find(c => c.name === af.name);
-            switch (col?.dataType) {
-                case DataTypeEnum.Boolean:
+            const filterType = filtersConfigs.length > 0
+                ? filtersConfigs.find(c => c.name === af.name).type
+                : columns.find(c => c.name === af.name).filterType;
+            switch (filterType) {
+                case FilterTypeEnum.Boolean:
                     return new BooleanColumnFilter({
                         column: af.name,
                         value: af.value,
-                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
+                        isHidden: af.isHidden,
+                        type: filterType
                     });
-                case DataTypeEnum.Date:
+                case FilterTypeEnum.Date:
                     return new DateColumnFilter({
                         column: af.name,
                         value: af.value,
-                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
+                        isHidden: af.isHidden,
+                        type: filterType
                     });
-                case DataTypeEnum.Number:
+                case FilterTypeEnum.Number:
                     return new NumberColumnFilter({
                         column: af.name,
                         value: af.value,
-                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
+                        isHidden: af.isHidden,
+                        type: filterType
                     });
-                case DataTypeEnum.Guid:
+                case FilterTypeEnum.Select:
+                    return new SelectColumnFilter({
+                        column: af.name,
+                        value: af.value,
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
+                        isHidden: af.isHidden,
+                        type: filterType
+                    });
+                case FilterTypeEnum.Guid:
                     return new GuidColumnFilter({
                         column: af.name,
                         value: af.value,
-                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
+                        isHidden: af.isHidden,
+                        type: filterType
                     });
                 default:
                     return new StringColumnFilter({
                         column: af.name,
                         value: af.value,
-                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined
+                        operand: !!af.operandConfig ? af.operandConfig.operand : undefined,
+                        isHidden: af.isHidden,
+                        type: filterType
                     });
             }
         });
@@ -631,10 +915,10 @@ class UpdTableConfigService {
     constructor(layoutConfig) {
         this.config = new UpdTableConfigModel(layoutConfig);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableConfigService, deps: [{ token: TableConstants.defaultOptionsInjectionToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableConfigService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdTableConfigService, deps: [{ token: TableConstants.defaultOptionsInjectionToken }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdTableConfigService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdTableConfigService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
@@ -646,25 +930,27 @@ class FilterRowComponent extends BaseComponent {
         super(...arguments);
         this.wrapperClasses = 'd-flex gap-2';
         this.removed = new EventEmitter();
-        this.DataTypeEnum = DataTypeEnum;
-        this.activeFilters = model.required();
-        this.rowIndex = input.required();
-        this.columns = input.required();
-        this.isDisabled = input.required();
-        this.store = input();
-        this.currentFilter = input();
-        this.currentField = signal(undefined);
-        this.currentOperand = signal(undefined);
-        this.fieldsOptions = signal([]);
-        this.comparisonOperatorOptions = signal([]);
-        this.isValueSectionEnabled = signal(true);
+        this.FilterTypeEnum = FilterTypeEnum;
+        this.rowIndex = input.required(...(ngDevMode ? [{ debugName: "rowIndex" }] : []));
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.isDisabled = input.required(...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.store = input(...(ngDevMode ? [undefined, { debugName: "store" }] : []));
+        this.filterFields = input(...(ngDevMode ? [undefined, { debugName: "filterFields" }] : []));
+        this.currentFilter = input(...(ngDevMode ? [undefined, { debugName: "currentFilter" }] : []));
+        this.currentField = signal(undefined, ...(ngDevMode ? [{ debugName: "currentField" }] : []));
+        this.currentOperand = signal(undefined, ...(ngDevMode ? [{ debugName: "currentOperand" }] : []));
+        this.fieldsOptions = signal([], ...(ngDevMode ? [{ debugName: "fieldsOptions" }] : []));
+        this.comparisonOperatorOptions = signal([], ...(ngDevMode ? [{ debugName: "comparisonOperatorOptions" }] : []));
+        this.fieldAllowedValues = signal([], ...(ngDevMode ? [{ debugName: "fieldAllowedValues" }] : []));
+        this.isValueSectionEnabled = signal(true, ...(ngDevMode ? [{ debugName: "isValueSectionEnabled" }] : []));
         this.currentOperands = [];
         this.configService = inject(UpdTableConfigService);
         this.filtersOperandsService = inject(FiltersOperandsService);
         this.textService = inject(TextService);
+        this.currentSearchRequestService = inject(CurrentSearchRequestService);
     }
     get fieldType() {
-        return this.currentField()?.objectData || DataTypeEnum.String;
+        return this.currentField()?.objectData || FilterTypeEnum.Text;
     }
     get selectedField() {
         const currentFilter = this.currentFilter();
@@ -683,17 +969,38 @@ class FilterRowComponent extends BaseComponent {
         return !!currentFilter?.name ? currentFilter.value : undefined;
     }
     ngOnInit() {
-        if (!!this.store() && this.configService.config.shouldLoadFieldsFromServer) {
-            this.store().getFilterableFields().subscribe(fields => this.fieldsOptions.set(fields.map(f => ({ value: f.name, text: f.description, objectData: f.type }))));
+        // Priority 1: User-defined filter fields
+        if (!!this.filterFields() && this.filterFields().length > 0) {
+            this.fieldsOptions.set(this.filterFields().map(f => ({
+                value: f.name,
+                text: this.textService.getText(f.label),
+                objectData: f.type
+            })));
         }
+        // Priority 2: Server-loaded fields
+        else if (!!this.store() && this.configService.config.shouldLoadFieldsFromServer) {
+            this.store().getFilterableFields().subscribe(fields => this.fieldsOptions.set(fields.map(f => ({
+                value: f.name,
+                text: f.description,
+                objectData: f.type
+            }))));
+        }
+        // Priority 3: Fallback to columns
         else {
-            this.fieldsOptions.set(this.columns().filter(c => !!c.title).map(c => ({ value: c.name, text: this.textService.getText(c.title), objectData: c.dataType })));
+            this.fieldsOptions.set(this.columns().filter(c => !!c.title).map(c => ({
+                value: c.name,
+                text: this.textService.getText(c.title),
+                objectData: c.dataType
+            })));
         }
         if (!!this.selectedField) {
+            this.onSelectField(this.selectedField);
             if (!!this.selectedOperand) {
                 this.onSelectOperand(this.selectedOperand);
             }
-            this.onSelectField(this.selectedField);
+            if (!!this.selectedValue) {
+                this.updateValue(this.selectedValue);
+            }
         }
     }
     onSelectField(item) {
@@ -706,78 +1013,68 @@ class FilterRowComponent extends BaseComponent {
         else {
             this.comparisonOperatorOptions.set([]);
         }
-        this.activeFilters.update(curr => {
-            curr[this.rowIndex()].name = this.currentField()?.value;
-            return [...curr];
+        this.currentSearchRequestService.updateFilterByIndex(this.rowIndex(), {
+            column: this.currentField()?.value,
+            type: this.fieldType,
+            dataType: dataType
         });
     }
     onSelectOperand(item) {
         this.currentOperand.set(this.currentOperands.find(co => co.operand === item?.value));
         this.isValueSectionEnabled.set(!!this.currentOperand()?.requiresValue);
-        this.activeFilters.update(curr => {
-            curr[this.rowIndex()].operandConfig = this.currentOperand();
-            return [...curr];
-        });
+        this.currentSearchRequestService.updateFilterByIndex(this.rowIndex(), { operand: this.currentOperand()?.operand });
+        if (this.fieldType === FilterTypeEnum.Select) {
+            const values = this.filterFields()?.find(f => f.name === this.currentField()?.value)?.allowedValues || [];
+            this.fieldAllowedValues.set(values.map(v => ({ value: v.key, text: v.value })));
+        }
     }
     updateValue(value) {
-        this.activeFilters.update(curr => {
-            curr[this.rowIndex()].value = value;
-            return [...curr];
-        });
+        this.currentSearchRequestService.updateFilterByIndex(this.rowIndex(), { value });
     }
     removeFilterItem() {
-        this.activeFilters.update(curr => {
-            curr.splice(this.rowIndex(), 1);
-            return [...curr];
-        });
+        this.currentSearchRequestService.removeFilterByIndex(this.rowIndex());
         this.removed.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilterRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FilterRowComponent, selector: "upd-filter-row", inputs: { activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: true, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", activeFilters: "activeFiltersChange" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, ngImport: i0, template: "<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldsOptions()\" (selectedItem)=\"onSelectField($event)\"\n    [selected]=\"selectedField\">\n</upd-select>\n<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"comparisonOperatorOptions()\" (selectedItem)=\"onSelectOperand($event)\"\n    [selected]=\"selectedOperand\">\n</upd-select>\n\n@if (isValueSectionEnabled()) {\n    @switch (fieldType) {\n        @case (DataTypeEnum.Number) {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"number\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n        @case (DataTypeEnum.Date) {\n\n        }\n        @default {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"text\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n    }\n} @else {\n    <div class=\"w-100\">\n        <input type=\"text\" class=\"form-control h-100\" disabled>\n    </div>\n}\n\n<upd-button class=\"flex-shrink-1\" colorStyle=\"danger\" [isDisabled]=\"isDisabled()\" [isOutline]=\"true\" [isIcon]=\"true\"\n    [iconModel]=\"{tablerIcon:'x'}\" (clicked)=\"removeFilterItem()\"></upd-button>\n", styles: [""], dependencies: [{ kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "name", "maxLength", "isDisabled", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "isRequired", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout", "labelColSize"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "component", type: i3$2.SelectComponent, selector: "upd-select", inputs: ["useSystemStyle", "shouldShowClearButton", "isCompact", "selected"], outputs: ["selectedItem"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FilterRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FilterRowComponent, isStandalone: false, selector: "upd-filter-row", inputs: { rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: true, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, ngImport: i0, template: "<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldsOptions()\" (selectedItem)=\"onSelectField($event)\"\n    [value]=\"selectedField?.value\">\n</upd-select>\n<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"comparisonOperatorOptions()\"\n    (selectedItem)=\"onSelectOperand($event)\" [value]=\"selectedOperand?.value\">\n</upd-select>\n\n@if (isValueSectionEnabled()) {\n    @switch (fieldType) {\n        @case (FilterTypeEnum.Number) {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"number\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n        @case (FilterTypeEnum.Date) {\n\n        }\n        @case (FilterTypeEnum.Select) {\n            <upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldAllowedValues()\"\n                (selectedItem)=\"updateValue($event?.value)\" [value]=\"selectedValue\">\n            </upd-select>\n        }\n        @default {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"text\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n    }\n} @else {\n    <div class=\"w-100\">\n        <input type=\"text\" class=\"form-control h-100\" disabled>\n    </div>\n}\n\n<upd-button class=\"flex-shrink-1\" colorStyle=\"danger\" [isDisabled]=\"isDisabled()\" [isOutline]=\"true\" [isIcon]=\"true\"\n    [iconModel]=\"{tablerIcon:'x'}\" (clicked)=\"removeFilterItem()\"></upd-button>", styles: [""], dependencies: [{ kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i5.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "component", type: i3$2.SelectComponent, selector: "upd-select", inputs: ["useSystemStyle", "shouldShowClearButton", "shouldTruncateSelectedText", "isCompact", "value"], outputs: ["valueChange", "selectedItem"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilterRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FilterRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-filter-row', template: "<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldsOptions()\" (selectedItem)=\"onSelectField($event)\"\n    [selected]=\"selectedField\">\n</upd-select>\n<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"comparisonOperatorOptions()\" (selectedItem)=\"onSelectOperand($event)\"\n    [selected]=\"selectedOperand\">\n</upd-select>\n\n@if (isValueSectionEnabled()) {\n    @switch (fieldType) {\n        @case (DataTypeEnum.Number) {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"number\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n        @case (DataTypeEnum.Date) {\n\n        }\n        @default {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"text\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n    }\n} @else {\n    <div class=\"w-100\">\n        <input type=\"text\" class=\"form-control h-100\" disabled>\n    </div>\n}\n\n<upd-button class=\"flex-shrink-1\" colorStyle=\"danger\" [isDisabled]=\"isDisabled()\" [isOutline]=\"true\" [isIcon]=\"true\"\n    [iconModel]=\"{tablerIcon:'x'}\" (clicked)=\"removeFilterItem()\"></upd-button>\n" }]
+            args: [{ standalone: false, selector: 'upd-filter-row', template: "<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldsOptions()\" (selectedItem)=\"onSelectField($event)\"\n    [value]=\"selectedField?.value\">\n</upd-select>\n<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"comparisonOperatorOptions()\"\n    (selectedItem)=\"onSelectOperand($event)\" [value]=\"selectedOperand?.value\">\n</upd-select>\n\n@if (isValueSectionEnabled()) {\n    @switch (fieldType) {\n        @case (FilterTypeEnum.Number) {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"number\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n        @case (FilterTypeEnum.Date) {\n\n        }\n        @case (FilterTypeEnum.Select) {\n            <upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldAllowedValues()\"\n                (selectedItem)=\"updateValue($event?.value)\" [value]=\"selectedValue\">\n            </upd-select>\n        }\n        @default {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"text\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n    }\n} @else {\n    <div class=\"w-100\">\n        <input type=\"text\" class=\"form-control h-100\" disabled>\n    </div>\n}\n\n<upd-button class=\"flex-shrink-1\" colorStyle=\"danger\" [isDisabled]=\"isDisabled()\" [isOutline]=\"true\" [isIcon]=\"true\"\n    [iconModel]=\"{tablerIcon:'x'}\" (clicked)=\"removeFilterItem()\"></upd-button>" }]
         }], propDecorators: { wrapperClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], removed: [{
                 type: Output
-            }] } });
+            }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: true }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: false }] }], filterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFields", required: false }] }], currentFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilter", required: false }] }] } });
 
 class SearchSectionComponent extends BaseComponent {
     constructor() {
         super();
         this.wrapperClass = 'card-body border-bottom py-3 d-flex flex-column gap-2';
-        this.searchRequest = model.required();
-        this.hasChanges = model.required();
-        this.columns = input.required();
-        this.isSearching = input.required();
-        this.searchRequestSubject = input.required();
-        this.config = input.required();
-        this.actionsTpl = input();
-        this.activeFilters = signal([]);
-        this.isFilterSectionOpen = signal(false);
+        this.columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.actionsTpl = input(...(ngDevMode ? [undefined, { debugName: "actionsTpl" }] : []));
+        this.activeFilters = computed(() => FilterTools.convertToFilterItem(this.currentSearchRequestService.searchRequest().filters?.filter(af => !af.isHidden) || [], this.filtersOperandsService.getAllOperands()), ...(ngDevMode ? [{ debugName: "activeFilters" }] : []));
+        this.isFilterSectionOpen = signal(false, ...(ngDevMode ? [{ debugName: "isFilterSectionOpen" }] : []));
         this.canApplyFilters = computed(() => this.activeFilters().length > 0
-            && this.activeFilters().every(af => !!af.name && !!af.operandConfig?.operand && (!af.operandConfig?.requiresValue || !!af.value)));
-        this.canPerformActions = computed(() => this.canApplyFilters() && !this.isSearching());
-        this.badgeConfig = computed(() => (this.searchRequest().filters?.length || 0) > 0
+            && this.activeFilters().every(af => !af.isHidden && !!af.name && !!af.operandConfig?.operand && (!af.operandConfig?.requiresValue || !!af.value)), ...(ngDevMode ? [{ debugName: "canApplyFilters" }] : []));
+        this.canPerformActions = computed(() => this.canApplyFilters() && !this.currentSearchRequestService.isSearching(), ...(ngDevMode ? [{ debugName: "canPerformActions" }] : []));
+        this.badgeConfig = computed(() => this.currentSearchRequestService.visibleFilterCount() > 0
             ? ({
                 isNotification: true,
                 isPill: true,
                 bgColor: 'primary-lt',
-                text: { text: this.searchRequest().filters.length.toString(), isTranslated: true }
+                text: { text: this.currentSearchRequestService.visibleFilterCount().toString(), isTranslated: true }
             })
-            : undefined);
-        this.filterSectionBtnColor = computed(() => this.isFilterSectionOpen() ? 'primary' : undefined);
+            : undefined, ...(ngDevMode ? [{ debugName: "badgeConfig" }] : []));
+        this.filterSectionBtnColor = computed(() => this.isFilterSectionOpen() ? 'primary' : undefined, ...(ngDevMode ? [{ debugName: "filterSectionBtnColor" }] : []));
         this.searchSubject = new Subject();
         this.filtersOperandsService = inject(FiltersOperandsService);
+        this.currentSearchRequestService = inject(CurrentSearchRequestService);
         effect(() => {
-            if ((this.searchRequest().filters?.length || 0) > 0) {
-                this.activeFilters.set([...FilterTools.convertToFilterItem(this.searchRequest().filters || [], this.filtersOperandsService.getAllOperands())]);
-            }
-            else {
-                this.activeFilters.set([]);
+            // Auto-close filter section when all filters are removed
+            if (this.currentSearchRequestService.visibleFilterCount() === 0 && this.isFilterSectionOpen()) {
                 this.isFilterSectionOpen.set(false);
             }
         }, { allowSignalWrites: true });
@@ -785,17 +1082,14 @@ class SearchSectionComponent extends BaseComponent {
     ngOnInit() {
         const searchSub = this.searchSubject
             .pipe(distinctUntilChanged(), debounceTime(this.config().searchInputDebounceTime))
-            .subscribe(term => this.searchRequestSubject().next({
-            ...this.searchRequest(),
-            description: term
-        }));
+            .subscribe(term => this.currentSearchRequestService.setDescription(term));
         this.addSubscriptions(searchSub);
     }
     search() {
-        this.searchRequestSubject().next({
-            ...this.searchRequest(),
-            filters: FilterTools.convertToRequestFilter(this.activeFilters(), this.config().columns)
+        this.currentSearchRequestService.patchSearchRequest({
+            filters: FilterTools.convertToRequestFilter(this.activeFilters(), this.config().filterFields, this.config().columns)
         });
+        this.currentSearchRequestService.triggerSearch();
     }
     toggleFilterSection() {
         if (this.activeFilters().length === 0) {
@@ -810,26 +1104,26 @@ class SearchSectionComponent extends BaseComponent {
         this.search();
     }
     addEmptyFilterRow() {
-        this.activeFilters.update(curr => {
-            curr.push({});
-            return [...curr];
-        });
+        this.currentSearchRequestService.addFilter({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SearchSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SearchSectionComponent, selector: "upd-search-section", inputs: { searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: true, transformFunction: null }, hasChanges: { classPropertyName: "hasChanges", publicName: "hasChanges", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isSearching: { classPropertyName: "isSearching", publicName: "isSearching", isSignal: true, isRequired: true, transformFunction: null }, searchRequestSubject: { classPropertyName: "searchRequestSubject", publicName: "searchRequestSubject", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, actionsTpl: { classPropertyName: "actionsTpl", publicName: "actionsTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchRequest: "searchRequestChange", hasChanges: "hasChangesChange" }, host: { properties: { "class": "this.wrapperClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    @if (!!actionsTpl()) {\n        <ng-template [ngTemplateOutlet]=\"actionsTpl()!\"></ng-template>\n    }\n\n    <div class=\"d-flex align-items-center gap-2\">\n        <upd-input wrapperClasses=\"w-100\" [placeholder]=\"{text:'UpDevs.Table.Search', isTranslated:false}\" [isAppendButton]=\"true\"\n            (valueChange)=\"searchSubject.next($event)\" [value]=\"searchRequest().description\">\n            <ng-template updInputAppend>\n                <upd-button [isIcon]=\"true\" [colorStyle]=\"filterSectionBtnColor()\" (clicked)=\"toggleFilterSection()\"\n                    [badgeConfig]=\"badgeConfig()\">\n                    <upd-icon [tablerIcon]=\"isFilterSectionOpen() ? 'filter-up' : 'filter-down'\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            </ng-template>\n        </upd-input>\n    </div>\n\n    @if (isFilterSectionOpen()) {\n        @for (row of activeFilters(); track row; let i = $index) {\n            <upd-filter-row [store]=\"config().store\" [currentFilter]=\"row\" [(activeFilters)]=\"activeFilters\" [columns]=\"columns()\"\n                [rowIndex]=\"i\" (removed)=\"onRowRemoved()\" [isDisabled]=\"isSearching()\">\n            </upd-filter-row>\n        }\n\n        <div class=\"ms-auto d-flex gap-2\">\n            <upd-button customClasses=\"gap-2\" colorStyle=\"primary\" [isOutline]=\"true\" (clicked)=\"addEmptyFilterRow()\"\n                [isDisabled]=\"!canPerformActions()\">\n                <upd-icon tablerIcon=\"plus\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('AddNewFilter') }}\n            </upd-button>\n            <upd-button customClasses=\"gap-2\" colorStyle=\"success\" [isDisabled]=\"!canPerformActions()\" (clicked)=\"search()\">\n                <upd-icon tablerIcon=\"checks\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('ApplyFilters') }}\n            </upd-button>\n        </div>\n    }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "name", "maxLength", "isDisabled", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "isRequired", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout", "labelColSize"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i5.InputAppendDirective, selector: "ng-template[updInputAppend]" }, { kind: "component", type: FilterRowComponent, selector: "upd-filter-row", inputs: ["activeFilters", "rowIndex", "columns", "isDisabled", "store", "currentFilter"], outputs: ["removed", "activeFiltersChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SearchSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: SearchSectionComponent, isStandalone: false, selector: "upd-search-section", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, actionsTpl: { classPropertyName: "actionsTpl", publicName: "actionsTpl", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.wrapperClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    @if (!!actionsTpl()) {\n        <ng-template [ngTemplateOutlet]=\"actionsTpl()!\"></ng-template>\n    }\n\n    <div class=\"d-flex align-items-center gap-2\">\n        <upd-input wrapperClasses=\"w-100\" [placeholder]=\"{text:'UpDevs.Table.Search', isTranslated:false}\"\n            [isAppendButton]=\"true\" (valueChange)=\"searchSubject.next($event)\"\n            [value]=\"currentSearchRequestService.searchRequest().description\">\n            <ng-template updInputAppend>\n                <upd-button [isIcon]=\"true\" [colorStyle]=\"filterSectionBtnColor()\" (clicked)=\"toggleFilterSection()\"\n                    [badgeConfig]=\"badgeConfig()\">\n                    <upd-icon [tablerIcon]=\"isFilterSectionOpen() ? 'filter-up' : 'filter-down'\"\n                        [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            </ng-template>\n        </upd-input>\n    </div>\n\n    @if (isFilterSectionOpen()) {\n        @for (row of activeFilters(); track row.name; let i = $index) {\n            <upd-filter-row [store]=\"config().store\" [currentFilter]=\"row\" [columns]=\"columns()\" [rowIndex]=\"i\"\n                (removed)=\"onRowRemoved()\" [isDisabled]=\"currentSearchRequestService.isSearching()\"\n                [filterFields]=\"config().filterFields\">\n            </upd-filter-row>\n        }\n\n        <div class=\"ms-auto d-flex gap-2\">\n            <upd-button customClasses=\"gap-2\" colorStyle=\"primary\" [isOutline]=\"true\" (clicked)=\"addEmptyFilterRow()\"\n                [isDisabled]=\"!canPerformActions()\">\n                <upd-icon tablerIcon=\"plus\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('AddNewFilter') }}\n            </upd-button>\n            <upd-button customClasses=\"gap-2\" colorStyle=\"success\" [isDisabled]=\"!canPerformActions()\"\n                (clicked)=\"search()\">\n                <upd-icon tablerIcon=\"checks\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('ApplyFilters') }}\n            </upd-button>\n        </div>\n    }\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i5.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "maxLength", "isPlainText", "isReadOnly", "isLoading", "isRound", "isFlush", "isInputGroupFlat", "isPrependButton", "isAppendButton", "isFloating", "loaderPosition", "prependIconModel", "appendIconModel", "isValidationStatusLight", "layout"], outputs: ["valueChange", "blurred", "keyDown", "keyDownEsc", "keyUpEnter"] }, { kind: "directive", type: i5.InputAppendDirective, selector: "ng-template[updInputAppend]" }, { kind: "component", type: FilterRowComponent, selector: "upd-filter-row", inputs: ["rowIndex", "columns", "isDisabled", "store", "filterFields", "currentFilter"], outputs: ["removed"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SearchSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: SearchSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-search-section', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    @if (!!actionsTpl()) {\n        <ng-template [ngTemplateOutlet]=\"actionsTpl()!\"></ng-template>\n    }\n\n    <div class=\"d-flex align-items-center gap-2\">\n        <upd-input wrapperClasses=\"w-100\" [placeholder]=\"{text:'UpDevs.Table.Search', isTranslated:false}\" [isAppendButton]=\"true\"\n            (valueChange)=\"searchSubject.next($event)\" [value]=\"searchRequest().description\">\n            <ng-template updInputAppend>\n                <upd-button [isIcon]=\"true\" [colorStyle]=\"filterSectionBtnColor()\" (clicked)=\"toggleFilterSection()\"\n                    [badgeConfig]=\"badgeConfig()\">\n                    <upd-icon [tablerIcon]=\"isFilterSectionOpen() ? 'filter-up' : 'filter-down'\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            </ng-template>\n        </upd-input>\n    </div>\n\n    @if (isFilterSectionOpen()) {\n        @for (row of activeFilters(); track row; let i = $index) {\n            <upd-filter-row [store]=\"config().store\" [currentFilter]=\"row\" [(activeFilters)]=\"activeFilters\" [columns]=\"columns()\"\n                [rowIndex]=\"i\" (removed)=\"onRowRemoved()\" [isDisabled]=\"isSearching()\">\n            </upd-filter-row>\n        }\n\n        <div class=\"ms-auto d-flex gap-2\">\n            <upd-button customClasses=\"gap-2\" colorStyle=\"primary\" [isOutline]=\"true\" (clicked)=\"addEmptyFilterRow()\"\n                [isDisabled]=\"!canPerformActions()\">\n                <upd-icon tablerIcon=\"plus\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('AddNewFilter') }}\n            </upd-button>\n            <upd-button customClasses=\"gap-2\" colorStyle=\"success\" [isDisabled]=\"!canPerformActions()\" (clicked)=\"search()\">\n                <upd-icon tablerIcon=\"checks\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('ApplyFilters') }}\n            </upd-button>\n        </div>\n    }\n</ng-container>\n" }]
+            args: [{ standalone: false, selector: 'upd-search-section', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    @if (!!actionsTpl()) {\n        <ng-template [ngTemplateOutlet]=\"actionsTpl()!\"></ng-template>\n    }\n\n    <div class=\"d-flex align-items-center gap-2\">\n        <upd-input wrapperClasses=\"w-100\" [placeholder]=\"{text:'UpDevs.Table.Search', isTranslated:false}\"\n            [isAppendButton]=\"true\" (valueChange)=\"searchSubject.next($event)\"\n            [value]=\"currentSearchRequestService.searchRequest().description\">\n            <ng-template updInputAppend>\n                <upd-button [isIcon]=\"true\" [colorStyle]=\"filterSectionBtnColor()\" (clicked)=\"toggleFilterSection()\"\n                    [badgeConfig]=\"badgeConfig()\">\n                    <upd-icon [tablerIcon]=\"isFilterSectionOpen() ? 'filter-up' : 'filter-down'\"\n                        [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            </ng-template>\n        </upd-input>\n    </div>\n\n    @if (isFilterSectionOpen()) {\n        @for (row of activeFilters(); track row.name; let i = $index) {\n            <upd-filter-row [store]=\"config().store\" [currentFilter]=\"row\" [columns]=\"columns()\" [rowIndex]=\"i\"\n                (removed)=\"onRowRemoved()\" [isDisabled]=\"currentSearchRequestService.isSearching()\"\n                [filterFields]=\"config().filterFields\">\n            </upd-filter-row>\n        }\n\n        <div class=\"ms-auto d-flex gap-2\">\n            <upd-button customClasses=\"gap-2\" colorStyle=\"primary\" [isOutline]=\"true\" (clicked)=\"addEmptyFilterRow()\"\n                [isDisabled]=\"!canPerformActions()\">\n                <upd-icon tablerIcon=\"plus\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('AddNewFilter') }}\n            </upd-button>\n            <upd-button customClasses=\"gap-2\" colorStyle=\"success\" [isDisabled]=\"!canPerformActions()\"\n                (clicked)=\"search()\">\n                <upd-icon tablerIcon=\"checks\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('ApplyFilters') }}\n            </upd-button>\n        </div>\n    }\n</ng-container>" }]
         }], ctorParameters: () => [], propDecorators: { wrapperClass: [{
                 type: HostBinding,
                 args: ['class']
-            }] } });
+            }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], actionsTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTpl", required: false }] }] } });
 
 var Utils = Tools.Utils;
 class TableComponent extends BaseComponent {
     get numberOfColumns() {
-        return this.columns().length + (this.configModel().hasCheckboxColumn ? 1 : 0) + (!!this.pendingWidthColClass ? 1 : 0);
+        return this.columns().length
+            + (this.configModel().hasCheckboxColumn ? 1 : 0)
+            + (this.configModel().customActions.length > 0 ? 1 : 0)
+            + (!!this.pendingWidthColClass ? 1 : 0);
     }
     get hasWidth() {
         return this.columns().some(rec => !!rec.width);
@@ -841,6 +1135,7 @@ class TableComponent extends BaseComponent {
         const isGrid = this.columns().some(rec => !!rec.width?.gridColumn);
         const total = isGrid ? 12 : 100;
         const remainingSize = total - this.columns().reduce((acc, item) => acc + item.widthSize, 0);
+        // TODO: add spaces of checkbox and customactions columns
         return remainingSize > 0 ? `${(isGrid ? 'col' : 'w')}-${remainingSize}` : '';
     }
     get isWidthInPixels() {
@@ -854,39 +1149,35 @@ class TableComponent extends BaseComponent {
     }
     constructor() {
         super();
-        this.savedViewsRef = viewChild('savedViewsBtn', { read: ElementRef });
-        this.config = model.required();
-        this.isSearching = signal(false);
-        this.selectedItems = computed(() => this.selectionModel().selected());
-        this.activeSavedView = signal(undefined);
+        this.savedViewsRef = viewChild('savedViewsBtn', { ...(ngDevMode ? { debugName: "savedViewsRef" } : {}), read: ElementRef });
+        this.config = model.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.selectedItems = computed(() => this.selectionModel().selected(), ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+        this.activeSavedView = signal(undefined, ...(ngDevMode ? [{ debugName: "activeSavedView" }] : []));
         this.isMainCheckboxChecked = false;
         this.isMainCheckboxIndeterminate = false;
         this.isSavedViewsDropdownOpen = false;
-        this.searchRequest = model({});
-        this.activeFilters = model([]);
-        this.hasSearchChanged = signal(false);
-        this.currentPage = model(1);
-        this.totalRecords = signal(0);
-        this.pageSize = model(0);
-        this.configModel = computed(() => new TableConfigModel(this.config()));
-        this.data = computed(() => this.configModel().data.length > 0 ? this.configModel().data : this.currentData());
-        this.selectionModel = computed(() => new SelectionModel(this.configModel().getIdFunction));
-        this.currentSorting = signal(undefined);
-        this.hiddenColumns = computed(() => this.configModel().canManageColumns ? this.configModel().columns.filter(c => c.isHidden).length : 0);
-        this.columns = signal([]);
-        this.searchRequestSubject = new Subject();
+        this.currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+        this.pageSize = model(0, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+        this.totalRecords = signal(0, ...(ngDevMode ? [{ debugName: "totalRecords" }] : []));
+        this.configModel = computed(() => new TableConfigModel(this.config()), ...(ngDevMode ? [{ debugName: "configModel" }] : []));
+        this.data = computed(() => this.configModel().data.length > 0 ? this.configModel().data : this.currentData(), ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.selectionModel = computed(() => new SelectionModel(this.configModel().getIdFunction), ...(ngDevMode ? [{ debugName: "selectionModel" }] : []));
+        this.currentSorting = signal(undefined, ...(ngDevMode ? [{ debugName: "currentSorting" }] : []));
+        this.hiddenColumns = computed(() => this.configModel().canManageColumns ? this.configModel().columns.filter(c => c.isHidden).length : 0, ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : []));
+        this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
         this.textService = inject(TextService);
+        this.currentSearchRequestService = inject(CurrentSearchRequestService);
         this.savedViewsOptions = computed(() => {
             const allSavedViewsOptions = [];
             this.allSavedViews().forEach(sv => allSavedViewsOptions.push(this.getSavedViewOption(sv)));
             return allSavedViewsOptions;
-        });
+        }, ...(ngDevMode ? [{ debugName: "savedViewsOptions" }] : []));
         this.shouldForceSearch = false;
         this.columnsBackup = [];
-        this.currentData = signal([]);
-        this.currentFavoriteButtons = computed(() => this.favoriteButtons);
-        this.smallSizeSignal = signal('small');
-        this.allSavedViews = computed(() => this.savedViewsStorage.getAll(this.configModel().name)());
+        this.currentData = signal([], ...(ngDevMode ? [{ debugName: "currentData" }] : []));
+        this.currentFavoriteButtons = computed(() => this.favoriteButtons, ...(ngDevMode ? [{ debugName: "currentFavoriteButtons" }] : []));
+        this.smallSizeSignal = signal('small', ...(ngDevMode ? [{ debugName: "smallSizeSignal" }] : []));
+        this.allSavedViews = computed(() => this.savedViewsStorage.getAll(this.configModel().name)(), ...(ngDevMode ? [{ debugName: "allSavedViews" }] : []));
         this.favoriteButtons = [];
         this.serverResponseService = inject(ServerResponseService);
         this.savedViewsStorage = inject(SavedViewsStorage);
@@ -914,27 +1205,22 @@ class TableComponent extends BaseComponent {
     }
     ngOnInit() {
         this.columnsBackup = [...this.config().columns];
-        const searchSubjectSub = this.searchRequestSubject
-            .pipe(distinctUntilChanged((prev, curr) => !this.shouldForceSearch || Utils.areEqual(prev, curr)), tap((request) => {
-            this.isSearching.set(true);
+        const searchSubjectSub = this.currentSearchRequestService.searchRequestSubject
+            .pipe(distinctUntilChanged((prev, curr) => !this.shouldForceSearch ? Utils.areEqual(prev, curr) : false), tap((request) => {
+            this.currentSearchRequestService.setSearching(true);
             this.currentData.set([]);
-            this.searchRequest.set(request);
-            if ((request.filters?.length || 0) > 0
-                || (request.description || '').length > 0
-                || (request.sortings?.length || 0) > 0) {
-                this.hasSearchChanged.set(true);
-            }
-        }), switchMap(() => this.store.search(this.searchRequest()).pipe(catchError(() => of()) // Already handled by the ServerResponseService.
+            this.currentSearchRequestService.updateSearchRequest(request);
+        }), switchMap(() => this.store.search(this.currentSearchRequestService.searchRequest()).pipe(catchError(() => of()) // Already handled by the ServerResponseService.
         )), finalize(() => this.shouldForceSearch = false))
             .subscribe(resp => this.setupSearchResults(resp));
         const serverResponseSub = this.serverResponseService.onError.subscribe(error => {
             if (!!error) {
-                this.isSearching.set(false);
+                this.currentSearchRequestService.setSearching(false);
             }
         });
         if (this.configModel().shouldAutoSearch && this.isRemote) {
             this.shouldForceSearch = true;
-            this.searchRequestSubject.next({});
+            this.currentSearchRequestService.searchRequestSubject.next({});
         }
         this.updateColumns(this.configModel().columns);
         this.addSubscriptions(searchSubjectSub, serverResponseSub);
@@ -959,23 +1245,17 @@ class TableComponent extends BaseComponent {
         return this.getColumnByName(columnName).allowSort;
     }
     sortByColumn(columnName) {
-        if (!this.currentSorting()) {
-            this.currentSorting.set(new ColumnSort({ column: columnName }));
-        }
-        else {
-            this.currentSorting.set(new ColumnSort({
-                column: columnName,
-                direction: this.currentSorting().column === columnName
-                    ? (this.currentSorting().direction === SortDirectionEnum.Asc ? SortDirectionEnum.Desc : SortDirectionEnum.Asc)
-                    : SortDirectionEnum.Asc
-            }));
-        }
+        const currentSort = this.currentSorting();
+        const nextDirection = (currentSort?.column === columnName && currentSort.direction === SortDirectionEnum.Asc)
+            ? SortDirectionEnum.Desc
+            : SortDirectionEnum.Asc;
+        this.currentSorting.set(new ColumnSort({
+            column: columnName,
+            direction: nextDirection
+        }));
         if (this.isRemote) {
-            this.searchRequest.set({
-                ...this.searchRequest(),
-                sortings: [this.currentSorting()]
-            });
-            this.searchRequestSubject.next(this.searchRequest());
+            this.currentSearchRequestService.setSorting(columnName, nextDirection);
+            this.currentSearchRequestService.triggerSearch();
         }
         else {
             const col = this.getColumnByName(columnName);
@@ -988,12 +1268,11 @@ class TableComponent extends BaseComponent {
             : 'arrows-sort';
     }
     onPageSettingsChanged() {
-        this.searchRequest.set({
-            ...this.searchRequest(),
+        this.currentSearchRequestService.patchSearchRequest({
             pageSize: this.pageSize(),
             pageIndex: this.currentPage()
         });
-        this.searchRequestSubject.next(this.searchRequest());
+        this.currentSearchRequestService.searchRequestSubject.next(this.currentSearchRequestService.searchRequest());
     }
     getRecordId(record) {
         return this.configModel().getIdFunction(record);
@@ -1036,9 +1315,11 @@ class TableComponent extends BaseComponent {
                 });
                 this.updateColumns(newColumns);
                 const newVisibleColumnsOrder = newColumns.map(c => c.name);
+                // Column visibility changes should enable "Save View" button since views include column config
                 if (previousVisibleColumnsOrder.length !== newVisibleColumnsOrder.length
                     || !previousVisibleColumnsOrder.every((v, i) => v === newVisibleColumnsOrder[i])) {
-                    this.hasSearchChanged.set(true);
+                    // Manually trigger hasChanges since column visibility isn't part of search request
+                    this.currentSearchRequestService.setHasChanges(true);
                 }
             }
         };
@@ -1046,7 +1327,7 @@ class TableComponent extends BaseComponent {
     openSaveSearchModal(data) {
         data = data || {
             tableName: this.configModel().name,
-            request: this.searchRequest(),
+            request: this.currentSearchRequestService.searchRequest(),
             columns: this.configModel().columns
         };
         this.modalService.open(SaveSearchComponent, { showCloseButton: false, data });
@@ -1061,7 +1342,7 @@ class TableComponent extends BaseComponent {
                 return { ...curr };
             });
             this.activeSavedView.set(savedView);
-            this.searchRequestSubject.next({ ...savedView.request });
+            this.currentSearchRequestService.searchRequestSubject.next({ ...savedView.request });
         }
     }
     resetViewState() {
@@ -1071,10 +1352,59 @@ class TableComponent extends BaseComponent {
             curr.columns = this.columnsBackup;
             return { ...curr };
         });
-        this.searchRequestSubject.next({});
+        this.currentSearchRequestService.searchRequestSubject.next({});
+    }
+    reload() {
+        this.shouldForceSearch = true;
+        this.currentSearchRequestService.searchRequestSubject.next({});
+    }
+    adaptCustomAction(btn, item) {
+        const newBtn = new ButtonModel({
+            id: btn.id,
+            iconModel: btn.iconModel,
+            title: btn.title,
+            isIcon: signal(true),
+            isLink: signal(true),
+            size: signal('small'),
+            text: undefined,
+            colorStyle: btn.colorStyle,
+            isOutline: btn.isOutline
+        });
+        const defaultFunction = btn.clickFunction;
+        newBtn.clickFunction = (evt) => {
+            evt.event?.preventDefault();
+            evt.event?.stopPropagation();
+            if (!!defaultFunction) {
+                defaultFunction({ event: evt.event, data: item });
+            }
+        };
+        return newBtn;
     }
     updateColumns(columns) {
-        this.columns.set(columns.filter(c => !c.isHidden).map(c => new BaseColumnModel(c.type, { ...c })));
+        this.columns.set(columns.filter(c => !c.isHidden).map(c => this.createColumnModel(c)));
+    }
+    createColumnModel(data) {
+        switch (data.type) {
+            case ColumnTypeEnum.Text:
+                return new TextColumnModel({ ...data });
+            case ColumnTypeEnum.Number:
+                return new NumberColumnModel({ ...data });
+            case ColumnTypeEnum.Boolean:
+                return new BooleanColumnModel({ ...data });
+            case ColumnTypeEnum.DateTime:
+            case ColumnTypeEnum.Date:
+            case ColumnTypeEnum.Time:
+                return new DateTimeColumnModel({ ...data });
+            case ColumnTypeEnum.Image:
+                return new ImageColumnModel({ ...data });
+            case ColumnTypeEnum.Guid:
+                return new GuidColumnModel({ ...data });
+            case ColumnTypeEnum.Masked:
+            case ColumnTypeEnum.Custom:
+            case ColumnTypeEnum.Currency:
+            default:
+                return new BaseColumnModel(data.type, { ...data });
+        }
     }
     getColumnByName(columnName) {
         const col = this.columns().find(c => c.name === columnName);
@@ -1092,7 +1422,8 @@ class TableComponent extends BaseComponent {
         });
     }
     setupSearchResults(resp) {
-        this.isSearching.set(false);
+        this.currentSearchRequestService.setSearching(false);
+        this.currentSearchRequestService.setHasChanges(false);
         this.currentData.set(resp.records);
         this.totalRecords.set(resp.totalRecords || 0);
         this.currentPage.set(resp.pageIndex || 0);
@@ -1171,19 +1502,19 @@ class TableComponent extends BaseComponent {
         return {
             id: savedView.id,
             type: 'with-toolbar',
-            text: { text: savedView.name },
+            text: { text: savedView.name, isTranslated: true },
             toolbarType: 'spaced',
             isActive: this.activeSavedView()?.id === savedView.id,
             actionButtons
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TableComponent, selector: "upd-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", searchRequest: "searchRequestChange", activeFilters: "activeFiltersChange", currentPage: "currentPageChange", pageSize: "pageSizeChange" }, viewQueries: [{ propertyName: "savedViewsRef", first: true, predicate: ["savedViewsBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().canSearch) {\n            <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n                [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n                [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table - complex... -->\n            <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n                [class.pixel-sized]=\"isWidthInPixels\">\n                <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n                <tr>\n                    @if (configModel().hasCheckboxColumn) {\n                        <th class=\"checkbox-selector\">\n                            <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n                                [(isChecked)]=\"isMainCheckboxChecked\" [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n                        </th>\n                    }\n\n                    @for (col of columns(); track col) {\n                        <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n                            {{ textService.getText(col.title) }}\n                            @if (canSortColumn(col.name)) {\n                                <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n                                    [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n                                </upd-icon>\n                            }\n                        </th>\n                    }\n\n                    @if (!!pendingWidthColClass) {\n                        <th [ngClass]=\"pendingWidthColClass\"></th>\n                    }\n                </tr>\n                </thead>\n\n                <tbody>\n                    @if (isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td>\n                                        <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n                                            [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n                                    </td>\n                                }\n\n                                @for (col of columns(); track col) {\n                                    <td>\n                                        <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n                                    </td>\n                                }\n\n                                @if (!!pendingWidthColClass) {\n                                    <td></td>\n                                }\n                            </tr>\n                        } @empty {\n                            <tr>\n                                <td [colSpan]=\"numberOfColumns\">\n                                    <div class=\"empty\">\n                                        <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n                                        <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n                                    </div>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </tbody>\n            </table>\n        </div>\n        <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n            [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\" [(currentPage)]=\"currentPage\"\n            [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\" updPopover=\"{{ t('CurrentSavedView') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\" updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n                    updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                    (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5$1.PaginatorComponent, selector: "upd-paginator", inputs: ["startPageIndex", "currentPage", "wrapperClasses", "availablePageSizes", "defaultInitPageSize", "pageSize", "shouldDisplayFirstIcon", "shouldDisplayFirstText", "shouldDisplayPreviousIcon", "shouldDisplayPreviousText", "shouldDisplayNextIcon", "shouldDisplayNextText", "shouldDisplayLastIcon", "shouldDisplayLastText", "previousDescription", "nextDescription", "totalRecords"], outputs: ["changed", "currentPageChange", "pageSizeChange"] }, { kind: "component", type: i6.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "name", "isDisabled", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i7.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }, { kind: "component", type: SearchSectionComponent, selector: "upd-search-section", inputs: ["searchRequest", "hasChanges", "columns", "isSearching", "searchRequestSubject", "config", "actionsTpl"], outputs: ["searchRequestChange", "hasChangesChange"] }, { kind: "directive", type: TableColumnDirective, selector: "[updTableColumn]", inputs: ["record", "config"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableComponent, isStandalone: false, selector: "upd-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", currentPage: "currentPageChange", pageSize: "pageSizeChange" }, providers: [CurrentSearchRequestService], viewQueries: [{ propertyName: "savedViewsRef", first: true, predicate: ["savedViewsBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().customHeaderActions.length > 0) {\n            <div class=\"card-body py-3 d-flex flex-column gap-2\">\n                <div class=\"ms-auto d-flex gap-2\">\n                    @for (btn of configModel().customHeaderActions; track btn) {\n                        <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n                    }\n                </div>\n            </div>\n        }\n\n        @if (configModel().canSearch) {\n            <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [config]=\"configModel()\"\n                [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table -->\n            <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n                [class.pixel-sized]=\"isWidthInPixels\">\n                <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n                    <tr>\n                        @if (configModel().hasCheckboxColumn) {\n                            <th class=\"checkbox-selector\">\n                                <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n                                    [(isChecked)]=\"isMainCheckboxChecked\"\n                                    [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n                            </th>\n                        }\n\n                        @for (col of columns(); track col) {\n                            <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n                                {{ textService.getText(col.title) }}\n                                @if (canSortColumn(col.name)) {\n                                    <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\"\n                                        colorClass=\"text-body-tertiary\" [tablerIconSize]=\"16\"\n                                        (click)=\"sortByColumn(col.name)\">\n                                    </upd-icon>\n                                }\n                            </th>\n                        }\n\n                        @if (!!pendingWidthColClass) {\n                            <th [ngClass]=\"pendingWidthColClass\"></th>\n                        }\n\n                        @if (configModel().customActions.length > 0) {\n                            <th class=\"custom-actions\"></th>\n                        }\n                    </tr>\n                </thead>\n\n                <tbody>\n                    @if (currentSearchRequestService.isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td class=\"checkbox-selector\">\n                                        <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n                                            [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n                                    </td>\n                                }\n\n                                @for (col of columns(); track col) {\n                                    <td [style.width.px]=\"col.pixelsSize\">\n                                        <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n                                    </td>\n                                }\n\n                                @if (!!pendingWidthColClass) {\n                                    <td></td>\n                                }\n\n                                @if (configModel().customActions.length > 0) {\n                                    <td style=\"overflow: unset\">\n                                        <div class=\"grow-left d-flex\">\n                                            @if (configModel().customActions.length > 1) {\n                                                <upd-button customClasses=\"ca-item\" [iconModel]=\"{tablerIcon:'dots'}\"\n                                                    [isIcon]=\"true\" [isLink]=\"true\" size=\"small\"></upd-button>\n\n                                                <div class=\"ca-dropdown-content rounded shadow-sm\">\n                                                    @for (btn of configModel().customActions; track btn) {\n                                                        <upd-button\n                                                            [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n                                                    }\n                                                </div>\n                                            } @else {\n                                                <upd-button\n                                                    [model]=\"adaptCustomAction(configModel().customActions[0], record)\">\n                                                </upd-button>\n                                            }\n                                        </div>\n                                    </td>\n                                }\n                            </tr>\n                        } @empty {\n                            <tr>\n                                <td [colSpan]=\"numberOfColumns\">\n                                    <div class=\"empty\">\n                                        <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n                                        <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n                                    </div>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </tbody>\n            </table>\n        </div>\n        <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n            [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n            [(currentPage)]=\"currentPage\" [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n                    updPopover=\"{{ t('CurrentSavedView') }}\" [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n                    updPopover=\"{{ t('HiddenColumnsTooltip') }}\" [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!currentSearchRequestService.hasChanges()\"\n                    (clicked)=\"openSaveSearchModal()\" updPopover=\"{{ t('SaveCurrentView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\"\n                    [shouldCloseOnOutsideClick]=\"true\" (isOpenChange)=\"isSavedViewsDropdownOpen = $event\"\n                    [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.custom-actions{width:56px!important}.ca-item{transition:all,.5s}.ca-item:hover{width:400px}.grow-left{direction:rtl}.ca-dropdown-content{display:none;background:var(--upd-secondary-lt)}.grow-left:hover .ca-dropdown-content{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "stopPropagation"], outputs: ["clicked"] }, { kind: "component", type: i5$1.PaginatorComponent, selector: "upd-paginator", inputs: ["startPageIndex", "currentPage", "wrapperClasses", "availablePageSizes", "defaultInitPageSize", "pageSize", "shouldDisplayFirstIcon", "shouldDisplayFirstText", "shouldDisplayPreviousIcon", "shouldDisplayPreviousText", "shouldDisplayNextIcon", "shouldDisplayNextText", "shouldDisplayLastIcon", "shouldDisplayLastText", "previousDescription", "nextDescription", "totalRecords"], outputs: ["changed", "currentPageChange", "pageSizeChange"] }, { kind: "component", type: i6.CheckboxComponent, selector: "upd-checkbox", inputs: ["wrapperClasses", "value", "customClasses", "isChecked", "isInline", "isSwitch", "isIndeterminate"], outputs: ["changed", "isCheckedChange", "isIndeterminateChange"] }, { kind: "component", type: i7.DropdownComponent, selector: "upd-dropdown", inputs: ["items", "header", "isOpen", "shouldCloseOnOutsideClick", "arrowType", "wrapperClasses", "elementsExcludedFromOutsideClick", "minHeight", "maxHeight", "minWidth", "maxWidth", "dropdownReference", "dropdownReferencePosition", "textOverflowStrategy"], outputs: ["isOpenChange", "selectedItem", "checkboxChanged"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[updPopover]", inputs: ["updPopover", "updPopoverTitle", "updPopoverTitleTemplate", "updPopoverTemplate", "updPopoverPlacement", "updPopoverCustomClasses", "updPopoverActAsTooltip"] }, { kind: "component", type: SearchSectionComponent, selector: "upd-search-section", inputs: ["columns", "config", "actionsTpl"] }, { kind: "directive", type: TableColumnDirective, selector: "[updTableColumn]", inputs: ["record", "config"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'upd-table', template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().canSearch) {\n            <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [isSearching]=\"isSearching()\"\n                [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n                [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table - complex... -->\n            <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n                [class.pixel-sized]=\"isWidthInPixels\">\n                <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n                <tr>\n                    @if (configModel().hasCheckboxColumn) {\n                        <th class=\"checkbox-selector\">\n                            <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n                                [(isChecked)]=\"isMainCheckboxChecked\" [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n                        </th>\n                    }\n\n                    @for (col of columns(); track col) {\n                        <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n                            {{ textService.getText(col.title) }}\n                            @if (canSortColumn(col.name)) {\n                                <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\" colorClass=\"text-body-tertiary\"\n                                    [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n                                </upd-icon>\n                            }\n                        </th>\n                    }\n\n                    @if (!!pendingWidthColClass) {\n                        <th [ngClass]=\"pendingWidthColClass\"></th>\n                    }\n                </tr>\n                </thead>\n\n                <tbody>\n                    @if (isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td>\n                                        <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n                                            [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n                                    </td>\n                                }\n\n                                @for (col of columns(); track col) {\n                                    <td>\n                                        <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n                                    </td>\n                                }\n\n                                @if (!!pendingWidthColClass) {\n                                    <td></td>\n                                }\n                            </tr>\n                        } @empty {\n                            <tr>\n                                <td [colSpan]=\"numberOfColumns\">\n                                    <div class=\"empty\">\n                                        <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n                                        <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n                                    </div>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </tbody>\n            </table>\n        </div>\n        <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n            [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\" [(currentPage)]=\"currentPage\"\n            [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\" updPopover=\"{{ t('CurrentSavedView') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\" updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n                    updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                    (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ standalone: false, selector: 'upd-table', providers: [CurrentSearchRequestService], template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().customHeaderActions.length > 0) {\n            <div class=\"card-body py-3 d-flex flex-column gap-2\">\n                <div class=\"ms-auto d-flex gap-2\">\n                    @for (btn of configModel().customHeaderActions; track btn) {\n                        <upd-button customClasses=\"gap-2\" [model]=\"btn\"></upd-button>\n                    }\n                </div>\n            </div>\n        }\n\n        @if (configModel().canSearch) {\n            <upd-search-section [actionsTpl]=\"!configModel().title ? actionsTpl : undefined\" [config]=\"configModel()\"\n                [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table -->\n            <table class=\"table card-table table-vcenter table-nowrap\" [class.fixed]=\"hasWidth\"\n                [class.pixel-sized]=\"isWidthInPixels\">\n                <thead [class.sticky-top]=\"configModel().hasStickyHeader\">\n                    <tr>\n                        @if (configModel().hasCheckboxColumn) {\n                            <th class=\"checkbox-selector\">\n                                <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleAllSelection($event)\"\n                                    [(isChecked)]=\"isMainCheckboxChecked\"\n                                    [(isIndeterminate)]=\"isMainCheckboxIndeterminate\"></upd-checkbox>\n                            </th>\n                        }\n\n                        @for (col of columns(); track col) {\n                            <th [ngClass]=\"col.widthClass\" [style.width.px]=\"col.pixelsSize\">\n                                {{ textService.getText(col.title) }}\n                                @if (canSortColumn(col.name)) {\n                                    <upd-icon [tablerIcon]=\"getSortingIcon(col.name)\" tablerIconWeight=\"bold\"\n                                        colorClass=\"text-body-tertiary\" [tablerIconSize]=\"16\"\n                                        (click)=\"sortByColumn(col.name)\">\n                                    </upd-icon>\n                                }\n                            </th>\n                        }\n\n                        @if (!!pendingWidthColClass) {\n                            <th [ngClass]=\"pendingWidthColClass\"></th>\n                        }\n\n                        @if (configModel().customActions.length > 0) {\n                            <th class=\"custom-actions\"></th>\n                        }\n                    </tr>\n                </thead>\n\n                <tbody>\n                    @if (currentSearchRequestService.isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td class=\"checkbox-selector\">\n                                        <upd-checkbox customClasses=\"m-0 ps-0\" (changed)=\"toggleItemSelection(record)\"\n                                            [isChecked]=\"selectionModel().isSelected(record)\"></upd-checkbox>\n                                    </td>\n                                }\n\n                                @for (col of columns(); track col) {\n                                    <td [style.width.px]=\"col.pixelsSize\">\n                                        <ng-container updTableColumn [record]=\"record\" [config]=\"col\"></ng-container>\n                                    </td>\n                                }\n\n                                @if (!!pendingWidthColClass) {\n                                    <td></td>\n                                }\n\n                                @if (configModel().customActions.length > 0) {\n                                    <td style=\"overflow: unset\">\n                                        <div class=\"grow-left d-flex\">\n                                            @if (configModel().customActions.length > 1) {\n                                                <upd-button customClasses=\"ca-item\" [iconModel]=\"{tablerIcon:'dots'}\"\n                                                    [isIcon]=\"true\" [isLink]=\"true\" size=\"small\"></upd-button>\n\n                                                <div class=\"ca-dropdown-content rounded shadow-sm\">\n                                                    @for (btn of configModel().customActions; track btn) {\n                                                        <upd-button\n                                                            [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n                                                    }\n                                                </div>\n                                            } @else {\n                                                <upd-button\n                                                    [model]=\"adaptCustomAction(configModel().customActions[0], record)\">\n                                                </upd-button>\n                                            }\n                                        </div>\n                                    </td>\n                                }\n                            </tr>\n                        } @empty {\n                            <tr>\n                                <td [colSpan]=\"numberOfColumns\">\n                                    <div class=\"empty\">\n                                        <p class=\"empty-title\">{{ t('NoRecordsFoundTitle') }}</p>\n                                        <p class=\"empty-subtitle text-secondary\">{{ t('NoRecordsFoundSubtitle') }}</p>\n                                    </div>\n                                </td>\n                            </tr>\n                        }\n                    }\n                </tbody>\n            </table>\n        </div>\n        <upd-paginator wrapperClasses=\"card-footer\" [shouldDisplayPreviousText]=\"false\" [shouldDisplayNextText]=\"false\"\n            [(pageSize)]=\"pageSize\" [shouldDisplayFirstText]=\"false\" [shouldDisplayLastText]=\"false\"\n            [(currentPage)]=\"currentPage\" [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n                    updPopover=\"{{ t('CurrentSavedView') }}\" [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n                    updPopover=\"{{ t('HiddenColumnsTooltip') }}\" [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!currentSearchRequestService.hasChanges()\"\n                    (clicked)=\"openSaveSearchModal()\" updPopover=\"{{ t('SaveCurrentView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\"\n                    [shouldCloseOnOutsideClick]=\"true\" (isOpenChange)=\"isSavedViewsDropdownOpen = $event\"\n                    [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.custom-actions{width:56px!important}.ca-item{transition:all,.5s}.ca-item:hover{width:400px}.grow-left{direction:rtl}.ca-dropdown-content{display:none;background:var(--upd-secondary-lt)}.grow-left:hover .ca-dropdown-content{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { savedViewsRef: [{ type: i0.ViewChild, args: ['savedViewsBtn', { ...{ read: ElementRef }, isSignal: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }, { type: i0.Output, args: ["configChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }] } });
 
 var UpDevs$1 = {
 	Table: {
@@ -1356,10 +1687,10 @@ class FiltersOperandsStore extends BaseStore {
     load(fieldType) {
         return this._requestService.makeGet(this.getRequestModel(fieldType.toString()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FiltersOperandsStore, deps: [{ token: UpdTableConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FiltersOperandsStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FiltersOperandsStore, deps: [{ token: UpdTableConfigService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FiltersOperandsStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FiltersOperandsStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FiltersOperandsStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: UpdTableConfigService }] });
 
@@ -1546,6 +1877,16 @@ class GuidFilterOperandsListModel {
     }
 }
 
+class SelectFilterOperandsListModel {
+    static { this.options = {
+        [FilterOperandEnum.Equals]: FilterOperandsListConfig.options[FilterOperandEnum.Equals],
+        [FilterOperandEnum.NotEquals]: FilterOperandsListConfig.options[FilterOperandEnum.NotEquals]
+    }; }
+    static get optionsAsList() {
+        return (Object.values(this.options) || []);
+    }
+}
+
 class DefaultFiltersOperandsService extends FiltersOperandsService {
     get isLoaded() {
         return this._isLoaded;
@@ -1558,26 +1899,29 @@ class DefaultFiltersOperandsService extends FiltersOperandsService {
         this.cachedData = {};
         if (!!this.configService.config.urlToLoadOperandsFromServer) {
             forkJoin({
-                guidOps: this.filterOperandsStore.load(DataTypeEnum.Guid),
-                stringOps: this.filterOperandsStore.load(DataTypeEnum.String),
-                numberOps: this.filterOperandsStore.load(DataTypeEnum.Number),
-                dateOps: this.filterOperandsStore.load(DataTypeEnum.Date),
-                booleanOps: this.filterOperandsStore.load(DataTypeEnum.Boolean)
+                guidOps: this.filterOperandsStore.load(FilterTypeEnum.Guid),
+                stringOps: this.filterOperandsStore.load(FilterTypeEnum.Text),
+                numberOps: this.filterOperandsStore.load(FilterTypeEnum.Number),
+                dateOps: this.filterOperandsStore.load(FilterTypeEnum.Date),
+                booleanOps: this.filterOperandsStore.load(FilterTypeEnum.Boolean),
+                selectOps: this.filterOperandsStore.load(FilterTypeEnum.Select)
             }).subscribe(resp => {
-                this.cachedData[DataTypeEnum.Guid] = resp.guidOps;
-                this.cachedData[DataTypeEnum.String] = resp.stringOps;
-                this.cachedData[DataTypeEnum.Number] = resp.numberOps;
-                this.cachedData[DataTypeEnum.Date] = resp.dateOps;
-                this.cachedData[DataTypeEnum.Boolean] = resp.booleanOps;
+                this.cachedData[FilterTypeEnum.Guid] = resp.guidOps;
+                this.cachedData[FilterTypeEnum.Text] = resp.stringOps;
+                this.cachedData[FilterTypeEnum.Number] = resp.numberOps;
+                this.cachedData[FilterTypeEnum.Date] = resp.dateOps;
+                this.cachedData[FilterTypeEnum.Boolean] = resp.booleanOps;
+                this.cachedData[FilterTypeEnum.Select] = resp.selectOps;
                 this._isLoaded = true;
             });
         }
         else {
-            this.cachedData[DataTypeEnum.Guid] = GuidFilterOperandsListModel.optionsAsList;
-            this.cachedData[DataTypeEnum.String] = StringFilterOperandsListModel.optionsAsList;
-            this.cachedData[DataTypeEnum.Number] = NumberFilterOperandsListModel.optionsAsList;
-            this.cachedData[DataTypeEnum.Date] = DateFilterOperandsListModel.optionsAsList;
-            this.cachedData[DataTypeEnum.Boolean] = BooleanFilterOperandsListModel.optionsAsList;
+            this.cachedData[FilterTypeEnum.Guid] = GuidFilterOperandsListModel.optionsAsList;
+            this.cachedData[FilterTypeEnum.Text] = StringFilterOperandsListModel.optionsAsList;
+            this.cachedData[FilterTypeEnum.Number] = NumberFilterOperandsListModel.optionsAsList;
+            this.cachedData[FilterTypeEnum.Date] = DateFilterOperandsListModel.optionsAsList;
+            this.cachedData[FilterTypeEnum.Boolean] = BooleanFilterOperandsListModel.optionsAsList;
+            this.cachedData[FilterTypeEnum.Select] = SelectFilterOperandsListModel.optionsAsList;
             this._isLoaded = true;
         }
     }
@@ -1587,15 +1931,16 @@ class DefaultFiltersOperandsService extends FiltersOperandsService {
     getAllOperands() {
         return this.cachedData;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DefaultFiltersOperandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DefaultFiltersOperandsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultFiltersOperandsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultFiltersOperandsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: DefaultFiltersOperandsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DefaultFiltersOperandsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class UpdTableModule {
     constructor(translocoService) {
+        translocoService.setFallbackLangForMissingTranslation({ fallbackLang: 'en' });
         translocoService.setTranslation(en$1, 'en');
         translocoService.setTranslation(pt$1, 'pt');
     }
@@ -1618,8 +1963,8 @@ class UpdTableModule {
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: UpdTableModule, declarations: [TableComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdTableModule, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: UpdTableModule, declarations: [TableComponent,
             SearchSectionComponent,
             FilterRowComponent,
             TableColumnDirective,
@@ -1644,7 +1989,7 @@ class UpdTableModule {
             UpdBadgeModule,
             UpdPopoverModule], exports: [TableComponent,
             TableColumnDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdTableModule, providers: [
             UpdTableConfigService,
             FiltersOperandsStore,
             SavedViewsStorage
@@ -1663,7 +2008,7 @@ class UpdTableModule {
             UpdBadgeModule,
             UpdPopoverModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: UpdTableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1711,5 +2056,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseColumnModel, BooleanColumnModel, ColumnTypeEnum, DateTimeColumnModel, FiltersOperandsService, GuidColumnModel, ImageColumnModel, NumberColumnModel, TableColumnDirective, TableComponent, TextColumnModel, UpdTableModule };
+export { BaseColumn, BaseColumnModel, BooleanColumnModel, ColumnTypeEnum, CustomColumnModel, DateTimeColumnModel, FiltersOperandsService, GuidColumnModel, ImageColumnModel, NumberColumnModel, TableColumnDirective, TableComponent, TextColumnModel, UpdTableModule };
 //# sourceMappingURL=updevs-components-table.mjs.map