@indigina/ui-kit 1.1.133 → 1.1.135

package/fesm2022/indigina-ui-kit.mjs

@@ -23,10 +23,10 @@ import * as i1$6 from 'ngx-toastr';
 import { ToastrModule, TOAST_CONFIG, DefaultGlobalConfig } from 'ngx-toastr';
 import * as i1$7 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
-import { BehaviorSubject, filter, of, tap, map, combineLatest, combineLatestWith, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, filter, of, tap, map, combineLatest, combineLatestWith, distinctUntilChanged, debounceTime } from 'rxjs';
 import { v4 } from 'uuid';
 import * as i1$8 from '@progress/kendo-angular-dialog';
-import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult } from '@progress/kendo-angular-dialog';
+import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult, DialogRef } from '@progress/kendo-angular-dialog';
 export { DialogAction, DialogCloseResult, DialogContentBase, DialogRef } from '@progress/kendo-angular-dialog';
 import * as i1$9 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
@@ -4691,7 +4691,7 @@ class KitProfileMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popup.isPopupOpen\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitAvatarModule }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popup.isPopupOpen\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--ui-kit-color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitAvatarModule }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitProfileMenuComponent, decorators: [{
             type: Component,
@@ -4701,7 +4701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitPopupComponent,
                         KitSvgIconModule,
                         RouterLink,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popup.isPopupOpen\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popup.isPopupOpen\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--ui-kit-color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"] }]
         }], propDecorators: { menuItems: [{
                 type: Input
             }], userName: [{
@@ -5732,7 +5732,7 @@ class KitCollapsedListComponent {
         return 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 } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], 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 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()) {\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]=\"{ width: 'auto' }\"\n                    [isValuePrimitive]=\"false\"\n                    (selected)=\"selectionChange($event)\"/>\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;gap:20px var(--kit-collapsed-list-gap, 20px);clip-path:inset(-10px 0 0 0)}.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{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 span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown 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", "size"], outputs: ["selected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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 } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], 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 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()) {\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]=\"{ width: 'auto' }\"\n                    [isValuePrimitive]=\"false\"\n                    (selected)=\"selectionChange($event)\"/>\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{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 span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown 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", "size"], outputs: ["selected"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
             type: Component,
@@ -5740,7 +5740,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitButtonModule,
                         KitDropdownModule,
                         NgTemplateOutlet,
-                    ], template: "<div #wrapper \n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div 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()) {\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]=\"{ width: 'auto' }\"\n                    [isValuePrimitive]=\"false\"\n                    (selected)=\"selectionChange($event)\"/>\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;gap:20px var(--kit-collapsed-list-gap, 20px);clip-path:inset(-10px 0 0 0)}.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{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 span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"] }]
+                    ], template: "<div #wrapper \n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div 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()) {\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]=\"{ width: 'auto' }\"\n                    [isValuePrimitive]=\"false\"\n                    (selected)=\"selectionChange($event)\"/>\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{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 span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"] }]
         }] });
 
 class KitScrollNavigationComponent {
@@ -6322,20 +6322,21 @@ class KitSortableComponent {
          * An items list which is going to be rendered as sortable items
          */
         this.items = [];
+        this.onDragEnd = output();
         this.itemTemplate = contentChild(TemplateRef);
     }
     get columnsCount() {
         return this.columnCount ?? null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSortableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSortableComponent, isStandalone: true, selector: "kit-sortable", inputs: { items: "items", columnCount: "columnCount", itemClass: "itemClass", activeItemClass: "activeItemClass" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-sortable class=\"kit-sortable\"\n                [style.column-count]=\"columnsCount\"\n                [kendoSortableBinding]=\"items\"\n                [itemClass]=\"itemClass\"\n                [activeItemClass]=\"activeItemClass\"\n                [animation]=\"true\">\n  <ng-template let-item=\"item\">\n    @if (itemTemplate()) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n      ></ng-container>\n    } @else {\n      {{ item }}\n    }\n  </ng-template>\n</kendo-sortable>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.SortableComponent, selector: "kendo-sortable", inputs: ["tabIndex", "data", "navigable", "navigatable", "animation", "disabledIndexes", "zone", "acceptZones", "itemStyle", "emptyItemStyle", "activeItemStyle", "disabledItemStyle", "itemClass", "activeItemClass", "emptyItemClass", "disabledItemClass", "emptyText", "activeIndex"], outputs: ["dragStart", "dragEnd", "dragOver", "dragLeave", "dataMove", "dataAdd", "dataRemove", "navigate"], exportAs: ["kendoSortable"] }, { kind: "directive", type: i2$4.SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: ["kendoSortableBinding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSortableComponent, isStandalone: true, selector: "kit-sortable", inputs: { items: "items", columnCount: "columnCount", itemClass: "itemClass", activeItemClass: "activeItemClass" }, outputs: { onDragEnd: "onDragEnd" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-sortable class=\"kit-sortable\"\n                [style.column-count]=\"columnsCount\"\n                [kendoSortableBinding]=\"items\"\n                [itemClass]=\"itemClass\"\n                [activeItemClass]=\"activeItemClass\"\n                [animation]=\"true\"\n                (dragEnd)=\"onDragEnd.emit($event)\">\n  <ng-template let-item=\"item\">\n    @if (itemTemplate()) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n      ></ng-container>\n    } @else {\n      {{ item }}\n    }\n  </ng-template>\n</kendo-sortable>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.SortableComponent, selector: "kendo-sortable", inputs: ["tabIndex", "data", "navigable", "navigatable", "animation", "disabledIndexes", "zone", "acceptZones", "itemStyle", "emptyItemStyle", "activeItemStyle", "disabledItemStyle", "itemClass", "activeItemClass", "emptyItemClass", "disabledItemClass", "emptyText", "activeIndex"], outputs: ["dragStart", "dragEnd", "dragOver", "dragLeave", "dataMove", "dataAdd", "dataRemove", "navigate"], exportAs: ["kendoSortable"] }, { kind: "directive", type: i2$4.SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: ["kendoSortableBinding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSortableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-sortable', imports: [
                         CommonModule,
                         KENDO_SORTABLE,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-sortable class=\"kit-sortable\"\n                [style.column-count]=\"columnsCount\"\n                [kendoSortableBinding]=\"items\"\n                [itemClass]=\"itemClass\"\n                [activeItemClass]=\"activeItemClass\"\n                [animation]=\"true\">\n  <ng-template let-item=\"item\">\n    @if (itemTemplate()) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n      ></ng-container>\n    } @else {\n      {{ item }}\n    }\n  </ng-template>\n</kendo-sortable>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-sortable class=\"kit-sortable\"\n                [style.column-count]=\"columnsCount\"\n                [kendoSortableBinding]=\"items\"\n                [itemClass]=\"itemClass\"\n                [activeItemClass]=\"activeItemClass\"\n                [animation]=\"true\"\n                (dragEnd)=\"onDragEnd.emit($event)\">\n  <ng-template let-item=\"item\">\n    @if (itemTemplate()) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n      ></ng-container>\n    } @else {\n      {{ item }}\n    }\n  </ng-template>\n</kendo-sortable>\n" }]
         }], propDecorators: { items: [{
                 type: Input
             }], columnCount: [{
@@ -6387,6 +6388,24 @@ const kitTranslations = {
                     doesnotcontain: 'Does not contain',
                 },
             },
+            export: {
+                exportTableData: 'Export table data as:',
+                notification: {
+                    success: 'Your export is complete.',
+                    start: 'Your export is processing...',
+                    error: 'Error occurred during export.',
+                },
+            },
+            search: {
+                placeholder: 'Search',
+                searchButtonLabel: 'Search',
+                closeButtonLabel: 'Close',
+            },
+            columns: {
+                title: 'Columns',
+                cancel: 'Cancel',
+                apply: 'Apply',
+            },
         },
     },
 };
