@indigina/ui-kit 1.1.127 → 1.1.129

package/fesm2022/indigina-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, input, EventEmitter, ViewEncapsulation, Output, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, signal, TemplateRef, ContentChild, ViewChild, HostListener, Injectable, output, Host, Self, Inject, ContentChildren, viewChild, contentChildren, computed, contentChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, input, EventEmitter, ViewEncapsulation, Output, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, signal, TemplateRef, ContentChild, ViewChild, HostListener, Injectable, output, Host, Self, Inject, contentChildren, viewChild, ContentChildren, computed, contentChild } from '@angular/core';
 import * as i1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
 import * as i1$1 from '@angular/common';
@@ -577,11 +577,11 @@ class KitSwitchComponent {
         return this.mode === KitSwitchMode.SINGLE;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSwitchComponent, isStandalone: false, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    @if (label) {\n      <kit-input-label class=\"label\"\n                       [text]=\"label\"\n      ></kit-input-label>\n    }\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\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}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitSwitchComponent, isStandalone: false, selector: "kit-switch", inputs: { items: "items", mode: "mode", label: "label", disabled: "disabled", selection: "selection", messageIcon: "messageIcon", messageText: "messageText", state: "state" }, outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    @if (label) {\n      <kit-input-label class=\"label\"\n                       [text]=\"label\"\n      ></kit-input-label>\n    }\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    @if (label) {\n      <kit-input-label class=\"label\"\n                       [text]=\"label\"\n      ></kit-input-label>\n    }\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\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}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
+            args: [{ selector: 'kit-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-switch {{ state }}\">\n  <ng-container *ngIf=\"items.length\">\n    @if (label) {\n      <kit-input-label class=\"label\"\n                       [text]=\"label\"\n      ></kit-input-label>\n    }\n\n    <kendo-buttongroup look=\"outline\" class=\"button-group\"\n                       [selection]=\"mode\"\n                       [class.disabled]=\"disabled\">\n      <button *ngFor=\"let item of items\" class=\"button\" kendoButton\n              [selected]=\"isItemSelected(item)\"\n              [togglable]=\"true\"\n              [disabled]=\"item.disabled && item.disabled(item)\"\n              (selectedChange)=\"onItemSelect($event, item)\">\n        <ng-container *ngIf=\"item.title; else icon\">\n          {{ item.title }}\n        </ng-container>\n\n        <ng-template #icon>\n          <kit-svg-icon class=\"icon-wrapper\"\n                        [icon]=\"item.icon\"\n          ></kit-svg-icon>\n        </ng-template>\n      </button>\n    </kendo-buttongroup>\n    <kit-input-message *ngIf=\"messageText\"\n                       [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  </ng-container>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-switch .label{display:block;margin-bottom:4px}.kit-switch .button-group{background:#fff;border:1px solid #c1c7d0;border-radius:4px;overflow:hidden}.kit-switch .button-group.disabled{color:#fff;pointer-events:none}.kit-switch .button-group.disabled .button{color:#c1c7d0}.kit-switch .button-group.disabled .icon{fill:#c1c7d0}.kit-switch .button-group.disabled .button.k-state-selected{background-color:#abcad6;color:#fff}.kit-switch .button.k-button{border:0;color:var(--ui-kit-color-cobalt);padding:8px;border-radius:4px;opacity:1;box-shadow:none}.kit-switch .button.k-button:not(:first-child),.kit-switch .button.k-button:not(:last-child){border-radius:4px}.kit-switch .button.k-button .icon{fill:var(--ui-kit-color-cobalt);stroke:none}.kit-switch .button.k-button.k-selected,.kit-switch .button.k-button:hover,.kit-switch .button.k-button.k-state-hover{background-color:var(--ui-kit-color-cobalt-darkest);color:#fff}.kit-switch .button.k-button.k-selected .icon,.kit-switch .button.k-button:hover .icon,.kit-switch .button.k-button.k-state-hover .icon{fill:#fff}.kit-switch .button.k-button.k-disabled{color:#c1c7d0}.kit-switch .button.k-button.k-selected.k-disabled{background-color:#abcad6;color:#fff}.kit-switch .icon-wrapper{display:block;width:16px;height:16px}.kit-switch.danger .k-button-group{border-color:#ef3e42;background:#f8e0e0}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], mode: [{
@@ -1435,11 +1435,11 @@ class KitTextLabelComponent {
         this.state = KitTextLabelState.REGULAR;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitTextLabelComponent, isStandalone: false, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  @if (value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n\n  @if (!value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"noValueMessage || label\"\n    ></kit-input-label>\n  }\n\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\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}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitTextLabelComponent, isStandalone: false, selector: "kit-text-label", inputs: { label: "label", value: "value", htmlMode: "htmlMode", noValueMessage: "noValueMessage", messageText: "messageText", state: "state" }, ngImport: i0, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  @if (value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n\n  @if (!value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"noValueMessage || label\"\n    ></kit-input-label>\n  }\n\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTextLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  @if (value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n\n  @if (!value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"noValueMessage || label\"\n    ></kit-input-label>\n  }\n\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\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}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
+            args: [{ selector: 'kit-text-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-text-label {{ state }}\" tabindex=\"0\" [class.text-label-empty]=\"!value\">\n  @if (value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n    ></kit-input-label>\n  }\n\n  @if (!value) {\n    <kit-input-label class=\"label\"\n                     [text]=\"noValueMessage || label\"\n    ></kit-input-label>\n  }\n\n  <div *ngIf=\"!htmlMode; else htmlModeTemplate\" class=\"value\">{{ value }}</div>\n  <ng-template #htmlModeTemplate>\n    <div class=\"value\" [innerHTML]=\"value\"></div>\n  </ng-template>\n  <kit-input-message *ngIf=\"messageText && value\"\n                     [message]=\"messageText\"\n  ></kit-input-message>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-text-label{padding:6px 4px 4px;border-radius:4px;border:1px solid transparent;outline:none;background:#fff}.kit-text-label:focus{border-color:#006890;box-shadow:0 0 0 3px #e7f4ec}.kit-text-label .label{display:block;margin-bottom:4px}.kit-text-label .value{color:#002a3a;font-weight:400;font-size:13px;border-radius:4px;line-height:17px}.kit-text-label.text-label-empty .value{height:22px;min-width:112px;background:#f3f4f6}.kit-text-label.danger{border-color:#ef3e42;background:#f8e0e0}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -1947,11 +1947,11 @@ class KitLocationStepperComponent {
         this.KitSvgIcon = KitSvgIcon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitLocationStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitLocationStepperComponent, isStandalone: false, 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  <div *ngIf=\"item.toolTipText\" class=\"description-location\" 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    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" 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      <div *ngIf=\"item.dates?.length\" 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\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" 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\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitLocationStepperComponent, isStandalone: false, 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  <div *ngIf=\"item.toolTipText\" class=\"description-location\" 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    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" 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      <div *ngIf=\"item.dates?.length\" 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\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" 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\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-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: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitLocationStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-location-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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  <div *ngIf=\"item.toolTipText\" class=\"description-location\" 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    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" 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      <div *ngIf=\"item.dates?.length\" 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\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" 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\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.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"] }]
+            args: [{ selector: 'kit-location-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, 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  <div *ngIf=\"item.toolTipText\" class=\"description-location\" 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    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"!item.toolTipText\" class=\"description-location\">\n    <div class=\"title\">{{ item.title }}</div>\n    <div *ngIf=\"item.description\" class=\"caption\">{{ item.description }}</div>\n  </div>\n\n  <div *ngIf=\"item.name\" class=\"description-name\">{{ item.name }}</div>\n</ng-template>\n\n<ng-template #dates let-dates=\"dates\">\n  <div *ngFor=\"let date of dates\" class=\"date display-flex\">\n    <span class=\"date-description\">{{ date.description }}</span>\n    <span>{{ date.value }}</span>\n  </div>\n</ng-template>\n\n<div class=\"kit-location-stepper\">\n  <div *ngFor=\"let item of items; let first = first; let last = last\" 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      <div *ngIf=\"item.dates?.length\" 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\n      <div class=\"description\">\n        <ng-container *ngTemplateOutlet=\"description; context: { item: item }\"></ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"item.subItems?.length\" class=\"sub-items\">\n      <div *ngFor=\"let subItem of item.subItems\" class=\"sub-item display-flex {{ subItem.cssClass }}\">\n        <div *ngIf=\"subItem.dates?.length\" 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\n        <div class=\"description\">\n          <ng-container *ngTemplateOutlet=\"description; context: { item: subItem }\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <div class=\"step-line\"></div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-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"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], toolTipPosition: [{
@@ -2897,11 +2897,11 @@ class KitCtaPanelItemComponent {
         this.clicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelItemComponent, isStandalone: false, selector: "kit-cta-panel-item", inputs: { item: "item", type: "type" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-item\">\n  <div class=\"panel-item-inner\">\n    <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n                  [icon]=\"item?.icon\"\n    ></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n        {{ item?.title }}\n      </div>\n\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n          <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n          <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n        <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n                       [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n                       [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n        ></kit-copy-text>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:10px}.kit-cta-panel-item .button-icon{width:12px;height:12px;fill:#56a2f7}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitCopyTextComponent, selector: "kit-copy-text", inputs: ["textToCopy", "tooltipTextBefore", "tooltipTextAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelItemComponent, isStandalone: false, selector: "kit-cta-panel-item", inputs: { item: "item", type: "type" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-item\">\n  <div class=\"panel-item-inner\">\n    <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n                  [icon]=\"item?.icon\"\n    ></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n        {{ item?.title }}\n      </div>\n\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n          <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n          <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n        <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n                       [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n                       [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n        ></kit-copy-text>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:10px}.kit-cta-panel-item .button-icon{width:12px;height:12px;fill:#56a2f7}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KitCopyTextComponent, selector: "kit-copy-text", inputs: ["textToCopy", "tooltipTextBefore", "tooltipTextAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-cta-panel-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-cta-panel-item\">\n  <div class=\"panel-item-inner\">\n    <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n                  [icon]=\"item?.icon\"\n    ></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n        {{ item?.title }}\n      </div>\n\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n          <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n          <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n        <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n                       [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n                       [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n        ></kit-copy-text>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:10px}.kit-cta-panel-item .button-icon{width:12px;height:12px;fill:#56a2f7}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"] }]
+            args: [{ selector: 'kit-cta-panel-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-cta-panel-item\">\n  <div class=\"panel-item-inner\">\n    <kit-svg-icon *ngIf=\"item?.icon\" class=\"panel-item-icon\"\n                  [icon]=\"item?.icon\"\n    ></kit-svg-icon>\n    <div class=\"panel-item-text\">\n      <div *ngIf=\"item?.title\" class=\"panel-item-title\">\n        {{ item?.title }}\n      </div>\n\n      <ng-container [ngSwitch]=\"type\">\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.BUTTON\">\n          <button *ngIf=\"item?.buttonText\" class=\"panel-item-button\" (click)=\"onButtonClick()\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </button>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"KitCtaPanelItemType.LINK\">\n          <a *ngIf=\"item?.buttonText\" [routerLink]=\"item?.link\" class=\"panel-item-button\">\n            <span class=\"button-label\">\n              {{ item?.buttonText }}\n            </span>\n            <kit-svg-icon class=\"button-icon\" [icon]=\"KitSvgIcon.CHEVRON_RIGHT\"\n            ></kit-svg-icon>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div *ngIf=\"item?.copyItem; let copyItem\" class=\"panel-item-copy\">\n        <kit-copy-text [textToCopy]=\"copyItem.textToCopy\"\n                       [tooltipTextBefore]=\"copyItem.tooltipTextBefore\"\n                       [tooltipTextAfter]=\"copyItem.tooltipTextAfter\"\n        ></kit-copy-text>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-item{padding:15px 20px;background:#fff}.kit-cta-panel-item .panel-item-inner{display:flex;padding-bottom:24px;border-bottom:6px solid #efefef}.kit-cta-panel-item .panel-item-icon{margin-right:20px;width:24px;height:24px;stroke:#a9a8a8;fill:none;flex-shrink:0}.kit-cta-panel-item .panel-item-icon .order-icon,.kit-cta-panel-item .panel-item-icon .reset-icon{stroke:none;fill:#a9a8a8}.kit-cta-panel-item .panel-item-title{margin-bottom:8px;color:#002a3a;font-size:14px}.kit-cta-panel-item .panel-item-button{display:flex;align-items:center;padding:0;color:#56a2f7;font-size:14px;font-weight:500;font-family:inherit;border:none;background:none;cursor:pointer;text-decoration:none}.kit-cta-panel-item .panel-item-button:hover{text-decoration:underline}.kit-cta-panel-item .button-label{margin-right:10px}.kit-cta-panel-item .button-icon{width:12px;height:12px;fill:#56a2f7}.kit-cta-panel-item .panel-item-copy{margin-top:8px}\n"] }]
         }], propDecorators: { item: [{
                 type: Input
             }], type: [{
@@ -3058,11 +3058,11 @@ class KitCtaPanelConfirmationComponent {
         this.confirmClicked.emit(this.form.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelConfirmationComponent, deps: [{ token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelConfirmationComponent, isStandalone: false, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n  <div class=\"confirmation-head\">\n    <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n                  [icon]=\"data?.icon\"\n    ></kit-svg-icon>\n    <div class=\"head-text\">\n      <div class=\"head-title\">{{ data?.title }}</div>\n      <div *ngIf=\"data?.description\" class=\"head-description\">\n        {{ data?.description }}\n      </div>\n    </div>\n  </div>\n  <div class=\"confirmation-main\">\n    <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n      <kit-dropdown *ngIf=\"data?.dropdownItems\"\n                    formControlName=\"reason\"\n                    [defaultItem]=\"data?.defaultDropdownItem\"\n                    [label]=\"data?.dropdownLabel\"\n                    [items]=\"data?.dropdownItems\"\n                    [listHeight]=\"dropdownListHeight\"\n      ></kit-dropdown>\n\n      <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n                    formControlName=\"checkbox\"\n                    [label]=\"data?.checkboxLabel\"\n      ></kit-checkbox>\n    </form>\n  </div>\n  <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"onConfirmButtonClick()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "size"], outputs: ["selected"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelConfirmationComponent, isStandalone: false, selector: "kit-cta-panel-confirmation", inputs: { data: "data", confirmButtonDisabled: "confirmButtonDisabled", dropdownListHeight: "dropdownListHeight", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n  <div class=\"confirmation-head\">\n    <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n                  [icon]=\"data?.icon\"\n    ></kit-svg-icon>\n    <div class=\"head-text\">\n      <div class=\"head-title\">{{ data?.title }}</div>\n      <div *ngIf=\"data?.description\" class=\"head-description\">\n        {{ data?.description }}\n      </div>\n    </div>\n  </div>\n  <div class=\"confirmation-main\">\n    <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n      <kit-dropdown *ngIf=\"data?.dropdownItems\"\n                    formControlName=\"reason\"\n                    [defaultItem]=\"data?.defaultDropdownItem\"\n                    [label]=\"data?.dropdownLabel\"\n                    [items]=\"data?.dropdownItems\"\n                    [listHeight]=\"dropdownListHeight\"\n      ></kit-dropdown>\n\n      <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n                    formControlName=\"checkbox\"\n                    [label]=\"data?.checkboxLabel\"\n      ></kit-checkbox>\n    </form>\n  </div>\n  <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"onConfirmButtonClick()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "size"], outputs: ["selected"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-cta-panel-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-cta-panel-confirmation\">\n  <div class=\"confirmation-head\">\n    <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n                  [icon]=\"data?.icon\"\n    ></kit-svg-icon>\n    <div class=\"head-text\">\n      <div class=\"head-title\">{{ data?.title }}</div>\n      <div *ngIf=\"data?.description\" class=\"head-description\">\n        {{ data?.description }}\n      </div>\n    </div>\n  </div>\n  <div class=\"confirmation-main\">\n    <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n      <kit-dropdown *ngIf=\"data?.dropdownItems\"\n                    formControlName=\"reason\"\n                    [defaultItem]=\"data?.defaultDropdownItem\"\n                    [label]=\"data?.dropdownLabel\"\n                    [items]=\"data?.dropdownItems\"\n                    [listHeight]=\"dropdownListHeight\"\n      ></kit-dropdown>\n\n      <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n                    formControlName=\"checkbox\"\n                    [label]=\"data?.checkboxLabel\"\n      ></kit-checkbox>\n    </form>\n  </div>\n  <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"onConfirmButtonClick()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}.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"] }]
+            args: [{ selector: 'kit-cta-panel-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-cta-panel-confirmation\">\n  <div class=\"confirmation-head\">\n    <kit-svg-icon *ngIf=\"data?.icon\" class=\"head-icon\"\n                  [icon]=\"data?.icon\"\n    ></kit-svg-icon>\n    <div class=\"head-text\">\n      <div class=\"head-title\">{{ data?.title }}</div>\n      <div *ngIf=\"data?.description\" class=\"head-description\">\n        {{ data?.description }}\n      </div>\n    </div>\n  </div>\n  <div class=\"confirmation-main\">\n    <form [formGroup]=\"form\" class=\"confirmation-main-form\">\n      <kit-dropdown *ngIf=\"data?.dropdownItems\"\n                    formControlName=\"reason\"\n                    [defaultItem]=\"data?.defaultDropdownItem\"\n                    [label]=\"data?.dropdownLabel\"\n                    [items]=\"data?.dropdownItems\"\n                    [listHeight]=\"dropdownListHeight\"\n      ></kit-dropdown>\n\n      <kit-checkbox *ngIf=\"data?.checkboxLabel\"\n                    formControlName=\"checkbox\"\n                    [label]=\"data?.checkboxLabel\"\n      ></kit-checkbox>\n    </form>\n  </div>\n  <kit-cta-panel-action [disabled]=\"data?.dropdownItems && form.invalid\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"onConfirmButtonClick()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }], propDecorators: { data: [{
                 type: Input
             }], confirmButtonDisabled: [{
@@ -3132,11 +3132,11 @@ class KitCtaPanelAbstractConfirmationComponent {
         this.confirmClicked = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelAbstractConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelAbstractConfirmationComponent, isStandalone: false, selector: "kit-cta-panel-abstract-confirmation", inputs: { confirmButtonDisabled: "confirmButtonDisabled", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n  <ng-content select=\".confirmation-head\"\n  ></ng-content>\n  <ng-content select=\".confirmation-main\"\n  ></ng-content>\n  <kit-cta-panel-action [disabled]=\"confirmButtonDisabled\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"confirmClicked.emit()\"\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}.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: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: KitCtaPanelAbstractConfirmationComponent, isStandalone: false, selector: "kit-cta-panel-abstract-confirmation", inputs: { confirmButtonDisabled: "confirmButtonDisabled", quitText: "quitText", confirmText: "confirmText" }, outputs: { quitClicked: "quitClicked", confirmClicked: "confirmClicked" }, ngImport: i0, template: "<div class=\"kit-cta-panel-confirmation\">\n  <ng-content select=\".confirmation-head\"\n  ></ng-content>\n  <ng-content select=\".confirmation-main\"\n  ></ng-content>\n  <kit-cta-panel-action [disabled]=\"confirmButtonDisabled\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"confirmClicked.emit()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"], dependencies: [{ kind: "component", type: KitCtaPanelActionComponent, selector: "kit-cta-panel-action", inputs: ["disabled", "confirmText", "quitText"], outputs: ["quitClicked", "confirmClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCtaPanelAbstractConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-cta-panel-abstract-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kit-cta-panel-confirmation\">\n  <ng-content select=\".confirmation-head\"\n  ></ng-content>\n  <ng-content select=\".confirmation-main\"\n  ></ng-content>\n  <kit-cta-panel-action [disabled]=\"confirmButtonDisabled\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"confirmClicked.emit()\"\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}.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"] }]
+            args: [{ selector: 'kit-cta-panel-abstract-confirmation', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kit-cta-panel-confirmation\">\n  <ng-content select=\".confirmation-head\"\n  ></ng-content>\n  <ng-content select=\".confirmation-main\"\n  ></ng-content>\n  <kit-cta-panel-action [disabled]=\"confirmButtonDisabled\"\n                        [quitText]=\"quitText\"\n                        [confirmText]=\"confirmText\"\n                        (quitClicked)=\"quitClicked.emit()\"\n                        (confirmClicked)=\"confirmClicked.emit()\"\n  ></kit-cta-panel-action>\n</div>\n", styles: [".display-flex{display:flex}.flex-align-items-center{align-items:center}.flex-justify-content-center{justify-content:center}.flex-justify-content-end{justify-content:flex-end}.display-block{display:block}div[kendowatermarkoverlay]{display:none}:root{--ui-kit-header-height: 86px}.kit-cta-panel-confirmation{padding:15px 20px;border:2px solid #00b0ad;background:#f8f9fe;line-height:1.26}.kit-cta-panel-confirmation .confirmation-head{display:flex;margin-bottom:24px}.kit-cta-panel-confirmation .head-icon{width:24px;height:24px;margin-right:20px;flex-shrink:0;stroke:#00b0ad;fill:none}.kit-cta-panel-confirmation .head-icon .reset-icon{stroke:none;fill:#00b0ad}.kit-cta-panel-confirmation .head-title{color:#002a3a;font-weight:700}.kit-cta-panel-confirmation .head-description{margin-top:24px;color:#000}.kit-cta-panel-confirmation .confirmation-main{margin-bottom:24px}.kit-cta-panel-confirmation .confirmation-main-form{display:flex;flex-direction:column;gap:8px}\n"] }]
         }], propDecorators: { confirmButtonDisabled: [{
                 type: Input
             }], quitText: [{
@@ -3950,6 +3950,7 @@ class KitNavigationMenuSubmenuComponent {
         this.document = document;
         this.menuItem = null;
         this.appsMenuItems = null;
+        this.logoPath = '';
         this.logoClicked = new EventEmitter();
         this.KitSvgIcon = KitSvgIcon;
         this.rootPath = '/';
@@ -3972,7 +3973,7 @@ class KitNavigationMenuSubmenuComponent {
         return `${location?.origin}/` === url;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitNavigationMenuSubmenuComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationMenuSubmenuComponent, isStandalone: false, selector: "kit-navigation-menu-submenu", inputs: { menuItem: "menuItem", appsMenuItems: "appsMenuItems" }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\">\n  <div class=\"nav-logo\">\n    <a class=\"nav-logo-link\"\n       [routerLink]=\"rootPath\"\n       (click)=\"logoClicked.emit()\">\n      <kit-svg-icon class=\"seko-icon\"\n                    [icon]=\"KitSvgIcon.SEKO\"\n      ></kit-svg-icon>\n      <kit-svg-icon class=\"seko-360-icon\"\n                    [icon]=\"KitSvgIcon.SEKO_360\"\n      ></kit-svg-icon>\n    </a>\n  </div>\n  @if (appsMenuItems) {\n    <div class=\"apps-menu\">\n      @for (item of appsMenuItems; track item) {\n        <a class=\"app-link\"\n           [class.active]=\"isAppItemActive(item.url)\"\n           [href]=\"item.url\">\n          <span class=\"app-link-btn\">\n            <kit-svg-icon class=\"app-link-icon\"\n                          [icon]=\"item.name.toLowerCase()\"\n            ></kit-svg-icon>\n          </span>\n          <span class=\"app-link-title\">{{ item.name }}</span>\n        </a>\n      }\n    </div>\n  } @else {\n    <div class=\"main-menu\">\n      <div class=\"nav-title\">{{ menuItem?.title }}</div>\n      <div class=\"nav-list\">\n        @for (child of menuItem?.items; track child) {\n          @if (!child.items?.length) {\n            @if (child.link) {\n              <a class=\"nav-link\"\n                 routerLinkActive=\"active\"\n                 [routerLink]=\"child.link\">\n                {{ child.title }}\n              </a>\n            }\n          }\n\n          @if (child.items?.length) {\n            <a class=\"nav-link\"\n               [class.expanded]=\"child.expanded\"\n               (click)=\"handleClick(child)\">\n              {{ child.title }}\n              <kit-svg-icon class=\"toggle-icon\"\n                            [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n              ></kit-svg-icon>\n            </a>\n\n            @if (child?.expanded) {\n              <div @heightExpandCollapseAnimation\n                   class=\"nav-list\">\n                @for (subChild of child.items; track subChild) {\n                  @if (subChild.link) {\n                    <a class=\"child-link\"\n                       routerLinkActive=\"active\"\n                       [routerLink]=\"subChild.link\">\n                      {{ subChild.title }}\n                    </a>\n                  }\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:28px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-logo-link{display:flex;gap:5px}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active,.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"], dependencies: [{ kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationMenuSubmenuComponent, isStandalone: false, selector: "kit-navigation-menu-submenu", inputs: { menuItem: "menuItem", appsMenuItems: "appsMenuItems", logoPath: "logoPath" }, outputs: { logoClicked: "logoClicked" }, ngImport: i0, template: "<div class=\"kit-navigation-menu-submenu\">\n  <div class=\"nav-logo\">\n    <a class=\"nav-logo-link\"\n       [routerLink]=\"rootPath\"\n       (click)=\"logoClicked.emit()\">\n      @if (logoPath) {\n        <div class=\"logo-wrapper\">\n          <img [src]=\"logoPath\" alt=\"Logo\"/>\n        </div>\n      } @else {\n        <kit-svg-icon class=\"seko-icon\"\n                [icon]=\"KitSvgIcon.SEKO\"\n        ></kit-svg-icon>\n        <kit-svg-icon class=\"seko-360-icon\"\n                [icon]=\"KitSvgIcon.SEKO_360\"\n        ></kit-svg-icon>\n      }\n    </a>\n  </div>\n  @if (appsMenuItems) {\n    <div class=\"apps-menu\">\n      @for (item of appsMenuItems; track item) {\n        <a class=\"app-link\"\n           [class.active]=\"isAppItemActive(item.url)\"\n           [href]=\"item.url\">\n          <span class=\"app-link-btn\">\n            <kit-svg-icon class=\"app-link-icon\"\n                          [icon]=\"item.name.toLowerCase()\"\n            ></kit-svg-icon>\n          </span>\n          <span class=\"app-link-title\">{{ item.name }}</span>\n        </a>\n      }\n    </div>\n  } @else {\n    <div class=\"main-menu\">\n      <div class=\"nav-title\">{{ menuItem?.title }}</div>\n      <div class=\"nav-list\">\n        @for (child of menuItem?.items; track child) {\n          @if (!child.items?.length) {\n            @if (child.link) {\n              <a class=\"nav-link\"\n                 routerLinkActive=\"active\"\n                 [routerLink]=\"child.link\">\n                {{ child.title }}\n              </a>\n            }\n          }\n\n          @if (child.items?.length) {\n            <a class=\"nav-link\"\n               [class.expanded]=\"child.expanded\"\n               (click)=\"handleClick(child)\">\n              {{ child.title }}\n              <kit-svg-icon class=\"toggle-icon\"\n                            [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n              ></kit-svg-icon>\n            </a>\n\n            @if (child?.expanded) {\n              <div @heightExpandCollapseAnimation\n                   class=\"nav-list\">\n                @for (subChild of child.items; track subChild) {\n                  @if (subChild.link) {\n                    <a class=\"child-link\"\n                       routerLinkActive=\"active\"\n                       [routerLink]=\"subChild.link\">\n                      {{ subChild.title }}\n                    </a>\n                  }\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center}.kit-navigation-menu-submenu .nav-logo-link{display:flex;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active,.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"], dependencies: [{ kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], animations: [
             expandCollapseAnimation('height'),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -3980,7 +3981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             type: Component,
             args: [{ selector: 'kit-navigation-menu-submenu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         expandCollapseAnimation('height'),
-                    ], standalone: false, template: "<div class=\"kit-navigation-menu-submenu\">\n  <div class=\"nav-logo\">\n    <a class=\"nav-logo-link\"\n       [routerLink]=\"rootPath\"\n       (click)=\"logoClicked.emit()\">\n      <kit-svg-icon class=\"seko-icon\"\n                    [icon]=\"KitSvgIcon.SEKO\"\n      ></kit-svg-icon>\n      <kit-svg-icon class=\"seko-360-icon\"\n                    [icon]=\"KitSvgIcon.SEKO_360\"\n      ></kit-svg-icon>\n    </a>\n  </div>\n  @if (appsMenuItems) {\n    <div class=\"apps-menu\">\n      @for (item of appsMenuItems; track item) {\n        <a class=\"app-link\"\n           [class.active]=\"isAppItemActive(item.url)\"\n           [href]=\"item.url\">\n          <span class=\"app-link-btn\">\n            <kit-svg-icon class=\"app-link-icon\"\n                          [icon]=\"item.name.toLowerCase()\"\n            ></kit-svg-icon>\n          </span>\n          <span class=\"app-link-title\">{{ item.name }}</span>\n        </a>\n      }\n    </div>\n  } @else {\n    <div class=\"main-menu\">\n      <div class=\"nav-title\">{{ menuItem?.title }}</div>\n      <div class=\"nav-list\">\n        @for (child of menuItem?.items; track child) {\n          @if (!child.items?.length) {\n            @if (child.link) {\n              <a class=\"nav-link\"\n                 routerLinkActive=\"active\"\n                 [routerLink]=\"child.link\">\n                {{ child.title }}\n              </a>\n            }\n          }\n\n          @if (child.items?.length) {\n            <a class=\"nav-link\"\n               [class.expanded]=\"child.expanded\"\n               (click)=\"handleClick(child)\">\n              {{ child.title }}\n              <kit-svg-icon class=\"toggle-icon\"\n                            [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n              ></kit-svg-icon>\n            </a>\n\n            @if (child?.expanded) {\n              <div @heightExpandCollapseAnimation\n                   class=\"nav-list\">\n                @for (subChild of child.items; track subChild) {\n                  @if (subChild.link) {\n                    <a class=\"child-link\"\n                       routerLinkActive=\"active\"\n                       [routerLink]=\"subChild.link\">\n                      {{ subChild.title }}\n                    </a>\n                  }\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:28px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-logo-link{display:flex;gap:5px}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active,.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"] }]
+                    ], standalone: false, template: "<div class=\"kit-navigation-menu-submenu\">\n  <div class=\"nav-logo\">\n    <a class=\"nav-logo-link\"\n       [routerLink]=\"rootPath\"\n       (click)=\"logoClicked.emit()\">\n      @if (logoPath) {\n        <div class=\"logo-wrapper\">\n          <img [src]=\"logoPath\" alt=\"Logo\"/>\n        </div>\n      } @else {\n        <kit-svg-icon class=\"seko-icon\"\n                [icon]=\"KitSvgIcon.SEKO\"\n        ></kit-svg-icon>\n        <kit-svg-icon class=\"seko-360-icon\"\n                [icon]=\"KitSvgIcon.SEKO_360\"\n        ></kit-svg-icon>\n      }\n    </a>\n  </div>\n  @if (appsMenuItems) {\n    <div class=\"apps-menu\">\n      @for (item of appsMenuItems; track item) {\n        <a class=\"app-link\"\n           [class.active]=\"isAppItemActive(item.url)\"\n           [href]=\"item.url\">\n          <span class=\"app-link-btn\">\n            <kit-svg-icon class=\"app-link-icon\"\n                          [icon]=\"item.name.toLowerCase()\"\n            ></kit-svg-icon>\n          </span>\n          <span class=\"app-link-title\">{{ item.name }}</span>\n        </a>\n      }\n    </div>\n  } @else {\n    <div class=\"main-menu\">\n      <div class=\"nav-title\">{{ menuItem?.title }}</div>\n      <div class=\"nav-list\">\n        @for (child of menuItem?.items; track child) {\n          @if (!child.items?.length) {\n            @if (child.link) {\n              <a class=\"nav-link\"\n                 routerLinkActive=\"active\"\n                 [routerLink]=\"child.link\">\n                {{ child.title }}\n              </a>\n            }\n          }\n\n          @if (child.items?.length) {\n            <a class=\"nav-link\"\n               [class.expanded]=\"child.expanded\"\n               (click)=\"handleClick(child)\">\n              {{ child.title }}\n              <kit-svg-icon class=\"toggle-icon\"\n                            [icon]=\"KitSvgIcon.CHEVRON_DOWN\"\n              ></kit-svg-icon>\n            </a>\n\n            @if (child?.expanded) {\n              <div @heightExpandCollapseAnimation\n                   class=\"nav-list\">\n                @for (subChild of child.items; track subChild) {\n                  @if (subChild.link) {\n                    <a class=\"child-link\"\n                       routerLinkActive=\"active\"\n                       [routerLink]=\"subChild.link\">\n                      {{ subChild.title }}\n                    </a>\n                  }\n                }\n              </div>\n            }\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [".kit-navigation-menu-submenu{padding:0 15px;width:200px;height:100vh;color:var(--ui-kit-color-grey-10);box-sizing:border-box;border-right:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);overflow-y:auto;scrollbar-width:none}.kit-navigation-menu-submenu::-webkit-scrollbar{display:none}.kit-navigation-menu-submenu .nav-logo{position:sticky;top:0;padding:20px 5px;border-bottom:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white);height:var(--ui-kit-header-height, 86px);box-sizing:border-box;display:flex;justify-content:center;align-items:center}.kit-navigation-menu-submenu .nav-logo-link{display:flex;gap:5px;height:100%;margin:auto;overflow:hidden}.kit-navigation-menu-submenu .nav-logo .logo-wrapper{width:100%;height:100%}.kit-navigation-menu-submenu .nav-logo .seko-icon{width:97px;height:29px}.kit-navigation-menu-submenu .nav-logo .seko-360-icon{height:20px;width:59px;fill:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .apps-menu{display:flex;flex-direction:column;gap:15px;padding:15px 0}.kit-navigation-menu-submenu .app-link{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px;border-radius:8px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13);text-decoration:none}.kit-navigation-menu-submenu .app-link:not(.active):hover{border-color:var(--ui-kit-color-grey-12);background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .app-link:not(.active):hover .app-link-title{border-color:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .app-link-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 4px 6px #0000000d,0 10px 15px #0000001a}.kit-navigation-menu-submenu .app-link-icon{width:32px;height:32px;fill:var(--ui-kit-color-main);stroke:none}.kit-navigation-menu-submenu .app-link-title{display:flex;justify-content:center;padding-top:10px;width:100%;color:var(--ui-kit-color-grey-10);border-top:1px solid var(--ui-kit-color-grey-11);font-size:14px;font-weight:500;text-transform:uppercase}.kit-navigation-menu-submenu .app-link.active{cursor:default;pointer-events:none}.kit-navigation-menu-submenu .app-link.active .app-link-btn{background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .app-link.active .app-link-icon{fill:var(--ui-kit-color-white)}.kit-navigation-menu-submenu .nav-title{padding:15px 0;font-size:18px;font-weight:600}.kit-navigation-menu-submenu .nav-list{display:flex;flex-direction:column;gap:5px;overflow:hidden}.kit-navigation-menu-submenu .nav-link{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:500;text-decoration:none;line-height:20px;cursor:pointer}.kit-navigation-menu-submenu .nav-link .toggle-icon{width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-navigation-menu-submenu .nav-link:hover,.kit-navigation-menu-submenu .nav-link.active,.kit-navigation-menu-submenu .nav-link.expanded{color:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .nav-link.expanded .toggle-icon{stroke:var(--ui-kit-color-main);transform:rotate(180deg)}.kit-navigation-menu-submenu .child-link{display:flex;align-items:center;gap:12px;position:relative;padding:10px 20px;color:var(--ui-kit-color-grey-14);font-size:14px;font-weight:400;border-radius:8px;line-height:20px;text-decoration:none}.kit-navigation-menu-submenu .child-link:hover{background:var(--ui-kit-color-grey-11)}.kit-navigation-menu-submenu .child-link.active:before{content:\"\";position:absolute;left:0;width:7px;height:7px;border-radius:2px;background:var(--ui-kit-color-main)}.kit-navigation-menu-submenu .child-link.active:hover{background:none}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -3988,6 +3989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }], appsMenuItems: [{
                 type: Input
+            }], logoPath: [{
+                type: Input
             }], logoClicked: [{
                 type: Output
             }] } });
@@ -4004,6 +4007,7 @@ class KitNavigationMenuComponent {
          * An items list which is going to be rendered as apps menu items
          */
         this.appsMenuItems = [];
+        this.logoPath = '';
         this.selectedItem = signal(null);
         this.selectedAppsItems = signal(null);
         this.collapsed = this.kitNavigationMenuService.getCollapsedState();
@@ -4086,7 +4090,7 @@ class KitNavigationMenuComponent {
         this.kitNavigationMenuService.setSelectedState(!!this.selectedItem()?.items, !!this.selectedAppsItems());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitNavigationMenuComponent, deps: [{ token: i1$7.Router }, { token: KitNavigationMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationMenuComponent, isStandalone: false, selector: "kit-navigation-menu", inputs: { menuItems: "menuItems", appsMenuItems: "appsMenuItems" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems.length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-list\">\n      @for (item of menuItems; track item) {\n        @if (item.items?.length) {\n          <a class=\"nav-link\"\n             kitTooltip\n             kitTooltipFilter=\".nav-link\"\n             [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n             [title]=\"item.title\"\n             [class.active]=\"item.active\"\n             (click)=\"handleClick(item)\">\n            @if (item.icon) {\n              <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            }\n          </a>\n        } @else {\n          @if (item.link) {\n            <a class=\"nav-link\"\n               routerLinkActive=\"active\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [routerLink]=\"item?.link\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          }\n        }\n      }\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitNavigationMenuComponent, isStandalone: false, selector: "kit-navigation-menu", inputs: { menuItems: "menuItems", appsMenuItems: "appsMenuItems", logoPath: "logoPath" }, ngImport: i0, template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems.length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-list\">\n      @for (item of menuItems; track item) {\n        @if (item.items?.length) {\n          <a class=\"nav-link\"\n             kitTooltip\n             kitTooltipFilter=\".nav-link\"\n             [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n             [title]=\"item.title\"\n             [class.active]=\"item.active\"\n             (click)=\"handleClick(item)\">\n            @if (item.icon) {\n              <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            }\n          </a>\n        } @else {\n          @if (item.link) {\n            <a class=\"nav-link\"\n               routerLinkActive=\"active\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [routerLink]=\"item?.link\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          }\n        }\n      }\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 [logoPath]=\"logoPath\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$7.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: KitNavigationMenuSubmenuComponent, selector: "kit-navigation-menu-submenu", inputs: ["menuItem", "appsMenuItems", "logoPath"], outputs: ["logoClicked"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }], animations: [
             expandCollapseAnimation('width'),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -4094,11 +4098,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             type: Component,
             args: [{ selector: 'kit-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         expandCollapseAnimation('width'),
-                    ], standalone: false, template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems.length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-list\">\n      @for (item of menuItems; track item) {\n        @if (item.items?.length) {\n          <a class=\"nav-link\"\n             kitTooltip\n             kitTooltipFilter=\".nav-link\"\n             [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n             [title]=\"item.title\"\n             [class.active]=\"item.active\"\n             (click)=\"handleClick(item)\">\n            @if (item.icon) {\n              <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            }\n          </a>\n        } @else {\n          @if (item.link) {\n            <a class=\"nav-link\"\n               routerLinkActive=\"active\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [routerLink]=\"item?.link\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          }\n        }\n      }\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
+                    ], standalone: false, template: "<div class=\"kit-navigation-menu\"\n     [class.collapsed]=\"collapsed()\">\n  <div class=\"main-panel\">\n    @if (appsMenuItems.length > 1) {\n      <button class=\"app-btn\"\n              [class.active]=\"selectedAppsItems() && !collapsed()\"\n              (click)=\"onAppsMenuButtonClick()\">\n        <kit-svg-icon class=\"app-btn-icon\"\n                      [icon]=\"KitSvgIcon.FOUR_SQUARE\"\n        ></kit-svg-icon>\n      </button>\n    }\n    <div class=\"nav-list\">\n      @for (item of menuItems; track item) {\n        @if (item.items?.length) {\n          <a class=\"nav-link\"\n             kitTooltip\n             kitTooltipFilter=\".nav-link\"\n             [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n             [title]=\"item.title\"\n             [class.active]=\"item.active\"\n             (click)=\"handleClick(item)\">\n            @if (item.icon) {\n              <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n              ></ng-container>\n            }\n          </a>\n        } @else {\n          @if (item.link) {\n            <a class=\"nav-link\"\n               routerLinkActive=\"active\"\n               kitTooltip\n               kitTooltipFilter=\".nav-link\"\n               [kitTooltipPosition]=\"KitTooltipPosition.RIGHT\"\n               [title]=\"item.title\"\n               [routerLink]=\"item?.link\"\n               (click)=\"handleClick(item)\">\n              @if (item.icon) {\n                <ng-container *ngTemplateOutlet=\"linkIconTemplate; context: { $implicit: item }\"\n                ></ng-container>\n              }\n            </a>\n          }\n        }\n      }\n    </div>\n  </div>\n\n  @if (!collapsed() && (selectedItem()?.items || selectedAppsItems())) {\n    <kit-navigation-menu-submenu class=\"sub-panel\"\n                                 [@widthExpandCollapseAnimation]\n                                 [menuItem]=\"selectedItem()\"\n                                 [appsMenuItems]=\"selectedAppsItems()\"\n                                 [logoPath]=\"logoPath\"\n                                 (logoClicked)=\"handleLogoClick()\"\n    ></kit-navigation-menu-submenu>\n  }\n\n  <ng-template #linkIconTemplate let-item>\n    <kit-svg-icon class=\"nav-link-icon\"\n                  [icon]=\"item.icon\"\n                  [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  </ng-template>\n</div>\n", styles: [".kit-navigation-menu{display:flex;height:100%}.kit-navigation-menu .app-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:8px;cursor:pointer}.kit-navigation-menu .app-btn-icon{width:16px;height:16px;fill:var(--ui-kit-color-white);stroke:var(--ui-kit-color-white)}.kit-navigation-menu .app-btn:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .app-btn.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .main-panel{display:flex;flex-direction:column;padding:25px 10px;width:56px;box-sizing:border-box}.kit-navigation-menu .main-panel:has(.app-btn){gap:46px}.kit-navigation-menu .main-panel:has(.app-btn) .nav-list{margin-top:0}.kit-navigation-menu .sub-panel{display:block;width:200px;overflow:hidden}.kit-navigation-menu .nav-list{display:flex;flex-direction:column;gap:30px;margin-top:82px}.kit-navigation-menu .nav-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;cursor:pointer}.kit-navigation-menu .nav-link:hover{background:var(--ui-kit-color-grey-14)}.kit-navigation-menu .nav-link.active{background:var(--ui-kit-color-main)}.kit-navigation-menu .nav-link-icon{display:block;width:16px;height:16px;flex-shrink:0}.kit-navigation-menu .nav-link-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-navigation-menu .nav-link-icon.stroke{fill:none;stroke:var(--ui-kit-color-white)}\n"] }]
         }], ctorParameters: () => [{ type: i1$7.Router }, { type: KitNavigationMenuService }], propDecorators: { menuItems: [{
                 type: Input
             }], appsMenuItems: [{
                 type: Input
+            }], logoPath: [{
+                type: Input
             }] } });
 
 class KitNavigationMenuSubmenuModule {
@@ -4810,7 +4816,7 @@ class KitTabsComponent {
         /**
          * Defines the reference to the tabs content
          */
-        this.tabs = null;
+        this.tabs = contentChildren(KitTabComponent);
     }
     onTabSelect(event) {
         this.tabSelected.emit({
@@ -4820,11 +4826,11 @@ class KitTabsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitTabsComponent, isStandalone: false, selector: "kit-tabs", inputs: { type: "type", size: "size", animate: "animate" }, outputs: { tabSelected: "tabSelected" }, queries: [{ propertyName: "tabs", predicate: KitTabComponent }], ngImport: i0, template: "<div class=\"kit-tabs\">\n  <kendo-tabstrip [ngClass]=\"[type, size]\"\n                  [animate]=\"animate\"\n                  (tabSelect)=\"onTabSelect($event)\">\n    @for (tab of tabs; track tab) {\n      <kendo-tabstrip-tab [title]=\"tab.title()\"\n                          [selected]=\"tab.selected\"\n                          [disabled]=\"tab.disabled()\">\n        @if (tab.kitTitleTemplate) {\n          <ng-template kendoTabTitle>\n            <ng-container *ngTemplateOutlet=\"tab.kitTitleTemplate\"\n            ></ng-container>\n          </ng-template>\n        } @else if (tab.icon) {\n          <ng-template kendoTabTitle>\n            <div class=\"tab-title\">\n              <kit-svg-icon class=\"tab-title-icon\"\n                            [icon]=\"tab.icon\"\n                            [ngClass]=\"tab.iconType\"\n              ></kit-svg-icon>\n              <div class=\"tab title-text\">\n                {{ tab.title() }}\n              </div>\n            </div>\n          </ng-template>\n        }\n        <ng-template kendoTabContent>\n          <ng-container *ngTemplateOutlet=\"tab.kitTabContent\"\n          ></ng-container>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i2$2.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i2$2.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "directive", type: i2$2.TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitTabsComponent, isStandalone: false, selector: "kit-tabs", inputs: { type: "type", size: "size", animate: "animate" }, outputs: { tabSelected: "tabSelected" }, queries: [{ propertyName: "tabs", predicate: KitTabComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-tabs\">\n  <kendo-tabstrip [ngClass]=\"[type, size]\"\n                  [animate]=\"animate\"\n                  (tabSelect)=\"onTabSelect($event)\">\n    @for (tab of tabs(); track tab) {\n      <kendo-tabstrip-tab [title]=\"tab.title()\"\n                          [selected]=\"tab.selected\"\n                          [disabled]=\"tab.disabled()\">\n        @if (tab.kitTitleTemplate) {\n          <ng-template kendoTabTitle>\n            <ng-container *ngTemplateOutlet=\"tab.kitTitleTemplate\"\n            ></ng-container>\n          </ng-template>\n        } @else if (tab.icon) {\n          <ng-template kendoTabTitle>\n            <div class=\"tab-title\">\n              <kit-svg-icon class=\"tab-title-icon\"\n                            [icon]=\"tab.icon\"\n                            [ngClass]=\"tab.iconType\"\n              ></kit-svg-icon>\n              <div class=\"tab title-text\">\n                {{ tab.title() }}\n              </div>\n            </div>\n          </ng-template>\n        }\n        <ng-template kendoTabContent>\n          <ng-container *ngTemplateOutlet=\"tab.kitTabContent\"\n          ></ng-container>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i2$2.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i2$2.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "directive", type: i2$2.TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-tabs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kit-tabs\">\n  <kendo-tabstrip [ngClass]=\"[type, size]\"\n                  [animate]=\"animate\"\n                  (tabSelect)=\"onTabSelect($event)\">\n    @for (tab of tabs; track tab) {\n      <kendo-tabstrip-tab [title]=\"tab.title()\"\n                          [selected]=\"tab.selected\"\n                          [disabled]=\"tab.disabled()\">\n        @if (tab.kitTitleTemplate) {\n          <ng-template kendoTabTitle>\n            <ng-container *ngTemplateOutlet=\"tab.kitTitleTemplate\"\n            ></ng-container>\n          </ng-template>\n        } @else if (tab.icon) {\n          <ng-template kendoTabTitle>\n            <div class=\"tab-title\">\n              <kit-svg-icon class=\"tab-title-icon\"\n                            [icon]=\"tab.icon\"\n                            [ngClass]=\"tab.iconType\"\n              ></kit-svg-icon>\n              <div class=\"tab title-text\">\n                {{ tab.title() }}\n              </div>\n            </div>\n          </ng-template>\n        }\n        <ng-template kendoTabContent>\n          <ng-container *ngTemplateOutlet=\"tab.kitTabContent\"\n          ></ng-container>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n</div>\n" }]
+            args: [{ selector: 'kit-tabs', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kit-tabs\">\n  <kendo-tabstrip [ngClass]=\"[type, size]\"\n                  [animate]=\"animate\"\n                  (tabSelect)=\"onTabSelect($event)\">\n    @for (tab of tabs(); track tab) {\n      <kendo-tabstrip-tab [title]=\"tab.title()\"\n                          [selected]=\"tab.selected\"\n                          [disabled]=\"tab.disabled()\">\n        @if (tab.kitTitleTemplate) {\n          <ng-template kendoTabTitle>\n            <ng-container *ngTemplateOutlet=\"tab.kitTitleTemplate\"\n            ></ng-container>\n          </ng-template>\n        } @else if (tab.icon) {\n          <ng-template kendoTabTitle>\n            <div class=\"tab-title\">\n              <kit-svg-icon class=\"tab-title-icon\"\n                            [icon]=\"tab.icon\"\n                            [ngClass]=\"tab.iconType\"\n              ></kit-svg-icon>\n              <div class=\"tab title-text\">\n                {{ tab.title() }}\n              </div>\n            </div>\n          </ng-template>\n        }\n        <ng-template kendoTabContent>\n          <ng-container *ngTemplateOutlet=\"tab.kitTabContent\"\n          ></ng-container>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n</div>\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], size: [{
@@ -4833,9 +4839,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }], tabSelected: [{
                 type: Output
-            }], tabs: [{
-                type: ContentChildren,
-                args: [KitTabComponent]
             }] } });
 
 class KitTabsModule {