npm - @indigina/ui-kit - Versions diffs - 1.1.136 → 1.1.138 - Mend

@indigina/ui-kit 1.1.136 → 1.1.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/fesm2022/indigina-ui-kit.mjs CHANGED Viewed

@@ -7,7 +7,7 @@ import { CommonModule, NgClass, DOCUMENT, NgTemplateOutlet, DatePipe, TitleCaseP
 import * as i1$2 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import { TooltipDirective, TooltipSettings } from '@progress/kendo-angular-tooltip';
-import * as i1$a from '@progress/kendo-angular-popup';
+import * as i1$9 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
 import * as i1$5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, UntypedFormControl, Validators } from '@angular/forms';
@@ -21,39 +21,39 @@ import { DateInputsModule, DateRangePopupComponent, DateRangeService, TimePicker
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import * as i1$6 from 'ngx-toastr';
 import { ToastrModule, TOAST_CONFIG, DefaultGlobalConfig } from 'ngx-toastr';
-import * as i1$7 from '@angular/router';
+import * as i2$1 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
 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 * as i1$7 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 * as i1$8 from '@progress/kendo-angular-indicators';
 import { IndicatorsModule } from '@progress/kendo-angular-indicators';
-import * as i2$1 from '@progress/kendo-angular-upload';
+import * as i2$2 from '@progress/kendo-angular-upload';
 import { UploadModule } from '@progress/kendo-angular-upload';
-import * as i1$c from '@angular/common/http';
+import * as i1$b from '@angular/common/http';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import initials from 'initials';
-import * as i2$2 from '@progress/kendo-angular-layout';
+import * as i2$3 from '@progress/kendo-angular-layout';
 import { LayoutModule, TileLayoutModule } from '@progress/kendo-angular-layout';
-import * as i2$3 from '@progress/kendo-angular-grid';
+import * as i2$4 from '@progress/kendo-angular-grid';
 import { GridComponent, GridModule, ExcelModule, PDFModule } from '@progress/kendo-angular-grid';
 import * as i3 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService } from '@progress/kendo-angular-pager';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import * as i2$4 from '@progress/kendo-angular-sortable';
+import * as i2$5 from '@progress/kendo-angular-sortable';
 import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
 import { toODataString } from '@progress/kendo-data-query';
-import * as i1$b from '@ngx-translate/core';
+import * as i1$a from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { __decorate } from 'tslib';
-import * as i1$d from '@ngxs/store';
+import * as i1$c from '@ngxs/store';
 import { StateToken, Action, State, createSelector, Selector } from '@ngxs/store';
 import { patch, append, removeItem, updateItem } from '@ngxs/store/operators';
-import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
 import { StateReset } from 'ngxs-reset-plugin';
+import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
 import { json2csv } from 'json-2-csv';
 import { Workbook } from '@progress/kendo-ooxml';
 import { saveAs, encodeBase64 } from '@progress/kendo-file-saver';
@@ -1008,6 +1008,18 @@ var KitDropdownSize;
     KitDropdownSize["SMALL"] = "small";
 })(KitDropdownSize || (KitDropdownSize = {}));
+class KitDropdownItemTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDropdownItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.4", type: KitDropdownItemTemplateDirective, isStandalone: true, selector: "[kitDropdownItemTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDropdownItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kitDropdownItemTemplate]',
+                    standalone: true,
+                }]
+        }] });
 function buildPopupClass(hideDefaultItem) {
     if (hideDefaultItem) {
         return DROPDOWN_POPUP_CLASS;
@@ -1042,6 +1054,8 @@ class KitDropdownComponent {
         this.toggleIcon = KitSvgIcon.CHEVRON_DOWN;
         this.popupSettings = {};
         this.isValuePrimitive = true;
+        this.footerTemplate = input();
+        this.noDataTemplate = input();
         /**
          * Defines the size of the dropdown
          */
@@ -1070,7 +1084,7 @@ class KitDropdownComponent {
     buildPopupSettings() {
         return {
             ...this.popupSettings,
-            popupClass: buildPopupClass(this.hideDefaultItem),
+            popupClass: `${buildPopupClass(this.hideDefaultItem)} ${this.popupSettings.popupClass ?? ''}`,
         };
     }
     onItemDisabled() {
@@ -1114,11 +1128,11 @@ class KitDropdownComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitDropdownComponent, isStandalone: false, selector: "kit-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: false, isRequired: false, transformFunction: null }, defaultItem: { classPropertyName: "defaultItem", publicName: "defaultItem", isSignal: false, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultItem: { classPropertyName: "hideDefaultItem", publicName: "hideDefaultItem", isSignal: false, isRequired: false, transformFunction: null }, toggleIcon: { classPropertyName: "toggleIcon", publicName: "toggleIcon", isSignal: false, isRequired: false, transformFunction: null }, popupSettings: { classPropertyName: "popupSettings", publicName: "popupSettings", isSignal: false, isRequired: false, transformFunction: null }, isValuePrimitive: { classPropertyName: "isValuePrimitive", publicName: "isValuePrimitive", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitDropdownComponent, isStandalone: false, selector: "kit-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: false, isRequired: false, transformFunction: null }, defaultItem: { classPropertyName: "defaultItem", publicName: "defaultItem", isSignal: false, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultItem: { classPropertyName: "hideDefaultItem", publicName: "hideDefaultItem", isSignal: false, isRequired: false, transformFunction: null }, toggleIcon: { classPropertyName: "toggleIcon", publicName: "toggleIcon", isSignal: false, isRequired: false, transformFunction: null }, popupSettings: { classPropertyName: "popupSettings", publicName: "popupSettings", isSignal: false, isRequired: false, transformFunction: null }, isValuePrimitive: { classPropertyName: "isValuePrimitive", publicName: "isValuePrimitive", isSignal: false, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, noDataTemplate: { classPropertyName: "noDataTemplate", publicName: "noDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => KitDropdownComponent),
                 multi: true,
-            }], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: ["kitDropdownItemTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n     [class.disabled]=\"disabled\"\n     [class.invalid]=\"invalid\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n                     [for]=\"$any(dropdown)\"\n    ></kit-input-label>\n  }\n  <kendo-dropdownlist #dropdown\n                      valueField=\"value\"\n                      textField=\"text\"\n                      class=\"dropdown\"\n                      [ngClass]=\"getCssClasses()\"\n                      [data]=\"items\"\n                      [valuePrimitive]=\"isValuePrimitive\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"buildPopupSettings()\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      [defaultItem]=\"defaultItem\"\n                      [listHeight]=\"listHeight\"\n                      [(ngModel)]=\"selectedItem\"\n                      (open)=\"onOpen()\"\n                      (close)=\"onClose()\"\n                      (selectionChange)=\"onItemSelect($event)\">\n    <ng-template kendoDropDownListValueTemplate\n                 let-dataItem>\n      @if (kitDropdownValueTemplate) {\n        <div class=\"value-text\">\n          <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n      }\n      <kit-svg-icon class=\"value-icon\"\n                    [icon]=\"toggleIcon\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoDropDownListItemTemplate\n                 let-dataItem>\n      @if (kitDropdownItemTemplate) {\n        <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      } @else {\n        <span class=\"option-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n  </kendo-dropdownlist>\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "component", type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { 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: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            }], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: KitDropdownItemTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n     [class.disabled]=\"disabled\"\n     [class.invalid]=\"invalid\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n                     [for]=\"$any(dropdown)\"\n    ></kit-input-label>\n  }\n  <kendo-dropdownlist #dropdown\n                      valueField=\"value\"\n                      textField=\"text\"\n                      class=\"dropdown\"\n                      [ngClass]=\"getCssClasses()\"\n                      [data]=\"items\"\n                      [valuePrimitive]=\"isValuePrimitive\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"buildPopupSettings()\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      [defaultItem]=\"defaultItem\"\n                      [listHeight]=\"listHeight\"\n                      [(ngModel)]=\"selectedItem\"\n                      (open)=\"onOpen()\"\n                      (close)=\"onClose()\"\n                      (selectionChange)=\"onItemSelect($event)\">\n    <ng-template kendoDropDownListValueTemplate\n                 let-dataItem>\n      @if (kitDropdownValueTemplate) {\n        <div class=\"value-text\">\n          <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n      }\n      <kit-svg-icon class=\"value-icon\"\n                    [icon]=\"toggleIcon\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoDropDownListItemTemplate\n                 let-dataItem>\n      @if (kitDropdownItemTemplate) {\n        <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      } @else {\n        <span class=\"option-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n    @if (footerTemplate()) {\n      <ng-template kendoDropDownListFooterTemplate>\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n      </ng-template>\n    }\n    @if (noDataTemplate()) {\n      <ng-template kendoDropDownListNoDataTemplate>\n        <ng-container *ngTemplateOutlet=\"noDataTemplate()\"/>\n      </ng-template>\n    }\n  </kendo-dropdownlist>\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "component", type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$4.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: i1$4.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { 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: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDropdownComponent, decorators: [{
             type: Component,
@@ -1126,7 +1140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => KitDropdownComponent),
                             multi: true,
-                        }], standalone: false, template: "<div class=\"kit-dropdown {{ size() }}\"\n     [class.disabled]=\"disabled\"\n     [class.invalid]=\"invalid\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n                     [for]=\"$any(dropdown)\"\n    ></kit-input-label>\n  }\n  <kendo-dropdownlist #dropdown\n                      valueField=\"value\"\n                      textField=\"text\"\n                      class=\"dropdown\"\n                      [ngClass]=\"getCssClasses()\"\n                      [data]=\"items\"\n                      [valuePrimitive]=\"isValuePrimitive\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"buildPopupSettings()\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      [defaultItem]=\"defaultItem\"\n                      [listHeight]=\"listHeight\"\n                      [(ngModel)]=\"selectedItem\"\n                      (open)=\"onOpen()\"\n                      (close)=\"onClose()\"\n                      (selectionChange)=\"onItemSelect($event)\">\n    <ng-template kendoDropDownListValueTemplate\n                 let-dataItem>\n      @if (kitDropdownValueTemplate) {\n        <div class=\"value-text\">\n          <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n      }\n      <kit-svg-icon class=\"value-icon\"\n                    [icon]=\"toggleIcon\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoDropDownListItemTemplate\n                 let-dataItem>\n      @if (kitDropdownItemTemplate) {\n        <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      } @else {\n        <span class=\"option-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n  </kendo-dropdownlist>\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"] }]
+                        }], standalone: false, template: "<div class=\"kit-dropdown {{ size() }}\"\n     [class.disabled]=\"disabled\"\n     [class.invalid]=\"invalid\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n                     [for]=\"$any(dropdown)\"\n    ></kit-input-label>\n  }\n  <kendo-dropdownlist #dropdown\n                      valueField=\"value\"\n                      textField=\"text\"\n                      class=\"dropdown\"\n                      [ngClass]=\"getCssClasses()\"\n                      [data]=\"items\"\n                      [valuePrimitive]=\"isValuePrimitive\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"buildPopupSettings()\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      [defaultItem]=\"defaultItem\"\n                      [listHeight]=\"listHeight\"\n                      [(ngModel)]=\"selectedItem\"\n                      (open)=\"onOpen()\"\n                      (close)=\"onClose()\"\n                      (selectionChange)=\"onItemSelect($event)\">\n    <ng-template kendoDropDownListValueTemplate\n                 let-dataItem>\n      @if (kitDropdownValueTemplate) {\n        <div class=\"value-text\">\n          <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n      }\n      <kit-svg-icon class=\"value-icon\"\n                    [icon]=\"toggleIcon\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoDropDownListItemTemplate\n                 let-dataItem>\n      @if (kitDropdownItemTemplate) {\n        <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      } @else {\n        <span class=\"option-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n    @if (footerTemplate()) {\n      <ng-template kendoDropDownListFooterTemplate>\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n      </ng-template>\n    }\n    @if (noDataTemplate()) {\n      <ng-template kendoDropDownListNoDataTemplate>\n        <ng-container *ngTemplateOutlet=\"noDataTemplate()\"/>\n      </ng-template>\n    }\n  </kendo-dropdownlist>\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
                 type: Input
             }], selectedItem: [{
@@ -1160,7 +1174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 args: ['kitDropdownValueTemplate', { read: TemplateRef }]
             }], kitDropdownItemTemplate: [{
                 type: ContentChild,
-                args: ['kitDropdownItemTemplate', { read: TemplateRef }]
+                args: [KitDropdownItemTemplateDirective, { read: TemplateRef }]
             }], dropdown: [{
                 type: ViewChild,
                 args: ['dropdown']
@@ -1174,7 +1188,9 @@ class KitDropdownModule {
             ReactiveFormsModule,
             FormsModule,
             KitSvgIconModule,
-            KitInputLabelModule], exports: [KitDropdownComponent] }); }
+            KitInputLabelModule,
+            KitDropdownItemTemplateDirective], exports: [KitDropdownComponent,
+            KitDropdownItemTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDropdownModule, imports: [DropDownListModule,
             CommonModule,
             KitInputMessageModule,
@@ -1191,6 +1207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     ],
                     exports: [
                         KitDropdownComponent,
+                        KitDropdownItemTemplateDirective,
                     ],
                     imports: [
                         DropDownListModule,
@@ -1200,6 +1217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         FormsModule,
                         KitSvgIconModule,
                         KitInputLabelModule,
+                        KitDropdownItemTemplateDirective,
                     ],
                 }]
         }] });