@@ -6526,6 +6545,18 @@ const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false,
     filterType,
     type,
 });
+const kitBuildGridDataResults = (data, loading, total) => ({
+    results: {
+        data,
+        total: total ?? 0,
+    },
+    loading,
+});
+const kitBuildSortString = (sort) => sort?.filter(item => item.dir)
+    .map(item => {
+    const field = item.field.split('.').join('/');
+    return `${field} ${item.dir}`;
+}).join(',') ?? undefined;
 
 var KitGridViewType;
 (function (KitGridViewType) {
@@ -6821,7 +6852,7 @@ class KitGridViewsManagerComponent extends DialogContentBase {
         this.items.update(items => items.filter(item => item.title !== view.title || item.type === KitGridViewType.SYSTEM));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$d.Store }, { token: i1$8.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [ngClass]=\"item.type\">\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [ngClass]=\"{ disabled: isSystemView(item) }\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (isSystemView(item)) {\n          <kit-svg-icon class=\"item-icon-system\"\n                        [icon]=\"kitSvgIcon.GLOBAL\"\n          ></kit-svg-icon>\n        }\n        <kit-button [disabled]=\"isSystemView(item)\"\n                    [type]=\"kitButtonType.LINK\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    (clicked)=\"onViewRemove(item)\"\n        ></kit-button>\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--color-grey-6)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--color-grey-8);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [ngClass]=\"item.type\">\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [ngClass]=\"{ disabled: isSystemView(item) }\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (isSystemView(item)) {\n          <kit-svg-icon class=\"item-icon-system\"\n                        [icon]=\"kitSvgIcon.GLOBAL\"\n          ></kit-svg-icon>\n        }\n        <kit-button [disabled]=\"isSystemView(item)\"\n                    [type]=\"kitButtonType.LINK\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    (clicked)=\"onViewRemove(item)\"\n        ></kit-button>\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
             type: Component,
@@ -6834,7 +6865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitDialogActionsComponent,
                         TitleCasePipe,
                         KitTruncateTextComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [ngClass]=\"item.type\">\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [ngClass]=\"{ disabled: isSystemView(item) }\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (isSystemView(item)) {\n          <kit-svg-icon class=\"item-icon-system\"\n                        [icon]=\"kitSvgIcon.GLOBAL\"\n          ></kit-svg-icon>\n        }\n        <kit-button [disabled]=\"isSystemView(item)\"\n                    [type]=\"kitButtonType.LINK\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    (clicked)=\"onViewRemove(item)\"\n        ></kit-button>\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--color-grey-6)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--color-blue-4)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--color-grey-8)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--color-grey-8);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--color-main)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [ngClass]=\"item.type\">\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [ngClass]=\"{ disabled: isSystemView(item) }\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (isSystemView(item)) {\n          <kit-svg-icon class=\"item-icon-system\"\n                        [icon]=\"kitSvgIcon.GLOBAL\"\n          ></kit-svg-icon>\n        }\n        <kit-button [disabled]=\"isSystemView(item)\"\n                    [type]=\"kitButtonType.LINK\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    (clicked)=\"onViewRemove(item)\"\n        ></kit-button>\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .system .item-icon-system{stroke:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px;max-width:110px}.kit-grid-views-manager ::ng-deep .item-icon-menu{margin-right:8px;width:12px;height:12px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled{cursor:none;pointer-events:none}.kit-grid-views-manager ::ng-deep .item-icon-checkbox.disabled,.kit-grid-views-manager ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-icon-system{width:18px;height:18px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}\n"] }]
         }], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$8.DialogRef }] });
 
 class KitGridViewsListComponent {
@@ -6920,7 +6951,7 @@ class KitGridViewsListComponent {
             : navigateToView(this.defaultViewName(), this.router, this.activatedRoute);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsListComponent, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }, { token: i1$d.Store }, { token: KitDialogService }, { token: i1$b.TranslateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsListComponent, isStandalone: true, selector: "kit-grid-views-list", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            [label]=\"(selectedView()?.title ?? '') | titlecase\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            [active]=\"popup.isPopupOpen\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-views-list\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  @if (!createViewPopupVisible()) {\n    <div class=\"view\">\n      <div class=\"views-list\">\n        @for (item of views(); track item) {\n          @if (!item.hidden) {\n            <div class=\"views-item\"\n                 [ngClass]=\"item.type\"\n                 [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n                 (click)=\"onViewSelect(item)\">\n              <kit-svg-icon class=\"view-icon\"\n                            [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              ></kit-svg-icon>\n              <div class=\"item-name\">{{ item.title | titlecase }}</div>\n              <kit-svg-icon class=\"check-icon\"\n                            [icon]=\"kitSvgIcon.CHECK\"\n              ></kit-svg-icon>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"popup-action\">\n        <kit-button [label]=\"'kit.views.newView' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    (clicked)=\"newViewToggle(true)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"new-view\">\n      <kit-textbox [defaultValue]=\"viewName()\"\n                   [placeholder]=\"'kit.views.enterText' | translate\"\n                   [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                   [messageText]=\"inputMessage\"\n                   (changed)=\"viewName.set($event)\"\n      ></kit-textbox>\n      <div class=\"new-view-action\">\n        <kit-button [label]=\"'kit.views.cancel' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"newViewToggle(false)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.save' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [disabled]=\"!viewName() || !isViewNameValid\"\n                    (clicked)=\"onViewCreate()\"\n        ></kit-button>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--color-blue-4);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--color-grey-4)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--color-grey-8);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--color-grey-6)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--color-grey-6)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsListComponent, isStandalone: true, selector: "kit-grid-views-list", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            [label]=\"(selectedView()?.title ?? '') | titlecase\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            [active]=\"popup.isPopupOpen\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-views-list\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  @if (!createViewPopupVisible()) {\n    <div class=\"view\">\n      <div class=\"views-list\">\n        @for (item of views(); track item) {\n          @if (!item.hidden) {\n            <div class=\"views-item\"\n                 [ngClass]=\"item.type\"\n                 [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n                 (click)=\"onViewSelect(item)\">\n              <kit-svg-icon class=\"view-icon\"\n                            [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              ></kit-svg-icon>\n              <div class=\"item-name\">{{ item.title | titlecase }}</div>\n              <kit-svg-icon class=\"check-icon\"\n                            [icon]=\"kitSvgIcon.CHECK\"\n              ></kit-svg-icon>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"popup-action\">\n        <kit-button [label]=\"'kit.views.newView' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    (clicked)=\"newViewToggle(true)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"new-view\">\n      <kit-textbox [defaultValue]=\"viewName()\"\n                   [placeholder]=\"'kit.views.enterText' | translate\"\n                   [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                   [messageText]=\"inputMessage\"\n                   (changed)=\"viewName.set($event)\"\n      ></kit-textbox>\n      <div class=\"new-view-action\">\n        <kit-button [label]=\"'kit.views.cancel' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"newViewToggle(false)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.save' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [disabled]=\"!viewName() || !isViewNameValid\"\n                    (clicked)=\"onViewCreate()\"\n        ></kit-button>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--ui-kit-color-grey-13)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--ui-kit-color-blue)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsListComponent, decorators: [{
             type: Component,
@@ -6932,7 +6963,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TranslateModule,
                         NgClass,
                         TitleCasePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n            [label]=\"(selectedView()?.title ?? '') | titlecase\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            [active]=\"popup.isPopupOpen\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-views-list\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  @if (!createViewPopupVisible()) {\n    <div class=\"view\">\n      <div class=\"views-list\">\n        @for (item of views(); track item) {\n          @if (!item.hidden) {\n            <div class=\"views-item\"\n                 [ngClass]=\"item.type\"\n                 [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n                 (click)=\"onViewSelect(item)\">\n              <kit-svg-icon class=\"view-icon\"\n                            [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              ></kit-svg-icon>\n              <div class=\"item-name\">{{ item.title | titlecase }}</div>\n              <kit-svg-icon class=\"check-icon\"\n                            [icon]=\"kitSvgIcon.CHECK\"\n              ></kit-svg-icon>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"popup-action\">\n        <kit-button [label]=\"'kit.views.newView' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    (clicked)=\"newViewToggle(true)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"new-view\">\n      <kit-textbox [defaultValue]=\"viewName()\"\n                   [placeholder]=\"'kit.views.enterText' | translate\"\n                   [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                   [messageText]=\"inputMessage\"\n                   (changed)=\"viewName.set($event)\"\n      ></kit-textbox>\n      <div class=\"new-view-action\">\n        <kit-button [label]=\"'kit.views.cancel' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"newViewToggle(false)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.save' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [disabled]=\"!viewName() || !isViewNameValid\"\n                    (clicked)=\"onViewCreate()\"\n        ></kit-button>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--color-blue-4);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--color-grey-4)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--color-grey-8);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--color-grey-3)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--color-blue-4)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--color-grey-6)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--color-grey-6)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n            [label]=\"(selectedView()?.title ?? '') | titlecase\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            [active]=\"popup.isPopupOpen\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-views-list\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  @if (!createViewPopupVisible()) {\n    <div class=\"view\">\n      <div class=\"views-list\">\n        @for (item of views(); track item) {\n          @if (!item.hidden) {\n            <div class=\"views-item\"\n                 [ngClass]=\"item.type\"\n                 [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n                 (click)=\"onViewSelect(item)\">\n              <kit-svg-icon class=\"view-icon\"\n                            [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              ></kit-svg-icon>\n              <div class=\"item-name\">{{ item.title | titlecase }}</div>\n              <kit-svg-icon class=\"check-icon\"\n                            [icon]=\"kitSvgIcon.CHECK\"\n              ></kit-svg-icon>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"popup-action\">\n        <kit-button [label]=\"'kit.views.newView' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    (clicked)=\"newViewToggle(true)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"new-view\">\n      <kit-textbox [defaultValue]=\"viewName()\"\n                   [placeholder]=\"'kit.views.enterText' | translate\"\n                   [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                   [messageText]=\"inputMessage\"\n                   (changed)=\"viewName.set($event)\"\n      ></kit-textbox>\n      <div class=\"new-view-action\">\n        <kit-button [label]=\"'kit.views.cancel' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"newViewToggle(false)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.save' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [disabled]=\"!viewName() || !isViewNameValid\"\n                    (clicked)=\"onViewCreate()\"\n        ></kit-button>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-grid-views-list .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-grid-views-list .views-item.user{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-grid-views-list .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-grid-views-list .views-item.user:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views-list .views-item.user:hover .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-grid-views-list .views-item:hover{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-grid-views-list .views-item.active{background-color:var(--ui-kit-color-grey-13)}::ng-deep .kit-grid-views-list .views-item.active .check-icon{display:block}::ng-deep .kit-grid-views-list .views-item.active.system .check-icon{stroke:var(--ui-kit-color-blue)}::ng-deep .kit-grid-views-list .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-grid-views-list .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views-list .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-grid-views-list .popup-action{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-grid-views-list .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-grid-views-list .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"] }]
         }], ctorParameters: () => [{ type: i1$7.ActivatedRoute }, { type: i1$7.Router }, { type: i1$d.Store }, { type: KitDialogService }, { type: i1$b.TranslateService }, { type: i0.ViewContainerRef }] });
 
 var KitFilterType;
