@updevs/components 1.0.0-alpha.98 → 1.0.0-beta.1

package/fesm2022/updevs-components-table.mjs

@@ -123,11 +123,12 @@ class BaseColumn {
             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 }); }
+    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: "18.1.0", ngImport: i0, type: BaseColumn, decorators: [{
-            type: Directive
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: BaseColumn, decorators: [{
+            type: Directive,
+            args: [{ standalone: false }]
         }] });
 
 class BaseColumnModel {
@@ -202,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 {
@@ -232,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(() => {
@@ -285,15 +286,16 @@ class TableColumnDirective {
                 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) {
@@ -395,7 +397,6 @@ class TableConfigModel {
         this.data = [];
         this.preSelectedItems = [];
         this.searchInputDebounceTime = 300;
-        this.shouldLoadFilterFieldsFromServer = false;
         /**
          * Actions added to each record row as a group of buttons.
          */
@@ -424,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 },
@@ -434,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 },
@@ -442,14 +443,14 @@ 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 BaseByUserSignalStorage {
@@ -497,17 +498,17 @@ class SavedViewsStorage extends BaseByUserSignalStorage {
             && sv.name?.toLowerCase() === name?.toLowerCase()
             && sv.id !== this.lastStateKey);
     }
-    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) => {
@@ -559,13 +560,13 @@ 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", "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"] }] }); }
+    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.
@@ -574,10 +575,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
  */
 class CurrentSearchRequestService {
     constructor() {
-        this._searchRequest = signal({});
-        this._isSearching = signal(false);
-        this._hasChanges = signal(false);
-        this._filterFields = signal([]);
+        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
          */
@@ -590,10 +590,6 @@ class CurrentSearchRequestService {
          * Read-only signal indicating if the search request has changed from default
          */
         this.hasChanges = this._hasChanges.asReadonly();
-        /**
-         * Read-only signal for the filter fields.
-         */
-        this.filterFields = this._filterFields.asReadonly();
         /**
          * Subject to trigger search operations
          */
@@ -601,39 +597,39 @@ class CurrentSearchRequestService {
         /**
          * Count of active filters (non-hidden)
          */
-        this.activeFilterCount = computed(() => this.searchRequest().filters?.filter(f => !f.isHidden).length || 0);
+        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);
+        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);
+        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);
+        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);
+        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);
+        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());
+        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);
+        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);
+        this.hasPagination = computed(() => !!this.searchRequest().pageSize && this.searchRequest().pageSize > 0, ...(ngDevMode ? [{ debugName: "hasPagination" }] : []));
     }
     /**
      * Updates the entire search request
@@ -667,13 +663,6 @@ class CurrentSearchRequestService {
     setSearching(isSearching) {
         this._isSearching.set(isSearching);
     }
-    /**
-     * Sets the filter fields
-     * @param fields Filter fields
-     */
-    setFilterFields(fields) {
-        this._filterFields.set(fields);
-    }
     /**
      * Resets the search request to default state
      */
