@indigina/ui-kit 1.1.602 → 1.1.604

package/fesm2022/indigina-ui-kit.mjs

@@ -9207,14 +9207,33 @@ class KitGlobalSearchComponent {
         this.searchResults = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
         this.searchValue = '';
-        this.showPropmts = signal(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showPropmts" }] : /* istanbul ignore next */ []));
-        this.userPermissions$ = this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN);
+        this.showPrompts = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPrompts" }] : /* istanbul ignore next */ []));
+        this.userPermissions = this.store.selectSignal(KIT_USER_PERMISSIONS_STATE_TOKEN);
         this.selectedFilters$ = new BehaviorSubject([]);
         this.isLoading = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.searchResultsContainerWidth = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchResultsContainerWidth" }] : /* istanbul ignore next */ []));
         this.expandedFilters = new Set();
         this.isClearing = false;
+        this.mainContentColumnOrder = [
+            'title',
+            'status',
+            'subtitle',
+            'routePath',
+            'firstDate',
+            'secondDate',
+        ];
+        this.columnTemplates = {
+            title: 'minmax(170px, max-content)',
+            status: 'minmax(115px, max-content)',
+            subtitle: 'minmax(70px, 1fr)',
+            routePath: 'minmax(99px, 2fr)',
+            firstDate: 'minmax(50px, 1fr)',
+            secondDate: 'minmax(50px, 1fr)',
+            additionalContent: 'minmax(90px, max-content)',
+        };
     }
     documentClick(event) {
         if (!this.popup()?.isPopupOpen) {
@@ -9225,6 +9244,12 @@ class KitGlobalSearchComponent {
             this.clearSearch();
         }
     }
+    onWindowResize() {
+        if (!this.popup()?.isPopupOpen) {
+            return;
+        }
+        this.updateSearchResultsContainerWidth();
+    }
     ngOnInit() {
         combineLatest([
             this.textbox().valueChange.pipe(debounceTime(500), distinctUntilChanged(), map((text) => text.trim())),
@@ -9232,10 +9257,11 @@ class KitGlobalSearchComponent {
         ]).pipe(filter(([text, _,]) => text.length > 2 && !this.isClearing)).subscribe(([text, filters,]) => {
             this.searchValue = text;
             this.isLoading.set(true);
-            this.showPropmts.set(false);
+            this.showPrompts.set(false);
             this.searchFn()(text, filters).subscribe(searchResult => {
                 this.searchResults.set(searchResult.filter(Boolean));
                 this.isLoading.set(false);
+                this.updateSearchResultsContainerWidth();
             });
         });
     }
@@ -9254,7 +9280,7 @@ class KitGlobalSearchComponent {
         this.textbox().valueChange.emit('');
         this.textbox().clearValue();
         this.searchResults.set([]);
-        this.showPropmts.set(true);
+        this.showPrompts.set(true);
         this.selectedFilters$.next([]);
         this.popup()?.close();
         requestAnimationFrame(() => {
@@ -9271,6 +9297,7 @@ class KitGlobalSearchComponent {
             if (popupContent) {
                 popupContent.style.maxHeight = `calc(100vh - ${popupHTMLElement?.style.top} - 40px)`;
             }
+            this.updateSearchResultsContainerWidth();
         }
     }
     navigate(routeConfig) {
@@ -9344,9 +9371,62 @@ class KitGlobalSearchComponent {
     hasPermissionToShowPrompt(userPermissions, promptPermissions) {
         return kitHasPermission(promptPermissions, userPermissions);
     }
+    getVisiblePrompts(userPermissions) {
+        return this.prompts().filter(prompt => this.hasPermissionToShowPrompt(userPermissions, prompt.permissions));
+    }
+    isColumnVisible(category, key) {
+        const config = this.getCategoryColumnConfig(category, key);
+        const hideBelowContainerWidthPx = config?.hideBelowContainerWidthPx;
+        if (!hideBelowContainerWidthPx) {
+            return true;
+        }
+        const width = this.searchResultsContainerWidth();
+        if (!width) {
+            return true;
+        }
+        return width >= hideBelowContainerWidthPx;
+    }
+    getMainContentGridTemplate(category, lineItem) {
+        if (!category.layoutConfig) {
+            return null;
+        }
+        const visibleColumns = this.mainContentColumnOrder.filter(key => this.isMainContentColumnVisible(category, lineItem, key));
+        const gridTemplateColumns = visibleColumns.map(key => this.columnTemplates[key]).filter(Boolean);
+        return gridTemplateColumns.length ? gridTemplateColumns.join(' ') : this.columnTemplates.title;
+    }
     findFilter(filterField) {
         return this.selectedFilters.find(selectedFilter => selectedFilter.field === filterField) || null;
     }
+    getCategoryColumnConfig(category, key) {
+        return category.layoutConfig?.columns.find(column => column.key === key) || null;
+    }
+    isMainContentColumnVisible(category, lineItem, key) {
+        if (!this.mainContentColumnOrder.includes(key)) {
+            return false;
+        }
+        if (key === 'routePath') {
+            return !!lineItem.routePath && !!(lineItem.routePath.from || lineItem.routePath.to);
+        }
+        if (!this.isColumnVisible(category, key)) {
+            return false;
+        }
+        if (key === 'status') {
+            return !!lineItem.status;
+        }
+        if (key === 'firstDate') {
+            return !!lineItem.dates?.firstDate?.value;
+        }
+        if (key === 'secondDate') {
+            return !!lineItem.dates?.secondDate?.value;
+        }
+        return true;
+    }
+    updateSearchResultsContainerWidth() {
+        const popupHTMLElement = this.popup()?.popupHTMLElement;
+        const searchResultsContainer = popupHTMLElement?.querySelector('.search-results');
+        const width = searchResultsContainer?.getBoundingClientRect().width || 0;
+        this.searchResultsContainerWidth.set(width);
+    }
     isIsoLikeDateString(value) {
         if (value.length < 10 || value[4] !== '-' || value[7] !== '-') {
             return false;
@@ -9354,9 +9434,9 @@ class KitGlobalSearchComponent {
         return !Number.isNaN(Date.parse(value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGlobalSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitGlobalSearchComponent, isStandalone: true, selector: "kit-global-search", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, displayedLineItemsNumber: { classPropertyName: "displayedLineItemsNumber", publicName: "displayedLineItemsNumber", isSignal: true, isRequired: false, transformFunction: null }, prompts: { classPropertyName: "prompts", publicName: "prompts", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitGlobalSearchComponent, isStandalone: true, selector: "kit-global-search", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, displayedLineItemsNumber: { classPropertyName: "displayedLineItemsNumber", publicName: "displayedLineItemsNumber", isSignal: true, isRequired: false, transformFunction: null }, prompts: { classPropertyName: "prompts", publicName: "prompts", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "documentClick($event)", "window:resize": "onWindowResize()" } }, providers: [
             DatePipe,
-        ], viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [(ngModel)]=\"searchValue\"\n                 (click)=\"openPopup()\">\n    <ng-template kendoTextBoxPrefixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n    </ng-template>\n    <ng-template kendoTextBoxSuffixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n                    (click)=\"clearSearch()\" />\n    </ng-template>\n  </kendo-textbox>\n\n  <kit-popup #popup\n             [popupClass]=\"popupClass\"\n             [anchor]=\"anchor()\"\n             [content]=\"content\"\n             [closeOnOutsideClick]=\"false\" />\n\n  <ng-template #content>\n    @if (userPermissions$ | async; as userPermissions) {\n      <div class=\"popup-content\">\n        @if (showPropmts()) {\n          <div class=\"prompts\">\n            @for (prompt of prompts(); track prompt) {\n              @if (hasPermissionToShowPrompt(userPermissions, prompt.permissions)) {\n                <kit-pill [theme]=\"kitPillTheme.MAIN\"\n                          [selectable]=\"true\"\n                          (clicked)=\"onSelectPrompt(prompt)\">\n                  {{ prompt.label }}\n                </kit-pill>\n              }\n            }\n          </div>\n        } @else {\n          @if (isLoading()) {\n            <div class=\"search-results\">\n              <kendo-loader class=\"loader\" />\n            </div>\n          } @else if (searchResults().length) {\n            <div class=\"search-results\">\n              @for (category of searchResults(); track category?.name) {\n                @if (category) {\n                  <div class=\"category\">\n                    <div class=\"header\"\n                         [class.empty]=\"!category.total\">\n                      <div class=\"header-main\">\n                        <kit-svg-icon class=\"header-main-icon\"\n                                      [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n                        <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                      </div>\n\n                      @if (category.total > this.displayedLineItemsNumber()) {\n                        <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n                                    [type]=\"kitButtonType.GHOST\"\n                                    [kind]=\"kitButtonKind.SMALL\"\n                                    (clicked)=\"navigate(category.routeConfig)\" />\n                      }\n                    </div>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.routeConfig\"\n                           (click)=\"navigate(lineItem.routeConfig)\">\n                        <div class=\"main-content\">\n                          <div class=\"title\">\n                            <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                          </div>\n                          @if (lineItem.status) {\n                            <div>\n                              <kit-pill class=\"status\"\n                                        [theme]=\"kitPillTheme.MAIN\">\n                                {{ lineItem.status }}\n                              </kit-pill>\n                            </div>\n                          }\n                          <div class=\"subtitle\"\n                               kitHideBelowWidthClass=\"hide\"\n                               [kitHideBelowWidth]=\"61\">\n                            <kit-truncate-text>\n                              <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                            </kit-truncate-text>\n                          </div>\n\n                          @if (lineItem.routePath; as routePath) {\n                            @if (routePath.from || routePath.to) {\n                              <kit-route-path class=\"route\"\n                                              kitHideBelowWidthClass=\"hide\"\n                                              [kitHideBelowWidth]=\"132\"\n                                              [containerMode]=\"routePath.containerMode ?? ''\"\n                                              [destinationPort]=\"routePath.to ?? ''\"\n                                              [originPort]=\"routePath.from ?? ''\"\n                                              [type]=\"routePath.type ?? ''\" />\n                            }\n                          }\n                          @if (lineItem.dates; as dates) {\n                            @if (dates.firstDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper first-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.firstDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                            @if (dates.secondDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper second-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.secondDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        </div>\n\n                        <div class=\"additional-content\">\n                          @for (item of lineItem.additionalContent; track item.key) {\n                            <div>\n                              <span class=\"label\">{{ item.translateKey | translate }} </span>\n                              <span class=\"value\"\n                                    [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\" />\n          }\n\n          @if (filters().length) {\n            <div class=\"filters\">\n              @for (filter of filters(); track $index) {\n                <div>\n                  <p class=\"label\">{{ filter.label }}</p>\n                  @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n                    <kit-pill @heightExpandCollapseAnimation\n                              class=\"filter-value\"\n                              [theme]=\"kitPillTheme.MAIN\"\n                              [selectable]=\"true\"\n                              [selected]=\"isFilterSelected(value)\"\n                              (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n                      {{ value.title | translate }}\n                    </kit-pill>\n                  }\n                  @if (filter.values.length > 3) {\n                    <kit-button class=\"toggle-btn\"\n                                [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n                                [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n                                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                                [kind]=\"kitButtonKind.SMALL\"\n                                [type]=\"kitButtonType.GHOST\"\n                                (clicked)=\"toggleFilterExpanded($index)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;margin-top:10px;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:0 8px;height:40px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-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 .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$4.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$4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i1$b.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text", "size"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: KitHideBelowWidthDirective, selector: "[kitHideBelowWidth]", inputs: ["kitHideBelowWidth", "kitHideBelowWidthClass"] }, { kind: "pipe", type: i1$7.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$7.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], animations: [
+        ], viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [(ngModel)]=\"searchValue\"\n                 (click)=\"openPopup()\">\n    <ng-template kendoTextBoxPrefixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n    </ng-template>\n    <ng-template kendoTextBoxSuffixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n                    (click)=\"clearSearch()\" />\n    </ng-template>\n  </kendo-textbox>\n\n  <kit-popup #popup\n             [popupClass]=\"popupClass\"\n             [anchor]=\"anchor()\"\n             [content]=\"content\"\n             [closeOnOutsideClick]=\"false\" />\n\n  <ng-template #content>\n    @if (userPermissions(); as userPermissions) {\n      <div class=\"popup-content\">\n        @if (showPrompts()) {\n          @if (getVisiblePrompts(userPermissions); as visiblePrompts) {\n            @if (visiblePrompts.length) {\n              <div class=\"prompts\">\n                @for (prompt of visiblePrompts; track prompt) {\n                  <kit-pill [theme]=\"kitPillTheme.MAIN\"\n                            [selectable]=\"true\"\n                            (clicked)=\"onSelectPrompt(prompt)\">\n                    {{ prompt.label }}\n                  </kit-pill>\n                }\n              </div>\n            }\n          }\n        } @else {\n          @if (isLoading()) {\n            <div class=\"search-results\">\n              <kendo-loader class=\"loader\" />\n            </div>\n          } @else if (searchResults().length) {\n            <div class=\"search-results\">\n              @for (category of searchResults(); track category?.name) {\n                @if (category) {\n                  <div class=\"category\">\n                    <div class=\"header\"\n                         [class.empty]=\"!category.total\">\n                      <div class=\"header-main\">\n                        <kit-svg-icon class=\"header-main-icon\"\n                                      [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n                        <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                      </div>\n\n                      @if (category.total > this.displayedLineItemsNumber()) {\n                        <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n                                    [type]=\"kitButtonType.GHOST\"\n                                    [kind]=\"kitButtonKind.SMALL\"\n                                    (clicked)=\"navigate(category.routeConfig)\" />\n                      }\n                    </div>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.routeConfig\"\n                           (click)=\"navigate(lineItem.routeConfig)\">\n                        <div class=\"main-content\"\n                             [style.grid-template-columns]=\"getMainContentGridTemplate(category, lineItem)\">\n                          @if (isColumnVisible(category, 'title')) {\n                            <div class=\"title\">\n                              <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                            </div>\n                          }\n                          @if (lineItem.status && isColumnVisible(category, 'status')) {\n                            <div>\n                              <kit-pill class=\"status\"\n                                        [theme]=\"kitPillTheme.MAIN\">\n                                {{ lineItem.status }}\n                              </kit-pill>\n                            </div>\n                          }\n                          @if (isColumnVisible(category, 'subtitle')) {\n                            <div class=\"subtitle\">\n                              <kit-truncate-text>\n                                <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                              </kit-truncate-text>\n                            </div>\n                          }\n\n                          @if (lineItem.routePath; as routePath) {\n                            @if (routePath.from || routePath.to) {\n                              <kit-route-path class=\"route\"\n                                              kitHideBelowWidthClass=\"hide\"\n                                              [kitHideBelowWidth]=\"132\"\n                                              [containerMode]=\"routePath.containerMode ?? ''\"\n                                              [destinationPort]=\"routePath.to ?? ''\"\n                                              [originPort]=\"routePath.from ?? ''\"\n                                              [type]=\"routePath.type ?? ''\" />\n                            }\n                          }\n                          @if (lineItem.dates; as dates) {\n                            @if (isColumnVisible(category, 'firstDate') && dates.firstDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper first-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.firstDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                            @if (isColumnVisible(category, 'secondDate') && dates.secondDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper second-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.secondDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        </div>\n\n                        @if (isColumnVisible(category, 'additionalContent')) {\n                          <div class=\"additional-content\">\n                            @for (item of lineItem.additionalContent; track item.key) {\n                              <div>\n                                <span class=\"label\">{{ item.translateKey | translate }} </span>\n                                <span class=\"value\"\n                                      [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\" />\n          }\n\n          @if (filters().length) {\n            <div class=\"filters\">\n              @for (filter of filters(); track $index) {\n                <div>\n                  <p class=\"label\">{{ filter.label }}</p>\n                  @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n                    <kit-pill @heightExpandCollapseAnimation\n                              class=\"filter-value\"\n                              [theme]=\"kitPillTheme.MAIN\"\n                              [selectable]=\"true\"\n                              [selected]=\"isFilterSelected(value)\"\n                              (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n                      {{ value.title | translate }}\n                    </kit-pill>\n                  }\n                  @if (filter.values.length > 3) {\n                    <kit-button class=\"toggle-btn\"\n                                [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n                                [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n                                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                                [kind]=\"kitButtonKind.SMALL\"\n                                [type]=\"kitButtonType.GHOST\"\n                                (clicked)=\"toggleFilterExpanded($index)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;margin-top:10px;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:0 8px;height:40px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-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 .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$4.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$4.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: i1$b.LoaderComponent, selector: "kendo-loader", inputs: ["type", "themeColor", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text", "size"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "directive", type: KitHideBelowWidthDirective, selector: "[kitHideBelowWidth]", inputs: ["kitHideBelowWidth", "kitHideBelowWidthClass"] }, { kind: "pipe", type: i1$7.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], animations: [
             expandCollapseAnimation('height'),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -9383,13 +9463,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         expandCollapseAnimation('height'),
                     ], providers: [
                         DatePipe,
-                    ], template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [(ngModel)]=\"searchValue\"\n                 (click)=\"openPopup()\">\n    <ng-template kendoTextBoxPrefixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n    </ng-template>\n    <ng-template kendoTextBoxSuffixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n                    (click)=\"clearSearch()\" />\n    </ng-template>\n  </kendo-textbox>\n\n  <kit-popup #popup\n             [popupClass]=\"popupClass\"\n             [anchor]=\"anchor()\"\n             [content]=\"content\"\n             [closeOnOutsideClick]=\"false\" />\n\n  <ng-template #content>\n    @if (userPermissions$ | async; as userPermissions) {\n      <div class=\"popup-content\">\n        @if (showPropmts()) {\n          <div class=\"prompts\">\n            @for (prompt of prompts(); track prompt) {\n              @if (hasPermissionToShowPrompt(userPermissions, prompt.permissions)) {\n                <kit-pill [theme]=\"kitPillTheme.MAIN\"\n                          [selectable]=\"true\"\n                          (clicked)=\"onSelectPrompt(prompt)\">\n                  {{ prompt.label }}\n                </kit-pill>\n              }\n            }\n          </div>\n        } @else {\n          @if (isLoading()) {\n            <div class=\"search-results\">\n              <kendo-loader class=\"loader\" />\n            </div>\n          } @else if (searchResults().length) {\n            <div class=\"search-results\">\n              @for (category of searchResults(); track category?.name) {\n                @if (category) {\n                  <div class=\"category\">\n                    <div class=\"header\"\n                         [class.empty]=\"!category.total\">\n                      <div class=\"header-main\">\n                        <kit-svg-icon class=\"header-main-icon\"\n                                      [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n                        <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                      </div>\n\n                      @if (category.total > this.displayedLineItemsNumber()) {\n                        <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n                                    [type]=\"kitButtonType.GHOST\"\n                                    [kind]=\"kitButtonKind.SMALL\"\n                                    (clicked)=\"navigate(category.routeConfig)\" />\n                      }\n                    </div>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.routeConfig\"\n                           (click)=\"navigate(lineItem.routeConfig)\">\n                        <div class=\"main-content\">\n                          <div class=\"title\">\n                            <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                          </div>\n                          @if (lineItem.status) {\n                            <div>\n                              <kit-pill class=\"status\"\n                                        [theme]=\"kitPillTheme.MAIN\">\n                                {{ lineItem.status }}\n                              </kit-pill>\n                            </div>\n                          }\n                          <div class=\"subtitle\"\n                               kitHideBelowWidthClass=\"hide\"\n                               [kitHideBelowWidth]=\"61\">\n                            <kit-truncate-text>\n                              <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                            </kit-truncate-text>\n                          </div>\n\n                          @if (lineItem.routePath; as routePath) {\n                            @if (routePath.from || routePath.to) {\n                              <kit-route-path class=\"route\"\n                                              kitHideBelowWidthClass=\"hide\"\n                                              [kitHideBelowWidth]=\"132\"\n                                              [containerMode]=\"routePath.containerMode ?? ''\"\n                                              [destinationPort]=\"routePath.to ?? ''\"\n                                              [originPort]=\"routePath.from ?? ''\"\n                                              [type]=\"routePath.type ?? ''\" />\n                            }\n                          }\n                          @if (lineItem.dates; as dates) {\n                            @if (dates.firstDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper first-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.firstDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                            @if (dates.secondDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper second-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.secondDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        </div>\n\n                        <div class=\"additional-content\">\n                          @for (item of lineItem.additionalContent; track item.key) {\n                            <div>\n                              <span class=\"label\">{{ item.translateKey | translate }} </span>\n                              <span class=\"value\"\n                                    [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\" />\n          }\n\n          @if (filters().length) {\n            <div class=\"filters\">\n              @for (filter of filters(); track $index) {\n                <div>\n                  <p class=\"label\">{{ filter.label }}</p>\n                  @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n                    <kit-pill @heightExpandCollapseAnimation\n                              class=\"filter-value\"\n                              [theme]=\"kitPillTheme.MAIN\"\n                              [selectable]=\"true\"\n                              [selected]=\"isFilterSelected(value)\"\n                              (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n                      {{ value.title | translate }}\n                    </kit-pill>\n                  }\n                  @if (filter.values.length > 3) {\n                    <kit-button class=\"toggle-btn\"\n                                [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n                                [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n                                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                                [kind]=\"kitButtonKind.SMALL\"\n                                [type]=\"kitButtonType.GHOST\"\n                                (clicked)=\"toggleFilterExpanded($index)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;margin-top:10px;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:0 8px;height:40px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-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 .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"] }]
+                    ], template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [(ngModel)]=\"searchValue\"\n                 (click)=\"openPopup()\">\n    <ng-template kendoTextBoxPrefixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.SEARCH\" />\n    </ng-template>\n    <ng-template kendoTextBoxSuffixTemplate>\n      <kit-svg-icon [icon]=\"kitSvgIcon.CIRCLE_CROSS_THIN\"\n                    (click)=\"clearSearch()\" />\n    </ng-template>\n  </kendo-textbox>\n\n  <kit-popup #popup\n             [popupClass]=\"popupClass\"\n             [anchor]=\"anchor()\"\n             [content]=\"content\"\n             [closeOnOutsideClick]=\"false\" />\n\n  <ng-template #content>\n    @if (userPermissions(); as userPermissions) {\n      <div class=\"popup-content\">\n        @if (showPrompts()) {\n          @if (getVisiblePrompts(userPermissions); as visiblePrompts) {\n            @if (visiblePrompts.length) {\n              <div class=\"prompts\">\n                @for (prompt of visiblePrompts; track prompt) {\n                  <kit-pill [theme]=\"kitPillTheme.MAIN\"\n                            [selectable]=\"true\"\n                            (clicked)=\"onSelectPrompt(prompt)\">\n                    {{ prompt.label }}\n                  </kit-pill>\n                }\n              </div>\n            }\n          }\n        } @else {\n          @if (isLoading()) {\n            <div class=\"search-results\">\n              <kendo-loader class=\"loader\" />\n            </div>\n          } @else if (searchResults().length) {\n            <div class=\"search-results\">\n              @for (category of searchResults(); track category?.name) {\n                @if (category) {\n                  <div class=\"category\">\n                    <div class=\"header\"\n                         [class.empty]=\"!category.total\">\n                      <div class=\"header-main\">\n                        <kit-svg-icon class=\"header-main-icon\"\n                                      [icon]=\"kitSvgIcon.CHECK_STICKER\" />\n                        <span class=\"header-main-title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                      </div>\n\n                      @if (category.total > this.displayedLineItemsNumber()) {\n                        <kit-button [label]=\"'kit.globalSearch.showResults' | translate\"\n                                    [type]=\"kitButtonType.GHOST\"\n                                    [kind]=\"kitButtonKind.SMALL\"\n                                    (clicked)=\"navigate(category.routeConfig)\" />\n                      }\n                    </div>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.routeConfig\"\n                           (click)=\"navigate(lineItem.routeConfig)\">\n                        <div class=\"main-content\"\n                             [style.grid-template-columns]=\"getMainContentGridTemplate(category, lineItem)\">\n                          @if (isColumnVisible(category, 'title')) {\n                            <div class=\"title\">\n                              <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                            </div>\n                          }\n                          @if (lineItem.status && isColumnVisible(category, 'status')) {\n                            <div>\n                              <kit-pill class=\"status\"\n                                        [theme]=\"kitPillTheme.MAIN\">\n                                {{ lineItem.status }}\n                              </kit-pill>\n                            </div>\n                          }\n                          @if (isColumnVisible(category, 'subtitle')) {\n                            <div class=\"subtitle\">\n                              <kit-truncate-text>\n                                <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                              </kit-truncate-text>\n                            </div>\n                          }\n\n                          @if (lineItem.routePath; as routePath) {\n                            @if (routePath.from || routePath.to) {\n                              <kit-route-path class=\"route\"\n                                              kitHideBelowWidthClass=\"hide\"\n                                              [kitHideBelowWidth]=\"132\"\n                                              [containerMode]=\"routePath.containerMode ?? ''\"\n                                              [destinationPort]=\"routePath.to ?? ''\"\n                                              [originPort]=\"routePath.from ?? ''\"\n                                              [type]=\"routePath.type ?? ''\" />\n                            }\n                          }\n                          @if (lineItem.dates; as dates) {\n                            @if (isColumnVisible(category, 'firstDate') && dates.firstDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper first-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.firstDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                            @if (isColumnVisible(category, 'secondDate') && dates.secondDate.value) {\n                              <div class=\"dates\">\n                                <div class=\"date-wrapper second-date\">\n                                  <p class=\"date-label\">\n                                    <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\" />\n                                    <span>{{ dates.secondDate.label }}</span>\n                                  </p>\n                                  <span class=\"date\">{{ dates.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                                </div>\n                              </div>\n                            }\n                          }\n                        </div>\n\n                        @if (isColumnVisible(category, 'additionalContent')) {\n                          <div class=\"additional-content\">\n                            @for (item of lineItem.additionalContent; track item.key) {\n                              <div>\n                                <span class=\"label\">{{ item.translateKey | translate }} </span>\n                                <span class=\"value\"\n                                      [innerHTML]=\"formatValue(item.value) | highlight:searchValue\"></span>\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              }\n            </div>\n          } @else {\n            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\" />\n          }\n\n          @if (filters().length) {\n            <div class=\"filters\">\n              @for (filter of filters(); track $index) {\n                <div>\n                  <p class=\"label\">{{ filter.label }}</p>\n                  @for (value of filter.values.slice(0, isFilterExpanded($index) ? filter.values.length : 3); track $index) {\n                    <kit-pill @heightExpandCollapseAnimation\n                              class=\"filter-value\"\n                              [theme]=\"kitPillTheme.MAIN\"\n                              [selectable]=\"true\"\n                              [selected]=\"isFilterSelected(value)\"\n                              (clicked)=\"onSelectFilter(value, filter.appliedTo)\">\n                      {{ value.title | translate }}\n                    </kit-pill>\n                  }\n                  @if (filter.values.length > 3) {\n                    <kit-button class=\"toggle-btn\"\n                                [label]=\"`kit.globalSearch.${isFilterExpanded($index) ? 'showLess' : 'showMore'}` | translate\"\n                                [icon]=\"isFilterExpanded($index) ? kitSvgIcon.CHEVRON_UP : kitSvgIcon.CHEVRON_DOWN\"\n                                [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                                [kind]=\"kitButtonKind.SMALL\"\n                                [type]=\"kitButtonType.GHOST\"\n                                (clicked)=\"toggleFilterExpanded($index)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{flex:1}:host .global-search{max-width:360px}:host .global-search.expanded{max-width:100%}:host .global-search .textbox{border-color:var(--ui-kit-color-grey-11);box-shadow:none;border-radius:8px}:host .global-search .textbox.k-focus{border-color:var(--ui-kit-color-main)}:host ::ng-deep .k-animation-container{width:calc(100% - 145px)}:host ::ng-deep .kit-global-search-popup{overflow:auto;margin-top:10px;padding:0}:host ::ng-deep .kit-global-search-popup .popup-content{display:flex;justify-content:space-between}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:0 8px;height:40px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .loader{display:flex;justify-content:center;height:100%;align-items:center;color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 20px}:host ::ng-deep .search-results .category .header-main{display:flex;align-items:center}:host ::ng-deep .search-results .category .header-main-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header-main-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 .header-main-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .header-main-title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:575px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--ui-kit-color-grey-11)}:host ::ng-deep .search-results .category .line-item.has-link{cursor:pointer}:host ::ng-deep .search-results .category .line-item.has-link:hover{opacity:.7}:host ::ng-deep .search-results .category .line-item .highlighted{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .line-item .main-content{display:grid;grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) repeat(auto-fit,minmax(60px,1fr));gap:20px;align-items:center;grid-auto-flow:column}:host ::ng-deep .search-results .category .line-item .main-content .title{font-size:16px;line-height:22px;font-weight:500}:host ::ng-deep .search-results .category .line-item .main-content .subtitle{width:100%}:host ::ng-deep .search-results .category .line-item .main-content .subtitle.hide{display:none}:host ::ng-deep .search-results .category .line-item .main-content .title,:host ::ng-deep .search-results .category .line-item .main-content .subtitle{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content .icon.calendar-icon{width:18px;height:18px;fill:var(--ui-kit-color-grey-12);margin-right:3px}:host ::ng-deep .search-results .category .line-item .main-content .route{container:route/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .route.hide{display:none;container:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{justify-content:left}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;display:block;margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .kit-pill-content{margin:auto}:host ::ng-deep .search-results .category .line-item .main-content .dates{display:flex;align-items:center;font-size:12px;line-height:14px;container:dates/inline-size;width:100%}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper{display:flex;justify-content:left;align-items:center;flex-wrap:wrap;text-align:center}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-wrapper .date{text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates .date-label{display:flex;align-items:center;justify-content:center;margin-right:5px;text-wrap:nowrap}:host ::ng-deep .search-results .category .line-item .main-content .dates.first-date{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .main-content .dates.second-date{color:var(--ui-kit-color-grey-10)}:host ::ng-deep .search-results .category .line-item .main-content:has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(115px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content:not(:has(.status)):has(.route:not(.hide)){grid-template-columns:minmax(170px,max-content) minmax(70px,1fr) minmax(99px,2fr) repeat(auto-fit,minmax(50px,1fr))}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child{justify-self:end;justify-content:end;text-align:right}:host ::ng-deep .search-results .category .line-item .main-content>.dates:last-child .date-wrapper{justify-content:end}:host ::ng-deep .search-results .category .line-item .additional-content{text-align:right}:host ::ng-deep .search-results .category .line-item .additional-content .label{color:var(--ui-kit-color-grey-14)}:host ::ng-deep .search-results .category .line-item .additional-content .value{color:var(--ui-kit-color-grey-10)}@container route (max-width: 190px){:host ::ng-deep .search-results .category .route-origin-port,:host ::ng-deep .search-results .category .icon.arrow{display:none}:host ::ng-deep .search-results .category .line-item .main-content .route .route-path{grid-template-columns:minmax(0,auto) min-content;justify-content:stretch}}@container route (max-width: 150px){:host ::ng-deep .search-results .category .route-mode{display:none}}@container dates (max-width: 120px){:host ::ng-deep .search-results .category .date-wrapper{flex-direction:column}:host ::ng-deep .search-results .category .date-label{margin-right:0}}:host ::ng-deep .filters{background-color:var(--ui-kit-color-grey-13);padding:24px;min-width:175px}:host ::ng-deep .filters .label{font-size:12px;line-height:14px;color:var(--ui-kit-color-grey-10);margin-bottom:10px;text-transform:uppercase}:host ::ng-deep .filters .filter-value{margin-bottom:10px;display:block}:host ::ng-deep .filters .filter-value .kit-pill{line-height:16px;text-align:left;display:inline-block;padding:7px 16px;font-size:13px}:host ::ng-deep .filters .toggle-btn{margin-bottom:40px;display:block}:host ::ng-deep .filters .toggle-btn .k-button{min-width:125px;padding:6px 16px;min-height:32px}:host ::ng-deep .prompts{display:flex;gap:10px;padding:24px}:host ::ng-deep .empty-section{container:none}\n"] }]
         }], propDecorators: { searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: true }] }], displayedLineItemsNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedLineItemsNumber", required: false }] }], prompts: [{ type: i0.Input, args: [{ isSignal: true, alias: "prompts", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], textbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TextBoxComponent), { isSignal: true }] }], anchor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TextBoxComponent), { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }], documentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
