@indigina/ui-kit 1.1.354 → 1.1.356

package/fesm2022/indigina-ui-kit.mjs

@@ -5860,6 +5860,7 @@ class KitSearchBarComponent {
         this.closeButtonLabel = 'Close';
         this.searchString = input(...(ngDevMode ? [undefined, { debugName: "searchString" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.maxLength = input(1000, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
         this.changed = new EventEmitter();
         this.searchButtonClick = new EventEmitter();
         this.closeButtonClick = new EventEmitter();
@@ -5904,7 +5905,7 @@ class KitSearchBarComponent {
         this.closeButtonClick.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitSearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitSearchBarComponent, isStandalone: true, selector: "kit-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchString: { classPropertyName: "searchString", publicName: "searchString", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", searchButtonClick: "searchButtonClick", closeButtonClick: "closeButtonClick" }, viewQueries: [{ propertyName: "searchTextboxElementRef", first: true, predicate: ["searchTextboxElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"kit-search-bar\">\n  @if (!searchVisible()) {\n    <kit-button [label]=\"searchButtonLabel\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"KitSvgIcon.SEARCH\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                [iconPosition]=\"KitButtonIconPosition.LEADING\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onSearchButtonClick()\"\n    ></kit-button>\n  } @else {\n    <div class=\"textbox-wrapper\">\n        <kit-textbox #searchTextboxElement\n                     class=\"search-textbox\"\n                     [placeholder]=\"placeholder\"\n                     [size]=\"kitTextboxSize.SMALL\"\n                     [icon]=\"KitSvgIcon.SEARCH\"\n                     [defaultValue]=\"searchString() ?? ''\"\n                     (changed)=\"onSearchChange($event)\"\n        ></kit-textbox>\n        <button class=\"clear-button\"\n                (click)=\"clearSearch()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n          ></kit-svg-icon>\n        </button>\n        <button class=\"close-button\"\n                (click)=\"onCloseButtonClick()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n          ></kit-svg-icon>\n        </button>\n    </div>\n  }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitSearchBarComponent, isStandalone: true, selector: "kit-search-bar", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: false, isRequired: false, transformFunction: null }, searchString: { classPropertyName: "searchString", publicName: "searchString", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", searchButtonClick: "searchButtonClick", closeButtonClick: "closeButtonClick" }, viewQueries: [{ propertyName: "searchTextboxElementRef", first: true, predicate: ["searchTextboxElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"kit-search-bar\">\n  @if (!searchVisible()) {\n    <kit-button [label]=\"searchButtonLabel\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"KitSvgIcon.SEARCH\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                [iconPosition]=\"KitButtonIconPosition.LEADING\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onSearchButtonClick()\"\n    ></kit-button>\n  } @else {\n    <div class=\"textbox-wrapper\">\n        <kit-textbox #searchTextboxElement\n                     class=\"search-textbox\"\n                     [maxlength]=\"maxLength()\"\n                     [placeholder]=\"placeholder\"\n                     [size]=\"kitTextboxSize.SMALL\"\n                     [icon]=\"KitSvgIcon.SEARCH\"\n                     [defaultValue]=\"searchString() ?? ''\"\n                     (changed)=\"onSearchChange($event)\"\n        ></kit-textbox>\n        <button class=\"clear-button\"\n                (click)=\"clearSearch()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n          ></kit-svg-icon>\n        </button>\n        <button class=\"close-button\"\n                (click)=\"onCloseButtonClick()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n          ></kit-svg-icon>\n        </button>\n    </div>\n  }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitSearchBarComponent, decorators: [{
             type: Component,
@@ -5912,14 +5913,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         KitButtonComponent,
                         KitTextboxComponent,
                         KitSvgIconComponent,
-                    ], template: "<div class=\"kit-search-bar\">\n  @if (!searchVisible()) {\n    <kit-button [label]=\"searchButtonLabel\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"KitSvgIcon.SEARCH\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                [iconPosition]=\"KitButtonIconPosition.LEADING\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onSearchButtonClick()\"\n    ></kit-button>\n  } @else {\n    <div class=\"textbox-wrapper\">\n        <kit-textbox #searchTextboxElement\n                     class=\"search-textbox\"\n                     [placeholder]=\"placeholder\"\n                     [size]=\"kitTextboxSize.SMALL\"\n                     [icon]=\"KitSvgIcon.SEARCH\"\n                     [defaultValue]=\"searchString() ?? ''\"\n                     (changed)=\"onSearchChange($event)\"\n        ></kit-textbox>\n        <button class=\"clear-button\"\n                (click)=\"clearSearch()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n          ></kit-svg-icon>\n        </button>\n        <button class=\"close-button\"\n                (click)=\"onCloseButtonClick()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n          ></kit-svg-icon>\n        </button>\n    </div>\n  }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\n"] }]
+                    ], template: "<div class=\"kit-search-bar\">\n  @if (!searchVisible()) {\n    <kit-button [label]=\"searchButtonLabel\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"KitSvgIcon.SEARCH\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                [iconPosition]=\"KitButtonIconPosition.LEADING\"\n                [disabled]=\"disabled()\"\n                (clicked)=\"onSearchButtonClick()\"\n    ></kit-button>\n  } @else {\n    <div class=\"textbox-wrapper\">\n        <kit-textbox #searchTextboxElement\n                     class=\"search-textbox\"\n                     [maxlength]=\"maxLength()\"\n                     [placeholder]=\"placeholder\"\n                     [size]=\"kitTextboxSize.SMALL\"\n                     [icon]=\"KitSvgIcon.SEARCH\"\n                     [defaultValue]=\"searchString() ?? ''\"\n                     (changed)=\"onSearchChange($event)\"\n        ></kit-textbox>\n        <button class=\"clear-button\"\n                (click)=\"clearSearch()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.BACKSPACE\"\n          ></kit-svg-icon>\n        </button>\n        <button class=\"close-button\"\n                (click)=\"onCloseButtonClick()\">\n          <kit-svg-icon [icon]=\"KitSvgIcon.CIRCLE_CROSS_THIN\"\n          ></kit-svg-icon>\n        </button>\n    </div>\n  }\n</div>\n", styles: [".kit-search-bar .textbox-wrapper{position:relative;display:flex;width:340px}.kit-search-bar .search-textbox{flex:1}.kit-search-bar .search-textbox .kit-textbox-state-icon{display:none}.kit-search-bar .search-textbox .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-search-bar .clear-button,.kit-search-bar .close-button{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;z-index:1}.kit-search-bar .clear-button .kit-svg-icon,.kit-search-bar .close-button .kit-svg-icon{display:block;width:16px;height:16px}.kit-search-bar .close-button{right:3px}.kit-search-bar .close-button .kit-svg-icon{stroke:var(--ui-kit-color-grey-14);fill:none}.kit-search-bar .clear-button{right:27px}.kit-search-bar .clear-button .kit-svg-icon{fill:var(--ui-kit-color-grey-14)}.kit-search-bar .k-input-md .k-input-inner,.kit-search-bar .k-picker-md .k-input-inner{padding-right:50px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], searchButtonLabel: [{
                 type: Input
             }], closeButtonLabel: [{
                 type: Input
-            }], searchString: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchString", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], changed: [{
+            }], searchString: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchString", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], changed: [{
                 type: Output
             }], searchButtonClick: [{
                 type: Output
@@ -6432,8 +6433,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
-const kitDataStateToODataString = (state, utcDates = false) => decodeURIComponent(toODataString(state, { utcDates }));
+const kitDataStateToODataString = (state, utcDates = false) => {
+    const mappedState = state.filter
+        ? {
+            ...state,
+            filter: mapFiltersForOData(state.filter),
+        }
+        : state;
+    return decodeURIComponent(toODataString(mappedState, { utcDates }));
+};
 const kitFilterBy = (data, filter) => filterBy(data, filter);
+const isKitFilterDescriptor = (filter) => {
+    return 'field' in filter && 'value' in filter;
+};
+const mapFiltersForOData = (filter) => ({
+    ...filter,
+    filters: filter.filters.map(filter => {
+        if ('isArray' in filter && filter.isArray) {
+            const filterData = filter.filters[0];
+            if (!isKitFilterDescriptor(filterData) || !filterData.field) {
+                return filter;
+            }
+            const field = (typeof filterData.field === 'string' ? filterData.field : filterData.field()).replaceAll('.', '/');
+            return {
+                field: `${field}/any(p: p eq '${filterData.value}')`,
+                operator: 'eq',
+                value: true,
+            };
+        }
+        if ('filters' in filter) {
+            return mapFiltersForOData(filter);
+        }
+        return filter;
+    }),
+});
 
 var KitThemes;
 (function (KitThemes) {
@@ -7019,6 +7052,7 @@ var KitFilterType;
     KitFilterType["NUMERIC"] = "numeric";
     KitFilterType["NULL"] = "null";
     KitFilterType["GUID"] = "guid";
+    KitFilterType["ARRAY"] = "array";
 })(KitFilterType || (KitFilterType = {}));
 var KitFilterDateRange;
 (function (KitFilterDateRange) {
@@ -7173,7 +7207,13 @@ const getValueFilters = (value) => {
 const kitBuildOdataFilter = (filter) => removeFilterPrefix(normalizeGuidFilter(kitDataStateToODataString({ filter }, true)));
 const kitBuildFilters = (filters) => ({
     logic: KitFilterLogic.AND,
-    filters: filters.map(filter => filterEmptyValues(filter.value) ?? []),
+    filters: filters.map(filter => {
+        const cleanedFilter = filterEmptyValues(filter.value);
+        return {
+            ...cleanedFilter,
+            isArray: filter.type === KitFilterType.ARRAY,
+        };
+    }),
 });
 
 const kitFormatStringForSearch = (inputString) => {
@@ -7184,7 +7224,7 @@ const kitFormatStringForSearch = (inputString) => {
         .join(' ');
 };
 
-const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType, excelFormat, apiField) => ({
+const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType, excelFormat, apiField, hiddenInGrid) => ({
     field,
     title,
     sortable,
@@ -7194,6 +7234,7 @@ const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false,
     type,
     excelFormat,
     apiField,
+    hiddenInGrid,
 });
 const kitBuildGridDataResults = (data, loading, total) => ({
     results: {
@@ -8789,6 +8830,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-selector\">\n  <kit-pill #toggleButton\n            [type]=\"kitPillType.DASHED\"\n            [selectable]=\"true\"\n            [selected]=\"popup.isPopupOpen\"\n            [icon]=\"kitSvgIcon.PLUS\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            (clicked)=\"popup.toggle()\">\n    {{ \"kit.filters.addNewFilter\" | translate }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-selector-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"filter-search\">\n      <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                   [size]=\"kitTextboxSize.SMALL\"\n                   [defaultValue]=\"searchTerm()\"\n                   (changed)=\"onSearchChange($event)\"\n      ></kit-textbox>\n    </div>\n    <div class=\"filter-items\">\n      @for (item of filterItems(); track item.field) {\n        <div class=\"filter-item\"\n             [class.disabled]=\"item.disabled\"\n             (click)=\"onItemClick(item)\">\n          {{ item.title | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--ui-kit-color-grey-12);pointer-events:none}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
+class KitFilterArrayComponent {
+    constructor() {
+        this.filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : []));
+        this.filterRemoved = output();
+        this.filterChanged = output();
+        this.anchor = viewChild.required('toggleButton', { read: ElementRef });
+        this.popup = viewChild('popup', ...(ngDevMode ? [{ debugName: "popup", read: KitPopupComponent }] : [{ read: KitPopupComponent }]));
+        this.kitTextboxSize = KitTextboxSize;
+        this.kitPillTheme = KitPillTheme;
+        this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+        this.selectedValue = signal('', ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
+    }
+    ngOnInit() {
+        this.initializeValue();
+        this.showPopupOnInit();
+    }
+    get applyButtonDisabled() {
+        return !this.inputValue().trim();
+    }
+    onValueChange(value) {
+        this.inputValue.set(value);
+    }
+    removeFilter() {
+        this.popup()?.close();
+        this.filterRemoved.emit();
+    }
+    onPopupToggle() {
+        this.popup()?.toggle();
+    }
+    close() {
+        if (this.selectedValue()) {
+            this.inputValue.set(this.selectedValue());
+        }
+        else {
+            this.removeFilter();
+        }
+    }
+    clearAllFilters() {
+        this.inputValue.set('');
+    }
+    applyFilter() {
+        const value = this.inputValue().trim();
+        this.selectedValue.set(value);
+        const filterValue = {
+            logic: KitFilterLogic.AND,
+            filters: [{
+                    field: this.filter().field,
+                    operator: KitFilterOperator.EQ,
+                    value,
+                }],
+        };
+        this.filterChanged.emit(filterValue);
+    }
+    initializeValue() {
+        const filterValue = this.filter().value;
+        if (filterValue?.filters?.[0]?.value) {
+            const value = String(filterValue.filters[0].value);
+            this.selectedValue.set(value);
+            this.inputValue.set(value);
+        }
+    }
+    showPopupOnInit() {
+        if (!this.selectedValue()) {
+            requestAnimationFrame(() => this.onPopupToggle());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitFilterArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: KitFilterArrayComponent, isStandalone: true, selector: "kit-filter-array", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  {{ selectedValue() }}\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n    ></kit-textbox>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$d.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitFilterArrayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-filter-array', imports: [
+                        KitPillComponent,
+                        KitPopupComponent,
+                        KitTextboxComponent,
+                        TranslateModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  {{ selectedValue() }}\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n    ></kit-textbox>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"] }]
+        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
+
 class KitGridFiltersComponent {
     constructor() {
         this.store = inject(Store);
@@ -8843,7 +8963,7 @@ class KitGridFiltersComponent {
         return filters.some(filter => filter.field === item.field || filter.field === item.apiField);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitGridFiltersComponent, isStandalone: true, selector: "kit-grid-filters", inputs: { excludedColumns: { classPropertyName: "excludedColumns", publicName: "excludedColumns", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, filterListConfig: { classPropertyName: "filterListConfig", publicName: "filterListConfig", isSignal: true, isRequired: true, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"filterListConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.GUID) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [guidField]=\"filterListConfig()[item.field].guidField\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.RADIO) {\n        <kit-filter-radio [filter]=\"item\"\n                          [items]=\"filterListConfig()?.[item.field].items\"\n                          [translateKeyPrefix]=\"filterListConfig()?.[item.field].translateKeyPrefix\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-radio>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         [useLocalTimeZone]=\"useLocalTimeZone()\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.TEXT\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NUMERIC) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.NUMERIC\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NULL) {\n        <kit-filter-null-check [filter]=\"item\"\n                         [nullLabel]=\"nullLabel()\"\n                         [notNullLabel]=\"notNullLabel()\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-null-check>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"], dependencies: [{ kind: "component", type: KitFilterSelectorComponent, selector: "kit-filter-selector", inputs: ["items"], outputs: ["itemSelected"] }, { kind: "component", type: KitFilterCheckboxComponent, selector: "kit-filter-checkbox", inputs: ["filter", "translateKeyPrefix", "items", "showPopupOnInit", "guidField"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterDateComponent, selector: "kit-filter-date", inputs: ["filter", "useLocalTimeZone"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterRadioComponent, selector: "kit-filter-radio", inputs: ["filter", "translateKeyPrefix", "items"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterInputComponent, selector: "kit-filter-input", inputs: ["filter", "filterInputType"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterNullCheckComponent, selector: "kit-filter-null-check", inputs: ["filter", "nullLabel", "notNullLabel", "showPopupOnInit", "selectedOption", "options"], outputs: ["filterRemoved", "filterChanged", "selectedOptionChange", "optionsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitGridFiltersComponent, isStandalone: true, selector: "kit-grid-filters", inputs: { excludedColumns: { classPropertyName: "excludedColumns", publicName: "excludedColumns", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, filterListConfig: { classPropertyName: "filterListConfig", publicName: "filterListConfig", isSignal: true, isRequired: true, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"filterListConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.GUID) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [guidField]=\"filterListConfig()[item.field].guidField\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.RADIO) {\n        <kit-filter-radio [filter]=\"item\"\n                          [items]=\"filterListConfig()?.[item.field].items\"\n                          [translateKeyPrefix]=\"filterListConfig()?.[item.field].translateKeyPrefix\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-radio>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         [useLocalTimeZone]=\"useLocalTimeZone()\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.TEXT\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NUMERIC) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.NUMERIC\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NULL) {\n        <kit-filter-null-check [filter]=\"item\"\n                               [nullLabel]=\"nullLabel()\"\n                               [notNullLabel]=\"notNullLabel()\"\n                               (filterRemoved)=\"removeFilter(item.field)\"\n                               (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-null-check>\n      }\n      @case (kitFilterType.ARRAY) {\n        <kit-filter-array [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-array>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"], dependencies: [{ kind: "component", type: KitFilterSelectorComponent, selector: "kit-filter-selector", inputs: ["items"], outputs: ["itemSelected"] }, { kind: "component", type: KitFilterCheckboxComponent, selector: "kit-filter-checkbox", inputs: ["filter", "translateKeyPrefix", "items", "showPopupOnInit", "guidField"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterDateComponent, selector: "kit-filter-date", inputs: ["filter", "useLocalTimeZone"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterRadioComponent, selector: "kit-filter-radio", inputs: ["filter", "translateKeyPrefix", "items"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterInputComponent, selector: "kit-filter-input", inputs: ["filter", "filterInputType"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterNullCheckComponent, selector: "kit-filter-null-check", inputs: ["filter", "nullLabel", "notNullLabel", "showPopupOnInit", "selectedOption", "options"], outputs: ["filterRemoved", "filterChanged", "selectedOptionChange", "optionsChange"] }, { kind: "component", type: KitFilterArrayComponent, selector: "kit-filter-array", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridFiltersComponent, decorators: [{
             type: Component,
@@ -8854,7 +8974,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         KitFilterRadioComponent,
                         KitFilterInputComponent,
                         KitFilterNullCheckComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"filterListConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.GUID) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [guidField]=\"filterListConfig()[item.field].guidField\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.RADIO) {\n        <kit-filter-radio [filter]=\"item\"\n                          [items]=\"filterListConfig()?.[item.field].items\"\n                          [translateKeyPrefix]=\"filterListConfig()?.[item.field].translateKeyPrefix\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-radio>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         [useLocalTimeZone]=\"useLocalTimeZone()\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.TEXT\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NUMERIC) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.NUMERIC\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NULL) {\n        <kit-filter-null-check [filter]=\"item\"\n                         [nullLabel]=\"nullLabel()\"\n                         [notNullLabel]=\"notNullLabel()\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-null-check>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"] }]
+                        KitFilterArrayComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"filterListConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.GUID) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [guidField]=\"filterListConfig()[item.field].guidField\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.RADIO) {\n        <kit-filter-radio [filter]=\"item\"\n                          [items]=\"filterListConfig()?.[item.field].items\"\n                          [translateKeyPrefix]=\"filterListConfig()?.[item.field].translateKeyPrefix\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-radio>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         [useLocalTimeZone]=\"useLocalTimeZone()\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.TEXT\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NUMERIC) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.NUMERIC\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NULL) {\n        <kit-filter-null-check [filter]=\"item\"\n                               [nullLabel]=\"nullLabel()\"\n                               [notNullLabel]=\"notNullLabel()\"\n                               (filterRemoved)=\"removeFilter(item.field)\"\n                               (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-null-check>\n      }\n      @case (kitFilterType.ARRAY) {\n        <kit-filter-array [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-array>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"] }]
         }], propDecorators: { excludedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedColumns", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], filterListConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterListConfig", required: true }] }], useLocalTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "useLocalTimeZone", required: false }] }], nullLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullLabel", required: false }] }], notNullLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "notNullLabel", required: false }] }] } });
 
 const KIT_GRID_CELL_DATE_FORMAT_CONFIG = new InjectionToken('KIT_GRID_CELL_DATE_FORMAT_CONFIG');
@@ -9016,7 +9137,8 @@ class KitGridExportComponent {
         this.isGridExporting = signal(false, ...(ngDevMode ? [{ debugName: "isGridExporting" }] : []));
     }
     get exportedColumns() {
-        return this.visibleColumns() || this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns.filter(column => !column.hidden);
+        const columns = this.visibleColumns() || this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns;
+        return columns.filter(column => !column.hidden && !column.hiddenInGrid);
     }
     onPopupToggle() {
         this.popup()?.toggle();
@@ -9213,7 +9335,7 @@ class KitGridSearchComponent {
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: KitGridSearchComponent, isStandalone: true, selector: "kit-grid-search", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSearch: "toggleSearch" }, viewQueries: [{ propertyName: "kitSearchBarComponent", first: true, predicate: KitSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<kit-search-bar [placeholder]=\"'kit.search.placeholder' | translate\"\n                [searchButtonLabel]=\"'kit.search.searchButtonLabel' | translate\"\n                [searchString]=\"(gridState$ | async)?.search\"\n                [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n                [disabled]=\"disabled()\"\n                (closeButtonClick)=\"closeButtonClick()\"\n                (searchButtonClick)=\"this.toggleSearch.emit(true)\"\n></kit-search-bar>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitSearchBarComponent, selector: "kit-search-bar", inputs: ["placeholder", "searchButtonLabel", "closeButtonLabel", "searchString", "disabled"], outputs: ["changed", "searchButtonClick", "closeButtonClick"] }, { kind: "pipe", type: i1$d.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: KitGridSearchComponent, isStandalone: true, selector: "kit-grid-search", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSearch: "toggleSearch" }, viewQueries: [{ propertyName: "kitSearchBarComponent", first: true, predicate: KitSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<kit-search-bar [placeholder]=\"'kit.search.placeholder' | translate\"\n                [searchButtonLabel]=\"'kit.search.searchButtonLabel' | translate\"\n                [searchString]=\"(gridState$ | async)?.search\"\n                [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n                [disabled]=\"disabled()\"\n                (closeButtonClick)=\"closeButtonClick()\"\n                (searchButtonClick)=\"this.toggleSearch.emit(true)\"\n></kit-search-bar>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitSearchBarComponent, selector: "kit-search-bar", inputs: ["placeholder", "searchButtonLabel", "closeButtonLabel", "searchString", "disabled", "maxLength"], outputs: ["changed", "searchButtonClick", "closeButtonClick"] }, { kind: "pipe", type: i1$d.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridSearchComponent, decorators: [{
             type: Component,
@@ -9242,7 +9364,7 @@ class KitGridColumnManagerComponent {
         this.kitTooltipPosition = KitTooltipPosition;
     }
     openColumnsDialog() {
-        this.updatedColumns.set([...this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns]);
+        this.updatedColumns.set([...this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns].filter(column => !column.hiddenInGrid));
         this.kitDialogService.openDialog({
             title: this.translateService.instant('kit.columns.title'),
             content: this.dialogContent(),
@@ -9272,7 +9394,8 @@ class KitGridColumnManagerComponent {
         this.kitDialogService.closeDialog();
     }
     checkChanges() {
-        const usedColumnsConfig = this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns;
+        const usedColumnsConfig = this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns
+            .filter(column => !column.hiddenInGrid);
         this.hasUnsavedChanges.set(JSON.stringify(this.updatedColumns()) !== JSON.stringify(usedColumnsConfig));
     }
     reset() {