@indigina/ui-kit 1.1.157 → 1.1.159

package/fesm2022/indigina-ui-kit.mjs

@@ -7148,6 +7148,7 @@ class KitGridViewsSaveComponent {
         this.viewGroup = input.required();
         this.views = input.required();
         this.viewsAutocompleteItems = input.required();
+        this.resetQueryParams = output();
         this.anchor = viewChild.required('toggleButton', { read: ElementRef });
         this.popup = viewChild('popup', { read: KitPopupComponent });
         this.viewName = signal('');
@@ -7200,6 +7201,7 @@ class KitGridViewsSaveComponent {
         this.store.dispatch(new AddGridView(view)).subscribe(() => {
             this.hasUnsavedChanges.set(false);
             const path = kitEncodeViewNameToUrl(this.viewName().toLowerCase());
+            this.resetQueryParams.emit();
             return this.router.navigate([`../${path}`], { relativeTo: this.activatedRoute }).then(() => {
                 this.viewName.set('');
                 this.popup()?.close();
@@ -7214,7 +7216,7 @@ class KitGridViewsSaveComponent {
         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$a.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$a.TranslatePipe, name: "translate" }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 } }, outputs: { resetQueryParams: "resetQueryParams" }, 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$a.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,
@@ -7340,6 +7342,7 @@ class KitGridViewsComponent {
         this.selectedView = this.store.selectSignal(KitGridViewsState.selectedView);
         this.collapsedListDropdownText = signal(this.translateService.instant('kit.views.newView'));
         this.skipQueryParamsUpdate = signal(false);
+        this.needToResetQueryParams = signal(false);
         effect(() => {
             this.collapsedListDropdownText.set(this.translateService.instant(this.collapsedList()?.dropdownItems().length ? 'kit.views.moreViews' : 'kit.views.newView'));
         });
@@ -7361,6 +7364,7 @@ class KitGridViewsComponent {
         return messageKey && this.translateService.instant(messageKey) || '';
     }
     onSelectView(selectedView) {
+        this.resetQueryParams();
         this.navigateToView(selectedView.title, selectedView.type);
     }
     openViewsManagerModal() {
@@ -7373,12 +7377,13 @@ class KitGridViewsComponent {
         signalSetFn(this.kitDialogService.dialogInstance.configGroup[SIGNAL], this.viewConfigGroup());
         this.kitDialogService.dialogRef?.result.pipe(filter(result => !(result instanceof DialogCloseResult))).subscribe(() => {
             const views = this.store.selectSnapshot(KitGridViewsState.getViews());
-            const view = findGridViewByName(views, this.selectedView()?.title ?? '');
+            const view = findGridViewByName(views, this.selectedView()?.title ?? '', this.selectedView()?.type);
             if (view) {
                 this.store.dispatch(new SetSelectedView(view));
             }
             else {
                 const defaultView = findGridViewByName(views, this.defaultViewName());
+                this.resetQueryParams();
                 this.navigateToView(this.defaultViewName(), this.selectedView()?.type).then(() => {
                     defaultView && this.store.dispatch(new SetSelectedView(defaultView));
                 });
@@ -7397,6 +7402,7 @@ class KitGridViewsComponent {
             },
         };
         this.store.dispatch(new AddGridView(view)).subscribe(() => {
+            this.resetQueryParams();
             this.navigateToView(this.createNewViewName()).then(() => {
                 this.createNewViewName.set('');
                 this.createNewViewPopup()?.close();
@@ -7409,6 +7415,9 @@ class KitGridViewsComponent {
         this.collapsedList()?.kitDropdownComponent()?.dropdown?.toggle();
         requestAnimationFrame(() => this.createNewViewPopup()?.toggle());
     }
+    resetQueryParams() {
+        this.needToResetQueryParams.set(true);
+    }
     fetchViews() {
         this.store.dispatch([
             new FetchGridViews({
@@ -7417,6 +7426,7 @@ class KitGridViewsComponent {
             }),
             new FetchGridViewsConfig(this.viewConfigGroup()),
         ]).subscribe(() => {
+            this.resetQueryParams();
             const views = this.store.selectSnapshot(KitGridViewsState.getViews());
             const viewName = this.activatedRoute.snapshot.params['view'] ?? this.activatedRoute.snapshot.data['view'];
             this.handleViewChange(viewName, views);
@@ -7452,7 +7462,7 @@ class KitGridViewsComponent {
         }
         const queryType = this.activatedRoute.snapshot.queryParams['type'];
         const preferredType = queryType ?? KitGridViewType.USER;
-        const currentView = findGridViewByName(views, viewName, preferredType);
+        const currentView = findGridViewByName(views, decodeViewNameFromUrl(viewName), preferredType);
         if (!currentView) {
             this.navigateToView(this.defaultViewName(), this.selectedView()?.type);
             return;
@@ -7463,13 +7473,14 @@ class KitGridViewsComponent {
     }
     updateGridState(view) {
         const urlState = this.kitGridUrlStateService.getGridStateFromUrl();
+        const state = this.buildGridDataState(view, urlState);
         this.store.dispatch([
-            new SetGridSort(urlState.sort ?? view?.viewState?.sort ?? this.defaultSorting()),
-            new SetGridFilters(convertFilterStringDate(urlState.filter ?? view?.viewState?.filter ?? [])),
-            new SetGridColumns(buildGridColumns(this.defaultColumns(), view?.viewState?.columns ?? this.defaultColumns())),
-            new SetGridSkip(urlState.skip ?? 0),
-            new SetGridTake(urlState.take ?? 10),
-            new SetGridSearch(urlState.search),
+            new SetGridSort(state.sort),
+            new SetGridFilters(state.filter),
+            new SetGridColumns(state.columns),
+            new SetGridSkip(state.skip),
+            new SetGridTake(state.take),
+            new SetGridSearch(state.search),
         ]).subscribe(() => {
             if (urlState?.skip === undefined) {
                 this.skipQueryParamsUpdate.set(true);
@@ -7490,15 +7501,36 @@ class KitGridViewsComponent {
         return this.router.navigate([`../${routePath}`], {
             relativeTo: this.activatedRoute,
             queryParams: { type },
-            queryParamsHandling: 'merge',
         });
     }
     ;
+    buildGridDataState(view, urlState) {
+        const viewState = view.viewState ?? {};
+        const reset = this.needToResetQueryParams();
+        const defaults = {
+            skip: 0,
+            take: 10,
+            sort: this.defaultSorting(),
+            filter: [],
+            columns: this.defaultColumns(),
+        };
+        const skip = urlState.skip ?? defaults.skip;
+        const take = urlState.take ?? defaults.take;
+        const sort = reset ? viewState.sort ?? defaults.sort : urlState.sort ?? defaults.sort;
+        const filterSource = reset ? viewState.filter : urlState.filter ?? null;
+        const filter = convertFilterStringDate(filterSource ?? []);
+        const columns = buildGridColumns(defaults.columns, viewState.columns ?? defaults.columns);
+        const search = urlState.search ?? undefined;
+        if (reset) {
+            this.needToResetQueryParams.set(false);
+        }
+        return { skip, take, sort, filter, columns, search };
+    }
     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 }, { token: KitDialogService }, { token: i1$a.TranslateService }, { token: i0.ViewContainerRef }, { token: KitGridUrlStateService }], 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,
             KitGridUrlStateService,
-        ], viewQueries: [{ propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], 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        <div class=\"views-list\">\n          <kit-collapsed-list #toggleButton\n                              [itemList]=\"collapsedListItems()\"\n                              [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                              [lineHeight]=\"32\"\n                              [itemTemplate]=\"collapsedListItem\"\n                              [dropdownFooterTemplate]=\"dropdownFooter\"\n                              [dropdownItemTemplate]=\"dropdownItem\"\n                              [alwaysShowDropdown]=\"true\"\n                              (onSelectItem)=\"onSelectView($event)\"/>\n        </div>\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\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n  <div class=\"dropdown-footer\">\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)=\"onPopupToggle()\"/>\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  </div>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(collapsedList()?.dropdown())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.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)=\"createNewViewPopup()?.close()\"\n      ></kit-button>\n      <kit-button [label]=\"'kit.views.save' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"!createNewViewName() || !isViewNameValid\"\n                  (clicked)=\"onViewCreate()\"\n      ></kit-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n  <div class=\"views-item\"\n       [ngClass]=\"dataItem.type\"\n       [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n    <kit-svg-icon class=\"view-icon\"\n                [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n    ></kit-svg-icon>\n    <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n    <kit-svg-icon class=\"check-icon\"\n                [icon]=\"kitSvgIcon.CHECK\"\n    ></kit-svg-icon>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup){color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item.k-selected{color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected){background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.user .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.system .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system.active .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user.active .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { 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"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown"], outputs: ["onSelectItem"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { 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: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], 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        <div class=\"views-list\">\n          <kit-collapsed-list #toggleButton\n                              [itemList]=\"collapsedListItems()\"\n                              [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                              [lineHeight]=\"32\"\n                              [itemTemplate]=\"collapsedListItem\"\n                              [dropdownFooterTemplate]=\"dropdownFooter\"\n                              [dropdownItemTemplate]=\"dropdownItem\"\n                              [alwaysShowDropdown]=\"true\"\n                              (onSelectItem)=\"onSelectView($event)\"/>\n        </div>\n\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n      }\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n  <div class=\"dropdown-footer\">\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)=\"onPopupToggle()\"/>\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  </div>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(collapsedList()?.dropdown())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.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)=\"createNewViewPopup()?.close()\"\n      ></kit-button>\n      <kit-button [label]=\"'kit.views.save' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"!createNewViewName() || !isViewNameValid\"\n                  (clicked)=\"onViewCreate()\"\n      ></kit-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n  <div class=\"views-item\"\n       [ngClass]=\"dataItem.type\"\n       [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n    <kit-svg-icon class=\"view-icon\"\n                [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n    ></kit-svg-icon>\n    <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n    <kit-svg-icon class=\"check-icon\"\n                [icon]=\"kitSvgIcon.CHECK\"\n    ></kit-svg-icon>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup){color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item.k-selected{color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected){background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.user .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.system .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system.active .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user.active .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { 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"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown"], outputs: ["onSelectItem"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { 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: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, decorators: [{
             type: Component,
@@ -7517,7 +7549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     ], providers: [
                         TitleCasePipe,
                         KitGridUrlStateService,
-                    ], 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        <div class=\"views-list\">\n          <kit-collapsed-list #toggleButton\n                              [itemList]=\"collapsedListItems()\"\n                              [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                              [lineHeight]=\"32\"\n                              [itemTemplate]=\"collapsedListItem\"\n                              [dropdownFooterTemplate]=\"dropdownFooter\"\n                              [dropdownItemTemplate]=\"dropdownItem\"\n                              [alwaysShowDropdown]=\"true\"\n                              (onSelectItem)=\"onSelectView($event)\"/>\n        </div>\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\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n  <div class=\"dropdown-footer\">\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)=\"onPopupToggle()\"/>\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  </div>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(collapsedList()?.dropdown())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.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)=\"createNewViewPopup()?.close()\"\n      ></kit-button>\n      <kit-button [label]=\"'kit.views.save' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"!createNewViewName() || !isViewNameValid\"\n                  (clicked)=\"onViewCreate()\"\n      ></kit-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n  <div class=\"views-item\"\n       [ngClass]=\"dataItem.type\"\n       [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n    <kit-svg-icon class=\"view-icon\"\n                [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n    ></kit-svg-icon>\n    <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n    <kit-svg-icon class=\"check-icon\"\n                [icon]=\"kitSvgIcon.CHECK\"\n    ></kit-svg-icon>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup){color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item.k-selected{color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected){background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.user .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.system .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system.active .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user.active .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"] }]
+                    ], 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        <div class=\"views-list\">\n          <kit-collapsed-list #toggleButton\n                              [itemList]=\"collapsedListItems()\"\n                              [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                              [lineHeight]=\"32\"\n                              [itemTemplate]=\"collapsedListItem\"\n                              [dropdownFooterTemplate]=\"dropdownFooter\"\n                              [dropdownItemTemplate]=\"dropdownItem\"\n                              [alwaysShowDropdown]=\"true\"\n                              (onSelectItem)=\"onSelectView($event)\"/>\n        </div>\n\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n      }\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n  <div class=\"dropdown-footer\">\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)=\"onPopupToggle()\"/>\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  </div>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(collapsedList()?.dropdown())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.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)=\"createNewViewPopup()?.close()\"\n      ></kit-button>\n      <kit-button [label]=\"'kit.views.save' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"!createNewViewName() || !isViewNameValid\"\n                  (clicked)=\"onViewCreate()\"\n      ></kit-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n  <div class=\"views-item\"\n       [ngClass]=\"dataItem.type\"\n       [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n    <kit-svg-icon class=\"view-icon\"\n                [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n    ></kit-svg-icon>\n    <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n    <kit-svg-icon class=\"check-icon\"\n                [icon]=\"kitSvgIcon.CHECK\"\n    ></kit-svg-icon>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup){color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .k-dropdownlist.dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item.k-selected{color:var(--ui-kit-color-main);border:1px solid var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected){background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.user .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover:not(.k-selected) .views-item.system .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system.active .view-icon{stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user.active .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"] }]
         }], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$7.ActivatedRoute }, { type: i1$7.Router }, { type: i0.DestroyRef }, { type: i1$1.TitleCasePipe }, { type: KitDialogService }, { type: i1$a.TranslateService }, { type: i0.ViewContainerRef }, { type: KitGridUrlStateService }], propDecorators: { viewChanged: [{
                 type: Output
             }] } });
@@ -8255,7 +8287,6 @@ class KitGridExportComponent {
         });
     }
     onExportPDF() {
-        this.isGridExporting.set(false);
         return new Promise((resolve, reject) => {
             this.drawPdf()?.()?.then((exportedPdf) => {
                 if (!this.gridHasData()) {