@indigina/ui-kit 1.1.602 → 1.1.603

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: [],
         })));
     }));