@indigina/ui-kit 1.1.237 → 1.1.239

package/fesm2022/indigina-ui-kit.mjs

@@ -4704,6 +4704,7 @@ class KitPopupComponent {
         this.positionMode = input(defaultPositionMode, ...(ngDevMode ? [{ debugName: "positionMode" }] : []));
         this.popupClass = input('', ...(ngDevMode ? [{ debugName: "popupClass" }] : []));
         this.closePopupOnCancel = input(true, ...(ngDevMode ? [{ debugName: "closePopupOnCancel" }] : []));
+        this.extraInsideSelectors = input([], ...(ngDevMode ? [{ debugName: "extraInsideSelectors" }] : []));
         this.onCancel = output();
         this.onApply = output();
         this.onOpen = output();
@@ -4712,11 +4713,14 @@ class KitPopupComponent {
         this.kitButtonType = KitButtonType;
         this.popupRef = null;
         this.onDocumentClick = (event) => {
-            if (!this.popupRef) {
+            const target = event.target;
+            if (!this.popupRef || !target) {
                 return;
             }
-            const target = event.target;
-            if (target && !this.popupRef?.popupElement.contains(target) && !this.anchorElement?.contains(target)) {
+            const isInsidePopup = this.popupRef.popupElement.contains(target);
+            const isInsideAnchor = this.anchorElement.contains(target);
+            const isInsideExtra = target instanceof HTMLElement && this.extraInsideSelectors().some(sel => !!target.closest(sel));
+            if (!isInsidePopup && !isInsideAnchor && !isInsideExtra) {
                 this.close();
             }
         };
@@ -4771,7 +4775,7 @@ class KitPopupComponent {
         document.removeEventListener('click', this.onDocumentClick, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitPopupComponent, deps: [{ token: i1$c.PopupService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, closePopupOnCancel: { classPropertyName: "closePopupOnCancel", publicName: "closePopupOnCancel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitPopupComponent, isStandalone: true, selector: "kit-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonLabel: { classPropertyName: "cancelButtonLabel", publicName: "cancelButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, applyButtonLabel: { classPropertyName: "applyButtonLabel", publicName: "applyButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, isApplyButtonDisabled: { classPropertyName: "isApplyButtonDisabled", publicName: "isApplyButtonDisabled", isSignal: true, isRequired: false, transformFunction: null }, positionMode: { classPropertyName: "positionMode", publicName: "positionMode", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, closePopupOnCancel: { classPropertyName: "closePopupOnCancel", publicName: "closePopupOnCancel", isSignal: true, isRequired: false, transformFunction: null }, extraInsideSelectors: { classPropertyName: "extraInsideSelectors", publicName: "extraInsideSelectors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCancel: "onCancel", onApply: "onApply", onOpen: "onOpen", onClose: "onClose" }, providers: [
             PopupService,
             {
                 provide: POPUP_CONTAINER,
@@ -4958,6 +4962,7 @@ class KitProfileMenuComponent {
         this.KitSvgIcon = KitSvgIcon;
         this.KitPopupAlignHorizontal = KitPopupAlignHorizontal;
         this.KitSvgIconType = KitSvgIconType;
+        this.popupIsOpen = signal(false, ...(ngDevMode ? [{ debugName: "popupIsOpen" }] : []));
     }
     onClick(item) {
         item?.action && item.action();
@@ -4976,7 +4981,7 @@ class KitProfileMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popup.isPopupOpen\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--ui-kit-color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitAvatarModule }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { 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: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitProfileMenuComponent, isStandalone: true, selector: "kit-profile-menu", inputs: { menuItems: "menuItems", userName: "userName", companyName: "companyName", avatarImageSrc: "avatarImageSrc" }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popupIsOpen()\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\"\n             (onOpen)=\"popupIsOpen.set(true)\"\n             (onClose)=\"popupIsOpen.set(false)\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--ui-kit-color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitAvatarModule }, { kind: "component", type: KitAvatarComponent, selector: "kit-avatar", inputs: ["name", "imageSrc", "size"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitProfileMenuComponent, decorators: [{
             type: Component,
@@ -4986,7 +4991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         KitPopupComponent,
                         KitSvgIconModule,
                         RouterLink,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popup.isPopupOpen\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--ui-kit-color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"profile-menu\">\n  <button #menuButton\n          class=\"menu-button\"\n          [class.active]=\"popupIsOpen()\"\n          (click)=\"toggle()\">\n    <kit-avatar [size]=\"KitAvatarSize.LARGE\"\n                [name]=\"userName\"\n                [imageSrc]=\"avatarImageSrc\"\n    ></kit-avatar>\n    <kit-svg-icon class=\"menu-button-icon\"\n                  [icon]=\"KitSvgIcon.CARET_DOWN\"\n    ></kit-svg-icon>\n  </button>\n\n  <kit-popup #popup\n             popupClass=\"menu-popup\"\n             [anchor]=\"menuButton\"\n             [content]=\"content\"\n             (onOpen)=\"popupIsOpen.set(true)\"\n             (onClose)=\"popupIsOpen.set(false)\">\n  </kit-popup>\n</div>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"popup-header\">\n      <kit-avatar class=\"popup-header-avatar\"\n                  [name]=\"userName\"\n                  [size]=\"KitAvatarSize.LARGE\"\n                  [imageSrc]=\"avatarImageSrc\"\n      ></kit-avatar>\n      <div class=\"popup-header-details\">\n        @if (userName) {\n          <div class=\"popup-header-name\">{{ userName }}</div>\n        }\n        @if (companyName) {\n          <div class=\"popup-header-company\">{{ companyName }}</div>\n        }\n      </div>\n    </div>\n    <div class=\"popup-menu\">\n      @for (item of menuItems; track item) {\n        <a class=\"menu-item\"\n           [ngClass]=\"item.cssClass\"\n           [routerLink]=\"item.link\"\n           (click)=\"onClick(item)\">\n          @if (item.icon) {\n            <kit-svg-icon class=\"menu-item-icon\"\n                          [icon]=\"item.icon\"\n                          [ngClass]=\"item?.iconType ?? KitSvgIconType.FILL\"\n            ></kit-svg-icon>\n          }\n          <span class=\"menu-item-text\">{{ item.title }}</span>\n        </a>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [".profile-menu .menu-button{display:flex;align-items:center;gap:14px;padding:0;border:none;background:none;cursor:pointer}.profile-menu .menu-button-icon{display:block;width:20px;height:20px}.profile-menu .menu-button ::ng-deep .kit-badge-content{top:4px;right:5px;border-color:var(--ui-kit-color-white)}.profile-menu .menu-button.active .menu-button-icon{transform:rotate(180deg)}::ng-deep .kit-popup.menu-popup{padding:0}::ng-deep .kit-popup.menu-popup .popup-content{display:flex;flex-direction:column;gap:4px;padding:8px 4px;width:280px}::ng-deep .kit-popup.menu-popup .popup-header{display:flex;align-items:center;gap:14px;padding:6px 12px}::ng-deep .kit-popup.menu-popup .popup-header-details{min-width:0;font-size:14px}::ng-deep .kit-popup.menu-popup .popup-header-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::ng-deep .kit-popup.menu-popup .popup-menu{display:flex;flex-direction:column;gap:4px}::ng-deep .kit-popup.menu-popup .menu-item{display:flex;align-items:center;gap:8px;padding:6px 12px;color:var(--ui-kit-color-grey-10);border-radius:4px;text-decoration:none;cursor:pointer}::ng-deep .kit-popup.menu-popup .menu-item:hover{color:var(--ui-kit-color-main);background:var(--ui-kit-color-grey-13)}::ng-deep .kit-popup.menu-popup .menu-item-icon{display:block;width:18px;height:18px}::ng-deep .kit-popup.menu-popup .menu-item-icon.stroke{fill:none;stroke:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-icon.fill{stroke:none;fill:var(--ui-kit-color-main)}::ng-deep .kit-popup.menu-popup .menu-item-text{font-size:14px;font-weight:400}::ng-deep .kit-popup.menu-popup .k-popup{padding:0}\n"] }]
         }], propDecorators: { menuItems: [{
                 type: Input
             }], userName: [{
@@ -6950,7 +6955,7 @@ class KitGlobalSearchComponent {
     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 (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                    <p class=\"header\"\n                      [class.empty]=\"!category.total\">\n                      <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                      <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                    </p>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.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                          <div>\n                            <kit-pill class=\"status\"\n                                      [theme]=\"kitPillTheme.MAIN\">\n                              {{ lineItem.status }}\n                            </kit-pill>\n                          </div>\n\n                          <div class=\"subtitle\"\n                               kitHideBelowWidth\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?.from || lineItem.routePath?.to) {\n                            <kit-route-path class=\"route\"\n                                            kitHideBelowWidth\n                                            kitHideBelowWidthClass=\"hide\"\n                                            [kitHideBelowWidth]=\"132\"\n                                            [containerMode]=\"lineItem.routePath?.containerMode\"\n                                            [destinationPort]=\"lineItem.routePath?.to\"\n                                            [originPort]=\"lineItem.routePath?.from\"\n                                            [type]=\"lineItem.routePath?.type\"/>\n                          }\n                          @if (lineItem.dates?.firstDate.value) {\n                            <div class=\"dates\">\n                            <div class=\"date-wrapper first-date\">\n                              <p class=\"date-label\">\n                                <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                                <span>{{ lineItem.dates?.firstDate.label }}</span>\n                              </p>\n                              <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                            </div>\n                            </div>\n                          }\n                          @if (lineItem.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>{{ lineItem.dates?.secondDate.label }}</span>\n                                </p>\n                                <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                            </div>\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.routeConfig)\"/>\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                                [iconType]=\"kitSvgIconType.STROKE\"\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{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:calc(100% - 145px)}: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 .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: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: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;justify-content:end;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:end;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>:last-child{justify-self:end;text-align:right}: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: "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: i1$9.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"], 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: "directive", type: KitHideBelowWidthDirective, selector: "[kitHideBelowWidth]", inputs: ["kitHideBelowWidth", "kitHideBelowWidthClass"] }, { 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: [
+        ], 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 (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                    <p class=\"header\"\n                      [class.empty]=\"!category.total\">\n                      <kit-svg-icon [icon]=\"kitSvgIcon.CHECK_STICKER\"/>\n                      <span class=\"title\">{{ category.name.toUpperCase() }} ({{ category.total }})</span>\n                    </p>\n\n                    @for (lineItem of category.items.slice(0, this.displayedLineItemsNumber()); track lineItem) {\n                      <div class=\"line-item\"\n                           [class.has-link]=\"lineItem.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                          <div>\n                            <kit-pill class=\"status\"\n                                      [theme]=\"kitPillTheme.MAIN\">\n                              {{ lineItem.status }}\n                            </kit-pill>\n                          </div>\n\n                          <div class=\"subtitle\"\n                               kitHideBelowWidth\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?.from || lineItem.routePath?.to) {\n                            <kit-route-path class=\"route\"\n                                            kitHideBelowWidth\n                                            kitHideBelowWidthClass=\"hide\"\n                                            [kitHideBelowWidth]=\"132\"\n                                            [containerMode]=\"lineItem.routePath?.containerMode\"\n                                            [destinationPort]=\"lineItem.routePath?.to\"\n                                            [originPort]=\"lineItem.routePath?.from\"\n                                            [type]=\"lineItem.routePath?.type\"/>\n                          }\n                          @if (lineItem.dates?.firstDate.value) {\n                            <div class=\"dates\">\n                            <div class=\"date-wrapper first-date\">\n                              <p class=\"date-label\">\n                                <kit-svg-icon [icon]=\"kitSvgIcon.CALENDAR\"/>\n                                <span>{{ lineItem.dates?.firstDate.label }}</span>\n                              </p>\n                              <span class=\"date\">{{ lineItem.dates?.firstDate.value | date: dateFormat : 'UTC' }}</span>\n                            </div>\n                            </div>\n                          }\n                          @if (lineItem.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>{{ lineItem.dates?.secondDate.label }}</span>\n                                </p>\n                                <span class=\"date\">{{ lineItem.dates?.secondDate.value | date: dateFormat : 'UTC' }}</span>\n                            </div>\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.routeConfig)\"/>\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                                [iconType]=\"kitSvgIconType.STROKE\"\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{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:calc(100% - 145px)}: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 .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: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: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;justify-content:end;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:end;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>:last-child{justify-self:end;text-align:right}: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: "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: i1$9.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: ["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: "directive", type: KitHideBelowWidthDirective, selector: "[kitHideBelowWidth]", inputs: ["kitHideBelowWidth", "kitHideBelowWidthClass"] }, { 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 }); }
 }
@@ -7935,7 +7940,7 @@ class KitGridViewsSaveComponent {
         this.viewName.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridViewsSaveComponent, deps: [{ token: i1$e.Store }, { token: i1$7.Router }, { token: i1$7.ActivatedRoute }, { token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resetQueryParams: "resetQueryParams" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? ('kit.views.saveView' | translate) : ('kit.views.noUnsavedChanges' | translate)\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [type]=\"kitButtonType.GHOST\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          [anchor]=\"anchor()\"\n          [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"grid-views-save\">\n    <kit-autocomplete class=\"grid-views-save-input\"\n                      [placeholder]=\"'kit.views.enterText' | translate\"\n                      [allowCustom]=\"true\"\n                      [items]=\"viewsAutocompleteItems() ?? []\"\n                      [closePopupIfDataNotFound]=\"true\"\n                      [invalid]=\"!isViewNameValid\"\n                      [messageText]=\"inputMessage\"\n                      (filterChanged)=\"onValueChange($event)\"\n                      (valueChanged)=\"viewName.set($event)\"\n                      (selectionChanged)=\"onValueChange($event)\"\n    ></kit-autocomplete>\n    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!viewName() || !isViewNameValid\"\n                (clicked)=\"onViewSave()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".grid-views-save{display:flex;flex-direction:row;gap:12px;width:352px}.grid-views-save-input{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitAutocompleteModule }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitGridViewsSaveComponent, isStandalone: true, selector: "kit-grid-views-save", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: true, transformFunction: null }, viewsAutocompleteItems: { classPropertyName: "viewsAutocompleteItems", publicName: "viewsAutocompleteItems", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { resetQueryParams: "resetQueryParams" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-button #toggleButton\n            kitTooltip\n            class=\"grid-views-save-btn\"\n            kitTooltipFilter=\".grid-views-save-btn\"\n            [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n            [title]=\"hasUnsavedChanges() ? ('kit.views.saveView' | translate) : ('kit.views.noUnsavedChanges' | translate)\"\n            [active]=\"popup.isPopupOpen\"\n            [kind]=\"kitButtonKind.MEDIUM\"\n            [type]=\"kitButtonType.GHOST\"\n            [icon]=\"kitSvgIcon.DISKETTE\"\n            [disabled]=\"!hasUnsavedChanges()\"\n            (clicked)=\"onPopupToggle()\"\n></kit-button>\n\n<kit-popup #popup\n          [anchor]=\"anchor()\"\n          [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"grid-views-save\">\n    <kit-autocomplete class=\"grid-views-save-input\"\n                      [placeholder]=\"'kit.views.enterText' | translate\"\n                      [allowCustom]=\"true\"\n                      [items]=\"viewsAutocompleteItems() ?? []\"\n                      [closePopupIfDataNotFound]=\"true\"\n                      [invalid]=\"!isViewNameValid\"\n                      [messageText]=\"inputMessage\"\n                      (filterChanged)=\"onValueChange($event)\"\n                      (valueChanged)=\"viewName.set($event)\"\n                      (selectionChanged)=\"onValueChange($event)\"\n    ></kit-autocomplete>\n    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!viewName() || !isViewNameValid\"\n                (clicked)=\"onViewSave()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".grid-views-save{display:flex;flex-direction:row;gap:12px;width:352px}.grid-views-save-input{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitAutocompleteModule }, { kind: "component", type: KitAutocompleteComponent, selector: "kit-autocomplete", inputs: ["label", "placeholder", "items", "selectedValue", "disabled", "loaderVisible", "messageIcon", "messageText", "invalid", "allowCustom", "closePopupIfDataNotFound"], outputs: ["filterChanged", "valueChanged", "selectionChanged", "blured", "focused"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridViewsSaveComponent, decorators: [{
             type: Component,
@@ -8271,7 +8276,7 @@ class KitGridViewsComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitGridViewsComponent, isStandalone: true, selector: "kit-grid-views", inputs: { viewGroup: { classPropertyName: "viewGroup", publicName: "viewGroup", isSignal: true, isRequired: true, transformFunction: null }, viewConfigGroup: { classPropertyName: "viewConfigGroup", publicName: "viewConfigGroup", isSignal: true, isRequired: true, transformFunction: null }, defaultColumns: { classPropertyName: "defaultColumns", publicName: "defaultColumns", isSignal: true, isRequired: true, transformFunction: null }, defaultViewName: { classPropertyName: "defaultViewName", publicName: "defaultViewName", isSignal: true, isRequired: true, transformFunction: null }, defaultSorting: { classPropertyName: "defaultSorting", publicName: "defaultSorting", isSignal: true, isRequired: true, transformFunction: null }, systemViews: { classPropertyName: "systemViews", publicName: "systemViews", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { viewChanged: "viewChanged" }, providers: [
             TitleCasePipe,
             KitGridUrlStateService,
-        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      <div class=\"views-actions\">\n        <kit-button #toggleButton\n                    kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.addView' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"onCreateViewPopupToggle()\"\n        ></kit-button>\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views()\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n        <kit-button kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.manageViews' | translate\"\n                    [icon]=\"kitSvgIcon.VIEWS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n      <div class=\"views-list\">\n        <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                            [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                            [lineHeight]=\"32\"\n                            [gap]=\"0\"\n                            [itemTemplate]=\"collapsedListItem\"\n                            [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n                            (onSelectItem)=\"onSelectView($event)\"/>\n      </div>\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n              kitButtonType.GHOST || kitButtonType.LINK\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(anchor())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox class=\"new-view-input\"\n                 [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.set($event)\"\n    ></kit-textbox>\n    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n                (clicked)=\"onViewCreate()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["onSelectItem"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { 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: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "collapsedList", first: true, predicate: (KitCollapsedListComponent), descendants: true, isSignal: true }, { propertyName: "createNewViewPopup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-views\">\n  @if (viewsState$ | async; as viewsState) {\n    @if (!viewsState.loading) {\n      <div class=\"views-actions\">\n        <kit-button #toggleButton\n                    kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.addView' | translate\"\n                    [icon]=\"kitSvgIcon.PLUS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    (clicked)=\"onCreateViewPopupToggle()\"\n        ></kit-button>\n        <kit-grid-views-save [viewGroup]=\"viewGroup()\"\n                             [views]=\"views()\"\n                             [viewsAutocompleteItems]=\"viewsAutocompleteItems$ | async\"\n                             (resetQueryParams)=\"resetQueryParams()\"\n        ></kit-grid-views-save>\n        <kit-button kitTooltip\n                    kitTooltipFilter=\"kit-button\"\n                    [kitTooltipPosition]=\"kitTooltipPosition.TOP\"\n                    [title]=\"'kit.views.manageViews' | translate\"\n                    [icon]=\"kitSvgIcon.VIEWS\"\n                    [kind]=\"kitButtonKind.MEDIUM\"\n                    [type]=\"kitButtonType.GHOST\"\n                    [disabled]=\"views().length < 2\"\n                    (clicked)=\"openViewsManagerModal()\"\n        ></kit-button>\n      </div>\n      <div class=\"views-list\">\n        <kit-collapsed-list [itemList]=\"collapsedListItems()\"\n                            [dropdownDefaultValueText]=\"collapsedListDropdownText()\"\n                            [lineHeight]=\"32\"\n                            [gap]=\"0\"\n                            [itemTemplate]=\"collapsedListItem\"\n                            [dropdownAlign]=\"kitCollapsedListDropdownAlign.INLINE\"\n                            (onSelectItem)=\"onSelectView($event)\"/>\n      </div>\n    } @else {\n      <kit-skeleton [width]=\"200\"\n                    [height]=\"32\"\n      ></kit-skeleton>\n    }\n  }\n</div>\n\n<ng-template #collapsedListItem let-item>\n  <kit-button class=\"views-item\"\n              [ngClass]=\"item.type\"\n              [active]=\"item.title === selectedView()?.title && item.type === selectedView()?.type\"\n              [label]=\"item.title | titlecase\"\n              [type]=\"item.title === selectedView()?.title && item.type === selectedView()?.type &&\n              kitButtonType.GHOST || kitButtonType.LINK\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              [iconType]=\"item.type === gridViewType.SYSTEM && kitSvgIconType.STROKE || kitSvgIconType.FILL\"\n              [iconPosition]=\"kitButtonIconPosition.LEADING\"/>\n</ng-template>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-new-view-popup\"\n           [anchor]=\"$any(anchor())\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"new-view\">\n    <kit-textbox class=\"new-view-input\"\n                 [defaultValue]=\"createNewViewName()\"\n                 [placeholder]=\"'kit.views.enterText' | translate\"\n                 [state]=\"isViewNameValid && kitTextboxState.DEFAULT || kitTextboxState.ERROR\"\n                 [messageText]=\"inputMessage\"\n                 (changed)=\"createNewViewName.set($event)\"\n    ></kit-textbox>\n    <kit-button [label]=\"'kit.views.save' | translate\"\n                [disabled]=\"!createNewViewName() || !isViewNameValid || isViewSaving()\"\n                (clicked)=\"onViewCreate()\"\n    ></kit-button>\n  </div>\n</ng-template>\n", styles: [".kit-grid-views{display:flex;gap:16px}.kit-grid-views .views-actions{display:flex;gap:16px;padding-right:16px;border-right:1px solid var(--ui-kit-color-grey-11)}.kit-grid-views .views-list{width:100%;min-width:0}::ng-deep .views-list .views-item.system .k-button{color:var(--ui-kit-color-blue)}::ng-deep .views-list .views-item:hover .k-button{color:var(--ui-kit-color-main)}::ng-deep .views-list .views-item .k-button.active{color:var(--ui-kit-color-main)}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner{padding:0 16px}::ng-deep .views-list .collapsed-list-dropdown .dropdown .k-input-inner .value-icon{margin-left:5px}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown:focus-within .dropdown{box-shadow:none}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown{border-color:transparent;background-color:transparent}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text span{color:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown .dropdown .k-input-value-text svg{stroke:var(--ui-kit-color-main)}::ng-deep .kit-grid-views .views-list .wrapper-inner .collapsed-list-dropdown.selected .dropdown{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);background:var(--ui-kit-color-background)}::ng-deep .kit-dropdown-popup.k-popup.collapsed-list-popup{width:360px}::ng-deep .kit-popup.kit-grid-new-view-popup{width:400px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view{display:flex;flex-direction:row;gap:12px}::ng-deep .kit-popup.kit-grid-new-view-popup .new-view-input{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: KitSkeletonModule }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitGridViewsSaveComponent, selector: "kit-grid-views-save", inputs: ["viewGroup", "views", "viewsAutocompleteItems"], outputs: ["resetQueryParams"] }, { kind: "component", type: KitCollapsedListComponent, selector: "kit-collapsed-list", inputs: ["itemList", "lineHeight", "dropdownDefaultValueText", "gap", "disableActions", "itemTemplate", "dropdownFooterTemplate", "dropdownItemTemplate", "dropdownNoDataTemplate", "appendTo", "alwaysShowDropdown", "dropdownAlign"], outputs: ["onSelectItem"] }, { kind: "ngmodule", type: KitSvgIconModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KitButtonModule }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridViewsComponent, decorators: [{
             type: Component,
@@ -8405,7 +8410,7 @@ class KitFilterSelectorComponent {
         this.popup()?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterSelectorComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-selector\">\n  <kit-pill #toggleButton\n            [type]=\"kitPillType.DASHED\"\n            [selectable]=\"true\"\n            [selected]=\"popup.isPopupOpen\"\n            [icon]=\"kitSvgIcon.PLUS\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            (clicked)=\"popup.toggle()\">\n    {{ \"kit.filters.addNewFilter\" | translate }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-selector-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"filter-search\">\n      <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                   [size]=\"kitTextboxSize.SMALL\"\n                   [defaultValue]=\"searchTerm()\"\n                   (changed)=\"onSearchChange($event)\"\n      ></kit-textbox>\n    </div>\n    <div class=\"filter-items\">\n      @for (item of filterItems(); track item.field) {\n        <div class=\"filter-item\"\n             [class.disabled]=\"item.disabled\"\n             (click)=\"onItemClick(item)\">\n          {{ item.title | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--ui-kit-color-grey-12);pointer-events:none}\n"], dependencies: [{ 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: TranslateModule }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterSelectorComponent, isStandalone: true, selector: "kit-filter-selector", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-selector\">\n  <kit-pill #toggleButton\n            [type]=\"kitPillType.DASHED\"\n            [selectable]=\"true\"\n            [selected]=\"popup.isPopupOpen\"\n            [icon]=\"kitSvgIcon.PLUS\"\n            [iconType]=\"kitSvgIconType.STROKE\"\n            (clicked)=\"popup.toggle()\">\n    {{ \"kit.filters.addNewFilter\" | translate }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-selector-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"filter-search\">\n      <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                   [size]=\"kitTextboxSize.SMALL\"\n                   [defaultValue]=\"searchTerm()\"\n                   (changed)=\"onSearchChange($event)\"\n      ></kit-textbox>\n    </div>\n    <div class=\"filter-items\">\n      @for (item of filterItems(); track item.field) {\n        <div class=\"filter-item\"\n             [class.disabled]=\"item.disabled\"\n             (click)=\"onItemClick(item)\">\n          {{ item.title | translate }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-selector-popup .popup-content{width:172px;box-sizing:border-box}::ng-deep .kit-filter-selector-popup .filter-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::ng-deep .kit-filter-selector-popup .filter-items{max-height:400px;overflow-y:auto}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-selector-popup .filter-items::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-selector-popup .filter-item{padding:6px 12px;color:var(--ui-kit-color-grey-10);font-size:14px;font-weight:400;line-height:20px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .kit-filter-selector-popup .filter-item:hover{color:var(--ui-kit-color-main)}::ng-deep .kit-filter-selector-popup .filter-item.disabled{color:var(--ui-kit-color-grey-12);pointer-events:none}\n"], dependencies: [{ kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterSelectorComponent, decorators: [{
             type: Component,
@@ -8518,7 +8523,7 @@ class KitFilterCheckboxComponent {
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ buildTranslateKey(displayedValues[0]) | translate }}\n        <span class=\"tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ? (buildTranslateKey(displayedValues[0]) | translate) : '' }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-checkbox class=\"checkbox-item\"\n                  [label]=\"'kit.filters.all' | translate\"\n                  [(ngModel)]=\"allSelected\"\n                  (changed)=\"toggleAll($event)\">\n    </kit-checkbox>\n\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox .tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterCheckboxComponent, isStandalone: true, selector: "kit-filter-checkbox", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, guidField: { classPropertyName: "guidField", publicName: "guidField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ buildTranslateKey(displayedValues[0]) | translate }}\n        <span class=\"tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ? (buildTranslateKey(displayedValues[0]) | translate) : '' }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-checkbox-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-checkbox class=\"checkbox-item\"\n                  [label]=\"'kit.filters.all' | translate\"\n                  [(ngModel)]=\"allSelected\"\n                  (changed)=\"toggleAll($event)\">\n    </kit-checkbox>\n\n    @for (item of items(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange()\"\n      ></kit-checkbox>\n    }\n  </div>\n</ng-template>\n\n<ng-template #tooltipTemplate>\n  @for (item of (displayedValues.length > 1 && !allSelected() ? displayedValues.slice(1) : displayedValues); track item) {\n    <div class=\"tooltip-item\">{{ buildTranslateKey(item) | translate }}</div>\n  }\n</ng-template>\n", styles: [".kit-filter-checkbox .tooltip-count{color:var(--ui-kit-color-main)}.kit-filter-checkbox .tooltip-item{color:var(--ui-kit-color-grey-10);font-size:12px;font-weight:500;line-height:20px}::ng-deep .kit-filter-checkbox-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar{width:4px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb{background-color:var(--ui-kit-color-grey-17);border-radius:2px}::ng-deep .kit-filter-checkbox-popup .popup-content::-webkit-scrollbar-thumb:hover{background-color:var(--ui-kit-color-grey-10)}::ng-deep .kit-filter-checkbox-popup .checkbox-item{display:block;padding:6px 0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitCheckboxModule }, { kind: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible"] }, { 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: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
             type: Component,
@@ -8664,7 +8669,7 @@ class KitFilterDateComponent {
         document.removeEventListener('click', this.onDocumentClick, true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"localStartDate()\"\n                      [max]=\"localEndDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"localEndDate()\"\n                      [min]=\"localStartDate()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size"], outputs: ["changed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {\n      {{ selectedValues?.start | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n      @if (selectedValues?.start && selectedValues?.end) {\n        -\n      }\n      {{ selectedValues?.end | date: pillDateFormat : (useLocalTimeZone() ? undefined : 'UTC') }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-date-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [closeOnOutsideClick]=\"false\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"localStartDate()\"\n                      [max]=\"localEndDate()\"\n                      (changed)=\"onFromDateChange($event)\"\n      ></kit-datepicker>\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateTo' | translate\"\n                      [defaultDate]=\"localEndDate()\"\n                      [min]=\"localStartDate()\"\n                      (changed)=\"onToDateChange($event)\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup .popup-content{width:296px;box-sizing:border-box}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitDatepickerModule }, { kind: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size"], outputs: ["changed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterDateComponent, decorators: [{
             type: Component,
@@ -8786,7 +8791,7 @@ class KitFilterRadioComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterRadioComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterRadioComponent, isStandalone: true, selector: "kit-filter-radio", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-radio\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (hasSelectedFilters(selectedFilterValue)) {\n      {{ getSelectedFilterText(selectedFilterValue) | translate }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-radio-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n                      (changed)=\"onRadioButtonChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-radio-popup .popup-content{width:172px}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { 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: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterRadioComponent, isStandalone: true, selector: "kit-filter-radio", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, translateKeyPrefix: { classPropertyName: "translateKeyPrefix", publicName: "translateKeyPrefix", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-radio\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (hasSelectedFilters(selectedFilterValue)) {\n      {{ getSelectedFilterText(selectedFilterValue) | translate }}\n    }\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-radio-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled()\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"buildRadioButtonItems(items())\"\n                      (changed)=\"onRadioButtonChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-radio-popup .popup-content{width:172px}::ng-deep .kit-filter-radio-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterRadioComponent, decorators: [{
             type: Component,
@@ -8939,7 +8944,7 @@ class KitFilterInputComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterInputComponent, deps: [{ token: i1$b.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"##\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { 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: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitNumericTextboxModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size"], outputs: ["blured", "changed"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, filterInputType: { classPropertyName: "filterInputType", publicName: "filterInputType", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"##\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"], dependencies: [{ kind: "ngmodule", type: KitDropdownModule }, { kind: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "size"], outputs: ["selected"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon"], outputs: ["blured", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitNumericTextboxModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size"], outputs: ["blured", "changed"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterInputComponent, decorators: [{
             type: Component,
@@ -8950,7 +8955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                         KitTextboxModule,
                         TranslateModule,
                         KitNumericTextboxModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"##\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  @if (selectedValues()?.filters; as selectedFilters) {\n    @for (filter of selectedFilters; track $index) {\n      {{ getSelectedFilterText(filter) }}\n\n      @if ($index === 0) {\n        {{ getSelectedLogicText(selectedValues()) }}\n      }\n    }\n  }\n</kit-pill>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-input-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [isApplyButtonDisabled]=\"applyButtonDisabled\"\n           [closePopupOnCancel]=\"false\"\n           [extraInsideSelectors]=\"['.kit-dropdown-popup']\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearAllFilters()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    @for (item of filterItems().filters; track $index) {\n      <div class=\"filter-item\">\n        <kit-dropdown [items]=\"getFilterOperatorDropdownItems()\"\n                      [size]=\"kitDropdownSize.SMALL\"\n                      [selectedItem]=\"$any(item.operator)\"\n                      (selected)=\"onOperatorSelect($event.value, $index)\"\n        ></kit-dropdown>\n        <div class=\"filter-controls\">\n          @switch (filterInputType()) {\n            @case (kitFilterType.TEXT) {\n              <kit-textbox class=\"filter-item-value\"\n                           [size]=\"kitTextboxSize.SMALL\"\n                           [defaultValue]=\"item.value\"\n                           [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                           (changed)=\"onValueChange($event, $index)\"\n              ></kit-textbox>\n            }\n            @case (kitFilterType.NUMERIC) {\n              <kit-numeric-textbox class=\"filter-item-value\"\n                                   format=\"##\"\n                                   [size]=\"kitNumericTextboxSize.SMALL\"\n                                   [defaultValue]=\"item.value\"\n                                   [min]=\"0\"\n                                   [disabled]=\"isFilterValueTextboxDisabled($index)\"\n                                   (changed)=\"onValueChange($event, $index)\"\n              ></kit-numeric-textbox>\n            }\n          }\n          @if ($index === 0) {\n            <kit-dropdown class=\"logic-selector\"\n                          [selectedItem]=\"filterItems().logic\"\n                          [items]=\"filterLogicDropdownItems\"\n                          [size]=\"kitDropdownSize.SMALL\"\n                          (selected)=\"onLogicChange($event.value)\"\n            ></kit-dropdown>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n", styles: ["::ng-deep .kit-filter-input-popup .popup-content{display:flex;flex-direction:column;gap:10px;width:296px;box-sizing:border-box}::ng-deep .kit-filter-input-popup .filter-item{display:flex;flex-direction:column;gap:10px}::ng-deep .kit-filter-input-popup .filter-item-value{flex:1}::ng-deep .kit-filter-input-popup .filter-controls{display:flex;gap:10px}::ng-deep .kit-filter-input-popup .logic-selector{flex-shrink:0;width:100px}\n"] }]
         }], ctorParameters: () => [{ type: i1$b.TranslateService }] });
 
 class KitFilterNullCheckComponent {
@@ -9030,7 +9035,7 @@ class KitFilterNullCheckComponent {
         this.onOptionChange(option ?? this.options()[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterNullCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitFilterNullCheckComponent, isStandalone: true, selector: "kit-filter-null-check", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged", selectedOption: "selectedOptionChange", options: "optionsChange" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-null\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n      {{ filter().title | translate }}: {{ selectedOption()?.label }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-null-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearFilter()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"options()\"\n                      (changed)=\"onOptionChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-null-popup .popup-content{width:172px}::ng-deep .kit-filter-null-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { 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: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitFilterNullCheckComponent, isStandalone: true, selector: "kit-filter-null-check", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, transformFunction: null }, selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterRemoved: "filterRemoved", filterChanged: "filterChanged", selectedOption: "selectedOptionChange", options: "optionsChange" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }], ngImport: i0, template: "<div class=\"kit-filter-null\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n      {{ filter().title | translate }}: {{ selectedOption()?.label }}\n  </kit-pill>\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-filter-null-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\"\n           [showFooter]=\"true\"\n           [applyButtonLabel]=\"'kit.filters.apply' | translate\"\n           [cancelButtonLabel]=\"'kit.filters.clear' | translate\"\n           [closePopupOnCancel]=\"false\"\n           (onApply)=\"applyFilter()\"\n           (onCancel)=\"clearFilter()\"\n           (onClose)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-radio-button [items]=\"options()\"\n                      (changed)=\"onOptionChange($event)\"\n    ></kit-radio-button>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-null-popup .popup-content{width:172px}::ng-deep .kit-filter-null-popup .kit-radio-button .kit-radio-button-items{flex-direction:column;gap:0}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "ngmodule", type: KitTextboxModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitFilterNullCheckComponent, decorators: [{
             type: Component,
@@ -9385,7 +9390,7 @@ class KitGridExportComponent {
             .replace(/'/g, '&apos;');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridExportComponent, deps: [{ token: i1$b.TranslateService }, { token: KitNotificationService }, { token: KitGridCellService }, { token: i1$e.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitGridExportComponent, isStandalone: true, selector: "kit-grid-export", inputs: { getExportedData: { classPropertyName: "getExportedData", publicName: "getExportedData", isSignal: true, isRequired: true, transformFunction: null }, translationMap: { classPropertyName: "translationMap", publicName: "translationMap", isSignal: true, isRequired: true, transformFunction: null }, exportedFileName: { classPropertyName: "exportedFileName", publicName: "exportedFileName", isSignal: true, isRequired: true, transformFunction: null }, drawPdf: { classPropertyName: "drawPdf", publicName: "drawPdf", isSignal: true, isRequired: true, transformFunction: null }, gridHasData: { classPropertyName: "gridHasData", publicName: "gridHasData", isSignal: true, isRequired: true, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-export\">\n  <kit-button #toggleButton\n              [disabled]=\"!gridHasData() || isGridExporting()\"\n              [icon]=\"kitSvgIcon.DOWNLOAD\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-export-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <span class=\"label\">{{ \"kit.export.exportTableData\" | translate }}</span>\n  <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n                    [items]=\"gridExportOptions\" \n                    (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup .label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitGridModule }, { 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: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", type: KitGridExportComponent, isStandalone: true, selector: "kit-grid-export", inputs: { getExportedData: { classPropertyName: "getExportedData", publicName: "getExportedData", isSignal: true, isRequired: true, transformFunction: null }, translationMap: { classPropertyName: "translationMap", publicName: "translationMap", isSignal: true, isRequired: true, transformFunction: null }, exportedFileName: { classPropertyName: "exportedFileName", publicName: "exportedFileName", isSignal: true, isRequired: true, transformFunction: null }, drawPdf: { classPropertyName: "drawPdf", publicName: "drawPdf", isSignal: true, isRequired: true, transformFunction: null }, gridHasData: { classPropertyName: "gridHasData", publicName: "gridHasData", isSignal: true, isRequired: true, transformFunction: null }, visibleColumns: { classPropertyName: "visibleColumns", publicName: "visibleColumns", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true, read: KitPopupComponent, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["toggleButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"kit-grid-export\">\n  <kit-button #toggleButton\n              [disabled]=\"!gridHasData() || isGridExporting()\"\n              [icon]=\"kitSvgIcon.DOWNLOAD\"\n              [type]=\"kitButtonType.GHOST\"\n              [kind]=\"kitButtonKind.MEDIUM\"\n              (clicked)=\"onPopupToggle()\" />\n</div>\n\n<kit-popup #popup\n           popupClass=\"kit-grid-export-popup\"\n           [anchor]=\"anchor()\"\n           [content]=\"content\">\n</kit-popup>\n\n<ng-template #content>\n  <span class=\"label\">{{ \"kit.export.exportTableData\" | translate }}</span>\n  <kit-radio-button [type]=\"kitRadioButtonType.ICON_LIST\"\n                    [items]=\"gridExportOptions\" \n                    (changed)=\"onExport($event)\"/>\n</ng-template>\n", styles: ["::ng-deep .kit-grid-export-popup{width:220px}::ng-deep .kit-grid-export-popup .label{font-size:14px;font-weight:500;margin-bottom:20px;display:block}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: KitGridModule }, { 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: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["onCancel", "onApply", "onOpen", "onClose"] }, { kind: "ngmodule", type: KitRadioButtonModule }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "disabled", "type"], outputs: ["changed"] }, { kind: "pipe", type: i1$b.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: KitGridExportComponent, decorators: [{
             type: Component,