@indigina/ui-kit 1.1.200 → 1.1.201

package/fesm2022/indigina-ui-kit.mjs

@@ -7640,6 +7640,7 @@ class KitGridViewsComponent {
         this.anchor = viewChild('toggleButton', { read: ElementRef });
         this.collapsedList = viewChild((KitCollapsedListComponent));
         this.createNewViewPopup = viewChild('popup', { read: KitPopupComponent });
+        this.isViewSaving = signal(false);
         this.createNewViewName = signal('');
         this.viewsState$ = this.store.select(KIT_GRID_VIEWS_STATE_TOKEN);
         this.views$ = this.store.select(KitGridViewsState.getViews());
@@ -7717,6 +7718,7 @@ class KitGridViewsComponent {
         });
     }
     onViewCreate() {
+        this.isViewSaving.set(true);
         const view = {
             title: this.createNewViewName(),
             group: this.viewGroup(),
@@ -7733,6 +7735,7 @@ class KitGridViewsComponent {
             this.navigateToView(this.createNewViewName()).then(() => {
                 this.createNewViewName.set('');
                 this.createNewViewPopup()?.close();
+                this.isViewSaving.set(false);
                 this.store.dispatch(new SetSelectedView(view));
             });
         });
@@ -7862,7 +7865,7 @@ class KitGridViewsComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { 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      <div class=\"views-actions\">\n        <kit-button #toggleButton\n                    kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.addView' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"onCreateViewPopupToggle()\"\n        ></kit-button>\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views()\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n        <kit-button kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.manageViews' | translate\"\n                    [icon]=\"kitSvgIcon.VIEWS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n      <div class=\"views-list\">\n        <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                            [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                            [lineHeight]=\"32\"\n                            [gap]=\"0\"\n                            [itemTemplate]=\"collapsedListItem\"\n                            [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n                            (onSelectItem)=\"onSelectView($event)\"/>\n      </div>\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]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n              kitButtonType.GHOST || kitButtonType.LINK\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(anchor())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox class=\"new-view-input\"\n                 [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    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!createNewViewName() || !isViewNameValid\"\n                (clicked)=\"onViewCreate()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::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:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{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{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\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", "dropdownAlign"], outputs: ["onSelectItem"] }, { kind: "ngmodule", type: KitSvgIconModule }, { 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"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { 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      <div class=\"views-actions\">\n        <kit-button #toggleButton\n                    kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.addView' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"onCreateViewPopupToggle()\"\n        ></kit-button>\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views()\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n        <kit-button kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.manageViews' | translate\"\n                    [icon]=\"kitSvgIcon.VIEWS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n      <div class=\"views-list\">\n        <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                            [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                            [lineHeight]=\"32\"\n                            [gap]=\"0\"\n                            [itemTemplate]=\"collapsedListItem\"\n                            [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n                            (onSelectItem)=\"onSelectView($event)\"/>\n      </div>\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]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n              kitButtonType.GHOST || kitButtonType.LINK\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(anchor())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox class=\"new-view-input\"\n                 [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    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n                (clicked)=\"onViewCreate()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::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:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{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{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\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", "dropdownAlign"], outputs: ["onSelectItem"] }, { kind: "ngmodule", type: KitSvgIconModule }, { 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"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGridViewsComponent, decorators: [{
             type: Component,
@@ -7882,7 +7885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], providers: [
                         TitleCasePipe,
                         KitGridUrlStateService,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      <div class=\"views-actions\">\n        <kit-button #toggleButton\n                    kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.addView' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"onCreateViewPopupToggle()\"\n        ></kit-button>\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views()\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n        <kit-button kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.manageViews' | translate\"\n                    [icon]=\"kitSvgIcon.VIEWS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n      <div class=\"views-list\">\n        <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                            [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                            [lineHeight]=\"32\"\n                            [gap]=\"0\"\n                            [itemTemplate]=\"collapsedListItem\"\n                            [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n                            (onSelectItem)=\"onSelectView($event)\"/>\n      </div>\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]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n              kitButtonType.GHOST || kitButtonType.LINK\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(anchor())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox class=\"new-view-input\"\n                 [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    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!createNewViewName() || !isViewNameValid\"\n                (clicked)=\"onViewCreate()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::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:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{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{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      <div class=\"views-actions\">\n        <kit-button #toggleButton\n                    kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.addView' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"onCreateViewPopupToggle()\"\n        ></kit-button>\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views()\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n        <kit-button kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.manageViews' | translate\"\n                    [icon]=\"kitSvgIcon.VIEWS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n      <div class=\"views-list\">\n        <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                            [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                            [lineHeight]=\"32\"\n                            [gap]=\"0\"\n                            [itemTemplate]=\"collapsedListItem\"\n                            [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n                            (onSelectItem)=\"onSelectView($event)\"/>\n      </div>\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]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n              kitButtonType.GHOST || kitButtonType.LINK\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(anchor())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox class=\"new-view-input\"\n                 [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    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n                (clicked)=\"onViewCreate()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::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:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{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{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\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 }] });
 
 class FetchUserSettings {