@indigina/ui-kit 1.1.210 → 1.1.212

package/fesm2022/indigina-ui-kit.mjs

@@ -24,7 +24,7 @@ import * as i1$6 from 'ngx-toastr';
 import { DefaultGlobalConfig, TOAST_CONFIG, ToastrModule } from 'ngx-toastr';
 import * as i1$7 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
-import { BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, tap, map, debounceTime, distinctUntilChanged, take, switchMap, of, catchError } from 'rxjs';
+import { BehaviorSubject, filter, Subject, startWith, pairwise, takeUntil, tap, map, combineLatest, debounceTime, distinctUntilChanged, take, switchMap, of, catchError } from 'rxjs';
 import * as i1$8 from '@progress/kendo-angular-dialog';
 import { KENDO_DIALOGS, DialogActionsComponent, DialogContentBase, DialogCloseResult, DialogRef } from '@progress/kendo-angular-dialog';
 export { DialogAction, DialogCloseResult, DialogContentBase, DialogRef } from '@progress/kendo-angular-dialog';
@@ -6727,12 +6727,14 @@ class KitGlobalSearchComponent {
             this.clearSearch();
         }
     }
-    constructor(router, store) {
+    constructor(router, store, datePipe) {
         this.router = router;
         this.store = store;
+        this.datePipe = datePipe;
         this.searchFn = input.required(...(ngDevMode ? [{ debugName: "searchFn" }] : []));
         this.displayedLineItemsNumber = input(3, ...(ngDevMode ? [{ debugName: "displayedLineItemsNumber" }] : []));
         this.prompts = input.required(...(ngDevMode ? [{ debugName: "prompts" }] : []));
+        this.filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
         this.textbox = viewChild.required(TextBoxComponent);
         this.anchor = viewChild.required(TextBoxComponent, { read: ElementRef });
         this.popup = viewChild('popup', ...(ngDevMode ? [{ debugName: "popup", read: KitPopupComponent }] : [{ read: KitPopupComponent }]));
@@ -6743,16 +6745,23 @@ class KitGlobalSearchComponent {
         this.kitPillTheme = KitPillTheme;
         this.kitButtonType = KitButtonType;
         this.kitButtonKind = KitButtonKind;
+        this.kitButtonIconPosition = KitButtonIconPosition;
         this.dateFormat = KIT_DATE_FORMAT;
         this.popupClass = 'kit-global-search-popup';
         this.searchResults = signal([], ...(ngDevMode ? [{ debugName: "searchResults" }] : []));
         this.searchValue = '';
         this.showPropmts = signal(true, ...(ngDevMode ? [{ debugName: "showPropmts" }] : []));
         this.userPermissions$ = this.store.select(KIT_USER_PERMISSIONS_STATE_TOKEN).pipe(map(data => data.permissions));
+        this.selectedFilters$ = new BehaviorSubject([]);
+        this.expandedFilters = new Set();
+        this.isClearing = false;
     }
     ngOnInit() {
-        this.textbox().valueChange.pipe(debounceTime(500), distinctUntilChanged(), filter((val) => val.length > 2)).subscribe(searchText => {
-            this.searchFn()(searchText).subscribe(searchRusult => {
+        combineLatest([
+            this.textbox().valueChange.pipe(debounceTime(500), distinctUntilChanged()),
+            this.selectedFilters$,
+        ]).pipe(filter(([text, _,]) => text.length > 2 && !this.isClearing)).subscribe(([text, filters,]) => {
+            this.searchFn()(text, filters).subscribe(searchRusult => {
                 this.showPropmts.set(false);
                 this.searchResults.set(searchRusult.filter(Boolean));
             });
@@ -6761,13 +6770,21 @@ class KitGlobalSearchComponent {
     get isPopupOpen() {
         return !!this.popup()?.isPopupOpen;
     }
+    get selectedFilters() {
+        return this.selectedFilters$.value;
+    }
     clearSearch() {
+        this.isClearing = true;
         this.searchValue = '';
         this.textbox().valueChange.emit('');
         this.textbox().clearValue();
         this.searchResults.set([]);
         this.showPropmts.set(true);
+        this.selectedFilters$.next([]);
         this.popup()?.close();
+        requestAnimationFrame(() => {
+            this.isClearing = false;
+        });
     }
     openPopup() {
         if (!this.popup()?.isPopupOpen) {
@@ -6797,8 +6814,60 @@ class KitGlobalSearchComponent {
         this.router.navigate(prompt.link);
         this.popup()?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGlobalSearchComponent, deps: [{ token: i1$7.Router }, { token: i1$e.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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 } }, host: { listeners: { "document:click": "documentClick($event)" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: TextBoxComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox #textbox\n                 class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [size]=\"'none'\"\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        <div class=\"search-results\">\n          @if (searchResults().length) {\n            @for (category of searchResults(); track category?.name) {\n              @if (category) {\n                <div class=\"category\">\n                  <p class=\"header\"\n                    [class.empty]=\"!category.total\">\n                    <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                    <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                  </p>\n\n                  @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track $index) {\n                    <div class=\"line-item\"\n                        [class.has-link]=\"lineItem.link\"\n                        (click)=\"navigate(lineItem.link)\">\n                      <div class=\"main-content\">\n                        <div class=\"title\">\n                          <kit-truncate-text>\n                            <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                          </kit-truncate-text>\n                        </div>\n                        <div class=\"subtitle\">\n                          <kit-truncate-text>\n                            <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                          </kit-truncate-text>\n                        </div>\n                        <div>\n                          @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n                            <kit-route-path class=\"route\"\n                                            [containerMode]=\"lineItem.routePath?.containerMode\"\n                                            [destinationPort]=\"lineItem.routePath?.to\"\n                                            [originPort]=\"lineItem.routePath?.from\"\n                                            [type]=\"lineItem.routePath?.type\"/>\n                          }\n                          @if (lineItem.status) {\n                            <kit-pill class=\"status\"\n                                      [theme]=\"kitPillTheme.MAIN\">\n                              {{ lineItem.status }}\n                            </kit-pill>\n                          }\n                        </div>\n                        <div class=\"dates first-date\">\n                          @if (lineItem.dates?.firstDate.value) {\n                            <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                            <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n                              <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                            </kit-truncate-text>\n                          }\n                        </div>\n                        @if (lineItem.dates?.secondDate.value) {\n                          <div class=\"dates second-date\">\n                              <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                              <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n                                <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                              </kit-truncate-text>\n                          </div>\n                        }\n                      </div>\n\n                      <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]=\"item.value | highlight:searchValue\"></span>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\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.categoryLink)\"/>\n                  }\n                </div>\n              }\n            }\n          } @else if (showPropmts()) {\n            <div class=\"prompts\">\n              @for (prompt of prompts(); track prompt) {\n                @if (userPermissions.includes(prompt.permission)) {\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            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\"/>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{position:relative;display:block}: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:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .kit-global-search-popup .popup-content{min-width:700px}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{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(50px,1fr) minmax(50px,1fr) minmax(200px,2fr) repeat(auto-fit,minmax(65px,1.5fr));gap:20px;align-items:center}: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 .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-path{justify-content:center}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;width:min-content;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;justify-self:end;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .main-content .dates.date{font-size:14px;line-height:20px;font-weight:500}: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 .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)}:host ::ng-deep .search-results .prompts{display:flex;gap:10px}:host ::ng-deep .empty-section{container:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$3.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onSelectFilter(filter, appliedTo) {
+        const isFilterExist = !!this.findFilter(filter.field);
+        if (isFilterExist) {
+            const updatedFilters = this.selectedFilters.filter(selectedFilter => selectedFilter.field !== filter.field);
+            this.selectedFilters$.next([
+                ...updatedFilters,
+                ...(!this.isFilterSelected(filter) ? [{
+                        ...filter,
+                        appliedTo,
+                    }] : []),
+            ]);
+        }
+        else {
+            this.selectedFilters$.next([
+                ...this.selectedFilters,
+                {
+                    ...filter,
+                    appliedTo,
+                },
+            ]);
+        }
+    }
+    isFilterSelected(filter) {
+        return !!this.findFilter(filter.field)?.value?.filters.some(item => item.value === filter.value?.filters[0].value);
+    }
+    isFilterExpanded(index) {
+        return this.expandedFilters.has(index);
+    }
+    toggleFilterExpanded(index) {
+        if (this.expandedFilters.has(index)) {
+            this.expandedFilters.delete(index);
+        }
+        else {
+            this.expandedFilters.add(index);
+        }
+    }
+    formatValue(value) {
+        if (typeof value === 'string') {
+            const date = new Date(value);
+            if (!isNaN(date.getTime())) {
+                return this.datePipe.transform(date, KIT_DATETIME_FORMAT_LONG) || value;
+            }
+        }
+        return String(value);
+    }
+    findFilter(filterField) {
+        return this.selectedFilters.find(selectedFilter => selectedFilter.field === filterField) || null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGlobalSearchComponent, deps: [{ token: i1$7.Router }, { token: i1$e.Store }, { token: i1$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", 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: [
+            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 #textbox\n                 class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [size]=\"'none'\"\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 (userPermissions.includes(prompt.permission)) {\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 (searchResults().length) {\n            <div class=\"search-results\">\n              @for (category of searchResults(); track category?.name) {\n                @if (category) {\n                  <div class=\"category\">\n                    <p class=\"header\"\n                      [class.empty]=\"!category.total\">\n                      <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                      <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                    </p>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track $index) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.link\"\n                           (click)=\"navigate(lineItem.link)\">\n                        <div class=\"main-content\">\n                          <div class=\"title\">\n                            <kit-truncate-text>\n                              <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                            </kit-truncate-text>\n                          </div>\n                          <div class=\"subtitle\">\n                            <kit-truncate-text>\n                              <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                            </kit-truncate-text>\n                          </div>\n                          <div>\n                            @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n                              <kit-route-path class=\"route\"\n                                              [containerMode]=\"lineItem.routePath?.containerMode\"\n                                              [destinationPort]=\"lineItem.routePath?.to\"\n                                              [originPort]=\"lineItem.routePath?.from\"\n                                              [type]=\"lineItem.routePath?.type\"/>\n                            }\n                            @if (lineItem.status) {\n                              <kit-pill class=\"status\"\n                                        [theme]=\"kitPillTheme.MAIN\">\n                                {{ lineItem.status }}\n                              </kit-pill>\n                            }\n                          </div>\n                          <div class=\"dates first-date\">\n                            @if (lineItem.dates?.firstDate.value) {\n                              <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                              <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n                                <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                              </kit-truncate-text>\n                            }\n                          </div>\n                          @if (lineItem.dates?.secondDate.value) {\n                            <div class=\"dates second-date\">\n                                <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                                <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n                                  <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                                </kit-truncate-text>\n                            </div>\n                          }\n                        </div>\n\n                        <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                    \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.categoryLink)\"/>\n                    }\n                  </div>\n                }\n              }\n            </div>\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                                  [iconType]=\"kitSvgIconType.STROKE\"\n                                  [kind]=\"kitButtonKind.SMALL\"\n                                  [type]=\"kitButtonType.GHOST\"\n                                  (clicked)=\"toggleFilterExpanded($index)\"/>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\"/>\n          }\n        }\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{position:relative;display:block}: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:100%}:host ::ng-deep .kit-global-search-popup{overflow:auto;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:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:700px;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(50px,1fr) minmax(50px,1fr) minmax(200px,2fr) repeat(auto-fit,minmax(65px,1.5fr));gap:20px;align-items:center}: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 .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-path{justify-content:center}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;width:min-content;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;justify-self:end;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .main-content .dates.date{font-size:14px;line-height:20px;font-weight:500}: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 .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)}: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: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: i1$3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i1$3.TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "directive", type: i1$3.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KitRoutePathComponent, selector: "kit-route-path", inputs: ["originPort", "destinationPort", "type", "containerMode"] }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text" }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], animations: [
+            expandCollapseAnimation('height'),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGlobalSearchComponent, decorators: [{
             type: Component,
@@ -6818,8 +6887,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         KitEmptySectionComponent,
                         KitPillComponent,
                         HighlightPipe,
-                    ], template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox #textbox\n                 class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [size]=\"'none'\"\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        <div class=\"search-results\">\n          @if (searchResults().length) {\n            @for (category of searchResults(); track category?.name) {\n              @if (category) {\n                <div class=\"category\">\n                  <p class=\"header\"\n                    [class.empty]=\"!category.total\">\n                    <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                    <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                  </p>\n\n                  @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track $index) {\n                    <div class=\"line-item\"\n                        [class.has-link]=\"lineItem.link\"\n                        (click)=\"navigate(lineItem.link)\">\n                      <div class=\"main-content\">\n                        <div class=\"title\">\n                          <kit-truncate-text>\n                            <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                          </kit-truncate-text>\n                        </div>\n                        <div class=\"subtitle\">\n                          <kit-truncate-text>\n                            <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                          </kit-truncate-text>\n                        </div>\n                        <div>\n                          @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n                            <kit-route-path class=\"route\"\n                                            [containerMode]=\"lineItem.routePath?.containerMode\"\n                                            [destinationPort]=\"lineItem.routePath?.to\"\n                                            [originPort]=\"lineItem.routePath?.from\"\n                                            [type]=\"lineItem.routePath?.type\"/>\n                          }\n                          @if (lineItem.status) {\n                            <kit-pill class=\"status\"\n                                      [theme]=\"kitPillTheme.MAIN\">\n                              {{ lineItem.status }}\n                            </kit-pill>\n                          }\n                        </div>\n                        <div class=\"dates first-date\">\n                          @if (lineItem.dates?.firstDate.value) {\n                            <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                            <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n                              <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                            </kit-truncate-text>\n                          }\n                        </div>\n                        @if (lineItem.dates?.secondDate.value) {\n                          <div class=\"dates second-date\">\n                              <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                              <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n                                <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                              </kit-truncate-text>\n                          </div>\n                        }\n                      </div>\n\n                      <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]=\"item.value | highlight:searchValue\"></span>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\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.categoryLink)\"/>\n                  }\n                </div>\n              }\n            }\n          } @else if (showPropmts()) {\n            <div class=\"prompts\">\n              @for (prompt of prompts(); track prompt) {\n                @if (userPermissions.includes(prompt.permission)) {\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            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\"/>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{position:relative;display:block}: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:100%}:host ::ng-deep .kit-global-search-popup{overflow-y:auto}:host ::ng-deep .kit-global-search-popup .popup-content{min-width:700px}:host ::ng-deep .global-search .k-textbox.k-input .k-input-inner{padding:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{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(50px,1fr) minmax(50px,1fr) minmax(200px,2fr) repeat(auto-fit,minmax(65px,1.5fr));gap:20px;align-items:center}: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 .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-path{justify-content:center}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;width:min-content;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;justify-self:end;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .main-content .dates.date{font-size:14px;line-height:20px;font-weight:500}: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 .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)}:host ::ng-deep .search-results .prompts{display:flex;gap:10px}:host ::ng-deep .empty-section{container:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1$7.Router }, { type: i1$e.Store }], propDecorators: { documentClick: [{
+                    ], animations: [
+                        expandCollapseAnimation('height'),
+                    ], providers: [
+                        DatePipe,
+                    ], template: "<div #container\n     class=\"global-search\"\n     [class.expanded]=\"isPopupOpen\">\n  <kendo-textbox #textbox\n                 class=\"textbox\"\n                 [placeholder]=\"'kit.globalSearch.placeholder' | translate\"\n                 [size]=\"'none'\"\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 (userPermissions.includes(prompt.permission)) {\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 (searchResults().length) {\n            <div class=\"search-results\">\n              @for (category of searchResults(); track category?.name) {\n                @if (category) {\n                  <div class=\"category\">\n                    <p class=\"header\"\n                      [class.empty]=\"!category.total\">\n                      <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                      <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                    </p>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track $index) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.link\"\n                           (click)=\"navigate(lineItem.link)\">\n                        <div class=\"main-content\">\n                          <div class=\"title\">\n                            <kit-truncate-text>\n                              <span [innerHTML]=\"lineItem.title | highlight:searchValue\"></span>\n                            </kit-truncate-text>\n                          </div>\n                          <div class=\"subtitle\">\n                            <kit-truncate-text>\n                              <span [innerHTML]=\"lineItem.subtitle || '' | highlight:searchValue\"></span>\n                            </kit-truncate-text>\n                          </div>\n                          <div>\n                            @if (lineItem.routePath?.from || lineItem.routePath?.to) {\n                              <kit-route-path class=\"route\"\n                                              [containerMode]=\"lineItem.routePath?.containerMode\"\n                                              [destinationPort]=\"lineItem.routePath?.to\"\n                                              [originPort]=\"lineItem.routePath?.from\"\n                                              [type]=\"lineItem.routePath?.type\"/>\n                            }\n                            @if (lineItem.status) {\n                              <kit-pill class=\"status\"\n                                        [theme]=\"kitPillTheme.MAIN\">\n                                {{ lineItem.status }}\n                              </kit-pill>\n                            }\n                          </div>\n                          <div class=\"dates first-date\">\n                            @if (lineItem.dates?.firstDate.value) {\n                              <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                              <kit-truncate-text>{{ lineItem.dates?.firstDate.label }} \n                                <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                              </kit-truncate-text>\n                            }\n                          </div>\n                          @if (lineItem.dates?.secondDate.value) {\n                            <div class=\"dates second-date\">\n                                <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                                <kit-truncate-text>{{ lineItem.dates?.secondDate.label }} \n                                  <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                                </kit-truncate-text>\n                            </div>\n                          }\n                        </div>\n\n                        <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                    \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.categoryLink)\"/>\n                    }\n                  </div>\n                }\n              }\n            </div>\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                                  [iconType]=\"kitSvgIconType.STROKE\"\n                                  [kind]=\"kitButtonKind.SMALL\"\n                                  [type]=\"kitButtonType.GHOST\"\n                                  (clicked)=\"toggleFilterExpanded($index)\"/>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          } @else {\n            <kit-empty-section class=\"empty-section\"\n                               [text]=\"'kit.globalSearch.noData' | translate\"/>\n          }\n        }\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: [":host{position:relative;display:block}: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:100%}:host ::ng-deep .kit-global-search-popup{overflow:auto;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:11px 8px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .search-icon{width:37px;height:37px;fill:none;stroke:var(--ui-kit-color-grey-10);padding-left:12px}:host ::ng-deep .global-search .k-textbox.k-input .kit-svg-icon .circle-cross-thin-icon{width:30px;height:30px;fill:none;stroke:var(--ui-kit-color-grey-12);padding-right:12px;cursor:pointer}:host ::ng-deep .search-results{padding:24px;flex:1}:host ::ng-deep .search-results .category:not(:last-child){margin-bottom:20px}:host ::ng-deep .search-results .category .header{display:flex;align-items:center;margin:0 0 20px}:host ::ng-deep .search-results .category .header .icon.check-sticker-icon{width:16px;height:16px;fill:var(--ui-kit-color-main);margin-right:10px}:host ::ng-deep .search-results .category .header .title{color:var(--ui-kit-color-main)}:host ::ng-deep .search-results .category .header.empty{margin:0}:host ::ng-deep .search-results .category .header.empty .icon.check-sticker-icon{fill:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .header.empty .title{color:var(--ui-kit-color-grey-12)}:host ::ng-deep .search-results .category .line-item{min-width:700px;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(50px,1fr) minmax(50px,1fr) minmax(200px,2fr) repeat(auto-fit,minmax(65px,1.5fr));gap:20px;align-items:center}: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 .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-path{justify-content:center}:host ::ng-deep .search-results .category .line-item .main-content .status{white-space:nowrap;width:min-content;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;justify-self:end;font-size:12px;line-height:14px}:host ::ng-deep .search-results .category .line-item .main-content .dates.date{font-size:14px;line-height:20px;font-weight:500}: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 .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)}: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"] }]
+        }], ctorParameters: () => [{ type: i1$7.Router }, { type: i1$e.Store }, { type: i1$1.DatePipe }], propDecorators: { documentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }] } });
@@ -6876,6 +6949,27 @@ const findMatches = (obj, translatePrefix, excludedKeys = [], search) => {
     traverse(obj, '');
     return matches;
 };
+const changeFilterField = (filter, field) => ({
+    ...filter,
+    field,
+    value: {
+        logic: filter?.value?.logic || KitFilterLogic.OR,
+        filters: filter?.value?.filters.map(item => ({
+            ...item,
+            field,
+        })) || [],
+    },
+});
+const createDataFetcherFactory = ({ serviceKey, serviceClass, filterMapper, fetchMethod, }) => {
+    return ({ services, searchText, filters }) => () => {
+        const allowedFilters = filters.filter(filter => filter.appliedTo.includes(serviceClass));
+        if (filters.length && !allowedFilters.length) {
+            return of({ total: 0, data: [] });
+        }
+        const updatedFilters = filterMapper ? allowedFilters.map(filterMapper) : allowedFilters;
+        return fetchMethod(services[serviceKey], updatedFilters, searchText);
+    };
+};
 
 // eslint-disable-next-line
 class KitSortableComponent {
@@ -6999,6 +7093,8 @@ const kitTranslations = {
                 placeholder: 'Global Search',
                 showResults: 'Show Results',
                 noData: 'No data found',
+                showMore: 'Show More',
+                showLess: 'Show Less',
             },
             columns: {
                 title: 'Columns',
@@ -9702,5 +9798,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_STATE_TOKEN, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDatepickerSize, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGlobalSearchComponent, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitSchedulerComponent, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, KitUserApplicationsState, KitUserPermissionsState, KitUserSettingKeys, KitUserSettingsComponent, KitUserSettingsState, KitUserState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, findMatches, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, mapGlobalSearchResult };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_STATE_TOKEN, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAutocompleteComponent, KitAutocompleteDirective, KitAutocompleteModule, KitAvatarComponent, KitAvatarModule, KitAvatarSize, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsModule, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonModule, KitButtonState, KitButtonType, KitCardComponent, KitCardModule, KitCardTheme, KitCheckboxComponent, KitCheckboxModule, KitCheckboxState, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCopyTextModule, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelAbstractConfirmationModule, KitCtaPanelActionComponent, KitCtaPanelActionModule, KitCtaPanelConfirmationComponent, KitCtaPanelConfirmationModule, KitCtaPanelItemComponent, KitCtaPanelItemModule, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldState, KitDatepickerComponent, KitDatepickerModule, KitDatepickerSize, KitDaterangeComponent, KitDaterangeModule, KitDaterangeType, KitDatetimepickerComponent, KitDatetimepickerModule, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownModule, KitDropdownSize, KitEmptySectionComponent, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntityTitleComponent, KitEntityTitleModule, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardModule, KitFileUploadComponent, KitFileUploadModule, KitFilterCheckboxComponent, KitFilterLogic, KitFilterOperator, KitFilterType, KitGlobalSearchComponent, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridExportComponent, KitGridFiltersComponent, KitGridModule, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitInputLabelComponent, KitInputLabelModule, KitInputMessageComponent, KitInputMessageModule, KitLoaderComponent, KitLoaderModule, KitLocationStepperComponent, KitLocationStepperModule, KitMultiselectComponent, KitMultiselectModule, KitNavigationMenuComponent, KitNavigationMenuModule, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsModule, KitNavigationTabsType, KitNoteComponent, KitNoteModule, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxModule, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitPageLayoutComponent, KitPermissionDirective, KitPermissionModule, KitPillComponent, KitPillTheme, KitPillType, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonModule, KitRadioButtonType, KitSchedulerComponent, KitSchedulerMonthEventTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSearchBarModule, KitShipmentCard, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonModule, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSvgIcon, KitSvgIconComponent, KitSvgIconModule, KitSvgIconType, KitSvgSpriteComponent, KitSvgSpriteModule, KitSwitchComponent, KitSwitchMode, KitSwitchModule, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsModule, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelModule, KitTextLabelState, KitTextareaAutoresizeDirective, KitTextareaComponent, KitTextareaModule, KitTextareaState, KitTextboxComponent, KitTextboxModule, KitTextboxSize, KitTextboxState, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTileLayoutModule, KitTimelineCardComponent, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTimepickerModule, KitTitleTemplateDirective, KitToastrModule, KitToastrPosition, KitToastrService, KitToastrType, KitToggleComponent, KitToggleModule, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTranslateService, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxModule, KitUnitsTextboxType, KitUserApplicationsState, KitUserPermissionsState, KitUserSettingKeys, KitUserSettingsComponent, KitUserSettingsState, KitUserState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, UpdateGridFilter, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, mapGlobalSearchResult };
 //# sourceMappingURL=indigina-ui-kit.mjs.map