@indigina/ui-kit 1.1.182 → 1.1.184

package/fesm2022/indigina-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, signal, TemplateRef, ViewChild, ContentChild, HostListener, Injectable, output, Host, Self, Inject, model, viewChild, computed, contentChildren, ContentChildren, viewChildren, contentChild, InjectionToken, Optional } from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, input, EventEmitter, Output, ViewEncapsulation, NgModule, effect, inject, ElementRef, NgZone, Renderer2, Directive, forwardRef, viewChild, HostListener, signal, TemplateRef, ViewChild, ContentChild, Injectable, output, Host, Self, Inject, model, computed, contentChildren, ContentChildren, viewChildren, ViewContainerRef, InjectionToken, contentChild, Optional } 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';
@@ -12,7 +12,7 @@ import { PopupService } from '@progress/kendo-angular-popup';
 import * as i1$5 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, UntypedFormControl, Validators } from '@angular/forms';
 import * as i1$3 from '@progress/kendo-angular-inputs';
-import { TextBoxModule, NumericTextBoxModule, InputsModule, CheckBoxModule, SwitchModule, RadioButtonModule } from '@progress/kendo-angular-inputs';
+import { TextBoxModule, NumericTextBoxModule, InputsModule, CheckBoxModule, SwitchModule, RadioButtonModule, TextBoxComponent, KENDO_INPUTS } from '@progress/kendo-angular-inputs';
 import '@progress/kendo-angular-intl/locales/en-GB/all';
 import * as i1$4 from '@progress/kendo-angular-dropdowns';
 import { DropDownListModule, DropDownsModule, MultiSelectComponent, MultiSelectModule } from '@progress/kendo-angular-dropdowns';
@@ -23,7 +23,7 @@ import * as i1$6 from 'ngx-toastr';
 import { DefaultGlobalConfig, TOAST_CONFIG, ToastrModule } from 'ngx-toastr';
 import * as i1$7 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
-import { BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, of, tap, map, debounceTime, switchMap } from 'rxjs';
+import { BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, debounceTime, distinctUntilChanged, tap, map, take, switchMap, of, catchError } from 'rxjs';
 import { v4 } from 'uuid';
 import * as i1$8 from '@progress/kendo-angular-dialog';
 import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult, DialogRef } from '@progress/kendo-angular-dialog';
@@ -45,12 +45,12 @@ import { GridComponent, GridModule, ExcelModule, PDFModule } from '@progress/ken
 import * as i4 from '@progress/kendo-angular-pager';
 import { PagerContextService, PagerNavigationService } from '@progress/kendo-angular-pager';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import * as i2$3 from '@progress/kendo-angular-sortable';
-import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
-import { toODataString } from '@progress/kendo-data-query';
 import { __decorate } from 'tslib';
 import * as i1$d from '@ngxs/store';
 import { StateToken, Action, State, createSelector, Selector } from '@ngxs/store';
+import * as i2$3 from '@progress/kendo-angular-sortable';
+import { KENDO_SORTABLE } from '@progress/kendo-angular-sortable';
+import { toODataString } from '@progress/kendo-data-query';
 import { patch, append, removeItem, updateItem } from '@ngxs/store/operators';
 import { StateReset } from 'ngxs-reset-plugin';
 import { signalSetFn, SIGNAL } from '@angular/core/primitives/signals';
@@ -1029,6 +1029,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+class KitTruncateTextComponent {
+    constructor() {
+        this.tooltip = viewChild.required(TooltipDirective);
+        this.anchor = viewChild.required('anchor');
+        this.content = viewChild.required('content');
+    }
+    onMouseEnter() {
+        const el = this.content().nativeElement;
+        if (el.offsetWidth < el.scrollWidth) {
+            this.anchor().nativeElement.setAttribute('title', el.innerText);
+            this.tooltip().tooltipClass = 'kit-tooltip';
+            this.tooltip().toggle(this.anchor().nativeElement);
+        }
+    }
+    onMouseOver() {
+        this.tooltip().hide();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTruncateTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: KitTruncateTextComponent, isStandalone: true, selector: "kit-truncate-text", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseOver()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #anchor\n     kendoTooltip\n     class=\"kit-tooltip\"\n     showOn=\"none\">\n  <div #content \n       class=\"truncate-text\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTruncateTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-truncate-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        TooltipDirective,
+                    ], template: "<div #anchor\n     kendoTooltip\n     class=\"kit-tooltip\"\n     showOn=\"none\">\n  <div #content \n       class=\"truncate-text\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}\n"] }]
+        }], propDecorators: { onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 function buildPopupClass(hideDefaultItem) {
     if (hideDefaultItem) {
         return DROPDOWN_POPUP_CLASS;
@@ -1141,7 +1174,7 @@ class KitDropdownComponent {
                 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: KitDropdownItemTemplateDirective, 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    @if (footerTemplate()) {\n      <ng-template kendoDropDownListFooterTemplate>\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n      </ng-template>\n    }\n    @if (noDataTemplate()) {\n      <ng-template kendoDropDownListNoDataTemplate>\n        <ng-container *ngTemplateOutlet=\"noDataTemplate()\"/>\n      </ng-template>\n    }\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", "adaptiveTitle", "adaptiveSubtitle", "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.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: i1$4.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { 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: KitDropdownItemTemplateDirective, 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        <kit-truncate-text class=\"option-text\">{{ dataItem?.text }}</kit-truncate-text>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n    @if (footerTemplate()) {\n      <ng-template kendoDropDownListFooterTemplate>\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n      </ng-template>\n    }\n    @if (noDataTemplate()) {\n      <ng-template kendoDropDownListNoDataTemplate>\n        <ng-container *ngTemplateOutlet=\"noDataTemplate()\"/>\n      </ng-template>\n    }\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", "adaptiveTitle", "adaptiveSubtitle", "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.FooterTemplateDirective, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]" }, { kind: "directive", type: i1$4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "directive", type: i1$4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "directive", type: i1$4.NoDataTemplateDirective, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]" }, { 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"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitDropdownComponent, decorators: [{
             type: Component,
@@ -1149,7 +1182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             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]=\"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    @if (footerTemplate()) {\n      <ng-template kendoDropDownListFooterTemplate>\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n      </ng-template>\n    }\n    @if (noDataTemplate()) {\n      <ng-template kendoDropDownListNoDataTemplate>\n        <ng-container *ngTemplateOutlet=\"noDataTemplate()\"/>\n      </ng-template>\n    }\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        <kit-truncate-text class=\"option-text\">{{ dataItem?.text }}</kit-truncate-text>\n        <kit-svg-icon class=\"option-icon\"\n                      [icon]=\"KitSvgIcon.CHECK\"\n        ></kit-svg-icon>\n      }\n    </ng-template>\n    @if (footerTemplate()) {\n      <ng-template kendoDropDownListFooterTemplate>\n        <ng-container *ngTemplateOutlet=\"footerTemplate()\" />\n      </ng-template>\n    }\n    @if (noDataTemplate()) {\n      <ng-template kendoDropDownListNoDataTemplate>\n        <ng-container *ngTemplateOutlet=\"noDataTemplate()\"/>\n      </ng-template>\n    }\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: [{
@@ -1198,7 +1231,8 @@ class KitDropdownModule {
             FormsModule,
             KitSvgIconModule,
             KitInputLabelModule,
-            KitDropdownItemTemplateDirective], exports: [KitDropdownComponent,
+            KitDropdownItemTemplateDirective,
+            KitTruncateTextComponent], exports: [KitDropdownComponent,
             KitDropdownItemTemplateDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitDropdownModule, imports: [DropDownListModule,
             CommonModule,
@@ -1227,6 +1261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         KitSvgIconModule,
                         KitInputLabelModule,
                         KitDropdownItemTemplateDirective,
+                        KitTruncateTextComponent,
                     ],
                 }]
         }] });
