@indigina/ui-kit 1.1.435 → 1.1.437

package/fesm2022/indigina-ui-kit.mjs

@@ -1,4 +1,4 @@
-import * as i1$7 from '@angular/common';
+import * as i1$6 from '@angular/common';
 import { NgClass, NgTemplateOutlet, CommonModule, DatePipe, AsyncPipe, TitleCasePipe, DecimalPipe, Location } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, InjectionToken, inject, Injectable, effect, ElementRef, NgZone, Renderer2, Directive, viewChild, model, output, forwardRef, signal, HostListener, TemplateRef, ContentChild, computed, NgModule, RendererFactory2, ViewChild, DOCUMENT, ViewContainerRef, DestroyRef, contentChildren, ContentChildren, viewChildren, contentChild, Pipe, Injector, runInInjectionContext } from '@angular/core';
@@ -11,7 +11,7 @@ import { LabelModule } from '@progress/kendo-angular-label';
 import * as i1$1 from '@progress/kendo-angular-tooltip';
 import { TooltipDirective, TooltipSettings, PopoverAnchorDirective, PopoverComponent, PopoverModule } from '@progress/kendo-angular-tooltip';
 import { PopupService, POPUP_CONTAINER } from '@progress/kendo-angular-popup';
-import * as i1$6 from '@angular/forms';
+import * as i1$7 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule, UntypedFormControl, UntypedFormBuilder, Validators, FormBuilder } from '@angular/forms';
 import * as i1$3 from '@progress/kendo-angular-inputs';
 import { TextBoxComponent, TextBoxModule, NumericTextBoxComponent, NumericTextBoxModule, InputsModule, CheckBoxModule, SwitchModule, RadioButtonModule, KENDO_INPUTS } from '@progress/kendo-angular-inputs';
@@ -2181,6 +2181,107 @@ var KitNotificationType;
     KitNotificationType["SUCCESS"] = "success";
 })(KitNotificationType || (KitNotificationType = {}));
 
