@indigina/ui-kit 1.1.372 → 1.1.374

package/fesm2022/indigina-ui-kit.mjs

@@ -3,7 +3,7 @@ import { NgClass, NgTemplateOutlet, CommonModule, AsyncPipe, DatePipe, TitleCase
 import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, InjectionToken, inject, Injectable, effect, ElementRef, NgZone, Renderer2, Directive, model, output, viewChild, forwardRef, ViewChild, signal, HostListener, TemplateRef, ContentChild, computed, NgModule, RendererFactory2, DOCUMENT, ViewContainerRef, DestroyRef, contentChildren, ContentChildren, viewChildren, contentChild, Pipe, Injector, runInInjectionContext } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-buttons';
-import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
+import { ButtonModule, ButtonGroupModule, KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { map, catchError, EMPTY, forkJoin, BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, combineLatest, tap, debounceTime, distinctUntilChanged, take, switchMap, of } from 'rxjs';
 import * as i1$1 from '@progress/kendo-angular-label';
@@ -35,7 +35,7 @@ import { UploadModule } from '@progress/kendo-angular-upload';
 import { takeUntilDestroyed, toSignal, toObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import initials from 'initials';
 import * as i1$b from '@progress/kendo-angular-layout';
-import { KENDO_LAYOUT, TileLayoutModule } from '@progress/kendo-angular-layout';
+import { KENDO_LAYOUT, TileLayoutModule, DrawerComponent } from '@progress/kendo-angular-layout';
 import * as i1$c from '@progress/kendo-angular-grid';
 import { GridModule, ExcelModule, PDFModule, GridComponent } from '@progress/kendo-angular-grid';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -2104,6 +2104,7 @@ class KitAutocompleteComponent {
          * Specifies whether the autocomplete popup will be closed if no filter data found
          */
         this.closePopupIfDataNotFound = input(false, ...(ngDevMode ? [{ debugName: "closePopupIfDataNotFound" }] : []));
+        this.appendTo = input('component', ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
         /**
          * An action which is emitted each time the user types in the input field
          */
@@ -2128,10 +2129,10 @@ class KitAutocompleteComponent {
         /**
          * Settings for popup that will be opened as dropdown options list
          */
-        this.dropdownPopupSettings = {
-            appendTo: 'component',
+        this.dropdownPopupSettings = computed(() => ({
+            appendTo: this.appendTo(),
             popupClass: 'kit-autocomplete-popup',
-        };
+        }), ...(ngDevMode ? [{ debugName: "dropdownPopupSettings" }] : []));
         /**
          * Function that should be called every time the form control value changes
          */
@@ -2205,11 +2206,11 @@ class KitAutocompleteComponent {
         this.disabled.set(disabled);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitAutocompleteComponent, isStandalone: true, selector: "kit-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loaderVisible: { classPropertyName: "loaderVisible", publicName: "loaderVisible", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, allowCustom: { classPropertyName: "allowCustom", publicName: "allowCustom", isSignal: true, isRequired: false, transformFunction: null }, closePopupIfDataNotFound: { classPropertyName: "closePopupIfDataNotFound", publicName: "closePopupIfDataNotFound", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", disabled: "disabledChange", filterChanged: "filterChanged", valueChanged: "valueChanged", selectionChanged: "selectionChanged", blured: "blured", focused: "focused" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitAutocompleteComponent, isStandalone: true, selector: "kit-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loaderVisible: { classPropertyName: "loaderVisible", publicName: "loaderVisible", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, allowCustom: { classPropertyName: "allowCustom", publicName: "allowCustom", isSignal: true, isRequired: false, transformFunction: null }, closePopupIfDataNotFound: { classPropertyName: "closePopupIfDataNotFound", publicName: "closePopupIfDataNotFound", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValue: "selectedValueChange", disabled: "disabledChange", filterChanged: "filterChanged", valueChanged: "valueChanged", selectionChanged: "selectionChanged", blured: "blured", focused: "focused" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => KitAutocompleteComponent),
                 multi: true,
-            }], viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: "<div class=\"kit-autocomplete\"\n     [class.empty]=\"!items() || !items().length\"\n     [class.disabled]=\"disabled()\"\n     [class.loading]=\"loaderVisible()\"\n     [class.invalid]=\"invalid()\">\n  @if (label()) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label()\"\n                     [for]=\"$any(combobox)\"\n    ></kit-input-label>\n  }\n  <div class=\"autocomplete-wrap\">\n    <kendo-combobox #combobox\n                    textField=\"text\"\n                    valueField=\"value\"\n                    kendoDropDownFilter\n                    [data]=\"items()\"\n                    [placeholder]=\"placeholder()\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [disabled]=\"disabled()\"\n                    [clearButton]=\"false\"\n                    [value]=\"selectedValue()\"\n                    [allowCustom]=\"allowCustom()\"\n                    [popupSettings]=\"dropdownPopupSettings\"\n                    [suggest]=\"true\"\n                    (focus)=\"onFocus()\"\n                    (blur)=\"onBlur()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                    (valueChange)=\"onValueChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\">\n      <ng-template kendoComboBoxHeaderTemplate>\n        @if (loaderVisible()) {\n          <kit-loader class=\"popup-loader\"\n          ></kit-loader>\n        }\n      </ng-template>\n      <ng-template kendoComboBoxItemTemplate\n                   let-item>\n        <span class=\"template\">{{ getOptionText(item) }}</span>\n      </ng-template>\n    </kendo-combobox>\n    <kit-svg-icon class=\"input-icon\"\n                  icon=\"search\"\n    ></kit-svg-icon>\n  </div>\n  @if (messageText()) {\n    <kit-input-message [icon]=\"messageIcon()\"\n                       [message]=\"messageText()\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete:hover .k-combobox{border-color:var(--ui-kit-color-hover)}.kit-autocomplete .k-combobox{height:40px;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-autocomplete .k-combobox.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-autocomplete .k-combobox.k-focus+.input-icon{stroke:var(--ui-kit-color-main)}.kit-autocomplete .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-autocomplete .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-autocomplete .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:0;padding:0 12px 0 8px;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.disabled .k-combobox{border-color:var(--ui-kit-color-grey-12)}.kit-autocomplete.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-autocomplete.disabled .input-icon{stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.empty .kit-autocomplete-popup{display:none}.kit-autocomplete.loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.invalid .k-combobox{border-color:var(--ui-kit-color-red-1)}.kit-autocomplete.invalid .input-icon{stroke:var(--ui-kit-color-red-1)}.kit-autocomplete .kit-autocomplete-popup{margin-top:10px;padding:8px;width:296px;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-autocomplete .kit-autocomplete-popup .k-list-item{padding:6px 12px;font-size:14px;font-weight:400;line-height:1.26;box-shadow:none;border-radius:4px;background-color:var(--ui-kit-color-white);color:var(--ui-kit-color-grey-10)}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i1$3.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i1$3.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$3.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$3.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitLoaderComponent, selector: "kit-loader" }, { 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 }); }
+            }], viewQueries: [{ propertyName: "combobox", first: true, predicate: ["combobox"], descendants: true }], ngImport: i0, template: "<div class=\"kit-autocomplete\"\n     [class.empty]=\"!items() || !items().length\"\n     [class.disabled]=\"disabled()\"\n     [class.loading]=\"loaderVisible()\"\n     [class.invalid]=\"invalid()\">\n  @if (label()) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label()\"\n                     [for]=\"$any(combobox)\"\n    ></kit-input-label>\n  }\n  <div class=\"autocomplete-wrap\">\n    <kendo-combobox #combobox\n                    textField=\"text\"\n                    valueField=\"value\"\n                    kendoDropDownFilter\n                    [data]=\"items()\"\n                    [placeholder]=\"placeholder()\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [disabled]=\"disabled()\"\n                    [clearButton]=\"false\"\n                    [value]=\"selectedValue()\"\n                    [allowCustom]=\"allowCustom()\"\n                    [popupSettings]=\"dropdownPopupSettings()\"\n                    [suggest]=\"true\"\n                    (focus)=\"onFocus()\"\n                    (blur)=\"onBlur()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                    (valueChange)=\"onValueChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\">\n      <ng-template kendoComboBoxHeaderTemplate>\n        @if (loaderVisible()) {\n          <kit-loader class=\"popup-loader\"\n          ></kit-loader>\n        }\n      </ng-template>\n      <ng-template kendoComboBoxItemTemplate\n                   let-item>\n        <span class=\"template\">{{ getOptionText(item) }}</span>\n      </ng-template>\n    </kendo-combobox>\n    <kit-svg-icon class=\"input-icon\"\n                  icon=\"search\"\n    ></kit-svg-icon>\n  </div>\n  @if (messageText()) {\n    <kit-input-message [icon]=\"messageIcon()\"\n                       [message]=\"messageText()\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete:hover .k-combobox{border-color:var(--ui-kit-color-hover)}.kit-autocomplete .k-combobox{height:40px;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-autocomplete .k-combobox.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-autocomplete .k-combobox.k-focus+.input-icon{stroke:var(--ui-kit-color-main)}.kit-autocomplete .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-autocomplete .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-autocomplete .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:0;padding:0 12px 0 8px;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.disabled .k-combobox{border-color:var(--ui-kit-color-grey-12)}.kit-autocomplete.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-autocomplete.disabled .input-icon{stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.empty .kit-autocomplete-popup{display:none}.kit-autocomplete.loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.invalid .k-combobox{border-color:var(--ui-kit-color-red-1)}.kit-autocomplete.invalid .input-icon{stroke:var(--ui-kit-color-red-1)}.kit-autocomplete .kit-autocomplete-popup{margin-top:10px;padding:8px;width:296px;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-autocomplete .kit-autocomplete-popup .k-list-item{padding:6px 12px;font-size:14px;font-weight:400;line-height:1.26;box-shadow:none;border-radius:4px;background-color:var(--ui-kit-color-white);color:var(--ui-kit-color-grey-10)}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i1$3.HeaderTemplateDirective, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]" }, { kind: "directive", type: i1$3.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$3.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$3.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitLoaderComponent, selector: "kit-loader" }, { 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: "20.3.15", ngImport: i0, type: KitAutocompleteComponent, decorators: [{
             type: Component,
@@ -2226,8 +2227,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         KitLoaderComponent,
                         KitSvgIconComponent,
                         KitInputLabelComponent,
-                    ], template: "<div class=\"kit-autocomplete\"\n     [class.empty]=\"!items() || !items().length\"\n     [class.disabled]=\"disabled()\"\n     [class.loading]=\"loaderVisible()\"\n     [class.invalid]=\"invalid()\">\n  @if (label()) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label()\"\n                     [for]=\"$any(combobox)\"\n    ></kit-input-label>\n  }\n  <div class=\"autocomplete-wrap\">\n    <kendo-combobox #combobox\n                    textField=\"text\"\n                    valueField=\"value\"\n                    kendoDropDownFilter\n                    [data]=\"items()\"\n                    [placeholder]=\"placeholder()\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [disabled]=\"disabled()\"\n                    [clearButton]=\"false\"\n                    [value]=\"selectedValue()\"\n                    [allowCustom]=\"allowCustom()\"\n                    [popupSettings]=\"dropdownPopupSettings\"\n                    [suggest]=\"true\"\n                    (focus)=\"onFocus()\"\n                    (blur)=\"onBlur()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                    (valueChange)=\"onValueChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\">\n      <ng-template kendoComboBoxHeaderTemplate>\n        @if (loaderVisible()) {\n          <kit-loader class=\"popup-loader\"\n          ></kit-loader>\n        }\n      </ng-template>\n      <ng-template kendoComboBoxItemTemplate\n                   let-item>\n        <span class=\"template\">{{ getOptionText(item) }}</span>\n      </ng-template>\n    </kendo-combobox>\n    <kit-svg-icon class=\"input-icon\"\n                  icon=\"search\"\n    ></kit-svg-icon>\n  </div>\n  @if (messageText()) {\n    <kit-input-message [icon]=\"messageIcon()\"\n                       [message]=\"messageText()\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete:hover .k-combobox{border-color:var(--ui-kit-color-hover)}.kit-autocomplete .k-combobox{height:40px;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-autocomplete .k-combobox.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-autocomplete .k-combobox.k-focus+.input-icon{stroke:var(--ui-kit-color-main)}.kit-autocomplete .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-autocomplete .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-autocomplete .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:0;padding:0 12px 0 8px;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.disabled .k-combobox{border-color:var(--ui-kit-color-grey-12)}.kit-autocomplete.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-autocomplete.disabled .input-icon{stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.empty .kit-autocomplete-popup{display:none}.kit-autocomplete.loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.invalid .k-combobox{border-color:var(--ui-kit-color-red-1)}.kit-autocomplete.invalid .input-icon{stroke:var(--ui-kit-color-red-1)}.kit-autocomplete .kit-autocomplete-popup{margin-top:10px;padding:8px;width:296px;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-autocomplete .kit-autocomplete-popup .k-list-item{padding:6px 12px;font-size:14px;font-weight:400;line-height:1.26;box-shadow:none;border-radius:4px;background-color:var(--ui-kit-color-white);color:var(--ui-kit-color-grey-10)}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{color:var(--ui-kit-color-main)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], loaderVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "loaderVisible", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], closePopupIfDataNotFound: [{ type: i0.Input, args: [{ isSignal: true, alias: "closePopupIfDataNotFound", required: false }] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], blured: [{ type: i0.Output, args: ["blured"] }], focused: [{ type: i0.Output, args: ["focused"] }], combobox: [{
+                    ], template: "<div class=\"kit-autocomplete\"\n     [class.empty]=\"!items() || !items().length\"\n     [class.disabled]=\"disabled()\"\n     [class.loading]=\"loaderVisible()\"\n     [class.invalid]=\"invalid()\">\n  @if (label()) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label()\"\n                     [for]=\"$any(combobox)\"\n    ></kit-input-label>\n  }\n  <div class=\"autocomplete-wrap\">\n    <kendo-combobox #combobox\n                    textField=\"text\"\n                    valueField=\"value\"\n                    kendoDropDownFilter\n                    [data]=\"items()\"\n                    [placeholder]=\"placeholder()\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [disabled]=\"disabled()\"\n                    [clearButton]=\"false\"\n                    [value]=\"selectedValue()\"\n                    [allowCustom]=\"allowCustom()\"\n                    [popupSettings]=\"dropdownPopupSettings()\"\n                    [suggest]=\"true\"\n                    (focus)=\"onFocus()\"\n                    (blur)=\"onBlur()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                    (valueChange)=\"onValueChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\">\n      <ng-template kendoComboBoxHeaderTemplate>\n        @if (loaderVisible()) {\n          <kit-loader class=\"popup-loader\"\n          ></kit-loader>\n        }\n      </ng-template>\n      <ng-template kendoComboBoxItemTemplate\n                   let-item>\n        <span class=\"template\">{{ getOptionText(item) }}</span>\n      </ng-template>\n    </kendo-combobox>\n    <kit-svg-icon class=\"input-icon\"\n                  icon=\"search\"\n    ></kit-svg-icon>\n  </div>\n  @if (messageText()) {\n    <kit-input-message [icon]=\"messageIcon()\"\n                       [message]=\"messageText()\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-autocomplete .label{display:block;margin-bottom:4px}.kit-autocomplete .autocomplete-wrap{position:relative;display:flex;align-items:center}.kit-autocomplete .k-input-button{display:none}.kit-autocomplete:hover .k-combobox{border-color:var(--ui-kit-color-hover)}.kit-autocomplete .k-combobox{height:40px;font-size:14px;font-weight:400;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background-color:var(--ui-kit-color-white)}.kit-autocomplete .k-combobox.k-focus{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-autocomplete .k-combobox.k-focus+.input-icon{stroke:var(--ui-kit-color-main)}.kit-autocomplete .k-input-inner{padding:0 36px 0 12px;color:var(--ui-kit-color-grey-10);line-height:1}.kit-autocomplete .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-autocomplete .k-input-inner::selection{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-autocomplete .popup-loader{height:100%}.kit-autocomplete .kit-loader,.kit-autocomplete .kit-loader>div{height:100%}.kit-autocomplete .kit-loader .circle{box-sizing:content-box}.kit-autocomplete .input-icon{position:absolute;right:0;padding:0 12px 0 8px;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.disabled .k-combobox{border-color:var(--ui-kit-color-grey-12)}.kit-autocomplete.disabled .k-input-inner{color:var(--ui-kit-color-grey-12);background-color:var(--ui-kit-color-grey-13)}.kit-autocomplete.disabled .input-icon{stroke:var(--ui-kit-color-grey-12)}.kit-autocomplete.empty .kit-autocomplete-popup{display:none}.kit-autocomplete.loading .kit-autocomplete-popup{display:block;height:200px}.kit-autocomplete.loading .kit-autocomplete-popup .k-no-data,.kit-autocomplete.loading .kit-autocomplete-popup .k-list{display:none}.kit-autocomplete.invalid .k-combobox{border-color:var(--ui-kit-color-red-1)}.kit-autocomplete.invalid .input-icon{stroke:var(--ui-kit-color-red-1)}.kit-autocomplete .kit-autocomplete-popup{margin-top:10px;padding:8px;width:296px;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-autocomplete .kit-autocomplete-popup .k-list-item{padding:6px 12px;font-size:14px;font-weight:400;line-height:1.26;box-shadow:none;border-radius:4px;background-color:var(--ui-kit-color-white);color:var(--ui-kit-color-grey-10)}.kit-autocomplete .kit-autocomplete-popup .k-list-item:hover{color:var(--ui-kit-color-main)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }, { type: i0.Output, args: ["selectedValueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], loaderVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "loaderVisible", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], messageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageText", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], allowCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustom", required: false }] }], closePopupIfDataNotFound: [{ type: i0.Input, args: [{ isSignal: true, alias: "closePopupIfDataNotFound", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], blured: [{ type: i0.Output, args: ["blured"] }], focused: [{ type: i0.Output, args: ["focused"] }], combobox: [{
                 type: ViewChild,
                 args: ['combobox']
             }] } });