@@ -2516,6 +2551,7 @@ var KitPillTheme;
 (function (KitPillTheme) {
     KitPillTheme["DEFAULT"] = "default";
     KitPillTheme["BLUE"] = "blue";
+    KitPillTheme["MAIN"] = "main";
 })(KitPillTheme || (KitPillTheme = {}));
 
 class KitPillComponent {
@@ -2566,14 +2602,14 @@ class KitPillComponent {
         this.clicked.emit(!this.selected);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitPillComponent, isStandalone: true, selector: "kit-pill", inputs: { removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { listeners: { "click": "onComponentClick()" } }, ngImport: i0, template: "<div class=\"kit-pill\"\n     [ngClass]=\"cssClasses\">\n  @if (icon) {\n    <kit-svg-icon class=\"kit-pill-icon\"\n                  [icon]=\"icon\"\n                  [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  }\n  <div class=\"kit-pill-content\">\n    <ng-content\n    ></ng-content>\n  </div>\n  @if (removable) {\n    <button class=\"kit-pill-remove\"\n            (click)=\"removed.emit()\">\n      <kit-svg-icon class=\"remove-icon\"\n                    [icon]=\"closeIcon\"\n      ></kit-svg-icon>\n    </button>\n  }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitPillComponent, isStandalone: true, selector: "kit-pill", inputs: { removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", removed: "removed" }, host: { listeners: { "click": "onComponentClick()" } }, ngImport: i0, template: "<div class=\"kit-pill\"\n     [ngClass]=\"cssClasses\">\n  @if (icon) {\n    <kit-svg-icon class=\"kit-pill-icon\"\n                  [icon]=\"icon\"\n                  [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  }\n  <div class=\"kit-pill-content\">\n    <ng-content\n    ></ng-content>\n  </div>\n  @if (removable) {\n    <button class=\"kit-pill-remove\"\n            (click)=\"removed.emit()\">\n      <kit-svg-icon class=\"remove-icon\"\n                    [icon]=\"closeIcon\"\n      ></kit-svg-icon>\n    </button>\n  }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover.main-theme,.kit-pill.selectable.selected.main-theme{color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-background)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPillComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-pill', imports: [
                         CommonModule,
                         KitSvgIconModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-pill\"\n     [ngClass]=\"cssClasses\">\n  @if (icon) {\n    <kit-svg-icon class=\"kit-pill-icon\"\n                  [icon]=\"icon\"\n                  [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  }\n  <div class=\"kit-pill-content\">\n    <ng-content\n    ></ng-content>\n  </div>\n  @if (removable) {\n    <button class=\"kit-pill-remove\"\n            (click)=\"removed.emit()\">\n      <kit-svg-icon class=\"remove-icon\"\n                    [icon]=\"closeIcon\"\n      ></kit-svg-icon>\n    </button>\n  }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-pill\"\n     [ngClass]=\"cssClasses\">\n  @if (icon) {\n    <kit-svg-icon class=\"kit-pill-icon\"\n                  [icon]=\"icon\"\n                  [ngClass]=\"iconType ?? kitSvgIconType.FILL\"\n    ></kit-svg-icon>\n  }\n  <div class=\"kit-pill-content\">\n    <ng-content\n    ></ng-content>\n  </div>\n  @if (removable) {\n    <button class=\"kit-pill-remove\"\n            (click)=\"removed.emit()\">\n      <kit-svg-icon class=\"remove-icon\"\n                    [icon]=\"closeIcon\"\n      ></kit-svg-icon>\n    </button>\n  }\n</div>\n", styles: [".kit-pill{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ui-kit-color-white);border-width:1px;border-color:var(--ui-kit-color-grey-12);color:var(--ui-kit-color-grey-10);border-radius:4px;font-weight:500;font-size:12px;text-align:center}.kit-pill.default-type{border-style:solid}.kit-pill.dashed-type{border-style:dashed}.kit-pill.blue-theme{color:var(--ui-kit-color-blue);border-color:var(--ui-kit-color-blue);background-color:var(--ui-kit-color-blue-1)}.kit-pill.selectable{cursor:pointer}.kit-pill.selectable:hover,.kit-pill.selectable.selected{border-color:var(--ui-kit-color-main)}.kit-pill.selectable:hover.main-theme,.kit-pill.selectable.selected.main-theme{color:var(--ui-kit-color-main);background-color:var(--ui-kit-color-background)}.kit-pill.selectable:hover .kit-pill-icon.fill,.kit-pill.selectable.selected .kit-pill-icon.fill{fill:var(--ui-kit-color-main)}.kit-pill.selectable:hover .kit-pill-icon.stroke,.kit-pill.selectable.selected .kit-pill-icon.stroke{stroke:var(--ui-kit-color-main)}.kit-pill-icon{width:12px;height:12px}.kit-pill-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-pill-icon.stroke{fill:none;stroke:var(--ui-kit-color-grey-12)}.kit-pill-content{display:flex;align-items:center;gap:4px}.kit-pill-remove{padding:0;border:none;outline:none;background:none;cursor:pointer}.kit-pill-remove .remove-icon{display:block;height:12px;width:12px;fill:var(--ui-kit-color-grey-12)}.kit-pill-remove:hover .remove-icon{fill:var(--ui-kit-color-main)}\n"] }]
         }], propDecorators: { removable: [{
                 type: Input
             }], selectable: [{
@@ -5132,38 +5168,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-class KitTruncateTextComponent {
+class KitRoutePathComponent {
     constructor() {
-        this.tooltip = viewChild.required(TooltipDirective);
-        this.anchor = viewChild.required('anchor');
-        this.content = viewChild.required('content');
-    }
-    onMouseEnter() {
-        const el = this.content().nativeElement;
-        if (el.offsetWidth < el.scrollWidth) {
-            this.anchor().nativeElement.setAttribute('title', el.innerText);
-            this.tooltip().tooltipClass = 'kit-tooltip';
-            this.tooltip().toggle(this.anchor().nativeElement);
-        }
-    }
-    onMouseOver() {
-        this.tooltip().hide();
+        this.originPort = input('');
+        this.destinationPort = input('');
+        this.type = input('');
+        this.containerMode = input('');
+        this.kitSvgIcon = KitSvgIcon;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTruncateTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: KitTruncateTextComponent, isStandalone: true, selector: "kit-truncate-text", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseOver()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: TooltipDirective, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #anchor\n     kendoTooltip\n     class=\"kit-tooltip\"\n     showOn=\"none\">\n  <div #content \n       class=\"truncate-text\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kendoTooltip]", inputs: ["filter", "position", "titleTemplate", "showOn", "showAfter", "callout", "closable", "offset", "tooltipWidth", "tooltipHeight", "tooltipClass", "tooltipContentClass", "collision", "closeTitle", "tooltipTemplate"], exportAs: ["kendoTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitRoutePathComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitRoutePathComponent, isStandalone: true, selector: "kit-route-path", inputs: { originPort: { classPropertyName: "originPort", publicName: "originPort", isSignal: true, isRequired: false, transformFunction: null }, destinationPort: { classPropertyName: "destinationPort", publicName: "destinationPort", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, containerMode: { classPropertyName: "containerMode", publicName: "containerMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"route-path\">\n  <kit-pill class=\"route-origin-port\">\n  <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  <kit-svg-icon class=\"icon arrow\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n  <kit-pill class=\"route-destination-port\">\n    <kit-truncate-text>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  @if (type()) {\n    <span>{{ 'kit.routePath.by' | translate }}</span>\n    <kit-pill class=\"route-mode\">\n      <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n    </kit-pill>\n  }\n</div>\n", styles: [".route-path{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}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.route-path ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.route-path ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTruncateTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitRoutePathComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kit-truncate-text', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        TooltipDirective,
-                    ], template: "<div #anchor\n     kendoTooltip\n     class=\"kit-tooltip\"\n     showOn=\"none\">\n  <div #content \n       class=\"truncate-text\">\n    <ng-content/>\n  </div>\n</div>\n", styles: [":host{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}:host .truncate-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}\n"] }]
-        }], propDecorators: { onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseOver: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
+            args: [{ selector: 'kit-route-path', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        KitPillComponent,
+                        KitTruncateTextComponent,
+                        KitSvgIconModule,
+                        TranslateModule,
+                    ], template: "<div class=\"route-path\">\n  <kit-pill class=\"route-origin-port\">\n  <kit-truncate-text>{{ originPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  <kit-svg-icon class=\"icon arrow\"\n                [icon]=\"kitSvgIcon.CHEVRON_RIGHT\"/>\n  <kit-pill class=\"route-destination-port\">\n    <kit-truncate-text>{{ destinationPort() || ('kit.routePath.tbc' | translate ) }}</kit-truncate-text>\n  </kit-pill>\n  @if (type()) {\n    <span>{{ 'kit.routePath.by' | translate }}</span>\n    <kit-pill class=\"route-mode\">\n      <kit-truncate-text>{{ type() }} {{ containerMode() }}</kit-truncate-text>\n    </kit-pill>\n  }\n</div>\n", styles: [".route-path{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}.route-path .icon.arrow{fill:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.route-path ::ng-deep span{font-size:13px;color:var(--ui-kit-color-grey-14);margin:auto}.route-path ::ng-deep .kit-pill{padding:0 8px;font-weight:400}.route-path ::ng-deep .kit-pill .kit-pill-content,.route-path ::ng-deep .kit-pill span{width:100%;font-size:12px;max-width:150px}.route-path ::ng-deep .route-origin-port .kit-pill{border:1px solid var(--ui-kit-color-orange-5);background-color:var(--ui-kit-color-orange-3);color:var(--ui-kit-color-orange-2)}.route-path ::ng-deep .route-destination-port .kit-pill{border:1px solid var(--ui-kit-color-purple-2);background-color:var(--ui-kit-color-purple-1);color:var(--ui-kit-color-purple)}.route-path ::ng-deep .route-mode .kit-pill{border:1px solid var(--ui-kit-color-teal-2);background-color:var(--ui-kit-color-teal-1);color:var(--ui-kit-color-teal)}\n"] }]
+        }] });
 
 class KitShipmentCard {
     constructor() {
@@ -5203,18 +5227,18 @@ class KitShipmentCard {
         this.timelineExpanded = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitShipmentCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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    <ng-container *ngTemplateOutlet=\"headLabel()\"/>\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;width:50%}.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:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.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;max-width:150px}.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", "state", "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.2.14", 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    <ng-container *ngTemplateOutlet=\"headLabel()\"/>\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-route-path [containerMode]=\"data().containerMode\"\n                      [destinationPort]=\"data().destinationPort\"\n                      [originPort]=\"data().originPort\"\n                      [type]=\"data().type\"/>\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;width:50%}.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 .title{font-size:18px;font-weight:500;line-height:24px}.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", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { 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" }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitShipmentCard, decorators: [{
             type: Component,
             args: [{ selector: 'kit-shipment-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         KitButtonModule,
                         KitSvgIconModule,
-                        KitPillComponent,
                         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    <ng-container *ngTemplateOutlet=\"headLabel()\"/>\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;width:50%}.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:var(--ui-kit-color-grey-10);margin:auto;width:16px;height:16px}.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;max-width:150px}.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"] }]
+                        KitRoutePathComponent,
+                    ], 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    <ng-container *ngTemplateOutlet=\"headLabel()\"/>\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-route-path [containerMode]=\"data().containerMode\"\n                      [destinationPort]=\"data().destinationPort\"\n                      [originPort]=\"data().originPort\"\n                      [type]=\"data().type\"/>\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;width:50%}.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 .title{font-size:18px;font-weight:500;line-height:24px}.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 {
@@ -5901,7 +5925,7 @@ class KitCollapsedListComponent {
         this.shouldShowDropdown.set(fitCount < allItems.length);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitCollapsedListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "measureItem", predicate: ["measureItem"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper\n     class=\"kit-collapsed-list\"\n     [ngClass]=\"dropdownAlign()\"\n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div class=\"wrapper-inner\">\n    @if (visibleItems().length) {\n      <div class=\"element-container\">\n        @for (item of visibleItems(); track $index) {\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]=\"popupSettings\"\n                    [isValuePrimitive]=\"false\"\n                    [footerTemplate]=\"dropdownFooterTemplate()\"\n                    [noDataTemplate]=\"dropdownNoDataTemplate()\"\n                    (selected)=\"selectionChange($event)\">\n        @if (dropdownItemTemplate()) {\n          <ng-template kitDropdownItemTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n          </ng-template>\n        }\n      </kit-dropdown>\n    }\n  </div>\n\n  <div class=\"wrapper-inner measure-container\">\n    <div class=\"element-container\">\n      @for (item of itemList(); track $index) {\n        <div #measureItem\n             class=\"item-wrapper\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n        </div>\n      }\n    </div>\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: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "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", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: KitDropdownItemTemplateDirective, selector: "[kitDropdownItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, dropdownFooterTemplate: { classPropertyName: "dropdownFooterTemplate", publicName: "dropdownFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownItemTemplate: { classPropertyName: "dropdownItemTemplate", publicName: "dropdownItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dropdownNoDataTemplate: { classPropertyName: "dropdownNoDataTemplate", publicName: "dropdownNoDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowDropdown: { classPropertyName: "alwaysShowDropdown", publicName: "alwaysShowDropdown", isSignal: true, isRequired: false, transformFunction: null }, dropdownAlign: { classPropertyName: "dropdownAlign", publicName: "dropdownAlign", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectItem: "onSelectItem" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }, { propertyName: "measureItem", predicate: ["measureItem"], descendants: true, isSignal: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div #wrapper\n     class=\"kit-collapsed-list\"\n     [ngClass]=\"dropdownAlign()\"\n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div class=\"wrapper-inner\">\n    @if (visibleItems().length) {\n      <div class=\"element-container\">\n        @for (item of visibleItems(); track $index) {\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]=\"popupSettings\"\n                    [isValuePrimitive]=\"false\"\n                    [footerTemplate]=\"dropdownFooterTemplate()\"\n                    [noDataTemplate]=\"dropdownNoDataTemplate()\"\n                    (selected)=\"selectionChange($event)\">\n        @if (dropdownItemTemplate()) {\n          <ng-template kitDropdownItemTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n          </ng-template>\n        }\n      </kit-dropdown>\n    }\n  </div>\n\n  <div class=\"wrapper-inner measure-container\">\n    <div class=\"element-container\">\n      @for (item of itemList(); track $index) {\n        <div #measureItem\n             class=\"item-wrapper\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n        </div>\n      }\n    </div>\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: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{max-width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "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", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "directive", type: KitDropdownItemTemplateDirective, selector: "[kitDropdownItemTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DropDownListModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitCollapsedListComponent, decorators: [{
             type: Component,
@@ -5911,7 +5935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         NgTemplateOutlet,
                         DropDownListModule,
                         NgClass,
-                    ], template: "<div #wrapper\n     class=\"kit-collapsed-list\"\n     [ngClass]=\"dropdownAlign()\"\n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div class=\"wrapper-inner\">\n    @if (visibleItems().length) {\n      <div class=\"element-container\">\n        @for (item of visibleItems(); track $index) {\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]=\"popupSettings\"\n                    [isValuePrimitive]=\"false\"\n                    [footerTemplate]=\"dropdownFooterTemplate()\"\n                    [noDataTemplate]=\"dropdownNoDataTemplate()\"\n                    (selected)=\"selectionChange($event)\">\n        @if (dropdownItemTemplate()) {\n          <ng-template kitDropdownItemTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n          </ng-template>\n        }\n      </kit-dropdown>\n    }\n  </div>\n\n  <div class=\"wrapper-inner measure-container\">\n    <div class=\"element-container\">\n      @for (item of itemList(); track $index) {\n        <div #measureItem\n             class=\"item-wrapper\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n        </div>\n      }\n    </div>\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: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"] }]
+                    ], template: "<div #wrapper\n     class=\"kit-collapsed-list\"\n     [ngClass]=\"dropdownAlign()\"\n     [style.--kit-collapsed-list-height.px]=\"lineHeight()\"\n     [style.--kit-collapsed-list-gap.px]=\"gap()\">\n  <div class=\"wrapper-inner\">\n    @if (visibleItems().length) {\n      <div class=\"element-container\">\n        @for (item of visibleItems(); track $index) {\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]=\"popupSettings\"\n                    [isValuePrimitive]=\"false\"\n                    [footerTemplate]=\"dropdownFooterTemplate()\"\n                    [noDataTemplate]=\"dropdownNoDataTemplate()\"\n                    (selected)=\"selectionChange($event)\">\n        @if (dropdownItemTemplate()) {\n          <ng-template kitDropdownItemTemplate let-dataItem>\n            <ng-container *ngTemplateOutlet=\"dropdownItemTemplate(), context: { $implicit: dataItem }\" />\n          </ng-template>\n        }\n      </kit-dropdown>\n    }\n  </div>\n\n  <div class=\"wrapper-inner measure-container\">\n    <div class=\"element-container\">\n      @for (item of itemList(); track $index) {\n        <div #measureItem\n             class=\"item-wrapper\">\n          <ng-container *ngTemplateOutlet=\"itemTemplate() || defaultItemTemplate; context: { $implicit: item }\" />\n        </div>\n      }\n    </div>\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: [".kit-collapsed-list.inline .wrapper-inner{justify-content:flex-start}.kit-collapsed-list.end .wrapper-inner{justify-content:space-between}.kit-collapsed-list .wrapper-inner{position:relative;display:flex;gap:var(--kit-collapsed-list-gap, 20px);width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner.measure-container{position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;height:0;overflow:hidden}.kit-collapsed-list .wrapper-inner .element-container{display:flex;gap:var(--kit-collapsed-list-gap, 20px)}.kit-collapsed-list .wrapper-inner .element-container .item ::ng-deep .kit-button .k-button{height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown{max-width:100%;height:var(--kit-collapsed-list-height, 24px)}.kit-collapsed-list .wrapper-inner .collapsed-list-dropdown ::ng-deep .kit-dropdown.small .dropdown{height:var(--kit-collapsed-list-height, 24px)}\n"] }]
         }] });
 
 class KitScrollNavigationComponent {
@@ -6475,6 +6499,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
+const KIT_DATE_FORMAT = 'dd MMM yyyy';
+const KIT_DATETIME_FORMAT_LONG = 'dd MMM yyyy HH:mm:ss';
+
 class KitEmptySectionComponent {
     constructor() {
         this.text = '';
@@ -6492,6 +6519,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class KitGlobalSearchComponent {
+    documentClick(event) {
+        if (!this.popup()?.isPopupOpen) {
+            return;
+        }
+        if (!this.textbox().hostElement.nativeElement.contains(event.target)
+            && !this.popup()?.popupHTMLElement?.contains(event.target)) {
+            this.clearSearch();
+        }
+    }
+    constructor(router) {
+        this.router = router;
+        this.searchFn = input.required();
+        this.displayedLineItemsNumber = input(3);
+        this.textbox = viewChild.required(TextBoxComponent);
+        this.anchor = viewChild.required(TextBoxComponent, { read: ElementRef });
+        this.popup = viewChild('popup', { read: KitPopupComponent });
+        this.container = viewChild.required('container', { read: ViewContainerRef });
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitTextboxSize = KitTextboxSize;
+        this.kitSvgIconType = KitSvgIconType;
+        this.kitPillTheme = KitPillTheme;
+        this.kitButtonType = KitButtonType;
+        this.kitButtonKind = KitButtonKind;
+        this.dateFormat = KIT_DATE_FORMAT;
+        this.popupClass = 'kit-global-search-popup';
+        this.searchResults = signal([]);
+        this.value = '';
+    }
+    ngOnInit() {
+        this.textbox().valueChange.pipe(debounceTime(500), distinctUntilChanged(), filter((val) => val.length > 2)).subscribe(searchText => {
+            this.searchFn()(searchText).subscribe(searchRusult => {
+                this.openPopup();
+                this.searchResults.set(searchRusult.filter(Boolean));
+            });
+        });
+    }
+    clearSearch() {
+        this.value = '';
+        this.textbox().valueChange.emit('');
+        this.textbox().clearValue();
+        this.searchResults.set([]);
+        this.popup()?.close();
+    }
+    openPopup() {
+        if (!this.popup()?.isPopupOpen) {
+            this.popup()?.toggle({
+                appendTo: this.container(),
+            });
+            const popupHTMLElement = this.popup()?.popupHTMLElement;
+            const popupContent = popupHTMLElement?.querySelector(`.${this.popupClass}`);
+            if (popupContent) {
+                popupContent.style.maxHeight = `calc(100vh - ${popupHTMLElement?.style.top} - 40px)`;
+            }
+        }
+    }
+    navigate(link) {
+        if (!link) {
+            return;
+        }
+        this.router.navigate(link);
+        this.clearSearch();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGlobalSearchComponent, deps: [{ token: i1$7.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitGlobalSearchComponent, isStandalone: true, selector: "kit-global-search", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, displayedLineItemsNumber: { classPropertyName: "displayedLineItemsNumber", publicName: "displayedLineItemsNumber", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n     class=\"global-search\">\n  <kendo-textbox #textbox\n                 class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [size]=\"'none'\"\n                 [(ngModel)]=\"value\">\n    <ng-template kendoTextBoxPrefixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\"/>\n    </ng-template>\n    <ng-template kendoTextBoxSuffixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\" \n                    (click)=\"clearSearch()\"/>\n    </ng-template>\n  </kendo-textbox>\n\n  <kit-popup #popup\n             [popupClass]=\"popupClass\"\n             [anchor]=\"anchor()\"\n             [content]=\"content\"\n             [closeOnOutsideClick]=\"false\" />\n\n  <ng-template #content>\n    <div class=\"popup-content\">\n      <div class=\"search-results\">\n        @if (searchResults().length) {\n          @for (category of searchResults(); track category?.name) {\n            @if (category) {\n              <div class=\"category\">\n                <p class=\"header\"\n                   [class.empty]=\"!category.total\">\n                  <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                  <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                </p>\n\n                @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                  <div class=\"line-item\"\n                       [class.has-link]=\"lineItem.link\"\n                       (click)=\"navigate(lineItem.link)\">\n                    <div class=\"title\">\n                      <kit-truncate-text>{{ lineItem.title }}</kit-truncate-text>\n                    </div>\n                    <div class=\"subtitle\">\n                      <kit-truncate-text>{{ lineItem.subtitle }}</kit-truncate-text>\n                    </div>\n                    @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n                      <kit-route-path class=\"route\"\n                                      [containerMode]=\"lineItem.routePath?.containerMode\"\n                                      [destinationPort]=\"lineItem.routePath?.to\"\n                                      [originPort]=\"lineItem.routePath?.from\"\n                                      [type]=\"lineItem.routePath?.type\"/>\n                    }\n                    @if (lineItem.dates?.firstDate.value) {\n                      <div class=\"dates first-date\">\n                        <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                        <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n                          <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                        </kit-truncate-text>\n                      </div>\n                    }\n                    @if (lineItem.dates?.secondDate.value) {\n                      <div class=\"dates second-date\">\n                        <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                        <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n                          <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                        </kit-truncate-text>\n                      </div>\n                    }\n                  </div>\n                }\n                \n                @if (category.total > this.displayedLineItemsNumber()) {\n                  <kit-button [label]=\"'kit.globalSearch.showMore' | translate\"\n                              [type]=\"kitButtonType.GHOST\"\n                              [kind]=\"kitButtonKind.SMALL\"\n                              (clicked)=\"navigate(category.categoryLink)\"/>\n                }\n              </div>\n            }\n          }\n        } @else {\n          <kit-empty-section class=\"empty-section\"\n                            [text]=\"'kit.globalSearch.noData' | translate\"/>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{position:relative}:host .global-search{max-width:360px}:host .global-search:has(.textbox.k-focus){max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep:has(.textbox.k-focus) .kit-global-search-popup{display:inherit}:host ::ng-deep .k-animation-container{width:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{display:grid;grid-template-columns:minmax(50px,190px) minmax(50px,190px) minmax(200px,300px) minmax(65px,130px) minmax(65px,130px);justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .title,:host ::ng-deep .search-results .category .line-item .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .dates{display:flex;align-items:center;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .dates .date{font-size:14px;line-height:20px;font-weight:500}:host ::ng-deep .search-results .category .line-item .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$3.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGlobalSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-global-search', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        KitTextboxModule,
+                        KitSvgIconModule,
+                        KENDO_INPUTS,
+                        KitPopupComponent,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KitRoutePathComponent,
+                        KitButtonModule,
+                        KitTruncateTextComponent,
+                        DatePipe,
+                        TranslateModule,
+                        KitEmptySectionComponent,
+                    ], template: "<div #container\n     class=\"global-search\">\n  <kendo-textbox #textbox\n                 class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [size]=\"'none'\"\n                 [(ngModel)]=\"value\">\n    <ng-template kendoTextBoxPrefixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\"/>\n    </ng-template>\n    <ng-template kendoTextBoxSuffixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\" \n                    (click)=\"clearSearch()\"/>\n    </ng-template>\n  </kendo-textbox>\n\n  <kit-popup #popup\n             [popupClass]=\"popupClass\"\n             [anchor]=\"anchor()\"\n             [content]=\"content\"\n             [closeOnOutsideClick]=\"false\" />\n\n  <ng-template #content>\n    <div class=\"popup-content\">\n      <div class=\"search-results\">\n        @if (searchResults().length) {\n          @for (category of searchResults(); track category?.name) {\n            @if (category) {\n              <div class=\"category\">\n                <p class=\"header\"\n                   [class.empty]=\"!category.total\">\n                  <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                  <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                </p>\n\n                @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                  <div class=\"line-item\"\n                       [class.has-link]=\"lineItem.link\"\n                       (click)=\"navigate(lineItem.link)\">\n                    <div class=\"title\">\n                      <kit-truncate-text>{{ lineItem.title }}</kit-truncate-text>\n                    </div>\n                    <div class=\"subtitle\">\n                      <kit-truncate-text>{{ lineItem.subtitle }}</kit-truncate-text>\n                    </div>\n                    @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n                      <kit-route-path class=\"route\"\n                                      [containerMode]=\"lineItem.routePath?.containerMode\"\n                                      [destinationPort]=\"lineItem.routePath?.to\"\n                                      [originPort]=\"lineItem.routePath?.from\"\n                                      [type]=\"lineItem.routePath?.type\"/>\n                    }\n                    @if (lineItem.dates?.firstDate.value) {\n                      <div class=\"dates first-date\">\n                        <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                        <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n                          <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                        </kit-truncate-text>\n                      </div>\n                    }\n                    @if (lineItem.dates?.secondDate.value) {\n                      <div class=\"dates second-date\">\n                        <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                        <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n                          <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                        </kit-truncate-text>\n                      </div>\n                    }\n                  </div>\n                }\n                \n                @if (category.total > this.displayedLineItemsNumber()) {\n                  <kit-button [label]=\"'kit.globalSearch.showMore' | translate\"\n                              [type]=\"kitButtonType.GHOST\"\n                              [kind]=\"kitButtonKind.SMALL\"\n                              (clicked)=\"navigate(category.categoryLink)\"/>\n                }\n              </div>\n            }\n          }\n        } @else {\n          <kit-empty-section class=\"empty-section\"\n                            [text]=\"'kit.globalSearch.noData' | translate\"/>\n        }\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{position:relative}:host .global-search{max-width:360px}:host .global-search:has(.textbox.k-focus){max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep:has(.textbox.k-focus) .kit-global-search-popup{display:inherit}:host ::ng-deep .k-animation-container{width:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{display:grid;grid-template-columns:minmax(50px,190px) minmax(50px,190px) minmax(200px,300px) minmax(65px,130px) minmax(65px,130px);justify-content:space-between;gap:20px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .title,:host ::ng-deep .search-results .category .line-item .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .dates{display:flex;align-items:center;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .dates .date{font-size:14px;line-height:20px;font-weight:500}:host ::ng-deep .search-results .category .line-item .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .empty-section{container:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1$7.Router }], propDecorators: { documentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class FetchUserPermissions {
+    static { this.type = '[User] FetchPermissions'; }
+}
+
+const KIT_BASE_PATH = new InjectionToken('kitBasePath');
+
+class KitPermissionsApiService {
+    constructor(httpClient, basePath) {
+        this.httpClient = httpClient;
+        this.basePath = basePath;
+    }
+    getUserPermissions() {
+        const url = `${this.basePath}/user/permissions`;
+        return this.httpClient.get(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [KIT_BASE_PATH]
+                }] }] });
+
+const KIT_USER_PERMISSIONS_STATE_TOKEN = new StateToken('userPermissions');
+let KitUserPermissionsState = class KitUserPermissionsState {
+    constructor(kitPermissionsApiService) {
+        this.kitPermissionsApiService = kitPermissionsApiService;
+    }
+    fetchUserPermissions(ctx) {
+        return this.kitPermissionsApiService.getUserPermissions().pipe(tap(userPermissions => ctx.setState(userPermissions)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, deps: [{ token: KitPermissionsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState }); }
+};
+__decorate([
+    Action(FetchUserPermissions)
+], KitUserPermissionsState.prototype, "fetchUserPermissions", null);
+KitUserPermissionsState = __decorate([
+    State({
+        name: KIT_USER_PERMISSIONS_STATE_TOKEN,
+    })
+], KitUserPermissionsState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: KitPermissionsApiService }], propDecorators: { fetchUserPermissions: [] } });
+
+const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryName, categoryLink, itemMapper) => {
+    return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(map(state => state.permissions), tap(permissions => {
+        if (!permissions) {
+            store.dispatch(new FetchUserPermissions());
+        }
+    }), filter(Boolean), take(1), switchMap(permissions => {
+        if (!permissions.includes(requiredPermission)) {
+            return of(null);
+        }
+        return dataFetcher().pipe(map(data => ({
+            name: categoryName,
+            total: data.total,
+            categoryLink,
+            items: data.data.map(itemMapper),
+        })), catchError(() => of({
+            name: categoryName,
+            total: 0,
+            categoryLink,
+            items: [],
+        })));
+    }));
+};
+
 // eslint-disable-next-line
 class KitSortableComponent {
     constructor() {
@@ -6552,8 +6741,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ selector: 'kit-page-layout', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"page-layout\"\n     [class.sidebar-expanded]=\"!isMenuCollapsed() && hasMenuSelected()\"\n     [class.has-sidebar]=\"hasSidebar\"\n     [class.has-top-bar]=\"hasTopBar\">\n  <div class=\"sidebar\" #sidebarContainer>\n    <ng-content select=\"[sidebar]\" />\n  </div>\n\n  <div class=\"main\">\n    <div class=\"top-bar\" #topBarContainer>\n      <ng-content select=\"[topBar]\" />\n    </div>\n\n    <div class=\"content\">\n      <ng-content select=\"[content]\" />\n    </div>\n  </div>\n</div>\n", styles: [".page-layout{display:flex;min-height:100%}.page-layout.has-sidebar .sidebar{position:fixed;top:0;left:0;height:100%;min-width:var(--ui-kit-sidebar-collapsed-width);background:var(--ui-kit-color-navy);overflow-x:hidden;z-index:11}.page-layout.has-sidebar .main{margin-left:var(--ui-kit-sidebar-collapsed-width)}.page-layout.has-sidebar.sidebar-expanded .main{margin-left:var(--ui-kit-sidebar-expanded-width)}.page-layout .main{display:flex;flex-direction:column;flex:1;padding:0 var(--ui-kit-layout-gap);width:0;transition:.2s ease-in-out}.page-layout.has-top-bar .top-bar{position:sticky;top:0;left:0;width:100%;height:var(--ui-kit-header-height);background:var(--ui-kit-color-grey-13);z-index:10}.page-layout .content{padding:25px 0;flex:1}.page-layout .content:has(.kit-breadcrumbs){padding-top:10px}.page-layout .content:has(.iframe-wrapper){padding:0}\n"] }]
         }], ctorParameters: () => [{ type: KitNavigationMenuService }] });
 