@@ -738,21 +727,7 @@ class CurrentSearchRequestService {
     updateFilterByIndex(index, newData) {
         const currentFilters = this.searchRequest().filters || [];
         if (index >= 0 && index < currentFilters.length) {
-            this.patchSearchRequest({
-                filters: currentFilters.map((f, i) => {
-                    if (i !== index) {
-                        return f;
-                    }
-                    // Preserve type/filterType when merging
-                    const existingType = f.type || f.filterType;
-                    const merged = { ...f, ...newData };
-                    // Ensure type is preserved if not explicitly set in newData
-                    if (!newData.type && !!existingType) {
-                        merged.type = existingType;
-                    }
-                    return merged;
-                })
-            });
+            this.patchSearchRequest({ filters: currentFilters.map((f, i) => i === index ? { ...f, ...newData } : f) });
         }
     }
     /**
@@ -837,64 +812,22 @@ class CurrentSearchRequestService {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CurrentSearchRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CurrentSearchRequestService }); }
+    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: "18.1.0", ngImport: i0, type: CurrentSearchRequestService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: CurrentSearchRequestService, decorators: [{
             type: Injectable
         }] });
 
-/**
- * Table constants.
- */
-class TableConstants {
-    /**
-     * Key to inject the default configuration.
-     */
-    static { this.defaultOptionsKey = 'upd-table-default-options'; }
-    /**
-     * Injection token for the default configuration.
-     */
-    static { this.defaultOptionsInjectionToken = new InjectionToken(TableConstants.defaultOptionsKey); }
-}
-
-class UpdTableConfigModel {
-    constructor(init) {
-        this.shouldLoadFieldsFromServer = false;
-        if (!!init) {
-            Object.assign(this, init);
-        }
-    }
-}
-
-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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UpdTableConfigService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TableConstants.defaultOptionsInjectionToken]
-                }] }] });
-
 class FilterTools {
     static convertToFilterItem(filters, operands) {
-        return filters.map(f => {
-            const filterType = f.type || f.filterType;
-            const operandsList = filterType ? operands[filterType] : undefined;
-            const operandConfig = operandsList ? operandsList.find(op => op.operand === f.operand) : undefined;
-            return {
-                name: f.column,
-                value: f.value,
-                operandConfig,
-                isHidden: f.isHidden,
-                type: filterType
-            };
-        });
+        return filters.map(f => ({
+            name: f.column,
+            value: f.value,
+            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, filtersConfigs = [], columns = []) {
         return filters.map(af => {
@@ -955,25 +888,63 @@ class FilterTools {
     }
 }
 
+/**
+ * Table constants.
+ */
+class TableConstants {
+    /**
+     * Key to inject the default configuration.
+     */
+    static { this.defaultOptionsKey = 'upd-table-default-options'; }
+    /**
+     * Injection token for the default configuration.
+     */
+    static { this.defaultOptionsInjectionToken = new InjectionToken(TableConstants.defaultOptionsKey); }
+}
+
+class UpdTableConfigModel {
+    constructor(init) {
+        this.shouldLoadFieldsFromServer = false;
+        if (!!init) {
+            Object.assign(this, init);
+        }
+    }
+}
+
+class UpdTableConfigService {
+    constructor(layoutConfig) {
+        this.config = new UpdTableConfigModel(layoutConfig);
+    }
+    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: "21.1.4", ngImport: i0, type: UpdTableConfigService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [TableConstants.defaultOptionsInjectionToken]
+                }] }] });
+
 class FilterRowComponent extends BaseComponent {
     constructor() {
         super(...arguments);
         this.wrapperClasses = 'd-flex gap-2';
         this.removed = new EventEmitter();
         this.FilterTypeEnum = FilterTypeEnum;
-        this.config = input.required();
-        this.rowIndex = input.required();
-        this.isDisabled = input.required();
-        this.filterFields = computed(() => this.config().shouldLoadFilterFieldsFromServer ? this.currentSearchRequestService.filterFields() : this.config().filterFields);
-        this.columns = computed(() => this.config().columns);
-        this.currentFilter = input();
-        this.currentField = signal(undefined);
-        this.currentOperand = signal(undefined);
-        this.fieldsOptions = signal([]);
-        this.comparisonOperatorOptions = signal([]);
-        this.fieldAllowedValues = signal([]);
-        this.isValueSectionEnabled = signal(true);
+        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);
@@ -1002,11 +973,19 @@ class FilterRowComponent extends BaseComponent {
         if (!!this.filterFields() && this.filterFields().length > 0) {
             this.fieldsOptions.set(this.filterFields().map(f => ({
                 value: f.name,
-                text: f.description,
+                text: this.textService.getText(f.label),
                 objectData: f.type
             })));
         }
-        // Priority 2: Fallback to columns
+        // 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,
@@ -1056,33 +1035,31 @@ class FilterRowComponent extends BaseComponent {
         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: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: true, 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"] }] }); }
+    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    [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>" }]
+            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.columns = input.required();
-        this.config = input.required();
-        this.actionsTpl = input();
-        this.activeFilters = computed(() => FilterTools.convertToFilterItem(this.currentSearchRequestService.searchRequest().filters?.filter(af => !af.isHidden) || [], this.filtersOperandsService.getAllOperands()));
-        this.isFilterSectionOpen = signal(false);
-        this.canApplyFilters = computed(() => this.activeFilters().length > 0 && this.activeFilters().every(af => {
-            const valid = !af.isHidden && !!af.name && !!af.operandConfig?.operand && (!af.operandConfig?.requiresValue || !!af.value);
-            return valid;
-        }));
-        this.canPerformActions = computed(() => this.canApplyFilters() && !this.currentSearchRequestService.isSearching());
+        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.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,
@@ -1090,8 +1067,8 @@ class SearchSectionComponent extends BaseComponent {
                 bgColor: 'primary-lt',
                 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);
@@ -1129,16 +1106,16 @@ class SearchSectionComponent extends BaseComponent {
     addEmptyFilterRow() {
         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: { 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 [currentFilter]=\"row\" [config]=\"config()\" [rowIndex]=\"i\" (removed)=\"onRowRemoved()\"\n                [isDisabled]=\"currentSearchRequestService.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()\"\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: ["config", "rowIndex", "isDisabled", "currentFilter"], outputs: ["removed"] }] }); }
+    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}\"\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 [currentFilter]=\"row\" [config]=\"config()\" [rowIndex]=\"i\" (removed)=\"onRowRemoved()\"\n                [isDisabled]=\"currentSearchRequestService.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()\"\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>" }]
+            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 {
@@ -1172,41 +1149,40 @@ class TableComponent extends BaseComponent {
     }
     constructor() {
         super();
-        this.savedViewsRef = viewChild('savedViewsBtn', { read: ElementRef });
-        this.config = model.required();
-        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.currentPage = model(1);
-        this.pageSize = model(0);
-        this.totalRecords = signal(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.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);
         this.modalService = inject(ModalService);
         this.modalAlertService = inject(ModalAlertService);
-        this.configService = inject(UpdTableConfigService);
         effect(() => {
             if (this.data().length > 0 && this.configModel().data.length > 0) {
                 this.setupPreSelected();
@@ -1246,9 +1222,6 @@ class TableComponent extends BaseComponent {
             this.shouldForceSearch = true;
             this.currentSearchRequestService.searchRequestSubject.next({});
         }
-        if (this.configService.config.shouldLoadFieldsFromServer || this.config().shouldLoadFilterFieldsFromServer) {
-            this.store.getFilterableFields().subscribe(fields => this.currentSearchRequestService.setFilterFields(fields));
-        }
         this.updateColumns(this.configModel().columns);
         this.addSubscriptions(searchSubjectSub, serverResponseSub);
     }
@@ -1535,13 +1508,13 @@ class TableComponent extends BaseComponent {
             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 }, 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"] }] }); }
+    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', 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: () => [] });
+            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: {
@@ -1714,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 }] });
 
@@ -1958,10 +1931,10 @@ 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: () => [] });
 
@@ -1990,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,
@@ -2016,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
@@ -2035,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: [