@@ -5557,6 +5558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 var KitEntitySectionEditableMode;
 (function (KitEntitySectionEditableMode) {
+    KitEntitySectionEditableMode["Add"] = "add";
     KitEntitySectionEditableMode["View"] = "view";
     KitEntitySectionEditableMode["Edit"] = "edit";
 })(KitEntitySectionEditableMode || (KitEntitySectionEditableMode = {}));
@@ -5595,6 +5597,7 @@ class KitEntitySectionEditableComponent {
         this.saveButtonClicked = output();
         this.viewTemplate = contentChild(KitEntitySectionEditableViewTemplateDirective, ...(ngDevMode ? [{ debugName: "viewTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
         this.editTemplate = contentChild(KitEntitySectionEditableEditTemplateDirective, ...(ngDevMode ? [{ debugName: "editTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.isAddMode = computed(() => this.mode() === KitEntitySectionEditableMode.Add, ...(ngDevMode ? [{ debugName: "isAddMode" }] : []));
         this.isViewMode = computed(() => this.mode() === KitEntitySectionEditableMode.View, ...(ngDevMode ? [{ debugName: "isViewMode" }] : []));
         this.isEditMode = computed(() => this.mode() === KitEntitySectionEditableMode.Edit, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
         this.kitButtonKind = KitButtonKind;
@@ -5602,12 +5605,14 @@ class KitEntitySectionEditableComponent {
         this.kitButtonIconPosition = KitButtonIconPosition;
         this.kitSvgIcon = KitSvgIcon;
         this.kitSvgIconType = KitSvgIconType;
+        this.previousMode = signal(KitEntitySectionEditableMode.View, ...(ngDevMode ? [{ debugName: "previousMode" }] : []));
     }
     onEditClick() {
+        this.previousMode.set(this.mode());
         this.mode.set(KitEntitySectionEditableMode.Edit);
     }
     onCancelClick() {
-        this.mode.set(KitEntitySectionEditableMode.View);
+        this.mode.set(this.previousMode());
     }
     onSaveClick() {
         if (this.changeModeOnSave()) {
@@ -5616,7 +5621,7 @@ class KitEntitySectionEditableComponent {
         this.saveButtonClicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitEntitySectionEditableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitEntitySectionEditableComponent, isStandalone: true, selector: "kit-entity-section-editable", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, editButtonDisabled: { classPropertyName: "editButtonDisabled", publicName: "editButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, saveButtonDisabled: { classPropertyName: "saveButtonDisabled", publicName: "saveButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, hasCancelButton: { classPropertyName: "hasCancelButton", publicName: "hasCancelButton", isSignal: true, isRequired: false, transformFunction: null }, changeModeOnSave: { classPropertyName: "changeModeOnSave", publicName: "changeModeOnSave", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange", saveButtonClicked: "saveButtonClicked" }, queries: [{ propertyName: "viewTemplate", first: true, predicate: KitEntitySectionEditableViewTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "editTemplate", first: true, predicate: KitEntitySectionEditableEditTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<kit-entity-section class=\"kit-entity-section-editable\"\n                    [class.editing]=\"isEditMode()\">\n  <div header>\n    <div class=\"kit-entity-section-editable-header\">\n      <div class=\"kit-entity-section-editable-title\">\n        <ng-content select=\"[title]\"></ng-content>\n      </div>\n      @if (hasActions()) {\n        <div class=\"kit-entity-section-editable-actions\">\n          @if (isViewMode()) {\n            <kit-button [label]=\"'kit.entitySectionEditable.edit' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.EDIT\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [disabled]=\"editButtonDisabled()\"\n                        (clicked)=\"onEditClick()\"\n            ></kit-button>\n          }\n          @if (isEditMode()) {\n            @if (hasCancelButton()) {\n              <kit-button [label]=\"'kit.entitySectionEditable.cancel' | translate\"\n                          [kind]=\"kitButtonKind.SMALL\"\n                          [type]=\"kitButtonType.GHOST\"\n                          [icon]=\"kitSvgIcon.CROSS\"\n                          [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                          (clicked)=\"onCancelClick()\"\n              ></kit-button>\n            }\n            <kit-button [label]=\"'kit.entitySectionEditable.save' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.DISKETTE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [disabled]=\"saveButtonDisabled()\"\n                        (clicked)=\"onSaveClick()\"\n            ></kit-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  <div content\n       class=\"kit-entity-section-editable-content\"\n       [class.loading]=\"isLoading()\">\n    @if (isViewMode()) {\n      <ng-container *ngTemplateOutlet=\"viewTemplate()\" />\n    }\n    @if (isEditMode()) {\n      <ng-container *ngTemplateOutlet=\"editTemplate()\" />\n    }\n  </div>\n</kit-entity-section>\n", styles: [".kit-entity-section-editable-header{display:flex;align-items:center;justify-content:space-between}.kit-entity-section-editable-actions{display:flex;align-items:center;gap:10px}.kit-entity-section-editable.editing ::ng-deep .kit-entity-section{border-color:var(--ui-kit-color-main)}.kit-entity-section-editable-content.loading{pointer-events:none;opacity:.6;filter:blur(3px)}\n"], dependencies: [{ kind: "component", type: KitEntitySectionComponent, selector: "kit-entity-section" }, { 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitEntitySectionEditableComponent, isStandalone: true, selector: "kit-entity-section-editable", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, editButtonDisabled: { classPropertyName: "editButtonDisabled", publicName: "editButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, saveButtonDisabled: { classPropertyName: "saveButtonDisabled", publicName: "saveButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, hasCancelButton: { classPropertyName: "hasCancelButton", publicName: "hasCancelButton", isSignal: true, isRequired: false, transformFunction: null }, changeModeOnSave: { classPropertyName: "changeModeOnSave", publicName: "changeModeOnSave", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mode: "modeChange", saveButtonClicked: "saveButtonClicked" }, queries: [{ propertyName: "viewTemplate", first: true, predicate: KitEntitySectionEditableViewTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "editTemplate", first: true, predicate: KitEntitySectionEditableEditTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<kit-entity-section class=\"kit-entity-section-editable\"\n                    [class.editing]=\"isEditMode()\">\n  <div header>\n    <div class=\"kit-entity-section-editable-header\">\n      <div class=\"kit-entity-section-editable-title\">\n        <ng-content select=\"[title]\"></ng-content>\n      </div>\n      @if (hasActions()) {\n        <div class=\"kit-entity-section-editable-actions\">\n          @if (isAddMode()) {\n            <kit-button [label]=\"'kit.entitySectionEditable.add' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.PLUS\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [disabled]=\"editButtonDisabled()\"\n                        (clicked)=\"onEditClick()\"\n            ></kit-button>\n          }\n          @if (isViewMode()) {\n            <kit-button [label]=\"'kit.entitySectionEditable.edit' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.EDIT\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [disabled]=\"editButtonDisabled()\"\n                        (clicked)=\"onEditClick()\"\n            ></kit-button>\n          }\n          @if (isEditMode()) {\n            @if (hasCancelButton()) {\n              <kit-button [label]=\"'kit.entitySectionEditable.cancel' | translate\"\n                          [kind]=\"kitButtonKind.SMALL\"\n                          [type]=\"kitButtonType.GHOST\"\n                          [icon]=\"kitSvgIcon.CROSS\"\n                          [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                          (clicked)=\"onCancelClick()\"\n              ></kit-button>\n            }\n            <kit-button [label]=\"'kit.entitySectionEditable.save' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.DISKETTE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [disabled]=\"saveButtonDisabled()\"\n                        (clicked)=\"onSaveClick()\"\n            ></kit-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  <div content\n       class=\"kit-entity-section-editable-content\"\n       [class.loading]=\"isLoading()\">\n    @if (isAddMode() || isViewMode()) {\n      <ng-container *ngTemplateOutlet=\"viewTemplate()\" />\n    }\n    @if (isEditMode()) {\n      <ng-container *ngTemplateOutlet=\"editTemplate()\" />\n    }\n  </div>\n</kit-entity-section>\n", styles: [".kit-entity-section-editable-header{display:flex;align-items:center;justify-content:space-between}.kit-entity-section-editable-actions{display:flex;align-items:center;gap:10px}.kit-entity-section-editable.editing ::ng-deep .kit-entity-section{border-color:var(--ui-kit-color-main)}.kit-entity-section-editable-content.loading{pointer-events:none;opacity:.6;filter:blur(3px)}\n"], dependencies: [{ kind: "component", type: KitEntitySectionComponent, selector: "kit-entity-section" }, { 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitEntitySectionEditableComponent, decorators: [{
             type: Component,
@@ -5625,7 +5630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         KitButtonComponent,
                         TranslatePipe,
                         NgTemplateOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-entity-section class=\"kit-entity-section-editable\"\n                    [class.editing]=\"isEditMode()\">\n  <div header>\n    <div class=\"kit-entity-section-editable-header\">\n      <div class=\"kit-entity-section-editable-title\">\n        <ng-content select=\"[title]\"></ng-content>\n      </div>\n      @if (hasActions()) {\n        <div class=\"kit-entity-section-editable-actions\">\n          @if (isViewMode()) {\n            <kit-button [label]=\"'kit.entitySectionEditable.edit' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.EDIT\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [disabled]=\"editButtonDisabled()\"\n                        (clicked)=\"onEditClick()\"\n            ></kit-button>\n          }\n          @if (isEditMode()) {\n            @if (hasCancelButton()) {\n              <kit-button [label]=\"'kit.entitySectionEditable.cancel' | translate\"\n                          [kind]=\"kitButtonKind.SMALL\"\n                          [type]=\"kitButtonType.GHOST\"\n                          [icon]=\"kitSvgIcon.CROSS\"\n                          [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                          (clicked)=\"onCancelClick()\"\n              ></kit-button>\n            }\n            <kit-button [label]=\"'kit.entitySectionEditable.save' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.DISKETTE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [disabled]=\"saveButtonDisabled()\"\n                        (clicked)=\"onSaveClick()\"\n            ></kit-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  <div content\n       class=\"kit-entity-section-editable-content\"\n       [class.loading]=\"isLoading()\">\n    @if (isViewMode()) {\n      <ng-container *ngTemplateOutlet=\"viewTemplate()\" />\n    }\n    @if (isEditMode()) {\n      <ng-container *ngTemplateOutlet=\"editTemplate()\" />\n    }\n  </div>\n</kit-entity-section>\n", styles: [".kit-entity-section-editable-header{display:flex;align-items:center;justify-content:space-between}.kit-entity-section-editable-actions{display:flex;align-items:center;gap:10px}.kit-entity-section-editable.editing ::ng-deep .kit-entity-section{border-color:var(--ui-kit-color-main)}.kit-entity-section-editable-content.loading{pointer-events:none;opacity:.6;filter:blur(3px)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-entity-section class=\"kit-entity-section-editable\"\n                    [class.editing]=\"isEditMode()\">\n  <div header>\n    <div class=\"kit-entity-section-editable-header\">\n      <div class=\"kit-entity-section-editable-title\">\n        <ng-content select=\"[title]\"></ng-content>\n      </div>\n      @if (hasActions()) {\n        <div class=\"kit-entity-section-editable-actions\">\n          @if (isAddMode()) {\n            <kit-button [label]=\"'kit.entitySectionEditable.add' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.PLUS\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [disabled]=\"editButtonDisabled()\"\n                        (clicked)=\"onEditClick()\"\n            ></kit-button>\n          }\n          @if (isViewMode()) {\n            <kit-button [label]=\"'kit.entitySectionEditable.edit' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.EDIT\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [iconType]=\"kitSvgIconType.STROKE\"\n                        [disabled]=\"editButtonDisabled()\"\n                        (clicked)=\"onEditClick()\"\n            ></kit-button>\n          }\n          @if (isEditMode()) {\n            @if (hasCancelButton()) {\n              <kit-button [label]=\"'kit.entitySectionEditable.cancel' | translate\"\n                          [kind]=\"kitButtonKind.SMALL\"\n                          [type]=\"kitButtonType.GHOST\"\n                          [icon]=\"kitSvgIcon.CROSS\"\n                          [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                          (clicked)=\"onCancelClick()\"\n              ></kit-button>\n            }\n            <kit-button [label]=\"'kit.entitySectionEditable.save' | translate\"\n                        [kind]=\"kitButtonKind.SMALL\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"kitSvgIcon.DISKETTE\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [disabled]=\"saveButtonDisabled()\"\n                        (clicked)=\"onSaveClick()\"\n            ></kit-button>\n          }\n        </div>\n      }\n    </div>\n  </div>\n  <div content\n       class=\"kit-entity-section-editable-content\"\n       [class.loading]=\"isLoading()\">\n    @if (isAddMode() || isViewMode()) {\n      <ng-container *ngTemplateOutlet=\"viewTemplate()\" />\n    }\n    @if (isEditMode()) {\n      <ng-container *ngTemplateOutlet=\"editTemplate()\" />\n    }\n  </div>\n</kit-entity-section>\n", styles: [".kit-entity-section-editable-header{display:flex;align-items:center;justify-content:space-between}.kit-entity-section-editable-actions{display:flex;align-items:center;gap:10px}.kit-entity-section-editable.editing ::ng-deep .kit-entity-section{border-color:var(--ui-kit-color-main)}.kit-entity-section-editable-content.loading{pointer-events:none;opacity:.6;filter:blur(3px)}\n"] }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }, { type: i0.Output, args: ["modeChange"] }], hasActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasActions", required: false }] }], editButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "editButtonDisabled", required: false }] }], saveButtonDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveButtonDisabled", required: false }] }], hasCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasCancelButton", required: false }] }], changeModeOnSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeModeOnSave", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], saveButtonClicked: [{ type: i0.Output, args: ["saveButtonClicked"] }], viewTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitEntitySectionEditableViewTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], editTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitEntitySectionEditableEditTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 class KitEntitySectionContainerComponent {
@@ -6797,6 +6802,7 @@ const kitTranslations = {
                 deleteConfirmation: 'Are you sure you want to permanently delete',
             },
             entitySectionEditable: {
+                add: 'Add',
                 edit: 'Edit',
                 save: 'Save',
                 cancel: 'Cancel',
@@ -6953,6 +6959,7 @@ const kitTranslations = {
                 deleteConfirmation: 'Вы уверены, что хотите удалить',
             },
             entitySectionEditable: {
+                add: 'Добавить',
                 edit: 'Редактировать',
                 save: 'Сохранить',
                 cancel: 'Отмена',
@@ -7826,7 +7833,7 @@ class KitGridViewsSaveComponent {
         this.viewName.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridViewsSaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resetQueryParams: "resetQueryParams" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? ('kit.views.saveView' | translate) : ('kit.views.noUnsavedChanges' | translate)\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [type]=\"kitButtonType.GHOST\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          [anchor]=\"anchor()\"\n          [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"grid-views-save\">\n    <kit-autocomplete class=\"grid-views-save-input\"\n                      [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    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!viewName() || !isViewNameValid || isViewSaving()\"\n                (clicked)=\"onViewSave()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".grid-views-save{display:flex;flex-direction:row;gap:12px;width:352px}.grid-views-save-input{flex:1}\n"], dependencies: [{ 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", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["selectedValueChange", "disabledChange", "filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$d.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resetQueryParams: "resetQueryParams" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? ('kit.views.saveView' | translate) : ('kit.views.noUnsavedChanges' | translate)\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [type]=\"kitButtonType.GHOST\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          [anchor]=\"anchor()\"\n          [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"grid-views-save\">\n    <kit-autocomplete class=\"grid-views-save-input\"\n                      [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    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!viewName() || !isViewNameValid || isViewSaving()\"\n                (clicked)=\"onViewSave()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".grid-views-save{display:flex;flex-direction:row;gap:12px;width:352px}.grid-views-save-input{flex:1}\n"], dependencies: [{ 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", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound", "appendTo"], outputs: ["selectedValueChange", "disabledChange", "filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$d.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitGridViewsSaveComponent, decorators: [{
             type: Component,
@@ -11340,11 +11347,59 @@ var KitApiTokensPermissionCategories;
     KitApiTokensPermissionCategories["ApiTokens"] = "ApiTokens";
 })(KitApiTokensPermissionCategories || (KitApiTokensPermissionCategories = {}));
 
+class KitDrawerContentTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitDrawerContentTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: KitDrawerContentTemplateDirective, isStandalone: true, selector: "[kitDrawerContentTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitDrawerContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kitDrawerContentTemplate]',
+                }]
+        }] });
+
+class KitDrawerFooterTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitDrawerFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: KitDrawerFooterTemplateDirective, isStandalone: true, selector: "[kitDrawerFooterTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitDrawerFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kitDrawerFooterTemplate]',
+                }]
+        }] });
+
+class KitDrawerComponent {
+    constructor() {
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.width = input(450, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.drawer = viewChild.required(DrawerComponent);
+        this.contentTemplate = contentChild(KitDrawerContentTemplateDirective, ...(ngDevMode ? [{ debugName: "contentTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.footerTemplate = contentChild(KitDrawerFooterTemplateDirective, ...(ngDevMode ? [{ debugName: "footerTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitButtonType = KitButtonType;
+        this.kitButtonKind = KitButtonKind;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: KitDrawerComponent, isStandalone: true, selector: "kit-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentTemplate", first: true, predicate: KitDrawerContentTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: KitDrawerFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: DrawerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-drawer-container>\n  <kendo-drawer #drawer\n                class=\"kit-drawer\"\n                mode=\"overlay\"\n                position=\"end\"\n                [width]=\"width()\"\n                [(expanded)]=\"drawer.expanded\">\n    <ng-template kendoDrawerTemplate>\n      <div class=\"kit-drawer-header\">\n        <kit-entity-title class=\"title\">{{ title() }}</kit-entity-title>\n        <kit-button [icon]=\"kitSvgIcon.CROSS\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    (clicked)=\"drawer.toggle()\" />\n      </div>\n\n      <div class=\"kit-drawer-content\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate()\"></ng-container>\n      </div>\n\n      @if (footerTemplate(); as template) {\n        <div class=\"kit-drawer-footer\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n      }\n    </ng-template>\n  </kendo-drawer>\n</kendo-drawer-container>\n", styles: [".kit-drawer-header{background-color:var(--ui-kit-color-grey-13);border-bottom:1px solid var(--ui-kit-color-grey-3);min-height:var(--ui-kit-header-height);padding:28px 24px;display:flex;align-items:center;justify-content:space-between}.kit-drawer-content{padding:32px 24px;flex:1;overflow:auto}.kit-drawer-footer{background-color:var(--ui-kit-color-grey-13);border-top:1px solid var(--ui-kit-color-grey-3);padding:16px 24px}.kit-drawer ::ng-deep .k-drawer-wrapper{height:100%;display:flex;flex-direction:column;justify-content:space-between}.kit-drawer ::ng-deep-header .title .kit-entity-title{font-size:18px;line-height:20px}\n"], dependencies: [{ kind: "component", type: i1$b.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { kind: "component", type: i1$b.DrawerContainerComponent, selector: "kendo-drawer-container" }, { kind: "directive", type: i1$b.DrawerTemplateDirective, selector: "[kendoDrawerTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KitDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-drawer', imports: [
+                        KENDO_LAYOUT,
+                        KENDO_INPUTS,
+                        KENDO_BUTTONS,
+                        NgTemplateOutlet,
+                        KitEntityTitleComponent,
+                        KitButtonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-drawer-container>\n  <kendo-drawer #drawer\n                class=\"kit-drawer\"\n                mode=\"overlay\"\n                position=\"end\"\n                [width]=\"width()\"\n                [(expanded)]=\"drawer.expanded\">\n    <ng-template kendoDrawerTemplate>\n      <div class=\"kit-drawer-header\">\n        <kit-entity-title class=\"title\">{{ title() }}</kit-entity-title>\n        <kit-button [icon]=\"kitSvgIcon.CROSS\"\n                    [type]=\"kitButtonType.TEXT\"\n                    [kind]=\"kitButtonKind.SMALL\"\n                    (clicked)=\"drawer.toggle()\" />\n      </div>\n\n      <div class=\"kit-drawer-content\">\n        <ng-container *ngTemplateOutlet=\"contentTemplate()\"></ng-container>\n      </div>\n\n      @if (footerTemplate(); as template) {\n        <div class=\"kit-drawer-footer\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n      }\n    </ng-template>\n  </kendo-drawer>\n</kendo-drawer-container>\n", styles: [".kit-drawer-header{background-color:var(--ui-kit-color-grey-13);border-bottom:1px solid var(--ui-kit-color-grey-3);min-height:var(--ui-kit-header-height);padding:28px 24px;display:flex;align-items:center;justify-content:space-between}.kit-drawer-content{padding:32px 24px;flex:1;overflow:auto}.kit-drawer-footer{background-color:var(--ui-kit-color-grey-13);border-top:1px solid var(--ui-kit-color-grey-3);padding:16px 24px}.kit-drawer ::ng-deep .k-drawer-wrapper{height:100%;display:flex;flex-direction:column;justify-content:space-between}.kit-drawer ::ng-deep-header .title .kit-entity-title{font-size:18px;line-height:20px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], drawer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DrawerComponent), { isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitDrawerContentTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitDrawerFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+
 // KitButton
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchApiTokens, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAvatarComponent, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntityTitleComponent, KitFileCardComponent, KitFileCardMessagesComponent, KitFileUploadComponent, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitGlobalSearchComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputMessageComponent, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitPageLayoutComponent, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitExportExcel, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitTranslations, kitUserPermissionsGuard, mapGlobalSearchResult, trimTrailingSlash };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchApiTokens, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAvatarComponent, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntityTitleComponent, KitFileCardComponent, KitFileCardMessagesComponent, KitFileUploadComponent, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitGlobalSearchComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputMessageComponent, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitPageLayoutComponent, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitExportExcel, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitTranslations, kitUserPermissionsGuard, mapGlobalSearchResult, trimTrailingSlash };
 //# sourceMappingURL=indigina-ui-kit.mjs.map