@updevs/components 1.0.0-alpha.92 → 1.0.0-alpha.94

package/fesm2022/updevs-components-table.mjs

@@ -549,7 +549,7 @@ class SaveSearchComponent extends BaseModal {
         this.modalRef().close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SaveSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.0", type: SaveSearchComponent, selector: "upd-save-search", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formGroup: "formGroupChange" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table.SaveSearch'\">\n    <div class=\"modal-header\">\n        <h5 class=\"modal-title\">{{ t('Title') }}</h5>\n    </div>\n    <div class=\"modal-body py-4\">\n        <upd-form [rows]=\"formRows\" [hasActionsSection]=\"false\" [(formGroup)]=\"formGroup\"></upd-form>\n    </div>\n    <div class=\"modal-footer\">\n        <upd-button colorStyle=\"secondary\" [isLink]=\"true\" (clicked)=\"cancel()\">\n            {{ t('Cancel') }}\n        </upd-button>\n        <upd-button colorStyle=\"primary\" [iconModel]=\"{tablerIcon:'device-floppy'}\" (clicked)=\"save()\" [isDisabled]=\"!formGroup().valid\">\n            {{ t('Save') }}\n        </upd-button>\n    </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i3$1.FormComponent, selector: "upd-form", inputs: ["rows", "layout", "title", "hasActionsSection", "isCard", "isDisabled", "isLoading", "isSaving", "formData", "formGroup"], outputs: ["initialized", "dataLoaded", "submitted", "formDataChange", "formGroupChange"] }] }); }
+    static { this.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SaveSearchComponent, decorators: [{
             type: Component,
@@ -738,7 +738,7 @@ class FilterRowComponent extends BaseComponent {
         this.removed.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: FilterRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FilterRowComponent, selector: "upd-filter-row", inputs: { activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: true, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", activeFilters: "activeFiltersChange" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, ngImport: i0, template: "<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldsOptions()\" (selectedItem)=\"onSelectField($event)\"\n    [value]=\"selectedField\">\n</upd-select>\n<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"comparisonOperatorOptions()\" (selectedItem)=\"onSelectOperand($event)\"\n    [value]=\"selectedOperand\">\n</upd-select>\n\n@if (isValueSectionEnabled()) {\n    @switch (fieldType) {\n        @case (DataTypeEnum.Number) {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"number\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n        @case (DataTypeEnum.Date) {\n\n        }\n        @default {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"text\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n    }\n} @else {\n    <div class=\"w-100\">\n        <input type=\"text\" class=\"form-control h-100\" disabled>\n    </div>\n}\n\n<upd-button class=\"flex-shrink-1\" colorStyle=\"danger\" [isDisabled]=\"isDisabled()\" [isOutline]=\"true\" [isIcon]=\"true\"\n    [iconModel]=\"{tablerIcon:'x'}\" (clicked)=\"removeFilterItem()\"></upd-button>", styles: [""], dependencies: [{ kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: FilterRowComponent, selector: "upd-filter-row", inputs: { activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: true, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed", activeFilters: "activeFiltersChange" }, host: { properties: { "class": "this.wrapperClasses" } }, usesInheritance: true, ngImport: i0, template: "<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"fieldsOptions()\" (selectedItem)=\"onSelectField($event)\"\n    [value]=\"selectedField\">\n</upd-select>\n<upd-select class=\"w-100\" [isDisabled]=\"isDisabled()\" [items]=\"comparisonOperatorOptions()\" (selectedItem)=\"onSelectOperand($event)\"\n    [value]=\"selectedOperand\">\n</upd-select>\n\n@if (isValueSectionEnabled()) {\n    @switch (fieldType) {\n        @case (DataTypeEnum.Number) {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"number\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n        @case (DataTypeEnum.Date) {\n\n        }\n        @default {\n            <upd-input wrapperClasses=\"w-100\" customClasses=\"h-100\" type=\"text\" (valueChange)=\"updateValue($event)\"\n                [value]=\"selectedValue\"></upd-input>\n        }\n    }\n} @else {\n    <div class=\"w-100\">\n        <input type=\"text\" class=\"form-control h-100\" disabled>\n    </div>\n}\n\n<upd-button class=\"flex-shrink-1\" colorStyle=\"danger\" [isDisabled]=\"isDisabled()\" [isOutline]=\"true\" [isIcon]=\"true\"\n    [iconModel]=\"{tablerIcon:'x'}\" (clicked)=\"removeFilterItem()\"></upd-button>", 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: [{
             type: Component,
@@ -765,21 +765,22 @@ class SearchSectionComponent extends BaseComponent {
         this.isFilterSectionOpen = signal(false);
         this.canApplyFilters = computed(() => this.activeFilters().length > 0
             && this.activeFilters().every(af => !af.isHidden && !!af.name && !!af.operandConfig?.operand && (!af.operandConfig?.requiresValue || !!af.value)));
+        this.visibleFiltersCount = computed(() => this.searchRequest().filters?.filter(af => !af.isHidden).length || 0);
         this.canPerformActions = computed(() => this.canApplyFilters() && !this.isSearching());
-        this.badgeConfig = computed(() => (this.searchRequest().filters?.length || 0) > 0
+        this.badgeConfig = computed(() => this.visibleFiltersCount() > 0
             ? ({
                 isNotification: true,
                 isPill: true,
                 bgColor: 'primary-lt',
-                text: { text: this.searchRequest().filters.length.toString(), isTranslated: true }
+                text: { text: this.visibleFiltersCount().toString(), isTranslated: true }
             })
             : undefined);
         this.filterSectionBtnColor = computed(() => this.isFilterSectionOpen() ? 'primary' : undefined);
         this.searchSubject = new Subject();
         this.filtersOperandsService = inject(FiltersOperandsService);
         effect(() => {
-            if ((this.searchRequest().filters?.length || 0) > 0) {
-                this.activeFilters.set([...FilterTools.convertToFilterItem(this.searchRequest().filters || [], this.filtersOperandsService.getAllOperands())]);
+            if (this.visibleFiltersCount() > 0) {
+                this.activeFilters.set([...FilterTools.convertToFilterItem(this.searchRequest().filters?.filter(af => !af.isHidden) || [], this.filtersOperandsService.getAllOperands())]);
             }
             else {
                 this.activeFilters.set([]);
@@ -821,7 +822,7 @@ class SearchSectionComponent extends BaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SearchSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SearchSectionComponent, selector: "upd-search-section", inputs: { searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: true, transformFunction: null }, hasChanges: { classPropertyName: "hasChanges", publicName: "hasChanges", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isSearching: { classPropertyName: "isSearching", publicName: "isSearching", isSignal: true, isRequired: true, transformFunction: null }, searchRequestSubject: { classPropertyName: "searchRequestSubject", publicName: "searchRequestSubject", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, actionsTpl: { classPropertyName: "actionsTpl", publicName: "actionsTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchRequest: "searchRequestChange", hasChanges: "hasChangesChange" }, host: { properties: { "class": "this.wrapperClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    @if (!!actionsTpl()) {\n        <ng-template [ngTemplateOutlet]=\"actionsTpl()!\"></ng-template>\n    }\n\n    <div class=\"d-flex align-items-center gap-2\">\n        <upd-input wrapperClasses=\"w-100\" [placeholder]=\"{text:'UpDevs.Table.Search', isTranslated:false}\" [isAppendButton]=\"true\"\n            (valueChange)=\"searchSubject.next($event)\" [value]=\"searchRequest().description\">\n            <ng-template updInputAppend>\n                <upd-button [isIcon]=\"true\" [colorStyle]=\"filterSectionBtnColor()\" (clicked)=\"toggleFilterSection()\"\n                    [badgeConfig]=\"badgeConfig()\">\n                    <upd-icon [tablerIcon]=\"isFilterSectionOpen() ? 'filter-up' : 'filter-down'\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            </ng-template>\n        </upd-input>\n    </div>\n\n    @if (isFilterSectionOpen()) {\n        @for (row of activeFilters(); track row; let i = $index) {\n            <upd-filter-row [store]=\"config().store\" [currentFilter]=\"row\" [(activeFilters)]=\"activeFilters\" [columns]=\"columns()\"\n                [rowIndex]=\"i\" (removed)=\"onRowRemoved()\" [isDisabled]=\"isSearching()\">\n            </upd-filter-row>\n        }\n\n        <div class=\"ms-auto d-flex gap-2\">\n            <upd-button customClasses=\"gap-2\" colorStyle=\"primary\" [isOutline]=\"true\" (clicked)=\"addEmptyFilterRow()\"\n                [isDisabled]=\"!canPerformActions()\">\n                <upd-icon tablerIcon=\"plus\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('AddNewFilter') }}\n            </upd-button>\n            <upd-button customClasses=\"gap-2\" colorStyle=\"success\" [isDisabled]=\"!canPerformActions()\" (clicked)=\"search()\">\n                <upd-icon tablerIcon=\"checks\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('ApplyFilters') }}\n            </upd-button>\n        </div>\n    }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title"], outputs: ["clicked"] }, { kind: "component", type: i5.InputComponent, selector: "upd-input", inputs: ["type", "mask", "maskConfig", "value", "size", "customClasses", "wrapperClasses", "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: ["activeFilters", "rowIndex", "columns", "isDisabled", "store", "currentFilter"], outputs: ["removed", "activeFiltersChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: SearchSectionComponent, selector: "upd-search-section", inputs: { searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: true, transformFunction: null }, hasChanges: { classPropertyName: "hasChanges", publicName: "hasChanges", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, isSearching: { classPropertyName: "isSearching", publicName: "isSearching", isSignal: true, isRequired: true, transformFunction: null }, searchRequestSubject: { classPropertyName: "searchRequestSubject", publicName: "searchRequestSubject", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, actionsTpl: { classPropertyName: "actionsTpl", publicName: "actionsTpl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchRequest: "searchRequestChange", hasChanges: "hasChangesChange" }, host: { properties: { "class": "this.wrapperClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    @if (!!actionsTpl()) {\n        <ng-template [ngTemplateOutlet]=\"actionsTpl()!\"></ng-template>\n    }\n\n    <div class=\"d-flex align-items-center gap-2\">\n        <upd-input wrapperClasses=\"w-100\" [placeholder]=\"{text:'UpDevs.Table.Search', isTranslated:false}\" [isAppendButton]=\"true\"\n            (valueChange)=\"searchSubject.next($event)\" [value]=\"searchRequest().description\">\n            <ng-template updInputAppend>\n                <upd-button [isIcon]=\"true\" [colorStyle]=\"filterSectionBtnColor()\" (clicked)=\"toggleFilterSection()\"\n                    [badgeConfig]=\"badgeConfig()\">\n                    <upd-icon [tablerIcon]=\"isFilterSectionOpen() ? 'filter-up' : 'filter-down'\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            </ng-template>\n        </upd-input>\n    </div>\n\n    @if (isFilterSectionOpen()) {\n        @for (row of activeFilters(); track row; let i = $index) {\n            <upd-filter-row [store]=\"config().store\" [currentFilter]=\"row\" [(activeFilters)]=\"activeFilters\" [columns]=\"columns()\"\n                [rowIndex]=\"i\" (removed)=\"onRowRemoved()\" [isDisabled]=\"isSearching()\">\n            </upd-filter-row>\n        }\n\n        <div class=\"ms-auto d-flex gap-2\">\n            <upd-button customClasses=\"gap-2\" colorStyle=\"primary\" [isOutline]=\"true\" (clicked)=\"addEmptyFilterRow()\"\n                [isDisabled]=\"!canPerformActions()\">\n                <upd-icon tablerIcon=\"plus\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('AddNewFilter') }}\n            </upd-button>\n            <upd-button customClasses=\"gap-2\" colorStyle=\"success\" [isDisabled]=\"!canPerformActions()\" (clicked)=\"search()\">\n                <upd-icon tablerIcon=\"checks\" tablerIconWeight=\"bold\" [tablerIconSize]=\"20\"></upd-icon>\n                {{ t('ApplyFilters') }}\n            </upd-button>\n        </div>\n    }\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i3.IconComponent, selector: "upd-icon", inputs: ["model", "wrapperClasses", "color", "colorClass", "removeDefaultClasses", "customClasses", "tablerIcon", "tablerIconWeight", "tablerIconType", "tablerIconSize", "heroIcon", "heroIconSize", "heroIconType"] }, { kind: "component", type: i4.ButtonComponent, selector: "upd-button", inputs: ["model", "text", "brandColorStyle", "customClasses", "isOutline", "isGhost", "isSquare", "isPill", "isIcon", "isLoading", "isList", "isFloating", "isAction", "isNavigationLink", "isLink", "shouldIgnoreBtnClass", "iconModel", "iconPosition", "isDisabled", "isActive", "badgeConfig", "colorStyle", "size", "title", "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: ["activeFilters", "rowIndex", "columns", "isDisabled", "store", "currentFilter"], outputs: ["removed", "activeFiltersChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: SearchSectionComponent, decorators: [{
             type: Component,
@@ -1233,7 +1234,7 @@ class TableComponent extends BaseComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TableComponent, selector: "upd-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", searchRequest: "searchRequestChange", activeFilters: "activeFiltersChange", currentPage: "currentPageChange", pageSize: "pageSizeChange" }, viewQueries: [{ propertyName: "savedViewsRef", first: true, predicate: ["savedViewsBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().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\" [isSearching]=\"isSearching()\"\n                [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n                [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table -->\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\" colorClass=\"text-body-tertiary\"\n                                    [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n                                </upd-icon>\n                            }\n                        </th>\n                    }\n\n                    @if (!!pendingWidthColClass) {\n                        <th [ngClass]=\"pendingWidthColClass\"></th>\n                    }\n\n                    @if (configModel().customActions.length > 0) {\n                        <th class=\"custom-actions\"></th>\n                    }\n                </tr>\n                </thead>\n\n                <tbody>\n                    @if (isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td 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'}\" [isIcon]=\"true\"\n                                                    [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 [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n                                                    }\n                                                </div>\n                                            } @else {\n                                                <upd-button [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\"\n            [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n                    updPopover=\"{{ t('CurrentSavedView') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n                    updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n                    updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                    (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.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"], 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: ["searchRequest", "hasChanges", "columns", "isSearching", "searchRequestSubject", "config", "actionsTpl"], outputs: ["searchRequestChange", "hasChangesChange"] }, { kind: "directive", type: TableColumnDirective, selector: "[updTableColumn]", inputs: ["record", "config"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: TableComponent, selector: "upd-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, searchRequest: { classPropertyName: "searchRequest", publicName: "searchRequest", isSignal: true, isRequired: false, transformFunction: null }, activeFilters: { classPropertyName: "activeFilters", publicName: "activeFilters", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange", searchRequest: "searchRequestChange", activeFilters: "activeFiltersChange", currentPage: "currentPageChange", pageSize: "pageSizeChange" }, viewQueries: [{ propertyName: "savedViewsRef", first: true, predicate: ["savedViewsBtn"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'UpDevs.Table'\">\n    <div class=\"card\">\n        @if (!!configModel().title || !configModel().canSearch) {\n            <div class=\"card-header\">\n                @if (!!configModel().title) {\n                    <h3 class=\"card-title\">{{ textService.getText(configModel().title) }}</h3>\n                }\n                <ng-template [ngTemplateOutlet]=\"actionsTpl\"></ng-template>\n            </div>\n        }\n\n        @if (configModel().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\" [isSearching]=\"isSearching()\"\n                [(searchRequest)]=\"searchRequest\" [searchRequestSubject]=\"searchRequestSubject\" [config]=\"configModel()\"\n                [(hasChanges)]=\"hasSearchChanged\" [columns]=\"columns()\">\n            </upd-search-section>\n        }\n\n        <div [class.table-responsive]=\"configModel().isResponsive\">\n            <!-- TODO: implement pixel sized table -->\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\" colorClass=\"text-body-tertiary\"\n                                    [tablerIconSize]=\"16\" (click)=\"sortByColumn(col.name)\">\n                                </upd-icon>\n                            }\n                        </th>\n                    }\n\n                    @if (!!pendingWidthColClass) {\n                        <th [ngClass]=\"pendingWidthColClass\"></th>\n                    }\n\n                    @if (configModel().customActions.length > 0) {\n                        <th class=\"custom-actions\"></th>\n                    }\n                </tr>\n                </thead>\n\n                <tbody>\n                    @if (isSearching()) {\n                        <tr>\n                            <td [colSpan]=\"numberOfColumns\">\n                                <div class=\"empty\">\n                                    <h1 class=\"text-body-tertiary\">{{ t('Loading') }}...</h1>\n                                    <div class=\"progress progress-sm w-25\">\n                                        <div class=\"progress-bar progress-bar-indeterminate bg-body-tertiary\"></div>\n                                    </div>\n                                </div>\n                            </td>\n                        </tr>\n                    } @else {\n                        @for (record of data(); track record) {\n                            <tr>\n                                @if (configModel().hasCheckboxColumn) {\n                                    <td 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'}\" [isIcon]=\"true\"\n                                                    [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 [model]=\"adaptCustomAction(btn, record)\"></upd-button>\n                                                    }\n                                                </div>\n                                            } @else {\n                                                <upd-button [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\"\n            [totalRecords]=\"totalRecords()\" (changed)=\"onPageSettingsChanged()\">\n        </upd-paginator>\n    </div>\n\n    <ng-template #actionsTpl>\n        <div class=\"ms-auto d-flex gap-2\">\n            @if (!!activeSavedView()) {\n                @if (activeSavedView()!.isDefault) {\n                    <div class=\"ribbon ribbon-top ribbon-start\">\n                        <upd-icon tablerIcon=\"heart\" [tablerIconSize]=\"20\"></upd-icon>\n                    </div>\n                }\n                <div class=\"tag align-self-center py-3 text-primary bg-primary-lt border-primary\"\n                    updPopover=\"{{ t('CurrentSavedView') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"list-details\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ activeSavedView()!.name }}</span>\n                </div>\n            }\n            @if (hiddenColumns() > 0) {\n                <div class=\"tag align-self-center py-3 text-orange bg-orange-lt border-orange\"\n                    updPopover=\"{{ t('HiddenColumnsTooltip') }}\"\n                    [updPopoverActAsTooltip]=\"true\">\n                    <upd-icon tablerIcon=\"eye-off\" [tablerIconSize]=\"20\"></upd-icon>\n                    <span class=\"me-1\">{{ hiddenColumns() }}</span>\n                </div>\n            }\n            @if (!!activeSavedView() || hiddenColumns() > 0) {\n                <upd-button (clicked)=\"resetViewState()\" colorStyle=\"danger\" updPopover=\"{{ t('ResetView') }}\"\n                    [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\" [isOutline]=\"true\">\n                    <upd-icon tablerIcon=\"restore\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canSaveViews) {\n                <upd-button customClasses=\"gap-2\" [isDisabled]=\"!hasSearchChanged()\" (clicked)=\"openSaveSearchModal()\"\n                    updPopover=\"{{ t('SaveCurrentView') }}\" [updPopoverActAsTooltip]=\"true\" [isIcon]=\"true\">\n                    <upd-icon tablerIcon=\"device-floppy\" [tablerIconSize]=\"20\"></upd-icon>\n                </upd-button>\n            }\n            @if (configModel().canManageColumns) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"openColumnsManagerModal()\">\n                    <upd-icon tablerIcon=\"columns\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('ColumnsManagerButton') }}\n                </upd-button>\n            }\n            @if (configModel().canSaveViews || configModel().canLoadSavedViews) {\n                <upd-button customClasses=\"gap-2\" (clicked)=\"isSavedViewsDropdownOpen = true\" #savedViewsBtn>\n                    <upd-icon tablerIcon=\"folders\" [tablerIconSize]=\"20\"></upd-icon>\n                    {{ t('SavedViews.ButtonTitle') }}\n                </upd-button>\n                <upd-dropdown wrapperClasses=\"overflow-x-hidden mt-1\" [isOpen]=\"isSavedViewsDropdownOpen\"\n                    [dropdownReference]=\"savedViewsRef()\" [items]=\"savedViewsOptions()\" [shouldCloseOnOutsideClick]=\"true\"\n                    (isOpenChange)=\"isSavedViewsDropdownOpen = $event\" [minWidth]=\"350\" (selectedItem)=\"selectSavedView($event)\">\n                    @if (savedViewsOptions().length < 1) {\n                        <span class=\"m-2\">{{ t('NoSavedViews') }}</span>\n                    }\n                </upd-dropdown>\n            }\n        </div>\n    </ng-template>\n</ng-container>\n", styles: [".fixed{table-layout:fixed!important}.fixed td,.fixed th{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.checkbox-selector{width:52px!important}.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: ["searchRequest", "hasChanges", "columns", "isSearching", "searchRequestSubject", "config", "actionsTpl"], outputs: ["searchRequestChange", "hasChangesChange"] }, { kind: "directive", type: TableColumnDirective, selector: "[updTableColumn]", inputs: ["record", "config"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,