-const KIT_BASE_PATH = new InjectionToken('kitBasePath');
-
 const kitTranslations = {
     en: {
         kit: {
@@ -6612,6 +6799,11 @@ const kitTranslations = {
                 searchButtonLabel: 'Search',
                 closeButtonLabel: 'Close',
             },
+            globalSearch: {
+                placeholder: 'Global Search',
+                showMore: 'Show More',
+                noData: 'No data found',
+            },
             columns: {
                 title: 'Columns',
                 cancel: 'Cancel',
@@ -6623,6 +6815,10 @@ const kitTranslations = {
             grid: {
                 pagerItemsText: 'items',
             },
+            routePath: {
+                tbc: 'TBC',
+                by: 'by',
+            },
         },
     },
 };
@@ -7345,7 +7541,7 @@ class KitGridViewsManagerComponent extends DialogContentBase {
         this.hasUnsavedChanges.set(JSON.stringify(usedConfig) !== JSON.stringify(updatedViews));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGridViewsManagerComponent, deps: [{ token: i1$d.Store }, { token: i1$8.DialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon class=\"item-move\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (!isSystemView(item)) {\n          <kit-svg-icon class=\"item-remove\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon class=\"item-toggle\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: KitGridViewsManagerComponent, isStandalone: true, selector: "kit-grid-views-manager", inputs: { configGroup: { classPropertyName: "configGroup", publicName: "configGroup", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon class=\"item-move\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (!isSystemView(item)) {\n          <kit-svg-icon class=\"item-remove\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon class=\"item-toggle\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitSortableComponent, selector: "kit-sortable", inputs: ["items", "columnCount", "itemClass", "activeItemClass", "zone", "emptyItemClass"], outputs: ["onDragEnd"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$a.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitDialogActionsComponent, selector: "kit-dialog-actions" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitGridViewsManagerComponent, decorators: [{
             type: Component,
@@ -7358,7 +7554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         KitDialogActionsComponent,
                         TitleCasePipe,
                         KitTruncateTextComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon class=\"item-move\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (!isSystemView(item)) {\n          <kit-svg-icon class=\"item-remove\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon class=\"item-toggle\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-views-manager\">\n  <kit-sortable itemClass=\"item\"\n                activeItemClass=\"item active\"\n                [columnCount]=\"2\"\n                [items]=\"items()\"\n                (onDragEnd)=\"checkChanges()\">\n    <ng-template let-item>\n      <div class=\"item-wrapper\"\n           [class.hidden]=\"item.hidden\"\n           [ngClass]=\"[item.type]\">\n        <kit-svg-icon class=\"item-move\"\n                      [icon]=\"kitSvgIcon.MENU\"\n        ></kit-svg-icon>\n        <div class=\"item-label\">\n          <kit-truncate-text>{{ item.title | titlecase }}</kit-truncate-text>\n        </div>\n        @if (!isSystemView(item)) {\n          <kit-svg-icon class=\"item-remove\"\n                        [icon]=\"kitSvgIcon.CIRCLE_MINUS\"\n                        (click)=\"onViewRemove(item)\"\n          ></kit-svg-icon>\n          <kit-svg-icon class=\"item-toggle\"\n                        [icon]=\"item.hidden && kitSvgIcon.EYE_CLOSE || kitSvgIcon.EYE_OPEN\"\n                        (click)=\"onColumnVisibilityChange(item.hidden, item)\"\n          ></kit-svg-icon>\n        }\n      </div>\n    </ng-template>\n  </kit-sortable>\n\n  <kit-dialog-actions>\n    <kit-button [label]=\"'kit.views.cancel' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [type]=\"kitButtonType.GHOST\"\n                (clicked)=\"close()\"\n    ></kit-button>\n    <kit-button [label]=\"'kit.views.apply' | translate\"\n                [kind]=\"kitButtonKind.MEDIUM\"\n                [disabled]=\"!hasUnsavedChanges()\"\n                (clicked)=\"applyChanges()\"\n    ></kit-button>\n  </kit-dialog-actions>\n</div>\n", styles: [".kit-grid-views-manager{width:452px}.kit-grid-views-manager ::ng-deep .kit-sortable{margin:0 -12px;column-gap:24px;column-rule:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views-manager ::ng-deep .item{margin-bottom:8px;padding:8px 12px;border-radius:8px;box-sizing:border-box;cursor:pointer}.kit-grid-views-manager ::ng-deep .item .item-label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.kit-grid-views-manager ::ng-deep .item .system .item-label{color:var(--ui-kit-color-blue)}.kit-grid-views-manager ::ng-deep .item .user .item-label{color:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-wrapper{display:flex;align-items:center;gap:8px}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-label{color:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item-wrapper.hidden .item-toggle{fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item:hover .item-move{fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item-label{flex:1;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:22px}.kit-grid-views-manager ::ng-deep .item .item-move{margin-right:4px;width:12px;height:12px;fill:var(--ui-kit-color-grey-12)}.kit-grid-views-manager ::ng-deep .item .item-toggle{width:18px;height:18px;fill:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item .item-remove{width:14px;height:14px;stroke:var(--ui-kit-color-grey-12);fill:none}.kit-grid-views-manager ::ng-deep .item .item-remove:hover{stroke:var(--ui-kit-color-main)}.kit-grid-views-manager ::ng-deep .item.active{box-shadow:4px 4px 8px #0003;background:var(--ui-kit-color-white)}.kit-grid-views-manager ::ng-deep .item.active .item-move{fill:var(--ui-kit-color-main)}\n"] }]
         }], ctorParameters: () => [{ type: i1$d.Store }, { type: i1$8.DialogRef }] });
 
 class KitGridViewsComponent {
@@ -8363,9 +8559,6 @@ const gridExportOptions = [
 
 const KIT_GRID_CELL_DATE_FORMAT_CONFIG = new InjectionToken('KIT_GRID_CELL_DATE_FORMAT_CONFIG');
 
-const KIT_DATE_FORMAT = 'dd MMM yyyy';
-const KIT_DATETIME_FORMAT_LONG = 'dd MMM yyyy HH:mm:ss';
-
 class KitGridCellService {
     constructor(translateService, decimalPipe, datePipe, dateFormatConfig) {
         this.translateService = translateService;
@@ -8898,55 +9091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: KitUserApiService }], propDecorators: { fetchUserApplications: [] } });
 
