@indigina/ui-kit 1.1.130 → 1.1.132

package/fesm2022/indigina-ui-kit.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, input, EventEmitter, ViewEncapsulation, Output, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, signal, TemplateRef, ContentChild, ViewChild, HostListener, Injectable, output, Host, Self, Inject, model, contentChildren, viewChild, ContentChildren, computed, contentChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, input, EventEmitter, ViewEncapsulation, Output, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, signal, TemplateRef, ContentChild, ViewChild, HostListener, Injectable, output, Host, Self, Inject, model, contentChildren, viewChild, ContentChildren, computed, contentChild, InjectionToken } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@angular/common';
-import { CommonModule, NgClass, DOCUMENT, NgTemplateOutlet, DatePipe } from '@angular/common';
+import { CommonModule, NgClass, DOCUMENT, NgTemplateOutlet, DatePipe, TitleCasePipe, AsyncPipe, SlicePipe } from '@angular/common';
 import * as i1$2 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import { TooltipDirective, TooltipSettings } from '@progress/kendo-angular-tooltip';
@@ -23,17 +23,18 @@ import * as i1$6 from 'ngx-toastr';
 import { ToastrModule, TOAST_CONFIG, DefaultGlobalConfig } from 'ngx-toastr';
 import * as i1$7 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
-import { BehaviorSubject, filter } from 'rxjs';
+import { BehaviorSubject, filter, of, tap, map, combineLatest, combineLatestWith, distinctUntilChanged } from 'rxjs';
 import { v4 } from 'uuid';
 import * as i1$8 from '@progress/kendo-angular-dialog';
-import { KENDO_DIALOGS, DialogActionsComponent } from '@progress/kendo-angular-dialog';
+import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult } from '@progress/kendo-angular-dialog';
 export { DialogAction, DialogCloseResult, DialogContentBase, DialogRef } from '@progress/kendo-angular-dialog';
 import * as i1$9 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
 import * as i2$1 from '@progress/kendo-angular-upload';
 import { UploadModule } from '@progress/kendo-angular-upload';
+import * as i1$c from '@angular/common/http';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import initials from 'initials';
 import * as i2$2 from '@progress/kendo-angular-layout';
 import { LayoutModule, TileLayoutModule } from '@progress/kendo-angular-layout';
@@ -49,6 +50,14 @@ export { pdf } from '@progress/kendo-drawing';
 import * as i2$4 from '@progress/kendo-angular-sortable';
 import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
 import { toODataString } from '@progress/kendo-data-query';