@@ -7187,7 +7218,7 @@ class KitFilterSelectorComponent {
         this.popup()?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterSelectorComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-selector\">\n  <kit-pill #toggleButton\n            [type]=\"kitPillType.DASHED\"\n            [selectable]=\"true\"\n            [selected]=\"popup.isPopupOpen\"\n            [icon]=\"kitSvgIcon.PLUS\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            (clicked)=\"popup.toggle()\">\n    {{ \"kit.filters.addNewFilter\" | translate }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-selector-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"filter-search\">\n      <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                   [size]=\"kitTextboxSize.SMALL\"\n                   [defaultValue]=\"searchTerm()\"\n                   (changed)=\"onSearchChange($event)\"\n      ></kit-textbox>\n    </div>\n    <div class=\"filter-items\">\n      @for (item of filterItems(); track item.field) {\n        <div class=\"filter-item\"\n             [class.disabled]=\"item.disabled\"\n             (click)=\"onItemClick(item)\">\n          {{ item.title | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--color-grey-6)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--color-grey-7);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--color-grey-4)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--color-grey-8);pointer-events:none}\n"], dependencies: [{ kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-selector\">\n  <kit-pill #toggleButton\n            [type]=\"kitPillType.DASHED\"\n            [selectable]=\"true\"\n            [selected]=\"popup.isPopupOpen\"\n            [icon]=\"kitSvgIcon.PLUS\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            (clicked)=\"popup.toggle()\">\n    {{ \"kit.filters.addNewFilter\" | translate }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-selector-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"filter-search\">\n      <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                   [size]=\"kitTextboxSize.SMALL\"\n                   [defaultValue]=\"searchTerm()\"\n                   (changed)=\"onSearchChange($event)\"\n      ></kit-textbox>\n    </div>\n    <div class=\"filter-items\">\n      @for (item of filterItems(); track item.field) {\n        <div class=\"filter-item\"\n             [class.disabled]=\"item.disabled\"\n             (click)=\"onItemClick(item)\">\n          {{ item.title | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--ui-kit-color-grey-12);pointer-events:none}\n"], dependencies: [{ kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterSelectorComponent, decorators: [{
             type: Component,
@@ -7196,7 +7227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TranslateModule,
                         KitTextboxModule,
                         KitPillComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-selector\">\n  <kit-pill #toggleButton\n            [type]=\"kitPillType.DASHED\"\n            [selectable]=\"true\"\n            [selected]=\"popup.isPopupOpen\"\n            [icon]=\"kitSvgIcon.PLUS\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            (clicked)=\"popup.toggle()\">\n    {{ \"kit.filters.addNewFilter\" | translate }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-selector-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"filter-search\">\n      <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                   [size]=\"kitTextboxSize.SMALL\"\n                   [defaultValue]=\"searchTerm()\"\n                   (changed)=\"onSearchChange($event)\"\n      ></kit-textbox>\n    </div>\n    <div class=\"filter-items\">\n      @for (item of filterItems(); track item.field) {\n        <div class=\"filter-item\"\n             [class.disabled]=\"item.disabled\"\n             (click)=\"onItemClick(item)\">\n          {{ item.title | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--color-grey-6)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--color-grey-7);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--color-grey-4)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--color-grey-4);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--color-grey-8);pointer-events:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-selector\">\n  <kit-pill #toggleButton\n            [type]=\"kitPillType.DASHED\"\n            [selectable]=\"true\"\n            [selected]=\"popup.isPopupOpen\"\n            [icon]=\"kitSvgIcon.PLUS\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            (clicked)=\"popup.toggle()\">\n    {{ \"kit.filters.addNewFilter\" | translate }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-selector-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"filter-search\">\n      <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                   [size]=\"kitTextboxSize.SMALL\"\n                   [defaultValue]=\"searchTerm()\"\n                   (changed)=\"onSearchChange($event)\"\n      ></kit-textbox>\n    </div>\n    <div class=\"filter-items\">\n      @for (item of filterItems(); track item.field) {\n        <div class=\"filter-item\"\n             [class.disabled]=\"item.disabled\"\n             (click)=\"onItemClick(item)\">\n          {{ item.title | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--ui-kit-color-grey-12);pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$b.TranslateService }] });
 
 class KitFilterCheckboxComponent {
@@ -7275,7 +7306,7 @@ class KitFilterCheckboxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues().length) {\n      @if (selectedValues().length > 1) {\n        <div class=\"tooltip\"\n             kitTooltip\n             kitTooltipFilter=\".tooltip\"\n             [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n             [kitTooltipTemplateRef]=\"tooltipTemplate\">\n          {{ buildTranslateKey(selectedValues()[0]) | translate }}\n          <span class=\"tooltip-count\">+{{ selectedValues().length - 1 }}</span>\n        </div>\n      } @else {\n        {{ buildTranslateKey(selectedValues()[0]) | translate }}\n      }\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'common.apply' | translate\"\n           [cancelButtonLabel]=\"'common.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of selectedValues() | slice: 1; track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--color-main)}.kit-filter-checkbox .tooltip-item{color:var(--color-grey-4);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues().length) {\n      @if (selectedValues().length > 1) {\n        <div class=\"tooltip\"\n             kitTooltip\n             kitTooltipFilter=\".tooltip\"\n             [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n             [kitTooltipTemplateRef]=\"tooltipTemplate\">\n          {{ buildTranslateKey(selectedValues()[0]) | translate }}\n          <span class=\"tooltip-count\">+{{ selectedValues().length - 1 }}</span>\n        </div>\n      } @else {\n        {{ buildTranslateKey(selectedValues()[0]) | translate }}\n      }\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'common.apply' | translate\"\n           [cancelButtonLabel]=\"'common.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of selectedValues() | slice: 1; track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox .tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
             type: Component,
@@ -7288,7 +7319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         SlicePipe,
                         FormsModule,
                         KitPopupComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues().length) {\n      @if (selectedValues().length > 1) {\n        <div class=\"tooltip\"\n             kitTooltip\n             kitTooltipFilter=\".tooltip\"\n             [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n             [kitTooltipTemplateRef]=\"tooltipTemplate\">\n          {{ buildTranslateKey(selectedValues()[0]) | translate }}\n          <span class=\"tooltip-count\">+{{ selectedValues().length - 1 }}</span>\n        </div>\n      } @else {\n        {{ buildTranslateKey(selectedValues()[0]) | translate }}\n      }\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'common.apply' | translate\"\n           [cancelButtonLabel]=\"'common.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of selectedValues() | slice: 1; track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--color-main)}.kit-filter-checkbox .tooltip-item{color:var(--color-grey-4);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues().length) {\n      @if (selectedValues().length > 1) {\n        <div class=\"tooltip\"\n             kitTooltip\n             kitTooltipFilter=\".tooltip\"\n             [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n             [kitTooltipTemplateRef]=\"tooltipTemplate\">\n          {{ buildTranslateKey(selectedValues()[0]) | translate }}\n          <span class=\"tooltip-count\">+{{ selectedValues().length - 1 }}</span>\n        </div>\n      } @else {\n        {{ buildTranslateKey(selectedValues()[0]) | translate }}\n      }\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'common.apply' | translate\"\n           [cancelButtonLabel]=\"'common.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of selectedValues() | slice: 1; track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox .tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"] }]
         }] });
 
 class KitFilterDateComponent {
@@ -7719,7 +7750,7 @@ class KitGridExportComponent {
     async onExport({ value }) {
         this.isGridExporting.set(true);
         this.onPopupToggle();
-        this.notificationService.addNotification(KitNotificationType.WARNING, this.translateService.instant('export.notification.start'), true);
+        this.notificationService.addNotification(KitNotificationType.WARNING, this.translateService.instant('kit.export.notification.start'), true);
         const exportHandlers = {
             [GridExportOptions.PDF]: this.onExportPDF.bind(this),
             [GridExportOptions.EXCEL]: this.onExportExcel.bind(this),
@@ -7728,10 +7759,10 @@ class KitGridExportComponent {
         };
         return exportHandlers[value]()
             .then(() => {
-            this.notificationService.addNotification(KitNotificationType.SUCCESS, this.translateService.instant('export.notification.success'), true, 3000);
+            this.notificationService.addNotification(KitNotificationType.SUCCESS, this.translateService.instant('kit.export.notification.success'), true, 3000);
         })
             .catch(() => {
-            this.notificationService.addNotification(KitNotificationType.ERROR, this.translateService.instant('export.notification.error'), true, 3000);
+            this.notificationService.addNotification(KitNotificationType.ERROR, this.translateService.instant('kit.export.notification.error'), true, 3000);
         })
             .finally(() => {
             this.isGridExporting.set(false);
@@ -7842,7 +7873,7 @@ class KitGridExportComponent {
             : `${indent}<${elementName}>${content}</${elementName}>`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridExportComponent, deps: [{ token: i1$b.TranslateService }, { token: KitNotificationService }, { token: KitGridCellService }, { token: i1$d.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridExportComponent, isStandalone: true, selector: "kit-grid-export", inputs: { getExportedData: { classPropertyName: "getExportedData", publicName: "getExportedData", isSignal: true, isRequired: true, transformFunction: null }, translationMap: { classPropertyName: "translationMap", publicName: "translationMap", isSignal: true, isRequired: true, transformFunction: null }, exportedFileName: { classPropertyName: "exportedFileName", publicName: "exportedFileName", isSignal: true, isRequired: true, transformFunction: null }, drawPdf: { classPropertyName: "drawPdf", publicName: "drawPdf", isSignal: true, isRequired: true, transformFunction: null }, gridHasData: { classPropertyName: "gridHasData", publicName: "gridHasData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "popup", 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-export\">\n  <kit-button #toggleButton\n              [disabled]=\"!gridHasData() || isGridExporting()\"\n              [icon]=\"kitSvgIcon.DOWNLOAD\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-export-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <span class=\"label\">{{ \"export.exportTableData\" | translate }}</span>\n  <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n                    [items]=\"gridExportOptions\" \n                    (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup .label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitGridModule }, { 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: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridExportComponent, isStandalone: true, selector: "kit-grid-export", inputs: { getExportedData: { classPropertyName: "getExportedData", publicName: "getExportedData", isSignal: true, isRequired: true, transformFunction: null }, translationMap: { classPropertyName: "translationMap", publicName: "translationMap", isSignal: true, isRequired: true, transformFunction: null }, exportedFileName: { classPropertyName: "exportedFileName", publicName: "exportedFileName", isSignal: true, isRequired: true, transformFunction: null }, drawPdf: { classPropertyName: "drawPdf", publicName: "drawPdf", isSignal: true, isRequired: true, transformFunction: null }, gridHasData: { classPropertyName: "gridHasData", publicName: "gridHasData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "popup", 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-export\">\n  <kit-button #toggleButton\n              [disabled]=\"!gridHasData() || isGridExporting()\"\n              [icon]=\"kitSvgIcon.DOWNLOAD\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-export-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <span class=\"label\">{{ \"kit.export.exportTableData\" | translate }}</span>\n  <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n                    [items]=\"gridExportOptions\" \n                    (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup .label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitGridModule }, { 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: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridExportComponent, decorators: [{
             type: Component,
@@ -7852,7 +7883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitButtonModule,
                         KitPopupComponent,
                         KitRadioButtonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-export\">\n  <kit-button #toggleButton\n              [disabled]=\"!gridHasData() || isGridExporting()\"\n              [icon]=\"kitSvgIcon.DOWNLOAD\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-export-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <span class=\"label\">{{ \"export.exportTableData\" | translate }}</span>\n  <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n                    [items]=\"gridExportOptions\" \n                    (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup .label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-export\">\n  <kit-button #toggleButton\n              [disabled]=\"!gridHasData() || isGridExporting()\"\n              [icon]=\"kitSvgIcon.DOWNLOAD\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-export-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <span class=\"label\">{{ \"kit.export.exportTableData\" | translate }}</span>\n  <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n                    [items]=\"gridExportOptions\" \n                    (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup .label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"] }]
         }], ctorParameters: () => [{ type: i1$b.TranslateService }, { type: KitNotificationService }, { type: KitGridCellService }, { type: i1$d.Store }] });
 
 class KitGridCellComponent {
@@ -7876,11 +7907,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }] } });
 
+class KitGridSearchComponent {
+    constructor() {
+        this.onSearchChanged = output();
+        this.onCloseSearch = output();
+        this.kitSearchBarComponent = viewChild.required(KitSearchBarComponent);
+    }
+    ngAfterViewInit() {
+        this.kitSearchBarComponent().changed.pipe(debounceTime(500)).subscribe(value => this.onSearchChanged.emit(value));
+    }
+    closeButtonClick() {
+        this.onCloseSearch.emit();
+    }
+    closeSearch() {
+        this.kitSearchBarComponent().onCloseButtonClick();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridSearchComponent, isStandalone: true, selector: "kit-grid-search", outputs: { onSearchChanged: "onSearchChanged", onCloseSearch: "onCloseSearch" }, viewQueries: [{ propertyName: "kitSearchBarComponent", first: true, predicate: KitSearchBarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<kit-search-bar [placeholder]=\"'kit.search.placeholder' | translate\"\n                [searchButtonLabel]=\"'kit.search.searchButtonLabel' | translate\"\n                [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n                (closeButtonClick)=\"closeButtonClick()\"\n></kit-search-bar>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitSearchBarModule }, { kind: "component", type: KitSearchBarComponent, selector: "kit-search-bar", inputs: ["placeholder", "searchButtonLabel", "closeButtonLabel"], outputs: ["changed", "searchButtonClick", "closeButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid-search', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TranslateModule,
+                        KitSearchBarModule,
+                    ], template: "<kit-search-bar [placeholder]=\"'kit.search.placeholder' | translate\"\n                [searchButtonLabel]=\"'kit.search.searchButtonLabel' | translate\"\n                [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n                (closeButtonClick)=\"closeButtonClick()\"\n></kit-search-bar>\n" }]
+        }] });
+
+class KitGridColumnManagerComponent {
+    constructor(kitDialogService, store, translateService, viewContainerRef) {
+        this.kitDialogService = kitDialogService;
+        this.store = store;
+        this.translateService = translateService;
+        this.viewContainerRef = viewContainerRef;
+        this.dialogContent = viewChild.required('dialogContent');
+        this.updatedColumns = signal([]);
+        this.kitButtonType = KitButtonType;
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonIconPosition = KitButtonIconPosition;
+        this.kitSvgIcon = KitSvgIcon;
+        this.hasUnsavedChanges = signal(false);
+    }
+    openColumnsDialog() {
+        this.updatedColumns.set([...this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns]);
+        this.kitDialogService.openDialog({
+            title: this.translateService.instant('kit.columns.title'),
+            content: this.dialogContent(),
+            appendTo: this.viewContainerRef,
+        });
+    }
+    onColumnVisibilityChange(event, column) {
+        this.updatedColumns.update(items => items
+            .map(item => item.field === column.field && { ...item, hidden: !event } || item));
+        this.checkChanges();
+    }
+    applyChanges() {
+        const { sort: sortDescriptor } = this.store.selectSnapshot(KIT_GRID_STATE_TOKEN);
+        const visibleColumns = new Set(this.updatedColumns().filter(({ hidden }) => !hidden).map(({ field }) => field));
+        const sort = sortDescriptor.filter(({ field }) => visibleColumns.has(field));
+        this.store.dispatch([
+            new SetGridSort(sort),
+            new SetGridColumns(this.updatedColumns()),
+        ]);
+    }
+    close() {
+        this.kitDialogService.closeDialog();
+    }
+    checkChanges() {
+        const usedColumnsConfig = this.store.selectSnapshot(KIT_GRID_STATE_TOKEN).columns;
+        this.hasUnsavedChanges.set(JSON.stringify(this.updatedColumns()) !== JSON.stringify(usedColumnsConfig));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridColumnManagerComponent, deps: [{ token: KitDialogService }, { token: i1$d.Store }, { token: i1$b.TranslateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridColumnManagerComponent, isStandalone: true, selector: "kit-grid-column-manager", providers: [
+            DialogRef,
+        ], viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<kit-button [label]=\"'kit.columns.title' | translate\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.COLUMNS\"\n            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n            (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n  <div class=\"kit-grid-columns-dialog\">\n    <kit-sortable itemClass=\"item\"\n                  activeItemClass=\"item active\"\n                  [columnCount]=\"3\"\n                  [items]=\"updatedColumns()\"\n                  (onDragEnd)=\"checkChanges()\">\n      <ng-template let-item>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">{{ item.title | translate }}</div>\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n      </ng-template>\n    </kit-sortable>\n  </div>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'common.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'common.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-content{padding:0}\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: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass"], outputs: ["onDragEnd"] }, { 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: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridColumnManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid-column-manager', imports: [
+                        KitButtonModule,
+                        TranslateModule,
+                        KitCheckboxModule,
+                        KitSortableComponent,
+                        KitSvgIconModule,
+                        NgClass,
+                        KitDialogActionsComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        DialogRef,
+                    ], template: "<kit-button [label]=\"'kit.columns.title' | translate\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.COLUMNS\"\n            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n            (clicked)=\"openColumnsDialog()\"\n></kit-button>\n\n<ng-template #dialogContent>\n  <div class=\"kit-grid-columns-dialog\">\n    <kit-sortable itemClass=\"item\"\n                  activeItemClass=\"item active\"\n                  [columnCount]=\"3\"\n                  [items]=\"updatedColumns()\"\n                  (onDragEnd)=\"checkChanges()\">\n      <ng-template let-item>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">{{ item.title | translate }}</div>\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n      </ng-template>\n    </kit-sortable>\n  </div>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'common.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'common.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px}.kit-grid-columns-dialog ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-columns-dialog ::ng-deep .item{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:8px 25px;min-width:250px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-columns-dialog ::ng-deep .item:hover .item-icon{fill:var(--ui-kit-color-hover)}.kit-grid-columns-dialog ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-columns-dialog ::ng-deep .item-icon-menu{width:12px;height:12px;fill:var(--ui-kit-color-grey-10)}.kit-grid-columns-dialog ::ng-deep .item-icon-menu.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-columns-dialog ::ng-deep .item-icon-checkbox.hidden{fill:var(--ui-kit-color-grey-12)}.kit-grid-columns-dialog ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-columns-dialog ::ng-deep .item.active .item-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-content{padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: KitDialogService }, { type: i1$d.Store }, { type: i1$b.TranslateService }, { type: i0.ViewContainerRef }] });
+
 // KitButton
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSortSettingsMode, KitGridState, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, RemoveGridFilter, SetGridColumns, SetGridSkip, SetGridSort, UpdateGridFilter, buildRandomUUID, kitBuildCheckboxFilterItems, kitBuildFilters, kitBuildGridColumn, kitBuildOdataFilter, kitDataStateToODataString, kitEncodeViewNameToUrl, kitNoValueRequiredFilterOperators };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, RemoveGridFilter, SetGridColumns, SetGridSkip, SetGridSort, UpdateGridFilter, buildRandomUUID, kitBuildCheckboxFilterItems, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitNoValueRequiredFilterOperators };
 //# sourceMappingURL=indigina-ui-kit.mjs.map