-class FetchUserPermissions {
-    static { this.type = '[User] FetchPermissions'; }
-}
-
-class KitPermissionsApiService {
-    constructor(httpClient, basePath) {
-        this.httpClient = httpClient;
-        this.basePath = basePath;
-    }
-    getUserPermissions() {
-        const url = `${this.basePath}/user/permissions`;
-        return this.httpClient.get(url);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, deps: [{ token: i1$c.HttpClient }, { token: KIT_BASE_PATH }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitPermissionsApiService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$c.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KIT_BASE_PATH]
-                }] }] });
-
-const KIT_USER_PERMISSIONS_STATE_TOKEN = new StateToken('userPermissions');
-let KitUserPermissionsState = class KitUserPermissionsState {
-    constructor(kitPermissionsApiService) {
-        this.kitPermissionsApiService = kitPermissionsApiService;
-    }
-    fetchUserPermissions(ctx) {
-        return this.kitPermissionsApiService.getUserPermissions().pipe(tap(userPermissions => ctx.setState(userPermissions)));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, deps: [{ token: KitPermissionsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState }); }
-};
-__decorate([
-    Action(FetchUserPermissions)
-], KitUserPermissionsState.prototype, "fetchUserPermissions", null);
-KitUserPermissionsState = __decorate([
-    State({
-        name: KIT_USER_PERMISSIONS_STATE_TOKEN,
-    })
-], KitUserPermissionsState);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitUserPermissionsState, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: KitPermissionsApiService }], propDecorators: { fetchUserPermissions: [] } });
-
 class KitMenuBuilderService {
     constructor(translateService) {
         this.translateService = translateService;
@@ -9085,14 +9229,14 @@ class KitTopBarComponent {
         this.kitNavigationMenuService.setCollapsedState(!collapsed);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTopBarComponent, deps: [{ token: KitNavigationMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KitTopBarComponent, isStandalone: true, selector: "kit-top-bar", inputs: { userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-top-bar\">\n  <kit-button [type]=\"kitButtonType.GHOST\"\n              [icon]=\"kitSvgIcon.MENU\"\n              (clicked)=\"toggleSidebar(collapsed())\"\n  ></kit-button>\n\n  <div class=\"kit-top-bar-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <kit-top-bar-user [menuItems]=\"userMenuItems()\"\n  ></kit-top-bar-user>\n</div>\n", styles: [".kit-top-bar{display:flex;align-items:center;gap:40px;height:100%;border-bottom:1px solid var(--color-grey-6);box-sizing:border-box}.kit-top-bar-content{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTopBarUserComponent, selector: "kit-top-bar-user", inputs: ["menuItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: KitTopBarComponent, isStandalone: true, selector: "kit-top-bar", inputs: { userMenuItems: { classPropertyName: "userMenuItems", publicName: "userMenuItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-top-bar\">\n  <kit-button [type]=\"kitButtonType.GHOST\"\n              [icon]=\"kitSvgIcon.MENU\"\n              (clicked)=\"toggleSidebar(collapsed())\"\n  ></kit-button>\n\n  <div class=\"kit-top-bar-content\">\n    <div class=\"kit-global-search\">\n      <ng-content select=\"[globalSearch]\"></ng-content>\n    </div>\n    <ng-content select=\"[topBarActions]\"></ng-content>\n  </div>\n\n  <kit-top-bar-user [menuItems]=\"userMenuItems()\"\n  ></kit-top-bar-user>\n</div>\n", styles: [".kit-top-bar{display:flex;align-items:center;gap:40px;height:100%;border-bottom:1px solid var(--color-grey-6);box-sizing:border-box}.kit-top-bar-content{display:flex;align-items:center;justify-content:space-between;flex:1}.kit-top-bar-content .kit-global-search{flex:1;margin-right:18px}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTopBarUserComponent, selector: "kit-top-bar-user", inputs: ["menuItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: KitTopBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-top-bar', imports: [
                         KitButtonModule,
                         KitTopBarUserComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-top-bar\">\n  <kit-button [type]=\"kitButtonType.GHOST\"\n              [icon]=\"kitSvgIcon.MENU\"\n              (clicked)=\"toggleSidebar(collapsed())\"\n  ></kit-button>\n\n  <div class=\"kit-top-bar-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <kit-top-bar-user [menuItems]=\"userMenuItems()\"\n  ></kit-top-bar-user>\n</div>\n", styles: [".kit-top-bar{display:flex;align-items:center;gap:40px;height:100%;border-bottom:1px solid var(--color-grey-6);box-sizing:border-box}.kit-top-bar-content{flex:1}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-top-bar\">\n  <kit-button [type]=\"kitButtonType.GHOST\"\n              [icon]=\"kitSvgIcon.MENU\"\n              (clicked)=\"toggleSidebar(collapsed())\"\n  ></kit-button>\n\n  <div class=\"kit-top-bar-content\">\n    <div class=\"kit-global-search\">\n      <ng-content select=\"[globalSearch]\"></ng-content>\n    </div>\n    <ng-content select=\"[topBarActions]\"></ng-content>\n  </div>\n\n  <kit-top-bar-user [menuItems]=\"userMenuItems()\"\n  ></kit-top-bar-user>\n</div>\n", styles: [".kit-top-bar{display:flex;align-items:center;gap:40px;height:100%;border-bottom:1px solid var(--color-grey-6);box-sizing:border-box}.kit-top-bar-content{display:flex;align-items:center;justify-content:space-between;flex:1}.kit-top-bar-content .kit-global-search{flex:1;margin-right:18px}\n"] }]
         }], ctorParameters: () => [{ type: KitNavigationMenuService }] });
 
 class KitSchedulerToolbarComponent {
@@ -9223,5 +9367,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchUserPermissions, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_STATE_TOKEN, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDatepickerSize, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitSchedulerComponent, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, KitUserApplicationsState, KitUserPermissionsState, KitUserState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchUserPermissions, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_STATE_TOKEN, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDatepickerSize, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGlobalSearchComponent, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitSchedulerComponent, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, KitUserApplicationsState, KitUserPermissionsState, KitUserState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, mapGlobalSearchResult };
 //# sourceMappingURL=indigina-ui-kit.mjs.map