+import * as i1$b from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { __decorate } from 'tslib';
+import * as i1$d from '@ngxs/store';
+import { StateToken, Action, State, createSelector, Selector } from '@ngxs/store';
+import { patch, append, removeItem, updateItem } from '@ngxs/store/operators';
+import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
+import { StateReset } from 'ngxs-reset-plugin';
 
 var KitSvgIcon;
 (function (KitSvgIcon) {
@@ -4076,12 +4085,9 @@ class KitNavigationMenuComponent {
         items.forEach(item => item.expanded = false);
     }
     toggleItem(item) {
-        if (this.collapsed()) {
+        if (this.collapsed() || (!this.selectedAppsItems() && this.selectedItem() === item)) {
             this.kitNavigationMenuService.setCollapsedState(!this.collapsed());
         }
-        else {
-            !this.selectedAppsItems() && this.kitNavigationMenuService.setCollapsedState(true);
-        }
         item.expanded = !item.expanded;
     }
     updateMenuState() {
@@ -6342,11 +6348,1272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 const kitDataStateToODataString = (state) => toODataString(state);
 
+const KIT_BASE_PATH = new InjectionToken('kitBasePath');
+
+const kitTranslations = {
+    en: {
+        kit: {
+            views: {
+                save: 'Save',
+                cancel: 'Cancel',
+                apply: 'Apply',
+                newView: 'New View',
+                enterText: 'Enter Text',
+                overrideMessage: 'Existing view will be overridden',
+                invalidMessage: 'Special characters are not allowed',
+                noUnsavedChanges: 'No unsaved changes',
+                manageViews: 'Manage Views',
+                views: 'Views',
+            },
+            filters: {
+                addNewFilter: 'Add New Filter',
+                chooseDateFrom: 'Choose Date From',
+                chooseDateTo: 'Choose Date To',
+                clear: 'Clear',
+                apply: 'Apply',
+                search: 'Search',
+                logic: {
+                    or: 'Or',
+                    and: 'And',
+                },
+                operator: {
+                    contains: 'Contains',
+                    eq: 'Is equal to',
+                    isnotnull: 'Has value',
+                    isnull: 'Has no value',
+                    neq: 'Is not equal to',
+                    startswith: 'Starts with',
+                    endswith: 'Ends with',
+                    doesnotcontain: 'Does not contain',
+                },
+            },
+        },
+    },
+};
+
+class KitTranslateService {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    registerTranslations() {
+        Object.keys(kitTranslations).forEach(lang => {
+            this.translateService.setTranslation(lang, kitTranslations[lang], true);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$b.TranslateService }] });
+
+class AbstractPayloadAction {
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+
+class SetGridSkip extends AbstractPayloadAction {
+    static { this.type = '[Grid] SetSkip'; }
+}
+class SetGridSort extends AbstractPayloadAction {
+    static { this.type = '[Grid] SetSort'; }
+}
+class SetGridColumns extends AbstractPayloadAction {
+    static { this.type = '[Grid] SetColumns'; }
+}
+class AddGridFilter extends AbstractPayloadAction {
+    static { this.type = '[Grid] AddFilter'; }
+}
+class RemoveGridFilter extends AbstractPayloadAction {
+    static { this.type = '[Grid] RemoveFilter'; }
+}
+class UpdateGridFilter extends AbstractPayloadAction {
+    static { this.type = '[Grid] UpdateFilter'; }
+}
+class SetGridFilters extends AbstractPayloadAction {
+    static { this.type = '[Grid] SetFilters'; }
+}
+
+const KIT_GRID_STATE_TOKEN = new StateToken('grid');
+let KitGridState = class KitGridState {
+    setGridSkip(ctx, action) {
+        ctx.setState(patch({
+            skip: action.payload,
+        }));
+    }
+    setGridSort(ctx, action) {
+        ctx.setState(patch({
+            sort: action.payload,
+        }));
+    }
+    setGridColumns(ctx, action) {
+        ctx.setState(patch({
+            columns: action.payload,
+        }));
+    }
+    addGridFilter(ctx, action) {
+        const items = ctx.getState().filter;
+        return of(items).pipe(tap(() => ctx.setState(patch({
+            filter: append([action.payload]),
+        }))));
+    }
+    removeGridFilter(ctx, action) {
+        const items = ctx.getState().filter;
+        return of(items).pipe(tap(() => ctx.setState(patch({
+            filter: removeItem(item => item.field === action.payload),
+        }))));
+    }
+    updateGridFilter(ctx, action) {
+        const items = ctx.getState().filter;
+        return of(items).pipe(tap(() => ctx.setState(patch({
+            filter: updateItem(item => item.field === action.payload.field, action.payload),
+        }))));
+    }
+    setGridFilters(ctx, action) {
+        return of(action.payload).pipe(tap(filters => ctx.setState(patch({
+            filter: filters,
+        }))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridState, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridState }); }
+};
+__decorate([
+    Action(SetGridSkip)
+], KitGridState.prototype, "setGridSkip", null);
+__decorate([
+    Action(SetGridSort)
+], KitGridState.prototype, "setGridSort", null);
+__decorate([
+    Action(SetGridColumns)
+], KitGridState.prototype, "setGridColumns", null);
+__decorate([
+    Action(AddGridFilter)
+], KitGridState.prototype, "addGridFilter", null);
+__decorate([
+    Action(RemoveGridFilter)
+], KitGridState.prototype, "removeGridFilter", null);
+__decorate([
+    Action(UpdateGridFilter)
+], KitGridState.prototype, "updateGridFilter", null);
+__decorate([
+    Action(SetGridFilters)
+], KitGridState.prototype, "setGridFilters", null);
+KitGridState = __decorate([
+    State({
+        name: KIT_GRID_STATE_TOKEN,
+        defaults: {
+            skip: 0,
+            sort: [],
+            filter: [],
+            columns: [],
+        },
+    })
+], KitGridState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridState, decorators: [{
+            type: Injectable
+        }], propDecorators: { setGridSkip: [], setGridSort: [], setGridColumns: [], addGridFilter: [], removeGridFilter: [], updateGridFilter: [], setGridFilters: [] } });
+
+const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType) => ({
+    field,
+    title,
+    sortable,
+    hidden,
+    width,
+    filterType,
+    type,
+});
+
+var KitGridViewType;
+(function (KitGridViewType) {
+    KitGridViewType["SYSTEM"] = "system";
+    KitGridViewType["USER"] = "user";
+    KitGridViewType["CONFIG"] = "config";
+})(KitGridViewType || (KitGridViewType = {}));
+
+const filterDuplicateGridViews = (views) => views.filter((item, index, arr) => {
+    const duplicateItems = arr.filter(i => i.title === item.title);
+    return duplicateItems.length <= 1 || item.type !== KitGridViewType.SYSTEM;
+});
+const findGridViewByName = (views, name) => views.find(view => view.title === name && view.type === KitGridViewType.USER && !view.hidden) ??
+    views.find(view => view.title === name && !view.hidden) ??
+    null;
+const buildGridViewColumns = (columns) => columns.map(column => ({
+    field: column.field,
+    hidden: column.hidden,
+}));
+const hasOverriddenSystemView = (name, views) => views.some(item => item.type === KitGridViewType.SYSTEM && item.title === name);
+const buildGridColumns = (columns, viewColumns) => viewColumns.map(viewColumn => {
+    const matchingColumn = columns.find(column => column.field === viewColumn.field);
+    return matchingColumn && { ...matchingColumn, hidden: viewColumn.hidden } || null;
+}).filter(column => !!column);
+const navigateToView = (name, router, activatedRoute) => {
+    const routePath = kitEncodeViewNameToUrl(name.toLowerCase());
+    router.navigate([`../${routePath}`], { relativeTo: activatedRoute });
+};
+const kitEncodeViewNameToUrl = (name) => name.split(' ').join('-');
+const decodeViewNameFromUrl = (name) => name.split('-').join(' ');
+const isViewNameValid = (name) => {
+    const specialChars = '!@#$%^&*()_+[]{}|;:,.<>?/~`-=';
+    return [...specialChars].every(item => !name.includes(item));
+};
+const getInputMessage = (views, viewName) => {
+    if (!isViewNameValid(viewName)) {
+        return 'kit.views.invalidMessage';
+    }
+    const isViewExist = !!views.find(item => item.title === viewName);
+    return isViewExist && 'kit.views.overrideMessage' || '';
+};
+
+class FetchGridViews extends AbstractPayloadAction {
+    static { this.type = '[GridViews] Fetch'; }
+}
+class AddGridView extends AbstractPayloadAction {
+    static { this.type = '[GridView] Add'; }
+}
+class RemoveGridView extends AbstractPayloadAction {
+    static { this.type = '[GridView] Remove'; }
+}
+class SetGridViews extends AbstractPayloadAction {
+    static { this.type = '[GridViews] Set'; }
+}
+class FetchGridViewsConfig extends AbstractPayloadAction {
+    static { this.type = '[GridViews] FetchConfig'; }
+}
+class UpdateGridViewsConfig extends AbstractPayloadAction {
+    static { this.type = '[GridViews] UpdateConfig'; }
+}
+class SetSelectedView extends AbstractPayloadAction {
+    static { this.type = '[GridViews] SetSelectedView'; }
+}
+
+const apiResponseDefaultEntities = () => ({
+    data: [],
+    total: 0,
+    loading: true,
+});
+
+class KitSettingsApiService {
+    constructor(httpClient, basePath) {
+        this.httpClient = httpClient;
+        this.basePath = basePath;
+    }
+    getSettingsByGroup(group) {
+        const url = `${this.basePath}/users/me/settings/groups/${group}`;
+        return this.httpClient.get(url);
+    }
+    setSettingByKey(key, settingValue) {
+        const url = `${this.basePath}/users/me/settings/${key}`;
+        return this.httpClient.put(url, settingValue);
+    }
+    deleteSettingByGroupAndKey(key, group) {
+        const url = `${this.basePath}/users/me/settings/groups/${group}/${key}`;
+        return this.httpClient.delete(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KIT_BASE_PATH]
+                }] }] });
+
+var KitGridViewsState_1;
+const KIT_GRID_VIEWS_STATE_TOKEN = new StateToken('gridViews');
+let KitGridViewsState = class KitGridViewsState {
+    static { KitGridViewsState_1 = this; }
+    constructor(settingsService) {
+        this.settingsService = settingsService;
+    }
+    fetchGridViews(ctx, action) {
+        return this.settingsService.getSettingsByGroup(action.payload.group).pipe(map(settings => settings.map(setting => ({
+            title: setting.key,
+            group: setting.group,
+            type: KitGridViewType.USER,
+            value: setting.value && JSON.parse(setting.value),
+        }))), map(values => ([
+            ...action.payload.defaultItems ?? [],
+            ...values,
+        ])), tap(data => ctx.setState(patch({
+            loading: false,
+            data: patch({
+                views: data,
+            }),
+        }))));
+    }
+    addGridView(ctx, action) {
+        const items = ctx.getState().data.views;
+        const formattedPayload = { ...action.payload, title: action.payload.title.toLowerCase() };
+        const { title, group, value } = formattedPayload;
+        const settingValue = {
+            group,
+            value: JSON.stringify(value),
+        };
+        return this.settingsService.setSettingByKey(title, settingValue).pipe(tap(() => {
+            const viewExists = items.some(item => this.hasUserView(item, title));
+            ctx.setState(patch({
+                data: patch({
+                    views: viewExists && updateItem(item => this.hasUserView(item, title), formattedPayload) || append([formattedPayload]),
+                }),
+            }));
+        }));
+    }
+    removeGridView(ctx, action) {
+        const { title, group } = action.payload;
+        return this.settingsService.deleteSettingByGroupAndKey(title, group ?? '').pipe(tap(() => ctx.setState(patch({
+            data: patch({
+                views: removeItem(item => this.hasUserView(item, title)),
+            }),
+        }))));
+    }
+    setGridViews(ctx, action) {
+        return of(action.payload).pipe(tap(() => ctx.setState(patch({
+            data: patch({
+                views: action.payload,
+            }),
+        }))));
+    }
+    fetchGridViewsConfig(ctx, action) {
+        return this.settingsService.getSettingsByGroup(action.payload).pipe(map(settings => settings.map(setting => ({
+            title: setting.key,
+            group: setting.group,
+            type: KitGridViewType.CONFIG,
+            value: setting.value && JSON.parse(setting.value),
+        }))), tap(values => ctx.setState(patch({
+            data: patch({
+                config: values[0],
+            }),
+        }))));
+    }
+    updateGridViewsConfig(ctx, action) {
+        const { title, group, value } = action.payload;
+        const settingValue = {
+            group,
+            value: JSON.stringify(value),
+        };
+        return this.settingsService.setSettingByKey(title, settingValue).pipe(tap(() => ctx.setState(patch({
+            data: patch({
+                config: action.payload,
+            }),
+        }))));
+    }
+    setSelectedView(ctx, action) {
+        return of(action.payload).pipe(tap(() => ctx.setState(patch({
+            data: patch({
+                selectedView: action.payload,
+            }),
+        }))));
+    }
+    static getViews() {
+        return createSelector([KitGridViewsState_1], (gridViewsState) => {
+            const views = gridViewsState?.data?.views ?? [];
+            const viewsConfig = gridViewsState?.data?.config?.value?.config ?? null;
+            if (!viewsConfig) {
+                return views;
+            }
+            const areViewsEqual = (firstView, secondView) => firstView.title === secondView.title && firstView.type === secondView.type;
+            const updatedViews = views.map(view => {
+                const configItem = viewsConfig.find(item => areViewsEqual(item, view)) ?? null;
+                return configItem && { ...view, hidden: configItem.hidden } || view;
+            });
+            const existingViews = updatedViews.filter(view => viewsConfig.some(config => areViewsEqual(config, view)));
+            const newViews = updatedViews.filter(view => !viewsConfig.some(config => areViewsEqual(config, view)));
+            return [
+                ...existingViews.sort((a, b) => viewsConfig.findIndex(c => areViewsEqual(c, a)) - viewsConfig.findIndex(c => areViewsEqual(c, b))),
+                ...newViews,
+            ];
+        });
+    }
+    hasUserView(item, title) {
+        return item.type === KitGridViewType.USER && item.title === title;
+    }
+    static selectedView(state) {
+        return state.data.selectedView;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsState, deps: [{ token: KitSettingsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsState }); }
+};
+__decorate([
+    Action(FetchGridViews)
+], KitGridViewsState.prototype, "fetchGridViews", null);
+__decorate([
+    Action(AddGridView)
+], KitGridViewsState.prototype, "addGridView", null);
+__decorate([
+    Action(RemoveGridView)
+], KitGridViewsState.prototype, "removeGridView", null);
+__decorate([
+    Action(SetGridViews)
+], KitGridViewsState.prototype, "setGridViews", null);
+__decorate([
+    Action(FetchGridViewsConfig)
+], KitGridViewsState.prototype, "fetchGridViewsConfig", null);
+__decorate([
+    Action(UpdateGridViewsConfig)
+], KitGridViewsState.prototype, "updateGridViewsConfig", null);
+__decorate([
+    Action(SetSelectedView)
+], KitGridViewsState.prototype, "setSelectedView", null);
+__decorate([
+    Selector()
+], KitGridViewsState, "selectedView", null);
+KitGridViewsState = KitGridViewsState_1 = __decorate([
+    State({
+        name: KIT_GRID_VIEWS_STATE_TOKEN,
+        defaults: apiResponseDefaultEntities(),
+    })
+], KitGridViewsState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsState, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: KitSettingsApiService }], propDecorators: { fetchGridViews: [], addGridView: [], removeGridView: [], setGridViews: [], fetchGridViewsConfig: [], updateGridViewsConfig: [], setSelectedView: [] } });
+
+class KitGridViewsManagerComponent extends DialogContentBase {
+    constructor(store, dialog) {
+        super(dialog);
+        this.store = store;
+        this.dialog = dialog;
+        this.configGroup = input.required();
+        this.items = signal(this.store.selectSnapshot(KitGridViewsState.getViews()) ?? []);
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonType = KitButtonType;
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitSvgIconType = KitSvgIconType;
+    }
+    applyChanges() {
+        const existingViews = this.store.selectSnapshot(KIT_GRID_VIEWS_STATE_TOKEN).data.views;
+        const viewsToRemove = existingViews
+            .filter(view => !this.items()
+            .some(item => item.title === view.title && item.type === view.type));
+        const viewsToSave = this.items().map(({ value, ...item }) => item);
+        const viewConfig = {
+            title: this.configGroup(),
+            group: this.configGroup(),
+            type: KitGridViewType.CONFIG,
+            value: {
+                config: viewsToSave,
+            },
+        };
+        this.store.dispatch([
+            ...viewsToRemove.map(view => new RemoveGridView(view)),
+            new SetGridViews(this.items()),
+            new UpdateGridViewsConfig(viewConfig),
+        ]).subscribe(() => this.dialog.close(true));
+    }
+    close() {
+        this.dialog.close();
+    }
+    onColumnVisibilityChange(event, view) {
+        this.items.update(items => items
+            .map(item => (item.title === view.title && item.type === view.type) && { ...item, hidden: !event } || item));
+    }
+    isSystemView(item) {
+        return item.type === KitGridViewType.SYSTEM;
+    }
+    onViewRemove(view) {
+        this.items.update(items => items.filter(item => item.title !== view.title || item.type === KitGridViewType.SYSTEM));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$d.Store }, { token: i1$8.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [ngClass]=\"item.type\">\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [ngClass]=\"{ disabled: isSystemView(item) }\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (isSystemView(item)) {\n          <kit-svg-icon class=\"item-icon-system\"\n                        [icon]=\"kitSvgIcon.GLOBAL\"\n          ></kit-svg-icon>\n        }\n        <kit-button [disabled]=\"isSystemView(item)\"\n                    [type]=\"kitButtonType.LINK\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    (clicked)=\"onViewRemove(item)\"\n        ></kit-button>\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--color-grey-6)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--color-grey-8);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid-views-manager', imports: [
+                        KitButtonModule,
+                        KitSortableComponent,
+                        KitSvgIconModule,
+                        TranslateModule,
+                        NgClass,
+                        KitDialogActionsComponent,
+                        TitleCasePipe,
+                        KitTruncateTextComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [ngClass]=\"item.type\">\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [ngClass]=\"{ disabled: isSystemView(item) }\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (isSystemView(item)) {\n          <kit-svg-icon class=\"item-icon-system\"\n                        [icon]=\"kitSvgIcon.GLOBAL\"\n          ></kit-svg-icon>\n        }\n        <kit-button [disabled]=\"isSystemView(item)\"\n                    [type]=\"kitButtonType.LINK\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    (clicked)=\"onViewRemove(item)\"\n        ></kit-button>\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--color-grey-6)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--color-grey-8);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--color-main)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$8.DialogRef }] });
+
+class KitGridViewsListComponent {
+    constructor(activatedRoute, router, store, kitDialogService, translateService, viewContainerRef) {
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.store = store;
+        this.kitDialogService = kitDialogService;
+        this.translateService = translateService;
+        this.viewContainerRef = viewContainerRef;
+        this.viewGroup = input.required();
+        this.viewConfigGroup = input.required();
+        this.views = input.required();
+        this.defaultColumns = input.required();
+        this.defaultSorting = input.required();
+        this.defaultViewName = input.required();
+        this.anchor = viewChild.required('toggleButton', { read: ElementRef });
+        this.popup = viewChild('popup', { read: KitPopupComponent });
+        this.viewName = signal('');
+        this.createViewPopupVisible = signal(false);
+        this.kitButtonType = KitButtonType;
+        this.kitButtonKind = KitButtonKind;
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitSvgIconType = KitSvgIconType;
+        this.kitButtonIconPosition = KitButtonIconPosition;
+        this.gridViewType = KitGridViewType;
+        this.kitTextboxState = KitTextboxState;
+        this.selectedView = this.store.selectSignal(KitGridViewsState.selectedView);
+    }
+    get isViewNameValid() {
+        return isViewNameValid(this.viewName());
+    }
+    get inputMessage() {
+        const infoMessage = getInputMessage(this.views(), this.viewName().toLowerCase());
+        return infoMessage && this.translateService.instant(infoMessage) || '';
+    }
+    onViewSelect(item) {
+        navigateToView(item.title, this.router, this.activatedRoute);
+        this.popup()?.close();
+        this.store.dispatch(new SetSelectedView(item));
+    }
+    newViewToggle(visible) {
+        this.viewName.set('');
+        setTimeout(() => this.createViewPopupVisible.set(visible));
+    }
+    onPopupToggle() {
+        this.viewName.set('');
+        this.createViewPopupVisible.set(false);
+        this.popup()?.toggle();
+    }
+    onViewCreate() {
+        const view = {
+            title: this.viewName(),
+            group: this.viewGroup(),
+            type: KitGridViewType.USER,
+            value: {
+                filter: [],
+                sort: this.defaultSorting(),
+                columns: this.defaultColumns(),
+            },
+        };
+        this.store.dispatch(new AddGridView(view)).subscribe(() => {
+            navigateToView(this.viewName().toLowerCase(), this.router, this.activatedRoute);
+            this.viewName.set('');
+            this.popup()?.close();
+            this.store.dispatch(new SetSelectedView(view));
+        });
+    }
+    openViewsManagerModal() {
+        this.popup()?.close();
+        this.kitDialogService.openDialog({
+            title: this.translateService.instant('kit.views.views'),
+            content: KitGridViewsManagerComponent,
+            appendTo: this.viewContainerRef,
+        });
+        signalSetFn(this.kitDialogService.dialogInstance.configGroup[SIGNAL], this.viewConfigGroup());
+        this.kitDialogService.dialogRef?.result.pipe(filter(result => !(result instanceof DialogCloseResult))).subscribe(() => this.handleViewChange());
+    }
+    handleViewChange() {
+        const view = findGridViewByName(this.views(), this.selectedView()?.title ?? '');
+        return view
+            ? this.store.dispatch(new SetSelectedView(view))
+            : navigateToView(this.defaultViewName(), this.router, this.activatedRoute);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsListComponent, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }, { token: i1$d.Store }, { token: KitDialogService }, { token: i1$b.TranslateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsListComponent, isStandalone: true, selector: "kit-grid-views-list", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null } }, 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-button #toggleButton\n            [label]=\"(selectedView()?.title ?? '') | titlecase\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            [active]=\"popup.isPopupOpen\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-views-list\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  @if (!createViewPopupVisible()) {\n    <div class=\"view\">\n      <div class=\"views-list\">\n        @for (item of views(); track item) {\n          @if (!item.hidden) {\n            <div class=\"views-item\"\n                 [ngClass]=\"item.type\"\n                 [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n                 (click)=\"onViewSelect(item)\">\n              <kit-svg-icon class=\"view-icon\"\n                            [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              ></kit-svg-icon>\n              <div class=\"item-name\">{{ item.title | titlecase }}</div>\n              <kit-svg-icon class=\"check-icon\"\n                            [icon]=\"kitSvgIcon.CHECK\"\n              ></kit-svg-icon>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"popup-action\">\n        <kit-button [label]=\"'kit.views.newView' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    (clicked)=\"newViewToggle(true)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"new-view\">\n      <kit-textbox [defaultValue]=\"viewName()\"\n                   [placeholder]=\"'kit.views.enterText' | translate\"\n                   [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                   [messageText]=\"inputMessage\"\n                   (changed)=\"viewName.set($event)\"\n      ></kit-textbox>\n      <div class=\"new-view-action\">\n        <kit-button [label]=\"'kit.views.cancel' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"newViewToggle(false)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.save' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [disabled]=\"!viewName() || !isViewNameValid\"\n                    (clicked)=\"onViewCreate()\"\n        ></kit-button>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--color-blue-4);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--color-grey-4)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--color-grey-8);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--color-grey-6)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--color-grey-6)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid-views-list', imports: [
+                        KitButtonModule,
+                        KitPopupComponent,
+                        KitSvgIconModule,
+                        KitTextboxModule,
+                        TranslateModule,
+                        NgClass,
+                        TitleCasePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n            [label]=\"(selectedView()?.title ?? '') | titlecase\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            [active]=\"popup.isPopupOpen\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-views-list\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  @if (!createViewPopupVisible()) {\n    <div class=\"view\">\n      <div class=\"views-list\">\n        @for (item of views(); track item) {\n          @if (!item.hidden) {\n            <div class=\"views-item\"\n                 [ngClass]=\"item.type\"\n                 [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n                 (click)=\"onViewSelect(item)\">\n              <kit-svg-icon class=\"view-icon\"\n                            [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              ></kit-svg-icon>\n              <div class=\"item-name\">{{ item.title | titlecase }}</div>\n              <kit-svg-icon class=\"check-icon\"\n                            [icon]=\"kitSvgIcon.CHECK\"\n              ></kit-svg-icon>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"popup-action\">\n        <kit-button [label]=\"'kit.views.newView' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    (clicked)=\"newViewToggle(true)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"new-view\">\n      <kit-textbox [defaultValue]=\"viewName()\"\n                   [placeholder]=\"'kit.views.enterText' | translate\"\n                   [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                   [messageText]=\"inputMessage\"\n                   (changed)=\"viewName.set($event)\"\n      ></kit-textbox>\n      <div class=\"new-view-action\">\n        <kit-button [label]=\"'kit.views.cancel' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"newViewToggle(false)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.save' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [disabled]=\"!viewName() || !isViewNameValid\"\n                    (clicked)=\"onViewCreate()\"\n        ></kit-button>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--color-blue-4);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--color-grey-4)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--color-grey-8);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--color-grey-6)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--color-grey-6)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$7.ActivatedRoute }, { type: i1$7.Router }, { type: i1$d.Store }, { type: KitDialogService }, { type: i1$b.TranslateService }, { type: i0.ViewContainerRef }] });
+
+var KitFilterType;
+(function (KitFilterType) {
+    KitFilterType["CHECKBOX"] = "checkbox";
+    KitFilterType["DATE"] = "date";
+    KitFilterType["TEXT"] = "text";
+})(KitFilterType || (KitFilterType = {}));
+
+const filterOperators = [
+    KitFilterOperator.CONTAINS,
+    KitFilterOperator.EQ,
+    KitFilterOperator.IS_NOT_NULL,
+    KitFilterOperator.IS_NULL,
+    KitFilterOperator.NEQ,
+    KitFilterOperator.STARTS_WITH,
+    KitFilterOperator.ENDS_WITH,
+    KitFilterOperator.DOES_NOT_CONTAIN,
+];
+const kitNoValueRequiredFilterOperators = [
+    KitFilterOperator.IS_NOT_NULL,
+    KitFilterOperator.IS_NULL,
+];
+
+const convertFilterStringDate = (filters) => filters.map(filter => {
+    return filter.type === KitFilterType.DATE && filter.value?.filters && {
+        ...filter,
+        value: {
+            ...filter.value,
+            filters: filter.value.filters.map(item => ({
+                ...item,
+                value: item.value && new Date(item.value) || item.value,
+            })),
+        },
+    } || filter;
+});
+const removeReadonlyPropertyFromFilters = (filters) => filters.map(({ readonly, ...item }) => item);
+const kitBuildCheckboxFilterItems = (enumObject) => {
+    return Object.keys(enumObject).map(item => ({
+        title: item,
+        value: item,
+        checked: false,
+    }));
+};
+const removeFilterPrefix = (value) => value.split('$filter=')[1];
+const filterEmptyValues = (filters) => ({
+    logic: filters?.logic ?? KitFilterLogic.AND,
+    filters: filters?.filters.filter(item => kitNoValueRequiredFilterOperators.includes(item.operator) || !!item.value) ?? [],
+});
+const kitBuildOdataFilter = (filter) => removeFilterPrefix(kitDataStateToODataString({
+    filter,
+}));
+const kitBuildFilters = (filters) => ({
+    logic: KitFilterLogic.AND,
+    filters: filters.map(filter => filterEmptyValues(filter.value) ?? []),
+});
+
+class KitGridViewsSaveComponent {
+    constructor(store, router, activatedRoute, translateService) {
+        this.store = store;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.translateService = translateService;
+        this.viewGroup = input.required();
+        this.views = input.required();
+        this.viewsAutocompleteItems = input.required();
+        this.anchor = viewChild.required('toggleButton', { read: ElementRef });
+        this.popup = viewChild('popup', { read: KitPopupComponent });
+        this.viewName = signal('');
+        this.kitButtonKind = KitButtonKind;
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitButtonIconPosition = KitButtonIconPosition;
+        this.kitTooltipPosition = KitTooltipPosition;
+        this.hasUnsavedChanges = signal(false);
+        this.selectedView = this.store.selectSignal(KitGridViewsState.selectedView);
+    }
+    get isViewNameValid() {
+        return isViewNameValid(this.viewName());
+    }
+    get inputMessage() {
+        const infoMessage = getInputMessage(this.views(), this.viewName());
+        return infoMessage && this.translateService.instant(infoMessage) || '';
+    }
+    ngOnInit() {
+        this.store.select(KIT_GRID_STATE_TOKEN).pipe(filter(({ columns }) => !!columns.length)).subscribe(({ filter, sort, columns }) => {
+            const selectedViewState = {
+                filter: this.selectedView()?.value?.filter,
+                sort: this.selectedView()?.value?.sort,
+                columns: buildGridViewColumns(this.selectedView()?.value?.columns ?? []),
+            };
+            const currentViewState = {
+                filter,
+                sort,
+                columns: buildGridViewColumns(columns),
+            };
+            this.hasUnsavedChanges.set(JSON.stringify(selectedViewState) !== JSON.stringify(currentViewState));
+        });
+    }
+    onPopupToggle() {
+        this.viewName.set('');
+        this.popup()?.toggle();
+    }
+    onViewSave() {
+        const { filter, sort, columns } = this.store.selectSnapshot(KIT_GRID_STATE_TOKEN);
+        const views = this.store.selectSnapshot(KIT_GRID_VIEWS_STATE_TOKEN).data.views;
+        const view = {
+            title: this.viewName(),
+            group: this.viewGroup(),
+            type: KitGridViewType.USER,
+            value: {
+                filter: hasOverriddenSystemView(this.viewName(), views) && filter || removeReadonlyPropertyFromFilters(filter),
+                sort,
+                columns: buildGridViewColumns(columns),
+            },
+        };
+        this.store.dispatch(new AddGridView(view)).subscribe(() => {
+            this.hasUnsavedChanges.set(false);
+            navigateToView(this.viewName(), this.router, this.activatedRoute);
+            this.viewName.set('');
+            this.popup()?.close();
+            this.store.dispatch(new SetSelectedView(view));
+        });
+    }
+    onValueChange(value) {
+        if (!value) {
+            return;
+        }
+        this.viewName.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsSaveComponent, deps: [{ token: i1$d.Store }, { token: i1$7.Router }, { token: i1$7.ActivatedRoute }, { token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, 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-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? '' : ('kit.views.noUnsavedChanges' | translate)\"\n            [label]=\"'kit.views.save' | translate\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          popupClass=\"grid-views-save\"\n          [anchor]=\"anchor()\"\n          [content]=\"content\"\n          [showFooter]=\"true\"\n          [applyButtonLabel]=\"'kit.views.save' | translate\"\n          [cancelButtonLabel]=\"'kit.views.cancel' | translate\"\n          [isApplyButtonDisabled]=\"!viewName() || !isViewNameValid\"\n          (onApply)=\"onViewSave()\">\n</kit-popup>\n\n<ng-template #content>\n  <kit-autocomplete [placeholder]=\"'kit.views.enterText' | translate\"\n                    [allowCustom]=\"true\"\n                    [items]=\"viewsAutocompleteItems() ?? []\"\n                    [closePopupIfDataNotFound]=\"true\"\n                    [invalid]=\"!isViewNameValid\"\n                    [messageText]=\"inputMessage\"\n                    (filterChanged)=\"onValueChange($event)\"\n                    (valueChanged)=\"viewName.set($event)\"\n                    (selectionChanged)=\"onValueChange($event)\"\n  ></kit-autocomplete>\n</ng-template>\n", styles: ["::ng-deep .grid-views-save{display:flex;flex-direction:column;width:344px}::ng-deep .grid-views-save .k-popup .footer{margin-top:30px;padding-top:30px}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitAutocompleteModule }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsSaveComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid-views-save', imports: [
+                        KitButtonModule,
+                        KitPopupComponent,
+                        KitAutocompleteModule,
+                        TranslateModule,
+                        KitTooltipDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? '' : ('kit.views.noUnsavedChanges' | translate)\"\n            [label]=\"'kit.views.save' | translate\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          popupClass=\"grid-views-save\"\n          [anchor]=\"anchor()\"\n          [content]=\"content\"\n          [showFooter]=\"true\"\n          [applyButtonLabel]=\"'kit.views.save' | translate\"\n          [cancelButtonLabel]=\"'kit.views.cancel' | translate\"\n          [isApplyButtonDisabled]=\"!viewName() || !isViewNameValid\"\n          (onApply)=\"onViewSave()\">\n</kit-popup>\n\n<ng-template #content>\n  <kit-autocomplete [placeholder]=\"'kit.views.enterText' | translate\"\n                    [allowCustom]=\"true\"\n                    [items]=\"viewsAutocompleteItems() ?? []\"\n                    [closePopupIfDataNotFound]=\"true\"\n                    [invalid]=\"!isViewNameValid\"\n                    [messageText]=\"inputMessage\"\n                    (filterChanged)=\"onValueChange($event)\"\n                    (valueChanged)=\"viewName.set($event)\"\n                    (selectionChanged)=\"onValueChange($event)\"\n  ></kit-autocomplete>\n</ng-template>\n", styles: ["::ng-deep .grid-views-save{display:flex;flex-direction:column;width:344px}::ng-deep .grid-views-save .k-popup .footer{margin-top:30px;padding-top:30px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$7.Router }, { type: i1$7.ActivatedRoute }, { type: i1$b.TranslateService }] });
+
+class KitGridViewsComponent {
+    constructor(store, activatedRoute, router, destroyRef, titleCasePipe) {
+        this.store = store;
+        this.activatedRoute = activatedRoute;
+        this.router = router;
+        this.destroyRef = destroyRef;
+        this.titleCasePipe = titleCasePipe;
+        this.viewGroup = input.required();
+        this.viewConfigGroup = input.required();
+        this.defaultColumns = input.required();
+        this.defaultViewName = input.required();
+        this.defaultSorting = input.required();
+        this.systemViews = input.required();
+        this.viewChanged = new EventEmitter();
+        this.currentViewName$ = combineLatest([
+            this.activatedRoute.params.pipe(map(params => params['view'] && decodeViewNameFromUrl(params['view']))),
+            this.activatedRoute.data.pipe(map(data => data['view'])),
+        ]).pipe(map(([viewParam, viewData,]) => viewParam ?? viewData));
+        this.viewsState$ = this.store.select(KIT_GRID_VIEWS_STATE_TOKEN);
+        this.views$ = this.store.select(KitGridViewsState.getViews());
+        this.viewsAutocompleteItems$ = this.views$.pipe(map(views => filterDuplicateGridViews(views)), map(views => views.map(({ title }) => ({
+            text: this.titleCasePipe.transform(title),
+            value: title,
+        }))));
+    }
+    ngOnInit() {
+        this.fetchViews();
+        this.handleViewOnRouteChange();
+        this.store.select(KitGridViewsState.selectedView).subscribe(view => {
+            view && this.updateGridState(view);
+        });
+    }
+    ngOnDestroy() {
+        this.store.dispatch(new StateReset(KitGridViewsState));
+    }
+    fetchViews() {
+        this.store.dispatch([
+            new FetchGridViews({
+                group: this.viewGroup(),
+                defaultItems: this.systemViews(),
+            }),
+            new FetchGridViewsConfig(this.viewConfigGroup()),
+        ]);
+    }
+    handleViewOnRouteChange() {
+        this.currentViewName$.pipe(combineLatestWith(this.views$), filter(([_, views,]) => !!views.length), distinctUntilChanged(([prevViewName], [currViewName]) => prevViewName === currViewName), takeUntilDestroyed(this.destroyRef)).subscribe(([viewName, views,]) => this.handleViewChange(viewName, views));
+    }
+    handleViewChange(viewName, views) {
+        if (viewName !== viewName.toLowerCase()) {
+            return navigateToView(viewName, this.router, this.activatedRoute);
+        }
+        const currentView = findGridViewByName(views, viewName);
+        if (!currentView) {
+            navigateToView(this.defaultViewName(), this.router, this.activatedRoute);
+            return;
+        }
+        if (!this.store.selectSnapshot(KitGridViewsState.selectedView)) {
+            this.store.dispatch(new SetSelectedView(currentView));
+        }
+    }
+    updateGridState(view) {
+        this.store.dispatch([
+            new SetGridSort(view?.value?.sort ?? this.defaultSorting()),
+            new SetGridFilters(convertFilterStringDate(view?.value?.filter ?? [])),
+            new SetGridColumns(buildGridColumns(this.defaultColumns(), view?.value?.columns ?? this.defaultColumns())),
+            new SetGridSkip(0),
+        ]).subscribe(() => this.viewChanged.emit());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, deps: [{ token: i1$d.Store }, { token: i1$7.ActivatedRoute }, { token: i1$7.Router }, { token: i0.DestroyRef }, { token: i1$1.TitleCasePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsComponent, isStandalone: true, selector: "kit-grid-views", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, systemViews: { classPropertyName: "systemViews", publicName: "systemViews", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { viewChanged: "viewChanged" }, providers: [
+            TitleCasePipe,
+        ], ngImport: i0, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      @if (views$ | async; as views) {\n        <kit-grid-views-list [viewGroup]=\"viewGroup()\"\n                             [viewConfigGroup]=\"viewConfigGroup()\"\n                             [views]=\"views\"\n                             [defaultColumns]=\"defaultColumns()\"\n                             [defaultViewName]=\"defaultViewName()\"\n                             [defaultSorting]=\"defaultSorting()\"\n        ></kit-grid-views-list>\n\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n        ></kit-grid-views-save>\n      }\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n", styles: [".kit-grid-views{display:flex;align-items:center;gap:16px}.kit-grid-views .popup-content{display:flex;flex-direction:column;width:296px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KitGridViewsListComponent, selector: "kit-grid-views-list", inputs: ["viewGroup", "viewConfigGroup", "views", "defaultColumns", "defaultSorting", "defaultViewName"] }, { kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid-views', imports: [
+                        AsyncPipe,
+                        KitGridViewsListComponent,
+                        KitSkeletonModule,
+                        KitGridViewsSaveComponent,
+                    ], providers: [
+                        TitleCasePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      @if (views$ | async; as views) {\n        <kit-grid-views-list [viewGroup]=\"viewGroup()\"\n                             [viewConfigGroup]=\"viewConfigGroup()\"\n                             [views]=\"views\"\n                             [defaultColumns]=\"defaultColumns()\"\n                             [defaultViewName]=\"defaultViewName()\"\n                             [defaultSorting]=\"defaultSorting()\"\n        ></kit-grid-views-list>\n\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n        ></kit-grid-views-save>\n      }\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n", styles: [".kit-grid-views{display:flex;align-items:center;gap:16px}.kit-grid-views .popup-content{display:flex;flex-direction:column;width:296px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$7.ActivatedRoute }, { type: i1$7.Router }, { type: i0.DestroyRef }, { type: i1$1.TitleCasePipe }], propDecorators: { viewChanged: [{
+                type: Output
+            }] } });
+
+class KitFilterSelectorComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.items = input([]);
+        this.itemSelected = output();
+        this.anchor = viewChild.required('toggleButton', { read: ElementRef });
+        this.popup = viewChild('popup', { read: KitPopupComponent });
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitSvgIconType = KitSvgIconType;
+        this.kitTextboxSize = KitTextboxSize;
+        this.kitPillType = KitPillType;
+        this.searchTerm = signal('');
+        this.filterItems = computed(() => this.items()
+            .filter(item => this.translateService.instant(item.title).toLowerCase().startsWith(this.searchTerm())));
+    }
+    onSearchChange(value) {
+        this.searchTerm.set(value);
+    }
+    onItemClick(item) {
+        this.itemSelected.emit(item);
+        this.searchTerm.set('');
+        this.popup()?.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterSelectorComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, 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: "<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(--color-grey-6)}::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(--color-grey-7);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--color-grey-4)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--color-grey-4);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(--color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--color-grey-8);pointer-events:none}\n"], dependencies: [{ kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-filter-selector', imports: [
+                        KitPopupComponent,
+                        TranslateModule,
+                        KitTextboxModule,
+                        KitPillComponent,
+                    ], 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(--color-grey-6)}::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(--color-grey-7);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--color-grey-4)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--color-grey-4);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(--color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--color-grey-8);pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$b.TranslateService }] });
+
+class KitFilterCheckboxComponent {
+    constructor() {
+        this.filter = input.required();
+        this.translateKeyPrefix = input('');
+        this.items = model([]);
+        this.filterRemoved = output();
+        this.filterChanged = output();
+        this.anchor = viewChild.required('toggleButton', { read: ElementRef });
+        this.popup = viewChild('popup', { read: KitPopupComponent });
+        this.kitTooltipPosition = KitTooltipPosition;
+        this.selectedValues = signal([]);
+        this.kitPillTheme = KitPillTheme;
+    }
+    ngOnInit() {
+        this.initializeSelectedValues();
+        this.updateItemsState();
+        this.showPopupOnInit();
+    }
+    removeFilter() {
+        this.popup()?.close();
+        this.filterRemoved.emit();
+    }
+    applyButtonDisabled() {
+        return !this.items().some(item => item.checked);
+    }
+    clearAllFilters() {
+        this.items.update(items => items.map(item => ({
+            ...item,
+            checked: false,
+        })));
+    }
+    applyFilter() {
+        const checkedValues = this.items().filter(item => item.checked).map(item => item.value);
+        const checked = {
+            logic: KitFilterLogic.OR,
+            filters: checkedValues.map(value => ({
+                field: this.filter().field,
+                operator: KitFilterOperator.EQ,
+                value,
+            })),
+        };
+        this.filterChanged.emit(checked);
+        this.selectedValues.set(checkedValues);
+    }
+    onPopupToggle() {
+        this.popup()?.toggle();
+    }
+    close() {
+        if (!this.filter().value && !this.selectedValues().length) {
+            this.removeFilter();
+        }
+        else {
+            this.updateItemsState();
+        }
+    }
+    buildTranslateKey(value) {
+        return `${this.translateKeyPrefix()}${value}`;
+    }
+    onChange() {
+        this.items.set([...this.items()]);
+    }
+    initializeSelectedValues() {
+        this.selectedValues.set(this.filter().value?.filters.map(item => item.value) ?? []);
+    }
+    updateItemsState() {
+        this.items.update(items => items.map(item => ({
+            ...item,
+            checked: this.selectedValues().includes(item.value) ?? false,
+        })));
+    }
+    showPopupOnInit() {
+        if (!this.selectedValues().length) {
+            requestAnimationFrame(() => this.onPopupToggle());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", 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: "<div class=\"kit-filter-checkbox\">\n  <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    @if (selectedValues().length) {\n      @if (selectedValues().length > 1) {\n        <div class=\"tooltip\"\n             kitTooltip\n             kitTooltipFilter=\".tooltip\"\n             [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n             [kitTooltipTemplateRef]=\"tooltipTemplate\">\n          {{ buildTranslateKey(selectedValues()[0]) | translate }}\n          <span class=\"tooltip-count\">+{{ selectedValues().length - 1 }}</span>\n        </div>\n      } @else {\n        {{ buildTranslateKey(selectedValues()[0]) | translate }}\n      }\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'common.apply' | translate\"\n           [cancelButtonLabel]=\"'common.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of selectedValues() | slice: 1; track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--color-main)}.kit-filter-checkbox .tooltip-item{color:var(--color-grey-4);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-filter-checkbox', imports: [
+                        KitPillComponent,
+                        KitTextboxModule,
+                        TranslateModule,
+                        KitCheckboxModule,
+                        KitTooltipDirective,
+                        SlicePipe,
+                        FormsModule,
+                        KitPopupComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n  <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    @if (selectedValues().length) {\n      @if (selectedValues().length > 1) {\n        <div class=\"tooltip\"\n             kitTooltip\n             kitTooltipFilter=\".tooltip\"\n             [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n             [kitTooltipTemplateRef]=\"tooltipTemplate\">\n          {{ buildTranslateKey(selectedValues()[0]) | translate }}\n          <span class=\"tooltip-count\">+{{ selectedValues().length - 1 }}</span>\n        </div>\n      } @else {\n        {{ buildTranslateKey(selectedValues()[0]) | translate }}\n      }\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'common.apply' | translate\"\n           [cancelButtonLabel]=\"'common.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of selectedValues() | slice: 1; track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--color-main)}.kit-filter-checkbox .tooltip-item{color:var(--color-grey-4);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
+        }] });
+
+class KitFilterDateComponent {
+    constructor() {
+        this.filter = input.required();
+        this.filterRemoved = output();
+        this.filterChanged = output();
+        this.anchor = viewChild.required('toggleButton', { read: ElementRef });
+        this.popup = viewChild('popup', { read: KitPopupComponent });
+        this.startDate = signal(undefined);
+        this.endDate = signal(undefined);
+        this.selectedValues = signal({});
+        this.pillDateFormat = 'dd/MM/yy';
+        this.kitPillTheme = KitPillTheme;
+    }
+    documentClick(event) {
+        const datePicker = document.querySelector('.kit-datepicker-popup');
+        const popupElement = this.popup()?.popupHTMLElement;
+        const isClickOutsideDatePicker = !datePicker?.contains(event.target) &&
+            !event.target.matches('.k-link') &&
+            !event.target?.parentElement?.parentElement?.matches('.k-calendar-nav');
+        if (!popupElement?.contains(event.target)
+            && !this.anchor()?.nativeElement.contains(event.target)
+            && isClickOutsideDatePicker) {
+            this.popup()?.close();
+        }
+    }
+    ngOnInit() {
+        this.initializeSelectedValues();
+        this.showPopupOnInit();
+    }
+    removeFilter() {
+        this.popup()?.close();
+        this.filterRemoved.emit();
+    }
+    onPopupToggle() {
+        this.popup()?.toggle();
+    }
+    close() {
+        if (!this.filter().value && !(this.selectedValues().start || this.selectedValues().end)) {
+            this.removeFilter();
+        }
+        else {
+            const [startFilter, endFilter,] = this.filter().value?.filters || [];
+            this.startDate.set(startFilter?.value);
+            this.endDate.set(endFilter?.value);
+        }
+    }
+    onFromDateChange(date) {
+        this.startDate.set(date);
+    }
+    onToDateChange(date) {
+        this.endDate.set(date);
+    }
+    applyButtonDisabled() {
+        return !this.startDate() && !this.endDate();
+    }
+    clearAllFilters() {
+        this.startDate.set(undefined);
+        this.endDate.set(undefined);
+    }
+    applyFilter() {
+        const dates = {
+            ...this.startDate() && { start: this.startDate() },
+            ...this.endDate() && { end: this.endDate() },
+        };
+        const filterValue = {
+            logic: KitFilterLogic.AND,
+            filters: [
+                {
+                    field: this.filter().field,
+                    operator: KitFilterOperator.GTE,
+                    value: dates.start,
+                },
+                {
+                    field: this.filter().field,
+                    operator: KitFilterOperator.LTE,
+                    value: dates.end,
+                },
+            ],
+        };
+        this.filterChanged.emit(filterValue);
+        this.selectedValues.set(dates);
+    }
+    initializeSelectedValues() {
+        const filterValue = this.filter().value?.filters ?? null;
+        this.selectedValues.set({
+            start: filterValue?.[0]?.value,
+            end: filterValue?.[1]?.value,
+        });
+        this.startDate.set(this.selectedValues()?.start);
+        this.endDate.set(this.selectedValues()?.end);
+    }
+    showPopupOnInit() {
+        if (!this.selectedValues()?.start && !this.selectedValues()?.end) {
+            requestAnimationFrame(() => this.onPopupToggle());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "documentClick($event)" } }, 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: "<div class=\"kit-filter-date\">\n  <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    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"startDate()\"\n                      [max]=\"endDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"endDate()\"\n                      [min]=\"startDate()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-filter-date', imports: [
+                        KitPillComponent,
+                        TranslateModule,
+                        KitDatepickerModule,
+                        DatePipe,
+                        KitPopupComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-date\">\n  <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    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"startDate()\"\n                      [max]=\"endDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"endDate()\"\n                      [min]=\"startDate()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"] }]
+        }], propDecorators: { documentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class KitFilterTextComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.filter = input.required();
+        this.filterRemoved = output();
+        this.filterChanged = output();
+        this.anchor = viewChild.required('toggleButton', { read: ElementRef });
+        this.popup = viewChild('popup', { read: KitPopupComponent });
+        this.kitDropdownSize = KitDropdownSize;
+        this.kitTextboxSize = KitTextboxSize;
+        this.filterLogicDropdownItems = Object.values(KitFilterLogic).map(item => ({
+            text: this.translateService.instant(`kit.filters.logic.${item}`),
+            value: item,
+        }));
+        this.filterOperatorDropdownItems = filterOperators.map(item => ({
+            text: this.translateService.instant(`kit.filters.operator.${item}`),
+            value: item,
+        }));
+        this.filterItems = signal({
+            logic: KitFilterLogic.AND,
+            filters: [],
+        });
+        this.selectedValues = signal(null);
+        this.kitPillTheme = KitPillTheme;
+    }
+    ngOnInit() {
+        this.initializeSelectedValues();
+        this.showPopupOnInit();
+    }
+    get applyButtonDisabled() {
+        return !this.hasActiveFilters();
+    }
+    onLogicChange(event) {
+        this.filterItems.update(items => ({
+            ...items,
+            logic: event,
+        }));
+    }
+    onOperatorSelect(event, index) {
+        this.updateFilterItem(index, { operator: event });
+    }
+    onValueChange(event, index) {
+        this.updateFilterItem(index, { value: event.trim() });
+    }
+    removeFilter() {
+        this.popup()?.close();
+        this.filterRemoved.emit();
+    }
+    onPopupToggle() {
+        this.popup()?.toggle();
+    }
+    close() {
+        if (!this.hasActiveFilters() || !this.selectedValues()) {
+            this.removeFilter();
+        }
+    }
+    clearAllFilters() {
+        this.resetFiltersItems();
+    }
+    applyFilter() {
+        this.selectedValues.set(this.filterItems());
+        this.filterChanged.emit(this.filterItems());
+    }
+    isFilterValueTextboxDisabled(index) {
+        return this.hasNoValueRequiredOperator(this.filterItems().filters[index].operator);
+    }
+    getSelectedFilterText(filter) {
+        if (this.hasNoValueRequiredOperator(filter.operator)) {
+            return this.translateService.instant(`kit.filters.operator.${filter.operator}`);
+        }
+        return filter.value ?? '';
+    }
+    getSelectedLogicText(selectedValues) {
+        if (!selectedValues) {
+            return null;
+        }
+        const [firstFilter, secondFilter,] = selectedValues.filters;
+        if (this.hasSelectedFilter(firstFilter) && this.hasSelectedFilter(secondFilter)) {
+            return this.translateService.instant(`kit.filters.logic.${selectedValues.logic}`).toLowerCase();
+        }
+        return null;
+    }
+    hasNoValueRequiredOperator(operator) {
+        return kitNoValueRequiredFilterOperators.includes(operator);
+    }
+    initializeSelectedValues() {
+        const filterValue = this.filter().value;
+        if (filterValue) {
+            this.selectedValues.set(filterValue);
+            this.filterItems.set(filterValue);
+        }
+        else {
+            this.resetFiltersItems();
+        }
+    }
+    resetFiltersItems() {
+        const field = this.filter().field;
+        this.filterItems.update(() => ({
+            logic: KitFilterLogic.AND,
+            filters: [
+                this.createFilterItem(field),
+                this.createFilterItem(field),
+            ],
+        }));
+    }
+    showPopupOnInit() {
+        if (!this.hasActiveFilters()) {
+            requestAnimationFrame(() => this.onPopupToggle());
+        }
+    }
+    createFilterItem(field) {
+        return {
+            field,
+            value: '',
+            operator: KitFilterOperator.CONTAINS,
+        };
+    }
+    updateFilterItem(index, update) {
+        this.filterItems.update(items => ({
+            ...items,
+            filters: items.filters.map((item, i) => (i === index && { ...item, ...update } || item)),
+        }));
+    }
+    hasActiveFilters() {
+        return this.filterItems().filters.some(filter => this.hasSelectedFilter(filter));
+    }
+    hasSelectedFilter(filter) {
+        return this.hasNoValueRequiredOperator(filter.operator) || !!filter.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterTextComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterTextComponent, isStandalone: true, selector: "kit-filter-text", 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  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-text-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           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"filterOperatorDropdownItems\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          <kit-textbox class=\"filter-item-value\"\n                       [size]=\"kitTextboxSize.SMALL\"\n                       [defaultValue]=\"item.value\"\n                       [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                       (changed)=\"onValueChange($event, $index)\"\n          ></kit-textbox>\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-text-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-text-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-text-popup .filter-item-value{flex:1}::ng-deep .kit-filter-text-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-text-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "size"], outputs: ["selected"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-filter-text', imports: [
+                        KitDropdownModule,
+                        KitTextboxModule,
+                        KitPillComponent,
+                        TranslateModule,
+                        ReactiveFormsModule,
+                        KitPopupComponent,
+                    ], 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  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-text-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           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"filterOperatorDropdownItems\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          <kit-textbox class=\"filter-item-value\"\n                       [size]=\"kitTextboxSize.SMALL\"\n                       [defaultValue]=\"item.value\"\n                       [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                       (changed)=\"onValueChange($event, $index)\"\n          ></kit-textbox>\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-text-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-text-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-text-popup .filter-item-value{flex:1}::ng-deep .kit-filter-text-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-text-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$b.TranslateService }] });
+
+class KitGridFiltersComponent {
+    constructor(store) {
+        this.store = store;
+        this.excludedColumns = input.required();
+        this.columns = input.required();
+        this.checkboxConfig = input.required();
+        this.filterChanged = output();
+        this.kitFilterType = KitFilterType;
+        this.filters = toSignal(this.store.select(KIT_GRID_STATE_TOKEN).pipe(map(gridData => gridData.filter)), { initialValue: [] });
+        this.filterSelectorItems = computed(() => this.columns()
+            .filter(item => !item.hidden)
+            .filter(item => !this.excludedColumns().includes(item.field))
+            .map(item => this.buildFilterSelectorItem(item, this.filters())));
+    }
+    addFilter(item) {
+        this.store.dispatch(new AddGridFilter({
+            title: item.title,
+            field: item.field,
+            type: item.filterType,
+            value: null,
+        }));
+    }
+    removeFilter(field) {
+        this.store.dispatch(new RemoveGridFilter(field));
+        this.filterChanged.emit();
+    }
+    applyFilter(filter, values) {
+        this.store.dispatch([
+            new UpdateGridFilter({
+                ...filter,
+                value: values,
+            }),
+            new SetGridSkip(0),
+        ]);
+        this.filterChanged.emit();
+    }
+    buildFilterSelectorItem(item, filters) {
+        return {
+            title: item.title,
+            field: item.field,
+            disabled: this.isFilterSelectorItemDisabled(item, filters),
+            filterType: item.filterType,
+        };
+    }
+    ;
+    isFilterSelectorItemDisabled(item, filters) {
+        return filters.some(filter => filter.field === item.field);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridFiltersComponent, deps: [{ token: i1$d.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", 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 }, checkboxConfig: { classPropertyName: "checkboxConfig", publicName: "checkboxConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterChanged: "filterChanged" }, 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]=\"checkboxConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"checkboxConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-text [filter]=\"item\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-text>\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"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterDateComponent, selector: "kit-filter-date", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterTextComponent, selector: "kit-filter-text", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridFiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid-filters', standalone: true, imports: [
+                        KitFilterSelectorComponent,
+                        KitFilterCheckboxComponent,
+                        KitFilterDateComponent,
+                        KitFilterTextComponent,
+                    ], 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]=\"checkboxConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"checkboxConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-text [filter]=\"item\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-text>\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"] }]
+        }], ctorParameters: () => [{ type: i1$d.Store }] });
+
 // KitButton
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridModule, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID, kitDataStateToODataString };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, KIT_BASE_PATH, KIT_GRID_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridFiltersComponent, KitGridModule, KitGridSortSettingsMode, KitGridState, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, RemoveGridFilter, SetGridColumns, SetGridSkip, SetGridSort, UpdateGridFilter, buildRandomUUID, kitBuildCheckboxFilterItems, kitBuildFilters, kitBuildGridColumn, kitBuildOdataFilter, kitDataStateToODataString, kitEncodeViewNameToUrl, kitNoValueRequiredFilterOperators };
 //# sourceMappingURL=indigina-ui-kit.mjs.map