npm - @indigina/ui-kit - Versions diffs - 1.1.582 → 1.1.583 - Mend

@indigina/ui-kit 1.1.582 → 1.1.583

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 (3) hide show

package/fesm2022/indigina-ui-kit.mjs +45 -47
package/fesm2022/indigina-ui-kit.mjs.map +1 -1
package/package.json +1 -1

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

@@ -17,8 +17,7 @@ import * as i1$8 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule, UntypedFormControl, UntypedFormBuilder, Validators, FormBuilder } from '@angular/forms';
 import * as i1$4 from '@progress/kendo-angular-inputs';
 import { TextBoxComponent, TextBoxModule, NumericTextBoxComponent, NumericTextBoxModule, InputsModule, CheckBoxModule, SwitchModule, RadioButtonModule, KENDO_INPUTS } from '@progress/kendo-angular-inputs';
-import * as i1$e from '@ngx-translate/core';
-import { TranslateService, TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { TranslateService, TranslatePipe } from '@ngx-translate/core';
 import * as i1$5 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, DropDownListModule, ComboBoxComponent, DropDownsModule, MultiSelectComponent, KENDO_DROPDOWNS } from '@progress/kendo-angular-dropdowns';
 import * as monacoEditor from 'monaco-editor/editor/editor.api';
@@ -61,9 +60,9 @@ import { catchError as catchError$1, tap as tap$1, map as map$1 } from 'rxjs/ope
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { pdf } from '@progress/kendo-drawing';
 import { json2csv } from 'json-2-csv';
-import * as i1$f from '@progress/kendo-angular-scheduler';
+import * as i1$e from '@progress/kendo-angular-scheduler';
 import { ToolbarService, KENDO_SCHEDULER } from '@progress/kendo-angular-scheduler';
