@indigina/ui-kit 1.1.116 → 1.1.118

package/fesm2022/indigina-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, Output, NgModule, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, input, signal, TemplateRef, ContentChild, ViewChild, HostListener, Injectable, output, Host, Self, Inject, effect, ContentChildren, viewChild, contentChildren, contentChild } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, Output, NgModule, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, input, signal, TemplateRef, ContentChild, ViewChild, HostListener, Injectable, output, Host, Self, Inject, effect, 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';
@@ -41,6 +41,8 @@ import * as i2$3 from '@progress/kendo-angular-grid';
 import { GridComponent, GridModule, ExcelModule, PDFModule } from '@progress/kendo-angular-grid';
 export { ExcelExportEvent } from '@progress/kendo-angular-grid';
 import * as i3 from '@progress/kendo-angular-pager';
+import { PagerContextService, PagerNavigationService } from '@progress/kendo-angular-pager';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 export { encodeBase64, saveAs } from '@progress/kendo-file-saver';
 export { Workbook } from '@progress/kendo-ooxml';
 export { pdf } from '@progress/kendo-drawing';
@@ -1020,6 +1022,8 @@ class KitDropdownComponent {
          * Defines the icon which going to be the icon for the dropdown toggle button
          */
         this.toggleIcon = KitSvgIcon.CHEVRON_DOWN;
+        this.popupSettings = {};
+        this.isValuePrimitive = true;
         /**
          * Defines the size of the dropdown
          */
@@ -1047,6 +1051,7 @@ class KitDropdownComponent {
      */
     buildPopupSettings() {
         return {
+            ...this.popupSettings,
             popupClass: buildPopupClass(this.hideDefaultItem),
         };
     }
@@ -1091,11 +1096,11 @@ class KitDropdownComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitDropdownComponent, isStandalone: false, selector: "kit-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: false, isRequired: false, transformFunction: null }, defaultItem: { classPropertyName: "defaultItem", publicName: "defaultItem", isSignal: false, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultItem: { classPropertyName: "hideDefaultItem", publicName: "hideDefaultItem", isSignal: false, isRequired: false, transformFunction: null }, toggleIcon: { classPropertyName: "toggleIcon", publicName: "toggleIcon", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [{
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitDropdownComponent, isStandalone: false, selector: "kit-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: false, isRequired: false, transformFunction: null }, messageText: { classPropertyName: "messageText", publicName: "messageText", isSignal: false, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: false, isRequired: false, transformFunction: null }, defaultItem: { classPropertyName: "defaultItem", publicName: "defaultItem", isSignal: false, isRequired: false, transformFunction: null }, listHeight: { classPropertyName: "listHeight", publicName: "listHeight", isSignal: false, isRequired: false, transformFunction: null }, hideDefaultItem: { classPropertyName: "hideDefaultItem", publicName: "hideDefaultItem", isSignal: false, isRequired: false, transformFunction: null }, toggleIcon: { classPropertyName: "toggleIcon", publicName: "toggleIcon", isSignal: false, isRequired: false, transformFunction: null }, popupSettings: { classPropertyName: "popupSettings", publicName: "popupSettings", isSignal: false, isRequired: false, transformFunction: null }, isValuePrimitive: { classPropertyName: "isValuePrimitive", publicName: "isValuePrimitive", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => KitDropdownComponent),
                 multi: true,
-            }], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: ["kitDropdownItemTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n     [class.disabled]=\"disabled\"\n     [class.invalid]=\"invalid\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n                     [for]=\"$any(dropdown)\"\n    ></kit-input-label>\n  }\n  <kendo-dropdownlist #dropdown\n                      valueField=\"value\"\n                      textField=\"text\"\n                      class=\"dropdown\"\n                      [ngClass]=\"getCssClasses()\"\n                      [data]=\"items\"\n                      [valuePrimitive]=\"true\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"buildPopupSettings()\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      [defaultItem]=\"defaultItem\"\n                      [listHeight]=\"listHeight\"\n                      [(ngModel)]=\"selectedItem\"\n                      (open)=\"onOpen()\"\n                      (close)=\"onClose()\"\n                      (selectionChange)=\"onItemSelect($event)\">\n    <ng-template kendoDropDownListValueTemplate\n                 let-dataItem>\n      @if (kitDropdownValueTemplate) {\n        <div class=\"value-text\">\n          <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n      }\n      <kit-svg-icon class=\"value-icon\"\n                    [icon]=\"toggleIcon\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoDropDownListItemTemplate\n                 let-dataItem>\n      @if (kitDropdownItemTemplate) {\n        <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      } @else {\n        <span class=\"option-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n  </kendo-dropdownlist>\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "component", type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { 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: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            }], queries: [{ propertyName: "kitDropdownValueTemplate", first: true, predicate: ["kitDropdownValueTemplate"], descendants: true, read: TemplateRef }, { propertyName: "kitDropdownItemTemplate", first: true, predicate: ["kitDropdownItemTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"kit-dropdown {{ size() }}\"\n     [class.disabled]=\"disabled\"\n     [class.invalid]=\"invalid\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n                     [for]=\"$any(dropdown)\"\n    ></kit-input-label>\n  }\n  <kendo-dropdownlist #dropdown\n                      valueField=\"value\"\n                      textField=\"text\"\n                      class=\"dropdown\"\n                      [ngClass]=\"getCssClasses()\"\n                      [data]=\"items\"\n                      [valuePrimitive]=\"isValuePrimitive\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"buildPopupSettings()\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      [defaultItem]=\"defaultItem\"\n                      [listHeight]=\"listHeight\"\n                      [(ngModel)]=\"selectedItem\"\n                      (open)=\"onOpen()\"\n                      (close)=\"onClose()\"\n                      (selectionChange)=\"onItemSelect($event)\">\n    <ng-template kendoDropDownListValueTemplate\n                 let-dataItem>\n      @if (kitDropdownValueTemplate) {\n        <div class=\"value-text\">\n          <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n      }\n      <kit-svg-icon class=\"value-icon\"\n                    [icon]=\"toggleIcon\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoDropDownListItemTemplate\n                 let-dataItem>\n      @if (kitDropdownItemTemplate) {\n        <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      } @else {\n        <span class=\"option-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n  </kendo-dropdownlist>\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"], dependencies: [{ kind: "component", type: i1$4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { 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: KitInputMessageComponent, selector: "kit-input-message", inputs: ["icon", "message"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitInputLabelComponent, selector: "kit-input-label", inputs: ["text", "for", "tooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitDropdownComponent, decorators: [{
             type: Component,
@@ -1103,7 +1108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => KitDropdownComponent),
                             multi: true,
-                        }], standalone: false, template: "<div class=\"kit-dropdown {{ size() }}\"\n     [class.disabled]=\"disabled\"\n     [class.invalid]=\"invalid\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n                     [for]=\"$any(dropdown)\"\n    ></kit-input-label>\n  }\n  <kendo-dropdownlist #dropdown\n                      valueField=\"value\"\n                      textField=\"text\"\n                      class=\"dropdown\"\n                      [ngClass]=\"getCssClasses()\"\n                      [data]=\"items\"\n                      [valuePrimitive]=\"true\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"buildPopupSettings()\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      [defaultItem]=\"defaultItem\"\n                      [listHeight]=\"listHeight\"\n                      [(ngModel)]=\"selectedItem\"\n                      (open)=\"onOpen()\"\n                      (close)=\"onClose()\"\n                      (selectionChange)=\"onItemSelect($event)\">\n    <ng-template kendoDropDownListValueTemplate\n                 let-dataItem>\n      @if (kitDropdownValueTemplate) {\n        <div class=\"value-text\">\n          <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n      }\n      <kit-svg-icon class=\"value-icon\"\n                    [icon]=\"toggleIcon\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoDropDownListItemTemplate\n                 let-dataItem>\n      @if (kitDropdownItemTemplate) {\n        <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      } @else {\n        <span class=\"option-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n  </kendo-dropdownlist>\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"] }]
+                        }], standalone: false, template: "<div class=\"kit-dropdown {{ size() }}\"\n     [class.disabled]=\"disabled\"\n     [class.invalid]=\"invalid\">\n  @if (label) {\n    <kit-input-label class=\"label\"\n                     [text]=\"label\"\n                     [for]=\"$any(dropdown)\"\n    ></kit-input-label>\n  }\n  <kendo-dropdownlist #dropdown\n                      valueField=\"value\"\n                      textField=\"text\"\n                      class=\"dropdown\"\n                      [ngClass]=\"getCssClasses()\"\n                      [data]=\"items\"\n                      [valuePrimitive]=\"isValuePrimitive\"\n                      [disabled]=\"disabled\"\n                      [popupSettings]=\"buildPopupSettings()\"\n                      [itemDisabled]=\"onItemDisabled()\"\n                      [defaultItem]=\"defaultItem\"\n                      [listHeight]=\"listHeight\"\n                      [(ngModel)]=\"selectedItem\"\n                      (open)=\"onOpen()\"\n                      (close)=\"onClose()\"\n                      (selectionChange)=\"onItemSelect($event)\">\n    <ng-template kendoDropDownListValueTemplate\n                 let-dataItem>\n      @if (kitDropdownValueTemplate) {\n        <div class=\"value-text\">\n          <ng-container *ngTemplateOutlet=\"kitDropdownValueTemplate; context: { $implicit: dataItem }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <span class=\"value-text\">{{ dataItem?.text }}</span>\n      }\n      <kit-svg-icon class=\"value-icon\"\n                    [icon]=\"toggleIcon\"\n      ></kit-svg-icon>\n    </ng-template>\n    <ng-template kendoDropDownListItemTemplate\n                 let-dataItem>\n      @if (kitDropdownItemTemplate) {\n        <ng-container *ngTemplateOutlet=\"kitDropdownItemTemplate; context: { $implicit: dataItem }\"\n        ></ng-container>\n      } @else {\n        <span class=\"option-text\">{{ dataItem?.text }}</span>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n  </kendo-dropdownlist>\n  @if (messageText) {\n    <kit-input-message [icon]=\"messageIcon\"\n                       [message]=\"messageText\"\n    ></kit-input-message>\n  }\n</div>\n", styles: [".kit-dropdown.default .dropdown{height:40px;border-radius:8px}.kit-dropdown.default .k-input-inner{padding:0 12px}.kit-dropdown.small .dropdown{height:32px;border-radius:4px}.kit-dropdown.small .k-input-inner{padding:0 8px}.kit-dropdown .label{display:block;margin-bottom:4px}.kit-dropdown .k-input-value-text{display:flex;align-items:center;height:100%;font-size:14px;font-weight:400;color:var(--ui-kit-color-grey-12)}.kit-dropdown .k-input-button{display:none}.kit-dropdown .dropdown{width:100%;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-dropdown .dropdown:hover{border-color:var(--ui-kit-color-hover)}.kit-dropdown .dropdown.k-focus{box-shadow:none}.kit-dropdown .dropdown.has-value .k-input-value-text{color:var(--ui-kit-color-grey-10)}.kit-dropdown .dropdown.expanded .value-icon{transform:rotate(180deg)}.kit-dropdown .dropdown .value{display:flex;align-items:center}.kit-dropdown .dropdown .value-text{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-dropdown .dropdown .value-icon{display:block;margin-left:auto;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-dropdown:focus-within .dropdown{border:1px solid var(--ui-kit-color-main);box-shadow:0 0 0 2px var(--ui-kit-color-focus)}.kit-dropdown.disabled .dropdown{opacity:1;filter:none;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown.disabled .k-input-value-text,.kit-dropdown.disabled .has-value .k-input-value-text{color:var(--ui-kit-color-grey-12)}.kit-dropdown.disabled .value-icon{stroke:var(--ui-kit-color-grey-12)}.kit-dropdown.invalid .dropdown{border-color:var(--ui-kit-color-red-1)}.kit-dropdown.invalid .value-icon{stroke:var(--ui-kit-color-red-1)}.kit-dropdown-popup.k-popup{margin-top:10px;padding:4px;border:none;border-radius:8px;box-shadow:0 9px 28px 8px #0000000d,0 3px 6px -4px #0000001f,0 6px 16px #00000014;background-color:var(--ui-kit-color-white)}.kit-dropdown-popup.k-popup.kit-dropdown-popup-default-item .k-list-optionlabel{display:flex}.kit-dropdown-popup.k-popup .k-list-optionlabel{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel,.kit-dropdown-popup.k-popup .k-list-item{padding:6px 12px;background-color:var(--ui-kit-color-white);font-size:14px;font-weight:400;box-shadow:none;border-radius:4px;color:var(--ui-kit-color-grey-10)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-list-optionlabel:before,.kit-dropdown-popup.k-popup .k-list-item.k-list-optionlabel:before{display:none}.kit-dropdown-popup.k-popup .k-list-optionlabel:hover,.kit-dropdown-popup.k-popup .k-list-optionlabel.k-focus:hover,.kit-dropdown-popup.k-popup .k-list-item:hover,.kit-dropdown-popup.k-popup .k-list-item.k-focus:hover{color:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel .option-icon,.kit-dropdown-popup.k-popup .k-list-item .option-icon{flex-shrink:0;display:none;width:16px;height:16px;fill:none;stroke:var(--ui-kit-color-main)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected,.kit-dropdown-popup.k-popup .k-list-item.k-selected{display:flex;align-items:center;background-color:var(--ui-kit-color-grey-13)}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-text,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-text{flex:1}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-selected .option-icon,.kit-dropdown-popup.k-popup .k-list-item.k-selected .option-icon{display:block}.kit-dropdown-popup.k-popup .k-list-optionlabel.k-disabled,.kit-dropdown-popup.k-popup .k-list-item.k-disabled{color:var(--ui-kit-color-grey-12)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
                 type: Input
             }], selectedItem: [{
@@ -1126,6 +1131,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }], toggleIcon: [{
                 type: Input
+            }], popupSettings: [{
+                type: Input
+            }], isValuePrimitive: [{
+                type: Input
             }], selected: [{
                 type: Output
             }], kitDropdownValueTemplate: [{
@@ -3040,7 +3049,7 @@ 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", "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}.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,
@@ -4477,7 +4486,7 @@ class KitPopupComponent {
         });
     }
     ngOnDestroy() {
-        this.popupRef = null;
+        this.close();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -4512,14 +4521,14 @@ class KitPopupComponent {
         this.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, deps: [{ token: i1$a.PopupService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, closePopupOnCancel: { classPropertyName: "closePopupOnCancel", publicName: "closePopupOnCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #popupTemplate>\n  <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n  @if (showFooter()) {\n    <div class=\"footer\">\n      <kit-button [label]=\"cancelButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"cancel()\"\n      ></kit-button>\n      <kit-button [label]=\"applyButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isApplyButtonDisabled()\"\n                  (clicked)=\"apply()\"\n      ></kit-button>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .k-popup:not(:has(.k-tooltip)){box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .k-popup:not(:has(.k-tooltip)) .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, closePopupOnCancel: { classPropertyName: "closePopupOnCancel", publicName: "closePopupOnCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }], ngImport: i0, template: "<ng-template #popupTemplate>\n  <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n  @if (showFooter()) {\n    <div class=\"footer\">\n      <kit-button [label]=\"cancelButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"cancel()\"\n      ></kit-button>\n      <kit-button [label]=\"applyButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isApplyButtonDisabled()\"\n                  (clicked)=\"apply()\"\n      ></kit-button>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .k-popup:not(.k-dropdownlist-popup):not(:has(.k-tooltip)){box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .k-popup:not(.k-dropdownlist-popup):not(:has(.k-tooltip)) .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-popup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         KitButtonModule,
                         NgTemplateOutlet,
-                    ], template: "<ng-template #popupTemplate>\n  <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n  @if (showFooter()) {\n    <div class=\"footer\">\n      <kit-button [label]=\"cancelButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"cancel()\"\n      ></kit-button>\n      <kit-button [label]=\"applyButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isApplyButtonDisabled()\"\n                  (clicked)=\"apply()\"\n      ></kit-button>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .k-popup:not(:has(.k-tooltip)){box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .k-popup:not(:has(.k-tooltip)) .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"] }]
+                    ], template: "<ng-template #popupTemplate>\n  <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\n  @if (showFooter()) {\n    <div class=\"footer\">\n      <kit-button [label]=\"cancelButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [type]=\"kitButtonType.GHOST\"\n                  (clicked)=\"cancel()\"\n      ></kit-button>\n      <kit-button [label]=\"applyButtonLabel()\"\n                  [kind]=\"kitButtonKind.MEDIUM\"\n                  [disabled]=\"isApplyButtonDisabled()\"\n                  (clicked)=\"apply()\"\n      ></kit-button>\n    </div>\n  }\n</ng-template>\n", styles: ["::ng-deep .k-popup:not(.k-dropdownlist-popup):not(:has(.k-tooltip)){box-sizing:border-box;padding:24px;margin-top:10px;color:var(--ui-kit-color-black);border:none;border-radius:8px;background:var(--ui-kit-color-white);box-shadow:0 10px 15px #0000001a,0 4px 6px #0000000d}::ng-deep .k-popup:not(.k-dropdownlist-popup):not(:has(.k-tooltip)) .footer{display:flex;align-items:center;justify-content:space-between;padding-top:15px;margin-top:10px;border-top:1px solid var(--ui-kit-color-grey-6)}\n"] }]
         }], ctorParameters: () => [{ type: i1$a.PopupService }], propDecorators: { popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate']
@@ -5030,7 +5039,7 @@ class KitShipmentCard {
         this.timelineExpanded = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitShipmentCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n     [ngClass]=\"{ selected: selected() }\">\n  <div class=\"kit-shipment-card-head\">\n    <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n    <kit-truncate-text>\n      <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n    </kit-truncate-text>\n  </div>\n  <div class=\"kit-shipment-card-content\">\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"icon info\"\n                    [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n      <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n    </div>\n\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n                    [icon]=\"shipmentModeIcon\"/>\n      <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n    </div>\n\n    <div class=\"content-row route\">\n      <kit-pill class=\"route-origin-port\">\n        <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n      </kit-pill>\n      <kit-svg-icon class=\"icon arrow\"\n                    [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n      <kit-pill class=\"route-destination-port\">\n        <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n      </kit-pill>\n      <span>by</span>\n      <kit-pill class=\"route-mode\">\n        <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n      </kit-pill>\n    </div>\n\n    <div class=\"content-footer\">\n      <div class=\"footer-buttons\">\n        <kit-button class=\"text-ellipsis\"\n                    [ngClass]=\"{ active: timelineExpanded }\"\n                    [label]=\"data().timelineActionBtnLabel\"\n                    [type]=\"kitButtonType.LINK\"\n                    (clicked)=\"showTimeline($event)\"/>\n        @if (containerItems.length) {\n          <kit-button class=\"text-ellipsis\"\n                      [ngClass]=\"{ active: containersExpanded }\"\n                      [label]=\"data().containerActionBtnLabel\"\n                      [type]=\"kitButtonType.LINK\"\n                      (clicked)=\"showContainers($event)\"/>\n        }\n      </div>\n  \n      @if (timelineExpanded) {\n        <div class=\"card-timeline-content\">\n          @for (timelineItem of timelineItems; track $index) {\n            <div class=\"timeline-row\">\n              <div class=\"timeline-item\">\n                <div class=\"timeline-content\">\n                  <kit-truncate-text>\n                    <span class=\"title\">{{ timelineItem.label }}: </span>\n                    {{ timelineItem.value }}\n                  </kit-truncate-text>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (containersExpanded) {\n        <div class=\"card-container-content\">\n          @for (containerItem of containerItems; track $index) {\n            <kit-truncate-text>\n              <p class=\"container-item\">\n                <span class=\"title\">{{ containerItem.value }} </span>\n                {{ containerItem.label }}\n              </p>\n            </kit-truncate-text>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port{max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port{margin-right:5px;max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode{margin-left:5px;max-width:25%}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitShipmentCard, isStandalone: true, selector: "kit-shipment-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, headLabel: { classPropertyName: "headLabel", publicName: "headLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-card\"\n     [ngClass]=\"{ selected: selected() }\">\n  <div class=\"kit-shipment-card-head\">\n    <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n    <kit-truncate-text>\n      <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n    </kit-truncate-text>\n  </div>\n  <div class=\"kit-shipment-card-content\">\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"icon info\"\n                    [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n      <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n    </div>\n\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n                    [icon]=\"shipmentModeIcon\"/>\n      <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n    </div>\n\n    <div class=\"content-row route\">\n      <kit-pill class=\"route-origin-port\">\n        <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n      </kit-pill>\n      <kit-svg-icon class=\"icon arrow\"\n                    [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n      <kit-pill class=\"route-destination-port\">\n        <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n      </kit-pill>\n      <span>by</span>\n      <kit-pill class=\"route-mode\">\n        <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n      </kit-pill>\n    </div>\n\n    <div class=\"content-footer\">\n      <div class=\"footer-buttons\">\n        <kit-button class=\"text-ellipsis\"\n                    [ngClass]=\"{ active: timelineExpanded }\"\n                    [label]=\"data().timelineActionBtnLabel\"\n                    [type]=\"kitButtonType.LINK\"\n                    (clicked)=\"showTimeline($event)\"/>\n        @if (containerItems.length) {\n          <kit-button class=\"text-ellipsis\"\n                      [ngClass]=\"{ active: containersExpanded }\"\n                      [label]=\"data().containerActionBtnLabel\"\n                      [type]=\"kitButtonType.LINK\"\n                      (clicked)=\"showContainers($event)\"/>\n        }\n      </div>\n  \n      @if (timelineExpanded) {\n        <div class=\"card-timeline-content\">\n          @for (timelineItem of timelineItems; track $index) {\n            <div class=\"timeline-row\">\n              <div class=\"timeline-item\">\n                <div class=\"timeline-content\">\n                  <kit-truncate-text>\n                    <span class=\"title\">{{ timelineItem.label }}: </span>\n                    {{ timelineItem.value }}\n                  </kit-truncate-text>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (containersExpanded) {\n        <div class=\"card-container-content\">\n          @for (containerItem of containerItems; track $index) {\n            <kit-truncate-text>\n              <p class=\"container-item\">\n                <span class=\"title\">{{ containerItem.value }} </span>\n                {{ containerItem.label }}\n              </p>\n            </kit-truncate-text>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitShipmentCard, decorators: [{
             type: Component,
@@ -5041,7 +5050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NgClass,
                         NgTemplateOutlet,
                         KitTruncateTextComponent,
-                    ], template: "<div class=\"kit-shipment-card\"\n     [ngClass]=\"{ selected: selected() }\">\n  <div class=\"kit-shipment-card-head\">\n    <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n    <kit-truncate-text>\n      <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n    </kit-truncate-text>\n  </div>\n  <div class=\"kit-shipment-card-content\">\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"icon info\"\n                    [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n      <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n    </div>\n\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n                    [icon]=\"shipmentModeIcon\"/>\n      <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n    </div>\n\n    <div class=\"content-row route\">\n      <kit-pill class=\"route-origin-port\">\n        <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n      </kit-pill>\n      <kit-svg-icon class=\"icon arrow\"\n                    [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n      <kit-pill class=\"route-destination-port\">\n        <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n      </kit-pill>\n      <span>by</span>\n      <kit-pill class=\"route-mode\">\n        <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n      </kit-pill>\n    </div>\n\n    <div class=\"content-footer\">\n      <div class=\"footer-buttons\">\n        <kit-button class=\"text-ellipsis\"\n                    [ngClass]=\"{ active: timelineExpanded }\"\n                    [label]=\"data().timelineActionBtnLabel\"\n                    [type]=\"kitButtonType.LINK\"\n                    (clicked)=\"showTimeline($event)\"/>\n        @if (containerItems.length) {\n          <kit-button class=\"text-ellipsis\"\n                      [ngClass]=\"{ active: containersExpanded }\"\n                      [label]=\"data().containerActionBtnLabel\"\n                      [type]=\"kitButtonType.LINK\"\n                      (clicked)=\"showContainers($event)\"/>\n        }\n      </div>\n  \n      @if (timelineExpanded) {\n        <div class=\"card-timeline-content\">\n          @for (timelineItem of timelineItems; track $index) {\n            <div class=\"timeline-row\">\n              <div class=\"timeline-item\">\n                <div class=\"timeline-content\">\n                  <kit-truncate-text>\n                    <span class=\"title\">{{ timelineItem.label }}: </span>\n                    {{ timelineItem.value }}\n                  </kit-truncate-text>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (containersExpanded) {\n        <div class=\"card-container-content\">\n          @for (containerItem of containerItems; track $index) {\n            <kit-truncate-text>\n              <p class=\"container-item\">\n                <span class=\"title\">{{ containerItem.value }} </span>\n                {{ containerItem.label }}\n              </p>\n            </kit-truncate-text>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14)}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port{max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port{margin-right:5px;max-width:30%}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode{margin-left:5px;max-width:25%}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"] }]
+                    ], template: "<div class=\"kit-shipment-card\"\n     [ngClass]=\"{ selected: selected() }\">\n  <div class=\"kit-shipment-card-head\">\n    <kit-truncate-text class=\"head-title\">{{ data().reference }}</kit-truncate-text>\n    <kit-truncate-text>\n      <ng-container *ngTemplateOutlet=\"headLabel()\"/>\n    </kit-truncate-text>\n  </div>\n  <div class=\"kit-shipment-card-content\">\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"icon info\"\n                    [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n      <kit-truncate-text class=\"title\">{{ data().latestRequiredByDate }}</kit-truncate-text>\n    </div>\n\n    <div class=\"content-row\">\n      <kit-svg-icon class=\"{{ 'icon ' + shipmentModeIcon.toLowerCase() }} \"\n                    [icon]=\"shipmentModeIcon\"/>\n      <kit-truncate-text>{{ data().vesselName }}</kit-truncate-text>\n    </div>\n\n    <div class=\"content-row route\">\n      <kit-pill class=\"route-origin-port\">\n        <kit-truncate-text>{{ data().originPort }}</kit-truncate-text>\n      </kit-pill>\n      <kit-svg-icon class=\"icon arrow\"\n                    [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n      <kit-pill class=\"route-destination-port\">\n        <kit-truncate-text>{{ data().destinationPort }}</kit-truncate-text>\n      </kit-pill>\n      <span>by</span>\n      <kit-pill class=\"route-mode\">\n        <kit-truncate-text>{{ data().type }} {{ data().containerMode }}</kit-truncate-text>\n      </kit-pill>\n    </div>\n\n    <div class=\"content-footer\">\n      <div class=\"footer-buttons\">\n        <kit-button class=\"text-ellipsis\"\n                    [ngClass]=\"{ active: timelineExpanded }\"\n                    [label]=\"data().timelineActionBtnLabel\"\n                    [type]=\"kitButtonType.LINK\"\n                    (clicked)=\"showTimeline($event)\"/>\n        @if (containerItems.length) {\n          <kit-button class=\"text-ellipsis\"\n                      [ngClass]=\"{ active: containersExpanded }\"\n                      [label]=\"data().containerActionBtnLabel\"\n                      [type]=\"kitButtonType.LINK\"\n                      (clicked)=\"showContainers($event)\"/>\n        }\n      </div>\n  \n      @if (timelineExpanded) {\n        <div class=\"card-timeline-content\">\n          @for (timelineItem of timelineItems; track $index) {\n            <div class=\"timeline-row\">\n              <div class=\"timeline-item\">\n                <div class=\"timeline-content\">\n                  <kit-truncate-text>\n                    <span class=\"title\">{{ timelineItem.label }}: </span>\n                    {{ timelineItem.value }}\n                  </kit-truncate-text>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      }\n\n      @if (containersExpanded) {\n        <div class=\"card-container-content\">\n          @for (containerItem of containerItems; track $index) {\n            <kit-truncate-text>\n              <p class=\"container-item\">\n                <span class=\"title\">{{ containerItem.value }} </span>\n                {{ containerItem.label }}\n              </p>\n            </kit-truncate-text>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-card{display:flex;flex-direction:column;padding:25px;color:var(--ui-kit-color-grey-10);font-weight:400;border:2px solid var(--ui-kit-color-grey-11);border-radius:10px;background:var(--ui-kit-color-white);box-sizing:border-box;background-color:var(--ui-kit-color-white);width:360px;font-size:14px;min-height:337px;line-height:20px}.kit-shipment-card.selected{border:2px solid var(--ui-kit-color-main)}.kit-shipment-card .text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-shipment-card-head{border-bottom:1px solid var(--ui-kit-color-grey-11);padding-bottom:12px;display:flex;justify-content:space-between;gap:15px}.kit-shipment-card-head .head-title{font-size:16px;line-height:22px}.kit-shipment-card-content{padding-top:15px;display:flex;flex-direction:column;gap:12px;justify-content:space-between;min-height:233px}.kit-shipment-card-content .content-row{display:flex;align-items:center}.kit-shipment-card-content .content-row .icon{width:24px;height:24px;margin-right:10px}.kit-shipment-card-content .content-row .icon.info{fill:var(--ui-kit-color-grey-12)}.kit-shipment-card-content .content-row .icon.ship{fill:none;stroke:var(--ui-kit-color-teal);width:26px}.kit-shipment-card-content .content-row .icon.air{fill:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.logistics{fill:none;stroke:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-row .icon.arrow{fill:none;stroke:var(--ui-kit-color-grey-10);margin-right:0;width:22px}.kit-shipment-card-content .content-row .title{font-size:18px;font-weight:500;line-height:24px}.kit-shipment-card-content .content-row.route{height:22px;width:100%;display:grid;grid-template-columns:minmax(0,auto) 22px minmax(0,auto) 24px min-content;grid-auto-flow:column;justify-content:stretch}.kit-shipment-card-content .content-row.route ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill .kit-pill-content,.kit-shipment-card-content .content-row.route ::ng-deep .kit-pill span{width:100%;font-size:12px}.kit-shipment-card-content .content-row.route ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.kit-shipment-card-content .content-row.route ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.kit-shipment-card-content .content-row.route ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}.kit-shipment-card-content .content-footer{background-color:var(--ui-kit-color-grey-13);border-radius:8px;padding:10px;min-height:105px}.kit-shipment-card-content .content-footer .footer-buttons{display:flex;justify-content:space-between;margin-bottom:12px}.kit-shipment-card-content .content-footer ::ng-deep .k-button{color:var(--ui-kit-color-grey-14);padding:0;height:auto;font-size:14px}.kit-shipment-card-content .content-footer ::ng-deep .k-button:hover{color:var(--ui-kit-color-main)}.kit-shipment-card-content .content-footer ::ng-deep .active .k-button{color:var(--ui-kit-color-main);text-decoration:underline}.kit-shipment-card .card-timeline-content .timeline-row{padding-bottom:5px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content{padding-left:30px}.kit-shipment-card .card-timeline-content .timeline-row .timeline-content:before{transform:translate(calc(-50% - 20px))}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:after{top:10px}.kit-shipment-card .card-timeline-content .timeline-row:first-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child{padding-bottom:0}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:before{display:none}.kit-shipment-card .card-timeline-content .timeline-row:last-child .timeline-item:after{bottom:10px;display:none}.kit-shipment-card .card-timeline-content .timeline-item{display:flex;position:relative}.kit-shipment-card .card-timeline-content .timeline-item:after,.kit-shipment-card .card-timeline-content .timeline-item:before{content:\"\";position:absolute;width:1px;background:var(--ui-kit-color-grey-12);height:calc(100% + 10px);transform:translate(10px)}.kit-shipment-card .card-timeline-content .timeline-content{position:relative;font-weight:500;color:var(--ui-kit-color-grey-19);width:90%}.kit-shipment-card .card-timeline-content .timeline-content .title{font-weight:400;color:var(--ui-kit-color-grey-10);font-size:13px}.kit-shipment-card .card-timeline-content .timeline-content:before{content:\"\";position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:var(--ui-kit-color-grey-12);box-sizing:border-box}.kit-shipment-card .card-container-content{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}.kit-shipment-card .card-container-content .container-item{padding:0;margin:0;color:var(--ui-kit-color-grey-14);width:95%}.kit-shipment-card .card-container-content .container-item .title{font-weight:500;color:var(--ui-kit-color-grey-10);max-width:45%}.kit-shipment-card .card-container-content>*:nth-child(2n){text-align:right}@media screen and (max-width: 1512px){.kit-shipment-card{width:320px;min-height:320px}.kit-shipment-card-content{min-height:200px}.kit-shipment-card .content-footer{background-color:inherit;padding:0}}\n"] }]
         }] });
 
 class KitBreadcrumbsComponent {
@@ -5392,7 +5401,12 @@ class KitGridModule {
             KitGridColumnComponent,
             KitGridCellTemplateDirective,
             KitGridDetailTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitGridModule, providers: [
+            LocalizationService,
+            { provide: L10N_PREFIX, useValue: '' },
+            PagerContextService,
+            PagerNavigationService,
+        ], imports: [CommonModule,
             GridModule,
             KitSvgIconModule,
             ExcelModule,
@@ -5420,6 +5434,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitGridCellTemplateDirective,
                         KitGridDetailTemplateDirective,
                     ],
+                    providers: [
+                        LocalizationService,
+                        { provide: L10N_PREFIX, useValue: '' },
+                        PagerContextService,
+                        PagerNavigationService,
+                    ],
                 }]
         }] });
 