-const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryName, routeConfig, itemMapper) => {
+const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryName, routeConfig, itemMapper, layoutConfig) => {
     return store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(tap(permissions => !Object.keys(permissions).length && store.dispatch(new FetchUserPermissions())), filter(permissions => !!Object.keys(permissions).length), take(1), switchMap(permissions => {
         if (!kitHasPermission(requiredPermission, permissions)) {
             return of(null);
@@ -9398,11 +9481,13 @@ const mapGlobalSearchResult = (store, requiredPermission, dataFetcher, categoryN
             name: categoryName,
             total: data.total,
             routeConfig,
+            layoutConfig,
             items: data.data.map(itemMapper),
         })), catchError(() => of({
             name: categoryName,
             total: 0,
             routeConfig,
+            layoutConfig,
             items: [],
         })));
     }));
@@ -12343,6 +12428,17 @@ const buildRoutePorts = (legs) => {
     });
     return ports;
 };
+const toUtcIsoString = (value) => {
+    if (!value) {
+        return null;
+    }
+    const hasTimezoneOffset = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(value);
+    return value.includes('T') && !hasTimezoneOffset ? `${value}Z` : value;
+};
+const toStartOfUtcDay = (ms) => {
+    const date = new Date(ms);
+    return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+};
 const calculateDurationInDays = (start, end) => {
     const startMs = toTimestamp(start);
     const endMs = toTimestamp(end);
@@ -12350,13 +12446,14 @@ const calculateDurationInDays = (start, end) => {
     if (startMs === null || endMs === null || endMs < startMs) {
         return null;
     }
-    return Math.floor((endMs - startMs) / dayInMs);
+    return Math.round((toStartOfUtcDay(endMs) - toStartOfUtcDay(startMs)) / dayInMs);
 };
 const toTimestamp = (value) => {
-    if (!value) {
+    const normalized = toUtcIsoString(value);
+    if (!normalized) {
         return null;
     }
-    const timestamp = Date.parse(value);
+    const timestamp = Date.parse(normalized);
     return Number.isNaN(timestamp) ? null : timestamp;
 };
 
@@ -12372,6 +12469,7 @@ class KitShipmentRoutingCardComponent {
         this.kitTooltipPosition = KitTooltipPosition;
         this.dateFormat = computed(() => this.view().dateFormat ?? KIT_DATE_FORMAT, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+        this.toUtcIsoString = toUtcIsoString;
         this.currentLegProgressPercent = computed(() => {
             if (this.view().isCompleted) {
                 return 100;
@@ -12393,7 +12491,7 @@ class KitShipmentRoutingCardComponent {
         return `${durationDays} ${this.translateService.instant(translationKey).toLowerCase()}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingCardComponent, isStandalone: true, selector: "kit-shipment-routing-card", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-card\">\n  <div class=\"card-header\">\n    <div class=\"card-header-type\"\n         [class.completed]=\"view().isCompleted\">\n      <kit-svg-icon class=\"card-header-type-icon\"\n                    [icon]=\"view().transportIcon\"\n                    [ngClass]=\"kitSvgIconType.FILL\" />\n    </div>\n    <div class=\"card-header-info\">\n      <div class=\"card-header-top\">\n        <p class=\"card-header-top-name\"\n           kitTooltip\n           kitTooltipFilter=\".card-header-top-name\"\n           [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n           [title]=\"'kit.shipmentRouting.tooltips.vehicleName' | translate\">\n          {{ view().leg.name || '-' }}\n        </p>\n        @if (view().leg.legTypeLabel; as legTypeLabel) {\n          <kit-status-label class=\"card-header-top-leg-type\"\n                            [tooltip]=\"'kit.shipmentRouting.tooltips.legType' | translate\"\n                            [color]=\"view().leg.legTypeColor ?? kitStatusLabelColor.GREY\"\n                            [truncateText]=\"false\">\n            {{ legTypeLabel }}\n          </kit-status-label>\n        }\n      </div>\n      <div class=\"card-header-bottom\">\n        <p class=\"card-header-bottom-number\"\n           kitTooltip\n           kitTooltipFilter=\".card-header-bottom-number\"\n           [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n           [title]=\"'kit.shipmentRouting.tooltips.voyageNo' | translate\">\n          {{ view().leg.vehicleNumber || '-' }}\n        </p>\n        <div class=\"card-header-carrier\">\n          <kit-svg-icon class=\"card-header-carrier-icon\"\n                        [icon]=\"kitSvgIcon.BUILDING\" />\n          <p class=\"card-header-bottom-name\"\n             kitTooltip\n             kitTooltipFilter=\".card-header-bottom-name\"\n             [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n             [title]=\"'kit.shipmentRouting.tooltips.carrier' | translate\">\n            {{ view().leg.carrierName || '-' }}\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-content\">\n    <div class=\"ports-row\">\n      <div class=\"ports-row-label\"></div>\n      <p class=\"ports-row-port ports-row-port-start\">\n        {{ view().leg.originPort || '-' }}\n      </p>\n      <div class=\"ports-row-track\">\n        <div class=\"track-dot\"\n             [class.completed]=\"isStartPointCompleted()\"></div>\n        <div class=\"track-line\">\n          <div class=\"track-line-fill\"\n               [style.width.%]=\"currentLegProgressPercent()\"></div>\n        </div>\n        <div class=\"track-dot\"\n             [class.completed]=\"isEndPointCompleted()\"></div>\n        @if (view().showTransportIcon) {\n          <div class=\"track-transport\"\n               [style.left.%]=\"currentLegProgressPercent()\">\n            <kit-svg-icon class=\"track-transport-icon\"\n                          [icon]=\"view().transportIcon\"\n                          [ngClass]=\"kitSvgIconType.FILL\" />\n          </div>\n        }\n      </div>\n      <p class=\"ports-row-port ports-row-port-end\">\n        {{ view().leg.destinationPort || '-' }}\n      </p>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ view().scheduledLabel }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ view().leg.etd ? (view().leg.etd | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ getLegDurationLabel(view().leg.etd, view().leg.eta) }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ view().leg.eta ? (view().leg.eta | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ view().actualLabel }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ view().leg.atd ? (view().leg.atd | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ getLegDurationLabel(view().leg.atd, view().leg.ata) }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ view().leg.ata ? (view().leg.ata | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-card{padding:20px;border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-header{display:flex;gap:10px}.kit-shipment-routing-card .card-header-type{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;fill:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-8)}.kit-shipment-routing-card .card-header-type.completed{fill:var(--color-white);background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-header-type-icon{display:block;width:24px;height:24px}.kit-shipment-routing-card .card-header-info{display:flex;flex-direction:column;flex:1;gap:5px;min-width:0}.kit-shipment-routing-card .card-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.kit-shipment-routing-card .card-header-top-name{overflow:hidden}.kit-shipment-routing-card .card-header-bottom{display:flex;align-items:center;gap:20px;color:var(--ui-kit-color-grey-20);font-size:13px}.kit-shipment-routing-card .card-header-bottom-number{width:auto;overflow:hidden}.kit-shipment-routing-card .card-header-carrier{display:flex;gap:5px;min-width:50px}.kit-shipment-routing-card .card-header-carrier-icon{display:block;width:14px;height:14px;stroke:var(--ui-kit-color-grey-20);fill:none;flex-shrink:0}.kit-shipment-routing-card .card-header-carrier-name{overflow:hidden}.kit-shipment-routing-card .card-content{--row-label-column-width: 70px;--row-date-column-width: 100px;margin-top:20px;display:flex;flex-direction:column;gap:10px}.kit-shipment-routing-card .card-content .ports-row{display:grid;grid-template-columns:var(--row-label-column-width) minmax(0,max-content) auto minmax(0,max-content);align-items:center;column-gap:20px;margin-bottom:10px}.kit-shipment-routing-card .card-content .ports-row-label{min-width:0}.kit-shipment-routing-card .card-content .ports-row-port{max-width:180px;font-size:14px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}.kit-shipment-routing-card .card-content .ports-row-port-start{text-align:left}.kit-shipment-routing-card .card-content .ports-row-port-end{text-align:right}.kit-shipment-routing-card .card-content .ports-row-track{position:relative;display:flex;align-items:center;min-width:0;height:24px}.kit-shipment-routing-card .card-content .ports-row-track .track-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-card .card-content .ports-row-track .track-dot.completed{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-line{position:relative;flex:1;height:2px;background:var(--ui-kit-color-grey-11);overflow:hidden}.kit-shipment-routing-card .card-content .ports-row-track .track-line .track-line-fill{height:100%;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;fill:var(--ui-kit-color-green-1);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport-icon{display:block;width:25px;height:25px}.kit-shipment-routing-card .card-content .dates-row{display:grid;grid-template-columns:var(--row-label-column-width) var(--row-date-column-width) minmax(45px,1fr) var(--row-date-column-width);column-gap:10px;align-items:center;font-size:14px}.kit-shipment-routing-card .card-content .dates-row .item-label{color:var(--ui-kit-color-grey-20);font-size:12px;text-transform:uppercase}.kit-shipment-routing-card .card-content .dates-row .item-date{width:100%;white-space:nowrap;text-align:center}.kit-shipment-routing-card .card-content .dates-row .item-date-start{text-align:left}.kit-shipment-routing-card .card-content .dates-row .item-date-end{text-align:right}.kit-shipment-routing-card .card-content .dates-row .item-duration{display:flex;justify-content:center;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingCardComponent, isStandalone: true, selector: "kit-shipment-routing-card", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-card\">\n  <div class=\"card-header\">\n    <div class=\"card-header-type\"\n         [class.completed]=\"view().isCompleted\">\n      <kit-svg-icon class=\"card-header-type-icon\"\n                    [icon]=\"view().transportIcon\"\n                    [ngClass]=\"kitSvgIconType.FILL\" />\n    </div>\n    <div class=\"card-header-info\">\n      <div class=\"card-header-top\">\n        <p class=\"card-header-top-name\"\n           kitTooltip\n           kitTooltipFilter=\".card-header-top-name\"\n           [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n           [title]=\"'kit.shipmentRouting.tooltips.vehicleName' | translate\">\n          {{ view().leg.name || '-' }}\n        </p>\n        @if (view().leg.legTypeLabel; as legTypeLabel) {\n          <kit-status-label class=\"card-header-top-leg-type\"\n                            [tooltip]=\"'kit.shipmentRouting.tooltips.legType' | translate\"\n                            [color]=\"view().leg.legTypeColor ?? kitStatusLabelColor.GREY\"\n                            [truncateText]=\"false\">\n            {{ legTypeLabel }}\n          </kit-status-label>\n        }\n      </div>\n      <div class=\"card-header-bottom\">\n        <p class=\"card-header-bottom-number\"\n           kitTooltip\n           kitTooltipFilter=\".card-header-bottom-number\"\n           [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n           [title]=\"'kit.shipmentRouting.tooltips.voyageNo' | translate\">\n          {{ view().leg.vehicleNumber || '-' }}\n        </p>\n        <div class=\"card-header-carrier\">\n          <kit-svg-icon class=\"card-header-carrier-icon\"\n                        [icon]=\"kitSvgIcon.BUILDING\" />\n          <p class=\"card-header-bottom-name\"\n             kitTooltip\n             kitTooltipFilter=\".card-header-bottom-name\"\n             [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n             [title]=\"'kit.shipmentRouting.tooltips.carrier' | translate\">\n            {{ view().leg.carrierName || '-' }}\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-content\">\n    <div class=\"ports-row\">\n      <div class=\"ports-row-label\"></div>\n      <p class=\"ports-row-port ports-row-port-start\">\n        {{ view().leg.originPort || '-' }}\n      </p>\n      <div class=\"ports-row-track\">\n        <div class=\"track-dot\"\n             [class.completed]=\"isStartPointCompleted()\"></div>\n        <div class=\"track-line\">\n          <div class=\"track-line-fill\"\n               [style.width.%]=\"currentLegProgressPercent()\"></div>\n        </div>\n        <div class=\"track-dot\"\n             [class.completed]=\"isEndPointCompleted()\"></div>\n        @if (view().showTransportIcon) {\n          <div class=\"track-transport\"\n               [style.left.%]=\"currentLegProgressPercent()\">\n            <kit-svg-icon class=\"track-transport-icon\"\n                          [icon]=\"view().transportIcon\"\n                          [ngClass]=\"kitSvgIconType.FILL\" />\n          </div>\n        }\n      </div>\n      <p class=\"ports-row-port ports-row-port-end\">\n        {{ view().leg.destinationPort || '-' }}\n      </p>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ view().scheduledLabel }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ view().leg.etd ? (toUtcIsoString(view().leg.etd) | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ getLegDurationLabel(view().leg.etd, view().leg.eta) }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ view().leg.eta ? (toUtcIsoString(view().leg.eta) | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ view().actualLabel }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ view().leg.atd ? (toUtcIsoString(view().leg.atd) | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ getLegDurationLabel(view().leg.atd, view().leg.ata) }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ view().leg.ata ? (toUtcIsoString(view().leg.ata) | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-card{padding:20px;border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-header{display:flex;gap:10px}.kit-shipment-routing-card .card-header-type{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;fill:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-8)}.kit-shipment-routing-card .card-header-type.completed{fill:var(--color-white);background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-header-type-icon{display:block;width:24px;height:24px}.kit-shipment-routing-card .card-header-info{display:flex;flex-direction:column;flex:1;gap:5px;min-width:0}.kit-shipment-routing-card .card-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.kit-shipment-routing-card .card-header-top-name{overflow:hidden}.kit-shipment-routing-card .card-header-bottom{display:flex;align-items:center;gap:20px;color:var(--ui-kit-color-grey-20);font-size:13px}.kit-shipment-routing-card .card-header-bottom-number{width:auto;overflow:hidden}.kit-shipment-routing-card .card-header-carrier{display:flex;gap:5px;min-width:50px}.kit-shipment-routing-card .card-header-carrier-icon{display:block;width:14px;height:14px;stroke:var(--ui-kit-color-grey-20);fill:none;flex-shrink:0}.kit-shipment-routing-card .card-header-carrier-name{overflow:hidden}.kit-shipment-routing-card .card-content{--row-label-column-width: 70px;--row-date-column-width: 100px;margin-top:20px;display:flex;flex-direction:column;gap:10px}.kit-shipment-routing-card .card-content .ports-row{display:grid;grid-template-columns:var(--row-label-column-width) minmax(0,max-content) auto minmax(0,max-content);align-items:center;column-gap:20px;margin-bottom:10px}.kit-shipment-routing-card .card-content .ports-row-label{min-width:0}.kit-shipment-routing-card .card-content .ports-row-port{max-width:180px;font-size:14px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}.kit-shipment-routing-card .card-content .ports-row-port-start{text-align:left}.kit-shipment-routing-card .card-content .ports-row-port-end{text-align:right}.kit-shipment-routing-card .card-content .ports-row-track{position:relative;display:flex;align-items:center;min-width:0;height:24px}.kit-shipment-routing-card .card-content .ports-row-track .track-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-card .card-content .ports-row-track .track-dot.completed{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-line{position:relative;flex:1;height:2px;background:var(--ui-kit-color-grey-11);overflow:hidden}.kit-shipment-routing-card .card-content .ports-row-track .track-line .track-line-fill{height:100%;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;fill:var(--ui-kit-color-green-1);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport-icon{display:block;width:25px;height:25px}.kit-shipment-routing-card .card-content .dates-row{display:grid;grid-template-columns:var(--row-label-column-width) var(--row-date-column-width) minmax(45px,1fr) var(--row-date-column-width);column-gap:10px;align-items:center;font-size:14px}.kit-shipment-routing-card .card-content .dates-row .item-label{color:var(--ui-kit-color-grey-20);font-size:12px;text-transform:uppercase}.kit-shipment-routing-card .card-content .dates-row .item-date{width:100%;white-space:nowrap;text-align:center}.kit-shipment-routing-card .card-content .dates-row .item-date-start{text-align:left}.kit-shipment-routing-card .card-content .dates-row .item-date-end{text-align:right}.kit-shipment-routing-card .card-content .dates-row .item-duration{display:flex;justify-content:center;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip", "truncateText"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingCardComponent, decorators: [{
             type: Component,
@@ -12405,7 +12503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitStatusLabelComponent,
                         KitTooltipDirective,
                         TranslatePipe,
-                    ], template: "<div class=\"kit-shipment-routing-card\">\n  <div class=\"card-header\">\n    <div class=\"card-header-type\"\n         [class.completed]=\"view().isCompleted\">\n      <kit-svg-icon class=\"card-header-type-icon\"\n                    [icon]=\"view().transportIcon\"\n                    [ngClass]=\"kitSvgIconType.FILL\" />\n    </div>\n    <div class=\"card-header-info\">\n      <div class=\"card-header-top\">\n        <p class=\"card-header-top-name\"\n           kitTooltip\n           kitTooltipFilter=\".card-header-top-name\"\n           [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n           [title]=\"'kit.shipmentRouting.tooltips.vehicleName' | translate\">\n          {{ view().leg.name || '-' }}\n        </p>\n        @if (view().leg.legTypeLabel; as legTypeLabel) {\n          <kit-status-label class=\"card-header-top-leg-type\"\n                            [tooltip]=\"'kit.shipmentRouting.tooltips.legType' | translate\"\n                            [color]=\"view().leg.legTypeColor ?? kitStatusLabelColor.GREY\"\n                            [truncateText]=\"false\">\n            {{ legTypeLabel }}\n          </kit-status-label>\n        }\n      </div>\n      <div class=\"card-header-bottom\">\n        <p class=\"card-header-bottom-number\"\n           kitTooltip\n           kitTooltipFilter=\".card-header-bottom-number\"\n           [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n           [title]=\"'kit.shipmentRouting.tooltips.voyageNo' | translate\">\n          {{ view().leg.vehicleNumber || '-' }}\n        </p>\n        <div class=\"card-header-carrier\">\n          <kit-svg-icon class=\"card-header-carrier-icon\"\n                        [icon]=\"kitSvgIcon.BUILDING\" />\n          <p class=\"card-header-bottom-name\"\n             kitTooltip\n             kitTooltipFilter=\".card-header-bottom-name\"\n             [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n             [title]=\"'kit.shipmentRouting.tooltips.carrier' | translate\">\n            {{ view().leg.carrierName || '-' }}\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-content\">\n    <div class=\"ports-row\">\n      <div class=\"ports-row-label\"></div>\n      <p class=\"ports-row-port ports-row-port-start\">\n        {{ view().leg.originPort || '-' }}\n      </p>\n      <div class=\"ports-row-track\">\n        <div class=\"track-dot\"\n             [class.completed]=\"isStartPointCompleted()\"></div>\n        <div class=\"track-line\">\n          <div class=\"track-line-fill\"\n               [style.width.%]=\"currentLegProgressPercent()\"></div>\n        </div>\n        <div class=\"track-dot\"\n             [class.completed]=\"isEndPointCompleted()\"></div>\n        @if (view().showTransportIcon) {\n          <div class=\"track-transport\"\n               [style.left.%]=\"currentLegProgressPercent()\">\n            <kit-svg-icon class=\"track-transport-icon\"\n                          [icon]=\"view().transportIcon\"\n                          [ngClass]=\"kitSvgIconType.FILL\" />\n          </div>\n        }\n      </div>\n      <p class=\"ports-row-port ports-row-port-end\">\n        {{ view().leg.destinationPort || '-' }}\n      </p>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ view().scheduledLabel }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ view().leg.etd ? (view().leg.etd | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ getLegDurationLabel(view().leg.etd, view().leg.eta) }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ view().leg.eta ? (view().leg.eta | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ view().actualLabel }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ view().leg.atd ? (view().leg.atd | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ getLegDurationLabel(view().leg.atd, view().leg.ata) }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ view().leg.ata ? (view().leg.ata | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-card{padding:20px;border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-header{display:flex;gap:10px}.kit-shipment-routing-card .card-header-type{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;fill:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-8)}.kit-shipment-routing-card .card-header-type.completed{fill:var(--color-white);background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-header-type-icon{display:block;width:24px;height:24px}.kit-shipment-routing-card .card-header-info{display:flex;flex-direction:column;flex:1;gap:5px;min-width:0}.kit-shipment-routing-card .card-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.kit-shipment-routing-card .card-header-top-name{overflow:hidden}.kit-shipment-routing-card .card-header-bottom{display:flex;align-items:center;gap:20px;color:var(--ui-kit-color-grey-20);font-size:13px}.kit-shipment-routing-card .card-header-bottom-number{width:auto;overflow:hidden}.kit-shipment-routing-card .card-header-carrier{display:flex;gap:5px;min-width:50px}.kit-shipment-routing-card .card-header-carrier-icon{display:block;width:14px;height:14px;stroke:var(--ui-kit-color-grey-20);fill:none;flex-shrink:0}.kit-shipment-routing-card .card-header-carrier-name{overflow:hidden}.kit-shipment-routing-card .card-content{--row-label-column-width: 70px;--row-date-column-width: 100px;margin-top:20px;display:flex;flex-direction:column;gap:10px}.kit-shipment-routing-card .card-content .ports-row{display:grid;grid-template-columns:var(--row-label-column-width) minmax(0,max-content) auto minmax(0,max-content);align-items:center;column-gap:20px;margin-bottom:10px}.kit-shipment-routing-card .card-content .ports-row-label{min-width:0}.kit-shipment-routing-card .card-content .ports-row-port{max-width:180px;font-size:14px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}.kit-shipment-routing-card .card-content .ports-row-port-start{text-align:left}.kit-shipment-routing-card .card-content .ports-row-port-end{text-align:right}.kit-shipment-routing-card .card-content .ports-row-track{position:relative;display:flex;align-items:center;min-width:0;height:24px}.kit-shipment-routing-card .card-content .ports-row-track .track-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-card .card-content .ports-row-track .track-dot.completed{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-line{position:relative;flex:1;height:2px;background:var(--ui-kit-color-grey-11);overflow:hidden}.kit-shipment-routing-card .card-content .ports-row-track .track-line .track-line-fill{height:100%;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;fill:var(--ui-kit-color-green-1);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport-icon{display:block;width:25px;height:25px}.kit-shipment-routing-card .card-content .dates-row{display:grid;grid-template-columns:var(--row-label-column-width) var(--row-date-column-width) minmax(45px,1fr) var(--row-date-column-width);column-gap:10px;align-items:center;font-size:14px}.kit-shipment-routing-card .card-content .dates-row .item-label{color:var(--ui-kit-color-grey-20);font-size:12px;text-transform:uppercase}.kit-shipment-routing-card .card-content .dates-row .item-date{width:100%;white-space:nowrap;text-align:center}.kit-shipment-routing-card .card-content .dates-row .item-date-start{text-align:left}.kit-shipment-routing-card .card-content .dates-row .item-date-end{text-align:right}.kit-shipment-routing-card .card-content .dates-row .item-duration{display:flex;justify-content:center;white-space:nowrap}\n"] }]
+                    ], template: "<div class=\"kit-shipment-routing-card\">\n  <div class=\"card-header\">\n    <div class=\"card-header-type\"\n         [class.completed]=\"view().isCompleted\">\n      <kit-svg-icon class=\"card-header-type-icon\"\n                    [icon]=\"view().transportIcon\"\n                    [ngClass]=\"kitSvgIconType.FILL\" />\n    </div>\n    <div class=\"card-header-info\">\n      <div class=\"card-header-top\">\n        <p class=\"card-header-top-name\"\n           kitTooltip\n           kitTooltipFilter=\".card-header-top-name\"\n           [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n           [title]=\"'kit.shipmentRouting.tooltips.vehicleName' | translate\">\n          {{ view().leg.name || '-' }}\n        </p>\n        @if (view().leg.legTypeLabel; as legTypeLabel) {\n          <kit-status-label class=\"card-header-top-leg-type\"\n                            [tooltip]=\"'kit.shipmentRouting.tooltips.legType' | translate\"\n                            [color]=\"view().leg.legTypeColor ?? kitStatusLabelColor.GREY\"\n                            [truncateText]=\"false\">\n            {{ legTypeLabel }}\n          </kit-status-label>\n        }\n      </div>\n      <div class=\"card-header-bottom\">\n        <p class=\"card-header-bottom-number\"\n           kitTooltip\n           kitTooltipFilter=\".card-header-bottom-number\"\n           [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n           [title]=\"'kit.shipmentRouting.tooltips.voyageNo' | translate\">\n          {{ view().leg.vehicleNumber || '-' }}\n        </p>\n        <div class=\"card-header-carrier\">\n          <kit-svg-icon class=\"card-header-carrier-icon\"\n                        [icon]=\"kitSvgIcon.BUILDING\" />\n          <p class=\"card-header-bottom-name\"\n             kitTooltip\n             kitTooltipFilter=\".card-header-bottom-name\"\n             [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n             [title]=\"'kit.shipmentRouting.tooltips.carrier' | translate\">\n            {{ view().leg.carrierName || '-' }}\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-content\">\n    <div class=\"ports-row\">\n      <div class=\"ports-row-label\"></div>\n      <p class=\"ports-row-port ports-row-port-start\">\n        {{ view().leg.originPort || '-' }}\n      </p>\n      <div class=\"ports-row-track\">\n        <div class=\"track-dot\"\n             [class.completed]=\"isStartPointCompleted()\"></div>\n        <div class=\"track-line\">\n          <div class=\"track-line-fill\"\n               [style.width.%]=\"currentLegProgressPercent()\"></div>\n        </div>\n        <div class=\"track-dot\"\n             [class.completed]=\"isEndPointCompleted()\"></div>\n        @if (view().showTransportIcon) {\n          <div class=\"track-transport\"\n               [style.left.%]=\"currentLegProgressPercent()\">\n            <kit-svg-icon class=\"track-transport-icon\"\n                          [icon]=\"view().transportIcon\"\n                          [ngClass]=\"kitSvgIconType.FILL\" />\n          </div>\n        }\n      </div>\n      <p class=\"ports-row-port ports-row-port-end\">\n        {{ view().leg.destinationPort || '-' }}\n      </p>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ view().scheduledLabel }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ view().leg.etd ? (toUtcIsoString(view().leg.etd) | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ getLegDurationLabel(view().leg.etd, view().leg.eta) }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ view().leg.eta ? (toUtcIsoString(view().leg.eta) | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ view().actualLabel }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ view().leg.atd ? (toUtcIsoString(view().leg.atd) | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ getLegDurationLabel(view().leg.atd, view().leg.ata) }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ view().leg.ata ? (toUtcIsoString(view().leg.ata) | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-card{padding:20px;border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-header{display:flex;gap:10px}.kit-shipment-routing-card .card-header-type{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;fill:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-8)}.kit-shipment-routing-card .card-header-type.completed{fill:var(--color-white);background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-header-type-icon{display:block;width:24px;height:24px}.kit-shipment-routing-card .card-header-info{display:flex;flex-direction:column;flex:1;gap:5px;min-width:0}.kit-shipment-routing-card .card-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.kit-shipment-routing-card .card-header-top-name{overflow:hidden}.kit-shipment-routing-card .card-header-bottom{display:flex;align-items:center;gap:20px;color:var(--ui-kit-color-grey-20);font-size:13px}.kit-shipment-routing-card .card-header-bottom-number{width:auto;overflow:hidden}.kit-shipment-routing-card .card-header-carrier{display:flex;gap:5px;min-width:50px}.kit-shipment-routing-card .card-header-carrier-icon{display:block;width:14px;height:14px;stroke:var(--ui-kit-color-grey-20);fill:none;flex-shrink:0}.kit-shipment-routing-card .card-header-carrier-name{overflow:hidden}.kit-shipment-routing-card .card-content{--row-label-column-width: 70px;--row-date-column-width: 100px;margin-top:20px;display:flex;flex-direction:column;gap:10px}.kit-shipment-routing-card .card-content .ports-row{display:grid;grid-template-columns:var(--row-label-column-width) minmax(0,max-content) auto minmax(0,max-content);align-items:center;column-gap:20px;margin-bottom:10px}.kit-shipment-routing-card .card-content .ports-row-label{min-width:0}.kit-shipment-routing-card .card-content .ports-row-port{max-width:180px;font-size:14px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;white-space:normal}.kit-shipment-routing-card .card-content .ports-row-port-start{text-align:left}.kit-shipment-routing-card .card-content .ports-row-port-end{text-align:right}.kit-shipment-routing-card .card-content .ports-row-track{position:relative;display:flex;align-items:center;min-width:0;height:24px}.kit-shipment-routing-card .card-content .ports-row-track .track-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-card .card-content .ports-row-track .track-dot.completed{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-line{position:relative;flex:1;height:2px;background:var(--ui-kit-color-grey-11);overflow:hidden}.kit-shipment-routing-card .card-content .ports-row-track .track-line .track-line-fill{height:100%;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;fill:var(--ui-kit-color-green-1);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport-icon{display:block;width:25px;height:25px}.kit-shipment-routing-card .card-content .dates-row{display:grid;grid-template-columns:var(--row-label-column-width) var(--row-date-column-width) minmax(45px,1fr) var(--row-date-column-width);column-gap:10px;align-items:center;font-size:14px}.kit-shipment-routing-card .card-content .dates-row .item-label{color:var(--ui-kit-color-grey-20);font-size:12px;text-transform:uppercase}.kit-shipment-routing-card .card-content .dates-row .item-date{width:100%;white-space:nowrap;text-align:center}.kit-shipment-routing-card .card-content .dates-row .item-date-start{text-align:left}.kit-shipment-routing-card .card-content .dates-row .item-date-end{text-align:right}.kit-shipment-routing-card .card-content .dates-row .item-duration{display:flex;justify-content:center;white-space:nowrap}\n"] }]
         }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }] } });
 
 class KitShipmentRoutingOverviewComponent {
@@ -12416,6 +12514,7 @@ class KitShipmentRoutingOverviewComponent {
         this.kitSvgIconType = KitSvgIconType;
         this.dateFormat = computed(() => this.view().dateFormat ?? KIT_DATE_FORMAT, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+        this.toUtcIsoString = toUtcIsoString;
         this.ports = computed(() => this.view().ports ?? [], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ports" }] : /* istanbul ignore next */ []));
         this.progressPercent = computed(() => this.view().progressPercent ?? 0, /* @ts-ignore */
@@ -12431,7 +12530,7 @@ class KitShipmentRoutingOverviewComponent {
         return completedSegments >= index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingOverviewComponent, isStandalone: true, selector: "kit-shipment-routing-overview", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-overview\">\n  <div class=\"routing\">\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ view().originLabel }}</div>\n      <div class=\"routing-port-name\">{{ view().originPort || '-' }}</div>\n      <div class=\"routing-port-date\">{{ view().originDate ? (view().originDate | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n    <div class=\"routing-main\">\n      <kit-pill [theme]=\"kitPillTheme.BLUE\">\n        {{ view().transitDaysLabel }}\n      </kit-pill>\n      <div class=\"routing-route\">\n        <div class=\"routing-track\">\n          <div class=\"routing-track-progress\"\n               [style.width.%]=\"progressPercent()\"></div>\n        </div>\n        <div class=\"routing-ports\">\n          @for (port of ports(); track $index) {\n            <div class=\"port-item\"\n                 [style.left.%]=\"getPortPositionPercent($index)\"\n                 [class.port-item-completed]=\"isPortCompleted($index)\">\n              <div class=\"port-item-dot\"></div>\n              <p class=\"port-item-name\">\n                {{ port }}\n              </p>\n            </div>\n          }\n        </div>\n        <div class=\"routing-transport\"\n             [style.left.%]=\"progressPercent()\">\n          <kit-svg-icon class=\"routing-transport-icon\"\n                        [icon]=\"view().transportIcon ?? null\"\n                        [ngClass]=\"kitSvgIconType.FILL\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ view().destinationLabel }}</div>\n      <div class=\"routing-port-name\">{{ view().destinationPort || '-' }}</div>\n      <div class=\"routing-port-date\">{{ view().destinationDate ? (view().destinationDate | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:70px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:150px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;width:150px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:translate(30%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:translate(-30%)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:none}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingOverviewComponent, isStandalone: true, selector: "kit-shipment-routing-overview", inputs: { view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-overview\">\n  <div class=\"routing\">\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ view().originLabel }}</div>\n      <div class=\"routing-port-name\">{{ view().originPort || '-' }}</div>\n      <div class=\"routing-port-date\">{{ view().originDate ? (toUtcIsoString(view().originDate) | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n    <div class=\"routing-main\">\n      <kit-pill [theme]=\"kitPillTheme.BLUE\">\n        {{ view().transitDaysLabel }}\n      </kit-pill>\n      <div class=\"routing-route\">\n        <div class=\"routing-track\">\n          <div class=\"routing-track-progress\"\n               [style.width.%]=\"progressPercent()\"></div>\n        </div>\n        <div class=\"routing-ports\">\n          @for (port of ports(); track $index) {\n            <div class=\"port-item\"\n                 [style.left.%]=\"getPortPositionPercent($index)\"\n                 [class.port-item-completed]=\"isPortCompleted($index)\">\n              <div class=\"port-item-dot\"></div>\n              <p class=\"port-item-name\">\n                {{ port }}\n              </p>\n            </div>\n          }\n        </div>\n        <div class=\"routing-transport\"\n             [style.left.%]=\"progressPercent()\">\n          <kit-svg-icon class=\"routing-transport-icon\"\n                        [icon]=\"view().transportIcon ?? null\"\n                        [ngClass]=\"kitSvgIconType.FILL\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ view().destinationLabel }}</div>\n      <div class=\"routing-port-name\">{{ view().destinationPort || '-' }}</div>\n      <div class=\"routing-port-date\">{{ view().destinationDate ? (toUtcIsoString(view().destinationDate) | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:70px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:150px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;width:150px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:translate(30%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:translate(-30%)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:none}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:none}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingOverviewComponent, decorators: [{
             type: Component,
@@ -12440,7 +12539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         NgClass,
                         KitPillComponent,
                         KitSvgIconComponent,
-                    ], template: "<div class=\"kit-shipment-routing-overview\">\n  <div class=\"routing\">\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ view().originLabel }}</div>\n      <div class=\"routing-port-name\">{{ view().originPort || '-' }}</div>\n      <div class=\"routing-port-date\">{{ view().originDate ? (view().originDate | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n    <div class=\"routing-main\">\n      <kit-pill [theme]=\"kitPillTheme.BLUE\">\n        {{ view().transitDaysLabel }}\n      </kit-pill>\n      <div class=\"routing-route\">\n        <div class=\"routing-track\">\n          <div class=\"routing-track-progress\"\n               [style.width.%]=\"progressPercent()\"></div>\n        </div>\n        <div class=\"routing-ports\">\n          @for (port of ports(); track $index) {\n            <div class=\"port-item\"\n                 [style.left.%]=\"getPortPositionPercent($index)\"\n                 [class.port-item-completed]=\"isPortCompleted($index)\">\n              <div class=\"port-item-dot\"></div>\n              <p class=\"port-item-name\">\n                {{ port }}\n              </p>\n            </div>\n          }\n        </div>\n        <div class=\"routing-transport\"\n             [style.left.%]=\"progressPercent()\">\n          <kit-svg-icon class=\"routing-transport-icon\"\n                        [icon]=\"view().transportIcon ?? null\"\n                        [ngClass]=\"kitSvgIconType.FILL\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ view().destinationLabel }}</div>\n      <div class=\"routing-port-name\">{{ view().destinationPort || '-' }}</div>\n      <div class=\"routing-port-date\">{{ view().destinationDate ? (view().destinationDate | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:70px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:150px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;width:150px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:translate(30%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:translate(-30%)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:none}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:none}}\n"] }]
+                    ], template: "<div class=\"kit-shipment-routing-overview\">\n  <div class=\"routing\">\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ view().originLabel }}</div>\n      <div class=\"routing-port-name\">{{ view().originPort || '-' }}</div>\n      <div class=\"routing-port-date\">{{ view().originDate ? (toUtcIsoString(view().originDate) | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n    <div class=\"routing-main\">\n      <kit-pill [theme]=\"kitPillTheme.BLUE\">\n        {{ view().transitDaysLabel }}\n      </kit-pill>\n      <div class=\"routing-route\">\n        <div class=\"routing-track\">\n          <div class=\"routing-track-progress\"\n               [style.width.%]=\"progressPercent()\"></div>\n        </div>\n        <div class=\"routing-ports\">\n          @for (port of ports(); track $index) {\n            <div class=\"port-item\"\n                 [style.left.%]=\"getPortPositionPercent($index)\"\n                 [class.port-item-completed]=\"isPortCompleted($index)\">\n              <div class=\"port-item-dot\"></div>\n              <p class=\"port-item-name\">\n                {{ port }}\n              </p>\n            </div>\n          }\n        </div>\n        <div class=\"routing-transport\"\n             [style.left.%]=\"progressPercent()\">\n          <kit-svg-icon class=\"routing-transport-icon\"\n                        [icon]=\"view().transportIcon ?? null\"\n                        [ngClass]=\"kitSvgIconType.FILL\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ view().destinationLabel }}</div>\n      <div class=\"routing-port-name\">{{ view().destinationPort || '-' }}</div>\n      <div class=\"routing-port-date\">{{ view().destinationDate ? (toUtcIsoString(view().destinationDate) | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:70px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:150px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;width:150px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:translate(30%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:translate(-30%)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left;transform:none}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right;transform:none}}\n"] }]
         }], propDecorators: { view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: true }] }] } });
 
 var KitLanguage;
@@ -19327,5 +19426,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, DeletePartner, FetchApiTokens, FetchPartners, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_ALL_PERMISSIONS_PATH, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_DATE_FORMAT_SHORT, KIT_ENTITY_CREATE_SERVICE, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_LANGUAGE_LABELS, KIT_PARTNERS_STATE_TOKEN, KIT_SUPPORTED_LANGUAGES, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteSize, KitAvatarComponent, KitAvatarSize, KitBackButtonComponent, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCodeEditorComponent, KitCodeEditorLanguage, KitCodeEditorMode, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCreateEntityDialogComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldLayout, KitDataFieldState, KitDateRangeSingleInput, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDrawerMode, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEmptySectionSize, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableActionsTemplateDirective, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntitySectionLayout, KitEntityTitleComponent, KitExcelExportService, KitExpansionPanelComponent, KitExpansionPanelHeaderTemplateDirective, KitExpansionPanelToggleMode, KitExpansionPanelView, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardSize, KitFileUploadComponent, KitFileUploadTemplateType, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridActionComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridCheckboxColumnComponent, KitGridCheckboxColumnType, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridDropPosition, KitGridExportComponent, KitGridFiltersComponent, KitGridFiltersToggleComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitHttpErrorHandlerService, KitLanguage, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitLocationStepperIconTheme, KitLocationStepperTheme, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitMultiselectGroupTagTemplateDirective, KitMultiselectItemsDirection, KitMultiselectSize, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitOptionToggleSize, KitPageLayoutComponent, KitPartnerComponent, KitPartnerService, KitPartnerState, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopoverAnchorDirective, KitPopoverComponent, KitPopoverPosition, KitPopoverShowOption, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerMonthHeaderCellTemplateDirective, KitSchedulerToolbarTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSelectableCardComponent, KitShipmentRoutingCardComponent, KitShipmentRoutingOverviewComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonSectionComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineCompactComponent, KitTimelineCompactItemTheme, KitTimelineCompactLineTheme, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTreeComponent, KitTreeContentDirective, KitTreeContentFormat, KitTreeViewMode, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApiService, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserRoleDetailsComponent, KitUserRolesComponent, KitUserRolesService, KitUserRolesState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, KitUsersService, KitUsersSettingsComponent, KitUsersSettingsEntitlementType, KitUsersSettingsEntitlementsService, KitUsersSettingsEntitlementsState, KitUsersSettingsReferenceService, KitUsersSettingsState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, UpdatePartnerName, UpdateUserPreferences, buildRandomUUID, buildRoutePorts, calculateCurrentLegProgress, calculateDurationInDays, calculateMainRouteProgressPercent, changeFilterField, createDataFetcherFactory, findMatches, getLegArrivalDate, getLegDepartureDate, getMainRouteActiveLegIndex, getTextboxState, getTransportIconLegIndex, isKitFilterDescriptor, isKitLanguageSupported, isLegReachedDestination, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitUserRolesConfig, kitUsersSettingsConfig, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, DeletePartner, FetchApiTokens, FetchPartners, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_ALL_PERMISSIONS_PATH, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_DATE_FORMAT_SHORT, KIT_ENTITY_CREATE_SERVICE, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_LANGUAGE_LABELS, KIT_PARTNERS_STATE_TOKEN, KIT_SUPPORTED_LANGUAGES, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteSize, KitAvatarComponent, KitAvatarSize, KitBackButtonComponent, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCodeEditorComponent, KitCodeEditorLanguage, KitCodeEditorMode, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCreateEntityDialogComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldLayout, KitDataFieldState, KitDateRangeSingleInput, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDrawerMode, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEmptySectionSize, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableActionsTemplateDirective, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntitySectionLayout, KitEntityTitleComponent, KitExcelExportService, KitExpansionPanelComponent, KitExpansionPanelHeaderTemplateDirective, KitExpansionPanelToggleMode, KitExpansionPanelView, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardSize, KitFileUploadComponent, KitFileUploadTemplateType, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridActionComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridCheckboxColumnComponent, KitGridCheckboxColumnType, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridDropPosition, KitGridExportComponent, KitGridFiltersComponent, KitGridFiltersToggleComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitHttpErrorHandlerService, KitLanguage, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitLocationStepperIconTheme, KitLocationStepperTheme, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitMultiselectGroupTagTemplateDirective, KitMultiselectItemsDirection, KitMultiselectSize, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitOptionToggleSize, KitPageLayoutComponent, KitPartnerComponent, KitPartnerService, KitPartnerState, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopoverAnchorDirective, KitPopoverComponent, KitPopoverPosition, KitPopoverShowOption, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerMonthHeaderCellTemplateDirective, KitSchedulerToolbarTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSelectableCardComponent, KitShipmentRoutingCardComponent, KitShipmentRoutingOverviewComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonSectionComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineCompactComponent, KitTimelineCompactItemTheme, KitTimelineCompactLineTheme, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTreeComponent, KitTreeContentDirective, KitTreeContentFormat, KitTreeViewMode, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApiService, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserRoleDetailsComponent, KitUserRolesComponent, KitUserRolesService, KitUserRolesState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, KitUsersService, KitUsersSettingsComponent, KitUsersSettingsEntitlementType, KitUsersSettingsEntitlementsService, KitUsersSettingsEntitlementsState, KitUsersSettingsReferenceService, KitUsersSettingsState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, UpdatePartnerName, UpdateUserPreferences, buildRandomUUID, buildRoutePorts, calculateCurrentLegProgress, calculateDurationInDays, calculateMainRouteProgressPercent, changeFilterField, createDataFetcherFactory, findMatches, getLegArrivalDate, getLegDepartureDate, getMainRouteActiveLegIndex, getTextboxState, getTransportIconLegIndex, isKitFilterDescriptor, isKitLanguageSupported, isLegReachedDestination, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitUserRolesConfig, kitUsersSettingsConfig, kitWhitespaceValidator, mapGlobalSearchResult, toUtcIsoString, trimTrailingSlash };
 //# sourceMappingURL=indigina-ui-kit.mjs.map