@indigina/ui-kit 1.1.505 → 1.1.507

package/fesm2022/indigina-ui-kit.mjs

@@ -7688,192 +7688,187 @@ class KitCardDetailsComponent {
         this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
         this.cardData = signal([], ...(ngDevMode ? [{ debugName: "cardData" }] : /* istanbul ignore next */ []));
         this.total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
-        this.dataState = signal({
-            skip: 0,
-            take: 0,
-        }, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+        this.dataState = signal({ skip: 0, take: 0 }, ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
         this.newCreatedCards = signal([], ...(ngDevMode ? [{ debugName: "newCreatedCards" }] : /* istanbul ignore next */ []));
-        this.skipNewCreatedCardFilter = computed(() => {
-            return this.newCreatedCards().length ? {
+        this.showDetails = signal(false, ...(ngDevMode ? [{ debugName: "showDetails" }] : /* istanbul ignore next */ []));
+        this.skipNewCreatedCardFilter = computed(() => this.newCreatedCards().length
+            ? {
                 logic: KitFilterLogic.AND,
                 filters: this.newCreatedCards().map(card => ({
                     field: 'id',
                     operator: KitFilterOperator.NEQ,
                     value: card.id,
                 })),
-            } : {};
-        }, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : /* istanbul ignore next */ []));
-        this.shouldAppendFetchedData = true;
-        this.showDetails = false;
+            }
+            : {}, ...(ngDevMode ? [{ debugName: "skipNewCreatedCardFilter" }] : /* istanbul ignore next */ []));
+        this.shouldProcessNextData = false;
     }
     ngOnInit() {
-        this.dataState.update(state => ({
-            ...state,
-            take: this.pageSize(),
-        }));
-        this.initCardDataSubscription();
-        this.initSearchSubscription();
-        this.initStateFromUrl();
+        this.dataState.update(state => ({ ...state, take: this.pageSize() }));
+        this.initRouteListener();
+        this.initDataListener();
+        this.initSearchListener();
+        this.restoreStateFromUrl();
     }
     loadMoreData() {
-        this.shouldAppendFetchedData = true;
-        this.dataState.update(state => ({
-            ...state,
-            skip: (this.dataState()?.skip ?? 0) + this.pageSize(),
-            take: this.pageSize(),
-        }));
-        this.updateData();
+        this.dataState.update(state => ({ ...state, skip: (state.skip ?? 0) + this.pageSize(), take: this.pageSize() }));
+        this.fetchData();
     }
     onCardClick(card) {
-        const normalizedId = this.normalizeCardId(card.id);
-        this.dataState.update(state => ({ ...state, activeId: normalizedId }));
-        this.navigateToCard(normalizedId);
-        this.cardClicked.emit({ ...card, id: normalizedId });
+        this.selectCard(card, true);
     }
     appendCard(card, navigateToCard = true) {
-        this.cardData.set([
-            ...this.cardData(),
+        this.cardData.update(cards => [
+            ...cards,
             card,
         ]);
-        this.newCreatedCards.set([
-            ...this.newCreatedCards(),
+        this.newCreatedCards.update(cards => [
+            ...cards,
             card,
         ]);
-        this.dataState.update(state => ({
-            ...state,
-            filters: this.skipNewCreatedCardFilter(),
-        }));
-        this.total.set(this.total() + 1);
+        this.dataState.update(state => ({ ...state, filters: this.skipNewCreatedCardFilter() }));
+        this.total.update(total => total + 1);
         if (navigateToCard) {
-            this.onCardClick(card);
-            this.showDetails = true;
+            this.selectCard(card, true);
         }
     }
     deleteCard(cardId) {
         this.isLoading.set(true);
-        const normalizedId = this.normalizeCardId(cardId);
-        const deletedIndex = this.cardData().findIndex(card => this.normalizeCardId(card.id) === normalizedId);
-        this.cardData.set(this.cardData().filter(card => this.normalizeCardId(card.id) !== normalizedId));
-        this.total.set(this.total() - 1);
-        const remainingCards = this.cardData();
-        const nextCard = remainingCards.length ? remainingCards[deletedIndex] ?? remainingCards[deletedIndex - 1] : null;
+        const id = String(cardId);
+        const deletedIndex = this.cardData().findIndex(card => String(card.id) === id);
+        this.cardData.update(cards => cards.filter(card => String(card.id) !== id));
+        this.total.update(total => total - 1);
+        const next = this.cardData()[deletedIndex] ?? this.cardData()[deletedIndex - 1] ?? null;
         if (!this.cardData().length) {
-            this.showDetails = false;
+            this.showDetails.set(false);
         }
-        if (this.newCreatedCards().some(card => this.normalizeCardId(card.id) === normalizedId)) {
-            this.removeFromNewCreatedCards(normalizedId);
+        if (this.newCreatedCards().some(card => String(card.id) === id)) {
+            this.newCreatedCards.update(cards => cards.filter(card => String(card.id) !== id));
+            this.dataState.update(state => ({ ...state, filters: this.skipNewCreatedCardFilter() }));
             this.isLoading.set(false);
-            if (nextCard) {
-                this.onCardClick(nextCard);
+            if (next) {
+                this.selectCard(next, true);
             }
             return;
         }
-        const loadedCards = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
-        if (loadedCards >= this.total()) {
+        const loadedCount = (this.dataState().take ?? this.pageSize()) + (this.dataState().skip ?? 0) - 1;
+        if (loadedCount >= this.total()) {
             this.isLoading.set(false);
-            if (nextCard) {
-                this.onCardClick(nextCard);
+            if (next) {
+                this.selectCard(next, true);
             }
             return;
         }
-        this.showDetails = false;
-        this.shouldAppendFetchedData = true;
+        this.showDetails.set(false);
+        this.shouldProcessNextData = true;
+        this.navigateToParent();
         this.dataStateChanged.emit({
-            skip: loadedCards,
+            skip: loadedCount,
             take: 1,
             filters: this.skipNewCreatedCardFilter(),
             search: this.dataState().search,
         });
     }
     updateSpecificCardData(cardData) {
-        this.cardData.set(this.cardData().map(card => this.normalizeCardId(card.id) === this.normalizeCardId(cardData.id) ? cardData : card));
+        this.cardData.update(cards => cards.map(card => String(card.id) === String(cardData.id) ? cardData : card));
     }
     scrollToCardById(id) {
-        const cardsEl = this.host.nativeElement.querySelector('.kit-card-details .cards');
-        const el = cardsEl?.querySelector(`[data-card-id="${id}"]`) ?? null;
-        el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+        this.host.nativeElement
+            .querySelector('.kit-card-details .cards')
+            ?.querySelector(`[data-card-id="${id}"]`)
+            ?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+    }
+    initDataListener() {
+        this.cardData$().pipe(filter(({ loading }) => !loading), takeUntilDestroyed(this.destroyRef)).subscribe(({ results }) => {
+            if (!this.shouldProcessNextData) {
+                return;
+            }
+            this.shouldProcessNextData = false;
+            this.cardData.update(cards => [
+                ...cards,
+                ...results.data,
+            ]);
+            this.total.set(results.total + this.newCreatedCards().length);
+            this.isLoading.set(false);
+            const activeId = this.getActiveIdFromRoute();
+            if (!this.selectCardByRouteId(activeId) && !this.showDetails() && results.data.length) {
+                this.selectCard(results.data[0], true);
+                requestAnimationFrame(() => this.scrollToCardById(String(results.data[0].id)));
+            }
+        });
     }
-    initSearchSubscription() {
-        outputToObservable(this.kitTextboxComponent().changed).pipe(debounceTime(500), takeUntilDestroyed(this.destroyRef), map((value) => value.trim())).subscribe((searchValue) => {
+    initRouteListener() {
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd), startWith(null), map(() => this.getActiveIdFromRoute()), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef)).subscribe(activeId => this.selectCardByRouteId(activeId));
+    }
+    initSearchListener() {
+        outputToObservable(this.kitTextboxComponent().changed).pipe(debounceTime(500), map(value => value.trim()), takeUntilDestroyed(this.destroyRef)).subscribe(search => {
             this.cardData.set([]);
             this.newCreatedCards.set([]);
-            this.dataState.set({ skip: 0, take: this.pageSize(), search: searchValue || undefined, activeId: undefined });
-            this.shouldAppendFetchedData = true;
-            this.showDetails = false;
-            this.updateData();
+            this.showDetails.set(false);
+            this.dataState.set({ skip: 0, take: this.pageSize(), search: search || undefined });
+            this.fetchData();
         });
     }
-    initStateFromUrl() {
-        const { skip, search } = this.getStateFromUrl();
+    restoreStateFromUrl() {
+        const params = this.router.routerState.snapshot.root.queryParams;
+        const skip = params.skip ? Number(params.skip) : 0;
+        const search = params.search ? String(params.search) : undefined;
         if (search) {
             this.kitTextboxComponent().writeValue(search);
-            if (skip && skip > 0) {
-                this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize(), search });
-                this.dataState.set({ skip, take: this.pageSize(), search });
-            }
-            else {
-                this.isLoading.set(false);
-                this.kitTextboxComponent().changed.emit(search);
-            }
-            return;
         }
-        if (skip !== undefined) {
-            this.dataStateChanged.emit({ skip: 0, take: skip + this.pageSize() });
-            this.dataState.set({ skip, take: this.pageSize() });
+        if (skip > 0 || search) {
+            this.dataState.set({ skip, take: this.pageSize(), search });
+            this.fetchData({ skip: 0, take: skip + this.pageSize(), search }, false);
             return;
         }
-        this.updateData();
-    }
-    initCardDataSubscription() {
-        const { activeId } = this.getStateFromUrl();
-        this.cardData$().pipe(takeUntilDestroyed(this.destroyRef), filter(({ loading }) => !loading)).subscribe(data => {
-            if (this.shouldAppendFetchedData) {
-                this.cardData.set([
-                    ...this.cardData(),
-                    ...data.results.data,
-                ]);
-                this.total.set(data.results.total + this.newCreatedCards().length);
-                this.shouldAppendFetchedData = false;
-                if (activeId && !this.dataState().activeId) {
-                    const activeCard = this.cardData().find(item => this.normalizeCardId(item.id) === activeId);
-                    if (activeCard) {
-                        this.selectNewLoadedCard(activeCard);
-                        return;
-                    }
-                }
-                if (!this.showDetails && data.results.data.length) {
-                    this.selectNewLoadedCard(data.results.data[0]);
-                }
-            }
-            this.isLoading.set(false);
-        });
+        this.fetchData();
     }
-    updateData() {
+    fetchData(emitState, writeToUrl = true) {
         this.isLoading.set(true);
-        this.setQueryParamsToUrl(this.dataState());
-        this.dataStateChanged.emit(this.dataState());
+        this.shouldProcessNextData = true;
+        if (writeToUrl) {
+            this.writeQueryParamsToUrl(this.dataState());
+        }
+        this.dataStateChanged.emit(emitState ?? this.dataState());
     }
-    normalizeCardId(id) {
-        return id.toString();
+    selectCard(card, navigate) {
+        const id = String(card.id);
+        this.isLoading.set(false);
+        this.showDetails.set(true);
+        this.dataState.update(state => ({ ...state, activeId: id }));
+        if (navigate) {
+            this.router.navigate([id], { relativeTo: this.activatedRoute, queryParamsHandling: 'preserve' });
+        }
+        this.cardClicked.emit({ ...card, id });
     }
-    removeFromNewCreatedCards(cardId) {
-        this.newCreatedCards.set(this.newCreatedCards().filter(card => this.normalizeCardId(card.id) !== cardId));
-        this.dataState.update(state => ({
-            ...state,
-            filters: this.skipNewCreatedCardFilter(),
-        }));
+    selectCardByRouteId(activeId) {
+        if (!activeId) {
+            return false;
+        }
+        if (this.dataState().activeId === activeId) {
+            this.showDetails.set(true);
+            return true;
+        }
+        const card = this.cardData().find(card => String(card.id) === activeId);
+        if (!card) {
+            return false;
+        }
+        this.selectCard(card, false);
+        requestAnimationFrame(() => this.scrollToCardById(activeId));
+        return true;
     }
-    getStateFromUrl() {
-        const queryParams = this.activatedRoute.snapshot.queryParams;
-        const routeParams = this.activatedRoute.snapshot.firstChild?.params ?? this.activatedRoute.snapshot.params;
-        return {
-            skip: queryParams?.skip && Number(queryParams.skip),
-            take: queryParams?.take && Number(queryParams.take),
-            search: queryParams?.search && String(queryParams.search),
-            activeId: routeParams?.id && String(routeParams.id),
-        };
+    getActiveIdFromRoute() {
+        let snapshot = this.activatedRoute.snapshot;
+        let activeId;
+        while (snapshot) {
+            if (snapshot.params.id !== undefined) {
+                activeId = String(snapshot.params.id);
+            }
+            snapshot = snapshot.firstChild;
+        }
+        return activeId;
     }
-    setQueryParamsToUrl(state) {
+    writeQueryParamsToUrl(state) {
         const queryParams = Object.keys(state).reduce((acc, key) => {
             const val = state[key];
             if (val !== undefined && val !== '' && key !== 'filters' && key !== 'activeId') {
@@ -7881,41 +7876,25 @@ class KitCardDetailsComponent {
             }
             return acc;
         }, {});
-        this.router.navigate([], {
-            relativeTo: this.activatedRoute,
-            queryParams,
-            queryParamsHandling: 'replace',
-        });
+        this.router.navigate([], { relativeTo: this.activatedRoute, queryParams, queryParamsHandling: 'replace' });
     }
-    navigateToCard(id) {
-        this.router.navigate([id], {
-            relativeTo: this.activatedRoute,
-            queryParamsHandling: 'preserve',
-        });
-    }
-    selectNewLoadedCard(card) {
-        this.isLoading.set(false);
-        this.showDetails = true;
-        this.onCardClick(card);
-        requestAnimationFrame(() => {
-            this.scrollToCardById(card.id.toString());
-        });
+    navigateToParent() {
+        this.router.navigate(['./'], { relativeTo: this.activatedRoute, queryParamsHandling: 'preserve' });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCardDetailsComponent, isStandalone: true, selector: "kit-card-details", inputs: { cardData$: { classPropertyName: "cardData$", publicName: "cardData$", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, cardSkeletonConfig: { classPropertyName: "cardSkeletonConfig", publicName: "cardSkeletonConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataStateChanged: "dataStateChanged", cardClicked: "cardClicked" }, queries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true, isSignal: true }, { propertyName: "headerActions", first: true, predicate: ["headerActions"], descendants: true, isSignal: true }, { propertyName: "details", first: true, predicate: ["details"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-card-details\">\n  <div class=\"header\">\n    <kit-entity-title class=\"title\">\n      {{ title() }}\n    </kit-entity-title>\n    <ng-container *ngTemplateOutlet=\"headerActions()\" />\n  </div>\n\n  <div class=\"content\">\n    <div class=\"left-panel\">\n      <div class=\"textbox-wrapper\">\n        <kit-textbox class=\"search-textbox\"\n                     [placeholder]=\"'kit.search.placeholder' | translate\"\n                     [icon]=\"kitSvgIcon.SEARCH\"\n                     [clearButton]=\"true\"\n                     [showStateIcon]=\"false\" />\n      </div>\n\n      <div class=\"cards\">\n        @if (cardData$() | async; as cards) {\n          @if (cards.loading) {\n            @if (cardSkeletonConfig(); as config) {\n              @for (_ of [].constructor(config.itemsCount); track $index) {\n                <kit-skeleton [width]=\"'100%'\"\n                              [height]=\"config.itemHeight\" />\n              }\n            }\n          } @else {\n            @if (cardData().length === 0 && newCreatedCards().length === 0 && !isLoading()) {\n              <kit-empty-section [text]=\"'kit.common.noData' | translate\" />\n            } @else {\n              @for (card of cardData(); track $index) {\n                <div class=\"card\"\n                     [attr.data-card-id]=\"card.id\"\n                     [class.active]=\"dataState().activeId === (card.id).toString()\"\n                     (click)=\"onCardClick(card)\">\n                  <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n                </div>\n              }\n\n              @if (cardData().length && (total() > cardData().length)) {\n                <kit-button class=\"load-more-btn\"\n                            [label]=\"'kit.common.loadMore' | translate\"\n                            [type]=\"kitButtonType.GHOST\"\n                            [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n                            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                            [disabled]=\"isLoading()\"\n                            (clicked)=\"loadMoreData()\" />\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n\n    @if (showDetails) {\n      <div class=\"details\">\n        <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-svg-i-x.k-svg-icon{background-image:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"], dependencies: [{ kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitCardDetailsComponent, isStandalone: true, selector: "kit-card-details", inputs: { cardData$: { classPropertyName: "cardData$", publicName: "cardData$", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, cardSkeletonConfig: { classPropertyName: "cardSkeletonConfig", publicName: "cardSkeletonConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataStateChanged: "dataStateChanged", cardClicked: "cardClicked" }, queries: [{ propertyName: "cardElement", first: true, predicate: ["cardElement"], descendants: true, isSignal: true }, { propertyName: "headerActions", first: true, predicate: ["headerActions"], descendants: true, isSignal: true }, { propertyName: "details", first: true, predicate: ["details"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "kitTextboxComponent", first: true, predicate: KitTextboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"kit-card-details\">\n  <div class=\"header\">\n    <kit-entity-title class=\"title\">\n      {{ title() }}\n    </kit-entity-title>\n    <ng-container *ngTemplateOutlet=\"headerActions()\" />\n  </div>\n\n  <div class=\"content\">\n    <div class=\"left-panel\">\n      <div class=\"textbox-wrapper\">\n        <kit-textbox class=\"search-textbox\"\n                     [placeholder]=\"'kit.search.placeholder' | translate\"\n                     [icon]=\"kitSvgIcon.SEARCH\"\n                     [clearButton]=\"true\"\n                     [showStateIcon]=\"false\" />\n      </div>\n\n      <div class=\"cards\">\n        @if (isLoading() && cardData().length === 0) {\n          @if (cardSkeletonConfig(); as config) {\n            @for (_ of [].constructor(config.itemsCount); track $index) {\n              <kit-skeleton [width]=\"'100%'\"\n                            [height]=\"config.itemHeight\" />\n            }\n          }\n        } @else if (cardData().length === 0 && newCreatedCards().length === 0) {\n          <kit-empty-section [text]=\"'kit.common.noData' | translate\" />\n        } @else {\n          @for (card of cardData(); track $index) {\n            <div class=\"card\"\n                 [attr.data-card-id]=\"card.id\"\n                 [class.active]=\"dataState().activeId === (card.id).toString()\"\n                 (click)=\"onCardClick(card)\">\n              <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n            </div>\n          }\n\n          @if (cardData().length && (total() > cardData().length)) {\n            <kit-button class=\"load-more-btn\"\n                        [label]=\"'kit.common.loadMore' | translate\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [disabled]=\"isLoading()\"\n                        (clicked)=\"loadMoreData()\" />\n          }\n        }\n      </div>\n    </div>\n\n    @if (showDetails()) {\n      <div class=\"details\">\n        <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-svg-i-x.k-svg-icon{background-image:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KitSkeletonComponent, selector: "kit-skeleton", inputs: ["width", "height", "shape", "animation"] }, { kind: "component", type: KitEmptySectionComponent, selector: "kit-empty-section", inputs: ["text"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "component", type: KitEntityTitleComponent, selector: "kit-entity-title" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitCardDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kit-card-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        AsyncPipe,
+                        NgTemplateOutlet,
                         KitSkeletonComponent,
                         KitEmptySectionComponent,
                         KitButtonComponent,
                         TranslatePipe,
                         KitTextboxComponent,
-                        NgTemplateOutlet,
                         KitEntityTitleComponent,
-                    ], template: "<div class=\"kit-card-details\">\n  <div class=\"header\">\n    <kit-entity-title class=\"title\">\n      {{ title() }}\n    </kit-entity-title>\n    <ng-container *ngTemplateOutlet=\"headerActions()\" />\n  </div>\n\n  <div class=\"content\">\n    <div class=\"left-panel\">\n      <div class=\"textbox-wrapper\">\n        <kit-textbox class=\"search-textbox\"\n                     [placeholder]=\"'kit.search.placeholder' | translate\"\n                     [icon]=\"kitSvgIcon.SEARCH\"\n                     [clearButton]=\"true\"\n                     [showStateIcon]=\"false\" />\n      </div>\n\n      <div class=\"cards\">\n        @if (cardData$() | async; as cards) {\n          @if (cards.loading) {\n            @if (cardSkeletonConfig(); as config) {\n              @for (_ of [].constructor(config.itemsCount); track $index) {\n                <kit-skeleton [width]=\"'100%'\"\n                              [height]=\"config.itemHeight\" />\n              }\n            }\n          } @else {\n            @if (cardData().length === 0 && newCreatedCards().length === 0 && !isLoading()) {\n              <kit-empty-section [text]=\"'kit.common.noData' | translate\" />\n            } @else {\n              @for (card of cardData(); track $index) {\n                <div class=\"card\"\n                     [attr.data-card-id]=\"card.id\"\n                     [class.active]=\"dataState().activeId === (card.id).toString()\"\n                     (click)=\"onCardClick(card)\">\n                  <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n                </div>\n              }\n\n              @if (cardData().length && (total() > cardData().length)) {\n                <kit-button class=\"load-more-btn\"\n                            [label]=\"'kit.common.loadMore' | translate\"\n                            [type]=\"kitButtonType.GHOST\"\n                            [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n                            [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                            [disabled]=\"isLoading()\"\n                            (clicked)=\"loadMoreData()\" />\n              }\n            }\n          }\n        }\n      </div>\n    </div>\n\n    @if (showDetails) {\n      <div class=\"details\">\n        <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-svg-i-x.k-svg-icon{background-image:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"] }]
+                    ], template: "<div class=\"kit-card-details\">\n  <div class=\"header\">\n    <kit-entity-title class=\"title\">\n      {{ title() }}\n    </kit-entity-title>\n    <ng-container *ngTemplateOutlet=\"headerActions()\" />\n  </div>\n\n  <div class=\"content\">\n    <div class=\"left-panel\">\n      <div class=\"textbox-wrapper\">\n        <kit-textbox class=\"search-textbox\"\n                     [placeholder]=\"'kit.search.placeholder' | translate\"\n                     [icon]=\"kitSvgIcon.SEARCH\"\n                     [clearButton]=\"true\"\n                     [showStateIcon]=\"false\" />\n      </div>\n\n      <div class=\"cards\">\n        @if (isLoading() && cardData().length === 0) {\n          @if (cardSkeletonConfig(); as config) {\n            @for (_ of [].constructor(config.itemsCount); track $index) {\n              <kit-skeleton [width]=\"'100%'\"\n                            [height]=\"config.itemHeight\" />\n            }\n          }\n        } @else if (cardData().length === 0 && newCreatedCards().length === 0) {\n          <kit-empty-section [text]=\"'kit.common.noData' | translate\" />\n        } @else {\n          @for (card of cardData(); track $index) {\n            <div class=\"card\"\n                 [attr.data-card-id]=\"card.id\"\n                 [class.active]=\"dataState().activeId === (card.id).toString()\"\n                 (click)=\"onCardClick(card)\">\n              <ng-container *ngTemplateOutlet=\"cardElement(); context: { $implicit: card }\" />\n            </div>\n          }\n\n          @if (cardData().length && (total() > cardData().length)) {\n            <kit-button class=\"load-more-btn\"\n                        [label]=\"'kit.common.loadMore' | translate\"\n                        [type]=\"kitButtonType.GHOST\"\n                        [icon]=\"isLoading() ? kitSvgIcon.RELOAD : kitSvgIcon.CHEVRON_DOWN\"\n                        [iconPosition]=\"kitButtonIconPosition.LEADING\"\n                        [disabled]=\"isLoading()\"\n                        (clicked)=\"loadMoreData()\" />\n          }\n        }\n      </div>\n    </div>\n\n    @if (showDetails()) {\n      <div class=\"details\">\n        <ng-container *ngTemplateOutlet=\"details(); context: { $implicit: dataState().activeId }\" />\n      </div>\n    }\n  </div>\n</div>\n", styles: [".kit-card-details{height:calc(100vh - var(--ui-kit-header-height) - 50px)}.kit-card-details .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.kit-card-details .content{display:flex;gap:10px;height:calc(100% - 50px)}.kit-card-details .left-panel{width:25%}.kit-card-details .left-panel .textbox-wrapper{margin-right:10px;margin-bottom:20px}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox-input .kit-svg-icon{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-textbox{background-color:var(--ui-kit-color-white)}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox .k-svg-i-x.k-svg-icon{background-image:none}.kit-card-details .left-panel .textbox-wrapper ::ng-deep .kit-textbox.disabled .k-input-inner{background-color:var(--ui-kit-color-grey-13)}.kit-card-details .left-panel .cards{overflow:hidden auto;padding-right:10px;display:flex;flex-direction:column;gap:10px;height:calc(100% - 60px)}.kit-card-details .left-panel .cards .card{background-color:var(--ui-kit-color-white);border:2px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:8px 10px;cursor:pointer}.kit-card-details .left-panel .cards .card.active{border-color:var(--ui-kit-color-main)}.kit-card-details .left-panel .cards .load-more-btn{margin:10px auto auto}.kit-card-details .details{overflow:hidden auto;flex:1;min-width:0;border:1px solid var(--ui-kit-color-grey-11);border-radius:8px;padding:20px;height:100%}\n"] }]
         }], propDecorators: { cardData$: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardData$", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], cardSkeletonConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardSkeletonConfig", required: false }] }], dataStateChanged: [{ type: i0.Output, args: ["dataStateChanged"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], kitTextboxComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }], cardElement: [{ type: i0.ContentChild, args: ['cardElement', { isSignal: true }] }], headerActions: [{ type: i0.ContentChild, args: ['headerActions', { isSignal: true }] }], details: [{ type: i0.ContentChild, args: ['details', { isSignal: true }] }] } });
 
 class KitAbstractPayloadAction {
@@ -8159,7 +8138,7 @@ const convertFilterStringDate = (filters, columns, userTimeZone) => filters.map(
         const column = columns?.find(col => col.field === filter.field);
         const timeZoneOffset = getTimeZoneOffset(userTimeZone, column);
         const filters = filter.value.dateRange
-            ? getValueFiltersByRange(filter.value.dateRange, timeZoneOffset, filter.field, column?.customRangeHandler)
+            ? getValueFiltersByRange(filter.value.dateRange, timeZoneOffset, filter.field, column?.customRangeHandler, column?.dateFilterConstraint)
             : getValueFilters(filter.value);
         return {
             ...filter,
@@ -8209,7 +8188,7 @@ const normalizeGuidFilter = (filter) => {
     const guidFormat = /'((\{)?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}(\})?)'/g;
     return filter.replace(guidFormat, '$1');
 };
-const getDatesByRange = (range, timezoneOffset = 'UTC', dateRangeHandler) => {
+const getDatesByRange = (range, timezoneOffset = 'UTC', dateRangeHandler, useEndOfDayForEndDate = true) => {
     const now = new Date();
     let endDate = new Date(now.setHours(0, 0, 0, 0));
     let startDate = new Date();
@@ -8238,11 +8217,12 @@ const getDatesByRange = (range, timezoneOffset = 'UTC', dateRangeHandler) => {
     }
     return [
         kitNormalizeDateToUtc(startDate, timezoneOffset),
-        kitNormalizeDateToUtc(endDate, timezoneOffset, true),
+        kitNormalizeDateToUtc(endDate, timezoneOffset, useEndOfDayForEndDate),
     ];
 };
-const getValueFiltersByRange = (range, timezoneOffset = 'UTC', field, dateRangeHandler) => {
-    const [startDate, endDate,] = getDatesByRange(range, timezoneOffset, dateRangeHandler);
+const getValueFiltersByRange = (range, timezoneOffset = 'UTC', field, dateRangeHandler, dateFilterConstraint) => {
+    const useEndOfDayForEndDate = !dateFilterConstraint;
+    const [startDate, endDate,] = getDatesByRange(range, timezoneOffset, dateRangeHandler, useEndOfDayForEndDate);
     return [
         {
             operator: KitFilterOperator.GTE,
@@ -8272,6 +8252,7 @@ const kitBuildFilters = (filters) => ({
         const cleanedFilter = filterEmptyValues(filter.value);
         return {
             ...cleanedFilter,
+            field: filter.field,
             isCustomField: filter.type === KitFilterType.CUSTOM_INPUT,
         };
     }),
@@ -8285,7 +8266,7 @@ const kitFormatStringForSearch = (inputString) => {
         .join(' ');
 };
 
-const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType, excelFormat, apiField, hiddenInGrid, customFieldHandler, customRangeHandler) => ({
+const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false, width, filterType, excelFormat, apiField, hiddenInGrid, customFieldHandler, customRangeHandler, dateFilterConstraint) => ({
     field,
     title,
     sortable,
@@ -8296,6 +8277,7 @@ const kitBuildGridColumn = (field, title, type, sortable = true, hidden = false,
     excelFormat,
     apiField,
     hiddenInGrid,
+    dateFilterConstraint,
     customFieldHandler,
     customRangeHandler,
 });
@@ -8328,7 +8310,7 @@ const kitFetchGridData = ({ store, destroyRef, isLoading, fetchAction, fetchFrom
     const isArchive = hasArchiveToggle && archive || false;
     const isSearchMode = hasArchiveToggle && !isArchive || !!search;
     const searchTerm = search && kitFormatStringForSearch(search) || undefined;
-    const action = isSearchMode && fetchFromIndexAction({ ...gridState, searchTerm }) || fetchAction(gridState);
+    const action = (isSearchMode && fetchFromIndexAction) ? fetchFromIndexAction({ ...gridState, searchTerm }) : fetchAction(gridState);
     store.dispatch(action).pipe(takeUntilDestroyed(destroyRef), finalize(() => isLoading.set(false))).subscribe({ error });
 };
 const kitFetchExportGridData = ({ fetchAction, fetchIndexAction, sort, filter, search, columns, total, hasArchiveToggle = false, archiveModeEnabled = false, }) => {
@@ -11281,7 +11263,7 @@ class KitFilterCheckboxComponent {
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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: "popupContent", first: true, predicate: ["popupContent"], 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=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ displayedValues[0] }}\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ?? '' }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\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=\"kit-filter-checkbox-tooltip-item\">{{ item }}</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-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::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;height: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: TranslateModule }, { 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$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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: "popupContent", first: true, predicate: ["popupContent"], 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 && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ displayedValues[0] }}\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ?? '' }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\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=\"kit-filter-checkbox-tooltip-item\">{{ item }}</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-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::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;height: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: TranslateModule }, { 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$8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCheckboxComponent, decorators: [{
             type: Component,
@@ -11293,7 +11275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         FormsModule,
                         KitPopupComponent,
                         KitTextboxComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ displayedValues[0] }}\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ?? '' }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\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=\"kit-filter-checkbox-tooltip-item\">{{ item }}</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-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::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;height: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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-checkbox\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (allSelected()) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ 'kit.filters.all' | translate }}\n      </div>\n    } @else if (displayedValues.length > 1) {\n      <div class=\"kit-filter-checkbox-tooltip\"\n           kitTooltip\n           kitTooltipFilter=\".kit-filter-checkbox-tooltip\"\n           [kitTooltipPosition]=\"kitTooltipPosition.RIGHT\"\n           [kitTooltipTemplateRef]=\"tooltipTemplate\">\n        {{ displayedValues[0] }}\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      {{ displayedValues[0] ?? '' }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-search\"\n       [hidden]=\"!isContentOverflowing && !searchTerm()\">\n    <kit-textbox [placeholder]=\"'kit.filters.search' | translate\"\n                 [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"searchTerm()\"\n                 (changed)=\"searchTerm.set($event)\"\n    ></kit-textbox>\n  </div>\n\n  <div #popupContent\n       class=\"popup-content\">\n    @if (!searchTerm()) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"'kit.filters.all' | translate\"\n                    [(ngModel)]=\"allSelected\"\n                    (changed)=\"toggleAll($event)\">\n      </kit-checkbox>\n    }\n\n    @for (item of visibleItems(); track $index) {\n      <kit-checkbox class=\"checkbox-item\"\n                    [label]=\"buildTranslateKey(item.title) | translate\"\n                    [(ngModel)]=\"item.checked\"\n                    (changed)=\"onChange($event, item.value)\"\n      ></kit-checkbox>\n    }\n\n    @if (!visibleItems().length) {\n      {{ ('kit.filters.noDataFound' | translate) }}\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=\"kit-filter-checkbox-tooltip-item\">{{ item }}</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-search{margin-bottom:5px;padding-bottom:15px;border-bottom:1px solid var(--ui-kit-color-grey-11)}::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;height: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"] }]
         }], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], guidField: [{ type: i0.Input, args: [{ isSignal: true, alias: "guidField", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popupContent: [{ type: i0.ViewChild, args: ['popupContent', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterDateComponent {
@@ -11302,6 +11284,7 @@ class KitFilterDateComponent {
         this.filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
         this.useUserTimeZone = input(false, ...(ngDevMode ? [{ debugName: "useUserTimeZone" }] : /* istanbul ignore next */ []));
         this.useLocalTimeZone = input(false, ...(ngDevMode ? [{ debugName: "useLocalTimeZone" }] : /* istanbul ignore next */ []));
+        this.dateFilterConstraint = input(...(ngDevMode ? [undefined, { debugName: "dateFilterConstraint" }] : /* istanbul ignore next */ []));
         this.filterRemoved = output();
         this.filterChanged = output();
         this.anchor = viewChild.required('toggleButton', { read: ElementRef });
@@ -11324,6 +11307,24 @@ class KitFilterDateComponent {
             const endDate = this.endDate();
             return (!endDate || this.useLocalTimeZone()) ? endDate : toZonedTime(endDate, this.timeZone());
         }, ...(ngDevMode ? [{ debugName: "localEndDate" }] : /* istanbul ignore next */ []));
+        this.minDateConstraint = computed(() => {
+            const constraint = this.dateFilterConstraint();
+            const selectedEndDate = this.localEndDate();
+            if (!selectedEndDate) {
+                return undefined;
+            }
+            const ranges = this.calculateDateRangeConstraints(selectedEndDate, constraint);
+            return ranges.min;
+        }, ...(ngDevMode ? [{ debugName: "minDateConstraint" }] : /* istanbul ignore next */ []));
+        this.maxDateConstraint = computed(() => {
+            const constraint = this.dateFilterConstraint();
+            const selectedStartDate = this.localStartDate();
+            if (!selectedStartDate) {
+                return undefined;
+            }
+            const ranges = this.calculateDateRangeConstraints(selectedStartDate, constraint);
+            return ranges.max;
+        }, ...(ngDevMode ? [{ debugName: "maxDateConstraint" }] : /* istanbul ignore next */ []));
         this.pointerDownStartedInsideArea = false;
         this.rafId = null;
         this.onDocumentMouseDown = (event) => {
@@ -11373,7 +11374,8 @@ class KitFilterDateComponent {
     }
     onToDateChange(date) {
         this.dateRange.set(undefined);
-        const endDate = this.useLocalTimeZone() ? date : kitNormalizeDateToUtc(date, this.timeZone(), true);
+        const isEndOfDay = !this.dateFilterConstraint();
+        const endDate = this.useLocalTimeZone() ? date : kitNormalizeDateToUtc(date, this.timeZone(), isEndOfDay);
         this.endDate.set(endDate);
     }
     applyButtonDisabled() {
@@ -11409,7 +11411,8 @@ class KitFilterDateComponent {
         this.selectedValues.set(dates);
     }
     selectDateRange(range) {
-        const [startDate, endDate,] = getDatesByRange(range, this.timeZone());
+        const useEndOfDayForEndDate = !this.dateFilterConstraint();
+        const [startDate, endDate,] = getDatesByRange(range, this.timeZone(), undefined, useEndOfDayForEndDate);
         this.startDate.set(startDate);
         this.endDate.set(endDate);
         this.dateRange.set(range);
@@ -11454,8 +11457,22 @@ class KitFilterDateComponent {
             anchorElement?.contains(target) ||
             insideDatePicker);
     }
+    calculateDateRangeConstraints(selectedDate, constraint) {
+        if (constraint && selectedDate) {
+            const months = constraint.months ?? 0;
+            const days = constraint.days ?? 0;
+            const minDate = new Date(selectedDate);
+            const maxDate = new Date(selectedDate);
+            minDate.setMonth(minDate.getMonth() - months);
+            maxDate.setMonth(maxDate.getMonth() + months);
+            minDate.setDate(minDate.getDate() - days);
+            maxDate.setDate(maxDate.getDate() + days);
+            return { min: minDate, max: maxDate };
+        }
+        return {};
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, useUserTimeZone: { classPropertyName: "useUserTimeZone", publicName: "useUserTimeZone", isSignal: true, isRequired: false, 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      {{ localStartDate() | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {        \n        -\n      }\n      {{ localEndDate() | date: pillDateFormat }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-actions\">\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.today' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.TODAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.TODAY)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastWeek' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_WEEK\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_WEEK)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastMonth' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_MONTH\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_MONTH)\" />\n  </div>\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 .popup-actions{display:flex;justify-content:space-between;gap:5px;margin-bottom:15px}::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: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size", "readonly"], outputs: ["defaultDateChange", "disabledChange", "changed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, useUserTimeZone: { classPropertyName: "useUserTimeZone", publicName: "useUserTimeZone", isSignal: true, isRequired: false, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null }, dateFilterConstraint: { classPropertyName: "dateFilterConstraint", publicName: "dateFilterConstraint", 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 && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {      \n      {{ localStartDate() | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {        \n        -\n      }\n      {{ localEndDate() | date: pillDateFormat }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-actions\">\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.today' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.TODAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.TODAY)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastWeek' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_WEEK\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_WEEK)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastMonth' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_MONTH\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_MONTH)\" />\n  </div>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"localStartDate()\"\n                      [min]=\"minDateConstraint()\"\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                      [max]=\"maxDateConstraint()\"\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 .popup-actions{display:flex;justify-content:space-between;gap:5px;margin-bottom:15px}::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: "component", type: KitDatepickerComponent, selector: "kit-datepicker", inputs: ["placeholder", "label", "labelTooltip", "defaultDate", "disabled", "format", "min", "max", "messageIcon", "messageText", "size", "readonly"], outputs: ["defaultDateChange", "disabledChange", "changed"] }, { kind: "component", type: KitPopupComponent, selector: "kit-popup", inputs: ["anchor", "content", "closeOnOutsideClick", "showFooter", "cancelButtonLabel", "applyButtonLabel", "isApplyButtonDisabled", "positionMode", "popupClass", "closePopupOnCancel", "extraInsideSelectors"], outputs: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitButtonComponent, selector: "kit-button", inputs: ["disabled", "label", "type", "icon", "iconType", "kind", "state", "iconPosition", "buttonClass", "active"], outputs: ["clicked"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterDateComponent, decorators: [{
             type: Component,
@@ -11466,8 +11483,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         DatePipe,
                         KitPopupComponent,
                         KitButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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      {{ localStartDate() | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {        \n        -\n      }\n      {{ localEndDate() | date: pillDateFormat }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-actions\">\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.today' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.TODAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.TODAY)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastWeek' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_WEEK\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_WEEK)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastMonth' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_MONTH\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_MONTH)\" />\n  </div>\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 .popup-actions{display:flex;justify-content:space-between;gap:5px;margin-bottom:15px}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"] }]
-        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], useUserTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "useUserTimeZone", required: false }] }], useLocalTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "useLocalTimeZone", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-date\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n            [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n            (removed)=\"removeFilter()\"\n            (clicked)=\"onPopupToggle()\">\n    {{ filter().title | translate }}:\n    @if (selectedValues(); as selectedValues) {      \n      {{ localStartDate() | date: pillDateFormat }}\n      @if (selectedValues?.start && selectedValues?.end) {        \n        -\n      }\n      {{ localEndDate() | date: pillDateFormat }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-actions\">\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.today' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.TODAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.TODAY)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastWeek' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_WEEK\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_WEEK)\" />\n    <kit-button [kind]=\"kitButtonKind.SMALL\"\n                [type]=\"kitButtonType.GHOST\"\n                [label]=\"'kit.filters.lastMonth' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.LAST_MONTH\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.LAST_MONTH)\" />\n  </div>\n  <div class=\"popup-content\">\n    <div class=\"date-input\">\n      <kit-datepicker [placeholder]=\"'kit.filters.chooseDateFrom' | translate\"\n                      [defaultDate]=\"localStartDate()\"\n                      [min]=\"minDateConstraint()\"\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                      [max]=\"maxDateConstraint()\"\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 .popup-actions{display:flex;justify-content:space-between;gap:5px;margin-bottom:15px}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;gap:10px}\n"] }]
+        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], useUserTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "useUserTimeZone", required: false }] }], useLocalTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "useLocalTimeZone", required: false }] }], dateFilterConstraint: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilterConstraint", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterInputComponent {
     constructor() {
@@ -11624,7 +11641,7 @@ class KitFilterInputComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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                           (keydown.enter)=\"onEnterKey()\"\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                                   (keydown.enter)=\"onEnterKey()\"\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: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "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: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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 && !!(filter().removable ?? true)\"\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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                           (keydown.enter)=\"onEnterKey()\"\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                                   (keydown.enter)=\"onEnterKey()\"\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: "component", type: KitDropdownComponent, selector: "kit-dropdown", inputs: ["items", "selectedItem", "label", "disabled", "messageIcon", "messageText", "invalid", "defaultItem", "listHeight", "hideDefaultItem", "toggleIcon", "popupSettings", "isValuePrimitive", "footerTemplate", "noDataTemplate", "readonly", "size"], outputs: ["selectedItemChange", "disabledChange", "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: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterInputComponent, decorators: [{
             type: Component,
@@ -11635,7 +11652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitTextboxComponent,
                         TranslateModule,
                         KitNumericTextboxComponent,
-                    ], 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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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                           (keydown.enter)=\"onEnterKey()\"\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                                   (keydown.enter)=\"onEnterKey()\"\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 && !!(filter().removable ?? true)\"\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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                           (keydown.enter)=\"onEnterKey()\"\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                                   (keydown.enter)=\"onEnterKey()\"\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"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], filterInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterInputType", required: true }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterNullCheckComponent {
@@ -11724,7 +11741,7 @@ class KitFilterNullCheckComponent {
         this.onOptionChange(option ?? this.options()[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterNullCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", 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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearFilter()\"\n           (closed)=\"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>\n", 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: 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: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", 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 && !!(filter().removable ?? true)\"\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearFilter()\"\n           (closed)=\"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>\n", 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: 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: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterNullCheckComponent, decorators: [{
             type: Component,
@@ -11734,7 +11751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         FormsModule,
                         KitPopupComponent,
                         KitRadioButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearFilter()\"\n           (closed)=\"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>\n", 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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-null\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearFilter()\"\n           (closed)=\"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>\n", 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"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], nullLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullLabel", required: false }] }], notNullLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "notNullLabel", required: false }] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }], selectedOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedOption", required: false }] }, { type: i0.Output, args: ["selectedOptionChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }, { type: i0.Output, args: ["optionsChange"] }] } });
 
 class KitFilterRadioComponent {
@@ -11846,7 +11863,7 @@ class KitFilterRadioComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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 && !!(filter().removable ?? true)\"\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitRadioButtonComponent, selector: "kit-radio-button", inputs: ["items", "label", "name", "readonly", "type", "value", "checked", "icon", "disabled"], outputs: ["checkedChange", "disabledChange", "changed"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterRadioComponent, decorators: [{
             type: Component,
@@ -11855,7 +11872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         TranslatePipe,
                         KitPopupComponent,
                         KitRadioButtonComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-filter-radio\">\n  <kit-pill #toggleButton\n            [selectable]=\"!filter().readonly\"\n            [selected]=\"popup.isPopupOpen\"\n            [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"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"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], translateKeyPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateKeyPrefix", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterSelectorComponent {
@@ -11976,7 +11993,7 @@ class KitFilterCustomInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", 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  {{ selectedValue() }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\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: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", 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 && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  {{ selectedValue() }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\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: ["cancelAction", "applyAction", "opened", "closed"] }, { kind: "component", type: KitTextboxComponent, selector: "kit-textbox", inputs: ["placeholder", "label", "labelTooltip", "defaultValue", "messageIcon", "messageText", "messageTemplate", "disabled", "maxlength", "state", "size", "icon", "clearButton", "showStateIcon", "readonly", "customStateIcon", "type"], outputs: ["defaultValueChange", "disabledChange", "blured", "focused", "changed"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$e.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitFilterCustomInputComponent, decorators: [{
             type: Component,
@@ -11985,7 +12002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitPopupComponent,
                         KitTextboxComponent,
                         TranslateModule,
-                    ], 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  {{ selectedValue() }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<kit-pill #toggleButton\n          [selectable]=\"!filter().readonly\"\n          [selected]=\"popup.isPopupOpen\"\n          [removable]=\"!filter().readonly && !!(filter().removable ?? true)\"\n          [theme]=\"filter().readonly && kitPillTheme.BLUE || kitPillTheme.DEFAULT\"\n          (removed)=\"removeFilter()\"\n          (clicked)=\"onPopupToggle()\">\n  {{ filter().title | translate }}:\n  {{ selectedValue() }}\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           (applyAction)=\"applyFilter()\"\n           (cancelAction)=\"clearAllFilters()\"\n           (closed)=\"close()\">\n</kit-popup>\n\n<ng-template #content>\n  <div class=\"popup-content\">\n    <kit-textbox [size]=\"kitTextboxSize.SMALL\"\n                 [defaultValue]=\"inputValue()\"\n                 (changed)=\"onValueChange($event)\"\n                 (keydown.enter)=\"onEnterKey()\"\n    ></kit-textbox>\n  </div>\n</ng-template>", styles: ["::ng-deep .kit-filter-input-popup .popup-content{width:296px;box-sizing:border-box}\n"] }]
         }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], filterRemoved: [{ type: i0.Output, args: ["filterRemoved"] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }], anchor: [{ type: i0.ViewChild, args: ['toggleButton', { ...{ read: ElementRef }, isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitGridFiltersComponent {
@@ -12046,11 +12063,14 @@ class KitGridFiltersComponent {
         const columnType = this.columns().find(col => col.field === filter.field)?.type;
         return columnType === 'dateZone' || columnType === 'dateTimeZone';
     }
+    getDateFilterConstraint(filter) {
+        return this.columns().find(col => col.field === filter.field)?.dateFilterConstraint;
+    }
     isFilterSelectorItemDisabled(item, filters) {
         return filters.some(filter => filter.field === item.field || filter.field === item.apiField);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitGridFiltersComponent, isStandalone: true, selector: "kit-grid-filters", inputs: { excludedColumns: { classPropertyName: "excludedColumns", publicName: "excludedColumns", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, filterListConfig: { classPropertyName: "filterListConfig", publicName: "filterListConfig", isSignal: true, isRequired: true, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"filterListConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.GUID) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [guidField]=\"filterListConfig()[item.field].guidField\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.RADIO) {\n        <kit-filter-radio [filter]=\"item\"\n                          [items]=\"filterListConfig()?.[item.field].items\"\n                          [translateKeyPrefix]=\"filterListConfig()?.[item.field].translateKeyPrefix\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-radio>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         [useLocalTimeZone]=\"useLocalTimeZone()\"\n                         [useUserTimeZone]=\"useUserTimeZone(item)\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.TEXT\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NUMERIC) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.NUMERIC\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NULL) {\n        <kit-filter-null-check [filter]=\"item\"\n                               [nullLabel]=\"nullLabel()\"\n                               [notNullLabel]=\"notNullLabel()\"\n                               (filterRemoved)=\"removeFilter(item.field)\"\n                               (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-null-check>\n      }\n      @case (kitFilterType.CUSTOM_INPUT) {\n        <kit-filter-custom-input [filter]=\"item\"\n                                 (filterRemoved)=\"removeFilter(item.field)\"\n                                 (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-custom-input>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"], dependencies: [{ kind: "component", type: KitFilterSelectorComponent, selector: "kit-filter-selector", inputs: ["items"], outputs: ["itemSelected"] }, { kind: "component", type: KitFilterCheckboxComponent, selector: "kit-filter-checkbox", inputs: ["filter", "translateKeyPrefix", "items", "showPopupOnInit", "guidField"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterDateComponent, selector: "kit-filter-date", inputs: ["filter", "useUserTimeZone", "useLocalTimeZone"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterRadioComponent, selector: "kit-filter-radio", inputs: ["filter", "translateKeyPrefix", "items"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterInputComponent, selector: "kit-filter-input", inputs: ["filter", "filterInputType"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterNullCheckComponent, selector: "kit-filter-null-check", inputs: ["filter", "nullLabel", "notNullLabel", "showPopupOnInit", "selectedOption", "options"], outputs: ["filterRemoved", "filterChanged", "selectedOptionChange", "optionsChange"] }, { kind: "component", type: KitFilterCustomInputComponent, selector: "kit-filter-custom-input", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: KitGridFiltersComponent, isStandalone: true, selector: "kit-grid-filters", inputs: { excludedColumns: { classPropertyName: "excludedColumns", publicName: "excludedColumns", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, filterListConfig: { classPropertyName: "filterListConfig", publicName: "filterListConfig", isSignal: true, isRequired: true, transformFunction: null }, useLocalTimeZone: { classPropertyName: "useLocalTimeZone", publicName: "useLocalTimeZone", isSignal: true, isRequired: false, transformFunction: null }, nullLabel: { classPropertyName: "nullLabel", publicName: "nullLabel", isSignal: true, isRequired: false, transformFunction: null }, notNullLabel: { classPropertyName: "notNullLabel", publicName: "notNullLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"filterListConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.GUID) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [guidField]=\"filterListConfig()[item.field].guidField\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.RADIO) {\n        <kit-filter-radio [filter]=\"item\"\n                          [items]=\"filterListConfig()?.[item.field].items\"\n                          [translateKeyPrefix]=\"filterListConfig()?.[item.field].translateKeyPrefix\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-radio>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         [useLocalTimeZone]=\"useLocalTimeZone()\"\n                         [useUserTimeZone]=\"useUserTimeZone(item)\"\n                         [dateFilterConstraint]=\"getDateFilterConstraint(item)\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.TEXT\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NUMERIC) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.NUMERIC\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NULL) {\n        <kit-filter-null-check [filter]=\"item\"\n                               [nullLabel]=\"nullLabel()\"\n                               [notNullLabel]=\"notNullLabel()\"\n                               (filterRemoved)=\"removeFilter(item.field)\"\n                               (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-null-check>\n      }\n      @case (kitFilterType.CUSTOM_INPUT) {\n        <kit-filter-custom-input [filter]=\"item\"\n                                 (filterRemoved)=\"removeFilter(item.field)\"\n                                 (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-custom-input>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"], dependencies: [{ kind: "component", type: KitFilterSelectorComponent, selector: "kit-filter-selector", inputs: ["items"], outputs: ["itemSelected"] }, { kind: "component", type: KitFilterCheckboxComponent, selector: "kit-filter-checkbox", inputs: ["filter", "translateKeyPrefix", "items", "showPopupOnInit", "guidField"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterDateComponent, selector: "kit-filter-date", inputs: ["filter", "useUserTimeZone", "useLocalTimeZone", "dateFilterConstraint"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterRadioComponent, selector: "kit-filter-radio", inputs: ["filter", "translateKeyPrefix", "items"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterInputComponent, selector: "kit-filter-input", inputs: ["filter", "filterInputType"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterNullCheckComponent, selector: "kit-filter-null-check", inputs: ["filter", "nullLabel", "notNullLabel", "showPopupOnInit", "selectedOption", "options"], outputs: ["filterRemoved", "filterChanged", "selectedOptionChange", "optionsChange"] }, { kind: "component", type: KitFilterCustomInputComponent, selector: "kit-filter-custom-input", inputs: ["filter"], outputs: ["filterRemoved", "filterChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: KitGridFiltersComponent, decorators: [{
             type: Component,
@@ -12062,7 +12082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         KitFilterInputComponent,
                         KitFilterNullCheckComponent,
                         KitFilterCustomInputComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"filterListConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.GUID) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [guidField]=\"filterListConfig()[item.field].guidField\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.RADIO) {\n        <kit-filter-radio [filter]=\"item\"\n                          [items]=\"filterListConfig()?.[item.field].items\"\n                          [translateKeyPrefix]=\"filterListConfig()?.[item.field].translateKeyPrefix\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-radio>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         [useLocalTimeZone]=\"useLocalTimeZone()\"\n                         [useUserTimeZone]=\"useUserTimeZone(item)\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.TEXT\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NUMERIC) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.NUMERIC\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NULL) {\n        <kit-filter-null-check [filter]=\"item\"\n                               [nullLabel]=\"nullLabel()\"\n                               [notNullLabel]=\"notNullLabel()\"\n                               (filterRemoved)=\"removeFilter(item.field)\"\n                               (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-null-check>\n      }\n      @case (kitFilterType.CUSTOM_INPUT) {\n        <kit-filter-custom-input [filter]=\"item\"\n                                 (filterRemoved)=\"removeFilter(item.field)\"\n                                 (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-custom-input>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item) {\n    @switch (item.type) {\n      @case (kitFilterType.CHECKBOX) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [translateKeyPrefix]=\"filterListConfig()[item.field].translateKeyPrefix\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.GUID) {\n        <kit-filter-checkbox [filter]=\"item\"\n                             [items]=\"filterListConfig()[item.field].items\"\n                             [guidField]=\"filterListConfig()[item.field].guidField\"\n                             (filterRemoved)=\"removeFilter(item.field)\"\n                             (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-checkbox>\n      }\n      @case (kitFilterType.RADIO) {\n        <kit-filter-radio [filter]=\"item\"\n                          [items]=\"filterListConfig()?.[item.field].items\"\n                          [translateKeyPrefix]=\"filterListConfig()?.[item.field].translateKeyPrefix\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-radio>\n      }\n      @case (kitFilterType.DATE) {\n        <kit-filter-date [filter]=\"item\"\n                         [useLocalTimeZone]=\"useLocalTimeZone()\"\n                         [useUserTimeZone]=\"useUserTimeZone(item)\"\n                         [dateFilterConstraint]=\"getDateFilterConstraint(item)\"\n                         (filterRemoved)=\"removeFilter(item.field)\"\n                         (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-date>\n      }\n      @case (kitFilterType.TEXT) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.TEXT\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NUMERIC) {\n        <kit-filter-input [filterInputType]=\"kitFilterType.NUMERIC\"\n                          [filter]=\"item\"\n                          (filterRemoved)=\"removeFilter(item.field)\"\n                          (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-input>\n      }\n      @case (kitFilterType.NULL) {\n        <kit-filter-null-check [filter]=\"item\"\n                               [nullLabel]=\"nullLabel()\"\n                               [notNullLabel]=\"notNullLabel()\"\n                               (filterRemoved)=\"removeFilter(item.field)\"\n                               (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-null-check>\n      }\n      @case (kitFilterType.CUSTOM_INPUT) {\n        <kit-filter-custom-input [filter]=\"item\"\n                                 (filterRemoved)=\"removeFilter(item.field)\"\n                                 (filterChanged)=\"applyFilter(item, $event)\"\n        ></kit-filter-custom-input>\n      }\n    }\n  }\n\n  <kit-filter-selector [items]=\"filterSelectorItems()\"\n                       (itemSelected)=\"addFilter($event)\"\n  ></kit-filter-selector>\n</div>\n", styles: [".kit-grid-filters{display:flex;flex-wrap:wrap;gap:10px}\n"] }]
         }], propDecorators: { excludedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedColumns", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], filterListConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterListConfig", required: true }] }], useLocalTimeZone: [{ type: i0.Input, args: [{ isSignal: true, alias: "useLocalTimeZone", required: false }] }], nullLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nullLabel", required: false }] }], notNullLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "notNullLabel", required: false }] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }] } });
 
 class KitGridFiltersToggleComponent {