@indigina/ui-kit 1.1.138 → 1.1.139

package/fesm2022/indigina-ui-kit.mjs

@@ -5645,6 +5645,7 @@ class KitCollapsedListComponent {
         this.dropdown = viewChild('dropdown', {
             read: ElementRef,
         });
+        this.kitDropdownComponent = viewChild(KitDropdownComponent);
         this.defaultSelectedItem = computed(() => ({
             text: this.dropdownDefaultValueText(),
             value: 'Default Item',
@@ -5771,7 +5772,7 @@ class KitCollapsedListComponent {
         this.containerWidth = width;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "wrapperInner", first: true, predicate: ["wrapperInner"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper \n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div #wrapperInner class=\"wrapper-inner\">\n    <div\n      #container\n      class=\"element-container\"\n      [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n      @for (item of itemList(); track item.value) {\n        <div class=\"item-wrapper\"\n             (click)=\"selectionChange(item)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n        </div>\n      }\n    </div>\n\n    @if (shouldShowDropdown() || alwaysShowDropdown()) {\n      <kit-dropdown #dropdown\n                    class=\"collapsed-list-dropdown\"\n                    [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n                    [items]=\"dropdownItems()\"\n                    [selectedItem]=\"dropdownSelectedItem()\"\n                    [disabled]=\"disableActions()\"\n                    [size]=\"kitDropdownSize.SMALL\"\n                    [popupSettings]=\"popupSettings\"\n                    [isValuePrimitive]=\"false\"\n                    [footerTemplate]=\"dropdownFooterTemplate()\"\n                    [noDataTemplate]=\"dropdownNoDataTemplate()\"\n                    (selected)=\"selectionChange($event)\">\n        @if (dropdownItemTemplate()) {\n          <ng-template kitDropdownItemTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\"/>\n          </ng-template>\n        }\n      </kit-dropdown>\n    }\n  </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  <kit-button class=\"item\"\n              [class.active]=\"item.value === _selectedItem().value\"\n              [label]=\"item.text\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.SMALL\"\n              [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;row-gap:15px;clip-path:xywh(0 -10px 100% 150%)}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup){color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-white)}\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: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: KitDropdownItemTemplateDirective, selector: "[kitDropdownItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "wrapperInner", first: true, predicate: ["wrapperInner"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "kitDropdownComponent", first: true, predicate: KitDropdownComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper \n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div #wrapperInner class=\"wrapper-inner\">\n    <div\n      #container\n      class=\"element-container\"\n      [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n      @for (item of itemList(); track item.value) {\n        <div class=\"item-wrapper\"\n             (click)=\"selectionChange(item)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n        </div>\n      }\n    </div>\n\n    @if (shouldShowDropdown() || alwaysShowDropdown()) {\n      <kit-dropdown #dropdown\n                    class=\"collapsed-list-dropdown\"\n                    [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n                    [items]=\"dropdownItems()\"\n                    [selectedItem]=\"dropdownSelectedItem()\"\n                    [disabled]=\"disableActions()\"\n                    [size]=\"kitDropdownSize.SMALL\"\n                    [popupSettings]=\"popupSettings\"\n                    [isValuePrimitive]=\"false\"\n                    [footerTemplate]=\"dropdownFooterTemplate()\"\n                    [noDataTemplate]=\"dropdownNoDataTemplate()\"\n                    (selected)=\"selectionChange($event)\">\n        @if (dropdownItemTemplate()) {\n          <ng-template kitDropdownItemTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\"/>\n          </ng-template>\n        }\n      </kit-dropdown>\n    }\n  </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  <kit-button class=\"item\"\n              [class.active]=\"item.value === _selectedItem().value\"\n              [label]=\"item.text\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.SMALL\"\n              [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;row-gap:15px;clip-path:xywh(0 -10px 100% 150%)}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup){color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-white)}\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: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: KitDropdownItemTemplateDirective, selector: "[kitDropdownItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
             type: Component,
@@ -7069,7 +7070,7 @@ class KitGridViewsComponent {
         const infoMessage = getInputMessage(this.views(), this.createNewViewName().toLowerCase());
         return infoMessage && this.translateService.instant(infoMessage) || '';
     }
-    constructor(store, activatedRoute, router, destroyRef, titleCasePipe, kitDialogService, translateService, viewContainerRef) {
+    constructor(store, activatedRoute, router, destroyRef, titleCasePipe, kitDialogService, translateService, viewContainerRef, location) {
         this.store = store;
         this.activatedRoute = activatedRoute;
         this.router = router;
@@ -7078,6 +7079,7 @@ class KitGridViewsComponent {
         this.kitDialogService = kitDialogService;
         this.translateService = translateService;
         this.viewContainerRef = viewContainerRef;
+        this.location = location;
         this.viewGroup = input.required();
         this.viewConfigGroup = input.required();
         this.defaultColumns = input.required();
@@ -7128,7 +7130,7 @@ class KitGridViewsComponent {
         this.store.dispatch(new StateReset(KitGridViewsState));
     }
     onSelectView(selectedView) {
-        navigateToView(selectedView.title, this.router, this.activatedRoute);
+        this.location.go(this.router.createUrlTree([`../${selectedView.title}`], { relativeTo: this.activatedRoute }).toString());
         this.store.dispatch(new SetSelectedView(selectedView));
     }
     openViewsManagerModal() {
@@ -7167,6 +7169,7 @@ class KitGridViewsComponent {
     }
     onPopupToggle() {
         this.createNewViewName.set('');
+        this.collapsedList()?.kitDropdownComponent()?.dropdown?.toggle();
         requestAnimationFrame(() => this.createNewViewPopup()?.toggle());
     }
     fetchViews() {
@@ -7209,10 +7212,10 @@ class KitGridViewsComponent {
             value: `${view.title}_${view.group}_${view.type}`,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, deps: [{ token: i1$c.Store }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }, { token: i0.DestroyRef }, { token: i1$1.TitleCasePipe }, { token: KitDialogService }, { token: i1$a.TranslateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, deps: [{ token: i1$c.Store }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }, { token: i0.DestroyRef }, { token: i1$1.TitleCasePipe }, { token: KitDialogService }, { token: i1$a.TranslateService }, { token: i0.ViewContainerRef }, { token: i1$1.Location }], 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,
-        ], viewQueries: [{ propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, 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                              appendTo=\"component\"\n                              [itemList]=\"collapsedListItems()\"\n                              [dropdownDefaultValueText]=\"'kit.views.newView' | translate\"\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]=\"anchor()\"\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-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px;color:inherit}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover{background:var(--ui-kit-color-grey-13)}::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.user{color:var(--ui-kit-color-grey-10)}::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:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user:hover .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{background-color:var(--ui-kit-color-grey-13)}::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.active.system .check-icon{stroke:var(--ui-kit-color-blue)}::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 }, { propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, 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]=\"'kit.views.newView' | translate\"\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]=\"anchor()\"\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-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px;color:inherit}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover{background:var(--ui-kit-color-grey-13)}::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.user{color:var(--ui-kit-color-grey-10)}::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:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user:hover .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{background-color:var(--ui-kit-color-grey-13)}::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.active.system .check-icon{stroke:var(--ui-kit-color-blue)}::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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, decorators: [{
             type: Component,
@@ -7230,8 +7233,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitTextboxModule,
                     ], 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        <div class=\"views-list\">\n          <kit-collapsed-list #toggleButton\n                              appendTo=\"component\"\n                              [itemList]=\"collapsedListItems()\"\n                              [dropdownDefaultValueText]=\"'kit.views.newView' | translate\"\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]=\"anchor()\"\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-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px;color:inherit}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover{background:var(--ui-kit-color-grey-13)}::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.user{color:var(--ui-kit-color-grey-10)}::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:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user:hover .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{background-color:var(--ui-kit-color-grey-13)}::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.active.system .check-icon{stroke:var(--ui-kit-color-blue)}::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$c.Store }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }, { type: i0.DestroyRef }, { type: i1$1.TitleCasePipe }, { type: KitDialogService }, { type: i1$a.TranslateService }, { type: i0.ViewContainerRef }], propDecorators: { viewChanged: [{
+                    ], 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]=\"'kit.views.newView' | translate\"\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]=\"anchor()\"\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-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px;color:inherit}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover{background:var(--ui-kit-color-grey-13)}::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.user{color:var(--ui-kit-color-grey-10)}::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:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user:hover .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{background-color:var(--ui-kit-color-grey-13)}::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.active.system .check-icon{stroke:var(--ui-kit-color-blue)}::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$c.Store }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }, { type: i0.DestroyRef }, { type: i1$1.TitleCasePipe }, { type: KitDialogService }, { type: i1$a.TranslateService }, { type: i0.ViewContainerRef }, { type: i1$1.Location }], propDecorators: { viewChanged: [{
                 type: Output
             }] } });