+var KitPillType;
+(function (KitPillType) {
+    KitPillType["DEFAULT"] = "default";
+    KitPillType["DASHED"] = "dashed";
+})(KitPillType || (KitPillType = {}));
+var KitPillTheme;
+(function (KitPillTheme) {
+    KitPillTheme["DEFAULT"] = "default";
+    KitPillTheme["BLUE"] = "blue";
+    KitPillTheme["MAIN"] = "main";
+})(KitPillTheme || (KitPillTheme = {}));
+
+class KitPillComponent {
+    constructor() {
+        /**
+         * Defines if the pill will be removable. If set to true pill renders a remove button
+         */
+        this.removable = false;
+        /**
+         * Defines if the pill will be selectable
+         */
+        this.selectable = false;
+        /**
+         * Defines the selected state of the pill
+         */
+        this.selected = false;
+        /**
+         * Defines the pill type
+         */
+        this.type = KitPillType.DEFAULT;
+        /**
+         * Defines the color theme of the pill
+         */
+        this.theme = input(KitPillTheme.DEFAULT, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+        /**
+         * An action which is emitted when the pill is clicked
+         */
+        this.clicked = new EventEmitter();
+        /**
+         * An action which is emitted when the close button is clicked
+         */
+        this.removed = new EventEmitter();
+        this.closeIcon = KitSvgIcon.CROSS;
+        this.kitSvgIconType = KitSvgIconType;
+    }
+    get cssClasses() {
+        return {
+            selectable: this.selectable,
+            selected: this.selected,
+            [`${this.type}-type`]: true,
+            [`${this.theme()}-theme`]: true,
+        };
+    }
+    onComponentClick() {
+        if (!this.selectable) {
+            return;
+        }
+        this.clicked.emit(!this.selected);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitPillComponent, isStandalone: true, selector: "kit-pill", inputs: { removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { listeners: { "click": "onComponentClick()" } }, ngImport: i0, template: "<div class=\"kit-pill\"\n     [ngClass]=\"cssClasses\">\n  @if (icon) {\n    <kit-svg-icon class=\"kit-pill-icon\"\n                  [icon]=\"icon\"\n                  [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  }\n  <div class=\"kit-pill-content\">\n    <ng-content\n    ></ng-content>\n  </div>\n  @if (removable) {\n    <button class=\"kit-pill-remove\"\n            (click)=\"removed.emit()\">\n      <kit-svg-icon class=\"remove-icon\"\n                    [icon]=\"closeIcon\"\n      ></kit-svg-icon>\n    </button>\n  }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover.main-theme,.kit-pill.selectable.selected.main-theme{color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-background)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPillComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-pill', imports: [
+                        CommonModule,
+                        KitSvgIconComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-pill\"\n     [ngClass]=\"cssClasses\">\n  @if (icon) {\n    <kit-svg-icon class=\"kit-pill-icon\"\n                  [icon]=\"icon\"\n                  [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  }\n  <div class=\"kit-pill-content\">\n    <ng-content\n    ></ng-content>\n  </div>\n  @if (removable) {\n    <button class=\"kit-pill-remove\"\n            (click)=\"removed.emit()\">\n      <kit-svg-icon class=\"remove-icon\"\n                    [icon]=\"closeIcon\"\n      ></kit-svg-icon>\n    </button>\n  }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover.main-theme,.kit-pill.selectable.selected.main-theme{color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-background)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"] }]
+        }], propDecorators: { removable: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], icon: [{
+                type: Input
+            }], iconType: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }], onComponentClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+var KitLocationStepperTheme;
+(function (KitLocationStepperTheme) {
+    KitLocationStepperTheme["DEFAULT"] = "default";
+    KitLocationStepperTheme["CUSTOM"] = "custom";
+})(KitLocationStepperTheme || (KitLocationStepperTheme = {}));
+var KitLocationStepperIconTheme;
+(function (KitLocationStepperIconTheme) {
+    KitLocationStepperIconTheme["GREEN"] = "green";
+    KitLocationStepperIconTheme["BLUE"] = "blue";
+    KitLocationStepperIconTheme["GREY"] = "grey";
+})(KitLocationStepperIconTheme || (KitLocationStepperIconTheme = {}));
+
 class KitLocationStepperComponent {
     constructor() {
         /**
@@ -2188,10 +2289,14 @@ class KitLocationStepperComponent {
          */
         this.items = [];
         this.toolTipPosition = KitTooltipPosition.RIGHT;
+        this.theme = input(KitLocationStepperTheme.DEFAULT, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+        this.hideDates = input(false, ...(ngDevMode ? [{ debugName: "hideDates" }] : /* istanbul ignore next */ []));
         this.KitSvgIcon = KitSvgIcon;
+        this.KitSvgIconType = KitSvgIconType;
+        this.KitPillTheme = KitPillTheme;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitLocationStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitLocationStepperComponent, isStandalone: true, selector: "kit-location-stepper", inputs: { items: "items", toolTipPosition: "toolTipPosition" }, ngImport: i0, template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n                [title]=\"item.title\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  @if (item.toolTipText) {\n    <div class=\"description-location\"\n         kitTooltip\n         kitTooltipFilter=\"div.description-location\"\n         tooltipClass=\"location-tooltip-wrapper\"\n         [kitTooltipTemplateRef]=\"toolTip\"\n         [kitTooltipPosition]=\"toolTipPosition\">\n      <div class=\"title\">{{ item.title }}</div>\n      @if (item.description) {\n        <div class=\"caption\">{{ item.description }}</div>\n      }\n    </div>\n  }\n\n  @if (!item.toolTipText) {\n    <div class=\"description-location\">\n      <div class=\"title\">{{ item.title }}</div>\n      @if (item.description) {\n        <div class=\"caption\">{{ item.description }}</div>\n      }\n    </div>\n  }\n\n  @if (item.name) {\n    <div class=\"description-name\">{{ item.name }}</div>\n  }\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  @for (date of dates; track date) {\n    <div class=\"date display-flex\">\n      <span class=\"date-description\">{{ date.description }}</span>\n      <span>{{ date.value }}</span>\n    </div>\n  }\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  @for (item of items; track $index) {\n    <div class=\"step {{ item.cssClass }}\"\n         [class.first]=\"$first\"\n         [class.last]=\"$last\"\n         [class.has-sub-items]=\"!!item.subItems\">\n      <div class=\"step-inner display-flex\">\n        @if (item.dates?.length) {\n          <div class=\"dates\">\n            <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n          </div>\n        }\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n        </div>\n      </div>\n      @if (item.subItems?.length) {\n        <div class=\"sub-items\">\n          @for (subItem of item.subItems; track subItem) {\n            <div class=\"sub-item display-flex {{ subItem.cssClass }}\">\n              @if (subItem.dates?.length) {\n                <div class=\"dates\">\n                  <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n                </div>\n              }\n              <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n              <div class=\"description\">\n                <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <div class=\"step-line\"></div>\n    </div>\n  }\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-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitLocationStepperComponent, isStandalone: true, selector: "kit-location-stepper", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, toolTipPosition: { classPropertyName: "toolTipPosition", publicName: "toolTipPosition", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, hideDates: { classPropertyName: "hideDates", publicName: "hideDates", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon {{ item.iconTheme }}\"\n                [title]=\"item.title\"\n                [ngClass]=\"item.iconType ?? KitSvgIconType.FILL\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  @if (item.toolTipText) {\n    <div class=\"description-location\"\n         kitTooltip\n         kitTooltipFilter=\"div.description-location\"\n         tooltipClass=\"location-tooltip-wrapper\"\n         [kitTooltipTemplateRef]=\"toolTip\"\n         [kitTooltipPosition]=\"toolTipPosition\">\n      <ng-container *ngTemplateOutlet=\"textInfo; context: { item: item }\"></ng-container>\n    </div>\n  }\n\n  @if (!item.toolTipText) {\n    <div class=\"description-location\">\n      <ng-container *ngTemplateOutlet=\"textInfo; context: { item: item }\"></ng-container>\n    </div>\n  }\n\n  @if (item.name) {\n    <div class=\"description-name\">{{ item.name }}</div>\n  }\n</ng-template>\n\n<ng-template #textInfo let-item=\"item\">\n  <div class=\"title\">{{ item.title }}</div>\n  @if (item.description) {\n    <div class=\"caption\">{{ item.description }}</div>\n  }\n  @if (item.label) {\n    <kit-pill class=\"description-label\"\n              [theme]=\"KitPillTheme.BLUE\">\n      {{ item.label }}\n    </kit-pill>\n  }\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  @for (date of dates; track date) {\n    <div class=\"date display-flex\">\n      <span class=\"date-description\">{{ date.description }}</span>\n      <span>{{ date.value }}</span>\n    </div>\n  }\n</ng-template>\n\n<div class=\"kit-location-stepper\"\n     [ngClass]=\"[theme(), hideDates() ? 'hide-dates' : '']\">\n  @for (item of items; track item) {\n    <div class=\"step {{ item.cssClass }}\"\n         [class.first]=\"$first\"\n         [class.last]=\"$last\"\n         [class.has-sub-items]=\"!!item.subItems\">\n      <div class=\"step-inner display-flex\">\n        @if (item.dates?.length) {\n          <div class=\"dates\">\n            <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n          </div>\n        }\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n        <div class=\"description {{ item.iconTheme }}\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n        </div>\n      </div>\n      @if (item.subItems?.length) {\n        <div class=\"sub-items\">\n          @for (subItem of item.subItems; track subItem) {\n            <div class=\"sub-item display-flex {{ subItem.cssClass }}\">\n              @if (subItem.dates?.length) {\n                <div class=\"dates\">\n                  <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n                </div>\n              }\n              <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n              <div class=\"description\">\n                <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <div class=\"step-line {{ item.iconTheme }}\"></div>\n    </div>\n  }\n</div>\n", styles: [".kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;left:197px;width:2px;height:100%}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:var(--ui-kit-color-cobalt-darkest);font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:var(--ui-kit-color-green);font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;align-items:center;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:var(--ui-kit-color-main);font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .description-label{display:block;width:fit-content;margin-top:6px;border-radius:16777200px;overflow:hidden}.kit-location-stepper .description-label .kit-pill.default-type.blue-theme{border:none}.kit-location-stepper .location-icon{flex-shrink:0;position:relative;z-index:1}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:var(--ui-kit-color-cobalt-darkest);font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:var(--ui-kit-color-grey-7);font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid var(--ui-kit-color-red);border-radius:4px;background-color:var(--ui-kit-color-red-20)}.kit-location-stepper .danger .location-icon{fill:var(--ui-kit-color-red-20);background-color:var(--ui-kit-color-red-20)}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:var(--ui-kit-color-white)}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:var(--ui-kit-color-grey-8)}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid var(--ui-kit-color-red);border-radius:4px;background-color:var(--ui-kit-color-red-20)}.kit-location-stepper .sub-item.danger .location-icon{background-color:var(--ui-kit-color-red-20)}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.kit-location-stepper.default .step-line{background-color:var(--ui-kit-color-grey-8);top:24px}.kit-location-stepper.default .location-icon{background:var(--ui-kit-color-white);width:24px;height:24px}.kit-location-stepper.default .location-icon.fill{fill:var(--ui-kit-color-grey-7);stroke:none}.kit-location-stepper.default .location-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-7)}.kit-location-stepper.default .last .location-icon.fill{fill:var(--ui-kit-color-violet);stroke:none}.kit-location-stepper.default .last .location-icon.stroke{fill:none;stroke:var(--ui-kit-color-violet)}.kit-location-stepper.default .first .location-icon.fill{fill:var(--ui-kit-color-green);stroke:none}.kit-location-stepper.default .first .location-icon.stroke{fill:none;stroke:var(--ui-kit-color-green)}.kit-location-stepper.custom .step-inner{padding:20px 0 0}.kit-location-stepper.custom .title{letter-spacing:0;font-size:14px;line-height:20px;font-weight:400;color:var(--ui-kit-color-grey-22);text-transform:capitalize}.kit-location-stepper.custom .caption{color:var(--ui-kit-color-grey-23);font-size:12px;font-weight:400}.kit-location-stepper.custom .description.grey{color:var(--ui-kit-color-grey-20)}.kit-location-stepper.custom .step-line{background-color:var(--ui-kit-color-grey-21);top:32px}.kit-location-stepper.custom .step-line.grey{background-color:var(--ui-kit-color-grey-20)}.kit-location-stepper.custom .location-icon{width:32px;height:32px;border-radius:50%}.kit-location-stepper.custom .location-icon.green{background:var(--ui-kit-color-green-8)}.kit-location-stepper.custom .location-icon.green.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-location-stepper.custom .location-icon.green.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-location-stepper.custom .location-icon.blue{background:var(--ui-kit-color-blue-2)}.kit-location-stepper.custom .location-icon.blue.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-location-stepper.custom .location-icon.blue.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-location-stepper.custom .location-icon.grey{background:var(--ui-kit-color-grey-19)}.kit-location-stepper.custom .location-icon.grey.fill{fill:var(--ui-kit-color-grey-20);stroke:none}.kit-location-stepper.custom .location-icon.grey.stroke{fill:none;stroke:var(--ui-kit-color-grey-20)}.kit-location-stepper.custom .location-icon .kit-svg-icon{width:16px;margin:auto}.kit-location-stepper.hide-dates .dates{display:none}.kit-location-stepper.hide-dates .step-line{left:15px}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitLocationStepperComponent, decorators: [{
             type: Component,
@@ -2199,12 +2304,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitSvgIconComponent,
                         KitTooltipDirective,
                         NgTemplateOutlet,
-                    ], template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon\"\n                [title]=\"item.title\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  @if (item.toolTipText) {\n    <div class=\"description-location\"\n         kitTooltip\n         kitTooltipFilter=\"div.description-location\"\n         tooltipClass=\"location-tooltip-wrapper\"\n         [kitTooltipTemplateRef]=\"toolTip\"\n         [kitTooltipPosition]=\"toolTipPosition\">\n      <div class=\"title\">{{ item.title }}</div>\n      @if (item.description) {\n        <div class=\"caption\">{{ item.description }}</div>\n      }\n    </div>\n  }\n\n  @if (!item.toolTipText) {\n    <div class=\"description-location\">\n      <div class=\"title\">{{ item.title }}</div>\n      @if (item.description) {\n        <div class=\"caption\">{{ item.description }}</div>\n      }\n    </div>\n  }\n\n  @if (item.name) {\n    <div class=\"description-name\">{{ item.name }}</div>\n  }\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  @for (date of dates; track date) {\n    <div class=\"date display-flex\">\n      <span class=\"date-description\">{{ date.description }}</span>\n      <span>{{ date.value }}</span>\n    </div>\n  }\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  @for (item of items; track $index) {\n    <div class=\"step {{ item.cssClass }}\"\n         [class.first]=\"$first\"\n         [class.last]=\"$last\"\n         [class.has-sub-items]=\"!!item.subItems\">\n      <div class=\"step-inner display-flex\">\n        @if (item.dates?.length) {\n          <div class=\"dates\">\n            <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n          </div>\n        }\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n        </div>\n      </div>\n      @if (item.subItems?.length) {\n        <div class=\"sub-items\">\n          @for (subItem of item.subItems; track subItem) {\n            <div class=\"sub-item display-flex {{ subItem.cssClass }}\">\n              @if (subItem.dates?.length) {\n                <div class=\"dates\">\n                  <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n                </div>\n              }\n              <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n              <div class=\"description\">\n                <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <div class=\"step-line\"></div>\n    </div>\n  }\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-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;top:24px;left:197px;width:2px;height:100%;background-color:#efefef}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:#002a3a;font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:#00b0ad;font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:#56a2f7;font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .location-icon{flex-shrink:0;width:24px;height:24px;background:#fff;stroke:#a9a8a8;fill:#fff;position:relative;z-index:1}.kit-location-stepper .last .location-icon{stroke:#4e4696}.kit-location-stepper .first .location-icon{stroke:#00b0ad}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:#002a3a;font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:#a9a8a8;font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .danger .location-icon{fill:#f8e0e0;background-color:#f8e0e0}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:#fff}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:#efefef}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid #ef3e42;border-radius:4px;background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon{background-color:#f8e0e0}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"] }]
+                        NgClass,
+                        KitPillComponent,
+                    ], template: "<ng-template #icon let-item=\"item\">\n  <kit-svg-icon [icon]=\"item.icon\" class=\"display-block location-icon {{ item.iconTheme }}\"\n                [title]=\"item.title\"\n                [ngClass]=\"item.iconType ?? KitSvgIconType.FILL\"\n  ></kit-svg-icon>\n</ng-template>\n\n<ng-template #description let-item=\"item\">\n  <ng-template #toolTip>\n    <span class=\"location-tooltip\">{{ item.toolTipText }}</span>\n  </ng-template>\n  @if (item.toolTipText) {\n    <div class=\"description-location\"\n         kitTooltip\n         kitTooltipFilter=\"div.description-location\"\n         tooltipClass=\"location-tooltip-wrapper\"\n         [kitTooltipTemplateRef]=\"toolTip\"\n         [kitTooltipPosition]=\"toolTipPosition\">\n      <ng-container *ngTemplateOutlet=\"textInfo; context: { item: item }\"></ng-container>\n    </div>\n  }\n\n  @if (!item.toolTipText) {\n    <div class=\"description-location\">\n      <ng-container *ngTemplateOutlet=\"textInfo; context: { item: item }\"></ng-container>\n    </div>\n  }\n\n  @if (item.name) {\n    <div class=\"description-name\">{{ item.name }}</div>\n  }\n</ng-template>\n\n<ng-template #textInfo let-item=\"item\">\n  <div class=\"title\">{{ item.title }}</div>\n  @if (item.description) {\n    <div class=\"caption\">{{ item.description }}</div>\n  }\n  @if (item.label) {\n    <kit-pill class=\"description-label\"\n              [theme]=\"KitPillTheme.BLUE\">\n      {{ item.label }}\n    </kit-pill>\n  }\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  @for (date of dates; track date) {\n    <div class=\"date display-flex\">\n      <span class=\"date-description\">{{ date.description }}</span>\n      <span>{{ date.value }}</span>\n    </div>\n  }\n</ng-template>\n\n<div class=\"kit-location-stepper\"\n     [ngClass]=\"[theme(), hideDates() ? 'hide-dates' : '']\">\n  @for (item of items; track item) {\n    <div class=\"step {{ item.cssClass }}\"\n         [class.first]=\"$first\"\n         [class.last]=\"$last\"\n         [class.has-sub-items]=\"!!item.subItems\">\n      <div class=\"step-inner display-flex\">\n        @if (item.dates?.length) {\n          <div class=\"dates\">\n            <ng-container *ngTemplateOutlet=\"dates; context: { dates: item.dates }\"></ng-container>\n          </div>\n        }\n        <ng-container *ngTemplateOutlet=\"icon; context: { item: item }\"></ng-container>\n        <div class=\"description {{ item.iconTheme }}\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n        </div>\n      </div>\n      @if (item.subItems?.length) {\n        <div class=\"sub-items\">\n          @for (subItem of item.subItems; track subItem) {\n            <div class=\"sub-item display-flex {{ subItem.cssClass }}\">\n              @if (subItem.dates?.length) {\n                <div class=\"dates\">\n                  <ng-container *ngTemplateOutlet=\"dates; context: { dates: subItem.dates }\"></ng-container>\n                </div>\n              }\n              <ng-container *ngTemplateOutlet=\"icon; context: { item: subItem }\"></ng-container>\n              <div class=\"description\">\n                <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <div class=\"step-line {{ item.iconTheme }}\"></div>\n    </div>\n  }\n</div>\n", styles: [".kit-location-stepper .step{position:relative}.kit-location-stepper .step:not(:first-child){margin-top:1px}.kit-location-stepper .step:last-child .step-line{display:none}.kit-location-stepper .step-line{position:absolute;left:197px;width:2px;height:100%}.kit-location-stepper .step-inner{position:relative;padding:20px 0 12px;z-index:2}.kit-location-stepper .caption{margin-top:6px;color:var(--ui-kit-color-cobalt-darkest);font-size:14px;font-weight:500}.kit-location-stepper .title{text-transform:uppercase;color:var(--ui-kit-color-green);font-size:12px;font-weight:500;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kit-location-stepper .date:not(:first-child){margin-top:10px}.kit-location-stepper .description{display:flex;justify-content:space-between;align-items:center;margin-left:10px;flex:1 0;text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location,.kit-location-stepper .description-name{text-overflow:ellipsis;overflow:hidden}.kit-location-stepper .description-location{display:inline-block}.kit-location-stepper .description-name{padding-left:10px;min-width:80px;text-transform:uppercase;color:var(--ui-kit-color-main);font-size:12px;font-weight:500;letter-spacing:.2em;text-align:right}.kit-location-stepper .description-label{display:block;width:fit-content;margin-top:6px;border-radius:16777200px;overflow:hidden}.kit-location-stepper .description-label .kit-pill.default-type.blue-theme{border:none}.kit-location-stepper .location-icon{flex-shrink:0;position:relative;z-index:1}.kit-location-stepper .dates{padding-left:10px;min-width:176px;min-height:40px;color:var(--ui-kit-color-cobalt-darkest);font-size:13px}.kit-location-stepper .date-description{margin-right:18px;width:30px;color:var(--ui-kit-color-grey-7);font-weight:500;text-align:right}.kit-location-stepper .danger .step-inner{border:1px solid var(--ui-kit-color-red);border-radius:4px;background-color:var(--ui-kit-color-red-20)}.kit-location-stepper .danger .location-icon{fill:var(--ui-kit-color-red-20);background-color:var(--ui-kit-color-red-20)}.kit-location-stepper .danger:not(:first-child){margin-top:20px}.kit-location-stepper .sub-item{position:relative;padding:14px 0 12px;z-index:1}.kit-location-stepper .sub-item .dates{margin-right:34px}.kit-location-stepper .sub-item .location-icon{background:var(--ui-kit-color-white)}.kit-location-stepper .sub-item .location-icon:before{content:\"\";position:absolute;left:calc(50% - 1px);top:-18px;width:2px;height:18px;background-color:var(--ui-kit-color-grey-8)}.kit-location-stepper .sub-item .description{margin-left:6px}.kit-location-stepper .sub-item.danger{margin-top:20px;border:1px solid var(--ui-kit-color-red);border-radius:4px;background-color:var(--ui-kit-color-red-20)}.kit-location-stepper .sub-item.danger .location-icon{background-color:var(--ui-kit-color-red-20)}.kit-location-stepper .sub-item.danger .location-icon:before{display:none}.kit-location-stepper.default .step-line{background-color:var(--ui-kit-color-grey-8);top:24px}.kit-location-stepper.default .location-icon{background:var(--ui-kit-color-white);width:24px;height:24px}.kit-location-stepper.default .location-icon.fill{fill:var(--ui-kit-color-grey-7);stroke:none}.kit-location-stepper.default .location-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-7)}.kit-location-stepper.default .last .location-icon.fill{fill:var(--ui-kit-color-violet);stroke:none}.kit-location-stepper.default .last .location-icon.stroke{fill:none;stroke:var(--ui-kit-color-violet)}.kit-location-stepper.default .first .location-icon.fill{fill:var(--ui-kit-color-green);stroke:none}.kit-location-stepper.default .first .location-icon.stroke{fill:none;stroke:var(--ui-kit-color-green)}.kit-location-stepper.custom .step-inner{padding:20px 0 0}.kit-location-stepper.custom .title{letter-spacing:0;font-size:14px;line-height:20px;font-weight:400;color:var(--ui-kit-color-grey-22);text-transform:capitalize}.kit-location-stepper.custom .caption{color:var(--ui-kit-color-grey-23);font-size:12px;font-weight:400}.kit-location-stepper.custom .description.grey{color:var(--ui-kit-color-grey-20)}.kit-location-stepper.custom .step-line{background-color:var(--ui-kit-color-grey-21);top:32px}.kit-location-stepper.custom .step-line.grey{background-color:var(--ui-kit-color-grey-20)}.kit-location-stepper.custom .location-icon{width:32px;height:32px;border-radius:50%}.kit-location-stepper.custom .location-icon.green{background:var(--ui-kit-color-green-8)}.kit-location-stepper.custom .location-icon.green.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-location-stepper.custom .location-icon.green.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-location-stepper.custom .location-icon.blue{background:var(--ui-kit-color-blue-2)}.kit-location-stepper.custom .location-icon.blue.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-location-stepper.custom .location-icon.blue.stroke{fill:none;stroke:var(--ui-kit-color-white)}.kit-location-stepper.custom .location-icon.grey{background:var(--ui-kit-color-grey-19)}.kit-location-stepper.custom .location-icon.grey.fill{fill:var(--ui-kit-color-grey-20);stroke:none}.kit-location-stepper.custom .location-icon.grey.stroke{fill:none;stroke:var(--ui-kit-color-grey-20)}.kit-location-stepper.custom .location-icon .kit-svg-icon{width:16px;margin:auto}.kit-location-stepper.hide-dates .dates{display:none}.kit-location-stepper.hide-dates .step-line{left:15px}.location-tooltip-wrapper .location-tooltip{white-space:pre-wrap}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], toolTipPosition: [{
                 type: Input
-            }] } });
+            }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], hideDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDates", required: false }] }] } });
 
 class KitAutocompleteComponent {
     constructor() {
@@ -2479,7 +2586,7 @@ class KitCheckboxComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => KitCheckboxComponent),
                 multi: true,
-            }], ngImport: i0, template: "<div class=\"kit-checkbox\">\n  <label class=\"kit-checkbox-item {{ state }}\"\n         [ngClass]=\"setCssClasses(checkbox)\"\n         (click)=\"handleClick($event)\">\n    <div class=\"kit-checkbox-input\">\n      <input #checkbox\n             kendoCheckBox\n             type=\"checkbox\"\n             [readonly]=\"readonly\"\n             [disabled]=\"disabled\"\n             [(ngModel)]=\"checked\"\n             (change)=\"onInputStateChange($event)\" />\n      <kit-svg-icon class=\"kit-checkbox-icon\"\n                    [icon]=\"checkIcon\"\n      ></kit-svg-icon>\n    </div>\n    @if (label) {\n      <span class=\"kit-checkbox-label\">{{ label }}</span>\n    }\n  </label>\n\n  @if (messageText) {\n    <kit-form-message [icon]=\"messageIcon\"\n                      [message]=\"messageText\"\n    ></kit-form-message>\n  }\n</div>\n", styles: [".kit-checkbox-item{display:flex;align-items:center;cursor:pointer}.kit-checkbox-item.readonly{pointer-events:none;cursor:default}.kit-checkbox-item.disabled{cursor:default}.kit-checkbox-item.disabled .kit-checkbox-label{color:var(--ui-kit-color-grey-12)}.kit-checkbox-item.disabled.checked .kit-checkbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-checkbox-item.disabled.checked .kit-checkbox-icon{stroke:var(--ui-kit-color-grey-12)}.kit-checkbox-item.checked .kit-checkbox-input{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}.kit-checkbox-item.checked .kit-checkbox-input .kit-checkbox-icon{opacity:1}.kit-checkbox-item.danger .kit-checkbox-input{border-color:var(--ui-kit-color-red);background-color:var(--ui-kit-color-red-20)}.kit-checkbox-item.danger:hover .kit-checkbox-input{background-color:var(--ui-kit-color-red-20);border-color:var(--ui-kit-color-red)}.kit-checkbox-item.danger.disabled .kit-checkbox-input{border-color:var(--ui-kit-color-grey-11)}.kit-checkbox-item.danger.checked .kit-checkbox-icon{stroke:var(--ui-kit-color-red)}.kit-checkbox-item.danger.checked.disabled .kit-checkbox-input{background-color:var(--ui-kit-color-red-20)}.kit-checkbox-item.danger.checked.disabled .kit-checkbox-icon{stroke:var(--ui-kit-color-grey-12)}.kit-checkbox-item.danger:focus-within .kit-checkbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-20)}.kit-checkbox-item:hover:not(.readonly):not(.disabled) .kit-checkbox-input{border-color:var(--ui-kit-color-main)}.kit-checkbox-item:focus-within .kit-checkbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-checkbox-input{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);width:16px;height:16px}.kit-checkbox-label{margin-left:8px;font-size:14px;color:var(--ui-kit-color-grey-10)}.kit-checkbox-icon{width:14px;height:14px;opacity:0;fill:none;stroke:var(--ui-kit-color-white)}.kit-checkbox .k-checkbox{opacity:0;width:auto;height:auto;border:none}\n"], dependencies: [{ kind: "ngmodule", type: LabelModule }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "directive", type: i1$3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            }], ngImport: i0, template: "<div class=\"kit-checkbox\">\n  <label class=\"kit-checkbox-item {{ state }}\"\n         [ngClass]=\"setCssClasses(checkbox)\"\n         (click)=\"handleClick($event)\">\n    <div class=\"kit-checkbox-input\">\n      <input #checkbox\n             kendoCheckBox\n             type=\"checkbox\"\n             [readonly]=\"readonly\"\n             [disabled]=\"disabled\"\n             [(ngModel)]=\"checked\"\n             (change)=\"onInputStateChange($event)\" />\n      <kit-svg-icon class=\"kit-checkbox-icon\"\n                    [icon]=\"checkIcon\"\n      ></kit-svg-icon>\n    </div>\n    @if (label) {\n      <span class=\"kit-checkbox-label\">{{ label }}</span>\n    }\n  </label>\n\n  @if (messageText) {\n    <kit-form-message [icon]=\"messageIcon\"\n                      [message]=\"messageText\"\n    ></kit-form-message>\n  }\n</div>\n", styles: [".kit-checkbox-item{display:flex;align-items:center;cursor:pointer}.kit-checkbox-item.readonly{pointer-events:none;cursor:default}.kit-checkbox-item.disabled{cursor:default}.kit-checkbox-item.disabled .kit-checkbox-label{color:var(--ui-kit-color-grey-12)}.kit-checkbox-item.disabled.checked .kit-checkbox-input{border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-checkbox-item.disabled.checked .kit-checkbox-icon{stroke:var(--ui-kit-color-grey-12)}.kit-checkbox-item.checked .kit-checkbox-input{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}.kit-checkbox-item.checked .kit-checkbox-input .kit-checkbox-icon{opacity:1}.kit-checkbox-item.danger .kit-checkbox-input{border-color:var(--ui-kit-color-red);background-color:var(--ui-kit-color-red-20)}.kit-checkbox-item.danger:hover .kit-checkbox-input{background-color:var(--ui-kit-color-red-20);border-color:var(--ui-kit-color-red)}.kit-checkbox-item.danger.disabled .kit-checkbox-input{border-color:var(--ui-kit-color-grey-11)}.kit-checkbox-item.danger.checked .kit-checkbox-icon{stroke:var(--ui-kit-color-red)}.kit-checkbox-item.danger.checked.disabled .kit-checkbox-input{background-color:var(--ui-kit-color-red-20)}.kit-checkbox-item.danger.checked.disabled .kit-checkbox-icon{stroke:var(--ui-kit-color-grey-12)}.kit-checkbox-item.danger:focus-within .kit-checkbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-red-20)}.kit-checkbox-item:hover:not(.readonly):not(.disabled) .kit-checkbox-input{border-color:var(--ui-kit-color-main)}.kit-checkbox-item:focus-within .kit-checkbox-input{box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-checkbox-input{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);width:16px;height:16px}.kit-checkbox-label{margin-left:8px;font-size:14px;color:var(--ui-kit-color-grey-10)}.kit-checkbox-icon{width:14px;height:14px;opacity:0;fill:none;stroke:var(--ui-kit-color-white)}.kit-checkbox .k-checkbox{opacity:0;width:auto;height:auto;border:none}\n"], dependencies: [{ kind: "ngmodule", type: LabelModule }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "directive", type: i1$3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCheckboxComponent, decorators: [{
             type: Component,
@@ -2681,95 +2788,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-option-toggle\"\n     [class.disabled]=\"disabled()\">\n  <label class=\"kit-option-toggle-label\">\n    <input type=\"radio\" \n           class=\"kit-option-toggle-radio\"\n           [name]=\"name\"\n           [value]=\"leftOption().value\"\n           [checked]=\"leftOptionChecked()\"\n           [disabled]=\"disabled()\"\n           (change)=\"toggleOption(leftOption().value)\"\n    >\n    <span class=\"kit-option-toggle-text\">{{ leftOption().text }}</span>\n  </label>\n  <div class=\"kit-option-toggle-stick\"\n       (click)=\"toggleOption()\"\n  ></div>\n  <label class=\"kit-option-toggle-label\">\n    <input type=\"radio\"\n           class=\"kit-option-toggle-radio\"\n           [name]=\"name\"\n           [value]=\"rightOption().value\"\n           [checked]=\"rightOptionChecked()\"\n           [disabled]=\"disabled()\"\n           (change)=\"toggleOption(rightOption().value)\"\n    >\n    <span class=\"kit-option-toggle-text\">{{ rightOption().text }}</span>\n  </label>\n</div>", styles: [".kit-option-toggle{border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;background:var(--ui-kit-color-white)}.kit-option-toggle-label{cursor:pointer}.kit-option-toggle-label:has(.kit-option-toggle-radio:checked)+.kit-option-toggle-stick:before{left:2px;transform:translateY(-50%)}.kit-option-toggle-radio{display:none}.kit-option-toggle-radio:checked+.kit-option-toggle-text{color:var(--ui-kit-color-main)}.kit-option-toggle-text{font-size:14px;color:var(--ui-kit-color-grey-12)}.kit-option-toggle-stick{width:44px;height:22px;border-radius:14px;position:relative;background:var(--ui-kit-color-grey-7);cursor:pointer;display:flex;align-items:center;justify-content:end;transition:.2s ease-in-out}.kit-option-toggle-stick:before{content:\"\";display:inline-block;aspect-ratio:1/1;height:calc(100% - 4px);position:absolute;left:calc(100% - 2px);top:50%;transform:translate(-100%,-50%);border-radius:50%;transition:.2s ease-in-out;background:var(--ui-kit-color-grey-13);box-shadow:0 2px 4px #00230b33}.kit-option-toggle.disabled .kit-option-toggle-label{cursor:default}.kit-option-toggle.disabled .kit-option-toggle-label .kit-option-toggle-text{color:var(--ui-kit-color-grey-12)}.kit-option-toggle.disabled .kit-option-toggle-stick{cursor:default;background:var(--ui-kit-color-grey-13)}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], defaultActiveOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultActiveOption", required: false }] }, { type: i0.Output, args: ["defaultActiveOptionChange"] }], leftOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftOption", required: true }] }], rightOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightOption", required: true }] }], handleChange: [{ type: i0.Output, args: ["handleChange"] }] } });
 
