@indigina/ui-kit 1.1.434 → 1.1.436

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,
@@ -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,
@@ -10418,6 +10437,7 @@ class KitSchedulerToolbarComponent {
         this.views = input([], ...(ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []));
         this.viewModes = input.required(...(ngDevMode ? [{ debugName: "viewModes" }] : /* istanbul ignore next */ []));
         this.selectedViewIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedViewIndex" }] : /* istanbul ignore next */ []));
+        this.showTodayButton = input(true, ...(ngDevMode ? [{ debugName: "showTodayButton" }] : /* istanbul ignore next */ []));
         this.kitSvgIcon = KitSvgIcon;
         this.kitButtonType = KitButtonType;
         this.kitButtonKind = KitButtonKind;
@@ -10514,7 +10534,7 @@ class KitSchedulerToolbarComponent {
         return date >= minDate && date <= maxDate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSchedulerToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSchedulerToolbarComponent, isStandalone: true, selector: "kit-scheduler-toolbar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null }, showTimePill: { classPropertyName: "showTimePill", publicName: "showTimePill", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, viewModes: { classPropertyName: "viewModes", publicName: "viewModes", isSignal: true, isRequired: true, transformFunction: null }, selectedViewIndex: { classPropertyName: "selectedViewIndex", publicName: "selectedViewIndex", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-scheduler-toolbar\">\n  <div class=\"kit-scheduler-toolbar-nav\">\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_LEFT\"\n                (clicked)=\"prev()\"\n    ></kit-button>\n    <kit-button label=\"Today\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"today()\"></kit-button>\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n                (clicked)=\"next()\">\n    </kit-button>\n  </div>\n\n  <div class=\"kit-scheduler-toolbar-views\">\n    @for (view of views(); track $index) {\n      <kit-button [type]=\"selectedViewIndex() === $index ? kitButtonType.PRIMARY : kitButtonType.TEXT\"\n                  [label]=\"viewSettingsMap()[$index].title\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  (clicked)=\"onViewChange(view)\"\n      ></kit-button>\n    }\n  </div>\n\n  @if (isWeekView()) {\n    <kit-daterange-single-input class=\"kit-scheduler-toolbar-datepicker\"\n                                rangeLength=\"week\"\n                                [dateRange]=\"weekRange()\"\n                                (dateChanged)=\"onDateChange($event.start)\"/>\n  } @else {\n    <kit-datepicker class=\"kit-scheduler-toolbar-datepicker\"\n                    [defaultDate]=\"selectedDate()\"\n                    [size]=\"kitDatepickerSize.SMALL\"\n                    [format]=\"getDatepickerFormat()\"\n                    (changed)=\"onDateChange($event)\"\n    ></kit-datepicker>\n  }\n\n  @if (showTimePill()) {\n    <kit-pill class=\"kit-scheduler-toolbar-time-pill\">\n      GMT standard time\n    </kit-pill>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [".kit-scheduler-toolbar{display:flex;align-items:center;gap:20px;width:100%}.kit-scheduler-toolbar-nav{display:flex;align-items:center;gap:1px;padding-right:20px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-scheduler-toolbar-views{display:flex;align-items:center}.kit-scheduler-toolbar-datepicker{width:200px}.kit-scheduler-toolbar ::ng-deep .kit-scheduler-toolbar-time-pill .kit-pill{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size", "readonly"], outputs: ["defaultDateChange", "disabledChange", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitDateRangeSingleInput, selector: "kit-daterange-single-input", inputs: ["format", "dateRange", "placeholder", "label", "rangeLength"], outputs: ["dateRangeChange", "dateChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSchedulerToolbarComponent, isStandalone: true, selector: "kit-scheduler-toolbar", inputs: { selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null }, showTimePill: { classPropertyName: "showTimePill", publicName: "showTimePill", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, viewModes: { classPropertyName: "viewModes", publicName: "viewModes", isSignal: true, isRequired: true, transformFunction: null }, selectedViewIndex: { classPropertyName: "selectedViewIndex", publicName: "selectedViewIndex", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-scheduler-toolbar\">\n  <div class=\"kit-scheduler-toolbar-nav\">\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_LEFT\"\n                (clicked)=\"prev()\"\n    ></kit-button>\n    @if (showTodayButton()) {\n      <kit-button label=\"Today\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  (clicked)=\"today()\" />\n    } @else {\n      <ng-container *ngTemplateOutlet=\"datePickerTemplate\" />\n    }\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n                (clicked)=\"next()\">\n    </kit-button>\n  </div>\n\n  <div class=\"kit-scheduler-toolbar-views\">\n    @for (view of views(); track $index) {\n      <kit-button [type]=\"selectedViewIndex() === $index ? kitButtonType.PRIMARY : kitButtonType.TEXT\"\n                  [label]=\"viewSettingsMap()[$index].title\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  (clicked)=\"onViewChange(view)\"\n      ></kit-button>\n    }\n  </div>\n\n  @if (showTodayButton()) {\n    <ng-container *ngTemplateOutlet=\"datePickerTemplate\" />\n  }\n\n  @if (showTimePill()) {\n    <kit-pill class=\"kit-scheduler-toolbar-time-pill\">\n      GMT standard time\n    </kit-pill>\n  }\n\n  <ng-content></ng-content>\n</div>\n\n<ng-template #datePickerTemplate>\n  @if (isWeekView()) {\n    <kit-daterange-single-input class=\"kit-scheduler-toolbar-datepicker\"\n                                rangeLength=\"week\"\n                                [dateRange]=\"weekRange()\"\n                                (dateChanged)=\"onDateChange($event.start)\"/>\n  } @else {\n    <kit-datepicker class=\"kit-scheduler-toolbar-datepicker\"\n                    [defaultDate]=\"selectedDate()\"\n                    [size]=\"kitDatepickerSize.SMALL\"\n                    [format]=\"getDatepickerFormat()\"\n                    (changed)=\"onDateChange($event)\"\n    ></kit-datepicker>\n  }\n</ng-template>\n", styles: [".kit-scheduler-toolbar{display:flex;align-items:center;gap:20px;width:100%}.kit-scheduler-toolbar-nav{display:flex;align-items:center;gap:1px;padding-right:20px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-scheduler-toolbar-views{display:flex;align-items:center}.kit-scheduler-toolbar-datepicker{width:225px}.kit-scheduler-toolbar ::ng-deep .kit-scheduler-toolbar-time-pill .kit-pill{border-color:var(--ui-kit-color-grey-11)}\n"], dependencies: [{ kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size", "readonly"], outputs: ["defaultDateChange", "disabledChange", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitDateRangeSingleInput, selector: "kit-daterange-single-input", inputs: ["format", "dateRange", "placeholder", "label", "rangeLength"], outputs: ["dateRangeChange", "dateChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSchedulerToolbarComponent, decorators: [{
             type: Component,
@@ -10523,8 +10543,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitDatepickerComponent,
                         KitPillComponent,
                         KitDateRangeSingleInput,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-scheduler-toolbar\">\n  <div class=\"kit-scheduler-toolbar-nav\">\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_LEFT\"\n                (clicked)=\"prev()\"\n    ></kit-button>\n    <kit-button label=\"Today\"\n                [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                (clicked)=\"today()\"></kit-button>\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n                (clicked)=\"next()\">\n    </kit-button>\n  </div>\n\n  <div class=\"kit-scheduler-toolbar-views\">\n    @for (view of views(); track $index) {\n      <kit-button [type]=\"selectedViewIndex() === $index ? kitButtonType.PRIMARY : kitButtonType.TEXT\"\n                  [label]=\"viewSettingsMap()[$index].title\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  (clicked)=\"onViewChange(view)\"\n      ></kit-button>\n    }\n  </div>\n\n  @if (isWeekView()) {\n    <kit-daterange-single-input class=\"kit-scheduler-toolbar-datepicker\"\n                                rangeLength=\"week\"\n                                [dateRange]=\"weekRange()\"\n                                (dateChanged)=\"onDateChange($event.start)\"/>\n  } @else {\n    <kit-datepicker class=\"kit-scheduler-toolbar-datepicker\"\n                    [defaultDate]=\"selectedDate()\"\n                    [size]=\"kitDatepickerSize.SMALL\"\n                    [format]=\"getDatepickerFormat()\"\n                    (changed)=\"onDateChange($event)\"\n    ></kit-datepicker>\n  }\n\n  @if (showTimePill()) {\n    <kit-pill class=\"kit-scheduler-toolbar-time-pill\">\n      GMT standard time\n    </kit-pill>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [".kit-scheduler-toolbar{display:flex;align-items:center;gap:20px;width:100%}.kit-scheduler-toolbar-nav{display:flex;align-items:center;gap:1px;padding-right:20px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-scheduler-toolbar-views{display:flex;align-items:center}.kit-scheduler-toolbar-datepicker{width:200px}.kit-scheduler-toolbar ::ng-deep .kit-scheduler-toolbar-time-pill .kit-pill{border-color:var(--ui-kit-color-grey-11)}\n"] }]
-        }], propDecorators: { selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: false }] }], showTimePill: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePill", required: false }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], viewModes: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModes", required: true }] }], selectedViewIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedViewIndex", required: false }] }] } });
+                        NgTemplateOutlet,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-scheduler-toolbar\">\n  <div class=\"kit-scheduler-toolbar-nav\">\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_LEFT\"\n                (clicked)=\"prev()\"\n    ></kit-button>\n    @if (showTodayButton()) {\n      <kit-button label=\"Today\"\n                  [type]=\"kitButtonType.GHOST\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  (clicked)=\"today()\" />\n    } @else {\n      <ng-container *ngTemplateOutlet=\"datePickerTemplate\" />\n    }\n    <kit-button [type]=\"kitButtonType.GHOST\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"\n                (clicked)=\"next()\">\n    </kit-button>\n  </div>\n\n  <div class=\"kit-scheduler-toolbar-views\">\n    @for (view of views(); track $index) {\n      <kit-button [type]=\"selectedViewIndex() === $index ? kitButtonType.PRIMARY : kitButtonType.TEXT\"\n                  [label]=\"viewSettingsMap()[$index].title\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  (clicked)=\"onViewChange(view)\"\n      ></kit-button>\n    }\n  </div>\n\n  @if (showTodayButton()) {\n    <ng-container *ngTemplateOutlet=\"datePickerTemplate\" />\n  }\n\n  @if (showTimePill()) {\n    <kit-pill class=\"kit-scheduler-toolbar-time-pill\">\n      GMT standard time\n    </kit-pill>\n  }\n\n  <ng-content></ng-content>\n</div>\n\n<ng-template #datePickerTemplate>\n  @if (isWeekView()) {\n    <kit-daterange-single-input class=\"kit-scheduler-toolbar-datepicker\"\n                                rangeLength=\"week\"\n                                [dateRange]=\"weekRange()\"\n                                (dateChanged)=\"onDateChange($event.start)\"/>\n  } @else {\n    <kit-datepicker class=\"kit-scheduler-toolbar-datepicker\"\n                    [defaultDate]=\"selectedDate()\"\n                    [size]=\"kitDatepickerSize.SMALL\"\n                    [format]=\"getDatepickerFormat()\"\n                    (changed)=\"onDateChange($event)\"\n    ></kit-datepicker>\n  }\n</ng-template>\n", styles: [".kit-scheduler-toolbar{display:flex;align-items:center;gap:20px;width:100%}.kit-scheduler-toolbar-nav{display:flex;align-items:center;gap:1px;padding-right:20px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-scheduler-toolbar-views{display:flex;align-items:center}.kit-scheduler-toolbar-datepicker{width:225px}.kit-scheduler-toolbar ::ng-deep .kit-scheduler-toolbar-time-pill .kit-pill{border-color:var(--ui-kit-color-grey-11)}\n"] }]
+        }], propDecorators: { selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: false }] }], showTimePill: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePill", required: false }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }], viewModes: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModes", required: true }] }], selectedViewIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedViewIndex", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }] } });
 
 class KitSchedulerWeekEventTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSchedulerWeekEventTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -10554,6 +10575,7 @@ class KitSchedulerComponent {
         this.eventsPerDay = input(3, ...(ngDevMode ? [{ debugName: "eventsPerDay" }] : /* istanbul ignore next */ []));
         this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.freezeToolbar = input(false, ...(ngDevMode ? [{ debugName: "freezeToolbar" }] : /* istanbul ignore next */ []));
+        this.showTodayButton = input(true, ...(ngDevMode ? [{ debugName: "showTodayButton" }] : /* istanbul ignore next */ []));
         this.eventClicked = output();
         this.eventDblClicked = output();
         this.slotClicked = output();
@@ -10615,7 +10637,7 @@ class KitSchedulerComponent {
         return local.toISOString().split('T')[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSchedulerComponent, isStandalone: true, selector: "kit-scheduler", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, viewModes: { classPropertyName: "viewModes", publicName: "viewModes", isSignal: true, isRequired: false, transformFunction: null }, showTimePill: { classPropertyName: "showTimePill", publicName: "showTimePill", isSignal: true, isRequired: false, transformFunction: null }, monthEventHeight: { classPropertyName: "monthEventHeight", publicName: "monthEventHeight", isSignal: true, isRequired: false, transformFunction: null }, eventsPerDay: { classPropertyName: "eventsPerDay", publicName: "eventsPerDay", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, freezeToolbar: { classPropertyName: "freezeToolbar", publicName: "freezeToolbar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClicked: "eventClicked", eventDblClicked: "eventDblClicked", slotClicked: "slotClicked", dateChanged: "dateChanged" }, queries: [{ propertyName: "customViewTemplate", first: true, predicate: KitSchedulerCustomViewTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "weekEventTemplate", first: true, predicate: KitSchedulerWeekEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "monthEventTemplate", first: true, predicate: KitSchedulerMonthEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "agendaTimeTemplate", first: true, predicate: KitSchedulerAgendaTimeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCellTemplate", first: true, predicate: KitSchedulerMonthHeaderCellTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: KitSchedulerToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scheduler", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-scheduler #scheduler\n                 class=\"kit-scheduler\"\n                 [ngClass]=\"{ 'freeze-toolbar': freezeToolbar() }\"\n                 [events]=\"events()\"\n                 [selectedDate]=\"selectedDate()\"\n                 [allDaySlot]=\"false\"\n                 [showFooter]=\"false\"\n                 [slotFill]=\"1\"\n                 [min]=\"min()\"\n                 [max]=\"max()\"\n                 [timezone]=\"timezone()\"\n                 [loading]=\"loading()\"\n                 [slotClass]=\"getSlotClass\"\n                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (navigate)=\"onNavigate($event)\"\n                 (eventDblClick)=\"eventDblClicked.emit($event)\"\n                 (dateChange)=\"dateChanged.emit($event)\">\n  <ng-template kendoSchedulerToolbarTemplate\n               let-selectedDate=\"selectedDate\"\n               let-selectedView=\"selectedView\"\n               let-views=\"views\">\n    <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n                           [selectedDate]=\"selectedDate\"\n                           [selectedView]=\"selectedView\"\n                           [views]=\"views\"\n                           [viewModes]=\"viewModes()\"\n                           [showTimePill]=\"showTimePill()\"\n                           [selectedViewIndex]=\"scheduler.selectedViewIndex\">\n      @if (toolbarTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      }\n    </kit-scheduler-toolbar>\n  </ng-template>\n\n  <ng-template kendoSchedulerDateHeaderTemplate\n               let-date=\"date\">\n    <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n    ></ng-container>\n  </ng-template>\n\n  <ng-template kendoSchedulerMajorTimeHeaderTemplate\n               let-date=\"date\">\n    {{ date | date:'h a' }}\n  </ng-template>\n\n  <ng-template kendoSchedulerTimeSlotTemplate\n               let-date=\"date\">\n    <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n  </ng-template>\n\n  <ng-template kendoSchedulerMonthDaySlotTemplate\n               let-date=\"date\">\n    <div class=\"month-day\"\n         [class.selected]=\"monthCellIsSelected(date)\">\n      @if (headerCellTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template; context: { date }\"\n        ></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n        ></ng-container>\n      }\n\n      @if (monthEventTemplate(); as template) {\n        <div class=\"month-day-events\">\n          <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (weekEventTemplate(); as template) {\n    <ng-template kendoSchedulerEventTemplate\n                 let-event=\"event\">\n      <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n                              [eventsPerDay]=\"eventsPerDay()\"\n  ></kendo-scheduler-month-view>\n\n  @if (viewModes()['week']) {\n    <kendo-scheduler-week-view\n    ></kendo-scheduler-week-view>\n  }\n\n  @if (viewModes()['agenda']) {\n    @for (agendaView of viewModes()['agenda']; track agendaView.title) {\n      <kendo-scheduler-agenda-view [numberOfDays]=\"agendaView.numberOfDays\"\n      ></kendo-scheduler-agenda-view>\n    }\n  }\n\n  @if (agendaTimeTemplate(); as template) {\n    <ng-template kendoSchedulerAgendaTimeTemplate\n                 let-start=\"start\">\n      <ng-container *ngTemplateOutlet=\"template; context: { start }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  @if (viewModes()['day']) {\n    <kendo-scheduler-day-view\n    ></kendo-scheduler-day-view>\n  }\n\n  @if (viewModes()['timeline']) {\n    <kendo-scheduler-timeline-view\n    ></kendo-scheduler-timeline-view>\n  }\n\n  @if (viewModes()['custom']) {\n    @if (customViewTemplate(); as template) {\n      <ng-template [kendoSchedulerView]=\"viewModes()['custom']?.title\">\n        <ng-container *ngTemplateOutlet=\"template\"\n        ></ng-container>\n      </ng-template>\n    }\n  }\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n             let-date=\"date\">\n  <div class=\"week-day\">\n    <div class=\"week-day-name\">\n      {{ date | date:'EEE' }}\n    </div>\n    <div class=\"week-day-date\">\n      {{ date | date:'dd' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler.freeze-toolbar{height:100%}.kit-scheduler.freeze-toolbar ::ng-deep month-view{flex:1;overflow-y:auto}.kit-scheduler ::ng-deep .k-scheduler-toolbar{padding:0 0 34px;border:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-table tr:has(.highlightDate) .k-scheduler-cell{background-color:var(--ui-kit-color-background);border-color:var(--kendo-color-border, rgba(0, 0, 0, .08))}.kit-scheduler ::ng-deep .k-scheduler-cell.highlightDate{background-color:var(--ui-kit-color-background)}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;margin-top:6px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer;box-sizing:content-box;padding-inline-end:0}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-timecolumn{text-align:center}\n"], dependencies: [{ kind: "component", type: i1$f.SchedulerComponent, selector: "kendo-scheduler", inputs: ["selectedViewIndex", "editable", "selectable", "min", "max", "eventHeight", "columnWidth", "showWorkHours", "startTime", "endTime", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "weekStart", "slotDuration", "slotDivisions", "slotFill", "allDaySlot", "scrollTime", "group", "resources", "loading", "timezone", "events", "selectedDate", "modelFields", "currentTimeMarker", "highlightOngoingEvents", "showToolbar", "showFooter", "slotClass", "eventClass", "eventStyles", "hiddenDays", "isSlotSelected"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport", "schedulerResize"] }, { kind: "directive", type: i1$f.SchedulerViewDirective, selector: "[kendoSchedulerView]", inputs: ["kendoSchedulerView", "kendoSchedulerViewName"] }, { kind: "directive", type: i1$f.ShortcutsDirective, selector: "kendo-scheduler" }, { kind: "component", type: i1$f.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$f.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "component", type: i1$f.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventsPerDay", "eventHeight", "adaptiveSlotHeight", "selectedDateFormat", "selectedShortDateFormat"], outputs: ["moreEventsClick"] }, { kind: "component", type: i1$f.TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$f.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "directive", type: i1$f.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { kind: "directive", type: i1$f.AgendaTimeTemplateDirective, selector: "[kendoSchedulerAgendaTimeTemplate]" }, { kind: "directive", type: i1$f.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }, { kind: "directive", type: i1$f.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { kind: "directive", type: i1$f.MajorTimeHeaderTemplateDirective, selector: "[kendoSchedulerMajorTimeHeaderTemplate]" }, { kind: "directive", type: i1$f.MonthDaySlotTemplateDirective, selector: "[kendoSchedulerMonthDaySlotTemplate]" }, { kind: "directive", type: i1$f.TimeSlotTemplateDirective, selector: "[kendoSchedulerTimeSlotTemplate]" }, { kind: "component", type: KitSchedulerToolbarComponent, selector: "kit-scheduler-toolbar", inputs: ["selectedDate", "selectedView", "showTimePill", "views", "viewModes", "selectedViewIndex"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitSchedulerComponent, isStandalone: true, selector: "kit-scheduler", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null }, viewModes: { classPropertyName: "viewModes", publicName: "viewModes", isSignal: true, isRequired: false, transformFunction: null }, showTimePill: { classPropertyName: "showTimePill", publicName: "showTimePill", isSignal: true, isRequired: false, transformFunction: null }, monthEventHeight: { classPropertyName: "monthEventHeight", publicName: "monthEventHeight", isSignal: true, isRequired: false, transformFunction: null }, eventsPerDay: { classPropertyName: "eventsPerDay", publicName: "eventsPerDay", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, freezeToolbar: { classPropertyName: "freezeToolbar", publicName: "freezeToolbar", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { eventClicked: "eventClicked", eventDblClicked: "eventDblClicked", slotClicked: "slotClicked", dateChanged: "dateChanged" }, queries: [{ propertyName: "customViewTemplate", first: true, predicate: KitSchedulerCustomViewTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "weekEventTemplate", first: true, predicate: KitSchedulerWeekEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "monthEventTemplate", first: true, predicate: KitSchedulerMonthEventTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "agendaTimeTemplate", first: true, predicate: KitSchedulerAgendaTimeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCellTemplate", first: true, predicate: KitSchedulerMonthHeaderCellTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarTemplate", first: true, predicate: KitSchedulerToolbarTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scheduler", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<kendo-scheduler #scheduler\n                 class=\"kit-scheduler\"\n                 [ngClass]=\"{ 'freeze-toolbar': freezeToolbar() }\"\n                 [events]=\"events()\"\n                 [selectedDate]=\"selectedDate()\"\n                 [allDaySlot]=\"false\"\n                 [showFooter]=\"false\"\n                 [slotFill]=\"1\"\n                 [min]=\"min()\"\n                 [max]=\"max()\"\n                 [timezone]=\"timezone()\"\n                 [loading]=\"loading()\"\n                 [slotClass]=\"getSlotClass\"\n                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (navigate)=\"onNavigate($event)\"\n                 (eventDblClick)=\"eventDblClicked.emit($event)\"\n                 (dateChange)=\"dateChanged.emit($event)\">\n  <ng-template kendoSchedulerToolbarTemplate\n               let-selectedDate=\"selectedDate\"\n               let-selectedView=\"selectedView\"\n               let-views=\"views\">\n    <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n                           [selectedDate]=\"selectedDate\"\n                           [selectedView]=\"selectedView\"\n                           [views]=\"views\"\n                           [viewModes]=\"viewModes()\"\n                           [showTimePill]=\"showTimePill()\"\n                           [selectedViewIndex]=\"scheduler.selectedViewIndex\"\n                           [showTodayButton]=\"showTodayButton()\">\n      @if (toolbarTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      }\n    </kit-scheduler-toolbar>\n  </ng-template>\n\n  <ng-template kendoSchedulerDateHeaderTemplate\n               let-date=\"date\">\n    <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n    ></ng-container>\n  </ng-template>\n\n  <ng-template kendoSchedulerMajorTimeHeaderTemplate\n               let-date=\"date\">\n    {{ date | date:'h a' }}\n  </ng-template>\n\n  <ng-template kendoSchedulerTimeSlotTemplate\n               let-date=\"date\">\n    <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n  </ng-template>\n\n  <ng-template kendoSchedulerMonthDaySlotTemplate\n               let-date=\"date\">\n    <div class=\"month-day\"\n         [class.selected]=\"monthCellIsSelected(date)\">\n      @if (headerCellTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template; context: { date }\"\n        ></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n        ></ng-container>\n      }\n\n      @if (monthEventTemplate(); as template) {\n        <div class=\"month-day-events\">\n          <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (weekEventTemplate(); as template) {\n    <ng-template kendoSchedulerEventTemplate\n                 let-event=\"event\">\n      <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n                              [eventsPerDay]=\"eventsPerDay()\"\n  ></kendo-scheduler-month-view>\n\n  @if (viewModes()['week']) {\n    <kendo-scheduler-week-view\n    ></kendo-scheduler-week-view>\n  }\n\n  @if (viewModes()['agenda']) {\n    @for (agendaView of viewModes()['agenda']; track agendaView.title) {\n      <kendo-scheduler-agenda-view [numberOfDays]=\"agendaView.numberOfDays\"\n      ></kendo-scheduler-agenda-view>\n    }\n  }\n\n  @if (agendaTimeTemplate(); as template) {\n    <ng-template kendoSchedulerAgendaTimeTemplate\n                 let-start=\"start\">\n      <ng-container *ngTemplateOutlet=\"template; context: { start }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  @if (viewModes()['day']) {\n    <kendo-scheduler-day-view\n    ></kendo-scheduler-day-view>\n  }\n\n  @if (viewModes()['timeline']) {\n    <kendo-scheduler-timeline-view\n    ></kendo-scheduler-timeline-view>\n  }\n\n  @if (viewModes()['custom']) {\n    @if (customViewTemplate(); as template) {\n      <ng-template [kendoSchedulerView]=\"viewModes()['custom']?.title\">\n        <ng-container *ngTemplateOutlet=\"template\"\n        ></ng-container>\n      </ng-template>\n    }\n  }\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n             let-date=\"date\">\n  <div class=\"week-day\">\n    <div class=\"week-day-name\">\n      {{ date | date:'EEE' }}\n    </div>\n    <div class=\"week-day-date\">\n      {{ date | date:'dd' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler.freeze-toolbar{height:100%}.kit-scheduler.freeze-toolbar ::ng-deep month-view{flex:1;overflow-y:auto}.kit-scheduler ::ng-deep .k-scheduler-toolbar{padding:0 0 34px;border:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-table tr:has(.highlightDate) .k-scheduler-cell{background-color:var(--ui-kit-color-background);border-color:var(--kendo-color-border, rgba(0, 0, 0, .08))}.kit-scheduler ::ng-deep .k-scheduler-cell.highlightDate{background-color:var(--ui-kit-color-background)}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;margin-top:6px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer;box-sizing:content-box;padding-inline-end:0}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-timecolumn{text-align:center}\n"], dependencies: [{ kind: "component", type: i1$f.SchedulerComponent, selector: "kendo-scheduler", inputs: ["selectedViewIndex", "editable", "selectable", "min", "max", "eventHeight", "columnWidth", "showWorkHours", "startTime", "endTime", "workDayStart", "workDayEnd", "workWeekStart", "workWeekEnd", "weekStart", "slotDuration", "slotDivisions", "slotFill", "allDaySlot", "scrollTime", "group", "resources", "loading", "timezone", "events", "selectedDate", "modelFields", "currentTimeMarker", "highlightOngoingEvents", "showToolbar", "showFooter", "slotClass", "eventClass", "eventStyles", "hiddenDays", "isSlotSelected"], outputs: ["selectedViewIndexChange", "navigate", "dateChange", "slotClick", "slotDblClick", "create", "eventClick", "eventDblClick", "eventKeydown", "cancel", "save", "remove", "resizeStart", "resize", "resizeEnd", "dragStart", "drag", "dragEnd", "slotDragStart", "slotDrag", "slotDragEnd", "pdfExport", "schedulerResize"] }, { kind: "directive", type: i1$f.SchedulerViewDirective, selector: "[kendoSchedulerView]", inputs: ["kendoSchedulerView", "kendoSchedulerViewName"] }, { kind: "directive", type: i1$f.ShortcutsDirective, selector: "kendo-scheduler" }, { kind: "component", type: i1$f.AgendaViewComponent, selector: "kendo-scheduler-agenda-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$f.DayViewComponent, selector: "kendo-scheduler-day-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "component", type: i1$f.MonthViewComponent, selector: "kendo-scheduler-month-view", inputs: ["eventsPerDay", "eventHeight", "adaptiveSlotHeight", "selectedDateFormat", "selectedShortDateFormat"], outputs: ["moreEventsClick"] }, { kind: "component", type: i1$f.TimelineViewComponent, selector: "kendo-scheduler-timeline-view", inputs: ["selectedDateFormat", "selectedShortDateFormat", "numberOfDays"] }, { kind: "component", type: i1$f.WeekViewComponent, selector: "kendo-scheduler-week-view", inputs: ["selectedDateFormat", "selectedShortDateFormat"] }, { kind: "directive", type: i1$f.ToolbarTemplateDirective, selector: "[kendoSchedulerToolbarTemplate]" }, { kind: "directive", type: i1$f.AgendaTimeTemplateDirective, selector: "[kendoSchedulerAgendaTimeTemplate]" }, { kind: "directive", type: i1$f.DateHeaderTemplateDirective, selector: "[kendoSchedulerDateHeaderTemplate]" }, { kind: "directive", type: i1$f.EventTemplateDirective, selector: "[kendoSchedulerEventTemplate]" }, { kind: "directive", type: i1$f.MajorTimeHeaderTemplateDirective, selector: "[kendoSchedulerMajorTimeHeaderTemplate]" }, { kind: "directive", type: i1$f.MonthDaySlotTemplateDirective, selector: "[kendoSchedulerMonthDaySlotTemplate]" }, { kind: "directive", type: i1$f.TimeSlotTemplateDirective, selector: "[kendoSchedulerTimeSlotTemplate]" }, { kind: "component", type: KitSchedulerToolbarComponent, selector: "kit-scheduler-toolbar", inputs: ["selectedDate", "selectedView", "showTimePill", "views", "viewModes", "selectedViewIndex", "showTodayButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitSchedulerComponent, decorators: [{
             type: Component,
@@ -10625,8 +10647,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         DatePipe,
                         NgTemplateOutlet,
                         NgClass,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-scheduler #scheduler\n                 class=\"kit-scheduler\"\n                 [ngClass]=\"{ 'freeze-toolbar': freezeToolbar() }\"\n                 [events]=\"events()\"\n                 [selectedDate]=\"selectedDate()\"\n                 [allDaySlot]=\"false\"\n                 [showFooter]=\"false\"\n                 [slotFill]=\"1\"\n                 [min]=\"min()\"\n                 [max]=\"max()\"\n                 [timezone]=\"timezone()\"\n                 [loading]=\"loading()\"\n                 [slotClass]=\"getSlotClass\"\n                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (navigate)=\"onNavigate($event)\"\n                 (eventDblClick)=\"eventDblClicked.emit($event)\"\n                 (dateChange)=\"dateChanged.emit($event)\">\n  <ng-template kendoSchedulerToolbarTemplate\n               let-selectedDate=\"selectedDate\"\n               let-selectedView=\"selectedView\"\n               let-views=\"views\">\n    <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n                           [selectedDate]=\"selectedDate\"\n                           [selectedView]=\"selectedView\"\n                           [views]=\"views\"\n                           [viewModes]=\"viewModes()\"\n                           [showTimePill]=\"showTimePill()\"\n                           [selectedViewIndex]=\"scheduler.selectedViewIndex\">\n      @if (toolbarTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      }\n    </kit-scheduler-toolbar>\n  </ng-template>\n\n  <ng-template kendoSchedulerDateHeaderTemplate\n               let-date=\"date\">\n    <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n    ></ng-container>\n  </ng-template>\n\n  <ng-template kendoSchedulerMajorTimeHeaderTemplate\n               let-date=\"date\">\n    {{ date | date:'h a' }}\n  </ng-template>\n\n  <ng-template kendoSchedulerTimeSlotTemplate\n               let-date=\"date\">\n    <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n  </ng-template>\n\n  <ng-template kendoSchedulerMonthDaySlotTemplate\n               let-date=\"date\">\n    <div class=\"month-day\"\n         [class.selected]=\"monthCellIsSelected(date)\">\n      @if (headerCellTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template; context: { date }\"\n        ></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n        ></ng-container>\n      }\n\n      @if (monthEventTemplate(); as template) {\n        <div class=\"month-day-events\">\n          <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (weekEventTemplate(); as template) {\n    <ng-template kendoSchedulerEventTemplate\n                 let-event=\"event\">\n      <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n                              [eventsPerDay]=\"eventsPerDay()\"\n  ></kendo-scheduler-month-view>\n\n  @if (viewModes()['week']) {\n    <kendo-scheduler-week-view\n    ></kendo-scheduler-week-view>\n  }\n\n  @if (viewModes()['agenda']) {\n    @for (agendaView of viewModes()['agenda']; track agendaView.title) {\n      <kendo-scheduler-agenda-view [numberOfDays]=\"agendaView.numberOfDays\"\n      ></kendo-scheduler-agenda-view>\n    }\n  }\n\n  @if (agendaTimeTemplate(); as template) {\n    <ng-template kendoSchedulerAgendaTimeTemplate\n                 let-start=\"start\">\n      <ng-container *ngTemplateOutlet=\"template; context: { start }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  @if (viewModes()['day']) {\n    <kendo-scheduler-day-view\n    ></kendo-scheduler-day-view>\n  }\n\n  @if (viewModes()['timeline']) {\n    <kendo-scheduler-timeline-view\n    ></kendo-scheduler-timeline-view>\n  }\n\n  @if (viewModes()['custom']) {\n    @if (customViewTemplate(); as template) {\n      <ng-template [kendoSchedulerView]=\"viewModes()['custom']?.title\">\n        <ng-container *ngTemplateOutlet=\"template\"\n        ></ng-container>\n      </ng-template>\n    }\n  }\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n             let-date=\"date\">\n  <div class=\"week-day\">\n    <div class=\"week-day-name\">\n      {{ date | date:'EEE' }}\n    </div>\n    <div class=\"week-day-date\">\n      {{ date | date:'dd' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler.freeze-toolbar{height:100%}.kit-scheduler.freeze-toolbar ::ng-deep month-view{flex:1;overflow-y:auto}.kit-scheduler ::ng-deep .k-scheduler-toolbar{padding:0 0 34px;border:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-table tr:has(.highlightDate) .k-scheduler-cell{background-color:var(--ui-kit-color-background);border-color:var(--kendo-color-border, rgba(0, 0, 0, .08))}.kit-scheduler ::ng-deep .k-scheduler-cell.highlightDate{background-color:var(--ui-kit-color-background)}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;margin-top:6px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer;box-sizing:content-box;padding-inline-end:0}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-timecolumn{text-align:center}\n"] }]
-        }], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], viewModes: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModes", required: false }] }], showTimePill: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePill", required: false }] }], monthEventHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthEventHeight", required: false }] }], eventsPerDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventsPerDay", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], freezeToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "freezeToolbar", required: false }] }], eventClicked: [{ type: i0.Output, args: ["eventClicked"] }], eventDblClicked: [{ type: i0.Output, args: ["eventDblClicked"] }], slotClicked: [{ type: i0.Output, args: ["slotClicked"] }], dateChanged: [{ type: i0.Output, args: ["dateChanged"] }], scheduler: [{ type: i0.ViewChild, args: ['scheduler', { isSignal: true }] }], customViewTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerCustomViewTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], weekEventTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerWeekEventTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], monthEventTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerMonthEventTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], agendaTimeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerAgendaTimeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerMonthHeaderCellTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kendo-scheduler #scheduler\n                 class=\"kit-scheduler\"\n                 [ngClass]=\"{ 'freeze-toolbar': freezeToolbar() }\"\n                 [events]=\"events()\"\n                 [selectedDate]=\"selectedDate()\"\n                 [allDaySlot]=\"false\"\n                 [showFooter]=\"false\"\n                 [slotFill]=\"1\"\n                 [min]=\"min()\"\n                 [max]=\"max()\"\n                 [timezone]=\"timezone()\"\n                 [loading]=\"loading()\"\n                 [slotClass]=\"getSlotClass\"\n                 (eventClick)=\"onEventClick($event)\"\n                 (slotClick)=\"onSlotClick($event)\"\n                 (navigate)=\"onNavigate($event)\"\n                 (eventDblClick)=\"eventDblClicked.emit($event)\"\n                 (dateChange)=\"dateChanged.emit($event)\">\n  <ng-template kendoSchedulerToolbarTemplate\n               let-selectedDate=\"selectedDate\"\n               let-selectedView=\"selectedView\"\n               let-views=\"views\">\n    <kit-scheduler-toolbar class=\"kit-scheduler-toolbar\"\n                           [selectedDate]=\"selectedDate\"\n                           [selectedView]=\"selectedView\"\n                           [views]=\"views\"\n                           [viewModes]=\"viewModes()\"\n                           [showTimePill]=\"showTimePill()\"\n                           [selectedViewIndex]=\"scheduler.selectedViewIndex\"\n                           [showTodayButton]=\"showTodayButton()\">\n      @if (toolbarTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n      }\n    </kit-scheduler-toolbar>\n  </ng-template>\n\n  <ng-template kendoSchedulerDateHeaderTemplate\n               let-date=\"date\">\n    <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n    ></ng-container>\n  </ng-template>\n\n  <ng-template kendoSchedulerMajorTimeHeaderTemplate\n               let-date=\"date\">\n    {{ date | date:'h a' }}\n  </ng-template>\n\n  <ng-template kendoSchedulerTimeSlotTemplate\n               let-date=\"date\">\n    <div [class.selected]=\"weekCellIsSelected(date)\"></div>\n  </ng-template>\n\n  <ng-template kendoSchedulerMonthDaySlotTemplate\n               let-date=\"date\">\n    <div class=\"month-day\"\n         [class.selected]=\"monthCellIsSelected(date)\">\n      @if (headerCellTemplate(); as template) {\n        <ng-container *ngTemplateOutlet=\"template; context: { date }\"\n        ></ng-container>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"weekDayTemplate; context: { date }\"\n        ></ng-container>\n      }\n\n      @if (monthEventTemplate(); as template) {\n        <div class=\"month-day-events\">\n          <ng-container *ngTemplateOutlet=\"template; context: { date, events: getEventsForDate(date, events()) }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  </ng-template>\n\n  @if (weekEventTemplate(); as template) {\n    <ng-template kendoSchedulerEventTemplate\n                 let-event=\"event\">\n      <ng-container *ngTemplateOutlet=\"template; context: { event }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  <kendo-scheduler-month-view [eventHeight]=\"monthEventHeight()\"\n                              [eventsPerDay]=\"eventsPerDay()\"\n  ></kendo-scheduler-month-view>\n\n  @if (viewModes()['week']) {\n    <kendo-scheduler-week-view\n    ></kendo-scheduler-week-view>\n  }\n\n  @if (viewModes()['agenda']) {\n    @for (agendaView of viewModes()['agenda']; track agendaView.title) {\n      <kendo-scheduler-agenda-view [numberOfDays]=\"agendaView.numberOfDays\"\n      ></kendo-scheduler-agenda-view>\n    }\n  }\n\n  @if (agendaTimeTemplate(); as template) {\n    <ng-template kendoSchedulerAgendaTimeTemplate\n                 let-start=\"start\">\n      <ng-container *ngTemplateOutlet=\"template; context: { start }\"\n      ></ng-container>\n    </ng-template>\n  }\n\n  @if (viewModes()['day']) {\n    <kendo-scheduler-day-view\n    ></kendo-scheduler-day-view>\n  }\n\n  @if (viewModes()['timeline']) {\n    <kendo-scheduler-timeline-view\n    ></kendo-scheduler-timeline-view>\n  }\n\n  @if (viewModes()['custom']) {\n    @if (customViewTemplate(); as template) {\n      <ng-template [kendoSchedulerView]=\"viewModes()['custom']?.title\">\n        <ng-container *ngTemplateOutlet=\"template\"\n        ></ng-container>\n      </ng-template>\n    }\n  }\n</kendo-scheduler>\n\n<ng-template #weekDayTemplate\n             let-date=\"date\">\n  <div class=\"week-day\">\n    <div class=\"week-day-name\">\n      {{ date | date:'EEE' }}\n    </div>\n    <div class=\"week-day-date\">\n      {{ date | date:'dd' }}\n    </div>\n  </div>\n</ng-template>\n", styles: [".kit-scheduler{display:flex;flex-direction:column;border:none;background:none}.kit-scheduler-toolbar{flex:1}.kit-scheduler.freeze-toolbar{height:100%}.kit-scheduler.freeze-toolbar ::ng-deep month-view{flex:1;overflow-y:auto}.kit-scheduler ::ng-deep .k-scheduler-toolbar{padding:0 0 34px;border:none}.kit-scheduler ::ng-deep .k-scheduler-toolbar:before{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-table tr:has(.highlightDate) .k-scheduler-cell{background-color:var(--ui-kit-color-background);border-color:var(--kendo-color-border, rgba(0, 0, 0, .08))}.kit-scheduler ::ng-deep .k-scheduler-cell.highlightDate{background-color:var(--ui-kit-color-background)}.kit-scheduler ::ng-deep .k-scheduler-cell:has(.selected){background:var(--ui-kit-color-blue-1)}.kit-scheduler ::ng-deep .k-scheduler-table{border-color:var(--ui-kit-color-grey-11)}.kit-scheduler ::ng-deep .k-scheduler-table .k-middle-row .k-scheduler-cell{border-bottom:1px solid var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-times{border:none}.kit-scheduler ::ng-deep .k-scheduler-times .k-scheduler-cell{color:var(--ui-kit-color-grey-18);font-size:12px;font-weight:500;border:none;background:none;text-align:left}.kit-scheduler ::ng-deep .k-scheduler-cell{background:var(--ui-kit-color-white);cursor:pointer}.kit-scheduler ::ng-deep .week-day{display:flex;flex-direction:column;font-weight:500;text-align:left}.kit-scheduler ::ng-deep .week-day-name{color:var(--ui-kit-color-grey-18);font-size:10px;line-height:16px;text-transform:uppercase}.kit-scheduler ::ng-deep .week-day-date{color:var(--ui-kit-color-grey-10);font-size:21px;line-height:30px}.kit-scheduler ::ng-deep .month-day{display:flex;flex-direction:column;margin-top:6px}.kit-scheduler ::ng-deep .month-day-events{display:flex;flex-direction:column;gap:8px;flex:1}.kit-scheduler ::ng-deep .month-day-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);text-align:left;cursor:pointer}.kit-scheduler ::ng-deep .month-day-event:nth-child(n+5){display:none}.kit-scheduler ::ng-deep .month-day-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .month-day-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-scheduler-head{display:none}.kit-scheduler ::ng-deep .k-scheduler-monthview .k-other-month{background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-event,.kit-scheduler ::ng-deep .k-scheduler-monthview:has(.month-day-events) .k-more-events{display:none}.kit-scheduler ::ng-deep .k-more-events{color:var(--ui-kit-color-grey-14);border:none;border-radius:4px;background:var(--ui-kit-color-grey-13)}.kit-scheduler ::ng-deep .k-more-events:hover{color:var(--ui-kit-color-main)}.kit-scheduler ::ng-deep .k-event{color:var(--ui-kit-color-white);font-size:14px;border-radius:4px;background:var(--ui-kit-color-main);cursor:pointer;box-sizing:content-box;padding-inline-end:0}.kit-scheduler ::ng-deep .k-event-template{padding:0}.kit-scheduler ::ng-deep .k-event.k-selected{background:var(--ui-kit-color-active);box-shadow:none}.kit-scheduler ::ng-deep .k-event:hover{background:var(--ui-kit-color-hover)}.kit-scheduler ::ng-deep .k-event-actions{display:none}.kit-scheduler ::ng-deep .k-current-time{display:none}.kit-scheduler ::ng-deep .k-scheduler-agendaview .k-scheduler-timecolumn{text-align:center}\n"] }]
+        }], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], viewModes: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModes", required: false }] }], showTimePill: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePill", required: false }] }], monthEventHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthEventHeight", required: false }] }], eventsPerDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventsPerDay", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], freezeToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "freezeToolbar", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], eventClicked: [{ type: i0.Output, args: ["eventClicked"] }], eventDblClicked: [{ type: i0.Output, args: ["eventDblClicked"] }], slotClicked: [{ type: i0.Output, args: ["slotClicked"] }], dateChanged: [{ type: i0.Output, args: ["dateChanged"] }], scheduler: [{ type: i0.ViewChild, args: ['scheduler', { isSignal: true }] }], customViewTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerCustomViewTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], weekEventTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerWeekEventTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], monthEventTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerMonthEventTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], agendaTimeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerAgendaTimeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerMonthHeaderCellTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], toolbarTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KitSchedulerToolbarTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 
 class KitTranslateLoader {
     constructor(http, defaultPathPerfix, overridePathPrefix) {
@@ -11289,7 +11311,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,
@@ -11638,7 +11660,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,
@@ -11953,5 +11975,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, 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, kitExportExcel, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
 //# sourceMappingURL=indigina-ui-kit.mjs.map