@@ -5545,28 +5565,163 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 args: ['sectionContent']
             }] } });
 
+class KitCollapsedListComponent {
+    constructor() {
+        this.itemList = input.required();
+        this.lineHeight = input(24);
+        this.dropdownDefaultValueText = input('View More');
+        this.gap = input(20);
+        this.disableActions = input(false);
+        this.itemTemplate = input();
+        this.onSelectItem = output();
+        this.wrapper = viewChild.required('wrapper');
+        this.container = viewChild.required('container');
+        this.dropdown = viewChild('dropdown', {
+            read: ElementRef,
+        });
+        this.defaultSelectedItem = computed(() => ({
+            text: this.dropdownDefaultValueText(),
+            value: 'Default Item',
+        }));
+        this.shouldShowDropdown = signal(true);
+        this.dropdownItems = signal([]);
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitButtonType = KitButtonType;
+        this.kitButtonKind = KitButtonKind;
+        this.kitDropdownSize = KitDropdownSize;
+        this._selectedItem = signal(this.defaultSelectedItem());
+    }
+    get dropdownSelectedItem() {
+        return this.dropdownItems().find(item => item.value === this._selectedItem().value) ?? this.defaultSelectedItem();
+    }
+    get selectedItem() {
+        return this._selectedItem();
+    }
+    ngAfterViewInit() {
+        requestAnimationFrame(() => {
+            this.resize(this.defaultSelectedItem().text);
+            this.initResizeObserver();
+        });
+    }
+    ngOnChanges({ itemList, gap }) {
+        if ((itemList && !itemList.isFirstChange()) || (gap && !gap.isFirstChange())) {
+            this.resize(this.dropdownSelectedItem.text);
+        }
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+    }
+    setSelectedItem(item) {
+        this._selectedItem.set(item);
+        this.resize(item.text);
+    }
+    selectionChange(item) {
+        this.setSelectedItem(item);
+        this.onSelectItem.emit(item);
+    }
+    initResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => this.resize(this._selectedItem().text));
+        this.resizeObserver.observe(this.wrapper().nativeElement);
+    }
+    resize(dropdownText) {
+        const container = this.container().nativeElement;
+        const children = Array.from(container.children);
+        const availableWidth = this.wrapper().nativeElement.getBoundingClientRect().width;
+        let { isAvailableWidthExceeded, exceededChildIndex, } = this.checkOverflow(children, availableWidth);
+        if (isAvailableWidthExceeded) {
+            const dropdownWidth = this.getDropdownWidth(dropdownText);
+            const newWidth = availableWidth - dropdownWidth;
+            ({ exceededChildIndex } = this.checkOverflow(children, newWidth));
+        }
+        this.shouldShowDropdown.set(isAvailableWidthExceeded);
+        this.dropdownItems.set(this.itemList().slice(exceededChildIndex));
+    }
+    checkOverflow(children, availableWidth) {
+        let isAvailableWidthExceeded = false;
+        let exceededChildIndex = 0;
+        let totalWidth = 0;
+        let i = 0;
+        while (i < children.length) {
+            const child = children[i];
+            const childWidth = child.getBoundingClientRect().width;
+            if (childWidth) {
+                const newTotalWidth = totalWidth + this.gap() + childWidth;
+                if (parseFloat((newTotalWidth - availableWidth).toFixed(4)) >= 0) {
+                    isAvailableWidthExceeded = true;
+                    exceededChildIndex = i;
+                    break;
+                }
+                else {
+                    totalWidth = newTotalWidth;
+                }
+            }
+            i++;
+        }
+        return {
+            isAvailableWidthExceeded,
+            exceededChildIndex,
+        };
+    }
+    getDropdownWidth(text) {
+        const clonedDropdown = this.dropdown()?.nativeElement.cloneNode(true);
+        this.dropdown()?.nativeElement.insertAdjacentElement('afterend', clonedDropdown);
+        const span = clonedDropdown?.querySelector('.value-text');
+        if (span) {
+            span.textContent = text && this.dropdownItems().some(dropdownItem => dropdownItem.text === text)
+                ? text : this.defaultSelectedItem().text;
+        }
+        const width = clonedDropdown?.getBoundingClientRect().width ?? 0;
+        clonedDropdown?.remove();
+        return width;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitCollapsedListComponent, isStandalone: true, selector: "kit-collapsed-list", inputs: { itemList: { classPropertyName: "itemList", publicName: "itemList", isSignal: true, isRequired: true, transformFunction: null }, lineHeight: { classPropertyName: "lineHeight", publicName: "lineHeight", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultValueText: { classPropertyName: "dropdownDefaultValueText", publicName: "dropdownDefaultValueText", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, disableActions: { classPropertyName: "disableActions", publicName: "disableActions", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper \n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div class=\"wrapper-inner\">\n    <div\n      #container\n      class=\"element-container\">\n      @for (item of itemList(); track item.value) {\n        <div class=\"item-wrapper\"\n             (click)=\"selectionChange(item)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n        </div>\n      }\n    </div>\n\n    @if (shouldShowDropdown()) {\n      <kit-dropdown #dropdown\n                    class=\"collapsed-list-dropdown\"\n                    [class.selected]=\"dropdownSelectedItem.value !== defaultSelectedItem().value\"\n                    [items]=\"dropdownItems()\"\n                    [selectedItem]=\"dropdownSelectedItem\"\n                    [disabled]=\"disableActions()\"\n                    [size]=\"kitDropdownSize.SMALL\"\n                    [popupSettings]=\"{ width: 'auto' }\"\n                    [isValuePrimitive]=\"false\"\n                    (selected)=\"selectionChange($event)\"/>\n    }\n  </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  <kit-button class=\"item\"\n              [class.active]=\"item.value === _selectedItem().value\"\n              [label]=\"item.text\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.SMALL\"\n              [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:100%;display:flex;flex-wrap:wrap;overflow:hidden}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container .item.active ::ng-deep .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitDropdownModule }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-collapsed-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        KitButtonModule,
+                        KitDropdownModule,
+                        NgTemplateOutlet,
+                    ], template: "<div #wrapper \n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div class=\"wrapper-inner\">\n    <div\n      #container\n      class=\"element-container\">\n      @for (item of itemList(); track item.value) {\n        <div class=\"item-wrapper\"\n             (click)=\"selectionChange(item)\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate, context: { $implicit: item }\"/>\n        </div>\n      }\n    </div>\n\n    @if (shouldShowDropdown()) {\n      <kit-dropdown #dropdown\n                    class=\"collapsed-list-dropdown\"\n                    [class.selected]=\"dropdownSelectedItem.value !== defaultSelectedItem().value\"\n                    [items]=\"dropdownItems()\"\n                    [selectedItem]=\"dropdownSelectedItem\"\n                    [disabled]=\"disableActions()\"\n                    [size]=\"kitDropdownSize.SMALL\"\n                    [popupSettings]=\"{ width: 'auto' }\"\n                    [isValuePrimitive]=\"false\"\n                    (selected)=\"selectionChange($event)\"/>\n    }\n  </div>\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  <kit-button class=\"item\"\n              [class.active]=\"item.value === _selectedItem().value\"\n              [label]=\"item.text\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.SMALL\"\n              [disabled]=\"disableActions()\" />\n</ng-template>\n", styles: [".wrapper-inner{position:relative;display:flex;width:100%;justify-content:space-between;height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container{width:100%;display:flex;flex-wrap:wrap;overflow:hidden}.wrapper-inner .element-container .item-wrapper{margin-right:var(--kit-collapsed-list-gap, 20px)}.wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .element-container .item.active ::ng-deep .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown span{color:var(--ui-kit-color-white)}.wrapper-inner .collapsed-list-dropdown.selected ::ng-deep .dropdown svg{stroke:var(--ui-kit-color-white)}\n"] }]
+        }] });
+
 class KitScrollNavigationComponent {
     constructor() {
         this.isNavigationBtnDisabled = input(false);
-        this.items = null;
+        this.dropdownDefaultText = input('View More');
+        this.sections = null;
         this.content = null;
+        this.collapsedList = null;
         this.KitSvgIcon = KitSvgIcon;
         this.KitButtonType = KitButtonType;
         this.KitButtonKind = KitButtonKind;
-        this.activeSectionIndex = signal(0);
+        this.collapsedListItems = signal([]);
+        this.disableScrollUpdates = false;
+    }
+    get currentVisibleItem() {
+        return this.collapsedList?.selectedItem ?? null;
     }
     ngAfterViewInit() {
         this.setLastSectionMinHeight();
+        const sectionsData = this.sections?.map(section => {
+            return {
+                text: section.title,
+                value: section.title,
+            };
+        }) ?? [];
+        this.collapsedListItems.set(sectionsData);
+        this.collapsedList?.setSelectedItem(this.collapsedListItems()[0]);
     }
     onSectionScroll() {
         const contentElement = this.content?.nativeElement;
-        if (!contentElement || !this.items) {
+        if (!contentElement || !this.sections?.length || this.disableScrollUpdates) {
             return;
         }
         let index = 0;
         const contentScrollTop = contentElement.scrollTop + (contentElement.clientHeight / 2);
         const scrolledSectionIndexes = new Set();
-        for (const section of this.items.toArray()) {
+        for (const section of this.sections.toArray()) {
             const sectionElement = section.sectionContent?.nativeElement;
             const sectionTop = sectionElement.offsetTop;
             const sectionHeight = sectionElement.offsetHeight;
@@ -5579,10 +5734,16 @@ class KitScrollNavigationComponent {
             }
             index++;
         }
-        this.activeSectionIndex.set(Array.from(scrolledSectionIndexes)[scrolledSectionIndexes.size - 1]);
-    }
-    scrollToSection(index) {
-        const section = this.items?.toArray()[index]?.sectionContent?.nativeElement;
+        const activeSectionIndex = Array.from(scrolledSectionIndexes)[scrolledSectionIndexes.size - 1];
+        this.collapsedList?.setSelectedItem(this.collapsedListItems()[activeSectionIndex]);
+    }
+    scrollToSection(selectedItem) {
+        this.disableScrollUpdates = true;
+        this.content?.nativeElement.addEventListener('scrollend', () => {
+            this.disableScrollUpdates = false;
+        }, { once: true });
+        const section = this.sections?.toArray()
+            .find(section => section.title === selectedItem.text)?.sectionContent?.nativeElement;
         section?.scrollIntoView({
             behavior: 'smooth',
             block: 'start',
@@ -5591,8 +5752,8 @@ class KitScrollNavigationComponent {
     }
     setLastSectionMinHeight() {
         const contentHeight = this.content?.nativeElement.clientHeight;
-        if (contentHeight && this.items) {
-            this.calculateLastSectionMinHeight(this.items.toArray(), contentHeight);
+        if (contentHeight && this.sections) {
+            this.calculateLastSectionMinHeight(this.sections.toArray(), contentHeight);
         }
     }
     calculateLastSectionMinHeight(sections, contentHeight) {
@@ -5602,17 +5763,20 @@ class KitScrollNavigationComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitScrollNavigationComponent, isStandalone: false, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n    @for (item of items; track item) {\n      <kit-button class=\"nav-item\"\n                  [class.active]=\"activeSectionIndex() === $index\"\n                  [label]=\"item.title\"\n                  [type]=\"KitButtonType.GHOST\"\n                  [kind]=\"KitButtonKind.SMALL\"\n                  [disabled]=\"isNavigationBtnDisabled()\"\n                  (clicked)=\"scrollToSection($index)\"\n      ></kit-button>\n    }\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of items; track item) {\n      <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n      ></ng-container>\n    }\n  </div>\n</div>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{display:flex;align-items:center;gap:18px;padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: KitScrollNavigationComponent, isStandalone: false, selector: "kit-scroll-navigation", inputs: { isNavigationBtnDisabled: { classPropertyName: "isNavigationBtnDisabled", publicName: "isNavigationBtnDisabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownDefaultText: { classPropertyName: "dropdownDefaultText", publicName: "dropdownDefaultText", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sections", predicate: KitScrollNavigationSectionComponent }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "collapsedList", first: true, predicate: KitCollapsedListComponent, descendants: true }], ngImport: i0, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n      <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                          [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n                          [gap]=\"18\"\n                          [itemTemplate]=\"navItem\"\n                          [disableActions]=\"isNavigationBtnDisabled()\"\n                          (onSelectItem)=\"scrollToSection($event)\"/>\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of sections; track item) {\n      <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n      ></ng-container>\n    }\n  </div>\n</div>\n\n<ng-template #navItem let-item>\n  <kit-button class=\"nav-item\"\n              [class.active]=\"currentVisibleItem?.value === item.value\"\n              [type]=\"KitButtonType.GHOST\"\n              [kind]=\"KitButtonKind.SMALL\"\n              [label]=\"item.text\"\n              [disabled]=\"isNavigationBtnDisabled()\"\n  ></kit-button>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate"], outputs: ["onSelectItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-scroll-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n    @for (item of items; track item) {\n      <kit-button class=\"nav-item\"\n                  [class.active]=\"activeSectionIndex() === $index\"\n                  [label]=\"item.title\"\n                  [type]=\"KitButtonType.GHOST\"\n                  [kind]=\"KitButtonKind.SMALL\"\n                  [disabled]=\"isNavigationBtnDisabled()\"\n                  (clicked)=\"scrollToSection($index)\"\n      ></kit-button>\n    }\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of items; track item) {\n      <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n      ></ng-container>\n    }\n  </div>\n</div>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{display:flex;align-items:center;gap:18px;padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"] }]
-        }], propDecorators: { items: [{
+            args: [{ selector: 'kit-scroll-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"kit-scroll-navigation\">\n  <div class=\"kit-scroll-navigation-items\">\n      <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                          [dropdownDefaultValueText]=\"dropdownDefaultText()\"\n                          [gap]=\"18\"\n                          [itemTemplate]=\"navItem\"\n                          [disableActions]=\"isNavigationBtnDisabled()\"\n                          (onSelectItem)=\"scrollToSection($event)\"/>\n  </div>\n\n  <div #content\n       class=\"kit-scroll-navigation-content\"\n       (scroll)=\"onSectionScroll()\">\n    @for (item of sections; track item) {\n      <ng-container *ngTemplateOutlet=\"item.sectionTemplate\"\n      ></ng-container>\n    }\n  </div>\n</div>\n\n<ng-template #navItem let-item>\n  <kit-button class=\"nav-item\"\n              [class.active]=\"currentVisibleItem?.value === item.value\"\n              [type]=\"KitButtonType.GHOST\"\n              [kind]=\"KitButtonKind.SMALL\"\n              [label]=\"item.text\"\n              [disabled]=\"isNavigationBtnDisabled()\"\n  ></kit-button>\n</ng-template>\n", styles: [".kit-scroll-navigation{display:flex;flex-direction:column;gap:34px;height:100%}.kit-scroll-navigation-items{padding-bottom:27px;border-bottom:1px solid var(--ui-kit-color-grey-11)}.kit-scroll-navigation .nav-item.active .kit-button .k-button{color:var(--ui-kit-color-white);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-main)}.kit-scroll-navigation-content{display:flex;flex-direction:column;flex:1;gap:20px;position:relative;overflow-y:auto}.kit-scroll-navigation-section{flex-shrink:0}\n"] }]
+        }], propDecorators: { sections: [{
                 type: ContentChildren,
                 args: [KitScrollNavigationSectionComponent]
             }], content: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
+            }], collapsedList: [{
+                type: ViewChild,
+                args: [KitCollapsedListComponent]
             }] } });
 
 class KitScrollNavigationModule {
@@ -5620,11 +5784,13 @@ class KitScrollNavigationModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationModule, declarations: [KitScrollNavigationComponent], imports: [CommonModule,
             KitButtonModule,
             KitSvgIconModule,
-            KitScrollNavigationSectionComponent], exports: [KitScrollNavigationComponent,
+            KitScrollNavigationSectionComponent,
+            KitCollapsedListComponent], exports: [KitScrollNavigationComponent,
             KitScrollNavigationSectionComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationModule, imports: [CommonModule,
             KitButtonModule,
-            KitSvgIconModule] }); }
+            KitSvgIconModule,
+            KitCollapsedListComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: KitScrollNavigationModule, decorators: [{
             type: NgModule,
@@ -5637,6 +5803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         KitButtonModule,
                         KitSvgIconModule,
                         KitScrollNavigationSectionComponent,
+                        KitCollapsedListComponent,
                     ],
                     exports: [
                         KitScrollNavigationComponent,
@@ -6131,5 +6298,5 @@ const kitDataStateToODataString = (state) => toODataString(state);
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridModule, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationModule, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID, kitDataStateToODataString };
+export { AbstractKitCtaPanelConfirmationComponent, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeModule, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDatepickerComponent, KitDatepickerModule, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterLogic, KitFilterOperator, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridModule, KitGridSortSettingsMode, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxState, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitScrollNavigationComponent, KitScrollNavigationModule, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabsComponent, KitTabsModule, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, buildRandomUUID, kitDataStateToODataString };
 //# sourceMappingURL=indigina-ui-kit.mjs.map