@@ -2906,7 +2924,7 @@ class KitCtaPanelItemComponent {
         this.clicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelItemComponent, isStandalone: false, selector: "kit-cta-panel-item", inputs: { item: "item", type: "type" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-item\">\n  <div class=\"panel-item-inner\">\n    <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n                  [icon]=\"item?.icon\"\n    ></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n        {{ item?.title }}\n      </div>\n\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n          <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n          <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n        <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n                       [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n                       [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n        ></kit-copy-text>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:10px}.kit-cta-panel-item .button-icon{width:12px;height:12px;fill:#56a2f7}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitCopyTextComponent, selector: "kit-copy-text", inputs: ["textToCopy", "tooltipTextBefore", "tooltipTextAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelItemComponent, isStandalone: false, selector: "kit-cta-panel-item", inputs: { item: "item", type: "type" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-item\">\n  <div class=\"panel-item-inner\">\n    <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n                  [icon]=\"item?.icon\"\n    ></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n        {{ item?.title }}\n      </div>\n\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n          <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n          <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n        <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n                       [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n                       [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n        ></kit-copy-text>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:10px}.kit-cta-panel-item .button-icon{width:12px;height:12px;fill:#56a2f7}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitCopyTextComponent, selector: "kit-copy-text", inputs: ["textToCopy", "tooltipTextBefore", "tooltipTextAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelItemComponent, decorators: [{
             type: Component,
@@ -3067,7 +3085,7 @@ class KitCtaPanelConfirmationComponent {
         this.confirmClicked.emit(this.form.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelConfirmationComponent, deps: [{ token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelConfirmationComponent, isStandalone: false, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n  <div class=\"confirmation-head\">\n    <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n                  [icon]=\"data?.icon\"\n    ></kit-svg-icon>\n    <div class=\"head-text\">\n      <div class=\"head-title\">{{ data?.title }}</div>\n      <div *ngIf=\"data?.description\" class=\"head-description\">\n        {{ data?.description }}\n      </div>\n    </div>\n  </div>\n  <div class=\"confirmation-main\">\n    <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n      <kit-dropdown *ngIf=\"data?.dropdownItems\"\n                    formControlName=\"reason\"\n                    [defaultItem]=\"data?.defaultDropdownItem\"\n                    [label]=\"data?.dropdownLabel\"\n                    [items]=\"data?.dropdownItems\"\n                    [listHeight]=\"dropdownListHeight\"\n      ></kit-dropdown>\n\n      <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n                    formControlName=\"checkbox\"\n                    [label]=\"data?.checkboxLabel\"\n      ></kit-checkbox>\n    </form>\n  </div>\n  <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"onConfirmButtonClick()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelConfirmationComponent, isStandalone: false, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n  <div class=\"confirmation-head\">\n    <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n                  [icon]=\"data?.icon\"\n    ></kit-svg-icon>\n    <div class=\"head-text\">\n      <div class=\"head-title\">{{ data?.title }}</div>\n      <div *ngIf=\"data?.description\" class=\"head-description\">\n        {{ data?.description }}\n      </div>\n    </div>\n  </div>\n  <div class=\"confirmation-main\">\n    <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n      <kit-dropdown *ngIf=\"data?.dropdownItems\"\n                    formControlName=\"reason\"\n                    [defaultItem]=\"data?.defaultDropdownItem\"\n                    [label]=\"data?.dropdownLabel\"\n                    [items]=\"data?.dropdownItems\"\n                    [listHeight]=\"dropdownListHeight\"\n      ></kit-dropdown>\n\n      <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n                    formControlName=\"checkbox\"\n                    [label]=\"data?.checkboxLabel\"\n      ></kit-checkbox>\n    </form>\n  </div>\n  <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"onConfirmButtonClick()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelConfirmationComponent, decorators: [{
             type: Component,
@@ -3242,12 +3260,12 @@ class KitQueryParamsService {
             [name]: value.length > 1 && [...value] || value[0],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitQueryParamsService, deps: [{ token: i1$7.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitQueryParamsService, deps: [{ token: i2$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitQueryParamsService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitQueryParamsService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$7.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i2$1.ActivatedRoute }] });
 const buildRandomUUID = () => v4();
@@ -3406,7 +3424,7 @@ class KitNavigationTabsComponent {
         return item.iconType ?? KitSvgIconType.FILL;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitNavigationTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationTabsComponent, isStandalone: false, selector: "kit-navigation-tabs", inputs: { items: "items", type: "type" }, ngImport: i0, template: "<div class=\"kit-navigation-tabs\">\n  <div class=\"tabs-nav\"\n       [ngClass]=\"type\">\n    @for (item of items; track item) {\n      <a class=\"tab-item\"\n         routerLinkActive=\"active\"\n         [class.disabled]=\"item.disabled\"\n         [routerLink]=\"getRouterLink(item)\">\n        @if (item.icon) {\n          <kit-svg-icon class=\"tab-item-icon\"\n                        [icon]=\"item.icon\"\n                        [ngClass]=\"getItemIconCssClass(item)\"\n          ></kit-svg-icon>\n        }\n        <span class=\"tab-item-title\"\n              [innerHTML]=\"item.title\"\n        ></span>\n      </a>\n    }\n  </div>\n</div>\n", styles: [".kit-navigation-tabs .tabs-nav{display:flex;align-items:center}.kit-navigation-tabs .tab-item{display:flex;align-items:center;gap:6px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;text-decoration:none}.kit-navigation-tabs .tab-item.disabled{color:var(--ui-kit-color-grey-12)}.kit-navigation-tabs .tab-item.disabled .tab-item-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-navigation-tabs .tab-item.disabled .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-tabs .tab-item-icon{display:block;width:16px;height:16px}.kit-navigation-tabs .tab-item-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-navigation-tabs .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-navigation-tabs .text.tabs-nav{gap:32px}.kit-navigation-tabs .text .tab-item{height:46px;border-bottom:2px solid transparent}.kit-navigation-tabs .text .tab-item:hover:not(.disabled){color:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item:hover:not(.disabled) .tab-item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item:hover:not(.disabled) .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item.active .tab-item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item.active .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11)}.kit-navigation-tabs .button .tab-item:not(:last-child){border-right:none}.kit-navigation-tabs .button .tab-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.kit-navigation-tabs .button .tab-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.kit-navigation-tabs .button .tab-item:hover:not(.disabled):not(.active){color:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item:hover:not(.disabled):not(.active) .tab-item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item:hover:not(.disabled):not(.active) .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item.active{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item.active .tab-item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-tabs .button .tab-item.active .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationTabsComponent, isStandalone: false, selector: "kit-navigation-tabs", inputs: { items: "items", type: "type" }, ngImport: i0, template: "<div class=\"kit-navigation-tabs\">\n  <div class=\"tabs-nav\"\n       [ngClass]=\"type\">\n    @for (item of items; track item) {\n      <a class=\"tab-item\"\n         routerLinkActive=\"active\"\n         [class.disabled]=\"item.disabled\"\n         [routerLink]=\"getRouterLink(item)\">\n        @if (item.icon) {\n          <kit-svg-icon class=\"tab-item-icon\"\n                        [icon]=\"item.icon\"\n                        [ngClass]=\"getItemIconCssClass(item)\"\n          ></kit-svg-icon>\n        }\n        <span class=\"tab-item-title\"\n              [innerHTML]=\"item.title\"\n        ></span>\n      </a>\n    }\n  </div>\n</div>\n", styles: [".kit-navigation-tabs .tabs-nav{display:flex;align-items:center}.kit-navigation-tabs .tab-item{display:flex;align-items:center;gap:6px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;text-decoration:none}.kit-navigation-tabs .tab-item.disabled{color:var(--ui-kit-color-grey-12)}.kit-navigation-tabs .tab-item.disabled .tab-item-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-navigation-tabs .tab-item.disabled .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-tabs .tab-item-icon{display:block;width:16px;height:16px}.kit-navigation-tabs .tab-item-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-navigation-tabs .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-10)}.kit-navigation-tabs .text.tabs-nav{gap:32px}.kit-navigation-tabs .text .tab-item{height:46px;border-bottom:2px solid transparent}.kit-navigation-tabs .text .tab-item:hover:not(.disabled){color:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item:hover:not(.disabled) .tab-item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item:hover:not(.disabled) .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item.active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item.active .tab-item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-tabs .text .tab-item.active .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item{padding:0 16px;height:32px;border:1px solid var(--ui-kit-color-grey-11)}.kit-navigation-tabs .button .tab-item:not(:last-child){border-right:none}.kit-navigation-tabs .button .tab-item:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.kit-navigation-tabs .button .tab-item:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.kit-navigation-tabs .button .tab-item:hover:not(.disabled):not(.active){color:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item:hover:not(.disabled):not(.active) .tab-item-icon{fill:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item:hover:not(.disabled):not(.active) .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item.active{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-navigation-tabs .button .tab-item.active .tab-item-icon{fill:var(--ui-kit-color-white)}.kit-navigation-tabs .button .tab-item.active .tab-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitNavigationTabsComponent, decorators: [{
             type: Component,
@@ -3470,18 +3488,18 @@ class KitDialogService {
         this._dialogRef()?.close();
         this._dialogRef.set(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogService, deps: [{ token: i1$8.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogService, deps: [{ token: i1$7.DialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$8.DialogService }] });
+        }], ctorParameters: () => [{ type: i1$7.DialogService }] });
 class KitDialogComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitDialogComponent, isStandalone: true, selector: "kit-dialog", providers: [
             KitDialogService,
-        ], ngImport: i0, template: "<div class=\"kit-dialog\">\n  <div class=\"kit-dialog-container\" kendoDialogContainer\n       [hidden]=\"true\"\n  ></div>\n</div>\n", styles: [".kit-button .default.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .default.primary:hover{background:var(--ui-kit-color-hover)}.kit-button .default.primary.active,.kit-button .default.primary:active{background:var(--ui-kit-color-main)}.kit-button .default.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .default.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .default.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .default.ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .default.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .default.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .default.ghost.active,.kit-button .default.ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .default.ghost.active .kit-button-icon.fill,.kit-button .default.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.ghost.active .kit-button-icon.stroke,.kit-button .default.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .default.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .default.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .default.text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .default.text:disabled{border:none;background:none}.kit-button .default.text:hover,.kit-button .default.text.active,.kit-button .default.text:active{background:var(--ui-kit-color-grey-13)}.kit-button .default.text:hover{color:var(--ui-kit-color-hover)}.kit-button .default.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .default.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .default.text.active,.kit-button .default.text:active{color:var(--ui-kit-color-grey-10)}.kit-button .default.text.active .kit-button-icon.fill,.kit-button .default.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .default.text.active .kit-button-icon.stroke,.kit-button .default.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .default.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .default.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .default.link{color:var(--ui-kit-color-main);background:none}.kit-button .default.link:disabled{border:none;background:none}.kit-button .default.link:hover{color:var(--ui-kit-color-hover)}.kit-button .default.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .default.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .default.link.active,.kit-button .default.link:active{color:var(--ui-kit-color-main)}.kit-button .default.link.active .kit-button-icon.fill,.kit-button .default.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.link.active .kit-button-icon.stroke,.kit-button .default.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .default.link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .default.dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .default.dashed:disabled{border-style:dashed}.kit-button .default.dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .default.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .default.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .default.dashed.active,.kit-button .default.dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .default.dashed.active .kit-button-icon.fill,.kit-button .default.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.dashed.active .kit-button-icon.stroke,.kit-button .default.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .default.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .success.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-green-1)}.kit-button .success.primary:hover{background:var(--ui-kit-color-green-6)}.kit-button .success.primary.active,.kit-button .success.primary:active{background:var(--ui-kit-color-green-1)}.kit-button .success.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .success.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .success.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .success.ghost:hover{color:var(--ui-kit-color-green-6);border-color:var(--ui-kit-color-green-6)}.kit-button .success.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}.kit-button .success.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}.kit-button .success.ghost.active,.kit-button .success.ghost:active{color:var(--ui-kit-color-green-7);border-color:var(--ui-kit-color-green-7);background:var(--ui-kit-color-green-5)}.kit-button .success.ghost.active .kit-button-icon.fill,.kit-button .success.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-7);stroke:none}.kit-button .success.ghost.active .kit-button-icon.stroke,.kit-button .success.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-7);fill:none}.kit-button .success.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .success.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .success.text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .success.text:disabled{border:none;background:none}.kit-button .success.text:hover,.kit-button .success.text.active,.kit-button .success.text:active{background:var(--ui-kit-color-grey-13)}.kit-button .success.text:hover{color:var(--ui-kit-color-green-6)}.kit-button .success.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}.kit-button .success.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}.kit-button .success.text.active,.kit-button .success.text:active{color:var(--ui-kit-color-grey-10)}.kit-button .success.text.active .kit-button-icon.fill,.kit-button .success.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .success.text.active .kit-button-icon.stroke,.kit-button .success.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .success.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .success.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .success.link{color:var(--ui-kit-color-green-1);background:none}.kit-button .success.link:disabled{border:none;background:none}.kit-button .success.link:hover{color:var(--ui-kit-color-green-6)}.kit-button .success.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}.kit-button .success.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}.kit-button .success.link.active,.kit-button .success.link:active{color:var(--ui-kit-color-green-1)}.kit-button .success.link.active .kit-button-icon.fill,.kit-button .success.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-button .success.link.active .kit-button-icon.stroke,.kit-button .success.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}.kit-button .success.link .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-button .success.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}.kit-button .success.dashed{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .success.dashed:disabled{border-style:dashed}.kit-button .success.dashed:hover{color:var(--ui-kit-color-green-6);border-color:var(--ui-kit-color-green-6)}.kit-button .success.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}.kit-button .success.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}.kit-button .success.dashed.active,.kit-button .success.dashed:active{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1)}.kit-button .success.dashed.active .kit-button-icon.fill,.kit-button .success.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-button .success.dashed.active .kit-button-icon.stroke,.kit-button .success.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}.kit-button .success.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-button .success.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}.kit-button .warning.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-orange)}.kit-button .warning.primary:hover{background:var(--ui-kit-color-orange-6)}.kit-button .warning.primary.active,.kit-button .warning.primary:active{background:var(--ui-kit-color-orange)}.kit-button .warning.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .warning.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .warning.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-button .warning.ghost:hover{color:var(--ui-kit-color-orange-6);border-color:var(--ui-kit-color-orange-6)}.kit-button .warning.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}.kit-button .warning.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}.kit-button .warning.ghost.active,.kit-button .warning.ghost:active{color:var(--ui-kit-color-orange-7);border-color:var(--ui-kit-color-orange-7);background:var(--ui-kit-color-orange-4)}.kit-button .warning.ghost.active .kit-button-icon.fill,.kit-button .warning.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange-7);stroke:none}.kit-button .warning.ghost.active .kit-button-icon.stroke,.kit-button .warning.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-7);fill:none}.kit-button .warning.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .warning.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .warning.text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .warning.text:disabled{border:none;background:none}.kit-button .warning.text:hover,.kit-button .warning.text.active,.kit-button .warning.text:active{background:var(--ui-kit-color-grey-13)}.kit-button .warning.text:hover{color:var(--ui-kit-color-orange-6)}.kit-button .warning.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}.kit-button .warning.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}.kit-button .warning.text.active,.kit-button .warning.text:active{color:var(--ui-kit-color-grey-10)}.kit-button .warning.text.active .kit-button-icon.fill,.kit-button .warning.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .warning.text.active .kit-button-icon.stroke,.kit-button .warning.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .warning.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .warning.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .warning.link{color:var(--ui-kit-color-orange);background:none}.kit-button .warning.link:disabled{border:none;background:none}.kit-button .warning.link:hover{color:var(--ui-kit-color-orange-6)}.kit-button .warning.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}.kit-button .warning.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}.kit-button .warning.link.active,.kit-button .warning.link:active{color:var(--ui-kit-color-orange)}.kit-button .warning.link.active .kit-button-icon.fill,.kit-button .warning.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-button .warning.link.active .kit-button-icon.stroke,.kit-button .warning.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-button .warning.link .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-button .warning.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-button .warning.dashed{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .warning.dashed:disabled{border-style:dashed}.kit-button .warning.dashed:hover{color:var(--ui-kit-color-orange-6);border-color:var(--ui-kit-color-orange-6)}.kit-button .warning.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}.kit-button .warning.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}.kit-button .warning.dashed.active,.kit-button .warning.dashed:active{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange)}.kit-button .warning.dashed.active .kit-button-icon.fill,.kit-button .warning.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-button .warning.dashed.active .kit-button-icon.stroke,.kit-button .warning.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-button .warning.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-button .warning.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n", "::ng-deep .kit-dialog .k-overlay{opacity:.25}::ng-deep .kit-dialog .k-dialog{background:var(--ui-kit-color-white);border-radius:8px;box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;overflow:hidden}::ng-deep .kit-dialog .k-dialog-titlebar{display:flex;margin:0 24px;padding:16px 0 8px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:none}::ng-deep .kit-dialog .k-dialog-titlebar-action{padding:0}::ng-deep .kit-dialog .k-dialog-titlebar-action:before,::ng-deep .kit-dialog .k-dialog-titlebar-action:after{opacity:0}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon{width:18px;height:18px;min-width:auto;min-height:auto;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon:hover{color:var(--ui-kit-color-hover);background:none}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon>svg{width:18px;height:18px}::ng-deep .kit-dialog .k-dialog-title{color:var(--ui-kit-color-grey-10);font-size:18px;flex:1 0}::ng-deep .kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-dialog .k-dialog-actions{display:flex;justify-content:space-between;padding:24px;border:none;background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .k-button{flex:none}::ng-deep .kit-dialog .k-dialog-actions .default.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .default.primary:hover{background:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.primary.active,::ng-deep .kit-dialog .k-dialog-actions .default.primary:active{background:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .default.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .default.ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost.active,::ng-deep .kit-dialog .k-dialog-actions .default.ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dialog .k-dialog-actions .default.ghost.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .default.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .default.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.text{color:var(--ui-kit-color-grey-10);background:none}::ng-deep .kit-dialog .k-dialog-actions .default.text:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .default.text:hover,::ng-deep .kit-dialog .k-dialog-actions .default.text.active,::ng-deep .kit-dialog .k-dialog-actions .default.text:active{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .default.text:hover{color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.text.active,::ng-deep .kit-dialog .k-dialog-actions .default.text:active{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-dialog .k-dialog-actions .default.text.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .default.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.text.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .default.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.link{color:var(--ui-kit-color-main);background:none}::ng-deep .kit-dialog .k-dialog-actions .default.link:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .default.link:hover{color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.link.active,::ng-deep .kit-dialog .k-dialog-actions .default.link:active{color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .default.link.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .default.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.link.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .default.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .default.dashed:disabled{border-style:dashed}::ng-deep .kit-dialog .k-dialog-actions .default.dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed.active,::ng-deep .kit-dialog .k-dialog-actions .default.dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .default.dashed.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .default.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .default.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-green-1)}::ng-deep .kit-dialog .k-dialog-actions .success.primary:hover{background:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.primary.active,::ng-deep .kit-dialog .k-dialog-actions .success.primary:active{background:var(--ui-kit-color-green-1)}::ng-deep .kit-dialog .k-dialog-actions .success.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .success.ghost:hover{color:var(--ui-kit-color-green-6);border-color:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost.active,::ng-deep .kit-dialog .k-dialog-actions .success.ghost:active{color:var(--ui-kit-color-green-7);border-color:var(--ui-kit-color-green-7);background:var(--ui-kit-color-green-5)}::ng-deep .kit-dialog .k-dialog-actions .success.ghost.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .success.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-7);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .success.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-7);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.text{color:var(--ui-kit-color-grey-10);background:none}::ng-deep .kit-dialog .k-dialog-actions .success.text:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .success.text:hover,::ng-deep .kit-dialog .k-dialog-actions .success.text.active,::ng-deep .kit-dialog .k-dialog-actions .success.text:active{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .success.text:hover{color:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.text.active,::ng-deep .kit-dialog .k-dialog-actions .success.text:active{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-dialog .k-dialog-actions .success.text.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .success.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.text.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .success.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.link{color:var(--ui-kit-color-green-1);background:none}::ng-deep .kit-dialog .k-dialog-actions .success.link:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .success.link:hover{color:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.link.active,::ng-deep .kit-dialog .k-dialog-actions .success.link:active{color:var(--ui-kit-color-green-1)}::ng-deep .kit-dialog .k-dialog-actions .success.link.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .success.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.link.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .success.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.link .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);border-style:dashed;background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .success.dashed:disabled{border-style:dashed}::ng-deep .kit-dialog .k-dialog-actions .success.dashed:hover{color:var(--ui-kit-color-green-6);border-color:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed.active,::ng-deep .kit-dialog .k-dialog-actions .success.dashed:active{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1)}::ng-deep .kit-dialog .k-dialog-actions .success.dashed.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .success.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .success.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-orange)}::ng-deep .kit-dialog .k-dialog-actions .warning.primary:hover{background:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.primary.active,::ng-deep .kit-dialog .k-dialog-actions .warning.primary:active{background:var(--ui-kit-color-orange)}::ng-deep .kit-dialog .k-dialog-actions .warning.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:hover{color:var(--ui-kit-color-orange-6);border-color:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost.active,::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:active{color:var(--ui-kit-color-orange-7);border-color:var(--ui-kit-color-orange-7);background:var(--ui-kit-color-orange-4)}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange-7);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-7);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text{color:var(--ui-kit-color-grey-10);background:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text:hover,::ng-deep .kit-dialog .k-dialog-actions .warning.text.active,::ng-deep .kit-dialog .k-dialog-actions .warning.text:active{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .warning.text:hover{color:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text.active,::ng-deep .kit-dialog .k-dialog-actions .warning.text:active{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-dialog .k-dialog-actions .warning.text.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .warning.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .warning.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link{color:var(--ui-kit-color-orange);background:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link:hover{color:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link.active,::ng-deep .kit-dialog .k-dialog-actions .warning.link:active{color:var(--ui-kit-color-orange)}::ng-deep .kit-dialog .k-dialog-actions .warning.link.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .warning.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .warning.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);border-style:dashed;background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:disabled{border-style:dashed}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:hover{color:var(--ui-kit-color-orange-6);border-color:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed.active,::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:active{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange)}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}::ng-deep .kit-dialog .k-dialog-actions .k-button-text{display:flex;align-items:center;gap:8px}::ng-deep .kit-dialog .k-dialog-actions .kit-button-icon{display:block}::ng-deep .kit-dialog .k-dialog-actions .k-button{font-weight:400;border:1px solid transparent;transition:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:focus{box-shadow:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}::ng-deep .kit-dialog .k-dialog-actions .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}::ng-deep .kit-dialog .k-dialog-actions .large .kit-button-icon{width:18px;height:18px}::ng-deep .kit-dialog .k-dialog-actions .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}::ng-deep .kit-dialog .k-dialog-actions .medium .kit-button-icon{width:16px;height:16px}::ng-deep .kit-dialog .k-dialog-actions .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}::ng-deep .kit-dialog .k-dialog-actions .small .kit-button-icon{width:14px;height:14px}::ng-deep .kit-dialog .k-dialog-actions .leading .k-button-text{flex-direction:row-reverse}::ng-deep .kit-dialog .k-dialog-actions .trailing .k-button-text{flex-direction:row}::ng-deep .kit-dialog .k-dialog-actions .no-label.large{padding:0 11px}::ng-deep .kit-dialog .k-dialog-actions .no-label.medium{padding:0 8px}::ng-deep .kit-dialog .k-dialog-actions .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "directive", type: i1$8.DialogContainerDirective, selector: "[kendoDialogContainer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"kit-dialog\">\n  <div class=\"kit-dialog-container\" kendoDialogContainer\n       [hidden]=\"true\"\n  ></div>\n</div>\n", styles: [".kit-button .default.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .default.primary:hover{background:var(--ui-kit-color-hover)}.kit-button .default.primary.active,.kit-button .default.primary:active{background:var(--ui-kit-color-main)}.kit-button .default.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .default.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .default.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .default.ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .default.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .default.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .default.ghost.active,.kit-button .default.ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}.kit-button .default.ghost.active .kit-button-icon.fill,.kit-button .default.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.ghost.active .kit-button-icon.stroke,.kit-button .default.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .default.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .default.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .default.text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .default.text:disabled{border:none;background:none}.kit-button .default.text:hover,.kit-button .default.text.active,.kit-button .default.text:active{background:var(--ui-kit-color-grey-13)}.kit-button .default.text:hover{color:var(--ui-kit-color-hover)}.kit-button .default.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .default.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .default.text.active,.kit-button .default.text:active{color:var(--ui-kit-color-grey-10)}.kit-button .default.text.active .kit-button-icon.fill,.kit-button .default.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .default.text.active .kit-button-icon.stroke,.kit-button .default.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .default.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .default.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .default.link{color:var(--ui-kit-color-main);background:none}.kit-button .default.link:disabled{border:none;background:none}.kit-button .default.link:hover{color:var(--ui-kit-color-hover)}.kit-button .default.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .default.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .default.link.active,.kit-button .default.link:active{color:var(--ui-kit-color-main)}.kit-button .default.link.active .kit-button-icon.fill,.kit-button .default.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.link.active .kit-button-icon.stroke,.kit-button .default.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .default.link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .default.dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .default.dashed:disabled{border-style:dashed}.kit-button .default.dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .default.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .default.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .default.dashed.active,.kit-button .default.dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .default.dashed.active .kit-button-icon.fill,.kit-button .default.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.dashed.active .kit-button-icon.stroke,.kit-button .default.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .default.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .default.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .success.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-green-1)}.kit-button .success.primary:hover{background:var(--ui-kit-color-green-6)}.kit-button .success.primary.active,.kit-button .success.primary:active{background:var(--ui-kit-color-green-1)}.kit-button .success.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .success.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .success.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .success.ghost:hover{color:var(--ui-kit-color-green-6);border-color:var(--ui-kit-color-green-6)}.kit-button .success.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}.kit-button .success.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}.kit-button .success.ghost.active,.kit-button .success.ghost:active{color:var(--ui-kit-color-green-7);border-color:var(--ui-kit-color-green-7);background:var(--ui-kit-color-green-5)}.kit-button .success.ghost.active .kit-button-icon.fill,.kit-button .success.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-7);stroke:none}.kit-button .success.ghost.active .kit-button-icon.stroke,.kit-button .success.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-7);fill:none}.kit-button .success.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .success.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .success.text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .success.text:disabled{border:none;background:none}.kit-button .success.text:hover,.kit-button .success.text.active,.kit-button .success.text:active{background:var(--ui-kit-color-grey-13)}.kit-button .success.text:hover{color:var(--ui-kit-color-green-6)}.kit-button .success.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}.kit-button .success.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}.kit-button .success.text.active,.kit-button .success.text:active{color:var(--ui-kit-color-grey-10)}.kit-button .success.text.active .kit-button-icon.fill,.kit-button .success.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .success.text.active .kit-button-icon.stroke,.kit-button .success.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .success.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .success.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .success.link{color:var(--ui-kit-color-green-1);background:none}.kit-button .success.link:disabled{border:none;background:none}.kit-button .success.link:hover{color:var(--ui-kit-color-green-6)}.kit-button .success.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}.kit-button .success.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}.kit-button .success.link.active,.kit-button .success.link:active{color:var(--ui-kit-color-green-1)}.kit-button .success.link.active .kit-button-icon.fill,.kit-button .success.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-button .success.link.active .kit-button-icon.stroke,.kit-button .success.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}.kit-button .success.link .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-button .success.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}.kit-button .success.dashed{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .success.dashed:disabled{border-style:dashed}.kit-button .success.dashed:hover{color:var(--ui-kit-color-green-6);border-color:var(--ui-kit-color-green-6)}.kit-button .success.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}.kit-button .success.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}.kit-button .success.dashed.active,.kit-button .success.dashed:active{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1)}.kit-button .success.dashed.active .kit-button-icon.fill,.kit-button .success.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-button .success.dashed.active .kit-button-icon.stroke,.kit-button .success.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}.kit-button .success.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}.kit-button .success.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}.kit-button .warning.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-orange)}.kit-button .warning.primary:hover{background:var(--ui-kit-color-orange-6)}.kit-button .warning.primary.active,.kit-button .warning.primary:active{background:var(--ui-kit-color-orange)}.kit-button .warning.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .warning.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .warning.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}.kit-button .warning.ghost:hover{color:var(--ui-kit-color-orange-6);border-color:var(--ui-kit-color-orange-6)}.kit-button .warning.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}.kit-button .warning.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}.kit-button .warning.ghost.active,.kit-button .warning.ghost:active{color:var(--ui-kit-color-orange-7);border-color:var(--ui-kit-color-orange-7);background:var(--ui-kit-color-orange-4)}.kit-button .warning.ghost.active .kit-button-icon.fill,.kit-button .warning.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange-7);stroke:none}.kit-button .warning.ghost.active .kit-button-icon.stroke,.kit-button .warning.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-7);fill:none}.kit-button .warning.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .warning.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .warning.text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .warning.text:disabled{border:none;background:none}.kit-button .warning.text:hover,.kit-button .warning.text.active,.kit-button .warning.text:active{background:var(--ui-kit-color-grey-13)}.kit-button .warning.text:hover{color:var(--ui-kit-color-orange-6)}.kit-button .warning.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}.kit-button .warning.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}.kit-button .warning.text.active,.kit-button .warning.text:active{color:var(--ui-kit-color-grey-10)}.kit-button .warning.text.active .kit-button-icon.fill,.kit-button .warning.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .warning.text.active .kit-button-icon.stroke,.kit-button .warning.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .warning.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .warning.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .warning.link{color:var(--ui-kit-color-orange);background:none}.kit-button .warning.link:disabled{border:none;background:none}.kit-button .warning.link:hover{color:var(--ui-kit-color-orange-6)}.kit-button .warning.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}.kit-button .warning.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}.kit-button .warning.link.active,.kit-button .warning.link:active{color:var(--ui-kit-color-orange)}.kit-button .warning.link.active .kit-button-icon.fill,.kit-button .warning.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-button .warning.link.active .kit-button-icon.stroke,.kit-button .warning.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-button .warning.link .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-button .warning.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-button .warning.dashed{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .warning.dashed:disabled{border-style:dashed}.kit-button .warning.dashed:hover{color:var(--ui-kit-color-orange-6);border-color:var(--ui-kit-color-orange-6)}.kit-button .warning.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}.kit-button .warning.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}.kit-button .warning.dashed.active,.kit-button .warning.dashed:active{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange)}.kit-button .warning.dashed.active .kit-button-icon.fill,.kit-button .warning.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-button .warning.dashed.active .kit-button-icon.stroke,.kit-button .warning.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-button .warning.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}.kit-button .warning.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}.kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button .kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n", "::ng-deep .kit-dialog .k-overlay{opacity:.25}::ng-deep .kit-dialog .k-dialog{background:var(--ui-kit-color-white);border-radius:8px;box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d;overflow:hidden}::ng-deep .kit-dialog .k-dialog-titlebar{display:flex;margin:0 24px;padding:16px 0 8px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:none}::ng-deep .kit-dialog .k-dialog-titlebar-action{padding:0}::ng-deep .kit-dialog .k-dialog-titlebar-action:before,::ng-deep .kit-dialog .k-dialog-titlebar-action:after{opacity:0}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon{width:18px;height:18px;min-width:auto;min-height:auto;color:var(--ui-kit-color-grey-12)}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon:hover{color:var(--ui-kit-color-hover);background:none}::ng-deep .kit-dialog .k-dialog-titlebar .k-button-icon>svg{width:18px;height:18px}::ng-deep .kit-dialog .k-dialog-title{color:var(--ui-kit-color-grey-10);font-size:18px;flex:1 0}::ng-deep .kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-dialog .k-dialog-actions{display:flex;justify-content:space-between;padding:24px;border:none;background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .k-button{flex:none}::ng-deep .kit-dialog .k-dialog-actions .default.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .default.primary:hover{background:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.primary.active,::ng-deep .kit-dialog .k-dialog-actions .default.primary:active{background:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .default.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .default.ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost.active,::ng-deep .kit-dialog .k-dialog-actions .default.ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dialog .k-dialog-actions .default.ghost.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .default.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .default.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.text{color:var(--ui-kit-color-grey-10);background:none}::ng-deep .kit-dialog .k-dialog-actions .default.text:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .default.text:hover,::ng-deep .kit-dialog .k-dialog-actions .default.text.active,::ng-deep .kit-dialog .k-dialog-actions .default.text:active{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .default.text:hover{color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.text.active,::ng-deep .kit-dialog .k-dialog-actions .default.text:active{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-dialog .k-dialog-actions .default.text.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .default.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.text.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .default.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.link{color:var(--ui-kit-color-main);background:none}::ng-deep .kit-dialog .k-dialog-actions .default.link:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .default.link:hover{color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.link.active,::ng-deep .kit-dialog .k-dialog-actions .default.link:active{color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .default.link.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .default.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.link.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .default.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .default.dashed:disabled{border-style:dashed}::ng-deep .kit-dialog .k-dialog-actions .default.dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}::ng-deep .kit-dialog .k-dialog-actions .default.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed.active,::ng-deep .kit-dialog .k-dialog-actions .default.dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}::ng-deep .kit-dialog .k-dialog-actions .default.dashed.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .default.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .default.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .default.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-green-1)}::ng-deep .kit-dialog .k-dialog-actions .success.primary:hover{background:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.primary.active,::ng-deep .kit-dialog .k-dialog-actions .success.primary:active{background:var(--ui-kit-color-green-1)}::ng-deep .kit-dialog .k-dialog-actions .success.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .success.ghost:hover{color:var(--ui-kit-color-green-6);border-color:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost.active,::ng-deep .kit-dialog .k-dialog-actions .success.ghost:active{color:var(--ui-kit-color-green-7);border-color:var(--ui-kit-color-green-7);background:var(--ui-kit-color-green-5)}::ng-deep .kit-dialog .k-dialog-actions .success.ghost.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .success.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-7);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .success.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-7);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.text{color:var(--ui-kit-color-grey-10);background:none}::ng-deep .kit-dialog .k-dialog-actions .success.text:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .success.text:hover,::ng-deep .kit-dialog .k-dialog-actions .success.text.active,::ng-deep .kit-dialog .k-dialog-actions .success.text:active{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .success.text:hover{color:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.text.active,::ng-deep .kit-dialog .k-dialog-actions .success.text:active{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-dialog .k-dialog-actions .success.text.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .success.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.text.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .success.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.link{color:var(--ui-kit-color-green-1);background:none}::ng-deep .kit-dialog .k-dialog-actions .success.link:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .success.link:hover{color:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.link.active,::ng-deep .kit-dialog .k-dialog-actions .success.link:active{color:var(--ui-kit-color-green-1)}::ng-deep .kit-dialog .k-dialog-actions .success.link.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .success.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.link.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .success.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.link .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1);border-style:dashed;background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .success.dashed:disabled{border-style:dashed}::ng-deep .kit-dialog .k-dialog-actions .success.dashed:hover{color:var(--ui-kit-color-green-6);border-color:var(--ui-kit-color-green-6)}::ng-deep .kit-dialog .k-dialog-actions .success.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-green-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed.active,::ng-deep .kit-dialog .k-dialog-actions .success.dashed:active{color:var(--ui-kit-color-green-1);border-color:var(--ui-kit-color-green-1)}::ng-deep .kit-dialog .k-dialog-actions .success.dashed.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .success.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .success.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-green-1);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .success.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-green-1);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-orange)}::ng-deep .kit-dialog .k-dialog-actions .warning.primary:hover{background:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.primary.active,::ng-deep .kit-dialog .k-dialog-actions .warning.primary:active{background:var(--ui-kit-color-orange)}::ng-deep .kit-dialog .k-dialog-actions .warning.primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-orange);background:var(--ui-kit-color-orange-4)}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:hover{color:var(--ui-kit-color-orange-6);border-color:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost.active,::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:active{color:var(--ui-kit-color-orange-7);border-color:var(--ui-kit-color-orange-7);background:var(--ui-kit-color-orange-4)}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange-7);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .warning.ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-7);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text{color:var(--ui-kit-color-grey-10);background:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text:hover,::ng-deep .kit-dialog .k-dialog-actions .warning.text.active,::ng-deep .kit-dialog .k-dialog-actions .warning.text:active{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .warning.text:hover{color:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text.active,::ng-deep .kit-dialog .k-dialog-actions .warning.text:active{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-dialog .k-dialog-actions .warning.text.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .warning.text:active .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .warning.text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link{color:var(--ui-kit-color-orange);background:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link:disabled{border:none;background:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link:hover{color:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link.active,::ng-deep .kit-dialog .k-dialog-actions .warning.link:active{color:var(--ui-kit-color-orange)}::ng-deep .kit-dialog .k-dialog-actions .warning.link.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .warning.link:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .warning.link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.link .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange);border-style:dashed;background:var(--ui-kit-color-white)}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:disabled{border-style:dashed}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:hover{color:var(--ui-kit-color-orange-6);border-color:var(--ui-kit-color-orange-6)}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-orange-6);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange-6);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed.active,::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:active{color:var(--ui-kit-color-orange);border-color:var(--ui-kit-color-orange)}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed.active .kit-button-icon.fill,::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed.active .kit-button-icon.stroke,::ng-deep .kit-dialog .k-dialog-actions .warning.dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed .kit-button-icon.fill{fill:var(--ui-kit-color-orange);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .warning.dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-orange);fill:none}::ng-deep .kit-dialog .k-dialog-actions .k-button-text{display:flex;align-items:center;gap:8px}::ng-deep .kit-dialog .k-dialog-actions .kit-button-icon{display:block}::ng-deep .kit-dialog .k-dialog-actions .k-button{font-weight:400;border:1px solid transparent;transition:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:focus{box-shadow:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dialog .k-dialog-actions .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}::ng-deep .kit-dialog .k-dialog-actions .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}::ng-deep .kit-dialog .k-dialog-actions .large .kit-button-icon{width:18px;height:18px}::ng-deep .kit-dialog .k-dialog-actions .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}::ng-deep .kit-dialog .k-dialog-actions .medium .kit-button-icon{width:16px;height:16px}::ng-deep .kit-dialog .k-dialog-actions .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}::ng-deep .kit-dialog .k-dialog-actions .small .kit-button-icon{width:14px;height:14px}::ng-deep .kit-dialog .k-dialog-actions .leading .k-button-text{flex-direction:row-reverse}::ng-deep .kit-dialog .k-dialog-actions .trailing .k-button-text{flex-direction:row}::ng-deep .kit-dialog .k-dialog-actions .no-label.large{padding:0 11px}::ng-deep .kit-dialog .k-dialog-actions .no-label.medium{padding:0 8px}::ng-deep .kit-dialog .k-dialog-actions .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "directive", type: i1$7.DialogContainerDirective, selector: "[kendoDialogContainer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDialogComponent, decorators: [{
             type: Component,
@@ -3706,7 +3724,7 @@ class KitSkeletonComponent {
         this.animation = KitSkeletonAnimation.WAVE;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitSkeletonComponent, isStandalone: false, selector: "kit-skeleton", inputs: { width: "width", height: "height", shape: "shape", animation: "animation" }, ngImport: i0, template: "<kendo-skeleton class=\"kit-skeleton\"\n                [width]=\"width\"\n                [height]=\"height\"\n                [shape]=\"shape\"\n                [animation]=\"animation\"\n></kendo-skeleton>\n", dependencies: [{ kind: "component", type: i1$9.SkeletonComponent, selector: "kendo-skeleton", inputs: ["animation", "shape", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitSkeletonComponent, isStandalone: false, selector: "kit-skeleton", inputs: { width: "width", height: "height", shape: "shape", animation: "animation" }, ngImport: i0, template: "<kendo-skeleton class=\"kit-skeleton\"\n                [width]=\"width\"\n                [height]=\"height\"\n                [shape]=\"shape\"\n                [animation]=\"animation\"\n></kendo-skeleton>\n", dependencies: [{ kind: "component", type: i1$8.SkeletonComponent, selector: "kendo-skeleton", inputs: ["animation", "shape", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSkeletonComponent, decorators: [{
             type: Component,
@@ -3800,7 +3818,7 @@ class KitFileUploadComponent {
         return files;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitFileUploadComponent, isStandalone: false, selector: "kit-file-upload", inputs: { saveUrl: "saveUrl", files: "files", selectFilesLabel: "selectFilesLabel", dropzoneLabel: "dropzoneLabel", restrictions: "restrictions", restrictionsErrorMessages: "restrictionsErrorMessages", hasActionButton: "hasActionButton", actionButtonLabel: "actionButtonLabel" }, outputs: { fileDownloaded: "fileDownloaded", filesSelected: "filesSelected", actionButtonClicked: "actionButtonClicked" }, ngImport: i0, template: "<div class=\"kit-file-upload\">\n  <kendo-upload [saveUrl]=\"saveUrl\"\n                [withCredentials]=\"false\"\n                [restrictions]=\"restrictions\"\n                [autoUpload]=\"false\"\n                [(ngModel)]=\"files\"\n                (select)=\"onFilesSelect($event.files)\">\n    <kendo-upload-messages [select]=\"selectFilesLabel\"\n                           [dropFilesHere]=\"dropzoneLabel\"\n    ></kendo-upload-messages>\n\n    <ng-template kendoUploadFileTemplate let-files>\n      <ng-container *ngIf=\"getTypedFiles(files); let files\">\n        <ng-container *ngFor=\"let file of files\">\n          <div class=\"file-info\">\n            <div class=\"file-name\" [title]=\"file.name\">\n              {{ file.name }}\n            </div>\n\n            <div *ngFor=\"let error of file.validationErrors\" class=\"file-validation-message\">\n              {{ getValidationError(error) }}\n            </div>\n          </div>\n          <button *ngIf=\"!file.validationErrors\" class=\"download-button\">\n            <kit-svg-icon class=\"download-button-icon\"\n                          [icon]=\"KitSvgIcon.DOWNLOAD\"\n                          (click)=\"onFileDownload(file)\"\n            ></kit-svg-icon>\n          </button>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </kendo-upload>\n\n  <div *ngIf=\"hasActionButton\" class=\"kit-file-upload-action\">\n    <kit-button [label]=\"actionButtonLabel\"\n                [icon]=\"KitSvgIcon.DOWNLOAD\"\n                [kind]=\"KitButtonKind.SMALL\"\n                (clicked)=\"onActionButtonClick()\"\n    ></kit-button>\n  </div>\n</div>\n", styles: [".kit-file-upload .k-upload{display:flex;flex-direction:column;gap:8px;border:none}.kit-file-upload .k-upload .k-upload-button{position:relative;padding:0;display:flex;align-items:center;min-width:initial;gap:6px;color:var(--ui-kit-color-main);font-weight:500;font-size:14px;border:none;background:none}.kit-file-upload .k-upload .k-upload-button:focus{box-shadow:none}.kit-file-upload .k-upload .k-upload-button:hover .k-button-text{text-decoration:underline}.kit-file-upload .k-upload .k-upload-button:after{content:\"\\e11e\";display:inline-block;position:static;opacity:1;line-height:1;font-size:16px;font-family:WebComponentsIcons,sans-serif}.kit-file-upload .k-upload .k-dropzone{padding:12px 10px;border:2px dashed transparent;background:none}.kit-file-upload .k-upload .k-dropzone.k-hover{border-color:var(--ui-kit-color-main);background:none}.kit-file-upload .k-upload .k-upload-status{display:none}.kit-file-upload .k-upload .k-upload-status+.k-dropzone-hint{display:block}.kit-file-upload .k-upload .k-upload-files{display:flex;flex-direction:column;gap:8px;max-height:initial;border:none}.kit-file-upload .k-upload .k-upload-files .k-file{align-items:center;padding:10px;border:none;background:var(--ui-kit-color-grey-8)}.kit-file-upload .k-upload .k-upload-files .k-file.k-focus{box-shadow:none}.kit-file-upload .k-upload .file-info{flex:1;min-width:0}.kit-file-upload .k-upload .file-name{color:var(--ui-kit-color-cobalt-darkest);font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kit-file-upload .k-upload .file-validation-message{color:var(--ui-kit-color-red);font-size:12px}.kit-file-upload .k-upload .download-button{margin-left:10px;padding:0;border:none;background:none;cursor:pointer}.kit-file-upload .k-upload .download-button:hover .download-button-icon{stroke:var(--ui-kit-color-main)}.kit-file-upload .k-upload .download-button-icon{display:block;width:24px;height:24px;stroke:var(--ui-kit-color-grey-7);fill:none}.kit-file-upload .k-upload .k-actions{display:none}.kit-file-upload-action{display:flex;justify-content:flex-end;margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "showFileList", "tabIndex", "actionsLayout"], outputs: ["cancel", "clear", "complete", "error", "pause", "resume", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { kind: "directive", type: i2$1.FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]" }, { kind: "component", type: i2$1.CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { 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: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitFileUploadComponent, isStandalone: false, selector: "kit-file-upload", inputs: { saveUrl: "saveUrl", files: "files", selectFilesLabel: "selectFilesLabel", dropzoneLabel: "dropzoneLabel", restrictions: "restrictions", restrictionsErrorMessages: "restrictionsErrorMessages", hasActionButton: "hasActionButton", actionButtonLabel: "actionButtonLabel" }, outputs: { fileDownloaded: "fileDownloaded", filesSelected: "filesSelected", actionButtonClicked: "actionButtonClicked" }, ngImport: i0, template: "<div class=\"kit-file-upload\">\n  <kendo-upload [saveUrl]=\"saveUrl\"\n                [withCredentials]=\"false\"\n                [restrictions]=\"restrictions\"\n                [autoUpload]=\"false\"\n                [(ngModel)]=\"files\"\n                (select)=\"onFilesSelect($event.files)\">\n    <kendo-upload-messages [select]=\"selectFilesLabel\"\n                           [dropFilesHere]=\"dropzoneLabel\"\n    ></kendo-upload-messages>\n\n    <ng-template kendoUploadFileTemplate let-files>\n      <ng-container *ngIf=\"getTypedFiles(files); let files\">\n        <ng-container *ngFor=\"let file of files\">\n          <div class=\"file-info\">\n            <div class=\"file-name\" [title]=\"file.name\">\n              {{ file.name }}\n            </div>\n\n            <div *ngFor=\"let error of file.validationErrors\" class=\"file-validation-message\">\n              {{ getValidationError(error) }}\n            </div>\n          </div>\n          <button *ngIf=\"!file.validationErrors\" class=\"download-button\">\n            <kit-svg-icon class=\"download-button-icon\"\n                          [icon]=\"KitSvgIcon.DOWNLOAD\"\n                          (click)=\"onFileDownload(file)\"\n            ></kit-svg-icon>\n          </button>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n  </kendo-upload>\n\n  <div *ngIf=\"hasActionButton\" class=\"kit-file-upload-action\">\n    <kit-button [label]=\"actionButtonLabel\"\n                [icon]=\"KitSvgIcon.DOWNLOAD\"\n                [kind]=\"KitButtonKind.SMALL\"\n                (clicked)=\"onActionButtonClick()\"\n    ></kit-button>\n  </div>\n</div>\n", styles: [".kit-file-upload .k-upload{display:flex;flex-direction:column;gap:8px;border:none}.kit-file-upload .k-upload .k-upload-button{position:relative;padding:0;display:flex;align-items:center;min-width:initial;gap:6px;color:var(--ui-kit-color-main);font-weight:500;font-size:14px;border:none;background:none}.kit-file-upload .k-upload .k-upload-button:focus{box-shadow:none}.kit-file-upload .k-upload .k-upload-button:hover .k-button-text{text-decoration:underline}.kit-file-upload .k-upload .k-upload-button:after{content:\"\\e11e\";display:inline-block;position:static;opacity:1;line-height:1;font-size:16px;font-family:WebComponentsIcons,sans-serif}.kit-file-upload .k-upload .k-dropzone{padding:12px 10px;border:2px dashed transparent;background:none}.kit-file-upload .k-upload .k-dropzone.k-hover{border-color:var(--ui-kit-color-main);background:none}.kit-file-upload .k-upload .k-upload-status{display:none}.kit-file-upload .k-upload .k-upload-status+.k-dropzone-hint{display:block}.kit-file-upload .k-upload .k-upload-files{display:flex;flex-direction:column;gap:8px;max-height:initial;border:none}.kit-file-upload .k-upload .k-upload-files .k-file{align-items:center;padding:10px;border:none;background:var(--ui-kit-color-grey-8)}.kit-file-upload .k-upload .k-upload-files .k-file.k-focus{box-shadow:none}.kit-file-upload .k-upload .file-info{flex:1;min-width:0}.kit-file-upload .k-upload .file-name{color:var(--ui-kit-color-cobalt-darkest);font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kit-file-upload .k-upload .file-validation-message{color:var(--ui-kit-color-red);font-size:12px}.kit-file-upload .k-upload .download-button{margin-left:10px;padding:0;border:none;background:none;cursor:pointer}.kit-file-upload .k-upload .download-button:hover .download-button-icon{stroke:var(--ui-kit-color-main)}.kit-file-upload .k-upload .download-button-icon{display:block;width:24px;height:24px;stroke:var(--ui-kit-color-grey-7);fill:none}.kit-file-upload .k-upload .k-actions{display:none}.kit-file-upload-action{display:flex;justify-content:flex-end;margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "showFileList", "tabIndex", "actionsLayout"], outputs: ["cancel", "clear", "complete", "error", "pause", "resume", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { kind: "directive", type: i2$2.FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]" }, { kind: "component", type: i2$2.CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { 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: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFileUploadComponent, decorators: [{
             type: Component,
@@ -3982,7 +4000,7 @@ class KitNavigationMenuSubmenuComponent {
         return `${location?.origin}/` === url;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationMenuSubmenuComponent, isStandalone: false, selector: "kit-navigation-menu-submenu", inputs: { menuItem: "menuItem", appsMenuItems: "appsMenuItems", logoPath: "logoPath" }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\">\n  <div class=\"nav-logo\">\n    <a class=\"nav-logo-link\"\n       [routerLink]=\"rootPath\"\n       (click)=\"logoClicked.emit()\">\n      @if (logoPath) {\n        <div class=\"logo-wrapper\">\n          <img [src]=\"logoPath\" alt=\"Logo\"/>\n        </div>\n      } @else {\n        <kit-svg-icon class=\"seko-icon\"\n                [icon]=\"KitSvgIcon.SEKO\"\n        ></kit-svg-icon>\n        <kit-svg-icon class=\"seko-360-icon\"\n                [icon]=\"KitSvgIcon.SEKO_360\"\n        ></kit-svg-icon>\n      }\n    </a>\n  </div>\n  @if (appsMenuItems) {\n    <div class=\"apps-menu\">\n      @for (item of appsMenuItems; track item) {\n        <a class=\"app-link\"\n           [class.active]=\"isAppItemActive(item.url)\"\n           [href]=\"item.url\">\n          <span class=\"app-link-btn\">\n            <kit-svg-icon class=\"app-link-icon\"\n                          [icon]=\"item.name.toLowerCase()\"\n            ></kit-svg-icon>\n          </span>\n          <span class=\"app-link-title\">{{ item.name }}</span>\n        </a>\n      }\n    </div>\n  } @else {\n    <div class=\"main-menu\">\n      <div class=\"nav-title\">{{ menuItem?.title }}</div>\n      <div class=\"nav-list\">\n        @for (child of menuItem?.items; track child) {\n          @if (!child.items?.length) {\n            @if (child.link) {\n              <a class=\"nav-link\"\n                 routerLinkActive=\"active\"\n                 [routerLink]=\"child.link\">\n                {{ child.title }}\n              </a>\n            }\n          }\n\n          @if (child.items?.length) {\n            <a class=\"nav-link\"\n               [class.expanded]=\"child.expanded\"\n               (click)=\"handleClick(child)\">\n              {{ child.title }}\n              <kit-svg-icon class=\"toggle-icon\"\n                            [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n              ></kit-svg-icon>\n            </a>\n\n            @if (child?.expanded) {\n              <div @heightExpandCollapseAnimation\n                   class=\"nav-list\">\n                @for (subChild of child.items; track subChild) {\n                  @if (subChild.link) {\n                    <a class=\"child-link\"\n                       routerLinkActive=\"active\"\n                       [routerLink]=\"subChild.link\">\n                      {{ subChild.title }}\n                    </a>\n                  }\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center}.kit-navigation-menu-submenu .nav-logo-link{display:flex;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active,.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"], dependencies: [{ kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationMenuSubmenuComponent, isStandalone: false, selector: "kit-navigation-menu-submenu", inputs: { menuItem: "menuItem", appsMenuItems: "appsMenuItems", logoPath: "logoPath" }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\">\n  <div class=\"nav-logo\">\n    <a class=\"nav-logo-link\"\n       [routerLink]=\"rootPath\"\n       (click)=\"logoClicked.emit()\">\n      @if (logoPath) {\n        <div class=\"logo-wrapper\">\n          <img [src]=\"logoPath\" alt=\"Logo\"/>\n        </div>\n      } @else {\n        <kit-svg-icon class=\"seko-icon\"\n                [icon]=\"KitSvgIcon.SEKO\"\n        ></kit-svg-icon>\n        <kit-svg-icon class=\"seko-360-icon\"\n                [icon]=\"KitSvgIcon.SEKO_360\"\n        ></kit-svg-icon>\n      }\n    </a>\n  </div>\n  @if (appsMenuItems) {\n    <div class=\"apps-menu\">\n      @for (item of appsMenuItems; track item) {\n        <a class=\"app-link\"\n           [class.active]=\"isAppItemActive(item.url)\"\n           [href]=\"item.url\">\n          <span class=\"app-link-btn\">\n            <kit-svg-icon class=\"app-link-icon\"\n                          [icon]=\"item.name.toLowerCase()\"\n            ></kit-svg-icon>\n          </span>\n          <span class=\"app-link-title\">{{ item.name }}</span>\n        </a>\n      }\n    </div>\n  } @else {\n    <div class=\"main-menu\">\n      <div class=\"nav-title\">{{ menuItem?.title }}</div>\n      <div class=\"nav-list\">\n        @for (child of menuItem?.items; track child) {\n          @if (!child.items?.length) {\n            @if (child.link) {\n              <a class=\"nav-link\"\n                 routerLinkActive=\"active\"\n                 [routerLink]=\"child.link\">\n                {{ child.title }}\n              </a>\n            }\n          }\n\n          @if (child.items?.length) {\n            <a class=\"nav-link\"\n               [class.expanded]=\"child.expanded\"\n               (click)=\"handleClick(child)\">\n              {{ child.title }}\n              <kit-svg-icon class=\"toggle-icon\"\n                            [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n              ></kit-svg-icon>\n            </a>\n\n            @if (child?.expanded) {\n              <div @heightExpandCollapseAnimation\n                   class=\"nav-list\">\n                @for (subChild of child.items; track subChild) {\n                  @if (subChild.link) {\n                    <a class=\"child-link\"\n                       routerLinkActive=\"active\"\n                       [routerLink]=\"subChild.link\">\n                      {{ subChild.title }}\n                    </a>\n                  }\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center}.kit-navigation-menu-submenu .nav-logo-link{display:flex;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active,.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"], dependencies: [{ kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
             expandCollapseAnimation('height'),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4093,8 +4111,8 @@ class KitNavigationMenuComponent {
     updateMenuState() {
         this.kitNavigationMenuService.setSelectedState(!!this.selectedItem()?.items, !!this.selectedAppsItems());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$7.Router }, { token: KitNavigationMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationMenuComponent, isStandalone: false, selector: "kit-navigation-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, appsMenuItems: { classPropertyName: "appsMenuItems", publicName: "appsMenuItems", isSignal: true, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { menuItems: "menuItemsChange" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems().length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-list\">\n      @for (item of menuItems(); track $index) {\n        @if (item.items?.length) {\n          <a class=\"nav-link\"\n             kitTooltip\n             kitTooltipFilter=\".nav-link\"\n             [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n             [title]=\"item.title\"\n             [class.active]=\"item.active\"\n             (click)=\"handleClick(item)\">\n            @if (item.icon) {\n              <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            }\n          </a>\n        } @else {\n          @if (item.link) {\n            <a class=\"nav-link\"\n               routerLinkActive=\"active\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [routerLink]=\"item.link\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          }\n        }\n      }\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 [logoPath]=\"logoPath\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i2$1.Router }, { token: KitNavigationMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationMenuComponent, isStandalone: false, selector: "kit-navigation-menu", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, appsMenuItems: { classPropertyName: "appsMenuItems", publicName: "appsMenuItems", isSignal: true, isRequired: false, transformFunction: null }, logoPath: { classPropertyName: "logoPath", publicName: "logoPath", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { menuItems: "menuItemsChange" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems().length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-list\">\n      @for (item of menuItems(); track $index) {\n        @if (item.items?.length) {\n          <a class=\"nav-link\"\n             kitTooltip\n             kitTooltipFilter=\".nav-link\"\n             [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n             [title]=\"item.title\"\n             [class.active]=\"item.active\"\n             (click)=\"handleClick(item)\">\n            @if (item.icon) {\n              <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            }\n          </a>\n        } @else {\n          @if (item.link) {\n            <a class=\"nav-link\"\n               routerLinkActive=\"active\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [routerLink]=\"item.link\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          }\n        }\n      }\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 [logoPath]=\"logoPath\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], animations: [
             expandCollapseAnimation('width'),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4103,7 +4121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         expandCollapseAnimation('width'),
                     ], standalone: false, template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems().length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-list\">\n      @for (item of menuItems(); track $index) {\n        @if (item.items?.length) {\n          <a class=\"nav-link\"\n             kitTooltip\n             kitTooltipFilter=\".nav-link\"\n             [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n             [title]=\"item.title\"\n             [class.active]=\"item.active\"\n             (click)=\"handleClick(item)\">\n            @if (item.icon) {\n              <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            }\n          </a>\n        } @else {\n          @if (item.link) {\n            <a class=\"nav-link\"\n               routerLinkActive=\"active\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [routerLink]=\"item.link\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          }\n        }\n      }\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 [logoPath]=\"logoPath\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$7.Router }, { type: KitNavigationMenuService }], propDecorators: { logoPath: [{
+        }], ctorParameters: () => [{ type: i2$1.Router }, { type: KitNavigationMenuService }], propDecorators: { logoPath: [{
                 type: Input
             }] } });
@@ -4510,7 +4528,7 @@ class KitPopupComponent {
         this.onApply.emit();
         this.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, deps: [{ token: i1$a.PopupService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, deps: [{ token: i1$9.PopupService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, closePopupOnCancel: { classPropertyName: "closePopupOnCancel", publicName: "closePopupOnCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #popupTemplate>\n  <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n  @if (showFooter()) {\n    <div class=\"footer\">\n      <kit-button [label]=\"cancelButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"cancel()\"\n      ></kit-button>\n      <kit-button [label]=\"applyButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isApplyButtonDisabled()\"\n                  (clicked)=\"apply()\"\n      ></kit-button>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-popup{box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .kit-popup .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-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: "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: KitPopupComponent, decorators: [{
@@ -4519,7 +4537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitButtonModule,
                         NgTemplateOutlet,
                     ], template: "<ng-template #popupTemplate>\n  <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n  @if (showFooter()) {\n    <div class=\"footer\">\n      <kit-button [label]=\"cancelButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"cancel()\"\n      ></kit-button>\n      <kit-button [label]=\"applyButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isApplyButtonDisabled()\"\n                  (clicked)=\"apply()\"\n      ></kit-button>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-popup{box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .kit-popup .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$a.PopupService }], propDecorators: { popupTemplate: [{
+        }], ctorParameters: () => [{ type: i1$9.PopupService }], propDecorators: { popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate']
             }], documentClick: [{
@@ -4826,7 +4844,7 @@ class KitTabsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitTabsComponent, isStandalone: false, selector: "kit-tabs", inputs: { type: "type", size: "size", animate: "animate" }, outputs: { tabSelected: "tabSelected" }, queries: [{ propertyName: "tabs", predicate: KitTabComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-tabs\">\n  <kendo-tabstrip [ngClass]=\"[type, size]\"\n                  [animate]=\"animate\"\n                  (tabSelect)=\"onTabSelect($event)\">\n    @for (tab of tabs(); track tab) {\n      <kendo-tabstrip-tab [title]=\"tab.title()\"\n                          [selected]=\"tab.selected\"\n                          [disabled]=\"tab.disabled()\">\n        @if (tab.kitTitleTemplate) {\n          <ng-template kendoTabTitle>\n            <ng-container *ngTemplateOutlet=\"tab.kitTitleTemplate\"\n            ></ng-container>\n          </ng-template>\n        } @else if (tab.icon) {\n          <ng-template kendoTabTitle>\n            <div class=\"tab-title\">\n              <kit-svg-icon class=\"tab-title-icon\"\n                            [icon]=\"tab.icon\"\n                            [ngClass]=\"tab.iconType\"\n              ></kit-svg-icon>\n              <div class=\"tab title-text\">\n                {{ tab.title() }}\n              </div>\n            </div>\n          </ng-template>\n        }\n        <ng-template kendoTabContent>\n          <ng-container *ngTemplateOutlet=\"tab.kitTabContent\"\n          ></ng-container>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i2$2.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i2$2.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "directive", type: i2$2.TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitTabsComponent, isStandalone: false, selector: "kit-tabs", inputs: { type: "type", size: "size", animate: "animate" }, outputs: { tabSelected: "tabSelected" }, queries: [{ propertyName: "tabs", predicate: KitTabComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-tabs\">\n  <kendo-tabstrip [ngClass]=\"[type, size]\"\n                  [animate]=\"animate\"\n                  (tabSelect)=\"onTabSelect($event)\">\n    @for (tab of tabs(); track tab) {\n      <kendo-tabstrip-tab [title]=\"tab.title()\"\n                          [selected]=\"tab.selected\"\n                          [disabled]=\"tab.disabled()\">\n        @if (tab.kitTitleTemplate) {\n          <ng-template kendoTabTitle>\n            <ng-container *ngTemplateOutlet=\"tab.kitTitleTemplate\"\n            ></ng-container>\n          </ng-template>\n        } @else if (tab.icon) {\n          <ng-template kendoTabTitle>\n            <div class=\"tab-title\">\n              <kit-svg-icon class=\"tab-title-icon\"\n                            [icon]=\"tab.icon\"\n                            [ngClass]=\"tab.iconType\"\n              ></kit-svg-icon>\n              <div class=\"tab title-text\">\n                {{ tab.title() }}\n              </div>\n            </div>\n          </ng-template>\n        }\n        <ng-template kendoTabContent>\n          <ng-container *ngTemplateOutlet=\"tab.kitTabContent\"\n          ></ng-container>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i2$3.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i2$3.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "directive", type: i2$3.TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTabsComponent, decorators: [{
             type: Component,
@@ -4922,7 +4940,7 @@ class KitCardComponent {
         this.toggleClicked.emit(this.itemsExpanded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCardComponent, isStandalone: false, selector: "kit-card", inputs: { data: "data", theme: "theme", itemsExpanded: "itemsExpanded" }, outputs: { buttonClicked: "buttonClicked", toggleClicked: "toggleClicked" }, ngImport: i0, template: "@if (data) {\n  <div class=\"kit-card {{ theme }}-theme\">\n    <div class=\"kit-card-head\">\n      <kit-svg-icon class=\"head-icon\"\n                    [icon]=\"data.titleIcon\"\n                    [ngClass]=\"data?.titleIconType\"\n      ></kit-svg-icon>\n      <div class=\"head-title\">{{ data.title }}</div>\n    </div>\n    <div class=\"kit-card-content\">\n      <div class=\"card-count\">{{ data.count }}</div>\n      <div class=\"card-label\">{{ data.label }}</div>\n      @if (data.items?.length) {\n        <div class=\"card-items\"\n             [@expandCollapse]=\"itemsExpanded\">\n          @for (item of data.items; track item) {\n            <a class=\"card-item\"\n               [routerLink]=\"item.link\">\n              @if (item.count) {\n                <div class=\"card-item-count\">{{ item.count }}</div>\n              }\n              <div class=\"card-item-text\">{{ item.label }}</div>\n              @if (item.tooltip) {\n                <kit-svg-icon kitTooltip\n                              kitTooltipFilter=\".card-item-icon\"\n                              class=\"card-item-icon\"\n                              [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n                              [title]=\"item.tooltip\"\n                              [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n                ></kit-svg-icon>\n              } @else if (item.icon) {\n                <kit-svg-icon class=\"card-item-icon\"\n                              [icon]=\"item.icon\"\n                              [ngClass]=\"item.iconType\"\n                ></kit-svg-icon>\n              }\n            </a>\n          }\n        </div>\n      }\n      @if (data.items?.length > 1) {\n        <button class=\"toggle-btn\"\n                (click)=\"toggleList()\">\n          @if (itemsExpanded) {\n            <span class=\"toggle-btn-label\">Show less</span>\n            <kit-svg-icon class=\"toggle-btn-icon\"\n                          [icon]=\"KitSvgIcon.CARET_UP\"\n            ></kit-svg-icon>\n          } @else {\n            <span class=\"toggle-btn-label\">Show more</span>\n            <kit-svg-icon class=\"toggle-btn-icon\"\n                          [icon]=\"KitSvgIcon.CARET_DOWN\"\n            ></kit-svg-icon>\n          }\n        </button>\n      }\n    </div>\n    <div class=\"kit-card-action\">\n      <a [routerLink]=\"data.link\">\n        <kit-button class=\"action-button\"\n                    [type]=\"KitButtonType.GHOST\"\n                    [kind]=\"KitButtonKind.MEDIUM\"\n                    [label]=\"data.buttonLabel\"\n                    (clicked)=\"buttonClicked.emit()\"\n        ></kit-button>\n      </a>\n    </div>\n  </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover{color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCardComponent, isStandalone: false, selector: "kit-card", inputs: { data: "data", theme: "theme", itemsExpanded: "itemsExpanded" }, outputs: { buttonClicked: "buttonClicked", toggleClicked: "toggleClicked" }, ngImport: i0, template: "@if (data) {\n  <div class=\"kit-card {{ theme }}-theme\">\n    <div class=\"kit-card-head\">\n      <kit-svg-icon class=\"head-icon\"\n                    [icon]=\"data.titleIcon\"\n                    [ngClass]=\"data?.titleIconType\"\n      ></kit-svg-icon>\n      <div class=\"head-title\">{{ data.title }}</div>\n    </div>\n    <div class=\"kit-card-content\">\n      <div class=\"card-count\">{{ data.count }}</div>\n      <div class=\"card-label\">{{ data.label }}</div>\n      @if (data.items?.length) {\n        <div class=\"card-items\"\n             [@expandCollapse]=\"itemsExpanded\">\n          @for (item of data.items; track item) {\n            <a class=\"card-item\"\n               [routerLink]=\"item.link\">\n              @if (item.count) {\n                <div class=\"card-item-count\">{{ item.count }}</div>\n              }\n              <div class=\"card-item-text\">{{ item.label }}</div>\n              @if (item.tooltip) {\n                <kit-svg-icon kitTooltip\n                              kitTooltipFilter=\".card-item-icon\"\n                              class=\"card-item-icon\"\n                              [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n                              [title]=\"item.tooltip\"\n                              [icon]=\"KitSvgIcon.INFO_CIRCLE\"\n                ></kit-svg-icon>\n              } @else if (item.icon) {\n                <kit-svg-icon class=\"card-item-icon\"\n                              [icon]=\"item.icon\"\n                              [ngClass]=\"item.iconType\"\n                ></kit-svg-icon>\n              }\n            </a>\n          }\n        </div>\n      }\n      @if (data.items?.length > 1) {\n        <button class=\"toggle-btn\"\n                (click)=\"toggleList()\">\n          @if (itemsExpanded) {\n            <span class=\"toggle-btn-label\">Show less</span>\n            <kit-svg-icon class=\"toggle-btn-icon\"\n                          [icon]=\"KitSvgIcon.CARET_UP\"\n            ></kit-svg-icon>\n          } @else {\n            <span class=\"toggle-btn-label\">Show more</span>\n            <kit-svg-icon class=\"toggle-btn-icon\"\n                          [icon]=\"KitSvgIcon.CARET_DOWN\"\n            ></kit-svg-icon>\n          }\n        </button>\n      }\n    </div>\n    <div class=\"kit-card-action\">\n      <a [routerLink]=\"data.link\">\n        <kit-button class=\"action-button\"\n                    [type]=\"KitButtonType.GHOST\"\n                    [kind]=\"KitButtonKind.MEDIUM\"\n                    [label]=\"data.buttonLabel\"\n                    (clicked)=\"buttonClicked.emit()\"\n        ></kit-button>\n      </a>\n    </div>\n  </div>\n}\n", styles: [".kit-card{display:flex;flex-direction:column;padding:25px;width:100%;height:100%;color:var(--ui-kit-color-grey-10);font-weight:400;border:1px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box}.kit-card-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-card .head-icon{width:32px;height:32px}.kit-card .head-title{display:flex;align-items:center;flex:1;height:36px;font-size:18px}.kit-card-content{display:flex;flex-direction:column;margin-top:10px;flex-grow:1;text-align:center}.kit-card .card-count{padding-bottom:10px;font-size:48px;border-bottom:2px solid var(--ui-kit-color-main);line-height:40px;letter-spacing:-2.4px}.kit-card .card-label{margin-top:10px;font-size:16px}.kit-card .card-items{display:flex;flex-direction:column;flex-grow:1;gap:5px;margin-top:15px;overflow:hidden}.kit-card .card-item{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-card .card-item:hover{color:var(--ui-kit-color-hover)}.kit-card .card-item-count{font-weight:600}.kit-card .card-item-icon{width:16px;height:16px}.kit-card .toggle-btn{display:inline-flex;justify-content:center;gap:3px;margin-top:5px;padding:0;color:var(--ui-kit-color-main);border:none;background:transparent;cursor:pointer}.kit-card .toggle-btn-label{font-size:14px;font-weight:500}.kit-card .toggle-btn-icon{width:16px;height:16px}.kit-card-action{margin-top:auto;padding-top:15px}.kit-card .action-button ::ng-deep .k-button{width:100%}.kit-card:hover{border-color:var(--ui-kit-color-hover)}.kit-card.default-theme .head-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .head-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .card-count{border-color:var(--ui-kit-color-main)}.kit-card.default-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.default-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.default-theme .card-item-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.default-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-card.default-theme .toggle-btn{color:var(--ui-kit-color-main)}.kit-card.default-theme .toggle-btn-icon{fill:var(--ui-kit-color-main);stroke:none}.kit-card.green-theme .head-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .head-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .card-count{border-color:var(--ui-kit-color-green-3)}.kit-card.green-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.green-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.green-theme .card-item-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.green-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-green-3);fill:none}.kit-card.green-theme .toggle-btn{color:var(--ui-kit-color-green-3)}.kit-card.green-theme .toggle-btn-icon{fill:var(--ui-kit-color-green-3);stroke:none}.kit-card.pink-theme .head-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .head-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .card-count{border-color:var(--ui-kit-color-pink)}.kit-card.pink-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.pink-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.pink-theme .card-item-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.pink-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-pink);fill:none}.kit-card.pink-theme .toggle-btn{color:var(--ui-kit-color-pink)}.kit-card.pink-theme .toggle-btn-icon{fill:var(--ui-kit-color-pink);stroke:none}.kit-card.purple-theme .head-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .head-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .card-count{border-color:var(--ui-kit-color-purple)}.kit-card.purple-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.purple-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.purple-theme .card-item-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.purple-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-purple);fill:none}.kit-card.purple-theme .toggle-btn{color:var(--ui-kit-color-purple)}.kit-card.purple-theme .toggle-btn-icon{fill:var(--ui-kit-color-purple);stroke:none}.kit-card.teal-theme .head-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .head-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .card-count{border-color:var(--ui-kit-color-teal)}.kit-card.teal-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.teal-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.teal-theme .card-item-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.teal-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-teal);fill:none}.kit-card.teal-theme .toggle-btn{color:var(--ui-kit-color-teal)}.kit-card.teal-theme .toggle-btn-icon{fill:var(--ui-kit-color-teal);stroke:none}.kit-card.grey-theme .head-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .head-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .card-count{border-color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.grey-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.grey-theme .card-item-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.grey-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card.grey-theme .toggle-btn{color:var(--ui-kit-color-grey-10)}.kit-card.grey-theme .toggle-btn-icon{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-card.orange-theme .head-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .head-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .card-count{border-color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .card-item:hover .card-item-icon{fill:var(--ui-kit-color-hover);stroke:none}.kit-card.orange-theme .card-item:hover .card-item-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-card.orange-theme .card-item-icon{fill:var(--ui-kit-color-orange-2);stroke:none}.kit-card.orange-theme .card-item-icon.stroke{stroke:var(--ui-kit-color-orange-2);fill:none}.kit-card.orange-theme .toggle-btn{color:var(--ui-kit-color-orange-2)}.kit-card.orange-theme .toggle-btn-icon{fill:var(--ui-kit-color-orange-2);stroke:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], animations: [
             trigger('expandCollapse', [
                 state('true', style({ height: '*' })),
                 state('false', style({
@@ -5092,7 +5110,7 @@ class KitBreadcrumbsComponent {
         this.items = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitBreadcrumbsComponent, isStandalone: false, selector: "kit-breadcrumbs", inputs: { items: "items" }, ngImport: i0, template: "@if (items.length) {\n  <div class=\"kit-breadcrumbs\">\n    @for (item of items; track $index) {\n      <div class=\"kit-breadcrumbs-item\">\n        @if ($last) {\n          <span class=\"kit-breadcrumbs-last\">{{ item.text }}</span>\n        } @else {\n          <a class=\"kit-breadcrumbs-link\"\n             [routerLink]=\"item.url\">{{ item.text }}</a>\n          <span class=\"kit-breadcrumbs-delimiter\">/</span>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".kit-breadcrumbs{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:400;line-height:22px}.kit-breadcrumbs-link{padding:0 4px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-breadcrumbs-link:hover{color:var(--ui-kit-color-hover)}.kit-breadcrumbs-last{padding:0 4px;color:var(--ui-kit-color-main)}.kit-breadcrumbs-delimiter{padding:0 4px;color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "directive", type: i1$7.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: KitBreadcrumbsComponent, isStandalone: false, selector: "kit-breadcrumbs", inputs: { items: "items" }, ngImport: i0, template: "@if (items.length) {\n  <div class=\"kit-breadcrumbs\">\n    @for (item of items; track $index) {\n      <div class=\"kit-breadcrumbs-item\">\n        @if ($last) {\n          <span class=\"kit-breadcrumbs-last\">{{ item.text }}</span>\n        } @else {\n          <a class=\"kit-breadcrumbs-link\"\n             [routerLink]=\"item.url\">{{ item.text }}</a>\n          <span class=\"kit-breadcrumbs-delimiter\">/</span>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".kit-breadcrumbs{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:400;line-height:22px}.kit-breadcrumbs-link{padding:0 4px;color:var(--ui-kit-color-grey-14);font-size:14px;text-decoration:none}.kit-breadcrumbs-link:hover{color:var(--ui-kit-color-hover)}.kit-breadcrumbs-last{padding:0 4px;color:var(--ui-kit-color-main)}.kit-breadcrumbs-delimiter{padding:0 4px;color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "directive", type: i2$1.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: KitBreadcrumbsComponent, decorators: [{
             type: Component,
@@ -5358,7 +5376,7 @@ class KitGridComponent {
         this.expandedRows = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridComponent, isStandalone: false, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData", pdfOptions: "pdfOptions", pagerButtonCount: "pagerButtonCount", pagerInfoText: "pagerInfoText" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked", excelExport: "excelExport", pdfExport: "pdfExport" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "@if (data) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [data]=\"data\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\n        </ng-template>\n\n        @if (column.cellTemplate) {\n          <ng-template kendoGridCellTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n            ></ng-container>\n          </ng-template>\n        }\n\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\"\n      [repeatHeaders]=\"true\" />\n    \n    <ng-container *ngTemplateOutlet=\"pagerTemplate\"/>\n    <kendo-grid-messages [pagerItems]=\"pagerInfoText\" \n                         [pagerOf]=\"'of'\">\n    </kendo-grid-messages>\n  </kendo-grid>\n}\n\n@if (gridDataBinding) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [kendoGridBinding]=\"gridDataBinding\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\n        @if (column.cellTemplate) {\n          <ng-template kendoGridCellTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n            ></ng-container>\n          </ng-template>\n        }\n\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\n        </ng-template>\n\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\" \n      [repeatHeaders]=\"true\" />\n\n    <ng-container *ngTemplateOutlet=\"pagerTemplate\"/>\n    <kendo-grid-messages pagerOf=\"of\"\n                         [pagerItems]=\"pagerInfoText\">\n    </kendo-grid-messages>\n  </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n  <div class=\"grid-title\"\n       [class.sortable]=\"isColumnSortable(column)\">\n    @if (column.titleIcon) {\n      <kit-svg-icon class=\"grid-title-icon\"\n                    [icon]=\"column.titleIcon\"\n                    [ngClass]=\"column.titleIconType\"\n      ></kit-svg-icon>\n    }\n\n    <div class=\"grid-title-text\">\n      {{ column.title }}\n    </div>\n\n    @if (sortable && column.sortable) {\n      @switch (getSortingDirection(column.field)) {\n        @case (kitSortDirection.ASC) {\n          <kit-svg-icon class=\"grid-title-sort-icon\"\n                        [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n          ></kit-svg-icon>\n        }\n        @case (kitSortDirection.DESC) {\n          <kit-svg-icon class=\"grid-title-sort-icon\"\n                        [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n          ></kit-svg-icon>\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n  @if (columns()) {\n    @if (footerTitle && column === columns()[0]) {\n      {{ footerTitle }}\n    }\n    @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n\n<ng-template #pagerTemplate\n              kendoPagerTemplate\n              let-totalPages=\"totalPages\"\n              let-currentPage=\"currentPage\">\n  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n  <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n  <kendo-pager-next-buttons></kendo-pager-next-buttons>\n  <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{border:none;background:none;max-height:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$3.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i2$3.CustomMessagesComponent, selector: "kendo-grid-messages" }, { kind: "directive", type: i2$3.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$3.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$3.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$3.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$3.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$3.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i3.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i3.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i3.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i3.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i2$3.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { kind: "component", type: i2$3.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridComponent, isStandalone: false, selector: "kit-grid", inputs: { data: "data", gridDataBinding: "gridDataBinding", sortable: "sortable", sort: "sort", pageable: "pageable", pageSize: "pageSize", skip: "skip", loading: "loading", detailTemplateShowIf: "detailTemplateShowIf", detailTemplateExpandDisableIf: "detailTemplateExpandDisableIf", showFooter: "showFooter", footerTitle: "footerTitle", footerData: "footerData", pdfOptions: "pdfOptions", pagerButtonCount: "pagerButtonCount", pagerInfoText: "pagerInfoText" }, outputs: { pageChanged: "pageChanged", sortChanged: "sortChanged", dataStateChanged: "dataStateChanged", detailExpanded: "detailExpanded", detailCollapsed: "detailCollapsed", cellClicked: "cellClicked", excelExport: "excelExport", pdfExport: "pdfExport" }, queries: [{ propertyName: "columns", predicate: KitGridColumnComponent, isSignal: true }, { propertyName: "kitGridDetailTemplate", first: true, predicate: KitGridDetailTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "gridComponent", first: true, predicate: GridComponent, descendants: true }], ngImport: i0, template: "@if (data) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [data]=\"data\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\n        </ng-template>\n\n        @if (column.cellTemplate) {\n          <ng-template kendoGridCellTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n            ></ng-container>\n          </ng-template>\n        }\n\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\"\n      [repeatHeaders]=\"true\" />\n    \n    <ng-container *ngTemplateOutlet=\"pagerTemplate\"/>\n    <kendo-grid-messages [pagerItems]=\"pagerInfoText\" \n                         [pagerOf]=\"'of'\">\n    </kendo-grid-messages>\n  </kendo-grid>\n}\n\n@if (gridDataBinding) {\n  <kendo-grid class=\"kit-grid\"\n              kendoGridExpandDetailsBy\n              [kendoGridBinding]=\"gridDataBinding\"\n              [rowClass]=\"getCssRowClass\"\n              [pageable]=\"getPagerSettings()\"\n              [pageSize]=\"pageSize\"\n              [sortable]=\"sortable\"\n              [sort]=\"sort\"\n              [skip]=\"skip\"\n              [loading]=\"loading\"\n              [(expandedDetailKeys)]=\"expandedRows\"\n              (cellClick)=\"onCellClick($event)\"\n              (detailExpand)=\"onDetailExpand($event)\"\n              (detailCollapse)=\"onDetailCollapse($event)\"\n              (pageChange)=\"onPageChange($event)\"\n              (sortChange)=\"onSortChange($event)\"\n              (dataStateChange)=\"onDataStateChange($event)\"\n              (excelExport)=\"excelExport.emit($event)\">\n    @for (column of columns(); track column) {\n      <kendo-grid-column [field]=\"column.field\"\n                         [sortable]=\"column.sortable\"\n                         [hidden]=\"column.hidden\"\n                         [width]=\"column.width\">\n        @if (column.cellTemplate) {\n          <ng-template kendoGridCellTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: dataItem }\"\n            ></ng-container>\n          </ng-template>\n        }\n\n        <ng-template kendoGridHeaderTemplate>\n          <ng-container *ngTemplateOutlet=\"columnHeaderTemplate; context: { $implicit: column }\"\n          ></ng-container>\n        </ng-template>\n\n        @if (showFooter) {\n          <ng-template kendoGridFooterTemplate>\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: column }\"></ng-container>\n          </ng-template>\n        }\n      </kendo-grid-column>\n\n      @if (kitGridDetailTemplate) {\n        <ng-template kendoGridDetailTemplate let-dataItem\n                     [kendoGridDetailTemplateShowIf]=\"detailTemplateShowIf\">\n          <ng-container *ngTemplateOutlet=\"kitGridDetailTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </ng-template>\n      }\n    }\n    <kendo-grid-excel [fileName]=\"pdfOptions.fileName\" />\n    <kendo-grid-pdf\n      [fileName]=\"pdfOptions.fileName\"\n      [allPages]=\"pdfOptions.allPages\"\n      [paperSize]=\"pdfOptions.paperSize\"\n      [scale]=\"pdfOptions.scale\"\n      [landscape]=\"pdfOptions.landscape\" \n      [repeatHeaders]=\"true\" />\n\n    <ng-container *ngTemplateOutlet=\"pagerTemplate\"/>\n    <kendo-grid-messages pagerOf=\"of\"\n                         [pagerItems]=\"pagerInfoText\">\n    </kendo-grid-messages>\n  </kendo-grid>\n}\n\n<ng-template #columnHeaderTemplate let-column>\n  <div class=\"grid-title\"\n       [class.sortable]=\"isColumnSortable(column)\">\n    @if (column.titleIcon) {\n      <kit-svg-icon class=\"grid-title-icon\"\n                    [icon]=\"column.titleIcon\"\n                    [ngClass]=\"column.titleIconType\"\n      ></kit-svg-icon>\n    }\n\n    <div class=\"grid-title-text\">\n      {{ column.title }}\n    </div>\n\n    @if (sortable && column.sortable) {\n      @switch (getSortingDirection(column.field)) {\n        @case (kitSortDirection.ASC) {\n          <kit-svg-icon class=\"grid-title-sort-icon\"\n                        [icon]=\"kitSvgIcon.SORT_ASCENDING\"\n          ></kit-svg-icon>\n        }\n        @case (kitSortDirection.DESC) {\n          <kit-svg-icon class=\"grid-title-sort-icon\"\n                        [icon]=\"kitSvgIcon.SORT_DESCENDING\"\n          ></kit-svg-icon>\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate let-column>\n  @if (columns()) {\n    @if (footerTitle && column === columns()[0]) {\n      {{ footerTitle }}\n    }\n    @else {\n      {{ footerData?.[column.field] || '' }}\n    }\n  }\n</ng-template>\n\n<ng-template #pagerTemplate\n              kendoPagerTemplate\n              let-totalPages=\"totalPages\"\n              let-currentPage=\"currentPage\">\n  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>\n  <kendo-pager-numeric-buttons></kendo-pager-numeric-buttons>\n  <kendo-pager-next-buttons></kendo-pager-next-buttons>\n  <kendo-pager-info></kendo-pager-info>\n</ng-template>\n", styles: [".kit-grid{border:none;background:none;max-height:100%}.kit-grid .grid-title{display:flex;align-items:center;gap:8px;flex:1;line-height:1;min-width:0}.kit-grid .grid-title-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-grid .grid-title-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-grid .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-grid .grid-title-text{font-weight:500;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid .grid-title-sort-icon{display:block;margin-left:auto;width:16px;height:16px;fill:var(--ui-kit-color-grey-12)}.kit-grid .grid-title.sortable{cursor:pointer}.kit-grid ::ng-deep .k-grid-table{color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400}.kit-grid ::ng-deep .k-grid-header{padding:0!important;border:none}.kit-grid ::ng-deep .k-grid-footer{padding:0!important}.kit-grid ::ng-deep .k-grid-content{overflow-y:auto}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar{height:8px;width:8px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-grid ::ng-deep .k-grid-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-grid ::ng-deep .k-table{margin:0}.kit-grid ::ng-deep .k-table-th{padding:8px 0;border:none;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-15)}.kit-grid ::ng-deep .k-table-th .k-cell-inner{margin:0}.kit-grid ::ng-deep .k-table-th .k-cell-inner .k-link{padding:0 8px;border-right:1px solid var(--ui-kit-color-grey-11);cursor:default}.kit-grid ::ng-deep .k-table-th .k-sort-icon{display:none}.kit-grid ::ng-deep .k-table-th .k-sort-order{margin-left:2px;color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted{color:var(--ui-kit-color-main);border-bottom:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-th.k-sorted .grid-title-sort-icon{fill:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-table-row:not(.k-detail-row):hover,.kit-grid ::ng-deep .k-table-row:hover{background:none}.kit-grid ::ng-deep .k-table-row .k-table-td{border-bottom-width:1px}.kit-grid ::ng-deep .k-table-alt-row{background:none}.kit-grid ::ng-deep .k-table-td{padding:12px 8px;border-color:var(--ui-kit-color-grey-11);border-bottom-width:1px;background:var(--ui-kit-color-white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-grid ::ng-deep .k-table-td:first-child{border-inline-start-width:1px}.kit-grid ::ng-deep .k-master-row.expanded .k-table-td{color:var(--ui-kit-color-main);border-bottom-color:var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-master-row.expanded .k-icon:before{color:var(--ui-kit-color-main);transform:rotate(90deg)}.kit-grid ::ng-deep .k-detail-row>.k-table-td{border-bottom:1px solid var(--ui-kit-color-grey-10)}.kit-grid ::ng-deep .k-detail-row .k-detail-cell{padding:0}.kit-grid ::ng-deep .k-detail-row .k-pager{margin:0;padding:20px 0;justify-content:flex-start;background:var(--ui-kit-color-white)}.kit-grid ::ng-deep .k-grid-norecords{text-align:left}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon{display:flex;align-items:center;justify-content:center;font-family:WebComponentsIcons,sans-serif;font-size:22px}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:before{content:\"\\e005\";color:var(--ui-kit-color-grey-14);transform:rotate(0);transition:transform .2s ease}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon:hover:before{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-hierarchy-cell .k-icon svg{display:none}.kit-grid ::ng-deep .k-pager{display:flex;justify-content:flex-end;margin-top:20px;padding:0;border:none;background:none}.kit-grid ::ng-deep .k-pager:focus{box-shadow:none}.kit-grid ::ng-deep .k-pager-numbers-wrap{gap:8px}.kit-grid ::ng-deep .k-pager-numbers{gap:8px}.kit-grid ::ng-deep .k-pager-numbers .k-button{width:32px;height:32px;color:inherit;font-size:14px;font-weight:400;border-radius:6px;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:before{opacity:1;background:none;transition:none}.kit-grid ::ng-deep .k-pager-numbers .k-button:after{opacity:0}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected{color:var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-selected:before{border:1px solid var(--ui-kit-color-main)}.kit-grid ::ng-deep .k-pager-numbers .k-button:not(.k-selected):hover:before{background-color:#0000000f}.kit-grid ::ng-deep .k-pager-numbers .k-button.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-grid ::ng-deep .k-pager-info{flex:initial;border-radius:8px;background-color:#fff;padding:5px 16px}.kit-grid ::ng-deep .k-pager .k-pager-first,.kit-grid ::ng-deep .k-pager .k-pager-last{display:none}.kit-grid ::ng-deep .k-pager .k-button-icon{font-family:WebComponentsIcons,sans-serif}.kit-grid ::ng-deep .k-pager .k-button-icon svg{display:none}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-left:before{content:\"\\e016\"}.kit-grid ::ng-deep .k-pager .k-svg-i-caret-alt-right:before{content:\"\\e014\"}.kit-grid ::ng-deep .k-grid-aria-root{position:relative}.kit-grid ::ng-deep .k-loading-color{background:var(--ui-kit-color-grey-13)}.kit-grid ::ng-deep .expand-disabled .k-hierarchy-cell a{pointer-events:none;opacity:.3}::ng-deep .kit-grid.k-grid:has(.k-grid-norecords) .k-pager-numbers-wrap{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$4.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i2$4.DataBindingDirective, selector: "[kendoGridBinding]", inputs: ["skip", "sort", "filter", "pageSize", "group", "kendoGridBinding"], exportAs: ["kendoGridBinding"] }, { kind: "component", type: i2$4.CustomMessagesComponent, selector: "kendo-grid-messages" }, { kind: "directive", type: i2$4.ExpandDetailsDirective, selector: "[kendoGridExpandDetailsBy]", inputs: ["kendoGridExpandDetailsBy", "expandDetailBy", "expandedDetailKeys", "initiallyExpanded"], outputs: ["expandedDetailKeysChange"], exportAs: ["kendoGridExpandDetailsBy"] }, { kind: "component", type: i2$4.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i2$4.FooterTemplateDirective, selector: "[kendoGridFooterTemplate]" }, { kind: "directive", type: i2$4.DetailTemplateDirective, selector: "[kendoGridDetailTemplate]", inputs: ["kendoGridDetailTemplateShowIf"] }, { kind: "directive", type: i2$4.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i2$4.HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]" }, { kind: "component", type: i3.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i3.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i3.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i3.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i3.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i2$4.ExcelComponent, selector: "kendo-grid-excel", inputs: ["fileName", "filterable", "creator", "date", "forceProxy", "proxyURL", "fetchData", "paddingCellOptions", "headerPaddingCellOptions", "collapsible"] }, { kind: "component", type: i2$4.PDFComponent, selector: "kendo-grid-pdf", inputs: ["allPages", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridComponent, decorators: [{
             type: Component,
@@ -5529,7 +5547,7 @@ class KitTileLayoutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTileLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitTileLayoutComponent, isStandalone: false, selector: "kit-tilelayout", inputs: { columnsConfig: "columnsConfig" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tileItems", predicate: KitTileLayoutItemComponent }], ngImport: i0, template: "<div class=\"kit-tilelayout\">\n  <kendo-tilelayout\n    class=\"tilelayout-container\"\n    autoFlow=\"row\"\n    [columns]=\"columns\"\n  >\n    @for (item of tileItems; track item) {\n    <kendo-tilelayout-item>\n      <div class=\"item-content\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </div>\n    </kendo-tilelayout-item>\n    }\n  </kendo-tilelayout>\n</div>\n", styles: [".kit-tilelayout .item-content{height:100%}.kit-tilelayout .k-tilelayout{background:none}.kit-tilelayout .k-tilelayout .k-card{border:none;background:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i2$2.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitTileLayoutComponent, isStandalone: false, selector: "kit-tilelayout", inputs: { columnsConfig: "columnsConfig" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tileItems", predicate: KitTileLayoutItemComponent }], ngImport: i0, template: "<div class=\"kit-tilelayout\">\n  <kendo-tilelayout\n    class=\"tilelayout-container\"\n    autoFlow=\"row\"\n    [columns]=\"columns\"\n  >\n    @for (item of tileItems; track item) {\n    <kendo-tilelayout-item>\n      <div class=\"item-content\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </div>\n    </kendo-tilelayout-item>\n    }\n  </kendo-tilelayout>\n</div>\n", styles: [".kit-tilelayout .item-content{height:100%}.kit-tilelayout .k-tilelayout{background:none}.kit-tilelayout .k-tilelayout .k-card{border:none;background:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$3.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i2$3.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTileLayoutComponent, decorators: [{
             type: Component,
@@ -5615,8 +5633,14 @@ class KitCollapsedListComponent {
         this.gap = input(20);
         this.disableActions = input(false);
         this.itemTemplate = input();
+        this.dropdownFooterTemplate = input();
+        this.dropdownItemTemplate = input();
+        this.dropdownNoDataTemplate = input();
+        this.appendTo = input();
+        this.alwaysShowDropdown = input(false);
         this.onSelectItem = output();
         this.wrapper = viewChild.required('wrapper');
+        this.wrapperInner = viewChild.required('wrapperInner');
         this.container = viewChild.required('container');
         this.dropdown = viewChild('dropdown', {
             read: ElementRef,
@@ -5640,6 +5664,9 @@ class KitCollapsedListComponent {
     get selectedItem() {
         return this._selectedItem();
     }
+    get popupSettings() {
+        return { width: 'auto', popupClass: 'collapsed-list-popup', appendTo: this.appendTo() };
+    }
     ngAfterViewInit() {
         requestAnimationFrame(() => {
             this.resize(this.defaultSelectedItem().text);
@@ -5655,7 +5682,7 @@ class KitCollapsedListComponent {
         this.resizeObserver?.disconnect();
     }
     setSelectedItem(item) {
-        if (item.text !== this.dropdownSelectedItem().text) {
+        if (item.text !== this.dropdownSelectedItem().text || item.value !== this.dropdownSelectedItem().value) {
             this._selectedItem.set(item);
             this.resize(item.text);
         }
@@ -5669,29 +5696,32 @@ class KitCollapsedListComponent {
         this.resizeObserver.observe(this.wrapper().nativeElement);
     }
     resize(dropdownText) {
-        this.containerWidth = '100%';
+        this.applyInitialStyles();
         const container = this.container().nativeElement;
         const children = Array.from(container.children);
-        const availableWidth = this.wrapper().nativeElement.getBoundingClientRect().width;
+        const wrapperWidth = this.wrapper().nativeElement.getBoundingClientRect().width;
+        const dropdownWidth = this.getDropdownWidth(this.dropdownDefaultValueText());
+        const availableWidth = this.alwaysShowDropdown() ? parseFloat((wrapperWidth - dropdownWidth).toFixed(4)) : wrapperWidth;
         const { isAvailableWidthExceeded, exceededChildIndex } = this.checkOverflow(children, availableWidth);
+        if (isAvailableWidthExceeded && exceededChildIndex === 0) {
+            this.setDropdownState(true, this.itemList(), '0px');
+            this.wrapperInner().nativeElement.style.justifyContent = 'start';
+            return;
+        }
         if (!isAvailableWidthExceeded) {
-            this.shouldShowDropdown.set(false);
-            this.dropdownItems.set([]);
+            this.setDropdownState(false, [], 'auto');
             return;
         }
         this.dropdownItems.set(this.itemList().slice(exceededChildIndex));
-        const dropdownWidth = this.getDropdownWidth(dropdownText);
-        const newWidth = parseFloat((availableWidth - dropdownWidth).toFixed(4));
+        const updatedDropdownWidth = this.getDropdownWidth(dropdownText);
+        const newWidth = parseFloat(((this.alwaysShowDropdown() ? wrapperWidth : availableWidth) - updatedDropdownWidth).toFixed(4));
         const { exceededChildIndex: newExceededChildIndex, isAvailableWidthExceeded: isNewWidthExceeded } = this.checkOverflow(children.slice(0, exceededChildIndex), newWidth);
+        const updatedWidth = newWidth > 0 ? newWidth : 0;
         if (isNewWidthExceeded) {
-            this.shouldShowDropdown.set(true);
-            this.dropdownItems.set(this.itemList().slice(newExceededChildIndex));
-            this.containerWidth = `${newExceededChildIndex ? newWidth : 0}px`;
+            this.setDropdownState(true, this.itemList().slice(newExceededChildIndex), `${newExceededChildIndex ? updatedWidth : 0}px`);
             return;
         }
-        this.shouldShowDropdown.set(true);
-        this.containerWidth = `${newWidth}px`;
-        this.dropdownItems.set(this.itemList().slice(exceededChildIndex));
+        this.setDropdownState(true, this.itemList().slice(exceededChildIndex), `${this.alwaysShowDropdown() ? availableWidth : updatedWidth}px`);
     }
     checkOverflow(children, availableWidth) {
         let isAvailableWidthExceeded = false;
@@ -5731,8 +5761,17 @@ class KitCollapsedListComponent {
         clonedDropdown?.remove();
         return width;
     }
+    applyInitialStyles() {
+        this.containerWidth = '100%';
+        this.wrapperInner().nativeElement.style.justifyContent = 'space-between';
+    }
+    setDropdownState(show, items, width) {
+        this.shouldShowDropdown.set(show);
+        this.dropdownItems.set(items);
+        this.containerWidth = width;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "wrapperInner", first: true, predicate: ["wrapperInner"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper \n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div #wrapperInner class=\"wrapper-inner\">\n    <div\n      #container\n      class=\"element-container\"\n      [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n      @for (item of itemList(); track item.value) {\n        <div class=\"item-wrapper\"\n             (click)=\"selectionChange(item)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n        </div>\n      }\n    </div>\n\n    @if (shouldShowDropdown() || alwaysShowDropdown()) {\n      <kit-dropdown #dropdown\n                    class=\"collapsed-list-dropdown\"\n                    [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n                    [items]=\"dropdownItems()\"\n                    [selectedItem]=\"dropdownSelectedItem()\"\n                    [disabled]=\"disableActions()\"\n                    [size]=\"kitDropdownSize.SMALL\"\n                    [popupSettings]=\"popupSettings\"\n                    [isValuePrimitive]=\"false\"\n                    [footerTemplate]=\"dropdownFooterTemplate()\"\n                    [noDataTemplate]=\"dropdownNoDataTemplate()\"\n                    (selected)=\"selectionChange($event)\">\n        @if (dropdownItemTemplate()) {\n          <ng-template kitDropdownItemTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\"/>\n          </ng-template>\n        }\n      </kit-dropdown>\n    }\n  </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  <kit-button class=\"item\"\n              [class.active]=\"item.value === _selectedItem().value\"\n              [label]=\"item.text\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.SMALL\"\n              [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;row-gap:15px;clip-path:xywh(0 -10px 100% 150%)}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup){color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: KitDropdownItemTemplateDirective, selector: "[kitDropdownItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
             type: Component,
@@ -5740,7 +5779,8 @@ 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;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"] }]
+                        DropDownListModule,
+                    ], template: "<div #wrapper \n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div #wrapperInner class=\"wrapper-inner\">\n    <div\n      #container\n      class=\"element-container\"\n      [style.--kit-collapsed-list-container-width]=\"containerWidth\">\n      @for (item of itemList(); track item.value) {\n        <div class=\"item-wrapper\"\n             (click)=\"selectionChange(item)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n        </div>\n      }\n    </div>\n\n    @if (shouldShowDropdown() || alwaysShowDropdown()) {\n      <kit-dropdown #dropdown\n                    class=\"collapsed-list-dropdown\"\n                    [class.selected]=\"dropdownSelectedItem().value !== defaultSelectedItem().value\"\n                    [items]=\"dropdownItems()\"\n                    [selectedItem]=\"dropdownSelectedItem()\"\n                    [disabled]=\"disableActions()\"\n                    [size]=\"kitDropdownSize.SMALL\"\n                    [popupSettings]=\"popupSettings\"\n                    [isValuePrimitive]=\"false\"\n                    [footerTemplate]=\"dropdownFooterTemplate()\"\n                    [noDataTemplate]=\"dropdownNoDataTemplate()\"\n                    (selected)=\"selectionChange($event)\">\n        @if (dropdownItemTemplate()) {\n          <ng-template kitDropdownItemTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\"/>\n          </ng-template>\n        }\n      </kit-dropdown>\n    }\n  </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  <kit-button class=\"item\"\n              [class.active]=\"item.value === _selectedItem().value\"\n              [label]=\"item.text\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.SMALL\"\n              [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:var(--kit-collapsed-list-container-width, 100%);display:flex;flex-wrap:wrap;row-gap:15px;clip-path:xywh(0 -10px 100% 150%)}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup){color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup) .k-input-value-text span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown:not(.k-popup) .k-input-value-text svg{stroke:var(--ui-kit-color-white)}\n"] }]
         }] });
 class KitScrollNavigationComponent {
@@ -5835,7 +5875,7 @@ class KitScrollNavigationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitScrollNavigationComponent, isStandalone: true, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n    <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                        [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n                        [gap]=\"18\"\n                        [itemTemplate]=\"navItem\"\n                        [disableActions]=\"isNavigationBtnDisabled()\"\n                        (onSelectItem)=\"scrollToSection($event)\" />\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of sections?.toArray(); track item) {\n      <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n      ></ng-container>\n    }\n  </div>\n</div>\n\n<ng-template #navItem let-item>\n  <div kitBadge\n       [kitBadgeVisible]=\"item.badgeCount\"\n       [kitBadgeText]=\"item.badgeCount\"\n       [kitBadgeTheme]=\"kitBadgeTheme.DANGER\">\n    <kit-button kitTooltip\n                kitTooltipFilter='.nav-item'\n                class=\"nav-item\"\n                [active]=\"currentVisibleItem?.value === item.value\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"item.icon\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                [state]=\"item.state ?? kitButtonState.DEFAULT\"\n                [label]=\"item.text\"\n                [title]=\"item.tooltipText\"\n                [disabled]=\"isNavigationBtnDisabled()\"\n                [kitTooltipVisible]=\"!!item.tooltipText\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;height:100%}.kit-scroll-navigation-items{padding-bottom:27px}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: KitSvgIconModule }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate"], outputs: ["onSelectItem"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitScrollNavigationComponent, isStandalone: true, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n    <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                        [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n                        [gap]=\"18\"\n                        [itemTemplate]=\"navItem\"\n                        [disableActions]=\"isNavigationBtnDisabled()\"\n                        (onSelectItem)=\"scrollToSection($event)\" />\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of sections?.toArray(); track item) {\n      <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n      ></ng-container>\n    }\n  </div>\n</div>\n\n<ng-template #navItem let-item>\n  <div kitBadge\n       [kitBadgeVisible]=\"item.badgeCount\"\n       [kitBadgeText]=\"item.badgeCount\"\n       [kitBadgeTheme]=\"kitBadgeTheme.DANGER\">\n    <kit-button kitTooltip\n                kitTooltipFilter='.nav-item'\n                class=\"nav-item\"\n                [active]=\"currentVisibleItem?.value === item.value\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"item.icon\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                [state]=\"item.state ?? kitButtonState.DEFAULT\"\n                [label]=\"item.text\"\n                [title]=\"item.tooltipText\"\n                [disabled]=\"isNavigationBtnDisabled()\"\n                [kitTooltipVisible]=\"!!item.tooltipText\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;height:100%}.kit-scroll-navigation-items{padding-bottom:27px}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: KitSvgIconModule }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown"], outputs: ["onSelectItem"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationComponent, decorators: [{
             type: Component,
@@ -6329,7 +6369,7 @@ class KitSortableComponent {
         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" }, 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 }); }
+    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$5.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$5.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,
@@ -6419,7 +6459,7 @@ class KitTranslateService {
             this.translateService.setTranslation(lang, kitTranslations[lang], true);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, deps: [{ token: i1$a.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTranslateService, decorators: [{
@@ -6427,7 +6467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$b.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$a.TranslateService }] });
 class AbstractPayloadAction {
     constructor(payload) {
@@ -6644,7 +6684,7 @@ class KitSettingsApiService {
         const url = `${this.basePath}/users/me/settings/groups/${group}/${key}`;
         return this.httpClient.delete(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, deps: [{ token: i1$b.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSettingsApiService, decorators: [{
@@ -6652,7 +6692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$b.HttpClient }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KIT_BASE_PATH]
                 }] }] });
@@ -6669,7 +6709,7 @@ let KitGridViewsState = class KitGridViewsState {
             title: setting.key,
             group: setting.group,
             type: KitGridViewType.USER,
-            value: setting.value && JSON.parse(setting.value),
+            viewState: setting.value && JSON.parse(setting.value),
         }))), map(values => ([
             ...action.payload.defaultItems ?? [],
             ...values,
@@ -6683,10 +6723,10 @@ let KitGridViewsState = class KitGridViewsState {
     addGridView(ctx, action) {
         const items = ctx.getState().data.views;
         const formattedPayload = { ...action.payload, title: action.payload.title.toLowerCase() };
-        const { title, group, value } = formattedPayload;
+        const { title, group, viewState } = formattedPayload;
         const settingValue = {
             group,
-            value: JSON.stringify(value),
+            value: JSON.stringify(viewState),
         };
         return this.settingsService.setSettingByKey(title, settingValue).pipe(tap(() => {
             const viewExists = items.some(item => this.hasUserView(item, title));
@@ -6717,7 +6757,7 @@ let KitGridViewsState = class KitGridViewsState {
             title: setting.key,
             group: setting.group,
             type: KitGridViewType.CONFIG,
-            value: setting.value && JSON.parse(setting.value),
+            viewState: setting.value && JSON.parse(setting.value),
         }))), tap(values => ctx.setState(patch({
             data: patch({
                 config: values[0],
@@ -6725,10 +6765,10 @@ let KitGridViewsState = class KitGridViewsState {
         }))));
     }
     updateGridViewsConfig(ctx, action) {
-        const { title, group, value } = action.payload;
+        const { title, group, viewState } = action.payload;
         const settingValue = {
             group,
-            value: JSON.stringify(value),
+            value: JSON.stringify(viewState),
         };
         return this.settingsService.setSettingByKey(title, settingValue).pipe(tap(() => ctx.setState(patch({
             data: patch({
@@ -6746,7 +6786,7 @@ let KitGridViewsState = class KitGridViewsState {
     static getViews() {
         return createSelector([KitGridViewsState_1], (gridViewsState) => {
             const views = gridViewsState?.data?.views ?? [];
-            const viewsConfig = gridViewsState?.data?.config?.value?.config ?? null;
+            const viewsConfig = gridViewsState?.data?.config?.viewState?.config ?? null;
             if (!viewsConfig) {
                 return views;
             }
@@ -6806,166 +6846,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: KitSettingsApiService }], propDecorators: { fetchGridViews: [], addGridView: [], removeGridView: [], setGridViews: [], fetchGridViewsConfig: [], updateGridViewsConfig: [], setSelectedView: [] } });
-class KitGridViewsManagerComponent extends DialogContentBase {
-    constructor(store, dialog) {
-        super(dialog);
-        this.store = store;
-        this.dialog = dialog;
-        this.configGroup = input.required();
-        this.items = signal(this.store.selectSnapshot(KitGridViewsState.getViews()) ?? []);
-        this.kitButtonKind = KitButtonKind;
-        this.kitButtonType = KitButtonType;
-        this.kitSvgIcon = KitSvgIcon;
-        this.kitSvgIconType = KitSvgIconType;
-    }
-    applyChanges() {
-        const existingViews = this.store.selectSnapshot(KIT_GRID_VIEWS_STATE_TOKEN).data.views;
-        const viewsToRemove = existingViews
-            .filter(view => !this.items()
-            .some(item => item.title === view.title && item.type === view.type));
-        const viewsToSave = this.items().map(({ value, ...item }) => item);
-        const viewConfig = {
-            title: this.configGroup(),
-            group: this.configGroup(),
-            type: KitGridViewType.CONFIG,
-            value: {
-                config: viewsToSave,
-            },
-        };
-        this.store.dispatch([
-            ...viewsToRemove.map(view => new RemoveGridView(view)),
-            new SetGridViews(this.items()),
-            new UpdateGridViewsConfig(viewConfig),
-        ]).subscribe(() => this.dialog.close(true));
-    }
-    close() {
-        this.dialog.close();
-    }
-    onColumnVisibilityChange(event, view) {
-        this.items.update(items => items
-            .map(item => (item.title === view.title && item.type === view.type) && { ...item, hidden: !event } || item));
-    }
-    isSystemView(item) {
-        return item.type === KitGridViewType.SYSTEM;
-    }
-    onViewRemove(view) {
-        this.items.update(items => items.filter(item => item.title !== view.title || item.type === KitGridViewType.SYSTEM));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$d.Store }, { token: i1$8.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [ngClass]=\"item.type\">\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [ngClass]=\"{ disabled: isSystemView(item) }\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (isSystemView(item)) {\n          <kit-svg-icon class=\"item-icon-system\"\n                        [icon]=\"kitSvgIcon.GLOBAL\"\n          ></kit-svg-icon>\n        }\n        <kit-button [disabled]=\"isSystemView(item)\"\n                    [type]=\"kitButtonType.LINK\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    (clicked)=\"onViewRemove(item)\"\n        ></kit-button>\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--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,
-            args: [{ selector: 'kit-grid-views-manager', imports: [
-                        KitButtonModule,
-                        KitSortableComponent,
-                        KitSvgIconModule,
-                        TranslateModule,
-                        NgClass,
-                        KitDialogActionsComponent,
-                        TitleCasePipe,
-                        KitTruncateTextComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [ngClass]=\"item.type\">\n        <kit-svg-icon class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        @if (item.hidden) {\n          <kit-svg-icon class=\"item-icon-checkbox hidden\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon class=\"item-icon-checkbox\"\n                        [ngClass]=\"{ disabled: isSystemView(item) }\"\n                        [icon]=\"kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(false, item)\"\n          ></kit-svg-icon>\n        }\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (isSystemView(item)) {\n          <kit-svg-icon class=\"item-icon-system\"\n                        [icon]=\"kitSvgIcon.GLOBAL\"\n          ></kit-svg-icon>\n        }\n        <kit-button [disabled]=\"isSystemView(item)\"\n                    [type]=\"kitButtonType.LINK\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                    [iconType]=\"kitSvgIconType.STROKE\"\n                    (clicked)=\"onViewRemove(item)\"\n        ></kit-button>\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -24px;column-gap:0;column-rule:1px solid var(--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 {
-    constructor(activatedRoute, router, store, kitDialogService, translateService, viewContainerRef) {
-        this.activatedRoute = activatedRoute;
-        this.router = router;
-        this.store = store;
-        this.kitDialogService = kitDialogService;
-        this.translateService = translateService;
-        this.viewContainerRef = viewContainerRef;
-        this.viewGroup = input.required();
-        this.viewConfigGroup = input.required();
-        this.views = input.required();
-        this.defaultColumns = input.required();
-        this.defaultSorting = input.required();
-        this.defaultViewName = input.required();
-        this.anchor = viewChild.required('toggleButton', { read: ElementRef });
-        this.popup = viewChild('popup', { read: KitPopupComponent });
-        this.viewName = signal('');
-        this.createViewPopupVisible = signal(false);
-        this.kitButtonType = KitButtonType;
-        this.kitButtonKind = KitButtonKind;
-        this.kitSvgIcon = KitSvgIcon;
-        this.kitSvgIconType = KitSvgIconType;
-        this.kitButtonIconPosition = KitButtonIconPosition;
-        this.gridViewType = KitGridViewType;
-        this.kitTextboxState = KitTextboxState;
-        this.selectedView = this.store.selectSignal(KitGridViewsState.selectedView);
-    }
-    get isViewNameValid() {
-        return isViewNameValid(this.viewName());
-    }
-    get inputMessage() {
-        const infoMessage = getInputMessage(this.views(), this.viewName().toLowerCase());
-        return infoMessage && this.translateService.instant(infoMessage) || '';
-    }
-    onViewSelect(item) {
-        navigateToView(item.title, this.router, this.activatedRoute);
-        this.popup()?.close();
-        this.store.dispatch(new SetSelectedView(item));
-    }
-    newViewToggle(visible) {
-        this.viewName.set('');
-        setTimeout(() => this.createViewPopupVisible.set(visible));
-    }
-    onPopupToggle() {
-        this.viewName.set('');
-        this.createViewPopupVisible.set(false);
-        this.popup()?.toggle();
-    }
-    onViewCreate() {
-        const view = {
-            title: this.viewName(),
-            group: this.viewGroup(),
-            type: KitGridViewType.USER,
-            value: {
-                filter: [],
-                sort: this.defaultSorting(),
-                columns: this.defaultColumns(),
-            },
-        };
-        this.store.dispatch(new AddGridView(view)).subscribe(() => {
-            navigateToView(this.viewName().toLowerCase(), this.router, this.activatedRoute);
-            this.viewName.set('');
-            this.popup()?.close();
-            this.store.dispatch(new SetSelectedView(view));
-        });
-    }
-    openViewsManagerModal() {
-        this.popup()?.close();
-        this.kitDialogService.openDialog({
-            title: this.translateService.instant('kit.views.views'),
-            content: KitGridViewsManagerComponent,
-            appendTo: this.viewContainerRef,
-        });
-        signalSetFn(this.kitDialogService.dialogInstance.configGroup[SIGNAL], this.viewConfigGroup());
-        this.kitDialogService.dialogRef?.result.pipe(filter(result => !(result instanceof DialogCloseResult))).subscribe(() => this.handleViewChange());
-    }
-    handleViewChange() {
-        const view = findGridViewByName(this.views(), this.selectedView()?.title ?? '');
-        return view
-            ? this.store.dispatch(new SetSelectedView(view))
-            : navigateToView(this.defaultViewName(), this.router, this.activatedRoute);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsListComponent, deps: [{ token: i1$7.ActivatedRoute }, { token: i1$7.Router }, { token: i1$d.Store }, { token: KitDialogService }, { token: i1$b.TranslateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsListComponent, isStandalone: true, selector: "kit-grid-views-list", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            [label]=\"(selectedView()?.title ?? '') | titlecase\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            [active]=\"popup.isPopupOpen\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-views-list\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  @if (!createViewPopupVisible()) {\n    <div class=\"view\">\n      <div class=\"views-list\">\n        @for (item of views(); track item) {\n          @if (!item.hidden) {\n            <div class=\"views-item\"\n                 [ngClass]=\"item.type\"\n                 [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n                 (click)=\"onViewSelect(item)\">\n              <kit-svg-icon class=\"view-icon\"\n                            [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              ></kit-svg-icon>\n              <div class=\"item-name\">{{ item.title | titlecase }}</div>\n              <kit-svg-icon class=\"check-icon\"\n                            [icon]=\"kitSvgIcon.CHECK\"\n              ></kit-svg-icon>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"popup-action\">\n        <kit-button [label]=\"'kit.views.newView' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    (clicked)=\"newViewToggle(true)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"new-view\">\n      <kit-textbox [defaultValue]=\"viewName()\"\n                   [placeholder]=\"'kit.views.enterText' | translate\"\n                   [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                   [messageText]=\"inputMessage\"\n                   (changed)=\"viewName.set($event)\"\n      ></kit-textbox>\n      <div class=\"new-view-action\">\n        <kit-button [label]=\"'kit.views.cancel' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"newViewToggle(false)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.save' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [disabled]=\"!viewName() || !isViewNameValid\"\n                    (clicked)=\"onViewCreate()\"\n        ></kit-button>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--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,
-            args: [{ selector: 'kit-grid-views-list', imports: [
-                        KitButtonModule,
-                        KitPopupComponent,
-                        KitSvgIconModule,
-                        KitTextboxModule,
-                        TranslateModule,
-                        NgClass,
-                        TitleCasePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n            [label]=\"(selectedView()?.title ?? '') | titlecase\"\n            [type]=\"kitButtonType.GHOST\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.CHEVRON_DOWN\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            [active]=\"popup.isPopupOpen\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-views-list\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  @if (!createViewPopupVisible()) {\n    <div class=\"view\">\n      <div class=\"views-list\">\n        @for (item of views(); track item) {\n          @if (!item.hidden) {\n            <div class=\"views-item\"\n                 [ngClass]=\"item.type\"\n                 [class.active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n                 (click)=\"onViewSelect(item)\">\n              <kit-svg-icon class=\"view-icon\"\n                            [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              ></kit-svg-icon>\n              <div class=\"item-name\">{{ item.title | titlecase }}</div>\n              <kit-svg-icon class=\"check-icon\"\n                            [icon]=\"kitSvgIcon.CHECK\"\n              ></kit-svg-icon>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"popup-action\">\n        <kit-button [label]=\"'kit.views.newView' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    (clicked)=\"newViewToggle(true)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"new-view\">\n      <kit-textbox [defaultValue]=\"viewName()\"\n                   [placeholder]=\"'kit.views.enterText' | translate\"\n                   [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                   [messageText]=\"inputMessage\"\n                   (changed)=\"viewName.set($event)\"\n      ></kit-textbox>\n      <div class=\"new-view-action\">\n        <kit-button [label]=\"'kit.views.cancel' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"newViewToggle(false)\"\n        ></kit-button>\n        <kit-button [label]=\"'kit.views.save' | translate\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [disabled]=\"!viewName() || !isViewNameValid\"\n                    (clicked)=\"onViewCreate()\"\n        ></kit-button>\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .kit-grid-views-list{width:408px}::ng-deep .kit-grid-views-list .views-list{display:flex;flex-direction:column;margin-bottom:12px;max-height:300px;overflow:auto}::ng-deep .kit-grid-views-list .views-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-grid-views-list .views-item.system{color:var(--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;
 (function (KitFilterType) {
     KitFilterType["CHECKBOX"] = "checkbox";
@@ -7050,9 +6930,9 @@ class KitGridViewsSaveComponent {
     ngOnInit() {
         this.store.select(KIT_GRID_STATE_TOKEN).pipe(filter(({ columns }) => !!columns.length)).subscribe(({ filter, sort, columns }) => {
             const selectedViewState = {
-                filter: this.selectedView()?.value?.filter,
-                sort: this.selectedView()?.value?.sort,
-                columns: buildGridViewColumns(this.selectedView()?.value?.columns ?? []),
+                filter: this.selectedView()?.viewState?.filter,
+                sort: this.selectedView()?.viewState?.sort,
+                columns: buildGridViewColumns(this.selectedView()?.viewState?.columns ?? []),
             };
             const currentViewState = {
                 filter,
@@ -7073,7 +6953,7 @@ class KitGridViewsSaveComponent {
             title: this.viewName(),
             group: this.viewGroup(),
             type: KitGridViewType.USER,
-            value: {
+            viewState: {
                 filter: hasOverriddenSystemView(this.viewName(), views) && filter || removeReadonlyPropertyFromFilters(filter),
                 sort,
                 columns: buildGridViewColumns(columns),
@@ -7093,8 +6973,8 @@ class KitGridViewsSaveComponent {
         }
         this.viewName.set(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsSaveComponent, deps: [{ token: i1$d.Store }, { token: i1$7.Router }, { token: i1$7.ActivatedRoute }, { token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? '' : ('kit.views.noUnsavedChanges' | translate)\"\n            [label]=\"'kit.views.save' | translate\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          popupClass=\"grid-views-save\"\n          [anchor]=\"anchor()\"\n          [content]=\"content\"\n          [showFooter]=\"true\"\n          [applyButtonLabel]=\"'kit.views.save' | translate\"\n          [cancelButtonLabel]=\"'kit.views.cancel' | translate\"\n          [isApplyButtonDisabled]=\"!viewName() || !isViewNameValid\"\n          (onApply)=\"onViewSave()\">\n</kit-popup>\n\n<ng-template #content>\n  <kit-autocomplete [placeholder]=\"'kit.views.enterText' | translate\"\n                    [allowCustom]=\"true\"\n                    [items]=\"viewsAutocompleteItems() ?? []\"\n                    [closePopupIfDataNotFound]=\"true\"\n                    [invalid]=\"!isViewNameValid\"\n                    [messageText]=\"inputMessage\"\n                    (filterChanged)=\"onValueChange($event)\"\n                    (valueChanged)=\"viewName.set($event)\"\n                    (selectionChanged)=\"onValueChange($event)\"\n  ></kit-autocomplete>\n</ng-template>\n", styles: ["::ng-deep .grid-views-save{display:flex;flex-direction:column;width:344px}::ng-deep .grid-views-save .k-popup .footer{margin-top:30px;padding-top:30px}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitAutocompleteModule }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsSaveComponent, deps: [{ token: i1$c.Store }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: i1$a.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.4", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? '' : ('kit.views.noUnsavedChanges' | translate)\"\n            [label]=\"'kit.views.save' | translate\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          popupClass=\"grid-views-save\"\n          [anchor]=\"anchor()\"\n          [content]=\"content\"\n          [showFooter]=\"true\"\n          [applyButtonLabel]=\"'kit.views.save' | translate\"\n          [cancelButtonLabel]=\"'kit.views.cancel' | translate\"\n          [isApplyButtonDisabled]=\"!viewName() || !isViewNameValid\"\n          (onApply)=\"onViewSave()\">\n</kit-popup>\n\n<ng-template #content>\n  <kit-autocomplete [placeholder]=\"'kit.views.enterText' | translate\"\n                    [allowCustom]=\"true\"\n                    [items]=\"viewsAutocompleteItems() ?? []\"\n                    [closePopupIfDataNotFound]=\"true\"\n                    [invalid]=\"!isViewNameValid\"\n                    [messageText]=\"inputMessage\"\n                    (filterChanged)=\"onValueChange($event)\"\n                    (valueChanged)=\"viewName.set($event)\"\n                    (selectionChanged)=\"onValueChange($event)\"\n  ></kit-autocomplete>\n</ng-template>\n", styles: ["::ng-deep .grid-views-save{display:flex;flex-direction:column;width:344px}::ng-deep .grid-views-save .k-popup .footer{margin-top:30px;padding-top:30px}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitAutocompleteModule }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsSaveComponent, decorators: [{
             type: Component,
@@ -7105,15 +6985,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TranslateModule,
                         KitTooltipDirective,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? '' : ('kit.views.noUnsavedChanges' | translate)\"\n            [label]=\"'kit.views.save' | translate\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          popupClass=\"grid-views-save\"\n          [anchor]=\"anchor()\"\n          [content]=\"content\"\n          [showFooter]=\"true\"\n          [applyButtonLabel]=\"'kit.views.save' | translate\"\n          [cancelButtonLabel]=\"'kit.views.cancel' | translate\"\n          [isApplyButtonDisabled]=\"!viewName() || !isViewNameValid\"\n          (onApply)=\"onViewSave()\">\n</kit-popup>\n\n<ng-template #content>\n  <kit-autocomplete [placeholder]=\"'kit.views.enterText' | translate\"\n                    [allowCustom]=\"true\"\n                    [items]=\"viewsAutocompleteItems() ?? []\"\n                    [closePopupIfDataNotFound]=\"true\"\n                    [invalid]=\"!isViewNameValid\"\n                    [messageText]=\"inputMessage\"\n                    (filterChanged)=\"onValueChange($event)\"\n                    (valueChanged)=\"viewName.set($event)\"\n                    (selectionChanged)=\"onValueChange($event)\"\n  ></kit-autocomplete>\n</ng-template>\n", styles: ["::ng-deep .grid-views-save{display:flex;flex-direction:column;width:344px}::ng-deep .grid-views-save .k-popup .footer{margin-top:30px;padding-top:30px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$7.Router }, { type: i1$7.ActivatedRoute }, { type: i1$b.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$c.Store }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }, { type: i1$a.TranslateService }] });
+class KitGridViewsManagerComponent extends DialogContentBase {
+    constructor(store, dialog) {
+        super(dialog);
+        this.store = store;
+        this.dialog = dialog;
+        this.configGroup = input.required();
+        this.items = signal(this.store.selectSnapshot(KitGridViewsState.getViews()) ?? []);
+        this.hasUnsavedChanges = signal(false);
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonType = KitButtonType;
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitSvgIconType = KitSvgIconType;
+    }
+    applyChanges() {
+        const existingViews = this.store.selectSnapshot(KIT_GRID_VIEWS_STATE_TOKEN).data.views;
+        const viewsToRemove = existingViews
+            .filter(view => !this.items()
+            .some(item => item.title === view.title && item.type === view.type));
+        const viewsToSave = this.items().map(({ viewState, ...item }) => item);
+        const viewConfig = {
+            title: this.configGroup(),
+            group: this.configGroup(),
+            type: KitGridViewType.CONFIG,
+            viewState: {
+                config: viewsToSave,
+            },
+        };
+        this.store.dispatch([
+            ...viewsToRemove.map(view => new RemoveGridView(view)),
+            new SetGridViews(this.items()),
+            new UpdateGridViewsConfig(viewConfig),
+        ]).subscribe(() => {
+            this.hasUnsavedChanges.set(false);
+            this.dialog.close(true);
+        });
+    }
+    close() {
+        this.dialog.close();
+    }
+    onColumnVisibilityChange(event, view) {
+        this.items.update(items => items
+            .map(item => (item.title === view.title && item.type === view.type) && { ...item, hidden: !event } || item));
+        this.checkChanges();
+    }
+    isSystemView(item) {
+        return item.type === KitGridViewType.SYSTEM;
+    }
+    onViewRemove(view) {
+        this.items.update(items => items.filter(item => item.title !== view.title || item.type === KitGridViewType.SYSTEM));
+        this.checkChanges();
+    }
+    checkChanges() {
+        const config = this.store.selectSnapshot(KIT_GRID_VIEWS_STATE_TOKEN).data.config;
+        const usedConfig = config?.viewState?.config?.map(view => ({ title: view.title, hidden: view.hidden ?? false })) ?? [];
+        const updatedViews = this.items().map(view => ({ title: view.title, hidden: view.hidden ?? false }));
+        this.hasUnsavedChanges.set(JSON.stringify(usedConfig) !== JSON.stringify(updatedViews));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$c.Store }, { token: i1$7.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                (onDragEnd)=\"checkChanges()\">\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                [disabled]=\"!hasUnsavedChanges()\"\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$a.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-grid-views-manager', imports: [
+                        KitButtonModule,
+                        KitSortableComponent,
+                        KitSvgIconModule,
+                        TranslateModule,
+                        NgClass,
+                        KitDialogActionsComponent,
+                        TitleCasePipe,
+                        KitTruncateTextComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\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                [disabled]=\"!hasUnsavedChanges()\"\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$c.Store }, { type: i1$7.DialogRef }] });
 class KitGridViewsComponent {
-    constructor(store, activatedRoute, router, destroyRef, titleCasePipe) {
+    get isViewNameValid() {
+        return isViewNameValid(this.createNewViewName());
+    }
+    get inputMessage() {
+        const infoMessage = getInputMessage(this.views(), this.createNewViewName().toLowerCase());
+        return infoMessage && this.translateService.instant(infoMessage) || '';
+    }
+    constructor(store, activatedRoute, router, destroyRef, titleCasePipe, kitDialogService, translateService, viewContainerRef) {
         this.store = store;
         this.activatedRoute = activatedRoute;
         this.router = router;
         this.destroyRef = destroyRef;
         this.titleCasePipe = titleCasePipe;
+        this.kitDialogService = kitDialogService;
+        this.translateService = translateService;
+        this.viewContainerRef = viewContainerRef;
         this.viewGroup = input.required();
         this.viewConfigGroup = input.required();
         this.defaultColumns = input.required();
@@ -7121,27 +7085,90 @@ class KitGridViewsComponent {
         this.defaultSorting = input.required();
         this.systemViews = input.required();
         this.viewChanged = new EventEmitter();
+        this.collapsedList = viewChild((KitCollapsedListComponent));
+        this.createNewViewPopup = viewChild('popup', { read: KitPopupComponent });
+        this.anchor = viewChild('toggleButton', { read: ElementRef });
+        this.createNewViewName = signal('');
         this.currentViewName$ = combineLatest([
             this.activatedRoute.params.pipe(map(params => params['view'] && decodeViewNameFromUrl(params['view']))),
             this.activatedRoute.data.pipe(map(data => data['view'])),
         ]).pipe(map(([viewParam, viewData,]) => viewParam ?? viewData));
         this.viewsState$ = this.store.select(KIT_GRID_VIEWS_STATE_TOKEN);
         this.views$ = this.store.select(KitGridViewsState.getViews());
+        this.views = this.store.selectSignal(KitGridViewsState.getViews());
+        this.collapsedListItems = signal([]);
         this.viewsAutocompleteItems$ = this.views$.pipe(map(views => filterDuplicateGridViews(views)), map(views => views.map(({ title }) => ({
             text: this.titleCasePipe.transform(title),
             value: title,
         }))));
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitSvgIconType = KitSvgIconType;
+        this.gridViewType = KitGridViewType;
+        this.kitButtonType = KitButtonType;
+        this.kitButtonKind = KitButtonKind;
+        this.kitButtonIconPosition = KitButtonIconPosition;
+        this.kitTextboxState = KitTextboxState;
+        this.selectedView = this.store.selectSignal(KitGridViewsState.selectedView);
     }
     ngOnInit() {
         this.fetchViews();
         this.handleViewOnRouteChange();
         this.store.select(KitGridViewsState.selectedView).subscribe(view => {
             view && this.updateGridState(view);
+            if (view) {
+                const item = this.collapsedListItems().find(item => item.value === this.getCollapsedListItem(view).value);
+                item && this.collapsedList()?.setSelectedItem(item);
+            }
+        });
+        this.views$.subscribe((views) => {
+            this.collapsedListItems.set(views.filter(view => !view.hidden).map(view => this.getCollapsedListItem(view)));
         });
     }
     ngOnDestroy() {
         this.store.dispatch(new StateReset(KitGridViewsState));
     }
+    onSelectView(selectedView) {
+        navigateToView(selectedView.title, this.router, this.activatedRoute);
+        this.store.dispatch(new SetSelectedView(selectedView));
+    }
+    openViewsManagerModal() {
+        this.kitDialogService.openDialog({
+            title: this.translateService.instant('kit.views.views'),
+            content: KitGridViewsManagerComponent,
+            appendTo: this.viewContainerRef,
+            cssClass: 'grid-views-manager-dialog',
+        });
+        signalSetFn(this.kitDialogService.dialogInstance.configGroup[SIGNAL], this.viewConfigGroup());
+        this.kitDialogService.dialogRef?.result.pipe(filter(result => !(result instanceof DialogCloseResult))).subscribe(() => {
+            const views = this.store.selectSnapshot(KitGridViewsState.getViews());
+            const view = findGridViewByName(views, this.selectedView()?.title ?? '');
+            return view
+                ? this.store.dispatch(new SetSelectedView(view))
+                : navigateToView(this.defaultViewName(), this.router, this.activatedRoute);
+        });
+    }
+    onViewCreate() {
+        const view = {
+            title: this.createNewViewName(),
+            group: this.viewGroup(),
+            type: KitGridViewType.USER,
+            viewState: {
+                filter: [],
+                sort: this.defaultSorting(),
+                columns: this.defaultColumns(),
+            },
+        };
+        this.store.dispatch(new AddGridView(view)).subscribe(() => {
+            navigateToView(this.createNewViewName().toLowerCase(), this.router, this.activatedRoute);
+            this.createNewViewName.set('');
+            this.createNewViewPopup()?.close();
+            this.store.dispatch(new SetSelectedView(view));
+        });
+    }
+    onPopupToggle() {
+        this.createNewViewName.set('');
+        requestAnimationFrame(() => this.createNewViewPopup()?.toggle());
+    }
     fetchViews() {
         this.store.dispatch([
             new FetchGridViews({
@@ -7169,28 +7196,42 @@ class KitGridViewsComponent {
     }
     updateGridState(view) {
         this.store.dispatch([
-            new SetGridSort(view?.value?.sort ?? this.defaultSorting()),
-            new SetGridFilters(convertFilterStringDate(view?.value?.filter ?? [])),
-            new SetGridColumns(buildGridColumns(this.defaultColumns(), view?.value?.columns ?? this.defaultColumns())),
+            new SetGridSort(view?.viewState?.sort ?? this.defaultSorting()),
+            new SetGridFilters(convertFilterStringDate(view?.viewState?.filter ?? [])),
+            new SetGridColumns(buildGridColumns(this.defaultColumns(), view?.viewState?.columns ?? this.defaultColumns())),
             new SetGridSkip(0),
         ]).subscribe(() => this.viewChanged.emit());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, deps: [{ token: i1$d.Store }, { token: i1$7.ActivatedRoute }, { token: i1$7.Router }, { token: i0.DestroyRef }, { token: i1$1.TitleCasePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    getCollapsedListItem(view) {
+        return {
+            ...view,
+            text: this.titleCasePipe.transform(view.title),
+            value: `${view.title}_${view.group}_${view.type}`,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, deps: [{ token: i1$c.Store }, { token: i2$1.ActivatedRoute }, { token: i2$1.Router }, { token: i0.DestroyRef }, { token: i1$1.TitleCasePipe }, { token: KitDialogService }, { token: i1$a.TranslateService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridViewsComponent, isStandalone: true, selector: "kit-grid-views", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, systemViews: { classPropertyName: "systemViews", publicName: "systemViews", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { viewChanged: "viewChanged" }, providers: [
             TitleCasePipe,
-        ], ngImport: i0, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      @if (views$ | async; as views) {\n        <kit-grid-views-list [viewGroup]=\"viewGroup()\"\n                             [viewConfigGroup]=\"viewConfigGroup()\"\n                             [views]=\"views\"\n                             [defaultColumns]=\"defaultColumns()\"\n                             [defaultViewName]=\"defaultViewName()\"\n                             [defaultSorting]=\"defaultSorting()\"\n        ></kit-grid-views-list>\n\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n        ></kit-grid-views-save>\n      }\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n", styles: [".kit-grid-views{display:flex;align-items:center;gap:16px}.kit-grid-views .popup-content{display:flex;flex-direction:column;width:296px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KitGridViewsListComponent, selector: "kit-grid-views-list", inputs: ["viewGroup", "viewConfigGroup", "views", "defaultColumns", "defaultSorting", "defaultViewName"] }, { kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      @if (views$ | async; as views) {\n        <div class=\"views-list\">\n          <kit-collapsed-list #toggleButton\n                              appendTo=\"component\"\n                              [itemList]=\"collapsedListItems()\"\n                              [dropdownDefaultValueText]=\"'kit.views.newView' | translate\"\n                              [lineHeight]=\"32\"\n                              [itemTemplate]=\"collapsedListItem\"\n                              [dropdownFooterTemplate]=\"dropdownFooter\"\n                              [dropdownItemTemplate]=\"dropdownItem\"\n                              [alwaysShowDropdown]=\"true\"\n                              (onSelectItem)=\"onSelectView($event)\"/>\n        </div>\n\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n        ></kit-grid-views-save>\n      }\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n  <div class=\"dropdown-footer\">\n    <kit-button [label]=\"'kit.views.newView' | translate\"\n                [type]=\"kitButtonType.TEXT\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"kitSvgIcon.PLUS\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                (clicked)=\"onPopupToggle()\"/>\n    <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                [type]=\"kitButtonType.TEXT\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"kitSvgIcon.PLUS\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                [disabled]=\"views()?.length < 2\"\n                (clicked)=\"openViewsManagerModal()\"/>\n  </div>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.set($event)\"\n    ></kit-textbox>\n    <div class=\"new-view-action\">\n      <kit-button [label]=\"'kit.views.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"createNewViewPopup()?.close()\"\n      ></kit-button>\n      <kit-button [label]=\"'kit.views.save' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"!createNewViewName() || !isViewNameValid\"\n                  (clicked)=\"onViewCreate()\"\n      ></kit-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n  <div class=\"views-item\"\n       [ngClass]=\"dataItem.type\"\n       [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n    <kit-svg-icon class=\"view-icon\"\n                [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n    ></kit-svg-icon>\n    <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n    <kit-svg-icon class=\"check-icon\"\n                [icon]=\"kitSvgIcon.CHECK\"\n    ></kit-svg-icon>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px;color:inherit}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user:hover .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{background-color:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active.system .check-icon{stroke:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown"], outputs: ["onSelectItem"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridViewsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-grid-views', imports: [
                         AsyncPipe,
-                        KitGridViewsListComponent,
                         KitSkeletonModule,
                         KitGridViewsSaveComponent,
+                        KitCollapsedListComponent,
+                        KitSvgIconModule,
+                        NgClass,
+                        TitleCasePipe,
+                        KitButtonModule,
+                        TranslateModule,
+                        KitPopupComponent,
+                        KitTextboxModule,
                     ], providers: [
                         TitleCasePipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      @if (views$ | async; as views) {\n        <kit-grid-views-list [viewGroup]=\"viewGroup()\"\n                             [viewConfigGroup]=\"viewConfigGroup()\"\n                             [views]=\"views\"\n                             [defaultColumns]=\"defaultColumns()\"\n                             [defaultViewName]=\"defaultViewName()\"\n                             [defaultSorting]=\"defaultSorting()\"\n        ></kit-grid-views-list>\n\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n        ></kit-grid-views-save>\n      }\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n", styles: [".kit-grid-views{display:flex;align-items:center;gap:16px}.kit-grid-views .popup-content{display:flex;flex-direction:column;width:296px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$7.ActivatedRoute }, { type: i1$7.Router }, { type: i0.DestroyRef }, { type: i1$1.TitleCasePipe }], propDecorators: { viewChanged: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      @if (views$ | async; as views) {\n        <div class=\"views-list\">\n          <kit-collapsed-list #toggleButton\n                              appendTo=\"component\"\n                              [itemList]=\"collapsedListItems()\"\n                              [dropdownDefaultValueText]=\"'kit.views.newView' | translate\"\n                              [lineHeight]=\"32\"\n                              [itemTemplate]=\"collapsedListItem\"\n                              [dropdownFooterTemplate]=\"dropdownFooter\"\n                              [dropdownItemTemplate]=\"dropdownItem\"\n                              [alwaysShowDropdown]=\"true\"\n                              (onSelectItem)=\"onSelectView($event)\"/>\n        </div>\n\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n        ></kit-grid-views-save>\n      }\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [icon]=\"item.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<ng-template #dropdownFooter>\n  <div class=\"dropdown-footer\">\n    <kit-button [label]=\"'kit.views.newView' | translate\"\n                [type]=\"kitButtonType.TEXT\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"kitSvgIcon.PLUS\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                (clicked)=\"onPopupToggle()\"/>\n    <kit-button [label]=\"'kit.views.manageViews' | translate\"\n                [type]=\"kitButtonType.TEXT\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"kitSvgIcon.PLUS\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                [disabled]=\"views()?.length < 2\"\n                (clicked)=\"openViewsManagerModal()\"/>\n  </div>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.set($event)\"\n    ></kit-textbox>\n    <div class=\"new-view-action\">\n      <kit-button [label]=\"'kit.views.cancel' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"createNewViewPopup()?.close()\"\n      ></kit-button>\n      <kit-button [label]=\"'kit.views.save' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"!createNewViewName() || !isViewNameValid\"\n                  (clicked)=\"onViewCreate()\"\n      ></kit-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #dropdownItem let-dataItem>\n  <div class=\"views-item\"\n       [ngClass]=\"dataItem.type\"\n       [class.active]=\"dataItem.title === selectedView()?.title && dataItem.type === selectedView()?.type\">\n    <kit-svg-icon class=\"view-icon\"\n                [icon]=\"dataItem.type === gridViewType.SYSTEM && kitSvgIcon.GLOBAL || kitSvgIcon.USER\"\n    ></kit-svg-icon>\n    <div class=\"item-name\">{{ dataItem.title | titlecase }}</div>\n    <kit-svg-icon class=\"check-icon\"\n                [icon]=\"kitSvgIcon.CHECK\"\n    ></kit-svg-icon>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex}.kit-grid-views .views-list{width:100%;min-width:0;margin-right:16px}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item.system .k-button .kit-button-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .views-list .views-item.system .k-button:hover .kit-button-icon{stroke:var(--ui-kit-color-main)}::ng-deep .views-list .views-item.user .k-button{color:var(--ui-kit-color-grey-10)}::ng-deep .views-list .views-item.user .k-button .kit-button-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .views-list .views-item.user .k-button:hover .kit-button-icon{fill:var(--ui-kit-color-main)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px;padding:24px;color:inherit}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .k-list-item:hover{background:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:14px;font-weight:400;line-height:20px;border-radius:4px;cursor:pointer}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system{color:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.system .view-icon{stroke:var(--ui-kit-color-blue);fill:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user{color:var(--ui-kit-color-grey-10)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user .view-icon{fill:var(--ui-kit-color-grey-12);stroke:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.user:hover .view-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active{background-color:var(--ui-kit-color-grey-13)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active .check-icon{display:block}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item.active.system .check-icon{stroke:var(--ui-kit-color-blue)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .item-name{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .check-icon{display:none;flex-shrink:0;width:14px;height:14px;fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .views-item .view-icon{width:16px;height:16px}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup .dropdown-footer{display:flex;flex-direction:column;gap:12px;padding-top:12px;margin-top:12px;border-top:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .k-no-data{display:none}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup:has(.k-no-data) .dropdown-footer{margin-top:0;padding-top:0;border:none}::ng-deep .grid-views-manager-dialog.kit-dialog .k-dialog-content{padding:24px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:column;gap:15px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-action{display:flex;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid var(--ui-kit-color-grey-11)}\n"] }]
+        }], ctorParameters: () => [{ type: i1$c.Store }, { type: i2$1.ActivatedRoute }, { type: i2$1.Router }, { type: i0.DestroyRef }, { type: i1$1.TitleCasePipe }, { type: KitDialogService }, { type: i1$a.TranslateService }, { type: i0.ViewContainerRef }], propDecorators: { viewChanged: [{
                 type: Output
             }] } });
@@ -7217,8 +7258,8 @@ class KitFilterSelectorComponent {
         this.searchTerm.set('');
         this.popup()?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterSelectorComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-selector\">\n  <kit-pill #toggleButton\n            [type]=\"kitPillType.DASHED\"\n            [selectable]=\"true\"\n            [selected]=\"popup.isPopupOpen\"\n            [icon]=\"kitSvgIcon.PLUS\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            (clicked)=\"popup.toggle()\">\n    {{ \"kit.filters.addNewFilter\" | translate }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-selector-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"filter-search\">\n      <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                   [size]=\"kitTextboxSize.SMALL\"\n                   [defaultValue]=\"searchTerm()\"\n                   (changed)=\"onSearchChange($event)\"\n      ></kit-textbox>\n    </div>\n    <div class=\"filter-items\">\n      @for (item of filterItems(); track item.field) {\n        <div class=\"filter-item\"\n             [class.disabled]=\"item.disabled\"\n             (click)=\"onItemClick(item)\">\n          {{ item.title | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterSelectorComponent, deps: [{ token: i1$a.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(--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$a.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,
@@ -7228,7 +7269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         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(--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 }] });
+        }], ctorParameters: () => [{ type: i1$a.TranslateService }] });
 class KitFilterCheckboxComponent {
     constructor() {
@@ -7306,7 +7347,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(--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 }); }
+    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$a.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,
@@ -7419,7 +7460,7 @@ class KitFilterDateComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"startDate()\"\n                      [max]=\"endDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"endDate()\"\n                      [min]=\"startDate()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"startDate()\"\n                      [max]=\"endDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"endDate()\"\n                      [min]=\"startDate()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterDateComponent, decorators: [{
             type: Component,
@@ -7564,8 +7605,8 @@ class KitFilterTextComponent {
     hasSelectedFilter(filter) {
         return this.hasNoValueRequiredOperator(filter.operator) || !!filter.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterTextComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterTextComponent, isStandalone: true, selector: "kit-filter-text", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-text-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"filterOperatorDropdownItems\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          <kit-textbox class=\"filter-item-value\"\n                       [size]=\"kitTextboxSize.SMALL\"\n                       [defaultValue]=\"item.value\"\n                       [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                       (changed)=\"onValueChange($event, $index)\"\n          ></kit-textbox>\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-text-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-text-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-text-popup .filter-item-value{flex:1}::ng-deep .kit-filter-text-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-text-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "size"], outputs: ["selected"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterTextComponent, deps: [{ token: i1$a.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitFilterTextComponent, isStandalone: true, selector: "kit-filter-text", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-text-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"filterOperatorDropdownItems\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          <kit-textbox class=\"filter-item-value\"\n                       [size]=\"kitTextboxSize.SMALL\"\n                       [defaultValue]=\"item.value\"\n                       [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                       (changed)=\"onValueChange($event, $index)\"\n          ></kit-textbox>\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-text-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-text-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-text-popup .filter-item-value{flex:1}::ng-deep .kit-filter-text-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-text-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "defaultValue", "messageIcon", "messageText", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitFilterTextComponent, decorators: [{
             type: Component,
@@ -7577,7 +7618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         ReactiveFormsModule,
                         KitPopupComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-text-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"filterOperatorDropdownItems\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          <kit-textbox class=\"filter-item-value\"\n                       [size]=\"kitTextboxSize.SMALL\"\n                       [defaultValue]=\"item.value\"\n                       [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                       (changed)=\"onValueChange($event, $index)\"\n          ></kit-textbox>\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-text-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-text-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-text-popup .filter-item-value{flex:1}::ng-deep .kit-filter-text-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-text-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$b.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$a.TranslateService }] });
 class KitGridFiltersComponent {
     constructor(store) {
@@ -7627,7 +7668,7 @@ class KitGridFiltersComponent {
     isFilterSelectorItemDisabled(item, filters) {
         return filters.some(filter => filter.field === item.field);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridFiltersComponent, deps: [{ token: i1$d.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridFiltersComponent, deps: [{ token: i1$c.Store }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridFiltersComponent, isStandalone: true, selector: "kit-grid-filters", inputs: { excludedColumns: { classPropertyName: "excludedColumns", publicName: "excludedColumns", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, checkboxConfig: { classPropertyName: "checkboxConfig", publicName: "checkboxConfig", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"checkboxConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"checkboxConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-text [filter]=\"item\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-text>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"], dependencies: [{ kind: "component", type: KitFilterSelectorComponent, selector: "kit-filter-selector", inputs: ["items"], outputs: ["itemSelected"] }, { kind: "component", type: KitFilterCheckboxComponent, selector: "kit-filter-checkbox", inputs: ["filter", "translateKeyPrefix", "items"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterDateComponent, selector: "kit-filter-date", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterTextComponent, selector: "kit-filter-text", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridFiltersComponent, decorators: [{
@@ -7638,7 +7679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitFilterDateComponent,
                         KitFilterTextComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"checkboxConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"checkboxConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-text [filter]=\"item\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-text>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$d.Store }] });
+        }], ctorParameters: () => [{ type: i1$c.Store }] });
 var GridExportOptions;
 (function (GridExportOptions) {
@@ -7710,12 +7751,12 @@ class KitGridCellService {
     getNestedGridCellValue(dataItem, field) {
         return field.split('.').reduce((acc, key) => acc && typeof acc === 'object' && key in acc && acc[key], dataItem) || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellService, deps: [{ token: i1$b.TranslateService }, { token: i1$1.DecimalPipe }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellService, deps: [{ token: i1$a.TranslateService }, { token: i1$1.DecimalPipe }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$b.TranslateService }, { type: i1$1.DecimalPipe }, { type: i1$1.DatePipe }] });
+        }], ctorParameters: () => [{ type: i1$a.TranslateService }, { type: i1$1.DecimalPipe }, { type: i1$1.DatePipe }] });
 class KitGridExportComponent {
     get visibleColumns() {
@@ -7872,8 +7913,8 @@ class KitGridExportComponent {
             ? `${indent}<${elementName}/>`
             : `${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\">{{ \"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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridExportComponent, deps: [{ token: i1$a.TranslateService }, { token: KitNotificationService }, { token: KitGridCellService }, { token: i1$c.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\">{{ \"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$a.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,
@@ -7884,14 +7925,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         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\">{{ \"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 }] });
+        }], ctorParameters: () => [{ type: i1$a.TranslateService }, { type: KitNotificationService }, { type: KitGridCellService }, { type: i1$c.Store }] });
 class KitGridCellComponent {
     constructor() {
         this.dateformat = KIT_DATE_FORMAT;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridCellComponent, isStandalone: true, selector: "kit-grid-cell", inputs: { column: "column", dataItem: "dataItem" }, ngImport: i0, template: "@switch (column.type) {\n  @case (\"boolean\") {\n    {{ dataItem[column.name] && \"common.yes\" || \"common.no\" | translate }}\n  }\n  @case (\"date\") {\n    {{ dataItem[column.name] | date: dateformat }}\n  }\n  @case (\"number\") {\n    {{ dataItem[column.name] | number }}\n  }\n  @default {\n    {{ dataItem[column.name] }}\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitGridModule }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitGridCellComponent, isStandalone: true, selector: "kit-grid-cell", inputs: { column: "column", dataItem: "dataItem" }, ngImport: i0, template: "@switch (column.type) {\n  @case (\"boolean\") {\n    {{ dataItem[column.name] && \"common.yes\" || \"common.no\" | translate }}\n  }\n  @case (\"date\") {\n    {{ dataItem[column.name] | date: dateformat }}\n  }\n  @case (\"number\") {\n    {{ dataItem[column.name] | number }}\n  }\n  @default {\n    {{ dataItem[column.name] }}\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: KitGridModule }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridCellComponent, decorators: [{
             type: Component,
@@ -7923,7 +7964,7 @@ class KitGridSearchComponent {
         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 }); }
+    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$a.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,
@@ -7967,7 +8008,10 @@ class KitGridColumnManagerComponent {
         this.store.dispatch([
             new SetGridSort(sort),
             new SetGridColumns(this.updatedColumns()),
-        ]);
+        ]).subscribe(() => {
+            this.hasUnsavedChanges.set(false);
+            this.close();
+        });
     }
     close() {
         this.kitDialogService.closeDialog();
@@ -7976,10 +8020,10 @@ class KitGridColumnManagerComponent {
         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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridColumnManagerComponent, deps: [{ token: KitDialogService }, { token: i1$c.Store }, { token: i1$a.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 }); }
+        ], 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$a.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,
@@ -7994,7 +8038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     ], 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 }] });
+        }], ctorParameters: () => [{ type: KitDialogService }, { type: i1$c.Store }, { type: i1$a.TranslateService }, { type: i0.ViewContainerRef }] });
 // KitButton
@@ -8002,5 +8046,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
  * 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, 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 };
+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, KitDropdownItemTemplateDirective, 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