-var KitPillType;
-(function (KitPillType) {
-    KitPillType["DEFAULT"] = "default";
-    KitPillType["DASHED"] = "dashed";
-})(KitPillType || (KitPillType = {}));
-var KitPillTheme;
-(function (KitPillTheme) {
-    KitPillTheme["DEFAULT"] = "default";
-    KitPillTheme["BLUE"] = "blue";
-    KitPillTheme["MAIN"] = "main";
-})(KitPillTheme || (KitPillTheme = {}));
-
-class KitPillComponent {
-    constructor() {
-        /**
-         * Defines if the pill will be removable. If set to true pill renders a remove button
-         */
-        this.removable = false;
-        /**
-         * Defines if the pill will be selectable
-         */
-        this.selectable = false;
-        /**
-         * Defines the selected state of the pill
-         */
-        this.selected = false;
-        /**
-         * Defines the pill type
-         */
-        this.type = KitPillType.DEFAULT;
-        /**
-         * Defines the color theme of the pill
-         */
-        this.theme = input(KitPillTheme.DEFAULT, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-        /**
-         * An action which is emitted when the pill is clicked
-         */
-        this.clicked = new EventEmitter();
-        /**
-         * An action which is emitted when the close button is clicked
-         */
-        this.removed = new EventEmitter();
-        this.closeIcon = KitSvgIcon.CROSS;
-        this.kitSvgIconType = KitSvgIconType;
-    }
-    get cssClasses() {
-        return {
-            selectable: this.selectable,
-            selected: this.selected,
-            [`${this.type}-type`]: true,
-            [`${this.theme()}-theme`]: true,
-        };
-    }
-    onComponentClick() {
-        if (!this.selectable) {
-            return;
-        }
-        this.clicked.emit(!this.selected);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitPillComponent, isStandalone: true, selector: "kit-pill", inputs: { removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { listeners: { "click": "onComponentClick()" } }, ngImport: i0, template: "<div class=\"kit-pill\"\n     [ngClass]=\"cssClasses\">\n  @if (icon) {\n    <kit-svg-icon class=\"kit-pill-icon\"\n                  [icon]=\"icon\"\n                  [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  }\n  <div class=\"kit-pill-content\">\n    <ng-content\n    ></ng-content>\n  </div>\n  @if (removable) {\n    <button class=\"kit-pill-remove\"\n            (click)=\"removed.emit()\">\n      <kit-svg-icon class=\"remove-icon\"\n                    [icon]=\"closeIcon\"\n      ></kit-svg-icon>\n    </button>\n  }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover.main-theme,.kit-pill.selectable.selected.main-theme{color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-background)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitPillComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kit-pill', imports: [
-                        CommonModule,
-                        KitSvgIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-pill\"\n     [ngClass]=\"cssClasses\">\n  @if (icon) {\n    <kit-svg-icon class=\"kit-pill-icon\"\n                  [icon]=\"icon\"\n                  [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  }\n  <div class=\"kit-pill-content\">\n    <ng-content\n    ></ng-content>\n  </div>\n  @if (removable) {\n    <button class=\"kit-pill-remove\"\n            (click)=\"removed.emit()\">\n      <kit-svg-icon class=\"remove-icon\"\n                    [icon]=\"closeIcon\"\n      ></kit-svg-icon>\n    </button>\n  }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover.main-theme,.kit-pill.selectable.selected.main-theme{color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-background)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"] }]
-        }], propDecorators: { removable: [{
-                type: Input
-            }], selectable: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], icon: [{
-                type: Input
-            }], iconType: [{
-                type: Input
-            }], clicked: [{
-                type: Output
-            }], removed: [{
-                type: Output
-            }], onComponentClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
 class KitToastrModule {
     static forRoot(config = {}) {
         return {
@@ -3410,7 +3428,7 @@ class KitCtaPanelConfirmationComponent {
         this.confirmClicked.emit(this.form.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCtaPanelConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCtaPanelConfirmationComponent, isStandalone: true, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n  <div class=\"confirmation-head\">\n    @if (data?.icon) {\n      <kit-svg-icon class=\"head-icon\"\n                    [icon]=\"data?.icon\"\n      ></kit-svg-icon>\n    }\n    <div class=\"head-text\">\n      <div class=\"head-title\">{{ data?.title }}</div>\n      @if (data?.description) {\n        <div class=\"head-description\">\n          {{ data?.description }}\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"confirmation-main\">\n    <form class=\"confirmation-main-form\"\n          [formGroup]=\"form\">\n      @if (data?.dropdownItems) {\n        <kit-dropdown\n          formControlName=\"reason\"\n          [defaultItem]=\"data?.defaultDropdownItem\"\n          [label]=\"data?.dropdownLabel\"\n          [items]=\"data?.dropdownItems\"\n          [listHeight]=\"dropdownListHeight\"\n        ></kit-dropdown>\n      }\n\n      @if (data?.checkboxLabel) {\n        <kit-checkbox formControlName=\"checkbox\"\n                      [label]=\"data?.checkboxLabel\"\n        ></kit-checkbox>\n      }\n    </form>\n  </div>\n  <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"onConfirmButtonClick()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px;--ui-kit-sidebar-collapsed-width: 56px;--ui-kit-sidebar-expanded-width: 256px;--ui-kit-layout-gap: 25px}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCtaPanelConfirmationComponent, isStandalone: true, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n  <div class=\"confirmation-head\">\n    @if (data?.icon) {\n      <kit-svg-icon class=\"head-icon\"\n                    [icon]=\"data?.icon\"\n      ></kit-svg-icon>\n    }\n    <div class=\"head-text\">\n      <div class=\"head-title\">{{ data?.title }}</div>\n      @if (data?.description) {\n        <div class=\"head-description\">\n          {{ data?.description }}\n        </div>\n      }\n    </div>\n  </div>\n  <div class=\"confirmation-main\">\n    <form class=\"confirmation-main-form\"\n          [formGroup]=\"form\">\n      @if (data?.dropdownItems) {\n        <kit-dropdown\n          formControlName=\"reason\"\n          [defaultItem]=\"data?.defaultDropdownItem\"\n          [label]=\"data?.dropdownLabel\"\n          [items]=\"data?.dropdownItems\"\n          [listHeight]=\"dropdownListHeight\"\n        ></kit-dropdown>\n      }\n\n      @if (data?.checkboxLabel) {\n        <kit-checkbox formControlName=\"checkbox\"\n                      [label]=\"data?.checkboxLabel\"\n        ></kit-checkbox>\n      }\n    </form>\n  </div>\n  <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"onConfirmButtonClick()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px;--ui-kit-sidebar-collapsed-width: 56px;--ui-kit-sidebar-expanded-width: 256px;--ui-kit-layout-gap: 25px}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "selected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCtaPanelConfirmationComponent, decorators: [{
             type: Component,
@@ -3989,7 +4007,7 @@ class KitFileUploadComponent {
         return files;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFileUploadComponent, isStandalone: true, selector: "kit-file-upload", inputs: { saveUrl: "saveUrl", files: "files", selectFilesLabel: "selectFilesLabel", dropzoneLabel: "dropzoneLabel", restrictions: "restrictions", restrictionsErrorMessages: "restrictionsErrorMessages", hasActionButton: "hasActionButton", actionButtonLabel: "actionButtonLabel" }, outputs: { fileDownloaded: "fileDownloaded", filesSelected: "filesSelected", actionButtonClicked: "actionButtonClicked" }, ngImport: i0, template: "<div class=\"kit-file-upload\">\n  <kendo-upload [saveUrl]=\"saveUrl\"\n                [withCredentials]=\"false\"\n                [restrictions]=\"restrictions\"\n                [autoUpload]=\"false\"\n                [(ngModel)]=\"files\"\n                (select)=\"onFilesSelect($event.files)\">\n    <kendo-upload-messages [select]=\"selectFilesLabel\"\n                           [dropFilesHere]=\"dropzoneLabel\"\n    ></kendo-upload-messages>\n\n    <ng-template kendoUploadFileTemplate let-files>\n      @if (getTypedFiles(files); as files) {\n        @for (file of files; track $index) {\n          <div class=\"file-info\">\n            <div class=\"file-name\"\n                 [title]=\"file.name\">\n              {{ file.name }}\n            </div>\n            @for (error of file.validationErrors; track $index) {\n              <div class=\"file-validation-message\">\n                {{ getValidationError(error) }}\n              </div>\n            }\n          </div>\n          @if (!file.validationErrors) {\n            <button class=\"download-button\">\n              <kit-svg-icon class=\"download-button-icon\"\n                            [icon]=\"KitSvgIcon.DOWNLOAD\"\n                            (click)=\"onFileDownload(file)\"\n              ></kit-svg-icon>\n            </button>\n          }\n        }\n      }\n    </ng-template>\n  </kendo-upload>\n\n  @if (hasActionButton) {\n    <div class=\"kit-file-upload-action\">\n      <kit-button [label]=\"actionButtonLabel\"\n                  [icon]=\"KitSvgIcon.DOWNLOAD\"\n                  [kind]=\"KitButtonKind.SMALL\"\n                  (clicked)=\"onActionButtonClick()\"\n      ></kit-button>\n    </div>\n  }\n</div>\n", styles: [".kit-file-upload .k-upload{display:flex;flex-direction:column;gap:8px;border:none}.kit-file-upload .k-upload .k-upload-button{position:relative;padding:0;display:flex;align-items:center;min-width:initial;gap:6px;color:var(--ui-kit-color-main);font-weight:500;font-size:14px;border:none;background:none}.kit-file-upload .k-upload .k-upload-button:focus{box-shadow:none}.kit-file-upload .k-upload .k-upload-button:hover .k-button-text{text-decoration:underline}.kit-file-upload .k-upload .k-upload-button:after{content:\"\\e11e\";display:inline-block;position:static;opacity:1;line-height:1;font-size:16px;font-family:WebComponentsIcons,sans-serif}.kit-file-upload .k-upload .k-dropzone{padding:12px 10px;border:2px dashed transparent;background:none}.kit-file-upload .k-upload .k-dropzone.k-hover{border-color:var(--ui-kit-color-main);background:none}.kit-file-upload .k-upload .k-upload-status{display:none}.kit-file-upload .k-upload .k-upload-status+.k-dropzone-hint{display:block}.kit-file-upload .k-upload .k-upload-files{display:flex;flex-direction:column;gap:8px;max-height:initial;border:none}.kit-file-upload .k-upload .k-upload-files .k-file{align-items:center;padding:10px;border:none;background:var(--ui-kit-color-grey-8)}.kit-file-upload .k-upload .k-upload-files .k-file.k-focus{box-shadow:none}.kit-file-upload .k-upload .file-info{flex:1;min-width:0}.kit-file-upload .k-upload .file-name{color:var(--ui-kit-color-cobalt-darkest);font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kit-file-upload .k-upload .file-validation-message{color:var(--ui-kit-color-red);font-size:12px}.kit-file-upload .k-upload .download-button{margin-left:10px;padding:0;border:none;background:none;cursor:pointer}.kit-file-upload .k-upload .download-button:hover .download-button-icon{stroke:var(--ui-kit-color-main)}.kit-file-upload .k-upload .download-button-icon{display:block;width:24px;height:24px;stroke:var(--ui-kit-color-grey-7);fill:none}.kit-file-upload .k-upload .k-actions{display:none}.kit-file-upload-action{display:flex;justify-content:flex-end;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: UploadModule }, { kind: "component", type: i1$b.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "showFileList", "tabIndex", "actionsLayout"], outputs: ["cancel", "clear", "complete", "error", "pause", "resume", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { kind: "directive", type: i1$b.FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]" }, { kind: "component", type: i1$b.CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFileUploadComponent, isStandalone: true, selector: "kit-file-upload", inputs: { saveUrl: "saveUrl", files: "files", selectFilesLabel: "selectFilesLabel", dropzoneLabel: "dropzoneLabel", restrictions: "restrictions", restrictionsErrorMessages: "restrictionsErrorMessages", hasActionButton: "hasActionButton", actionButtonLabel: "actionButtonLabel" }, outputs: { fileDownloaded: "fileDownloaded", filesSelected: "filesSelected", actionButtonClicked: "actionButtonClicked" }, ngImport: i0, template: "<div class=\"kit-file-upload\">\n  <kendo-upload [saveUrl]=\"saveUrl\"\n                [withCredentials]=\"false\"\n                [restrictions]=\"restrictions\"\n                [autoUpload]=\"false\"\n                [(ngModel)]=\"files\"\n                (select)=\"onFilesSelect($event.files)\">\n    <kendo-upload-messages [select]=\"selectFilesLabel\"\n                           [dropFilesHere]=\"dropzoneLabel\"\n    ></kendo-upload-messages>\n\n    <ng-template kendoUploadFileTemplate let-files>\n      @if (getTypedFiles(files); as files) {\n        @for (file of files; track $index) {\n          <div class=\"file-info\">\n            <div class=\"file-name\"\n                 [title]=\"file.name\">\n              {{ file.name }}\n            </div>\n            @for (error of file.validationErrors; track $index) {\n              <div class=\"file-validation-message\">\n                {{ getValidationError(error) }}\n              </div>\n            }\n          </div>\n          @if (!file.validationErrors) {\n            <button class=\"download-button\">\n              <kit-svg-icon class=\"download-button-icon\"\n                            [icon]=\"KitSvgIcon.DOWNLOAD\"\n                            (click)=\"onFileDownload(file)\"\n              ></kit-svg-icon>\n            </button>\n          }\n        }\n      }\n    </ng-template>\n  </kendo-upload>\n\n  @if (hasActionButton) {\n    <div class=\"kit-file-upload-action\">\n      <kit-button [label]=\"actionButtonLabel\"\n                  [icon]=\"KitSvgIcon.DOWNLOAD\"\n                  [kind]=\"KitButtonKind.SMALL\"\n                  (clicked)=\"onActionButtonClick()\"\n      ></kit-button>\n    </div>\n  }\n</div>\n", styles: [".kit-file-upload .k-upload{display:flex;flex-direction:column;gap:8px;border:none}.kit-file-upload .k-upload .k-upload-button{position:relative;padding:0;display:flex;align-items:center;min-width:initial;gap:6px;color:var(--ui-kit-color-main);font-weight:500;font-size:14px;border:none;background:none}.kit-file-upload .k-upload .k-upload-button:focus{box-shadow:none}.kit-file-upload .k-upload .k-upload-button:hover .k-button-text{text-decoration:underline}.kit-file-upload .k-upload .k-upload-button:after{content:\"\\e11e\";display:inline-block;position:static;opacity:1;line-height:1;font-size:16px;font-family:WebComponentsIcons,sans-serif}.kit-file-upload .k-upload .k-dropzone{padding:12px 10px;border:2px dashed transparent;background:none}.kit-file-upload .k-upload .k-dropzone.k-hover{border-color:var(--ui-kit-color-main);background:none}.kit-file-upload .k-upload .k-upload-status{display:none}.kit-file-upload .k-upload .k-upload-status+.k-dropzone-hint{display:block}.kit-file-upload .k-upload .k-upload-files{display:flex;flex-direction:column;gap:8px;max-height:initial;border:none}.kit-file-upload .k-upload .k-upload-files .k-file{align-items:center;padding:10px;border:none;background:var(--ui-kit-color-grey-8)}.kit-file-upload .k-upload .k-upload-files .k-file.k-focus{box-shadow:none}.kit-file-upload .k-upload .file-info{flex:1;min-width:0}.kit-file-upload .k-upload .file-name{color:var(--ui-kit-color-cobalt-darkest);font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kit-file-upload .k-upload .file-validation-message{color:var(--ui-kit-color-red);font-size:12px}.kit-file-upload .k-upload .download-button{margin-left:10px;padding:0;border:none;background:none;cursor:pointer}.kit-file-upload .k-upload .download-button:hover .download-button-icon{stroke:var(--ui-kit-color-main)}.kit-file-upload .k-upload .download-button-icon{display:block;width:24px;height:24px;stroke:var(--ui-kit-color-grey-7);fill:none}.kit-file-upload .k-upload .k-actions{display:none}.kit-file-upload-action{display:flex;justify-content:flex-end;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: UploadModule }, { kind: "component", type: i1$b.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "showFileList", "tabIndex", "actionsLayout"], outputs: ["cancel", "clear", "complete", "error", "pause", "resume", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { kind: "directive", type: i1$b.FileTemplateDirective, selector: "[kendoUploadFileTemplate], [kendoFileSelectFileTemplate]" }, { kind: "component", type: i1$b.CustomMessagesComponent, selector: "kendo-upload-messages, kendo-fileselect-messages, kendo-uploaddropzone-messages" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFileUploadComponent, decorators: [{
             type: Component,
@@ -4555,7 +4573,7 @@ class KitMultiselectComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => KitMultiselectComponent),
                 multi: true,
-            }], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: MultiSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-multiselect\"\n     [class.disabled]=\"disabled\"\n     [class.all-option-selected]=\"hasSelectedAllOption\"\n     [class.invalid]=\"invalid()\">\n  @if (label) {\n    <kit-form-label class=\"label\"\n                    [text]=\"label\"\n                    [for]=\"multiselect\"\n    ></kit-form-label>\n  }\n  <kendo-multiselect #multiselect\n                     valueField=\"value\"\n                     textField=\"text\"\n                     kendoDropDownFilter\n                     [ngClass]=\"[size(), itemsDirection()]\"\n                     [data]=\"items\"\n                     [disabled]=\"disabled\"\n                     [autoClose]=\"autoClose\"\n                     [placeholder]=\"placeholder\"\n                     [valuePrimitive]=\"true\"\n                     [itemDisabled]=\"onItemDisabled()\"\n                     [popupSettings]=\"buildPopupSettings()\"\n                     [tagMapper]=\"tagMapper()\"\n                     [checkboxes]=\"useCheckboxes()\"\n                     [listHeight]=\"listHeight()\"\n                     [allowCustom]=\"allowCustom()\"\n                     [filterable]=\"filterable()\"\n                     [(ngModel)]=\"selectedItems\">\n    <ng-template kendoMultiSelectTagTemplate\n                 let-dataItem>\n      <span class=\"chip-text\"\n            [class.all-option]=\"dataItem.value === allOption().value\"\n            [ngClass]=\"dataItem?.optionClass\">\n            {{ dataItem?.text }}\n      </span>\n      <kit-svg-icon class=\"chip-icon\"\n                    [icon]=\"KitSvgIcon.CROSS\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoMultiSelectItemTemplate\n                 let-dataItem>\n      <span class=\"option-text\"\n            [ngClass]=\"dataItem?.optionClass\">{{ dataItem?.text }}</span>\n      <kit-svg-icon class=\"option-icon\"\n                    [icon]=\"KitSvgIcon.CHECK\"\n      ></kit-svg-icon>\n    </ng-template>\n  </kendo-multiselect>\n\n  @if (messageText) {\n    <kit-form-message [icon]=\"messageIcon\"\n                      [message]=\"messageText\"\n    ></kit-form-message>\n  }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: i1$4.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            }], viewQueries: [{ propertyName: "multiselectComponent", first: true, predicate: MultiSelectComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-multiselect\"\n     [class.disabled]=\"disabled\"\n     [class.all-option-selected]=\"hasSelectedAllOption\"\n     [class.invalid]=\"invalid()\">\n  @if (label) {\n    <kit-form-label class=\"label\"\n                    [text]=\"label\"\n                    [for]=\"multiselect\"\n    ></kit-form-label>\n  }\n  <kendo-multiselect #multiselect\n                     valueField=\"value\"\n                     textField=\"text\"\n                     kendoDropDownFilter\n                     [ngClass]=\"[size(), itemsDirection()]\"\n                     [data]=\"items\"\n                     [disabled]=\"disabled\"\n                     [autoClose]=\"autoClose\"\n                     [placeholder]=\"placeholder\"\n                     [valuePrimitive]=\"true\"\n                     [itemDisabled]=\"onItemDisabled()\"\n                     [popupSettings]=\"buildPopupSettings()\"\n                     [tagMapper]=\"tagMapper()\"\n                     [checkboxes]=\"useCheckboxes()\"\n                     [listHeight]=\"listHeight()\"\n                     [allowCustom]=\"allowCustom()\"\n                     [filterable]=\"filterable()\"\n                     [(ngModel)]=\"selectedItems\">\n    <ng-template kendoMultiSelectTagTemplate\n                 let-dataItem>\n      <span class=\"chip-text\"\n            [class.all-option]=\"dataItem.value === allOption().value\"\n            [ngClass]=\"dataItem?.optionClass\">\n            {{ dataItem?.text }}\n      </span>\n      <kit-svg-icon class=\"chip-icon\"\n                    [icon]=\"KitSvgIcon.CROSS\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoMultiSelectItemTemplate\n                 let-dataItem>\n      <span class=\"option-text\"\n            [ngClass]=\"dataItem?.optionClass\">{{ dataItem?.text }}</span>\n      <kit-svg-icon class=\"option-icon\"\n                    [icon]=\"KitSvgIcon.CHECK\"\n      ></kit-svg-icon>\n    </ng-template>\n  </kendo-multiselect>\n\n  @if (messageText) {\n    <kit-form-message [icon]=\"messageIcon\"\n                      [message]=\"messageText\"\n    ></kit-form-message>\n  }\n</div>\n", styles: [".kit-multiselect .label{display:block;margin-bottom:4px}.kit-multiselect .k-multiselect{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-multiselect .k-multiselect:hover{border-color:var(--ui-kit-color-hover)}.kit-multiselect .k-multiselect.k-focus{box-shadow:none}.kit-multiselect .k-multiselect.small{min-height:30px;border-radius:4px}.kit-multiselect .k-multiselect.small .k-input-values{padding:5px 7px}.kit-multiselect .k-multiselect.small .k-chip{height:20px;border-radius:4px}.kit-multiselect .k-multiselect.default{min-height:40px;border-radius:8px}.kit-multiselect .k-multiselect.default .k-input-values{padding:7px 12px}.kit-multiselect .k-multiselect.default .k-chip{height:24px;border-radius:8px}.kit-multiselect .k-input .k-input-inner{padding:0}.kit-multiselect .k-input .k-chip-list{display:flex}.kit-multiselect .k-input.ltr .k-chip-list{flex-direction:row}.kit-multiselect .k-input.rtl .k-chip-list{flex-direction:row-reverse}.kit-multiselect .k-input-values{gap:8px}.kit-multiselect .k-input-inner{font-size:14px;font-weight:400}.kit-multiselect .k-input-inner::placeholder{color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-chip{display:flex;align-items:center;position:relative;padding:0 8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-multiselect .k-chip-label{display:flex;align-items:center;gap:4px;line-height:1}.kit-multiselect .k-chip-actions{position:absolute;right:8px;width:12px;height:12px;opacity:0}.kit-multiselect .k-chip-action{display:flex;padding:0;cursor:pointer}.kit-multiselect .k-chip-content:has(+.k-chip-actions:hover) .chip-icon{stroke:var(--ui-kit-color-main)}.kit-multiselect .k-chip .chip-text{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500}.kit-multiselect .k-chip .chip-icon{display:block;width:12px;height:12px;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-multiselect .k-chip .k-icon{width:12px;height:12px}.kit-multiselect .k-chip:has(.chip-text.all-option){display:flex}.kit-multiselect .k-clear-value{margin-right:12px;padding:0;opacity:1;color:var(--ui-kit-color-grey-12)}.kit-multiselect .k-clear-value:hover{color:var(--ui-kit-color-main)}.kit-multiselect.disabled .k-multiselect{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect.disabled .chip-text{color:var(--ui-kit-color-grey-12)}.kit-multiselect.invalid .k-multiselect{border-color:var(--ui-kit-color-red-1)}.kit-multiselect:focus-within .k-multiselect{border-color:var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-multiselect.all-option-selected .k-chip{display:none}.kit-multiselect-popup{margin-top:10px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-multiselect-popup.k-popup{padding:4px}.kit-multiselect-popup .k-list-ul{gap:4px}.kit-multiselect-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-multiselect-popup .k-list-item:hover{color:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item .option-icon{display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-multiselect-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}.kit-multiselect-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-multiselect-popup .k-list-item.k-selected .option-text{flex:1}.kit-multiselect-popup .k-list-item.k-selected .option-icon{display:block}.kit-multiselect-popup .k-checkbox{background-color:var(--ui-kit-color-grey-13);border:1px solid var(--ui-kit-color-grey-11);margin-right:4px}.kit-multiselect-popup .k-checkbox:checked{border-color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.FilterDirective, selector: "[kendoDropDownFilter]", inputs: ["data", "kendoDropDownFilter", "filterable"] }, { kind: "component", type: i1$4.MultiSelectComponent, selector: "kendo-multiselect", inputs: ["showStickyHeader", "focusableId", "autoClose", "loading", "data", "value", "valueField", "textField", "tabindex", "tabIndex", "size", "rounded", "fillMode", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "disabled", "itemDisabled", "checkboxes", "readonly", "filterable", "virtual", "popupSettings", "listHeight", "valuePrimitive", "clearButton", "tagMapper", "allowCustom", "valueNormalizer", "inputAttributes"], outputs: ["filterChange", "valueChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "removeTag"], exportAs: ["kendoMultiSelect"] }, { kind: "directive", type: i1$4.TagTemplateDirective, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitFormMessageComponent, selector: "kit-form-message", inputs: ["icon", "message"] }, { kind: "component", type: KitFormLabelComponent, selector: "kit-form-label", inputs: ["text", "for", "tooltip", "popoverConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitMultiselectComponent, decorators: [{
             type: Component,
@@ -4759,7 +4777,7 @@ class KitProfileMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popupIsOpen()\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\"\n             (opened)=\"popupIsOpen.set(true)\"\n             (closed)=\"popupIsOpen.set(false)\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--ui-kit-color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popupIsOpen()\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\"\n             (opened)=\"popupIsOpen.set(true)\"\n             (closed)=\"popupIsOpen.set(false)\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--ui-kit-color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitProfileMenuComponent, decorators: [{
             type: Component,
@@ -5530,7 +5548,7 @@ class KitTileLayoutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTileLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitTileLayoutComponent, isStandalone: true, selector: "kit-tilelayout", inputs: { columnsConfig: "columnsConfig" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tileItems", predicate: KitTileLayoutItemComponent }], ngImport: i0, template: "<div class=\"kit-tilelayout\">\n  <kendo-tilelayout\n    class=\"tilelayout-container\"\n    autoFlow=\"row\"\n    [columns]=\"columns\"\n  >\n    @for (item of tileItems; track item) {\n    <kendo-tilelayout-item>\n      <div class=\"item-content\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </div>\n    </kendo-tilelayout-item>\n    }\n  </kendo-tilelayout>\n</div>\n", styles: [".kit-tilelayout .item-content{height:100%}.kit-tilelayout .k-tilelayout{background:none}.kit-tilelayout .k-tilelayout .k-card{border:none;background:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TileLayoutModule }, { kind: "component", type: i1$c.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i1$c.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitTileLayoutComponent, isStandalone: true, selector: "kit-tilelayout", inputs: { columnsConfig: "columnsConfig" }, host: { listeners: { "window:resize": "onResize()" } }, queries: [{ propertyName: "tileItems", predicate: KitTileLayoutItemComponent }], ngImport: i0, template: "<div class=\"kit-tilelayout\">\n  <kendo-tilelayout\n    class=\"tilelayout-container\"\n    autoFlow=\"row\"\n    [columns]=\"columns\"\n  >\n    @for (item of tileItems; track item) {\n    <kendo-tilelayout-item>\n      <div class=\"item-content\">\n        <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n      </div>\n    </kendo-tilelayout-item>\n    }\n  </kendo-tilelayout>\n</div>\n", styles: [".kit-tilelayout .item-content{height:100%}.kit-tilelayout .k-tilelayout{background:none}.kit-tilelayout .k-tilelayout .k-card{border:none;background:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TileLayoutModule }, { kind: "component", type: i1$c.TileLayoutComponent, selector: "kendo-tilelayout", inputs: ["columns", "columnWidth", "gap", "reorderable", "resizable", "rowHeight", "autoFlow", "navigable"], outputs: ["reorder", "resize"] }, { kind: "component", type: i1$c.TileLayoutItemComponent, selector: "kendo-tilelayout-item", inputs: ["title", "rowSpan", "colSpan", "order", "col", "row", "reorderable", "resizable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitTileLayoutComponent, decorators: [{
             type: Component,
@@ -5841,7 +5859,7 @@ class KitScrollNavigationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitScrollNavigationComponent, isStandalone: true, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n    <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                        [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n                        [gap]=\"18\"\n                        [itemTemplate]=\"navItem\"\n                        [disableActions]=\"isNavigationBtnDisabled()\"\n                        [dropdownAlign]=\"kitCollapsedListDropdownAlign.END\"\n                        (selectItem)=\"scrollToSection($event)\" />\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of sections?.toArray(); track item) {\n      <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n      ></ng-container>\n    }\n  </div>\n</div>\n\n<ng-template #navItem let-item>\n  <div kitBadge\n       [kitBadgeVisible]=\"item.badgeCount\"\n       [kitBadgeText]=\"item.badgeCount\"\n       [kitBadgeTheme]=\"kitBadgeTheme.DANGER\">\n    <kit-button kitTooltip\n                kitTooltipFilter='.nav-item'\n                class=\"nav-item\"\n                [active]=\"currentVisibleItem?.value === item.value\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"item.icon\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                [state]=\"item.state ?? kitButtonState.DEFAULT\"\n                [label]=\"item.text\"\n                [title]=\"item.tooltipText\"\n                [disabled]=\"isNavigationBtnDisabled()\"\n                [kitTooltipVisible]=\"!!item.tooltipText\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;height:100%}.kit-scroll-navigation-items{padding-bottom:27px}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { 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: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitScrollNavigationComponent, isStandalone: true, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n    <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                        [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n                        [gap]=\"18\"\n                        [itemTemplate]=\"navItem\"\n                        [disableActions]=\"isNavigationBtnDisabled()\"\n                        [dropdownAlign]=\"kitCollapsedListDropdownAlign.END\"\n                        (selectItem)=\"scrollToSection($event)\" />\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of sections?.toArray(); track item) {\n      <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n      ></ng-container>\n    }\n  </div>\n</div>\n\n<ng-template #navItem let-item>\n  <div kitBadge\n       [kitBadgeVisible]=\"item.badgeCount\"\n       [kitBadgeText]=\"item.badgeCount\"\n       [kitBadgeTheme]=\"kitBadgeTheme.DANGER\">\n    <kit-button kitTooltip\n                kitTooltipFilter='.nav-item'\n                class=\"nav-item\"\n                [active]=\"currentVisibleItem?.value === item.value\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.SMALL\"\n                [icon]=\"item.icon\"\n                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                [state]=\"item.state ?? kitButtonState.DEFAULT\"\n                [label]=\"item.text\"\n                [title]=\"item.tooltipText\"\n                [disabled]=\"isNavigationBtnDisabled()\"\n                [kitTooltipVisible]=\"!!item.tooltipText\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;height:100%}.kit-scroll-navigation-items{padding-bottom:27px}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { 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: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "directive", type: KitBadgeDirective, selector: "[kitBadge]", inputs: ["kitBadgeText", "kitBadgeTheme", "kitBadgeVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitScrollNavigationComponent, decorators: [{
             type: Component,
@@ -6338,6 +6356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }] } });
 
 const KIT_DATE_FORMAT = 'dd MMM yyyy';
+const KIT_DATE_FORMAT_SHORT = 'MMM d y';
 const KIT_DATETIME_FORMAT_LONG = 'dd MMM yyyy HH:mm:ss';
 const KIT_TIME_FORMAT_SHORT = 'h:mm a';
 
@@ -6695,7 +6714,7 @@ class KitGlobalSearchComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGlobalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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 #textbox\n                 class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [size]=\"'none'\"\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                    <p class=\"header\"\n                      [class.empty]=\"!category.total\">\n                      <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                      <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                    </p>\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                          <div>\n                            <kit-pill class=\"status\"\n                                      [theme]=\"kitPillTheme.MAIN\">\n                              {{ lineItem.status }}\n                            </kit-pill>\n                          </div>\n\n                          <div class=\"subtitle\"\n                               kitHideBelowWidth\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?.from || lineItem.routePath?.to) {\n                            <kit-route-path class=\"route\"\n                                            kitHideBelowWidth\n                                            kitHideBelowWidthClass=\"hide\"\n                                            [kitHideBelowWidth]=\"132\"\n                                            [containerMode]=\"lineItem.routePath?.containerMode\"\n                                            [destinationPort]=\"lineItem.routePath?.to\"\n                                            [originPort]=\"lineItem.routePath?.from\"\n                                            [type]=\"lineItem.routePath?.type\"/>\n                          }\n                          @if (lineItem.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>{{ lineItem.dates?.firstDate.label }}</span>\n                              </p>\n                              <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                            </div>\n                            </div>\n                          }\n                          @if (lineItem.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>{{ lineItem.dates?.secondDate.label }}</span>\n                                </p>\n                                <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                            </div>\n                            </div>\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                    \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              }\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                                [iconType]=\"kitSvgIconType.STROKE\"\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:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .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 .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .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>:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>: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$3.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$3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$3.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i1$a.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$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { 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 #textbox\n                 class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [size]=\"'none'\"\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                    <p class=\"header\"\n                      [class.empty]=\"!category.total\">\n                      <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                      <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                    </p>\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                          <div>\n                            <kit-pill class=\"status\"\n                                      [theme]=\"kitPillTheme.MAIN\">\n                              {{ lineItem.status }}\n                            </kit-pill>\n                          </div>\n\n                          <div class=\"subtitle\"\n                               kitHideBelowWidth\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?.from || lineItem.routePath?.to) {\n                            <kit-route-path class=\"route\"\n                                            kitHideBelowWidth\n                                            kitHideBelowWidthClass=\"hide\"\n                                            [kitHideBelowWidth]=\"132\"\n                                            [containerMode]=\"lineItem.routePath?.containerMode\"\n                                            [destinationPort]=\"lineItem.routePath?.to\"\n                                            [originPort]=\"lineItem.routePath?.from\"\n                                            [type]=\"lineItem.routePath?.type\"/>\n                          }\n                          @if (lineItem.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>{{ lineItem.dates?.firstDate.label }}</span>\n                              </p>\n                              <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                            </div>\n                            </div>\n                          }\n                          @if (lineItem.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>{{ lineItem.dates?.secondDate.label }}</span>\n                                </p>\n                                <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                            </div>\n                            </div>\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                    \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              }\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                                [iconType]=\"kitSvgIconType.STROKE\"\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:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .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 .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .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>:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>: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$3.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$3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$3.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i1$a.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$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { 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$6.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], animations: [
             expandCollapseAnimation('height'),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -6811,7 +6830,7 @@ class KitSortableComponent {
         return this.columnCount ?? null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSortableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSortableComponent, isStandalone: true, selector: "kit-sortable", inputs: { items: "items", columnCount: "columnCount", itemClass: "itemClass", activeItemClass: "activeItemClass", zone: "zone", emptyItemClass: "emptyItemClass" }, outputs: { dragEnd: "dragEnd" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-sortable class=\"kit-sortable\"\n                [style.column-count]=\"columnsCount\"\n                [kendoSortableBinding]=\"items\"\n                [itemClass]=\"itemClass\"\n                [activeItemClass]=\"activeItemClass\"\n                [animation]=\"true\"\n                [zone]=\"zone\"\n                [emptyItemClass]=\"emptyItemClass\"\n                (dragEnd)=\"dragEnd.emit($event)\">\n  <ng-template let-item=\"item\">\n    @if (itemTemplate()) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n      ></ng-container>\n    } @else {\n      {{ item }}\n    }\n  </ng-template>\n</kendo-sortable>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.SortableComponent, selector: "kendo-sortable", inputs: ["tabIndex", "trackBy", "data", "navigable", "animation", "disabledIndexes", "zone", "acceptZones", "itemStyle", "emptyItemStyle", "activeItemStyle", "disabledItemStyle", "itemClass", "activeItemClass", "emptyItemClass", "disabledItemClass", "emptyText", "activeIndex"], outputs: ["dragStart", "dragEnd", "dragOver", "dragLeave", "dataMove", "dataAdd", "dataRemove", "navigate"], exportAs: ["kendoSortable"] }, { kind: "directive", type: i2$1.SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: ["kendoSortableBinding"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSortableComponent, isStandalone: true, selector: "kit-sortable", inputs: { items: "items", columnCount: "columnCount", itemClass: "itemClass", activeItemClass: "activeItemClass", zone: "zone", emptyItemClass: "emptyItemClass" }, outputs: { dragEnd: "dragEnd" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-sortable class=\"kit-sortable\"\n                [style.column-count]=\"columnsCount\"\n                [kendoSortableBinding]=\"items\"\n                [itemClass]=\"itemClass\"\n                [activeItemClass]=\"activeItemClass\"\n                [animation]=\"true\"\n                [zone]=\"zone\"\n                [emptyItemClass]=\"emptyItemClass\"\n                (dragEnd)=\"dragEnd.emit($event)\">\n  <ng-template let-item=\"item\">\n    @if (itemTemplate()) {\n      <ng-container *ngTemplateOutlet=\"itemTemplate(); context: { $implicit: item }\"\n      ></ng-container>\n    } @else {\n      {{ item }}\n    }\n  </ng-template>\n</kendo-sortable>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.SortableComponent, selector: "kendo-sortable", inputs: ["tabIndex", "trackBy", "data", "navigable", "animation", "disabledIndexes", "zone", "acceptZones", "itemStyle", "emptyItemStyle", "activeItemStyle", "disabledItemStyle", "itemClass", "activeItemClass", "emptyItemClass", "disabledItemClass", "emptyText", "activeIndex"], outputs: ["dragStart", "dragEnd", "dragOver", "dragLeave", "dataMove", "dataAdd", "dataRemove", "navigate"], exportAs: ["kendoSortable"] }, { kind: "directive", type: i2$1.SortableBindingDirective, selector: "[kendoSortableBinding]", inputs: ["kendoSortableBinding"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSortableComponent, decorators: [{
             type: Component,
@@ -8263,7 +8282,7 @@ class KitGridViewsComponent {
         this.collapsedList = viewChild((KitCollapsedListComponent), ...(ngDevMode ? [{ debugName: "collapsedList" }] : /* istanbul ignore next */ []));
         this.createNewViewPopup = viewChild('popup', { ...(ngDevMode ? { debugName: "createNewViewPopup" } : /* istanbul ignore next */ {}), read: KitPopupComponent });
         this.userTimeZone = computed(() => {
-            const user = this.store.selectSnapshot(KIT_USER_STATE_TOKEN);
+            const user = this.store.selectSignal(KIT_USER_STATE_TOKEN)();
             return user?.data?.namedTimeZone ?? 'UTC';
         }, ...(ngDevMode ? [{ debugName: "userTimeZone" }] : /* istanbul ignore next */ []));
         this.isViewSaving = signal(false, ...(ngDevMode ? [{ debugName: "isViewSaving" }] : /* istanbul ignore next */ []));
@@ -8758,7 +8777,7 @@ class KitFilterCheckboxComponent {
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, 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\"\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        {{ displayedValues[0] }}\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ?? '' }}\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           [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-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\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-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}::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"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.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"], 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: "21.2.4", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, 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\"\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        {{ displayedValues[0] }}\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ?? '' }}\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           [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-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\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox-tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox-tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-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}::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"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.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"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
             type: Component,
@@ -9589,65 +9608,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             type: Injectable
         }], ctorParameters: () => [] });
 
-const kitExportExcel = async (data, exportedColumns, exportedFileName, translationMap) => {
-    const translateService = inject(TranslateService);
-    const workbook = { sheets: [{ rows: [], columns: [] }] };
-    const columns = exportedColumns
-        .map(({ title, field }) => ({
-        value: translateService.instant(title || field),
-        background: '#7a7a7a',
-        color: '#fff',
-        width: 170,
-    }));
-    workbook.sheets[0].rows = getExportedExcelRows(columns, data, exportedColumns, translationMap);
-    workbook.sheets[0].columns = columns;
-    const dataUrl = await new Workbook(workbook).toDataURL();
-    return saveAs(dataUrl, `${exportedFileName}.xlsx`);
-};
-const getExportedExcelRows = (columns, data, gridColumns, translationMap) => {
-    const gridCellService = inject(KitGridCellService);
-    const rows = [{ cells: columns, type: 'header' }];
-    for (const row of data) {
-        const rowCells = gridColumns.map((column) => {
-            const value = gridCellService.getCellValue(row, column.field);
-            switch (column.type) {
-                case 'time':
-                    return { format: column.excelFormat, value: timeStringToExcelFraction(value) };
-                case 'date':
-                case 'dateTime': {
-                    const format = column.excelFormat || (column.type === 'date' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
-                    const dateValue = value ? convertToUtcDate(value) : undefined;
-                    return { format, value: dateValue };
-                }
-                case 'dateLocal':
-                case 'dateTimeLocal': {
-                    const format = column.excelFormat || (column.type === 'dateLocal' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
-                    const dateValue = value ? new Date(value) : undefined;
-                    return { format, value: dateValue };
-                }
-            }
-            return { value: gridCellService.createCellValue(column.type, column.field, row, translationMap) };
-        });
-        rows.push({ cells: rowCells, type: 'data' });
-    }
-    return rows;
-};
-const timeStringToExcelFraction = (time) => {
-    if (!time) {
-        return '';
-    }
-    ;
-    const [hoursStr, minutesStr,] = time.split(':');
-    const hours = Number.parseInt(hoursStr, 10);
-    const minutes = Number.parseInt(minutesStr, 10);
-    return (hours * 60 + minutes) / (24 * 60);
-};
-const convertToUtcDate = (dateString) => {
-    const date = new Date(dateString);
-    const timezoneOffset = date.getTimezoneOffset();
-    return new Date(date.getTime() + timezoneOffset * 60 * 1000);
-};
-
 var GridExportOptions;
 (function (GridExportOptions) {
     GridExportOptions["PDF"] = "pdf";
@@ -9682,11 +9642,86 @@ const gridExportOptions = [
     },
 ];
 
+class KitExcelExportService {
+    constructor() {
+        this.translateService = inject(TranslateService);
+        this.store = inject(Store);
+        this.gridCellService = inject(KitGridCellService);
+    }
+    async export(data, exportedColumns, exportedFileName, translationMap) {
+        const userTimezone = this.store.selectSnapshot(KIT_USER_STATE_TOKEN).data?.namedTimeZone ?? 'UTC';
+        const workbook = { sheets: [{ rows: [], columns: [] }] };
+        const columns = exportedColumns.map(({ title, field }) => ({
+            value: this.translateService.instant(title || field),
+            background: '#7a7a7a',
+            color: '#fff',
+            width: 170,
+        }));
+        workbook.sheets[0].rows = this.getExportedExcelRows(columns, data, exportedColumns, translationMap, userTimezone);
+        workbook.sheets[0].columns = columns;
+        const dataUrl = await new Workbook(workbook).toDataURL();
+        return saveAs(dataUrl, `${exportedFileName}.xlsx`);
+    }
+    getExportedExcelRows(columns, data, gridColumns, translationMap, userTimezone) {
+        const rows = [{ cells: columns, type: 'header' }];
+        for (const row of data) {
+            const rowCells = gridColumns.map((column) => {
+                const value = this.gridCellService.getCellValue(row, column.field);
+                switch (column.type) {
+                    case 'time':
+                        return { format: column.excelFormat, value: this.timeStringToExcelFraction(value) };
+                    case 'date':
+                    case 'dateTime': {
+                        const format = column.excelFormat || (column.type === 'date' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
+                        const dateValue = value ? this.convertToUtcDate(value) : undefined;
+                        return { format, value: dateValue };
+                    }
+                    case 'dateLocal':
+                    case 'dateTimeLocal': {
+                        const format = column.excelFormat || (column.type === 'dateLocal' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
+                        const dateValue = value ? new Date(value) : undefined;
+                        return { format, value: dateValue };
+                    }
+                    case 'dateZone':
+                    case 'dateTimeZone': {
+                        const format = column.excelFormat || (column.type === 'dateZone' ? KIT_DATE_FORMAT : KIT_DATETIME_FORMAT_LONG);
+                        const dateValue = value ? toZonedTime(new Date(value), userTimezone) : undefined;
+                        return { format, value: dateValue };
+                    }
+                }
+                return { value: this.gridCellService.createCellValue(column.type, column.field, row, translationMap) };
+            });
+            rows.push({ cells: rowCells, type: 'data' });
+        }
+        return rows;
+    }
+    timeStringToExcelFraction(time) {
+        if (!time) {
+            return '';
+        }
+        const [hoursStr, minutesStr,] = time.split(':');
+        const hours = Number.parseInt(hoursStr, 10);
+        const minutes = Number.parseInt(minutesStr, 10);
+        return (hours * 60 + minutes) / (24 * 60);
+    }
+    convertToUtcDate(dateString) {
+        const date = new Date(dateString);
+        const timezoneOffset = date.getTimezoneOffset();
+        return new Date(date.getTime() + timezoneOffset * 60 * 1000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitExcelExportService, decorators: [{
+            type: Injectable
+        }] });
+
 class KitGridExportComponent {
     constructor() {
         this.translateService = inject(TranslateService);
         this.notificationService = inject(KitNotificationService);
         this.gridCellService = inject(KitGridCellService);
+        this.kitExcelExportService = inject(KitExcelExportService);
         this.store = inject(Store);
         this.injector = inject(Injector);
         this.getExportedData = input.required(...(ngDevMode ? [{ debugName: "getExportedData" }] : /* istanbul ignore next */ []));
@@ -9755,7 +9790,7 @@ class KitGridExportComponent {
         return new Promise((resolve, reject) => this.getExportedData()().subscribe({
             next: ({ data }) => {
                 runInInjectionContext(this.injector, () => {
-                    kitExportExcel(data, this.exportedColumns, this.exportedFileName(), this.translationMap())
+                    this.kitExcelExportService.export(data, this.exportedColumns, this.exportedFileName(), this.translationMap())
                         .then(resolve)
                         .catch(reject);
                 });
@@ -11292,7 +11327,7 @@ class KitSplitContainerComponent {
         this.collapsed.emit(this.isSidebarCollapsed());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSplitContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSplitContainerComponent, isStandalone: true, selector: "kit-split-container", inputs: { contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, sidebarTemplateRef: { classPropertyName: "sidebarTemplateRef", publicName: "sidebarTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, sidebarTitle: { classPropertyName: "sidebarTitle", publicName: "sidebarTitle", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplateRef: { classPropertyName: "actionsTemplateRef", publicName: "actionsTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, isSidebarCollapsed: { classPropertyName: "isSidebarCollapsed", publicName: "isSidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSidebarCollapsed: "isSidebarCollapsedChange", collapsed: "collapsed" }, ngImport: i0, template: "<div class=\"kit-split-container\">\n  <div class=\"kit-split-container-content\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef()\" />\n  </div>\n\n  @if (sidebarTemplateRef()) {\n    <div class=\"kit-split-container-sidebar\"\n         [class.collapsed]=\"isSidebarCollapsed()\">\n      <div class=\"kit-split-container-sidebar-actions\">\n        <kit-button class=\"kit-split-container-collapsed-btn\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [icon]=\"isSidebarCollapsed() && kitSvgIcon.CHEVRON_LEFT || kitSvgIcon.CHEVRON_RIGHT\"\n                    (clicked)=\"toggleSidebar()\"\n        ></kit-button>\n    \n        @if (actionsTemplateRef()) {\n          <div class=\"kit-split-container-sidebar-custom-actions\">\n            <ng-container *ngTemplateOutlet=\"actionsTemplateRef()\" />\n          </div>\n        }\n      </div>\n    \n      <div class=\"kit-split-container-sidebar-content\">\n        <ng-container *ngTemplateOutlet=\"sidebarTemplateRef()\" />\n      </div>\n    \n      <div class=\"kit-split-container-sidebar-title\"\n           (click)=\"isSidebarCollapsed.set(false)\">\n        {{ sidebarTitle() }}\n      </div>\n    </div>\n  }\n</div>", styles: [":host{display:block;height:100%;min-height:0}.kit-split-container{width:100%;height:100%;box-sizing:border-box;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:100%;overflow:hidden}.kit-split-container-content{width:100%;height:100%;padding:20px;border-right:1px solid var(--ui-kit-color-grey-11);box-sizing:border-box;overflow:auto}.kit-split-container-content::-webkit-scrollbar{height:8px;width:8px}.kit-split-container-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-split-container-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-split-container-sidebar{height:100%;padding:20px;box-sizing:border-box;width:360px;transition:.3s width;display:flex;flex-direction:column;gap:35px;align-items:center}.kit-split-container-sidebar-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}.kit-split-container-sidebar-title{display:none;cursor:pointer;font-size:18px;line-height:24px;font-weight:500;writing-mode:vertical-rl;color:var(--ui-kit-color-grey-12)}.kit-split-container-sidebar-content{width:100%;height:calc(100% - 67px)}.kit-split-container-sidebar.collapsed{width:86px;gap:15px}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-actions{width:max-content}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-custom-actions,.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-content{display:none}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-title{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSplitContainerComponent, isStandalone: true, selector: "kit-split-container", inputs: { contentTemplateRef: { classPropertyName: "contentTemplateRef", publicName: "contentTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, sidebarTemplateRef: { classPropertyName: "sidebarTemplateRef", publicName: "sidebarTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, sidebarTitle: { classPropertyName: "sidebarTitle", publicName: "sidebarTitle", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplateRef: { classPropertyName: "actionsTemplateRef", publicName: "actionsTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, isSidebarCollapsed: { classPropertyName: "isSidebarCollapsed", publicName: "isSidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSidebarCollapsed: "isSidebarCollapsedChange", collapsed: "collapsed" }, ngImport: i0, template: "<div class=\"kit-split-container\">\n  <div class=\"kit-split-container-content\">\n    <ng-container *ngTemplateOutlet=\"contentTemplateRef()\" />\n  </div>\n\n  @if (sidebarTemplateRef()) {\n    <div class=\"kit-split-container-sidebar\"\n         [class.collapsed]=\"isSidebarCollapsed()\">\n      <div class=\"kit-split-container-sidebar-actions\">\n        <kit-button class=\"kit-split-container-collapsed-btn\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [icon]=\"isSidebarCollapsed() && kitSvgIcon.CHEVRON_LEFT || kitSvgIcon.CHEVRON_RIGHT\"\n                    (clicked)=\"toggleSidebar()\"\n        ></kit-button>\n    \n        @if (actionsTemplateRef()) {\n          <div class=\"kit-split-container-sidebar-custom-actions\">\n            <ng-container *ngTemplateOutlet=\"actionsTemplateRef()\" />\n          </div>\n        }\n      </div>\n    \n      <div class=\"kit-split-container-sidebar-content\">\n        <ng-container *ngTemplateOutlet=\"sidebarTemplateRef()\" />\n      </div>\n    \n      <div class=\"kit-split-container-sidebar-title\"\n           (click)=\"isSidebarCollapsed.set(false)\">\n        {{ sidebarTitle() }}\n      </div>\n    </div>\n  }\n</div>", styles: [":host{display:block;height:100%;min-height:0}.kit-split-container{width:100%;height:100%;box-sizing:border-box;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:100%;overflow:hidden}.kit-split-container-content{width:100%;height:100%;padding:20px;border-right:1px solid var(--ui-kit-color-grey-11);box-sizing:border-box;overflow:auto}.kit-split-container-content::-webkit-scrollbar{height:8px;width:8px}.kit-split-container-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-12);border-radius:4px}.kit-split-container-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-18)}.kit-split-container-sidebar{height:100%;padding:20px;box-sizing:border-box;width:360px;transition:.3s width;display:flex;flex-direction:column;gap:35px;align-items:center}.kit-split-container-sidebar-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}.kit-split-container-sidebar-title{display:none;cursor:pointer;font-size:18px;line-height:24px;font-weight:500;writing-mode:vertical-rl;color:var(--ui-kit-color-grey-12)}.kit-split-container-sidebar-content{width:100%;height:calc(100% - 67px)}.kit-split-container-sidebar.collapsed{width:86px;gap:15px}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-actions{width:max-content}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-custom-actions,.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-content{display:none}.kit-split-container-sidebar.collapsed .kit-split-container-sidebar-title{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSplitContainerComponent, decorators: [{
             type: Component,
@@ -11641,7 +11676,7 @@ class KitApiTokenMaintenanceFormComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitApiTokenMaintenanceFormComponent, isStandalone: true, selector: "kit-api-token-maintenance-form", inputs: { isCreateMode: { classPropertyName: "isCreateMode", publicName: "isCreateMode", isSignal: true, isRequired: false, transformFunction: null }, cardDetailsComponent: { classPropertyName: "cardDetailsComponent", publicName: "cardDetailsComponent", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { saved: "saved" }, providers: [
             KitFormErrors,
             KitClipboardService,
-        ], ngImport: i0, template: "<form class=\"kit-api-token-maintenance-form\"\n      [formGroup]=\"apiTokensForm\">\n  <kit-textbox formControlName=\"name\"\n               [label]=\"'kit.apiTokenMaintenance.name' | translate\"\n               [state]=\"getTextboxState(apiTokensForm, 'name')\"\n               [messageText]=\"getFormErrorMessages(apiTokensForm, 'name')\"\n  ></kit-textbox>\n  @if (!isCreateMode()) {\n    <kit-datepicker formControlName=\"createdDate\"\n                    [readonly]=\"true\"\n                    [label]=\"'kit.apiTokenMaintenance.createdDate' | translate\"\n    ></kit-datepicker>\n    @if (apiToken().data.token; as token) {\n      <div class=\"token-item\">\n        <div class=\"token-item-label\">{{ \"kit.apiTokenMaintenance.token\" | translate }}</div>\n        <div class=\"token-item-value\">\n          <div class=\"token-item-text\">{{ token }}</div>\n          <kit-svg-icon kitTooltip\n                        class=\"token-item-icon\"\n                        [title]=\"'kit.apiTokenMaintenance.copy' | translate\"\n                        kitTooltipFilter=\".token-item-icon\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [icon]=\"kitSvgIcon.COPY\"\n                        (click)=\"onCopy(token)\"\n          ></kit-svg-icon>\n        </div>\n      </div>\n    }\n    <kit-textbox formControlName=\"token\"\n                 [hidden]=\"apiToken().data.token\"\n                 [label]=\"'kit.apiTokenMaintenance.token' | translate\"\n                 [readonly]=\"true\"\n    ></kit-textbox>\n  }\n  <kit-toggle formControlName=\"enabled\"\n              [label]=\"'kit.apiTokenMaintenance.enabled' | translate\"\n              [leftLabel]=\"'kit.apiTokenMaintenance.off' | translate\"\n              [rightLabel]=\"'kit.apiTokenMaintenance.on' | translate\"\n  ></kit-toggle>\n</form>\n", styles: [".kit-api-token-maintenance-form{display:flex;flex-direction:column;gap:20px;padding:0}.kit-api-token-maintenance-form .token-item{display:flex;flex-direction:column;gap:4px}.kit-api-token-maintenance-form .token-item-label{color:var(--ui-kit-color-grey-10);font-size:14px}.kit-api-token-maintenance-form .token-item-value{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-api-token-maintenance-form .token-item-text{color:var(--ui-kit-color-grey-10);font-size:14px;word-wrap:break-word;min-width:0}.kit-api-token-maintenance-form .token-item-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-api-token-maintenance-form .token-item-icon:hover{stroke:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { 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: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<form class=\"kit-api-token-maintenance-form\"\n      [formGroup]=\"apiTokensForm\">\n  <kit-textbox formControlName=\"name\"\n               [label]=\"'kit.apiTokenMaintenance.name' | translate\"\n               [state]=\"getTextboxState(apiTokensForm, 'name')\"\n               [messageText]=\"getFormErrorMessages(apiTokensForm, 'name')\"\n  ></kit-textbox>\n  @if (!isCreateMode()) {\n    <kit-datepicker formControlName=\"createdDate\"\n                    [readonly]=\"true\"\n                    [label]=\"'kit.apiTokenMaintenance.createdDate' | translate\"\n    ></kit-datepicker>\n    @if (apiToken().data.token; as token) {\n      <div class=\"token-item\">\n        <div class=\"token-item-label\">{{ \"kit.apiTokenMaintenance.token\" | translate }}</div>\n        <div class=\"token-item-value\">\n          <div class=\"token-item-text\">{{ token }}</div>\n          <kit-svg-icon kitTooltip\n                        class=\"token-item-icon\"\n                        [title]=\"'kit.apiTokenMaintenance.copy' | translate\"\n                        kitTooltipFilter=\".token-item-icon\"\n                        [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                        [icon]=\"kitSvgIcon.COPY\"\n                        (click)=\"onCopy(token)\"\n          ></kit-svg-icon>\n        </div>\n      </div>\n    }\n    <kit-textbox formControlName=\"token\"\n                 [hidden]=\"apiToken().data.token\"\n                 [label]=\"'kit.apiTokenMaintenance.token' | translate\"\n                 [readonly]=\"true\"\n    ></kit-textbox>\n  }\n  <kit-toggle formControlName=\"enabled\"\n              [label]=\"'kit.apiTokenMaintenance.enabled' | translate\"\n              [leftLabel]=\"'kit.apiTokenMaintenance.off' | translate\"\n              [rightLabel]=\"'kit.apiTokenMaintenance.on' | translate\"\n  ></kit-toggle>\n</form>\n", styles: [".kit-api-token-maintenance-form{display:flex;flex-direction:column;gap:20px;padding:0}.kit-api-token-maintenance-form .token-item{display:flex;flex-direction:column;gap:4px}.kit-api-token-maintenance-form .token-item-label{color:var(--ui-kit-color-grey-10);font-size:14px}.kit-api-token-maintenance-form .token-item-value{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;height:40px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-api-token-maintenance-form .token-item-text{color:var(--ui-kit-color-grey-10);font-size:14px;word-wrap:break-word;min-width:0}.kit-api-token-maintenance-form .token-item-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12);cursor:pointer}.kit-api-token-maintenance-form .token-item-icon:hover{stroke:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitToggleComponent, selector: "kit-toggle", inputs: ["label", "disabled", "readonly", "defaultChecked", "leftLabel", "rightLabel", "messageIcon", "messageText", "size"], outputs: ["disabledChange", "defaultCheckedChange", "changed"] }, { 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: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitApiTokenMaintenanceFormComponent, decorators: [{
             type: Component,
@@ -11756,6 +11791,7 @@ class KitApiTokenMaintenanceListComponent {
         this.kitDialogService = inject(KitDialogService);
         this.translateService = inject(TranslateService);
         this.viewContainerRef = inject(ViewContainerRef);
+        this.kitExcelExportService = inject(KitExcelExportService);
         this.kitCardDetailsComponent = viewChild.required((KitCardDetailsComponent));
         this.apiTokens$ = this.store.select(KIT_API_TOKENS_STATE_TOKEN).pipe(map(({ data, loading, total }) => kitBuildGridDataResults(data, loading, total)));
         this.clientScopeFilter = {
@@ -11793,7 +11829,7 @@ class KitApiTokenMaintenanceListComponent {
         });
         this.kitApiTokenMaintenanceService.query(undefined, undefined, undefined, filters).subscribe(({ data }) => {
             runInInjectionContext(this.injector, () => {
-                kitExportExcel(data, exportedApiTokenColumns, 'Api Tokens', {});
+                this.kitExcelExportService.export(data, exportedApiTokenColumns, 'Api Tokens', {});
             });
         });
     }
@@ -11956,5 +11992,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchApiTokens, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAvatarComponent, KitAvatarSize, KitBackButtonComponent, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDateRangeSingleInput, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDrawerMode, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableActionsTemplateDirective, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntityTitleComponent, KitFileCardComponent, KitFileCardMessagesComponent, KitFileUploadComponent, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitMultiselectItemsDirection, KitMultiselectSize, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitPageLayoutComponent, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopoverAnchorDirective, KitPopoverComponent, KitPopoverPosition, KitPopoverShowOption, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerMonthHeaderCellTemplateDirective, KitSchedulerToolbarTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonSectionComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, isKitFilterDescriptor, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitExportExcel, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchApiTokens, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_DATE_FORMAT_SHORT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAvatarComponent, KitAvatarSize, KitBackButtonComponent, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDateRangeSingleInput, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDrawerMode, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableActionsTemplateDirective, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntityTitleComponent, KitExcelExportService, KitFileCardComponent, KitFileCardMessagesComponent, KitFileUploadComponent, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitLocationStepperIconTheme, KitLocationStepperTheme, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitMultiselectItemsDirection, KitMultiselectSize, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitPageLayoutComponent, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopoverAnchorDirective, KitPopoverComponent, KitPopoverPosition, KitPopoverShowOption, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerMonthHeaderCellTemplateDirective, KitSchedulerToolbarTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonSectionComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, isKitFilterDescriptor, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
 //# sourceMappingURL=indigina-ui-kit.mjs.map