-import * as i1$g from '@progress/kendo-angular-treeview';
+import * as i1$f from '@progress/kendo-angular-treeview';
 import { KENDO_TREEVIEW } from '@progress/kendo-angular-treeview';
 class KitSvgIconComponent {
@@ -1311,14 +1310,13 @@ class KitTextboxActionsComponent {
                 useExisting: forwardRef(() => KitTextboxActionsComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kit-form-label class=\"label\"\n                  [text]=\"label()\"\n                  [for]=\"textbox\" />\n}\n<div class=\"kit-textbox-wrapper\">\n  <kit-textbox #textbox\n               class=\"textbox\"\n               maxLength=\"250\"\n               [disabled]=\"disabled()\"\n               [defaultValue]=\"defaultValue()\"\n               [placeholder]=\"placeholder()\"\n               [showStateIcon]=\"false\"\n               [state]=\"validationErrors().length ? kitTextboxState.ERROR : kitTextboxState.DEFAULT\"\n               [messageText]=\"validationErrors().join('. ')\"\n               (changed)=\"onTextboxChange($event)\" />\n  @if (isTextboxFocused() && showActions()) {\n    <div class=\"kit-textbox-actions\">\n      <kit-button [icon]=\"kitSvgIcon.CHECK\"\n                  [iconType]=\"kitSvgIconType.STROKE\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [disabled]=\"isSaveDisabled()\"\n                  (clicked)=\"save()\" />\n      <kit-button [icon]=\"kitSvgIcon.CROSS\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"revertChanges()\" />\n    </div>\n  }\n</div>\n", styles: [".label{display:block;margin-bottom:4px}.kit-textbox-wrapper{width:100%;display:flex;gap:10px}.kit-textbox-wrapper .textbox{width:100%}.kit-textbox-actions{display:flex;align-items:start;gap:10px}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kit-form-label class=\"label\"\n                  [text]=\"label()\"\n                  [for]=\"textbox\" />\n}\n<div class=\"kit-textbox-wrapper\">\n  <kit-textbox #textbox\n               class=\"textbox\"\n               maxLength=\"250\"\n               [disabled]=\"disabled()\"\n               [defaultValue]=\"defaultValue()\"\n               [placeholder]=\"placeholder()\"\n               [showStateIcon]=\"false\"\n               [state]=\"validationErrors().length ? kitTextboxState.ERROR : kitTextboxState.DEFAULT\"\n               [messageText]=\"validationErrors().join('. ')\"\n               (changed)=\"onTextboxChange($event)\" />\n  @if (isTextboxFocused() && showActions()) {\n    <div class=\"kit-textbox-actions\">\n      <kit-button [icon]=\"kitSvgIcon.CHECK\"\n                  [iconType]=\"kitSvgIconType.STROKE\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [disabled]=\"isSaveDisabled()\"\n                  (clicked)=\"save()\" />\n      <kit-button [icon]=\"kitSvgIcon.CROSS\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"revertChanges()\" />\n    </div>\n  }\n</div>\n", styles: [".label{display:block;margin-bottom:4px}.kit-textbox-wrapper{width:100%;display:flex;gap:10px}.kit-textbox-wrapper .textbox{width:100%}.kit-textbox-actions{display:flex;align-items:start;gap:10px}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTextboxActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-textbox-actions', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         KitTextboxComponent,
                         KitButtonComponent,
-                        TranslateModule,
                         ReactiveFormsModule,
                         KitFormLabelComponent,
                     ], providers: [
@@ -9140,7 +9138,7 @@ class KitRoutePathComponent {
         this.kitSvgIcon = KitSvgIcon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitRoutePathComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitRoutePathComponent, isStandalone: true, selector: "kit-route-path", inputs: { originPort: { classPropertyName: "originPort", publicName: "originPort", isSignal: true, isRequired: false, transformFunction: null }, destinationPort: { classPropertyName: "destinationPort", publicName: "destinationPort", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, containerMode: { classPropertyName: "containerMode", publicName: "containerMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"route-path\">\n  <kit-pill class=\"route-origin-port\">\n  <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  <kit-svg-icon class=\"icon arrow\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n  <kit-pill class=\"route-destination-port\">\n    <kit-truncate-text>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  @if (type()) {\n    <div class=\"route-mode\">\n      <span>{{ 'kit.routePath.by' | translate }}</span>\n      <kit-pill class=\"route-mode-value\">\n        <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n      </kit-pill>\n    </div>\n  }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) min-content min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto;padding:0 5px}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.route-path ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.route-path ::ng-deep .route-mode{display:flex}.route-path ::ng-deep .route-mode-value .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitRoutePathComponent, isStandalone: true, selector: "kit-route-path", inputs: { originPort: { classPropertyName: "originPort", publicName: "originPort", isSignal: true, isRequired: false, transformFunction: null }, destinationPort: { classPropertyName: "destinationPort", publicName: "destinationPort", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, containerMode: { classPropertyName: "containerMode", publicName: "containerMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"route-path\">\n  <kit-pill class=\"route-origin-port\">\n  <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  <kit-svg-icon class=\"icon arrow\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n  <kit-pill class=\"route-destination-port\">\n    <kit-truncate-text>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  @if (type()) {\n    <div class=\"route-mode\">\n      <span>{{ 'kit.routePath.by' | translate }}</span>\n      <kit-pill class=\"route-mode-value\">\n        <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n      </kit-pill>\n    </div>\n  }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) min-content min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto;padding:0 5px}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.route-path ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.route-path ::ng-deep .route-mode{display:flex}.route-path ::ng-deep .route-mode-value .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitRoutePathComponent, decorators: [{
             type: Component,
@@ -9148,7 +9146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitPillComponent,
                         KitTruncateTextComponent,
                         KitSvgIconComponent,
-                        TranslateModule,
+                        TranslatePipe,
                     ], template: "<div class=\"route-path\">\n  <kit-pill class=\"route-origin-port\">\n  <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  <kit-svg-icon class=\"icon arrow\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n  <kit-pill class=\"route-destination-port\">\n    <kit-truncate-text>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  @if (type()) {\n    <div class=\"route-mode\">\n      <span>{{ 'kit.routePath.by' | translate }}</span>\n      <kit-pill class=\"route-mode-value\">\n        <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n      </kit-pill>\n    </div>\n  }\n</div>\n", styles: [".route-path{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) min-content min-content;grid-auto-flow:column;justify-content:stretch}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto;padding:0 5px}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.route-path ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.route-path ::ng-deep .route-mode{display:flex}.route-path ::ng-deep .route-mode-value .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}\n"] }]
         }], propDecorators: { originPort: [{ type: i0.Input, args: [{ isSignal: true, alias: "originPort", required: false }] }], destinationPort: [{ type: i0.Input, args: [{ isSignal: true, alias: "destinationPort", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], containerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerMode", required: false }] }] } });
@@ -9329,7 +9327,7 @@ class KitGlobalSearchComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGlobalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitGlobalSearchComponent, isStandalone: true, selector: "kit-global-search", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, displayedLineItemsNumber: { classPropertyName: "displayedLineItemsNumber", publicName: "displayedLineItemsNumber", isSignal: true, isRequired: false, transformFunction: null }, prompts: { classPropertyName: "prompts", publicName: "prompts", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event)" } }, providers: [
             DatePipe,
-        ], viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [(ngModel)]=\"searchValue\"\n                 (click)=\"openPopup()\">\n    <ng-template kendoTextBoxPrefixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n    </ng-template>\n    <ng-template kendoTextBoxSuffixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n                    (click)=\"clearSearch()\" />\n    </ng-template>\n  </kendo-textbox>\n\n  <kit-popup #popup\n             [popupClass]=\"popupClass\"\n             [anchor]=\"anchor()\"\n             [content]=\"content\"\n             [closeOnOutsideClick]=\"false\" />\n\n  <ng-template #content>\n    @if (userPermissions$ | async; as userPermissions) {\n      <div class=\"popup-content\">\n        @if (showPropmts()) {\n          <div class=\"prompts\">\n            @for (prompt of prompts(); track prompt) {\n              @if (hasPermissionToShowPrompt(userPermissions, prompt.permissions)) {\n                <kit-pill [theme]=\"kitPillTheme.MAIN\"\n                          [selectable]=\"true\"\n                          (clicked)=\"onSelectPrompt(prompt)\">\n                  {{ prompt.label }}\n                </kit-pill>\n              }\n            }\n          </div>\n        } @else {\n          @if (isLoading()) {\n            <div class=\"search-results\">\n              <kendo-loader class=\"loader\" />\n            </div>\n          } @else if (searchResults().length) {\n            <div class=\"search-results\">\n              @for (category of searchResults(); track category?.name) {\n                @if (category) {\n                  <div class=\"category\">\n                    <div class=\"header\"\n                         [class.empty]=\"!category.total\">\n                      <div class=\"header-main\">\n                        <kit-svg-icon class=\"header-main-icon\"\n                                      [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n                        <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                      </div>\n\n                      @if (category.total > this.displayedLineItemsNumber()) {\n                        <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n                                    [type]=\"kitButtonType.GHOST\"\n                                    [kind]=\"kitButtonKind.SMALL\"\n                                    (clicked)=\"navigate(category.routeConfig)\" />\n                      }\n                    </div>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.routeConfig\"\n                           (click)=\"navigate(lineItem.routeConfig)\">\n                        <div class=\"main-content\">\n                          <div class=\"title\">\n                            <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                          </div>\n                          @if (lineItem.status) {\n                            <div>\n                              <kit-pill class=\"status\"\n                                        [theme]=\"kitPillTheme.MAIN\">\n                                {{ lineItem.status }}\n                              </kit-pill>\n                            </div>\n                          }\n                          <div class=\"subtitle\"\n                               kitHideBelowWidthClass=\"hide\"\n                               [kitHideBelowWidth]=\"61\">\n                            <kit-truncate-text>\n                              <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                            </kit-truncate-text>\n                          </div>\n\n                          @if (lineItem.routePath; as routePath) {\n                            @if (routePath.from || routePath.to) {\n                              <kit-route-path class=\"route\"\n                                              kitHideBelowWidthClass=\"hide\"\n                                              [kitHideBelowWidth]=\"132\"\n                                              [containerMode]=\"routePath.containerMode ?? ''\"\n                                              [destinationPort]=\"routePath.to ?? ''\"\n                                              [originPort]=\"routePath.from ?? ''\"\n                                              [type]=\"routePath.type ?? ''\" />\n                            }\n                          }\n                          @if (lineItem.dates; as dates) {\n                            @if (dates.firstDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper first-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.firstDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                            @if (dates.secondDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper second-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.secondDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        </div>\n\n                        <div class=\"additional-content\">\n                          @for (item of lineItem.additionalContent; track item.key) {\n                            <div>\n                              <span class=\"label\">{{ item.translateKey | translate }} </span>\n                              <span class=\"value\"\n                                    [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\" />\n          }\n\n          @if (filters().length) {\n            <div class=\"filters\">\n              @for (filter of filters(); track $index) {\n                <div>\n                  <p class=\"label\">{{ filter.label }}</p>\n                  @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n                    <kit-pill @heightExpandCollapseAnimation\n                              class=\"filter-value\"\n                              [theme]=\"kitPillTheme.MAIN\"\n                              [selectable]=\"true\"\n                              [selected]=\"isFilterSelected(value)\"\n                              (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n                      {{ value.title | translate }}\n                    </kit-pill>\n                  }\n                  @if (filter.values.length > 3) {\n                    <kit-button class=\"toggle-btn\"\n                                [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n                                [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n                                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                                [kind]=\"kitButtonKind.SMALL\"\n                                [type]=\"kitButtonType.GHOST\"\n                                (clicked)=\"toggleFilterExpanded($index)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i1$b.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text", "size"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: KitHideBelowWidthDirective, selector: "[kitHideBelowWidth]", inputs: ["kitHideBelowWidth", "kitHideBelowWidthClass"] }, { kind: "pipe", type: i1$7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$7.DatePipe, name: "date" }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], animations: [
+        ], viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [(ngModel)]=\"searchValue\"\n                 (click)=\"openPopup()\">\n    <ng-template kendoTextBoxPrefixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n    </ng-template>\n    <ng-template kendoTextBoxSuffixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n                    (click)=\"clearSearch()\" />\n    </ng-template>\n  </kendo-textbox>\n\n  <kit-popup #popup\n             [popupClass]=\"popupClass\"\n             [anchor]=\"anchor()\"\n             [content]=\"content\"\n             [closeOnOutsideClick]=\"false\" />\n\n  <ng-template #content>\n    @if (userPermissions$ | async; as userPermissions) {\n      <div class=\"popup-content\">\n        @if (showPropmts()) {\n          <div class=\"prompts\">\n            @for (prompt of prompts(); track prompt) {\n              @if (hasPermissionToShowPrompt(userPermissions, prompt.permissions)) {\n                <kit-pill [theme]=\"kitPillTheme.MAIN\"\n                          [selectable]=\"true\"\n                          (clicked)=\"onSelectPrompt(prompt)\">\n                  {{ prompt.label }}\n                </kit-pill>\n              }\n            }\n          </div>\n        } @else {\n          @if (isLoading()) {\n            <div class=\"search-results\">\n              <kendo-loader class=\"loader\" />\n            </div>\n          } @else if (searchResults().length) {\n            <div class=\"search-results\">\n              @for (category of searchResults(); track category?.name) {\n                @if (category) {\n                  <div class=\"category\">\n                    <div class=\"header\"\n                         [class.empty]=\"!category.total\">\n                      <div class=\"header-main\">\n                        <kit-svg-icon class=\"header-main-icon\"\n                                      [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n                        <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                      </div>\n\n                      @if (category.total > this.displayedLineItemsNumber()) {\n                        <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n                                    [type]=\"kitButtonType.GHOST\"\n                                    [kind]=\"kitButtonKind.SMALL\"\n                                    (clicked)=\"navigate(category.routeConfig)\" />\n                      }\n                    </div>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.routeConfig\"\n                           (click)=\"navigate(lineItem.routeConfig)\">\n                        <div class=\"main-content\">\n                          <div class=\"title\">\n                            <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                          </div>\n                          @if (lineItem.status) {\n                            <div>\n                              <kit-pill class=\"status\"\n                                        [theme]=\"kitPillTheme.MAIN\">\n                                {{ lineItem.status }}\n                              </kit-pill>\n                            </div>\n                          }\n                          <div class=\"subtitle\"\n                               kitHideBelowWidthClass=\"hide\"\n                               [kitHideBelowWidth]=\"61\">\n                            <kit-truncate-text>\n                              <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                            </kit-truncate-text>\n                          </div>\n\n                          @if (lineItem.routePath; as routePath) {\n                            @if (routePath.from || routePath.to) {\n                              <kit-route-path class=\"route\"\n                                              kitHideBelowWidthClass=\"hide\"\n                                              [kitHideBelowWidth]=\"132\"\n                                              [containerMode]=\"routePath.containerMode ?? ''\"\n                                              [destinationPort]=\"routePath.to ?? ''\"\n                                              [originPort]=\"routePath.from ?? ''\"\n                                              [type]=\"routePath.type ?? ''\" />\n                            }\n                          }\n                          @if (lineItem.dates; as dates) {\n                            @if (dates.firstDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper first-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.firstDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                            @if (dates.secondDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper second-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.secondDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        </div>\n\n                        <div class=\"additional-content\">\n                          @for (item of lineItem.additionalContent; track item.key) {\n                            <div>\n                              <span class=\"label\">{{ item.translateKey | translate }} </span>\n                              <span class=\"value\"\n                                    [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\" />\n          }\n\n          @if (filters().length) {\n            <div class=\"filters\">\n              @for (filter of filters(); track $index) {\n                <div>\n                  <p class=\"label\">{{ filter.label }}</p>\n                  @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n                    <kit-pill @heightExpandCollapseAnimation\n                              class=\"filter-value\"\n                              [theme]=\"kitPillTheme.MAIN\"\n                              [selectable]=\"true\"\n                              [selected]=\"isFilterSelected(value)\"\n                              (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n                      {{ value.title | translate }}\n                    </kit-pill>\n                  }\n                  @if (filter.values.length > 3) {\n                    <kit-button class=\"toggle-btn\"\n                                [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n                                [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n                                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                                [kind]=\"kitButtonKind.SMALL\"\n                                [type]=\"kitButtonType.GHOST\"\n                                (clicked)=\"toggleFilterExpanded($index)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i1$b.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text", "size"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: KitHideBelowWidthDirective, selector: "[kitHideBelowWidth]", inputs: ["kitHideBelowWidth", "kitHideBelowWidthClass"] }, { kind: "pipe", type: i1$7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$7.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], animations: [
             expandCollapseAnimation('height'),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -9347,7 +9345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitButtonComponent,
                         KitTruncateTextComponent,
                         DatePipe,
-                        TranslateModule,
+                        TranslatePipe,
                         KitEmptySectionComponent,
                         KitPillComponent,
                         HighlightPipe,
@@ -11799,12 +11797,12 @@ class KitCreateEntityDialogComponent extends DialogContentBase {
         return this.kitFormErrors.getErrors(form.controls[controlName]).join('. ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitCreateEntityDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: KitCreateEntityDialogComponent, isStandalone: true, selector: "kit-create-entity-dialog", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, providers: [KitFormErrors], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n  <kit-textbox class=\"textbox\"\n               formControlName=\"name\"\n               [label]=\"'Name' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form.get('name'))\"\n               [messageText]=\"getFormErrorMessages(form, 'name')\" />\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'Cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"dialog.close()\" />\n    <kit-button [label]=\"'Save' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"form.invalid || isSaving()\"\n                (clicked)=\"createEntity()\" />\n  </kit-dialog-actions>\n</div>\n", styles: ["::ng-deep .kit-dialog .k-dialog{min-width:400px}::ng-deep .kit-dialog .k-dialog .k-dialog-content{padding:20px 25px}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: KitCreateEntityDialogComponent, isStandalone: true, selector: "kit-create-entity-dialog", inputs: { maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, providers: [KitFormErrors], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\">\n  <kit-textbox class=\"textbox\"\n               formControlName=\"name\"\n               [label]=\"'Name' | translate\"\n               [showStateIcon]=\"false\"\n               [state]=\"getTextboxState(form.get('name'))\"\n               [messageText]=\"getFormErrorMessages(form, 'name')\" />\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'Cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"dialog.close()\" />\n    <kit-button [label]=\"'Save' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"form.invalid || isSaving()\"\n                (clicked)=\"createEntity()\" />\n  </kit-dialog-actions>\n</div>\n", styles: ["::ng-deep .kit-dialog .k-dialog{min-width:400px}::ng-deep .kit-dialog .k-dialog .k-dialog-content{padding:20px 25px}\n"], dependencies: [{ kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitCreateEntityDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-create-entity-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        TranslateModule,
+                        TranslatePipe,
                         KitTextboxComponent,
                         KitDialogActionsComponent,
                         KitButtonComponent,
@@ -14089,7 +14087,7 @@ class KitGridViewsManagerComponent extends DialogContentBase {
         this.hasUnsavedChanges.set(JSON.stringify(views) !== JSON.stringify(this.items()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridViewsManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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                (dragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon kitTooltip\n                      kitTooltipFilter=\".item-move\"\n                      class=\"item-move\"\n                      [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                      [title]=\"'kit.views.moveView' | translate\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\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 kitTooltip\n                        kitTooltipFilter=\".item-remove\"\n                        class=\"item-remove\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [title]=\"'kit.views.removeView' | translate\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon kitTooltip\n                        kitTooltipFilter=\".item-toggle\"\n                        class=\"item-toggle\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [title]=\"item.hidden ? ('kit.views.showView' | translate) : ('kit.views.hideView' | translate)\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\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                [disabled]=\"isSaving()\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges() || isSaving()\"\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 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.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}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.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-move{fill:var(--ui-kit-color-main)}\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: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["dragEnd"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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                (dragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon kitTooltip\n                      kitTooltipFilter=\".item-move\"\n                      class=\"item-move\"\n                      [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                      [title]=\"'kit.views.moveView' | translate\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\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 kitTooltip\n                        kitTooltipFilter=\".item-remove\"\n                        class=\"item-remove\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [title]=\"'kit.views.removeView' | translate\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon kitTooltip\n                        kitTooltipFilter=\".item-toggle\"\n                        class=\"item-toggle\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [title]=\"item.hidden ? ('kit.views.showView' | translate) : ('kit.views.hideView' | translate)\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\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                [disabled]=\"isSaving()\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges() || isSaving()\"\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 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.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}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.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-move{fill:var(--ui-kit-color-main)}\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: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["dragEnd"] }, { 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" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
             type: Component,
@@ -14097,7 +14095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitButtonComponent,
                         KitSortableComponent,
                         KitSvgIconComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         NgClass,
                         KitDialogActionsComponent,
                         TitleCasePipe,
@@ -14199,7 +14197,7 @@ class KitGridViewsSaveComponent {
         this.viewName.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridViewsSaveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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 }, preserveReadonlyFilters: { classPropertyName: "preserveReadonlyFilters", publicName: "preserveReadonlyFilters", isSignal: true, isRequired: false, 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", "suggest", "readonly"], outputs: ["selectedValueChange", "disabledChange", "filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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 }, preserveReadonlyFilters: { classPropertyName: "preserveReadonlyFilters", publicName: "preserveReadonlyFilters", isSignal: true, isRequired: false, 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", "suggest", "readonly"], outputs: ["selectedValueChange", "disabledChange", "filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridViewsSaveComponent, decorators: [{
             type: Component,
@@ -14207,7 +14205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitButtonComponent,
                         KitPopupComponent,
                         KitAutocompleteComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         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.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"] }]
         }], propDecorators: { viewGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewGroup", required: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: true }] }], viewsAutocompleteItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewsAutocompleteItems", required: true }] }], preserveReadonlyFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveReadonlyFilters", required: false }] }], resetQueryParams: [{ type: i0.Output, args: ["resetQueryParams"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
@@ -14508,7 +14506,7 @@ class KitGridViewsComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, preserveReadonlyFilters: { classPropertyName: "preserveReadonlyFilters", publicName: "preserveReadonlyFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewChanged: "viewChanged", viewSelectionChanged: "viewSelectionChanged" }, providers: [
             TitleCasePipe,
             KitGridUrlStateService,
-        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      <div class=\"views-actions\">\n        <kit-button #toggleButton\n                    kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.addView' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [active]=\"popup.isPopupOpen\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"onCreateViewPopupToggle()\"\n        ></kit-button>\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views()\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             [preserveReadonlyFilters]=\"preserveReadonlyFilters()\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n        <kit-button kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.manageViews' | translate\"\n                    [icon]=\"kitSvgIcon.VIEWS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n      <div class=\"views-list\">\n        <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                            [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                            [lineHeight]=\"32\"\n                            [gap]=\"0\"\n                            [itemTemplate]=\"collapsedListItem\"\n                            [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n                            (selectItem)=\"onSelectView($event)\"/>\n      </div>\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n              kitButtonType.GHOST || kitButtonType.LINK\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(anchor())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox class=\"new-view-input\"\n                 [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.set($event)\"\n    ></kit-textbox>\n    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n                (clicked)=\"onViewCreate()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text .value-text{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text .value-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems", "preserveReadonlyFilters"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "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: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      <div class=\"views-actions\">\n        <kit-button #toggleButton\n                    kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.addView' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [active]=\"popup.isPopupOpen\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"onCreateViewPopupToggle()\"\n        ></kit-button>\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views()\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             [preserveReadonlyFilters]=\"preserveReadonlyFilters()\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n        <kit-button kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.manageViews' | translate\"\n                    [icon]=\"kitSvgIcon.VIEWS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n      <div class=\"views-list\">\n        <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                            [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                            [lineHeight]=\"32\"\n                            [gap]=\"0\"\n                            [itemTemplate]=\"collapsedListItem\"\n                            [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n                            (selectItem)=\"onSelectView($event)\"/>\n      </div>\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n              kitButtonType.GHOST || kitButtonType.LINK\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(anchor())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox class=\"new-view-input\"\n                 [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.set($event)\"\n    ></kit-textbox>\n    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n                (clicked)=\"onViewCreate()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text .value-text{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text .value-icon{fill:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems", "preserveReadonlyFilters"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["selectItem"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridViewsComponent, decorators: [{
             type: Component,
@@ -14520,7 +14518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         NgClass,
                         TitleCasePipe,
                         KitButtonComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         KitPopupComponent,
                         KitTextboxComponent,
                         KitTooltipDirective,
@@ -14841,13 +14839,13 @@ class KitFilterCheckboxComponent {
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", 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: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: 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 && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\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]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip{display:flex;align-items:center;gap:3px}.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}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::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: TranslateModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.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", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", 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: "popupContent", first: true, predicate: ["popupContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: 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 && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\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]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"kit-filter-checkbox-tooltip-item\">{{ item }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip{display:flex;align-items:center;gap:3px}.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}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::ng-deep .kit-filter-checkbox-popup .popup-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px;height:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::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: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.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", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-filter-checkbox', imports: [
                         KitPillComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         KitCheckboxComponent,
                         KitTooltipDirective,
                         FormsModule,
@@ -14941,7 +14939,7 @@ class KitFilterCustomInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", 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 && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  <kit-truncate-text class=\"kit-custom-input-selected-values\">\n    {{ selectedValue() }}\n  </kit-truncate-text>\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>\n", styles: [".kit-custom-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { 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: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", 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 && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  <kit-truncate-text class=\"kit-custom-input-selected-values\">\n    {{ selectedValue() }}\n  </kit-truncate-text>\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>\n", styles: [".kit-custom-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { 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: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCustomInputComponent, decorators: [{
             type: Component,
@@ -14949,7 +14947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitPillComponent,
                         KitPopupComponent,
                         KitTextboxComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         KitTruncateTextComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  <kit-truncate-text class=\"kit-custom-input-selected-values\">\n    {{ selectedValue() }}\n  </kit-truncate-text>\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>\n", styles: [".kit-custom-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
@@ -15157,7 +15155,7 @@ class KitFilterDateComponent {
         const insideDatePicker = !!(datePicker?.contains(target) ||
             targetEl?.matches('.k-link') ||
             targetEl?.parentElement?.parentElement?.matches('.k-calendar-nav'));
-        return !!(popupElement?.contains(target) ||
+        return (popupElement?.contains(target) ||
             anchorElement?.contains(target) ||
             insideDatePicker);
     }
@@ -15176,13 +15174,13 @@ class KitFilterDateComponent {
         return {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, useUserTimeZone: { classPropertyName: "useUserTimeZone", publicName: "useUserTimeZone", isSignal: true, isRequired: false, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null }, dateFilterConstraint: { classPropertyName: "dateFilterConstraint", publicName: "dateFilterConstraint", isSignal: true, isRequired: false, 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: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {      \n      {{ localStartDate() | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {        \n        -\n      }\n      {{ localEndDate() | 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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-actions\">\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.today' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.TODAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.TODAY)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.yesterday' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.YESTERDAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.YESTERDAY)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastWeek' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_WEEK\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_WEEK)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastMonth' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_MONTH\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_MONTH)\" />\n  </div>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"localStartDate()\"\n                      [min]=\"minDateConstraint()\"\n                      [max]=\"localEndDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n                      (keydown.enter)=\"onEnterKey()\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"localEndDate()\"\n                      [min]=\"localStartDate()\"\n                      [max]=\"maxDateConstraint()\"\n                      (changed)=\"onToDateChange($event)\"\n                      (keydown.enter)=\"onEnterKey()\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup{min-width:296px}::ng-deep .kit-filter-date-popup .popup-content{box-sizing:border-box}::ng-deep .kit-filter-date-popup .popup-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:15px}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;width:100%;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: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size", "readonly"], outputs: ["defaultDateChange", "disabledChange", "changed"] }, { 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: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, useUserTimeZone: { classPropertyName: "useUserTimeZone", publicName: "useUserTimeZone", isSignal: true, isRequired: false, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null }, dateFilterConstraint: { classPropertyName: "dateFilterConstraint", publicName: "dateFilterConstraint", isSignal: true, isRequired: false, 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: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {      \n      {{ localStartDate() | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {        \n        -\n      }\n      {{ localEndDate() | 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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-actions\">\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.today' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.TODAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.TODAY)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.yesterday' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.YESTERDAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.YESTERDAY)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastWeek' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_WEEK\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_WEEK)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastMonth' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_MONTH\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_MONTH)\" />\n  </div>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"localStartDate()\"\n                      [min]=\"minDateConstraint()\"\n                      [max]=\"localEndDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n                      (keydown.enter)=\"onEnterKey()\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"localEndDate()\"\n                      [min]=\"localStartDate()\"\n                      [max]=\"maxDateConstraint()\"\n                      (changed)=\"onToDateChange($event)\"\n                      (keydown.enter)=\"onEnterKey()\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup{min-width:296px}::ng-deep .kit-filter-date-popup .popup-content{box-sizing:border-box}::ng-deep .kit-filter-date-popup .popup-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:15px}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;width:100%;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size", "readonly"], outputs: ["defaultDateChange", "disabledChange", "changed"] }, { 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: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-filter-date', imports: [
                         KitPillComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         KitDatepickerComponent,
                         DatePipe,
                         KitPopupComponent,
@@ -15386,7 +15384,7 @@ class KitFilterInputComponent {
         this.focusRafId = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", 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: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, 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 && !!(filter().removable ?? true)\"\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    <kit-truncate-text class=\"kit-filter-input-selected-values\">\n      @for (filter of selectedFilters; track $index) {\n        {{ getSelectedFilterText(filter) }}\n\n        @if ($index === 0) {\n          {{ getSelectedLogicText(selectedValues()) }}\n        }\n      }\n    </kit-truncate-text>\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-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           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\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                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [max]=\"maxIntegerValue\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\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: [".kit-filter-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { 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: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", 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: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, 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 && !!(filter().removable ?? true)\"\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    <kit-truncate-text class=\"kit-filter-input-selected-values\">\n      @for (filter of selectedFilters; track $index) {\n        {{ getSelectedFilterText(filter) }}\n\n        @if ($index === 0) {\n          {{ getSelectedLogicText(selectedValues()) }}\n        }\n      }\n    </kit-truncate-text>\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-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           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\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                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [max]=\"maxIntegerValue\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\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: [".kit-filter-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { 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: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterInputComponent, decorators: [{
             type: Component,
@@ -15395,7 +15393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitPillComponent,
                         KitPopupComponent,
                         KitTextboxComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         KitNumericTextboxComponent,
                         KitTruncateTextComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\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    <kit-truncate-text class=\"kit-filter-input-selected-values\">\n      @for (filter of selectedFilters; track $index) {\n        {{ getSelectedFilterText(filter) }}\n\n        @if ($index === 0) {\n          {{ getSelectedLogicText(selectedValues()) }}\n        }\n      }\n    </kit-truncate-text>\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-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           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (opened)=\"onPopupOpened()\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\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                           (keydown.enter)=\"onEnterKey()\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"#.###\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [max]=\"maxIntegerValue\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n                                   (keydown.enter)=\"onEnterKey()\"\n              ></kit-numeric-textbox>\n            }\n          }\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: [".kit-filter-input-selected-values{max-width:180px}::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
@@ -15493,13 +15491,13 @@ class KitFilterNullCheckComponent {
         this.onOptionChange(option ?? this.options()[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterNullCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitFilterNullCheckComponent, isStandalone: true, selector: "kit-filter-null-check", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged", selectedOption: "selectedOptionChange", options: "optionsChange" }, 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-null\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n      {{ filter().title | translate }}: {{ selectedOption()?.label }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-null-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearFilter()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"options()\"\n                      (changed)=\"onOptionChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-null-popup .popup-content{width:172px}::ng-deep .kit-filter-null-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\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: "ngmodule", type: FormsModule }, { 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: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitFilterNullCheckComponent, isStandalone: true, selector: "kit-filter-null-check", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged", selectedOption: "selectedOptionChange", options: "optionsChange" }, 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-null\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n      {{ filter().title | translate }}: {{ selectedOption()?.label }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-null-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [closePopupOnCancel]=\"false\"\n           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearFilter()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"options()\"\n                      (changed)=\"onOptionChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-null-popup .popup-content{width:172px}::ng-deep .kit-filter-null-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: FormsModule }, { 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: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterNullCheckComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-filter-null-check', imports: [
                         KitPillComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         FormsModule,
                         KitPopupComponent,
                         KitRadioButtonComponent,
@@ -15658,13 +15656,13 @@ class KitFilterSelectorComponent {
         this.popup()?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-filter-selector', imports: [
                         KitPopupComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         KitTextboxComponent,
                         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"] }]
@@ -15998,12 +15996,12 @@ class KitGridExportComponent {
             .replace(/[^A-Za-z0-9_.-]/g, '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridExportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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 }, gridCellValueTransformMap: { classPropertyName: "gridCellValueTransformMap", publicName: "gridCellValueTransformMap", isSignal: true, isRequired: false, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportRequested: "exportRequested" }, 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              kitTooltip\n              kitTooltipFilter=\"kit-button\"\n              [title]=\"'kit.export.title' | translate\"\n              [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n              [disabled]=\"!gridHasData() || isGridExporting()\"\n              [icon]=\"kitSvgIcon.DOWNLOAD\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [active]=\"popup.isPopupOpen\"\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=\"kit-grid-export-popup-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: "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: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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 }, gridCellValueTransformMap: { classPropertyName: "gridCellValueTransformMap", publicName: "gridCellValueTransformMap", isSignal: true, isRequired: false, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exportRequested: "exportRequested" }, 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              kitTooltip\n              kitTooltipFilter=\"kit-button\"\n              [title]=\"'kit.export.title' | translate\"\n              [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n              [disabled]=\"!gridHasData() || isGridExporting()\"\n              [icon]=\"kitSvgIcon.DOWNLOAD\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [active]=\"popup.isPopupOpen\"\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=\"kit-grid-export-popup-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: "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: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridExportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-grid-export', imports: [
-                        TranslateModule,
+                        TranslatePipe,
                         KitButtonComponent,
                         KitPopupComponent,
                         KitRadioButtonComponent,
@@ -16020,12 +16018,12 @@ class KitGridCellComponent {
         this.dateformat = KIT_DATE_FORMAT;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 : 'UTC' }}\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$e.TranslatePipe, name: "translate" }, { 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: "22.1.1", 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 : 'UTC' }}\n  }\n  @case (\"number\") {\n    {{ dataItem[column.name] | number }}\n  }\n  @default {\n    {{ dataItem[column.name] }}\n  }\n}\n", dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-grid-cell', imports: [
-                        TranslateModule,
+                        TranslatePipe,
                         DatePipe,
                         DecimalPipe,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, 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 : 'UTC' }}\n  }\n  @case (\"number\") {\n    {{ dataItem[column.name] | number }}\n  }\n  @default {\n    {{ dataItem[column.name] }}\n  }\n}\n" }]
@@ -16079,12 +16077,12 @@ class KitGridSearchComponent {
         ]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitGridSearchComponent, isStandalone: true, selector: "kit-grid-search", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSearch: "toggleSearch" }, 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                [searchString]=\"(gridState$ | async)?.search\"\n                [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n                [disabled]=\"disabled()\"\n                (closeButtonClick)=\"closeButtonClick()\"\n                (searchButtonClick)=\"this.toggleSearch.emit(true)\"\n></kit-search-bar>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitSearchBarComponent, selector: "kit-search-bar", inputs: ["placeholder", "searchButtonLabel", "closeButtonLabel", "searchString", "disabled", "maxLength"], outputs: ["changed", "searchButtonClick", "closeButtonClick"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitGridSearchComponent, isStandalone: true, selector: "kit-grid-search", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleSearch: "toggleSearch" }, 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                [searchString]=\"(gridState$ | async)?.search\"\n                [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n                [disabled]=\"disabled()\"\n                (closeButtonClick)=\"closeButtonClick()\"\n                (searchButtonClick)=\"this.toggleSearch.emit(true)\"\n></kit-search-bar>\n", dependencies: [{ kind: "component", type: KitSearchBarComponent, selector: "kit-search-bar", inputs: ["placeholder", "searchButtonLabel", "closeButtonLabel", "searchString", "disabled", "maxLength"], outputs: ["changed", "searchButtonClick", "closeButtonClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-grid-search', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        TranslateModule,
+                        TranslatePipe,
                         KitSearchBarComponent,
                         AsyncPipe,
                     ], template: "<kit-search-bar [placeholder]=\"'kit.search.placeholder' | translate\"\n                [searchButtonLabel]=\"'kit.search.searchButtonLabel' | translate\"\n                [searchString]=\"(gridState$ | async)?.search\"\n                [closeButtonLabel]=\"'kit.search.closeButtonLabel' | translate\"\n                [disabled]=\"disabled()\"\n                (closeButtonClick)=\"closeButtonClick()\"\n                (searchButtonClick)=\"this.toggleSearch.emit(true)\"\n></kit-search-bar>\n" }]
@@ -16158,13 +16156,13 @@ class KitGridColumnManagerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridColumnManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitGridColumnManagerComponent, isStandalone: true, selector: "kit-grid-column-manager", inputs: { showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             DialogRef,
-        ], viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<kit-button kitTooltip\n            kitTooltipFilter=\"kit-button\"\n            [title]=\"'kit.columns.columnManager' | translate\"\n            [kitTooltipVisible]=\"!showLabel()\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [label]=\"showLabel() ? ('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                  (dragEnd)=\"checkChanges()\">\n      <ng-template let-item>\n        @if (item.hidden) {\n          <kit-svg-icon kitTooltip\n                        kitTooltipFilter=\".item-icon-checkbox\"\n                        class=\"item-icon-checkbox hidden\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [title]=\"'kit.columns.showColumn' | translate\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon kitTooltip\n                        kitTooltipFilter=\".item-icon-checkbox\"\n                        class=\"item-icon-checkbox\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [title]=\"'kit.columns.hideColumn' | translate\"\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 kitTooltip\n                      kitTooltipFilter=\".item-icon-menu\"\n                      class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                      [title]=\"'kit.columns.moveColumn' | translate\"\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]=\"'kit.columns.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <div class=\"action-buttons\">\n      <kit-button [label]=\"'kit.columns.reset' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\" \n                  (clicked)=\"reset()\"/>\n      <kit-button [label]=\"'kit.columns.apply' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"!hasUnsavedChanges()\"\n                  (clicked)=\"applyChanges()\"\n      ></kit-button>\n    </div>\n  </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px;overflow-y:auto;height:calc(100% - 80px);box-sizing:border-box}.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-grid-columns-dialog.kit-dialog .k-dialog{margin:30px}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content{padding:0;overflow:hidden}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content .kit-dialog-actions .action-buttons{display:flex;gap:15px}\n"], dependencies: [{ 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: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["dragEnd"] }, { 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" }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dialogContent", first: true, predicate: ["dialogContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<kit-button kitTooltip\n            kitTooltipFilter=\"kit-button\"\n            [title]=\"'kit.columns.columnManager' | translate\"\n            [kitTooltipVisible]=\"!showLabel()\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [label]=\"showLabel() ? ('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                  (dragEnd)=\"checkChanges()\">\n      <ng-template let-item>\n        @if (item.hidden) {\n          <kit-svg-icon kitTooltip\n                        kitTooltipFilter=\".item-icon-checkbox\"\n                        class=\"item-icon-checkbox hidden\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [title]=\"'kit.columns.showColumn' | translate\"\n                        [icon]=\"kitSvgIcon.EYE_CLOSE\"\n                        (click)=\"onColumnVisibilityChange(true, item)\"\n          ></kit-svg-icon>\n        } @else {\n          <kit-svg-icon kitTooltip\n                        kitTooltipFilter=\".item-icon-checkbox\"\n                        class=\"item-icon-checkbox\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [title]=\"'kit.columns.hideColumn' | translate\"\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 kitTooltip\n                      kitTooltipFilter=\".item-icon-menu\"\n                      class=\"item-icon-menu\"\n                      [ngClass]=\"{ hidden: item.hidden }\"\n                      [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                      [title]=\"'kit.columns.moveColumn' | translate\"\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]=\"'kit.columns.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <div class=\"action-buttons\">\n      <kit-button [label]=\"'kit.columns.reset' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\" \n                  (clicked)=\"reset()\"/>\n      <kit-button [label]=\"'kit.columns.apply' | translate\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"!hasUnsavedChanges()\"\n                  (clicked)=\"applyChanges()\"\n      ></kit-button>\n    </div>\n  </kit-dialog-actions>\n</ng-template>\n", styles: [".kit-grid-columns-dialog{min-width:450px;padding:24px;overflow-y:auto;height:calc(100% - 80px);box-sizing:border-box}.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-grid-columns-dialog.kit-dialog .k-dialog{margin:30px}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content{padding:0;overflow:hidden}::ng-deep .kit-grid-columns-dialog.kit-dialog .k-dialog-content .kit-dialog-actions .action-buttons{display:flex;gap:15px}\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: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["dragEnd"] }, { 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" }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridColumnManagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-grid-column-manager', imports: [
                         KitButtonComponent,
-                        TranslateModule,
+                        TranslatePipe,
                         KitSortableComponent,
                         KitSvgIconComponent,
                         NgClass,
@@ -16187,7 +16185,7 @@ class KitGridDetailsButtonComponent {
         this.kitSvgIconType = KitSvgIconType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridDetailsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: KitGridDetailsButtonComponent, isStandalone: true, selector: "kit-grid-details-button", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "<div class=\"kit-grid-details-button\">\n  <a class=\"button-link\"\n     [routerLink]=\"link()\"\n     [queryParamsHandling]=\"queryParamsHandling()\">\n    <kit-svg-icon class=\"button-icon\"\n                  kitTooltip\n                  kitTooltipFilter=\".button-icon\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [title]=\"'kit.grid.view' | translate\"\n                  [icon]=\"kitSvgIcon.DETAILS\"\n                  (click)=\"handleClick.emit()\" />\n  </a>\n</div>\n", styles: [".kit-grid-details-button{display:flex;justify-content:center;align-items:center}.kit-grid-details-button .button-link{padding:0 8px}.kit-grid-details-button .button-link:hover .button-icon{fill:var(--color-main)}.kit-grid-details-button .button-icon{display:block;fill:var(--color-grey-4);stroke:none;width:16px;height:16px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: KitGridDetailsButtonComponent, isStandalone: true, selector: "kit-grid-details-button", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleClick: "handleClick" }, ngImport: i0, template: "<div class=\"kit-grid-details-button\">\n  <a class=\"button-link\"\n     [routerLink]=\"link()\"\n     [queryParamsHandling]=\"queryParamsHandling()\">\n    <kit-svg-icon class=\"button-icon\"\n                  kitTooltip\n                  kitTooltipFilter=\".button-icon\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [title]=\"'kit.grid.view' | translate\"\n                  [icon]=\"kitSvgIcon.DETAILS\"\n                  (click)=\"handleClick.emit()\" />\n  </a>\n</div>\n", styles: [".kit-grid-details-button{display:flex;justify-content:center;align-items:center}.kit-grid-details-button .button-link{padding:0 8px}.kit-grid-details-button .button-link:hover .button-icon{fill:var(--color-main)}.kit-grid-details-button .button-icon{display:block;fill:var(--color-grey-4);stroke:none;width:16px;height:16px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridDetailsButtonComponent, decorators: [{
             type: Component,
@@ -16195,7 +16193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         RouterModule,
                         KitTooltipDirective,
                         KitSvgIconComponent,
-                        TranslateModule,
+                        TranslatePipe,
                     ], template: "<div class=\"kit-grid-details-button\">\n  <a class=\"button-link\"\n     [routerLink]=\"link()\"\n     [queryParamsHandling]=\"queryParamsHandling()\">\n    <kit-svg-icon class=\"button-icon\"\n                  kitTooltip\n                  kitTooltipFilter=\".button-icon\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [title]=\"'kit.grid.view' | translate\"\n                  [icon]=\"kitSvgIcon.DETAILS\"\n                  (click)=\"handleClick.emit()\" />\n  </a>\n</div>\n", styles: [".kit-grid-details-button{display:flex;justify-content:center;align-items:center}.kit-grid-details-button .button-link{padding:0 8px}.kit-grid-details-button .button-link:hover .button-icon{fill:var(--color-main)}.kit-grid-details-button .button-icon{display:block;fill:var(--color-grey-4);stroke:none;width:16px;height:16px;cursor:pointer}\n"] }]
         }], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: true }] }], queryParamsHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryParamsHandling", required: false }] }], handleClick: [{ type: i0.Output, args: ["handleClick"] }] } });
@@ -16948,7 +16946,7 @@ class KitSchedulerComponent {
         return local.toISOString().split('T')[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitSchedulerComponent, isStandalone: true, selector: "kit-scheduler", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, viewModes: { classPropertyName: "viewModes", publicName: "viewModes", isSignal: true, isRequired: false, transformFunction: null }, showTimePill: { classPropertyName: "showTimePill", publicName: "showTimePill", isSignal: true, isRequired: false, transformFunction: null }, monthEventHeight: { classPropertyName: "monthEventHeight", publicName: "monthEventHeight", isSignal: true, isRequired: false, transformFunction: null }, eventsPerDay: { classPropertyName: "eventsPerDay", publicName: "eventsPerDay", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, freezeToolbar: { classPropertyName: "freezeToolbar", publicName: "freezeToolbar", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClicked: "eventClicked", eventDblClicked: "eventDblClicked", slotClicked: "slotClicked", dateChanged: "dateChanged" }, queries: [{ propertyName: "customViewTemplate", first: true, predicate: KitSchedulerCustomViewTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "weekEventTemplate", first: true, predicate: KitSchedulerWeekEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "monthEventTemplate", first: true, predicate: KitSchedulerMonthEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "agendaTimeTemplate", first: true, predicate: KitSchedulerAgendaTimeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCellTemplate", first: true, predicate: KitSchedulerMonthHeaderCellTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: KitSchedulerToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scheduler", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-scheduler #scheduler\n                 class=\"kit-scheduler\"\n                 [ngClass]=\"{ 'freeze-toolbar': freezeToolbar() }\"\n                 [events]=\"events()\"\n                 [selectedDate]=\"selectedDate()\"\n                 [allDaySlot]=\"false\"\n                 [showFooter]=\"false\"\n                 [slotFill]=\"1\"\n                 [min]=\"min()\"\n                 [max]=\"max()\"\n                 [timezone]=\"timezone()\"\n                 [loading]=\"loading()\"\n                 [slotClass]=\"getSlotClass\"\n                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (navigate)=\"onNavigate($event)\"\n                 (eventDblClick)=\"eventDblClicked.emit($event)\"\n                 (dateChange)=\"dateChanged.emit($event)\">\n  <ng-template kendoSchedulerToolbarTemplate\n               let-selectedDate=\"selectedDate\"\n               let-selectedView=\"selectedView\"\n               let-views=\"views\">\n    <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n                           [selectedDate]=\"selectedDate\"\n                           [selectedView]=\"selectedView\"\n                           [views]=\"views\"\n                           [viewModes]=\"viewModes()\"\n                           [showTimePill]=\"showTimePill()\"\n                           [selectedViewIndex]=\"scheduler.selectedViewIndex\"\n                           [showTodayButton]=\"showTodayButton()\">\n      @if (toolbarTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      }\n    </kit-scheduler-toolbar>\n  </ng-template>\n\n  <ng-template kendoSchedulerDateHeaderTemplate\n               let-date=\"date\">\n    <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n    ></ng-container>\n  </ng-template>\n\n  <ng-template kendoSchedulerMajorTimeHeaderTemplate\n               let-date=\"date\">\n    {{ date | date:'h a' }}\n  </ng-template>\n\n  <ng-template kendoSchedulerTimeSlotTemplate\n               let-date=\"date\">\n    <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n  </ng-template>\n\n  <ng-template kendoSchedulerMonthDaySlotTemplate\n               let-date=\"date\">\n    <div class=\"month-day\"\n         [class.selected]=\"monthCellIsSelected(date)\">\n      @if (headerCellTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template; context: { date }\"\n        ></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n        ></ng-container>\n      }\n\n      @if (monthEventTemplate(); as template) {\n        <div class=\"month-day-events\">\n          <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (weekEventTemplate(); as template) {\n    <ng-template kendoSchedulerEventTemplate\n                 let-event=\"event\">\n      <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n                              [eventsPerDay]=\"eventsPerDay()\"\n  ></kendo-scheduler-month-view>\n\n  @if (viewModes()['week']) {\n    <kendo-scheduler-week-view\n    ></kendo-scheduler-week-view>\n  }\n\n  @if (viewModes()['agenda']) {\n    @for (agendaView of viewModes()['agenda']; track agendaView.title) {\n      <kendo-scheduler-agenda-view [numberOfDays]=\"agendaView.numberOfDays\"\n      ></kendo-scheduler-agenda-view>\n    }\n  }\n\n  @if (agendaTimeTemplate(); as template) {\n    <ng-template kendoSchedulerAgendaTimeTemplate\n                 let-start=\"start\">\n      <ng-container *ngTemplateOutlet=\"template; context: { start }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  @if (viewModes()['day']) {\n    <kendo-scheduler-day-view\n    ></kendo-scheduler-day-view>\n  }\n\n  @if (viewModes()['timeline']) {\n    <kendo-scheduler-timeline-view\n    ></kendo-scheduler-timeline-view>\n  }\n\n  @if (viewModes()['custom']) {\n    @if (customViewTemplate(); as template) {\n      <ng-template [kendoSchedulerView]=\"viewModes()['custom']?.title\">\n        <ng-container *ngTemplateOutlet=\"template\"\n        ></ng-container>\n      </ng-template>\n    }\n  }\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n             let-date=\"date\">\n  <div class=\"week-day\">\n    <div class=\"week-day-name\">\n      {{ date | date:'EEE' }}\n    </div>\n    <div class=\"week-day-date\">\n      {{ date | date:'dd' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler.freeze-toolbar{height:100%}.kit-scheduler.freeze-toolbar ::ng-deep month-view{flex:1;overflow-y:auto}.kit-scheduler ::ng-deep .k-scheduler-toolbar{padding:0 0 34px;border:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-table tr:has(.highlightDate) .k-scheduler-cell{background-color:var(--ui-kit-color-background);border-color:var(--kendo-color-border, rgba(0, 0, 0, .08))}.kit-scheduler ::ng-deep .k-scheduler-cell.highlightDate{background-color:var(--ui-kit-color-background)}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;margin-top:6px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer;box-sizing:content-box;padding-inline-end:0}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-timecolumn{text-align:center}\n"], dependencies: [{ kind: "component", type: i1$f.SchedulerComponent, selector: "kendo-scheduler", inputs: ["selectedViewIndex", "editable", "selectable", "min", "max", "eventHeight", "columnWidth", "showWorkHours", "startTime", "endTime", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "weekStart", "slotDuration", "slotDivisions", "slotFill", "allDaySlot", "scrollTime", "group", "resources", "loading", "timezone", "events", "selectedDate", "modelFields", "currentTimeMarker", "highlightOngoingEvents", "showToolbar", "showFooter", "slotClass", "eventClass", "eventStyles", "hiddenDays", "isSlotSelected"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport", "schedulerResize"] }, { kind: "directive", type: i1$f.SchedulerViewDirective, selector: "[kendoSchedulerView]", inputs: ["kendoSchedulerView", "kendoSchedulerViewName"] }, { kind: "directive", type: i1$f.ShortcutsDirective, selector: "kendo-scheduler" }, { kind: "component", type: i1$f.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$f.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "component", type: i1$f.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventsPerDay", "eventHeight", "adaptiveSlotHeight", "selectedDateFormat", "selectedShortDateFormat"], outputs: ["moreEventsClick"] }, { kind: "component", type: i1$f.TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$f.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "directive", type: i1$f.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { kind: "directive", type: i1$f.AgendaTimeTemplateDirective, selector: "[kendoSchedulerAgendaTimeTemplate]" }, { kind: "directive", type: i1$f.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }, { kind: "directive", type: i1$f.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { kind: "directive", type: i1$f.MajorTimeHeaderTemplateDirective, selector: "[kendoSchedulerMajorTimeHeaderTemplate]" }, { kind: "directive", type: i1$f.MonthDaySlotTemplateDirective, selector: "[kendoSchedulerMonthDaySlotTemplate]" }, { kind: "directive", type: i1$f.TimeSlotTemplateDirective, selector: "[kendoSchedulerTimeSlotTemplate]" }, { kind: "component", type: KitSchedulerToolbarComponent, selector: "kit-scheduler-toolbar", inputs: ["selectedDate", "selectedView", "showTimePill", "views", "viewModes", "selectedViewIndex", "showTodayButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitSchedulerComponent, isStandalone: true, selector: "kit-scheduler", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, viewModes: { classPropertyName: "viewModes", publicName: "viewModes", isSignal: true, isRequired: false, transformFunction: null }, showTimePill: { classPropertyName: "showTimePill", publicName: "showTimePill", isSignal: true, isRequired: false, transformFunction: null }, monthEventHeight: { classPropertyName: "monthEventHeight", publicName: "monthEventHeight", isSignal: true, isRequired: false, transformFunction: null }, eventsPerDay: { classPropertyName: "eventsPerDay", publicName: "eventsPerDay", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, freezeToolbar: { classPropertyName: "freezeToolbar", publicName: "freezeToolbar", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClicked: "eventClicked", eventDblClicked: "eventDblClicked", slotClicked: "slotClicked", dateChanged: "dateChanged" }, queries: [{ propertyName: "customViewTemplate", first: true, predicate: KitSchedulerCustomViewTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "weekEventTemplate", first: true, predicate: KitSchedulerWeekEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "monthEventTemplate", first: true, predicate: KitSchedulerMonthEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "agendaTimeTemplate", first: true, predicate: KitSchedulerAgendaTimeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCellTemplate", first: true, predicate: KitSchedulerMonthHeaderCellTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: KitSchedulerToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scheduler", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-scheduler #scheduler\n                 class=\"kit-scheduler\"\n                 [ngClass]=\"{ 'freeze-toolbar': freezeToolbar() }\"\n                 [events]=\"events()\"\n                 [selectedDate]=\"selectedDate()\"\n                 [allDaySlot]=\"false\"\n                 [showFooter]=\"false\"\n                 [slotFill]=\"1\"\n                 [min]=\"min()\"\n                 [max]=\"max()\"\n                 [timezone]=\"timezone()\"\n                 [loading]=\"loading()\"\n                 [slotClass]=\"getSlotClass\"\n                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (navigate)=\"onNavigate($event)\"\n                 (eventDblClick)=\"eventDblClicked.emit($event)\"\n                 (dateChange)=\"dateChanged.emit($event)\">\n  <ng-template kendoSchedulerToolbarTemplate\n               let-selectedDate=\"selectedDate\"\n               let-selectedView=\"selectedView\"\n               let-views=\"views\">\n    <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n                           [selectedDate]=\"selectedDate\"\n                           [selectedView]=\"selectedView\"\n                           [views]=\"views\"\n                           [viewModes]=\"viewModes()\"\n                           [showTimePill]=\"showTimePill()\"\n                           [selectedViewIndex]=\"scheduler.selectedViewIndex\"\n                           [showTodayButton]=\"showTodayButton()\">\n      @if (toolbarTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      }\n    </kit-scheduler-toolbar>\n  </ng-template>\n\n  <ng-template kendoSchedulerDateHeaderTemplate\n               let-date=\"date\">\n    <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n    ></ng-container>\n  </ng-template>\n\n  <ng-template kendoSchedulerMajorTimeHeaderTemplate\n               let-date=\"date\">\n    {{ date | date:'h a' }}\n  </ng-template>\n\n  <ng-template kendoSchedulerTimeSlotTemplate\n               let-date=\"date\">\n    <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n  </ng-template>\n\n  <ng-template kendoSchedulerMonthDaySlotTemplate\n               let-date=\"date\">\n    <div class=\"month-day\"\n         [class.selected]=\"monthCellIsSelected(date)\">\n      @if (headerCellTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template; context: { date }\"\n        ></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n        ></ng-container>\n      }\n\n      @if (monthEventTemplate(); as template) {\n        <div class=\"month-day-events\">\n          <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (weekEventTemplate(); as template) {\n    <ng-template kendoSchedulerEventTemplate\n                 let-event=\"event\">\n      <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n                              [eventsPerDay]=\"eventsPerDay()\"\n  ></kendo-scheduler-month-view>\n\n  @if (viewModes()['week']) {\n    <kendo-scheduler-week-view\n    ></kendo-scheduler-week-view>\n  }\n\n  @if (viewModes()['agenda']) {\n    @for (agendaView of viewModes()['agenda']; track agendaView.title) {\n      <kendo-scheduler-agenda-view [numberOfDays]=\"agendaView.numberOfDays\"\n      ></kendo-scheduler-agenda-view>\n    }\n  }\n\n  @if (agendaTimeTemplate(); as template) {\n    <ng-template kendoSchedulerAgendaTimeTemplate\n                 let-start=\"start\">\n      <ng-container *ngTemplateOutlet=\"template; context: { start }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  @if (viewModes()['day']) {\n    <kendo-scheduler-day-view\n    ></kendo-scheduler-day-view>\n  }\n\n  @if (viewModes()['timeline']) {\n    <kendo-scheduler-timeline-view\n    ></kendo-scheduler-timeline-view>\n  }\n\n  @if (viewModes()['custom']) {\n    @if (customViewTemplate(); as template) {\n      <ng-template [kendoSchedulerView]=\"viewModes()['custom']?.title\">\n        <ng-container *ngTemplateOutlet=\"template\"\n        ></ng-container>\n      </ng-template>\n    }\n  }\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n             let-date=\"date\">\n  <div class=\"week-day\">\n    <div class=\"week-day-name\">\n      {{ date | date:'EEE' }}\n    </div>\n    <div class=\"week-day-date\">\n      {{ date | date:'dd' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler.freeze-toolbar{height:100%}.kit-scheduler.freeze-toolbar ::ng-deep month-view{flex:1;overflow-y:auto}.kit-scheduler ::ng-deep .k-scheduler-toolbar{padding:0 0 34px;border:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-table tr:has(.highlightDate) .k-scheduler-cell{background-color:var(--ui-kit-color-background);border-color:var(--kendo-color-border, rgba(0, 0, 0, .08))}.kit-scheduler ::ng-deep .k-scheduler-cell.highlightDate{background-color:var(--ui-kit-color-background)}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;margin-top:6px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer;box-sizing:content-box;padding-inline-end:0}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-timecolumn{text-align:center}\n"], dependencies: [{ kind: "component", type: i1$e.SchedulerComponent, selector: "kendo-scheduler", inputs: ["selectedViewIndex", "editable", "selectable", "min", "max", "eventHeight", "columnWidth", "showWorkHours", "startTime", "endTime", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "weekStart", "slotDuration", "slotDivisions", "slotFill", "allDaySlot", "scrollTime", "group", "resources", "loading", "timezone", "events", "selectedDate", "modelFields", "currentTimeMarker", "highlightOngoingEvents", "showToolbar", "showFooter", "slotClass", "eventClass", "eventStyles", "hiddenDays", "isSlotSelected"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport", "schedulerResize"] }, { kind: "directive", type: i1$e.SchedulerViewDirective, selector: "[kendoSchedulerView]", inputs: ["kendoSchedulerView", "kendoSchedulerViewName"] }, { kind: "directive", type: i1$e.ShortcutsDirective, selector: "kendo-scheduler" }, { kind: "component", type: i1$e.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$e.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "component", type: i1$e.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventsPerDay", "eventHeight", "adaptiveSlotHeight", "selectedDateFormat", "selectedShortDateFormat"], outputs: ["moreEventsClick"] }, { kind: "component", type: i1$e.TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$e.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "directive", type: i1$e.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { kind: "directive", type: i1$e.AgendaTimeTemplateDirective, selector: "[kendoSchedulerAgendaTimeTemplate]" }, { kind: "directive", type: i1$e.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }, { kind: "directive", type: i1$e.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { kind: "directive", type: i1$e.MajorTimeHeaderTemplateDirective, selector: "[kendoSchedulerMajorTimeHeaderTemplate]" }, { kind: "directive", type: i1$e.MonthDaySlotTemplateDirective, selector: "[kendoSchedulerMonthDaySlotTemplate]" }, { kind: "directive", type: i1$e.TimeSlotTemplateDirective, selector: "[kendoSchedulerTimeSlotTemplate]" }, { kind: "component", type: KitSchedulerToolbarComponent, selector: "kit-scheduler-toolbar", inputs: ["selectedDate", "selectedView", "showTimePill", "views", "viewModes", "selectedViewIndex", "showTodayButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitSchedulerComponent, decorators: [{
             type: Component,
@@ -17295,12 +17293,12 @@ class KitNotFoundComponent {
         this.theme = this.kitThemeService.theme;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitNotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: KitNotFoundComponent, isStandalone: true, selector: "kit-not-found", ngImport: i0, template: "<div class=\"kit-not-found\"\n     [ngClass]=\"theme()\">\n  <div class=\"kit-not-found-content\">\n    <div class=\"kit-not-found-title\">\n      {{ \"kit.notFound.title\" | translate }}\n    </div>\n    <div class=\"kit-not-found-subtitle\">\n      {{ \"kit.notFound.subtitle\" | translate }}\n    </div>\n    <div class=\"kit-not-found-description\"\n         [innerHTML]=\"'kit.notFound.description' | translate\"\n    ></div>\n  </div>\n</div>", styles: [".kit-not-found{height:100%}.kit-not-found-content{display:flex;flex-direction:column;justify-content:center;flex:1 0 0;align-items:center;padding:60px 0;color:var(--ui-kit-color-grey-10);font-size:16px;text-align:center;line-height:1}.kit-not-found-title{font-weight:700;font-size:80px}.kit-not-found-subtitle{font-size:40px}.kit-not-found-description{margin-top:40px;color:var(--ui-kit-color-grey-14);line-height:120%}.kit-not-found.dark .kit-not-found-content,.kit-not-found.dark .kit-not-found-description{color:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: KitNotFoundComponent, isStandalone: true, selector: "kit-not-found", ngImport: i0, template: "<div class=\"kit-not-found\"\n     [ngClass]=\"theme()\">\n  <div class=\"kit-not-found-content\">\n    <div class=\"kit-not-found-title\">\n      {{ \"kit.notFound.title\" | translate }}\n    </div>\n    <div class=\"kit-not-found-subtitle\">\n      {{ \"kit.notFound.subtitle\" | translate }}\n    </div>\n    <div class=\"kit-not-found-description\"\n         [innerHTML]=\"'kit.notFound.description' | translate\"\n    ></div>\n  </div>\n</div>", styles: [".kit-not-found{height:100%}.kit-not-found-content{display:flex;flex-direction:column;justify-content:center;flex:1 0 0;align-items:center;padding:60px 0;color:var(--ui-kit-color-grey-10);font-size:16px;text-align:center;line-height:1}.kit-not-found-title{font-weight:700;font-size:80px}.kit-not-found-subtitle{font-size:40px}.kit-not-found-description{margin-top:40px;color:var(--ui-kit-color-grey-14);line-height:120%}.kit-not-found.dark .kit-not-found-content,.kit-not-found.dark .kit-not-found-description{color:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitNotFoundComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-not-found', imports: [
-                        TranslateModule,
+                        TranslatePipe,
                         NgClass,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-not-found\"\n     [ngClass]=\"theme()\">\n  <div class=\"kit-not-found-content\">\n    <div class=\"kit-not-found-title\">\n      {{ \"kit.notFound.title\" | translate }}\n    </div>\n    <div class=\"kit-not-found-subtitle\">\n      {{ \"kit.notFound.subtitle\" | translate }}\n    </div>\n    <div class=\"kit-not-found-description\"\n         [innerHTML]=\"'kit.notFound.description' | translate\"\n    ></div>\n  </div>\n</div>", styles: [".kit-not-found{height:100%}.kit-not-found-content{display:flex;flex-direction:column;justify-content:center;flex:1 0 0;align-items:center;padding:60px 0;color:var(--ui-kit-color-grey-10);font-size:16px;text-align:center;line-height:1}.kit-not-found-title{font-weight:700;font-size:80px}.kit-not-found-subtitle{font-size:40px}.kit-not-found-description{margin-top:40px;color:var(--ui-kit-color-grey-14);line-height:120%}.kit-not-found.dark .kit-not-found-content,.kit-not-found.dark .kit-not-found-description{color:var(--ui-kit-color-white)}\n"] }]
         }] });
@@ -17335,12 +17333,12 @@ class KitForbiddenComponent {
         this.theme = this.kitThemeService.theme;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitForbiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: KitForbiddenComponent, isStandalone: true, selector: "kit-forbidden", ngImport: i0, template: "<div class=\"kit-forbidden\"\n     [ngClass]=\"theme()\">\n  <div class=\"kit-forbidden-content\">\n    <div class=\"kit-forbidden-title\">\n      {{ \"kit.forbidden.title\" | translate }}\n    </div>\n    <div class=\"kit-forbidden-subtitle\">\n      {{ \"kit.forbidden.subtitle\" | translate }}\n    </div>\n    <div class=\"kit-forbidden-description\"\n         [innerHTML]=\"'kit.forbidden.description' | translate\"\n    ></div>\n    <div class=\"kit-forbidden-action\">\n      <kit-button [label]=\"'kit.forbidden.logout' | translate\"\n                  [icon]=\"KitSvgIcon.LOGOUT\"\n                  [type]=\"KitButtonType.LINK\"\n                  [iconType]=\"KitSvgIconType.STROKE\"\n                  (clicked)=\"kitAccountService.logout()\"\n      ></kit-button>\n    </div>\n  </div>\n</div>\n\n", styles: [".kit-forbidden{height:100%}.kit-forbidden-content{display:flex;flex-direction:column;justify-content:center;flex:1 0 0;align-items:center;padding:60px 0;color:var(--ui-kit-color-grey-10);font-size:16px;text-align:center;line-height:1}.kit-forbidden-title{font-weight:700;font-size:80px}.kit-forbidden-subtitle{font-size:40px}.kit-forbidden-description{margin-top:40px;color:var(--ui-kit-color-grey-14);line-height:120%}.kit-forbidden-action{margin-top:20px}.kit-forbidden.dark .kit-forbidden-content,.kit-forbidden.dark .kit-forbidden-description{color:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: KitForbiddenComponent, isStandalone: true, selector: "kit-forbidden", ngImport: i0, template: "<div class=\"kit-forbidden\"\n     [ngClass]=\"theme()\">\n  <div class=\"kit-forbidden-content\">\n    <div class=\"kit-forbidden-title\">\n      {{ \"kit.forbidden.title\" | translate }}\n    </div>\n    <div class=\"kit-forbidden-subtitle\">\n      {{ \"kit.forbidden.subtitle\" | translate }}\n    </div>\n    <div class=\"kit-forbidden-description\"\n         [innerHTML]=\"'kit.forbidden.description' | translate\"\n    ></div>\n    <div class=\"kit-forbidden-action\">\n      <kit-button [label]=\"'kit.forbidden.logout' | translate\"\n                  [icon]=\"KitSvgIcon.LOGOUT\"\n                  [type]=\"KitButtonType.LINK\"\n                  [iconType]=\"KitSvgIconType.STROKE\"\n                  (clicked)=\"kitAccountService.logout()\"\n      ></kit-button>\n    </div>\n  </div>\n</div>\n\n", styles: [".kit-forbidden{height:100%}.kit-forbidden-content{display:flex;flex-direction:column;justify-content:center;flex:1 0 0;align-items:center;padding:60px 0;color:var(--ui-kit-color-grey-10);font-size:16px;text-align:center;line-height:1}.kit-forbidden-title{font-weight:700;font-size:80px}.kit-forbidden-subtitle{font-size:40px}.kit-forbidden-description{margin-top:40px;color:var(--ui-kit-color-grey-14);line-height:120%}.kit-forbidden-action{margin-top:20px}.kit-forbidden.dark .kit-forbidden-content,.kit-forbidden.dark .kit-forbidden-description{color:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitForbiddenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-forbidden', imports: [
-                        TranslateModule,
+                        TranslatePipe,
                         KitButtonComponent,
                         NgClass,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-forbidden\"\n     [ngClass]=\"theme()\">\n  <div class=\"kit-forbidden-content\">\n    <div class=\"kit-forbidden-title\">\n      {{ \"kit.forbidden.title\" | translate }}\n    </div>\n    <div class=\"kit-forbidden-subtitle\">\n      {{ \"kit.forbidden.subtitle\" | translate }}\n    </div>\n    <div class=\"kit-forbidden-description\"\n         [innerHTML]=\"'kit.forbidden.description' | translate\"\n    ></div>\n    <div class=\"kit-forbidden-action\">\n      <kit-button [label]=\"'kit.forbidden.logout' | translate\"\n                  [icon]=\"KitSvgIcon.LOGOUT\"\n                  [type]=\"KitButtonType.LINK\"\n                  [iconType]=\"KitSvgIconType.STROKE\"\n                  (clicked)=\"kitAccountService.logout()\"\n      ></kit-button>\n    </div>\n  </div>\n</div>\n\n", styles: [".kit-forbidden{height:100%}.kit-forbidden-content{display:flex;flex-direction:column;justify-content:center;flex:1 0 0;align-items:center;padding:60px 0;color:var(--ui-kit-color-grey-10);font-size:16px;text-align:center;line-height:1}.kit-forbidden-title{font-weight:700;font-size:80px}.kit-forbidden-subtitle{font-size:40px}.kit-forbidden-description{margin-top:40px;color:var(--ui-kit-color-grey-14);line-height:120%}.kit-forbidden-action{margin-top:20px}.kit-forbidden.dark .kit-forbidden-content,.kit-forbidden.dark .kit-forbidden-description{color:var(--ui-kit-color-white)}\n"] }]
@@ -18432,7 +18430,7 @@ class KitTreeComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitTreeComponent, isStandalone: true, selector: "kit-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             KitClipboardService,
-        ], queries: [{ propertyName: "contentTemplates", predicate: KitTreeContentDirective, isSignal: true }], ngImport: i0, template: "<div class=\"kit-tree\">\n  <div class=\"kit-tree-toolbar\">\n    @if (isStructuredFormat()) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"toggleAllTitleKey() | translate\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"toggleAllIcon()\"\n                  [disabled]=\"isExpandAllDisabled()\"\n                  (clicked)=\"toggleAll()\"\n      ></kit-button>\n    }\n    <kit-button kitTooltip\n                kitTooltipFilter=\"kit-button\"\n                [title]=\"'kit.tree.actions.copyRaw' | translate\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.COPY\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                (clicked)=\"copyRawInput()\"\n    ></kit-button>\n    <kit-button kitTooltip\n                kitTooltipFilter=\"kit-button\"\n                [title]=\"'kit.tree.actions.copyPrettified' | translate\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.MAGIC_WAND\"\n                (clicked)=\"copyPrettifiedInput()\"\n    ></kit-button>\n\n    @if (isStructuredFormat()) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"toggleViewTitleKey() | translate\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"toggleViewIcon()\"\n                  [active]=\"isRawView()\"\n                  (clicked)=\"toggleRawFormattedView()\"\n      ></kit-button>\n    }\n\n    @for (action of customActions(); track action.id) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"action.label\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"action.icon\"\n                  [active]=\"activeCustomActionId() === action.id\"\n                  [disabled]=\"!!action.disabled\"\n                  (clicked)=\"onCustomActionClick(action)\"\n      ></kit-button>\n    }\n  </div>\n\n  <div class=\"kit-tree-content\">\n    @if (isCustomContentActive()) {\n      <div class=\"kit-tree-custom-content\">\n        <ng-container [ngTemplateOutlet]=\"activeTemplate()?.templateRef ?? null\"></ng-container>\n      </div>\n    } @else if (isRawView() || !isStructuredFormat()) {\n      <pre class=\"kit-tree-raw\">{{ rawContent() }}</pre>\n    } @else {\n      <kendo-treeview kendoTreeViewHierarchyBinding\n                      kendoTreeViewExpandable\n                      childrenField=\"children\"\n                      textField=\"displayKey\"\n                      expandBy=\"key\"\n                      [nodes]=\"treeNodes()\"\n                      [expandedKeys]=\"expandedKeys()\"\n                      (expandedKeysChange)=\"onExpandedKeysChange($event)\">\n        <ng-template kendoTreeViewNodeTemplate\n                     let-dataItem>\n          <div class=\"kit-tree-node\">\n            @if (dataItem.displayValue !== undefined) {\n              <div class=\"kit-tree-node-key\">{{ dataItem.displayKey }}</div>\n              <div class=\"kit-tree-node-separator\">:</div>\n              @if (!isNodeExpanded(dataItem)) {\n                <div class=\"kit-tree-node-value\">{{ dataItem.displayValue }}</div>\n              }\n            } @else {\n              <div class=\"kit-tree-node-key\">{{ dataItem.text }}</div>\n            }\n          </div>\n        </ng-template>\n      </kendo-treeview>\n    }\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;--ui-kit-sidebar-collapsed-width: 56px;--ui-kit-sidebar-expanded-width: 256px;--ui-kit-layout-gap: 25px}.kit-tree{padding:15px;background-color:var(--ui-kit-color-white);border:1px solid var(--ui-kit-color-grey-11);border-radius:10px}.kit-tree-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tree-content{padding:15px 0 0}.kit-tree-node{display:flex;align-items:center;gap:5px;padding:3px 0;font-size:14px;font-family:monospace;line-height:1.5}.kit-tree-node-key{color:var(--ui-kit-color-grey-10);font-weight:600}.kit-tree-node-separator{color:var(--ui-kit-color-grey-10)}.kit-tree-node-value{color:var(--ui-kit-color-main)}.kit-tree-raw{margin:0;padding:10px;color:var(--ui-kit-color-grey-10);font-family:monospace;border-radius:6px;white-space:pre-wrap;word-break:break-word;background:var(--ui-kit-color-grey-8)}.kit-tree .k-treeview::-webkit-scrollbar{height:8px;width:8px;background-color:var(--ui-kit-color-white)}.kit-tree .k-treeview::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-tree .k-treeview::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-tree .k-treeview{scrollbar-color:initial}.kit-tree .k-treeview-group{padding-left:20px}.kit-tree .k-treeview-lines{margin:0;padding:0;list-style:none}.kit-tree .k-treeview-leaf{padding:0}.kit-tree .k-treeview-item{list-style:none}.kit-tree .k-treeview-item-content{display:flex;align-items:center;gap:5px;padding-inline-start:calc(var(--kendo-treeview-level, 0) * 20px)}.kit-tree .k-treeview-item-content:hover{background:none}.kit-tree .k-treeview-item-content.k-focus{box-shadow:none}.kit-tree .k-treeview-toggle{margin-inline-start:-25px;width:18px;height:18px;cursor:pointer}.kit-tree .k-treeview-toggle:hover{color:var(--ui-kit-color-main)}.kit-tree .k-treeview-toggle .k-icon{padding:0;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: i1$g.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: i1$g.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { kind: "directive", type: i1$g.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: i1$g.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "contentTemplates", predicate: KitTreeContentDirective, isSignal: true }], ngImport: i0, template: "<div class=\"kit-tree\">\n  <div class=\"kit-tree-toolbar\">\n    @if (isStructuredFormat()) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"toggleAllTitleKey() | translate\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"toggleAllIcon()\"\n                  [disabled]=\"isExpandAllDisabled()\"\n                  (clicked)=\"toggleAll()\"\n      ></kit-button>\n    }\n    <kit-button kitTooltip\n                kitTooltipFilter=\"kit-button\"\n                [title]=\"'kit.tree.actions.copyRaw' | translate\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.COPY\"\n                [iconType]=\"kitSvgIconType.STROKE\"\n                (clicked)=\"copyRawInput()\"\n    ></kit-button>\n    <kit-button kitTooltip\n                kitTooltipFilter=\"kit-button\"\n                [title]=\"'kit.tree.actions.copyPrettified' | translate\"\n                [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.MAGIC_WAND\"\n                (clicked)=\"copyPrettifiedInput()\"\n    ></kit-button>\n\n    @if (isStructuredFormat()) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"toggleViewTitleKey() | translate\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"toggleViewIcon()\"\n                  [active]=\"isRawView()\"\n                  (clicked)=\"toggleRawFormattedView()\"\n      ></kit-button>\n    }\n\n    @for (action of customActions(); track action.id) {\n      <kit-button kitTooltip\n                  kitTooltipFilter=\"kit-button\"\n                  [title]=\"action.label\"\n                  [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [icon]=\"action.icon\"\n                  [active]=\"activeCustomActionId() === action.id\"\n                  [disabled]=\"!!action.disabled\"\n                  (clicked)=\"onCustomActionClick(action)\"\n      ></kit-button>\n    }\n  </div>\n\n  <div class=\"kit-tree-content\">\n    @if (isCustomContentActive()) {\n      <div class=\"kit-tree-custom-content\">\n        <ng-container [ngTemplateOutlet]=\"activeTemplate()?.templateRef ?? null\"></ng-container>\n      </div>\n    } @else if (isRawView() || !isStructuredFormat()) {\n      <pre class=\"kit-tree-raw\">{{ rawContent() }}</pre>\n    } @else {\n      <kendo-treeview kendoTreeViewHierarchyBinding\n                      kendoTreeViewExpandable\n                      childrenField=\"children\"\n                      textField=\"displayKey\"\n                      expandBy=\"key\"\n                      [nodes]=\"treeNodes()\"\n                      [expandedKeys]=\"expandedKeys()\"\n                      (expandedKeysChange)=\"onExpandedKeysChange($event)\">\n        <ng-template kendoTreeViewNodeTemplate\n                     let-dataItem>\n          <div class=\"kit-tree-node\">\n            @if (dataItem.displayValue !== undefined) {\n              <div class=\"kit-tree-node-key\">{{ dataItem.displayKey }}</div>\n              <div class=\"kit-tree-node-separator\">:</div>\n              @if (!isNodeExpanded(dataItem)) {\n                <div class=\"kit-tree-node-value\">{{ dataItem.displayValue }}</div>\n              }\n            } @else {\n              <div class=\"kit-tree-node-key\">{{ dataItem.text }}</div>\n            }\n          </div>\n        </ng-template>\n      </kendo-treeview>\n    }\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;--ui-kit-sidebar-collapsed-width: 56px;--ui-kit-sidebar-expanded-width: 256px;--ui-kit-layout-gap: 25px}.kit-tree{padding:15px;background-color:var(--ui-kit-color-white);border:1px solid var(--ui-kit-color-grey-11);border-radius:10px}.kit-tree-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-tree-content{padding:15px 0 0}.kit-tree-node{display:flex;align-items:center;gap:5px;padding:3px 0;font-size:14px;font-family:monospace;line-height:1.5}.kit-tree-node-key{color:var(--ui-kit-color-grey-10);font-weight:600}.kit-tree-node-separator{color:var(--ui-kit-color-grey-10)}.kit-tree-node-value{color:var(--ui-kit-color-main)}.kit-tree-raw{margin:0;padding:10px;color:var(--ui-kit-color-grey-10);font-family:monospace;border-radius:6px;white-space:pre-wrap;word-break:break-word;background:var(--ui-kit-color-grey-8)}.kit-tree .k-treeview::-webkit-scrollbar{height:8px;width:8px;background-color:var(--ui-kit-color-white)}.kit-tree .k-treeview::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-tree .k-treeview::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-tree .k-treeview{scrollbar-color:initial}.kit-tree .k-treeview-group{padding-left:20px}.kit-tree .k-treeview-lines{margin:0;padding:0;list-style:none}.kit-tree .k-treeview-leaf{padding:0}.kit-tree .k-treeview-item{list-style:none}.kit-tree .k-treeview-item-content{display:flex;align-items:center;gap:5px;padding-inline-start:calc(var(--kendo-treeview-level, 0) * 20px)}.kit-tree .k-treeview-item-content:hover{background:none}.kit-tree .k-treeview-item-content.k-focus{box-shadow:none}.kit-tree .k-treeview-toggle{margin-inline-start:-25px;width:18px;height:18px;cursor:pointer}.kit-tree .k-treeview-toggle:hover{color:var(--ui-kit-color-main)}.kit-tree .k-treeview-toggle .k-icon{padding:0;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: i1$f.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: i1$f.NodeTemplateDirective, selector: "[kendoTreeViewNodeTemplate]" }, { kind: "directive", type: i1$f.ExpandDirective, selector: "[kendoTreeViewExpandable]", inputs: ["isExpanded", "expandBy", "expandOnFilter", "expandedKeys"], outputs: ["expandedKeysChange"] }, { kind: "directive", type: i1$f.HierarchyBindingDirective, selector: "[kendoTreeViewHierarchyBinding]", inputs: ["childrenField", "nodes", "isVisible", "loadOnDemand"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitTreeComponent, decorators: [{
             type: Component,