@indigina/ui-kit 1.1.594 → 1.1.596

package/fesm2022/indigina-ui-kit.mjs

@@ -10251,9 +10251,21 @@ const getTimeZoneOffset = (userTimeZone, column) => {
     return 'UTC';
 };
 const removeFilterPrefix = (value) => value.split('$filter=')[1];
+const hasEffectiveFilterValue = (value) => {
+    if (value === null || value === undefined) {
+        return false;
+    }
+    if (typeof value === 'string') {
+        return value.trim().length > 0;
+    }
+    if (Array.isArray(value)) {
+        return value.length > 0;
+    }
+    return true;
+};
 const filterEmptyValues = (filters) => ({
     logic: filters?.logic ?? KitFilterLogic.AND,
-    filters: filters?.filters.filter(item => noValueRequiredFilterOperators.includes(item.operator) || (item.value !== null && item.value !== undefined)) ?? [],
+    filters: filters?.filters.filter(item => noValueRequiredFilterOperators.includes(item.operator) || hasEffectiveFilterValue(item.value)) ?? [],
 });
 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;
@@ -10324,16 +10336,30 @@ const getValueFilters = (value) => {
     });
 };
 const kitBuildOdataFilter = (filter, columns) => removeFilterPrefix(normalizeGuidFilter(kitDataStateToODataString({ filter }, true, columns)));
+const isEffectiveFilterValue = (cleanedFilter) => cleanedFilter.filters.length > 0;
+const buildFilterByType = (filter, cleanedFilter) => {
+    if (!isEffectiveFilterValue(cleanedFilter)) {
+        return null;
+    }
+    return {
+        ...cleanedFilter,
+        field: filter.field,
+        ...(filter.type === KitFilterType.CUSTOM_INPUT
+            ? { isCustomField: true }
+            : {}),
+    };
+};
 const kitBuildFilters = (filters) => ({
     logic: KitFilterLogic.AND,
-    filters: filters.map(filter => {
+    filters: filters.reduce((acc, filter) => {
         const cleanedFilter = filterEmptyValues(filter.value);
-        return {
-            ...cleanedFilter,
-            field: filter.field,
-            isCustomField: filter.type === KitFilterType.CUSTOM_INPUT,
-        };
-    }),
+        const normalizedFilter = buildFilterByType(filter, cleanedFilter);
+        if (!normalizedFilter) {
+            return acc;
+        }
+        acc.push(normalizedFilter);
+        return acc;
+    }, []),
 });
 
 const kitFormatStringForSearch = (inputString) => {
@@ -12235,6 +12261,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                     ], template: "<div class=\"page-layout\"\n     [ngClass]=\"theme()\"\n     [class.mobile]=\"isMobile\"\n     [class.sidebar-expanded]=\"!isMenuCollapsed() && hasMenuSelected()\"\n     [class.has-sidebar]=\"hasSidebar()\"\n     [class.has-top-bar]=\"hasTopBar()\">\n\n  @if (!isMobile) {\n    <div class=\"sidebar\" #sidebarContainer>\n      <ng-content select=\"[sidebar]\" />\n    </div>\n  }\n\n  <div class=\"main\">\n      @if (isMobile) {\n        <kit-mobile-header class=\"mobile-header\"\n                           [theme]=\"theme()\"/>\n      } @else {\n        <div class=\"top-bar\" #topBarContainer>\n          <ng-content select=\"[topBar]\" />\n        </div>\n      }\n\n    <div class=\"content\">\n      <ng-content select=\"[content]\" />\n    </div>\n  </div>\n</div>\n", styles: [".page-layout{display:flex;min-height:100%}.page-layout.has-sidebar .sidebar{position:fixed;top:0;left:0;height:100%;min-width:var(--ui-kit-sidebar-collapsed-width);background:var(--ui-kit-color-navy);overflow-x:hidden;z-index:11}.page-layout.has-sidebar .main{margin-left:var(--ui-kit-sidebar-collapsed-width)}.page-layout.has-sidebar.sidebar-expanded .main{margin-left:var(--ui-kit-sidebar-expanded-width)}.page-layout .main{display:flex;flex-direction:column;flex:1;padding:0 var(--ui-kit-layout-gap);width:0;transition:.2s ease-in-out}.page-layout.has-top-bar .top-bar,.page-layout .mobile-header{position:sticky;top:0;left:0;width:100%;height:var(--ui-kit-header-height);background:var(--ui-kit-color-grey-13);z-index:10}.page-layout .content{padding:25px 0;flex:1}.page-layout .content:has(.kit-breadcrumbs){padding-top:10px}.page-layout .content:has(.iframe-wrapper){padding:0}.page-layout.mobile .mobile-header{background-color:var(--ui-kit-color-white)}.page-layout.mobile .main{padding:0}.page-layout.mobile .content{background-color:var(--ui-kit-color-grey-13);padding:var(--ui-kit-layout-gap)}.page-layout.mobile.dark .content{background-color:var(--ui-kit-color-navy)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], sidebarContainer: [{ type: i0.ViewChild, args: ['sidebarContainer', { isSignal: true }] }], topBarContainer: [{ type: i0.ViewChild, args: ['topBarContainer', { isSignal: true }] }] } });
 
+const calculateCurrentLegProgress = (leg, nowMs = Date.now()) => {
+    if (isLegReachedDestination(leg, nowMs)) {
+        return 1;
+    }
+    const atdMs = toTimestamp(leg.atd);
+    const etaMs = toTimestamp(leg.eta);
+    if (atdMs === null || etaMs === null || etaMs <= atdMs) {
+        return 0;
+    }
+    if (nowMs <= atdMs) {
+        return 0;
+    }
+    if (nowMs >= etaMs) {
+        return 1;
+    }
+    return (nowMs - atdMs) / (etaMs - atdMs);
+};
+const isLegReachedDestination = (leg, nowMs = Date.now()) => {
+    const ataMs = toTimestamp(leg.ata);
+    if (ataMs !== null) {
+        return nowMs >= ataMs;
+    }
+    const etaMs = toTimestamp(leg.eta);
+    return etaMs !== null && nowMs >= etaMs;
+};
+const getMainRouteActiveLegIndex = (legs, nowMs = Date.now()) => {
+    return legs.findIndex(leg => !isLegReachedDestination(leg, nowMs));
+};
+const getTransportIconLegIndex = (legs, nowMs = Date.now()) => {
+    if (!legs.length) {
+        return -1;
+    }
+    const activeLegIndex = getMainRouteActiveLegIndex(legs, nowMs);
+    return activeLegIndex === -1 ? legs.length - 1 : activeLegIndex;
+};
+const calculateMainRouteProgressPercent = (legs, nowMs = Date.now()) => {
+    if (!legs.length) {
+        return 0;
+    }
+    const segmentCount = legs.length;
+    const activeLegIndex = getMainRouteActiveLegIndex(legs, nowMs);
+    if (activeLegIndex === -1) {
+        return 100;
+    }
+    const activeLeg = legs[activeLegIndex];
+    const legProgress = calculateCurrentLegProgress(activeLeg, nowMs);
+    return ((activeLegIndex + legProgress) / segmentCount) * 100;
+};
+const calculateDurationInDays = (start, end) => {
+    const startMs = toTimestamp(start);
+    const endMs = toTimestamp(end);
+    const dayInMs = 24 * 60 * 60 * 1000;
+    if (startMs === null || endMs === null || endMs < startMs) {
+        return null;
+    }
+    return Math.ceil((endMs - startMs) / dayInMs);
+};
+const toTimestamp = (value) => {
+    if (!value) {
+        return null;
+    }
+    const timestamp = Date.parse(value);
+    return Number.isNaN(timestamp) ? null : timestamp;
+};
+
+class KitShipmentRoutingCardComponent {
+    constructor() {
+        this.leg = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "leg" }] : /* istanbul ignore next */ []));
+        this.transportIcon = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transportIcon" }] : /* istanbul ignore next */ []));
+        this.scheduledLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scheduledLabel" }] : /* istanbul ignore next */ []));
+        this.actualLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actualLabel" }] : /* istanbul ignore next */ []));
+        this.scheduledDurationLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scheduledDurationLabel" }] : /* istanbul ignore next */ []));
+        this.actualDurationLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actualDurationLabel" }] : /* istanbul ignore next */ []));
+        this.showTransportIcon = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTransportIcon" }] : /* istanbul ignore next */ []));
+        this.isCompleted = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCompleted" }] : /* istanbul ignore next */ []));
+        this.dateFormat = input(KIT_DATE_FORMAT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+        this.kitStatusLabelColor = KitStatusLabelColor;
+        this.kitSvgIcon = KitSvgIcon;
+        this.kitSvgIconType = KitSvgIconType;
+        this.kitPillTheme = KitPillTheme;
+        this.currentLegProgressPercent = computed(() => {
+            if (this.isCompleted()) {
+                return 100;
+            }
+            return calculateCurrentLegProgress(this.leg()) * 100;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentLegProgressPercent" }] : /* istanbul ignore next */ []));
+        this.isStartPointCompleted = computed(() => this.currentLegProgressPercent() > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isStartPointCompleted" }] : /* istanbul ignore next */ []));
+        this.isEndPointCompleted = computed(() => this.currentLegProgressPercent() >= 100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEndPointCompleted" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingCardComponent, isStandalone: true, selector: "kit-shipment-routing-card", inputs: { leg: { classPropertyName: "leg", publicName: "leg", isSignal: true, isRequired: true, transformFunction: null }, transportIcon: { classPropertyName: "transportIcon", publicName: "transportIcon", isSignal: true, isRequired: true, transformFunction: null }, scheduledLabel: { classPropertyName: "scheduledLabel", publicName: "scheduledLabel", isSignal: true, isRequired: true, transformFunction: null }, actualLabel: { classPropertyName: "actualLabel", publicName: "actualLabel", isSignal: true, isRequired: true, transformFunction: null }, scheduledDurationLabel: { classPropertyName: "scheduledDurationLabel", publicName: "scheduledDurationLabel", isSignal: true, isRequired: true, transformFunction: null }, actualDurationLabel: { classPropertyName: "actualDurationLabel", publicName: "actualDurationLabel", isSignal: true, isRequired: true, transformFunction: null }, showTransportIcon: { classPropertyName: "showTransportIcon", publicName: "showTransportIcon", isSignal: true, isRequired: false, transformFunction: null }, isCompleted: { classPropertyName: "isCompleted", publicName: "isCompleted", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-card\">\n  <div class=\"card-header\">\n    <div class=\"card-header-type\"\n         [class.completed]=\"isCompleted()\">\n      <kit-svg-icon class=\"card-header-type-icon\"\n                    [icon]=\"transportIcon()\"\n                    [ngClass]=\"kitSvgIconType.FILL\" />\n    </div>\n    <div class=\"card-header-info\">\n      <div class=\"card-header-top\">\n        <kit-truncate-text class=\"card-header-top-name\">{{ leg().name || '-' }}</kit-truncate-text>\n        @if (leg().legTypeLabel; as legTypeLabel) {\n          <kit-status-label [color]=\"leg().legTypeColor ?? kitStatusLabelColor.GREY\">\n            {{ legTypeLabel }}\n          </kit-status-label>\n        }\n      </div>\n      <div class=\"card-header-bottom\">\n        <kit-truncate-text class=\"card-header-bottom-number\">{{ leg().vehicleNumber || '-' }}</kit-truncate-text>\n        <div class=\"card-header-carrier\">\n          <kit-svg-icon class=\"card-header-carrier-icon\"\n                        [icon]=\"kitSvgIcon.BUILDING\" />\n          <kit-truncate-text class=\"card-header-bottom-name\">{{ leg().carrierName || '-' }}</kit-truncate-text>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-content\">\n    <div class=\"ports-row\">\n      <div class=\"ports-row-label\"></div>\n      <kit-truncate-text class=\"ports-row-port ports-row-port-start\">\n        {{ leg().originPort || '-' }}\n      </kit-truncate-text>\n      <div class=\"ports-row-track\">\n        <div class=\"track-dot\"\n             [class.completed]=\"isStartPointCompleted()\"></div>\n        <div class=\"track-line\">\n          <div class=\"track-line-fill\"\n               [style.width.%]=\"currentLegProgressPercent()\"></div>\n        </div>\n        <div class=\"track-dot\"\n             [class.completed]=\"isEndPointCompleted()\"></div>\n        @if (showTransportIcon()) {\n          <div class=\"track-transport\"\n               [style.left.%]=\"currentLegProgressPercent()\">\n            <kit-svg-icon class=\"track-transport-icon\"\n                          [icon]=\"transportIcon()\"\n                          [ngClass]=\"kitSvgIconType.FILL\" />\n          </div>\n        }\n      </div>\n      <kit-truncate-text class=\"ports-row-port ports-row-port-end\">\n        {{ leg().destinationPort || '-' }}\n      </kit-truncate-text>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ scheduledLabel() }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ leg().etd ? (leg().etd | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ scheduledDurationLabel() }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ leg().eta ? (leg().eta | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ actualLabel() }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ leg().atd ? (leg().atd | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ actualDurationLabel() }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ leg().ata ? (leg().ata | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-card{padding:20px;border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-header{display:flex;gap:10px}.kit-shipment-routing-card .card-header-type{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;fill:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-8)}.kit-shipment-routing-card .card-header-type.completed{fill:var(--color-white);background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-header-type-icon{display:block;width:24px;height:24px}.kit-shipment-routing-card .card-header-info{display:flex;flex-direction:column;flex:1;gap:5px;min-width:0}.kit-shipment-routing-card .card-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.kit-shipment-routing-card .card-header-top-name{overflow:hidden}.kit-shipment-routing-card .card-header-bottom{display:flex;align-items:center;gap:20px;color:var(--ui-kit-color-grey-20);font-size:13px}.kit-shipment-routing-card .card-header-bottom-number{width:auto;overflow:hidden}.kit-shipment-routing-card .card-header-carrier{display:flex;gap:5px;min-width:50px}.kit-shipment-routing-card .card-header-carrier-icon{display:block;width:14px;height:14px;stroke:var(--ui-kit-color-grey-20);fill:none;flex-shrink:0}.kit-shipment-routing-card .card-header-carrier-name{overflow:hidden}.kit-shipment-routing-card .card-content{--row-label-column-width: 70px;--row-date-column-width: 100px;margin-top:20px;display:flex;flex-direction:column;gap:10px}.kit-shipment-routing-card .card-content .ports-row{display:grid;grid-template-columns:var(--row-label-column-width) minmax(0,max-content) minmax(120px,1fr) minmax(0,max-content);align-items:center;column-gap:20px;margin-bottom:10px}.kit-shipment-routing-card .card-content .ports-row-label{min-width:0}.kit-shipment-routing-card .card-content .ports-row-port{max-width:180px;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-shipment-routing-card .card-content .ports-row-port-start{text-align:left}.kit-shipment-routing-card .card-content .ports-row-port-end{text-align:right}.kit-shipment-routing-card .card-content .ports-row-track{position:relative;display:flex;align-items:center;min-width:0;height:24px}.kit-shipment-routing-card .card-content .ports-row-track .track-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-card .card-content .ports-row-track .track-dot.completed{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-line{position:relative;flex:1;height:2px;background:var(--ui-kit-color-grey-11);overflow:hidden}.kit-shipment-routing-card .card-content .ports-row-track .track-line .track-line-fill{height:100%;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;fill:var(--ui-kit-color-green-1);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport-icon{display:block;width:25px;height:25px}.kit-shipment-routing-card .card-content .dates-row{display:grid;grid-template-columns:var(--row-label-column-width) var(--row-date-column-width) minmax(45px,1fr) var(--row-date-column-width);column-gap:10px;align-items:center;font-size:14px}.kit-shipment-routing-card .card-content .dates-row .item-label{color:var(--ui-kit-color-grey-20);font-size:12px;text-transform:uppercase}.kit-shipment-routing-card .card-content .dates-row .item-date{width:100%;white-space:nowrap;text-align:center}.kit-shipment-routing-card .card-content .dates-row .item-date-start{text-align:left}.kit-shipment-routing-card .card-content .dates-row .item-date-end{text-align:right}.kit-shipment-routing-card .card-content .dates-row .item-duration{display:flex;justify-content:center;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitStatusLabelComponent, selector: "kit-status-label", inputs: ["color", "size", "tooltip"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-shipment-routing-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DatePipe,
+                        NgClass,
+                        KitSvgIconComponent,
+                        KitPillComponent,
+                        KitStatusLabelComponent,
+                        KitTruncateTextComponent,
+                    ], template: "<div class=\"kit-shipment-routing-card\">\n  <div class=\"card-header\">\n    <div class=\"card-header-type\"\n         [class.completed]=\"isCompleted()\">\n      <kit-svg-icon class=\"card-header-type-icon\"\n                    [icon]=\"transportIcon()\"\n                    [ngClass]=\"kitSvgIconType.FILL\" />\n    </div>\n    <div class=\"card-header-info\">\n      <div class=\"card-header-top\">\n        <kit-truncate-text class=\"card-header-top-name\">{{ leg().name || '-' }}</kit-truncate-text>\n        @if (leg().legTypeLabel; as legTypeLabel) {\n          <kit-status-label [color]=\"leg().legTypeColor ?? kitStatusLabelColor.GREY\">\n            {{ legTypeLabel }}\n          </kit-status-label>\n        }\n      </div>\n      <div class=\"card-header-bottom\">\n        <kit-truncate-text class=\"card-header-bottom-number\">{{ leg().vehicleNumber || '-' }}</kit-truncate-text>\n        <div class=\"card-header-carrier\">\n          <kit-svg-icon class=\"card-header-carrier-icon\"\n                        [icon]=\"kitSvgIcon.BUILDING\" />\n          <kit-truncate-text class=\"card-header-bottom-name\">{{ leg().carrierName || '-' }}</kit-truncate-text>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-content\">\n    <div class=\"ports-row\">\n      <div class=\"ports-row-label\"></div>\n      <kit-truncate-text class=\"ports-row-port ports-row-port-start\">\n        {{ leg().originPort || '-' }}\n      </kit-truncate-text>\n      <div class=\"ports-row-track\">\n        <div class=\"track-dot\"\n             [class.completed]=\"isStartPointCompleted()\"></div>\n        <div class=\"track-line\">\n          <div class=\"track-line-fill\"\n               [style.width.%]=\"currentLegProgressPercent()\"></div>\n        </div>\n        <div class=\"track-dot\"\n             [class.completed]=\"isEndPointCompleted()\"></div>\n        @if (showTransportIcon()) {\n          <div class=\"track-transport\"\n               [style.left.%]=\"currentLegProgressPercent()\">\n            <kit-svg-icon class=\"track-transport-icon\"\n                          [icon]=\"transportIcon()\"\n                          [ngClass]=\"kitSvgIconType.FILL\" />\n          </div>\n        }\n      </div>\n      <kit-truncate-text class=\"ports-row-port ports-row-port-end\">\n        {{ leg().destinationPort || '-' }}\n      </kit-truncate-text>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ scheduledLabel() }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ leg().etd ? (leg().etd | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ scheduledDurationLabel() }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ leg().eta ? (leg().eta | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n    <div class=\"dates-row\">\n      <div class=\"item-label\">{{ actualLabel() }}</div>\n      <div class=\"item-date item-date-start\">\n        {{ leg().atd ? (leg().atd | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n      <div class=\"item-duration\">\n        <kit-pill [theme]=\"kitPillTheme.BLUE\">\n          {{ actualDurationLabel() }}\n        </kit-pill>\n      </div>\n      <div class=\"item-date item-date-end\">\n        {{ leg().ata ? (leg().ata | date: dateFormat() : 'UTC') : '-' }}\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-card{padding:20px;border-radius:10px;border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-header{display:flex;gap:10px}.kit-shipment-routing-card .card-header-type{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;fill:var(--ui-kit-color-grey-14);background:var(--ui-kit-color-grey-8)}.kit-shipment-routing-card .card-header-type.completed{fill:var(--color-white);background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-header-type-icon{display:block;width:24px;height:24px}.kit-shipment-routing-card .card-header-info{display:flex;flex-direction:column;flex:1;gap:5px;min-width:0}.kit-shipment-routing-card .card-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700}.kit-shipment-routing-card .card-header-top-name{overflow:hidden}.kit-shipment-routing-card .card-header-bottom{display:flex;align-items:center;gap:20px;color:var(--ui-kit-color-grey-20);font-size:13px}.kit-shipment-routing-card .card-header-bottom-number{width:auto;overflow:hidden}.kit-shipment-routing-card .card-header-carrier{display:flex;gap:5px;min-width:50px}.kit-shipment-routing-card .card-header-carrier-icon{display:block;width:14px;height:14px;stroke:var(--ui-kit-color-grey-20);fill:none;flex-shrink:0}.kit-shipment-routing-card .card-header-carrier-name{overflow:hidden}.kit-shipment-routing-card .card-content{--row-label-column-width: 70px;--row-date-column-width: 100px;margin-top:20px;display:flex;flex-direction:column;gap:10px}.kit-shipment-routing-card .card-content .ports-row{display:grid;grid-template-columns:var(--row-label-column-width) minmax(0,max-content) minmax(120px,1fr) minmax(0,max-content);align-items:center;column-gap:20px;margin-bottom:10px}.kit-shipment-routing-card .card-content .ports-row-label{min-width:0}.kit-shipment-routing-card .card-content .ports-row-port{max-width:180px;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kit-shipment-routing-card .card-content .ports-row-port-start{text-align:left}.kit-shipment-routing-card .card-content .ports-row-port-end{text-align:right}.kit-shipment-routing-card .card-content .ports-row-track{position:relative;display:flex;align-items:center;min-width:0;height:24px}.kit-shipment-routing-card .card-content .ports-row-track .track-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-card .card-content .ports-row-track .track-dot.completed{background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-line{position:relative;flex:1;height:2px;background:var(--ui-kit-color-grey-11);overflow:hidden}.kit-shipment-routing-card .card-content .ports-row-track .track-line .track-line-fill{height:100%;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:30px;height:30px;fill:var(--ui-kit-color-green-1);background:var(--ui-kit-color-white)}.kit-shipment-routing-card .card-content .ports-row-track .track-transport-icon{display:block;width:25px;height:25px}.kit-shipment-routing-card .card-content .dates-row{display:grid;grid-template-columns:var(--row-label-column-width) var(--row-date-column-width) minmax(45px,1fr) var(--row-date-column-width);column-gap:10px;align-items:center;font-size:14px}.kit-shipment-routing-card .card-content .dates-row .item-label{color:var(--ui-kit-color-grey-20);font-size:12px;text-transform:uppercase}.kit-shipment-routing-card .card-content .dates-row .item-date{width:100%;white-space:nowrap;text-align:center}.kit-shipment-routing-card .card-content .dates-row .item-date-start{text-align:left}.kit-shipment-routing-card .card-content .dates-row .item-date-end{text-align:right}.kit-shipment-routing-card .card-content .dates-row .item-duration{display:flex;justify-content:center;white-space:nowrap}\n"] }]
+        }], propDecorators: { leg: [{ type: i0.Input, args: [{ isSignal: true, alias: "leg", required: true }] }], transportIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "transportIcon", required: true }] }], scheduledLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scheduledLabel", required: true }] }], actualLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actualLabel", required: true }] }], scheduledDurationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "scheduledDurationLabel", required: true }] }], actualDurationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actualDurationLabel", required: true }] }], showTransportIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTransportIcon", required: false }] }], isCompleted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCompleted", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }] } });
+
+class KitShipmentRoutingOverviewComponent {
+    constructor() {
+        this.originLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "originLabel" }] : /* istanbul ignore next */ []));
+        this.destinationLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "destinationLabel" }] : /* istanbul ignore next */ []));
+        this.originPort = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "originPort" }] : /* istanbul ignore next */ []));
+        this.originDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "originDate" }] : /* istanbul ignore next */ []));
+        this.destinationPort = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "destinationPort" }] : /* istanbul ignore next */ []));
+        this.destinationDate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "destinationDate" }] : /* istanbul ignore next */ []));
+        this.transitDaysLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transitDaysLabel" }] : /* istanbul ignore next */ []));
+        this.ports = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ports" }] : /* istanbul ignore next */ []));
+        this.progressPercent = input(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressPercent" }] : /* istanbul ignore next */ []));
+        this.transportIcon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "transportIcon" }] : /* istanbul ignore next */ []));
+        this.dateFormat = input(KIT_DATE_FORMAT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+        this.kitPillTheme = KitPillTheme;
+        this.kitSvgIconType = KitSvgIconType;
+    }
+    getPortPositionPercent(index) {
+        const lastIndex = Math.max(this.ports().length - 1, 1);
+        return (index / lastIndex) * 100;
+    }
+    isPortCompleted(index) {
+        const segmentCount = Math.max(this.ports().length - 1, 1);
+        const completedSegments = (this.progressPercent() / 100) * segmentCount;
+        return completedSegments >= index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitShipmentRoutingOverviewComponent, isStandalone: true, selector: "kit-shipment-routing-overview", inputs: { originLabel: { classPropertyName: "originLabel", publicName: "originLabel", isSignal: true, isRequired: true, transformFunction: null }, destinationLabel: { classPropertyName: "destinationLabel", publicName: "destinationLabel", isSignal: true, isRequired: true, transformFunction: null }, originPort: { classPropertyName: "originPort", publicName: "originPort", isSignal: true, isRequired: false, transformFunction: null }, originDate: { classPropertyName: "originDate", publicName: "originDate", isSignal: true, isRequired: false, transformFunction: null }, destinationPort: { classPropertyName: "destinationPort", publicName: "destinationPort", isSignal: true, isRequired: false, transformFunction: null }, destinationDate: { classPropertyName: "destinationDate", publicName: "destinationDate", isSignal: true, isRequired: false, transformFunction: null }, transitDaysLabel: { classPropertyName: "transitDaysLabel", publicName: "transitDaysLabel", isSignal: true, isRequired: true, transformFunction: null }, ports: { classPropertyName: "ports", publicName: "ports", isSignal: true, isRequired: false, transformFunction: null }, progressPercent: { classPropertyName: "progressPercent", publicName: "progressPercent", isSignal: true, isRequired: false, transformFunction: null }, transportIcon: { classPropertyName: "transportIcon", publicName: "transportIcon", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kit-shipment-routing-overview\">\n  <div class=\"routing\">\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ originLabel() }}</div>\n      <div class=\"routing-port-name\">{{ originPort() || '-' }}</div>\n      <div class=\"routing-port-date\">{{ originDate() ? (originDate() | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n    <div class=\"routing-main\">\n      <kit-pill [theme]=\"kitPillTheme.BLUE\">\n        {{ transitDaysLabel() }}\n      </kit-pill>\n      <div class=\"routing-route\">\n        <div class=\"routing-track\">\n          <div class=\"routing-track-progress\"\n               [style.width.%]=\"progressPercent()\"></div>\n        </div>\n        <div class=\"routing-ports\">\n          @for (port of ports(); track $index) {\n            <div class=\"port-item\"\n                 [style.left.%]=\"getPortPositionPercent($index)\"\n                 [class.port-item-completed]=\"isPortCompleted($index)\">\n              <div class=\"port-item-dot\"></div>\n              <kit-truncate-text class=\"port-item-name\"\n                                 [lines]=\"2\">\n                {{ port }}\n              </kit-truncate-text>\n            </div>\n          }\n        </div>\n        <div class=\"routing-transport\"\n             [style.left.%]=\"progressPercent()\">\n          <kit-svg-icon class=\"routing-transport-icon\"\n                        [icon]=\"transportIcon()\"\n                        [ngClass]=\"kitSvgIconType.FILL\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ destinationLabel() }}</div>\n      <div class=\"routing-port-name\">{{ destinationPort() || '-' }}</div>\n      <div class=\"routing-port-date\">{{ destinationDate() ? (destinationDate() | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:56px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:120px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;max-width:120px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitShipmentRoutingOverviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kit-shipment-routing-overview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        DatePipe,
+                        NgClass,
+                        KitPillComponent,
+                        KitSvgIconComponent,
+                        KitTruncateTextComponent,
+                    ], template: "<div class=\"kit-shipment-routing-overview\">\n  <div class=\"routing\">\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ originLabel() }}</div>\n      <div class=\"routing-port-name\">{{ originPort() || '-' }}</div>\n      <div class=\"routing-port-date\">{{ originDate() ? (originDate() | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n    <div class=\"routing-main\">\n      <kit-pill [theme]=\"kitPillTheme.BLUE\">\n        {{ transitDaysLabel() }}\n      </kit-pill>\n      <div class=\"routing-route\">\n        <div class=\"routing-track\">\n          <div class=\"routing-track-progress\"\n               [style.width.%]=\"progressPercent()\"></div>\n        </div>\n        <div class=\"routing-ports\">\n          @for (port of ports(); track $index) {\n            <div class=\"port-item\"\n                 [style.left.%]=\"getPortPositionPercent($index)\"\n                 [class.port-item-completed]=\"isPortCompleted($index)\">\n              <div class=\"port-item-dot\"></div>\n              <kit-truncate-text class=\"port-item-name\"\n                                 [lines]=\"2\">\n                {{ port }}\n              </kit-truncate-text>\n            </div>\n          }\n        </div>\n        <div class=\"routing-transport\"\n             [style.left.%]=\"progressPercent()\">\n          <kit-svg-icon class=\"routing-transport-icon\"\n                        [icon]=\"transportIcon()\"\n                        [ngClass]=\"kitSvgIconType.FILL\" />\n        </div>\n      </div>\n    </div>\n    <div class=\"routing-port\">\n      <div class=\"routing-port-label\">{{ destinationLabel() }}</div>\n      <div class=\"routing-port-name\">{{ destinationPort() || '-' }}</div>\n      <div class=\"routing-port-date\">{{ destinationDate() ? (destinationDate() | date: dateFormat() : 'UTC') : '-' }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".kit-shipment-routing-overview{display:block}.kit-shipment-routing-overview .routing{display:grid;grid-template-columns:120px 1fr 120px;gap:60px;align-items:center;color:var(--ui-kit-color-grey-10)}.kit-shipment-routing-overview .routing-port{display:flex;flex-direction:column;gap:5px;font-size:14px}.kit-shipment-routing-overview .routing-port:last-child{text-align:right}.kit-shipment-routing-overview .routing-port-label{margin-bottom:5px;color:var(--ui-kit-color-grey-14)}.kit-shipment-routing-overview .routing-port-name{font-size:16px;font-weight:600;line-height:1.2}.kit-shipment-routing-overview .routing-port-date{color:var(--ui-kit-color-grey-20)}.kit-shipment-routing-overview .routing-main{display:flex;flex-direction:column;align-items:center;flex:1;gap:20px}.kit-shipment-routing-overview .routing-route{position:relative;align-self:stretch}.kit-shipment-routing-overview .routing-track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:999px;background:var(--ui-kit-color-grey-11)}.kit-shipment-routing-overview .routing-track-progress{height:100%;border-radius:inherit;background:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .routing-ports{position:relative;min-height:56px}.kit-shipment-routing-overview .routing-transport{position:absolute;top:-20px;transform:translate(-50%);width:44px;height:44px;background:var(--ui-kit-color-white);display:flex;align-items:center;justify-content:center;z-index:1}.kit-shipment-routing-overview .routing-transport-icon{width:38px;height:38px;fill:var(--ui-kit-color-green-1)}.kit-shipment-routing-overview .port-item{position:absolute;top:2px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;max-width:120px;transform:translate(-50%)}.kit-shipment-routing-overview .port-item-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-kit-color-grey-11);z-index:1}.kit-shipment-routing-overview .port-item-name{font-size:14px;color:var(--ui-kit-color-grey-14);text-align:center;max-width:120px;line-height:1.2}.kit-shipment-routing-overview .port-item-completed .port-item-dot{background:var(--ui-kit-color-green-1)}@container routing-layout (max-width: 960px){.kit-shipment-routing-overview .routing{grid-template-columns:1fr 1fr;gap:20px}.kit-shipment-routing-overview .routing-port:first-child{order:1}.kit-shipment-routing-overview .routing-port:last-child{order:2;text-align:right}.kit-shipment-routing-overview .routing-main{order:3;grid-column:span 2}.kit-shipment-routing-overview .port-item:first-child{align-items:flex-start;transform:none}.kit-shipment-routing-overview .port-item:first-child .port-item-name{text-align:left}.kit-shipment-routing-overview .port-item:last-child{align-items:flex-end;transform:translate(-100%)}.kit-shipment-routing-overview .port-item:last-child .port-item-name{text-align:right}}\n"] }]
+        }], propDecorators: { originLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "originLabel", required: true }] }], destinationLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "destinationLabel", required: true }] }], originPort: [{ type: i0.Input, args: [{ isSignal: true, alias: "originPort", required: false }] }], originDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "originDate", required: false }] }], destinationPort: [{ type: i0.Input, args: [{ isSignal: true, alias: "destinationPort", required: false }] }], destinationDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "destinationDate", required: false }] }], transitDaysLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitDaysLabel", required: true }] }], ports: [{ type: i0.Input, args: [{ isSignal: true, alias: "ports", required: false }] }], progressPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressPercent", required: false }] }], transportIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "transportIcon", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }] } });
+
 var KitLanguage;
 (function (KitLanguage) {
     KitLanguage["ENGLISH"] = "en";
@@ -13838,21 +14030,24 @@ class KitGridUrlStateService {
         };
     }
     setGridStateToUrl(state, defaultColumns = state?.columns ?? []) {
-        const queryParams = {
-            skip: state?.skip,
-            take: state?.take,
-            search: state?.search,
-            sort: JSON.stringify(state?.sort),
-            filter: JSON.stringify(state?.filter),
-            columns: JSON.stringify(buildGridViewColumns(defaultColumns)),
-            archive: state?.archive,
-        };
+        const queryParams = this.buildGridQueryParams(state, defaultColumns);
         this.router.navigate([], {
             relativeTo: this.activatedRoute,
             queryParams,
             queryParamsHandling: 'merge',
         });
     }
+    replaceGridStateInUrl(state, defaultColumns = state?.columns ?? []) {
+        const queryParams = this.buildGridQueryParams(state, defaultColumns);
+        const urlTree = this.router.createUrlTree([], {
+            relativeTo: this.activatedRoute,
+            queryParams: {
+                ...this.activatedRoute.snapshot.queryParams,
+                ...queryParams,
+            },
+        });
+        this.location.replaceState(this.router.serializeUrl(urlTree));
+    }
     getFiltersVisible(filterDetailsSetting) {
         const filterDetailsParam = this.activatedRoute.snapshot.queryParams['filtersDetails'];
         const isFilterHiddenByParam = filterDetailsParam === 'true';
@@ -13870,6 +14065,17 @@ class KitGridUrlStateService {
         });
         this.location.replaceState(this.router.serializeUrl(urlTree));
     }
+    buildGridQueryParams(state, defaultColumns) {
+        return {
+            skip: state?.skip,
+            take: state?.take,
+            search: state?.search,
+            sort: JSON.stringify(state?.sort),
+            filter: JSON.stringify(state?.filter),
+            columns: JSON.stringify(buildGridViewColumns(defaultColumns)),
+            archive: state?.archive,
+        };
+    }
 }
 
 class FetchGridViews extends KitAbstractPayloadAction {
@@ -14768,14 +14974,13 @@ class KitFilterCheckboxComponent {
         this.kitTooltipPosition = KitTooltipPosition;
         this.kitPillTheme = KitPillTheme;
         this.kitTextboxSize = KitTextboxSize;
+        this.popupToggleRafId = null;
         effect(() => this.allSelected.set(this.groupedItems().every(item => item.checked)));
     }
     ngOnInit() {
         this.initializeSelectedValues();
         this.updateItemsState();
-        if (this.showPopupOnInit() && !this.filter().value) {
-            requestAnimationFrame(() => this.onPopupToggle());
-        }
+        this.openPopupOnInit();
     }
     ngOnChanges({ filter }) {
         if (!filter?.isFirstChange()) {
@@ -14783,6 +14988,12 @@ class KitFilterCheckboxComponent {
             this.updateItemsState();
         }
     }
+    ngOnDestroy() {
+        if (this.popupToggleRafId !== null) {
+            cancelAnimationFrame(this.popupToggleRafId);
+            this.popupToggleRafId = null;
+        }
+    }
     removeFilter() {
         this.popup()?.close();
         this.filterRemoved.emit();
@@ -14800,7 +15011,7 @@ class KitFilterCheckboxComponent {
         this.selectedValues.set(checkedItems);
     }
     onPopupToggle() {
-        requestAnimationFrame(() => this.popup()?.toggle());
+        this.popup()?.toggle();
     }
     close() {
         this.updateItemsState();
@@ -14897,6 +15108,15 @@ class KitFilterCheckboxComponent {
             checked: this.selectedValues().some(selectedValue => selectedValue.value === item.value) ?? false,
         })));
     }
+    openPopupOnInit() {
+        if (!this.showPopupOnInit() || this.selectedValues().length > 0) {
+            return;
+        }
+        this.popupToggleRafId = requestAnimationFrame(() => {
+            this.popupToggleRafId = null;
+            this.onPopupToggle();
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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        <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] }}</span>\n        <span class=\"kit-filter-checkbox-tooltip-count\">+{{ displayedValues.length - 1 }}</span>\n      </div>\n    } @else {\n      <span class=\"kit-filter-checkbox-single-item\">{{ displayedValues[0] ?? '' }}</span>\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           [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{display:flex;align-items:center;gap:3px}.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}.kit-filter-checkbox-single-item{display:block;max-width:180px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}::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: "component", type: KitCheckboxComponent, selector: "kit-checkbox", inputs: ["label", "disabled", "checked", "readonly", "state", "messageIcon", "messageText", "indeterminate"], outputs: ["changed"] }, { kind: "directive", type: KitTooltipDirective, selector: "[kitTooltip]", inputs: ["kitTooltipPosition", "kitTooltipFilter", "kitTooltipTemplateRef", "kitTooltipVisible", "kitTooltipOffset"] }, { 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: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -14917,6 +15137,8 @@ class KitFilterCustomInputComponent {
     constructor() {
         this.filter = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.showPopupOnInit = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPopupOnInit" }] : /* istanbul ignore next */ []));
         this.filterRemoved = output();
         this.filterChanged = output();
         this.anchor = viewChild.required('toggleButton', { ...(ngDevMode ? { debugName: "anchor" } : /* istanbul ignore next */ {}), read: ElementRef });
@@ -14931,7 +15153,7 @@ class KitFilterCustomInputComponent {
     }
     ngOnInit() {
         this.initializeValue();
-        this.showPopupOnInit();
+        this.openPopupOnInit();
     }
     ngOnDestroy() {
         if (this.rafId) {
@@ -14983,16 +15205,17 @@ class KitFilterCustomInputComponent {
             this.inputValue.set(value);
         }
     }
-    showPopupOnInit() {
-        if (!this.selectedValue()) {
-            this.rafId = requestAnimationFrame(() => {
-                this.rafId = null;
-                this.onPopupToggle();
-            });
+    openPopupOnInit() {
+        if (!this.showPopupOnInit() || this.selectedValue()) {
+            return;
         }
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.onPopupToggle();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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  <kit-truncate-text class=\"kit-custom-input-selected-values\">\n    {{ selectedValue() }}\n  </kit-truncate-text>\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           [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>\n", styles: [".kit-custom-input-selected-values{max-width:180px}::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: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: KitFilterCustomInputComponent, isStandalone: true, selector: "kit-filter-custom-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", 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: "<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  <kit-truncate-text class=\"kit-custom-input-selected-values\">\n    {{ selectedValue() }}\n  </kit-truncate-text>\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           [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>\n", styles: [".kit-custom-input-selected-values{max-width:180px}::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: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterCustomInputComponent, decorators: [{
             type: Component,
@@ -15003,13 +15226,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         TranslatePipe,
                         KitTruncateTextComponent,
                     ], 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  <kit-truncate-text class=\"kit-custom-input-selected-values\">\n    {{ selectedValue() }}\n  </kit-truncate-text>\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           [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>\n", styles: [".kit-custom-input-selected-values{max-width:180px}::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 }] }] } });
+        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], 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 }] }] } });
 
 class KitFilterDateComponent {
     constructor() {
         this.store = inject(Store);
         this.filter = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.showPopupOnInit = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPopupOnInit" }] : /* istanbul ignore next */ []));
         this.useUserTimeZone = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "useUserTimeZone" }] : /* istanbul ignore next */ []));
         this.useLocalTimeZone = input(false, /* @ts-ignore */
@@ -15029,7 +15254,7 @@ class KitFilterDateComponent {
         ...(ngDevMode ? [{ debugName: "endDate" }] : /* istanbul ignore next */ []));
         this.dateRange = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dateRange" }] : /* istanbul ignore next */ []));
-        this.selectedValues = signal({}, /* @ts-ignore */
+        this.selectedValues = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
         this.pillDateFormat = 'dd/MM/yy';
         this.kitPillTheme = KitPillTheme;
@@ -15088,15 +15313,12 @@ class KitFilterDateComponent {
     }
     ngOnInit() {
         this.initializeSelectedValues();
-        this.showPopupOnInit();
+        this.openPopupOnInit();
         this.addOutsideClickListener();
     }
     ngOnDestroy() {
         this.removeOutsideClickListener();
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
+        this.cancelPendingAnimationFrame();
     }
     removeFilter() {
         this.popup()?.close();
@@ -15106,15 +15328,15 @@ class KitFilterDateComponent {
         this.popup()?.toggle();
     }
     close() {
-        if (!this.filter().value && !(this.selectedValues().start || this.selectedValues().end)) {
+        const selectedValues = this.selectedValues();
+        if (!selectedValues?.start && !selectedValues?.end) {
             this.startDate.set(undefined);
             this.endDate.set(undefined);
             this.dateRange.set(undefined);
             return;
         }
-        const [startFilter, endFilter,] = this.filter().value?.filters || [];
-        this.startDate.set(startFilter?.value);
-        this.endDate.set(endFilter?.value);
+        this.startDate.set(selectedValues.start);
+        this.endDate.set(selectedValues.end);
     }
     onFromDateChange(date) {
         this.dateRange.set(undefined);
@@ -15167,9 +15389,14 @@ class KitFilterDateComponent {
         this.endDate.set(endDate);
         this.dateRange.set(range);
         this.applyFilter();
+        this.popup()?.close();
     }
     initializeSelectedValues() {
         const filterValue = this.filter().value?.filters ?? null;
+        if (!filterValue?.length) {
+            this.selectedValues.set(null);
+            return;
+        }
         this.selectedValues.set({
             start: filterValue?.[0]?.value,
             end: filterValue?.[1]?.value,
@@ -15178,12 +15405,14 @@ class KitFilterDateComponent {
         this.endDate.set(this.selectedValues()?.end);
         this.dateRange.set(this.filter().value?.dateRange);
     }
-    showPopupOnInit() {
-        if (!this.selectedValues()?.start && !this.selectedValues()?.end) {
-            this.rafId = requestAnimationFrame(() => {
-                this.onPopupToggle();
-            });
+    openPopupOnInit() {
+        if (!this.showPopupOnInit() || this.selectedValues()) {
+            return;
         }
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.onPopupToggle();
+        });
     }
     addOutsideClickListener() {
         document.addEventListener('mousedown', this.onDocumentMouseDown, true);
@@ -15222,8 +15451,15 @@ class KitFilterDateComponent {
         }
         return {};
     }
+    cancelPendingAnimationFrame() {
+        if (this.rafId === null) {
+            return;
+        }
+        cancelAnimationFrame(this.rafId);
+        this.rafId = null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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           [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.yesterday' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.YESTERDAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.YESTERDAY)\" />\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                      (keydown.enter)=\"onEnterKey()\"\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                      (keydown.enter)=\"onEnterKey()\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup{min-width:296px}::ng-deep .kit-filter-date-popup .popup-content{box-sizing:border-box}::ng-deep .kit-filter-date-popup .popup-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:15px}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;width:100%;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { 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: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterDateComponent, isStandalone: true, selector: "kit-filter-date", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, 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 (localStartDate() || localEndDate()) {\n      {{ localStartDate() | date: pillDateFormat }}\n      @if (localStartDate() && localEndDate()) {\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           [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.yesterday' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.YESTERDAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.YESTERDAY)\" />\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                      (keydown.enter)=\"onEnterKey()\"\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                      (keydown.enter)=\"onEnterKey()\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup{min-width:296px}::ng-deep .kit-filter-date-popup .popup-content{box-sizing:border-box}::ng-deep .kit-filter-date-popup .popup-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:15px}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;width:100%;gap:10px}\n"], dependencies: [{ kind: "component", type: KitPillComponent, selector: "kit-pill", inputs: ["removable", "selectable", "selected", "type", "theme", "icon", "iconType"], outputs: ["clicked", "removed"] }, { 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: TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterDateComponent, decorators: [{
             type: Component,
@@ -15234,14 +15470,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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 && (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           [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.yesterday' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.YESTERDAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.YESTERDAY)\" />\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                      (keydown.enter)=\"onEnterKey()\"\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                      (keydown.enter)=\"onEnterKey()\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup{min-width:296px}::ng-deep .kit-filter-date-popup .popup-content{box-sizing:border-box}::ng-deep .kit-filter-date-popup .popup-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:15px}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;width:100%;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 }] }] } });
+                    ], 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 (localStartDate() || localEndDate()) {\n      {{ localStartDate() | date: pillDateFormat }}\n      @if (localStartDate() && localEndDate()) {\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           [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.yesterday' | translate\"\n                [active]=\"dateRange() === kitFilterDateRange.YESTERDAY\"\n                (clicked)=\"selectDateRange(kitFilterDateRange.YESTERDAY)\" />\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                      (keydown.enter)=\"onEnterKey()\"\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                      (keydown.enter)=\"onEnterKey()\"\n      ></kit-datepicker>\n    </div>\n  </div>\n</ng-template>\n", styles: ["::ng-deep .kit-filter-date-popup{min-width:296px}::ng-deep .kit-filter-date-popup .popup-content{box-sizing:border-box}::ng-deep .kit-filter-date-popup .popup-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:15px}::ng-deep .kit-filter-date-popup .date-input{display:flex;flex-direction:column;width:100%;gap:10px}\n"] }]
+        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], 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() {
         this.translateService = inject(TranslateService);
         this.filter = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.showPopupOnInit = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPopupOnInit" }] : /* istanbul ignore next */ []));
         this.filterInputType = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterInputType" }] : /* istanbul ignore next */ []));
         this.filterRemoved = output();
@@ -15276,7 +15514,7 @@ class KitFilterInputComponent {
     }
     ngOnInit() {
         this.initializeSelectedValues();
-        this.showPopupOnInit();
+        this.openPopupOnInit();
     }
     ngOnDestroy() {
         this.cancelPendingAnimationFrame('popupToggleRafId');
@@ -15373,13 +15611,14 @@ class KitFilterInputComponent {
             ],
         }));
     }
-    showPopupOnInit() {
-        if (!this.selectedValues()) {
-            this.popupToggleRafId = requestAnimationFrame(() => {
-                this.popupToggleRafId = null;
-                this.onPopupToggle();
-            });
+    openPopupOnInit() {
+        if (!this.showPopupOnInit() || this.selectedValues()) {
+            return;
         }
+        this.popupToggleRafId = requestAnimationFrame(() => {
+            this.popupToggleRafId = null;
+            this.onPopupToggle();
+        });
     }
     scheduleFocusFirstInput() {
         this.cancelPendingAnimationFrame('focusRafId');
@@ -15432,7 +15671,7 @@ class KitFilterInputComponent {
         this.focusRafId = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, 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    <kit-truncate-text class=\"kit-filter-input-selected-values\">\n      @for (filter of selectedFilters; track $index) {\n        {{ getSelectedFilterText(filter) }}\n\n        @if ($index === 0) {\n          {{ getSelectedLogicText(selectedValues()) }}\n        }\n      }\n    </kit-truncate-text>\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           (opened)=\"onPopupOpened()\"\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                                   [max]=\"maxIntegerValue\"\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", styles: [".kit-filter-input-selected-values{max-width:180px}::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: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: KitFilterInputComponent, isStandalone: true, selector: "kit-filter-input", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", isSignal: true, isRequired: false, 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: "textboxComponents", predicate: KitTextboxComponent, descendants: true, isSignal: true }, { propertyName: "numericTextboxComponents", predicate: KitNumericTextboxComponent, descendants: true, 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    <kit-truncate-text class=\"kit-filter-input-selected-values\">\n      @for (filter of selectedFilters; track $index) {\n        {{ getSelectedFilterText(filter) }}\n\n        @if ($index === 0) {\n          {{ getSelectedLogicText(selectedValues()) }}\n        }\n      }\n    </kit-truncate-text>\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           (opened)=\"onPopupOpened()\"\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                                   [max]=\"maxIntegerValue\"\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", styles: [".kit-filter-input-selected-values{max-width:180px}::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: "component", type: KitNumericTextboxComponent, selector: "kit-numeric-textbox", inputs: ["placeholder", "label", "defaultValue", "decimals", "min", "max", "maxlength", "messageIcon", "messageText", "disabled", "format", "state", "icon", "size", "showStateIcon", "readonly"], outputs: ["defaultValueChange", "disabledChange", "blured", "changed"] }, { kind: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterInputComponent, decorators: [{
             type: Component,
@@ -15445,7 +15684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitNumericTextboxComponent,
                         KitTruncateTextComponent,
                     ], 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    <kit-truncate-text class=\"kit-filter-input-selected-values\">\n      @for (filter of selectedFilters; track $index) {\n        {{ getSelectedFilterText(filter) }}\n\n        @if ($index === 0) {\n          {{ getSelectedLogicText(selectedValues()) }}\n        }\n      }\n    </kit-truncate-text>\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           (opened)=\"onPopupOpened()\"\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                                   [max]=\"maxIntegerValue\"\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", styles: [".kit-filter-input-selected-values{max-width:180px}::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 }] }], textboxComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }], numericTextboxComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KitNumericTextboxComponent), { isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
+        }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], showPopupOnInit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPopupOnInit", required: false }] }], 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 }] }], textboxComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KitTextboxComponent), { isSignal: true }] }], numericTextboxComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KitNumericTextboxComponent), { isSignal: true }] }], popup: [{ type: i0.ViewChild, args: ['popup', { ...{ read: KitPopupComponent }, isSignal: true }] }] } });
 
 class KitFilterNullCheckComponent {
     constructor() {
@@ -15478,14 +15717,10 @@ class KitFilterNullCheckComponent {
             { label: this.notNullLabel(), value: KitFilterOperator.IS_NOT_NULL, checked: false },
         ]);
         this.initializeSelectedOption();
-        if (this.showPopupOnInit() && !this.selectedOption()) {
-            this.rafId = requestAnimationFrame(() => {
-                this.onPopupToggle();
-            });
-        }
+        this.openPopupOnInit();
     }
     ngOnDestroy() {
-        if (this.rafId) {
+        if (this.rafId !== null) {
             cancelAnimationFrame(this.rafId);
             this.rafId = null;
         }
@@ -15509,7 +15744,7 @@ class KitFilterNullCheckComponent {
         this.filterChanged.emit(filter);
     }
     onPopupToggle() {
-        requestAnimationFrame(() => this.popup()?.toggle());
+        this.popup()?.toggle();
     }
     close() {
         if (!this.filter().value && !this.selectedOption()) {
@@ -15541,6 +15776,15 @@ class KitFilterNullCheckComponent {
         const option = this.options().find(opt => opt.value === currentFilter.operator);
         this.onOptionChange(option ?? this.options()[0]);
     }
+    openPopupOnInit() {
+        if (!this.showPopupOnInit() || this.selectedOption()) {
+            return;
+        }
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.onPopupToggle();
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterNullCheckComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", 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)=\"onRadioButtonChange($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: 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: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -15564,6 +15808,8 @@ class KitFilterRadioComponent {
         ...(ngDevMode ? [{ debugName: "translateKeyPrefix" }] : /* istanbul ignore next */ []));
         this.items = model([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.showPopupOnInit = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPopupOnInit" }] : /* istanbul ignore next */ []));
         this.filterRemoved = output();
         this.filterChanged = output();
         this.anchor = viewChild.required('toggleButton', { ...(ngDevMode ? { debugName: "anchor" } : /* istanbul ignore next */ {}), read: ElementRef });
@@ -15573,11 +15819,18 @@ class KitFilterRadioComponent {
         this.radioButtonValue = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "radioButtonValue" }] : /* istanbul ignore next */ []));
         this.kitPillTheme = KitPillTheme;
+        this.popupToggleRafId = null;
     }
     ngOnInit() {
         this.initializeSelectedValue();
         this.updateItemsState();
-        this.showPopupOnInit();
+        this.openPopupOnInit();
+    }
+    ngOnDestroy() {
+        if (this.popupToggleRafId !== null) {
+            cancelAnimationFrame(this.popupToggleRafId);
+            this.popupToggleRafId = null;
+        }
     }
     get selectedFilterValue() {
         return this.selectedValue()?.filters[0].value;
@@ -15661,13 +15914,17 @@ class KitFilterRadioComponent {
             checked: this.selectedFilterValue === item.value,
         })));
     }
-    showPopupOnInit() {
-        if (!this.selectedValue()) {
-            requestAnimationFrame(() => this.onPopupToggle());
+    openPopupOnInit() {
+        if (!this.showPopupOnInit() || this.selectedValue()) {
+            return;
         }
+        this.popupToggleRafId = requestAnimationFrame(() => {
+            this.popupToggleRafId = null;
+            this.onPopupToggle();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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      <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n        {{ getSelectedFilterText(selectedFilterValue) | translate }}\n      </kit-truncate-text>\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           [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: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::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: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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 }, showPopupOnInit: { classPropertyName: "showPopupOnInit", publicName: "showPopupOnInit", 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      <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n        {{ getSelectedFilterText(selectedFilterValue) | translate }}\n      </kit-truncate-text>\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           [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: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::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: "component", type: KitTruncateTextComponent, selector: "kit-truncate-text", inputs: ["tooltipText", "lines", "innerHtml"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitFilterRadioComponent, decorators: [{
             type: Component,
@@ -15678,7 +15935,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         KitRadioButtonComponent,
                         KitTruncateTextComponent,
                     ], 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      <kit-truncate-text class=\"kit-filter-radio-selected-values\">\n        {{ getSelectedFilterText(selectedFilterValue) | translate }}\n      </kit-truncate-text>\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           [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: [".kit-filter-radio-selected-values{max-width:180px}::ng-deep .kit-filter-radio-popup .popup-content{width:172px;max-height:400px;overflow-y:auto}::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 }] }] } });
+        }], 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 }] }], 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 {
     constructor() {
@@ -15744,14 +16001,20 @@ class KitGridFiltersComponent {
             .filter(item => !this.excludedColumns().includes(item.field))
             .map(item => this.buildFilterSelectorItem(item, this.filters())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterSelectorItems" }] : /* istanbul ignore next */ []));
+        this.filterToAutoOpen = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterToAutoOpen" }] : /* istanbul ignore next */ []));
     }
     addFilter(item) {
+        this.filterToAutoOpen.set(item.field);
         this.store.dispatch(new AddGridFilter({
             title: item.title,
             field: item.field,
             type: item.filterType,
             value: null,
-        }));
+        })).subscribe(() => {
+            this.kitGridUrlStateService.replaceGridStateInUrl(this.store.selectSnapshot(KIT_GRID_STATE_TOKEN));
+        });
+        requestAnimationFrame(() => this.filterToAutoOpen.set(null));
     }
     removeFilter(field) {
         this.store.dispatch(new RemoveGridFilter(field)).subscribe(() => {
@@ -15791,17 +16054,11 @@ class KitGridFiltersComponent {
     getDateFilterConstraint(filter) {
         return this.columns().find(col => col.field === filter.field)?.dateFilterConstraint;
     }
-    getCheckboxFilterItems(field) {
-        return this.filterListConfig()[field].items.map(item => ({
-            ...item,
-            value: String(item.value),
-        }));
-    }
     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: "22.1.1", ngImport: i0, type: KitGridFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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]=\"getCheckboxFilterItems(item.field)\"\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]=\"getCheckboxFilterItems(item.field)\"\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() || isLocalDateColumn(item)\"\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}::ng-deep .kit-pill-content{white-space:nowrap}\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", 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.field) {\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                             [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                             [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                          [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                         [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\n                         [useLocalTimeZone]=\"useLocalTimeZone() || isLocalDateColumn(item)\"\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                          [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                          [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                               [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                                 [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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}::ng-deep .kit-pill-content{white-space:nowrap}\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", "showPopupOnInit", "useUserTimeZone", "useLocalTimeZone", "dateFilterConstraint"], outputs: ["filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterRadioComponent, selector: "kit-filter-radio", inputs: ["filter", "translateKeyPrefix", "items", "showPopupOnInit"], outputs: ["itemsChange", "filterRemoved", "filterChanged"] }, { kind: "component", type: KitFilterInputComponent, selector: "kit-filter-input", inputs: ["filter", "showPopupOnInit", "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", "showPopupOnInit"], outputs: ["filterRemoved", "filterChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: KitGridFiltersComponent, decorators: [{
             type: Component,
@@ -15813,7 +16070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", 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]=\"getCheckboxFilterItems(item.field)\"\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]=\"getCheckboxFilterItems(item.field)\"\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() || isLocalDateColumn(item)\"\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}::ng-deep .kit-pill-content{white-space:nowrap}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kit-grid-filters\">\n  @for (item of filters(); track item.field) {\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                             [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                             [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                          [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                         [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\n                         [useLocalTimeZone]=\"useLocalTimeZone() || isLocalDateColumn(item)\"\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                          [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                          [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                               [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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                                 [showPopupOnInit]=\"filterToAutoOpen() === item.field\"\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}::ng-deep .kit-pill-content{white-space:nowrap}\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 {
@@ -18996,5 +19253,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, DeletePartner, FetchApiTokens, FetchPartners, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_ALL_PERMISSIONS_PATH, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_DATE_FORMAT_SHORT, KIT_ENTITY_CREATE_SERVICE, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_LANGUAGE_LABELS, KIT_PARTNERS_STATE_TOKEN, KIT_SUPPORTED_LANGUAGES, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAvatarComponent, KitAvatarSize, KitBackButtonComponent, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCodeEditorComponent, KitCodeEditorLanguage, KitCodeEditorMode, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCreateEntityDialogComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldLayout, KitDataFieldState, KitDateRangeSingleInput, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDrawerMode, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEmptySectionSize, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableActionsTemplateDirective, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntitySectionLayout, KitEntityTitleComponent, KitExcelExportService, KitExpansionPanelComponent, KitExpansionPanelHeaderTemplateDirective, KitExpansionPanelToggleMode, KitExpansionPanelView, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardSize, KitFileUploadComponent, KitFileUploadTemplateType, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridActionComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridCheckboxColumnComponent, KitGridCheckboxColumnType, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridDropPosition, KitGridExportComponent, KitGridFiltersComponent, KitGridFiltersToggleComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitHttpErrorHandlerService, KitLanguage, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitLocationStepperIconTheme, KitLocationStepperTheme, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitMultiselectGroupTagTemplateDirective, KitMultiselectItemsDirection, KitMultiselectSize, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitOptionToggleSize, KitPageLayoutComponent, KitPartnerComponent, KitPartnerService, KitPartnerState, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopoverAnchorDirective, KitPopoverComponent, KitPopoverPosition, KitPopoverShowOption, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerMonthHeaderCellTemplateDirective, KitSchedulerToolbarTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSelectableCardComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonSectionComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineCompactComponent, KitTimelineCompactItemTheme, KitTimelineCompactLineTheme, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTreeComponent, KitTreeContentDirective, KitTreeContentFormat, KitTreeViewMode, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApiService, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserRoleDetailsComponent, KitUserRolesComponent, KitUserRolesService, KitUserRolesState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, KitUsersService, KitUsersSettingsComponent, KitUsersSettingsEntitlementType, KitUsersSettingsEntitlementsService, KitUsersSettingsEntitlementsState, KitUsersSettingsReferenceService, KitUsersSettingsState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, UpdatePartnerName, UpdateUserPreferences, buildRandomUUID, changeFilterField, createDataFetcherFactory, findMatches, getTextboxState, isKitFilterDescriptor, isKitLanguageSupported, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitUserRolesConfig, kitUsersSettingsConfig, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
+export { AbstractKitCtaPanelConfirmationComponent, AddGridFilter, DeletePartner, FetchApiTokens, FetchPartners, FetchUser, FetchUserIdentities, FetchUserPermissions, FetchUserSettings, HighlightPipe, KIT_ALL_PERMISSIONS_PATH, KIT_API_TOKENS_STATE_TOKEN, KIT_BASE_PATH, KIT_DATETIME_FORMAT_LONG, KIT_DATE_FORMAT, KIT_DATE_FORMAT_SHORT, KIT_ENTITY_CREATE_SERVICE, KIT_GRID_CELL_DATE_FORMAT_CONFIG, KIT_GRID_COLUMN_WIDTH, KIT_GRID_PAGE_SIZE, KIT_GRID_STATE_TOKEN, KIT_LANGUAGE_LABELS, KIT_PARTNERS_STATE_TOKEN, KIT_SUPPORTED_LANGUAGES, KIT_TIME_FORMAT_SHORT, KIT_USER_APPLICATIONS_PATH, KIT_USER_IDENTITIES_STATE_TOKEN, KIT_USER_PATH, KIT_USER_PERMISSIONS_PATH, KIT_USER_PERMISSIONS_STATE_TOKEN, KIT_USER_STATE_TOKEN, KitAbstractIdPayloadAction, KitAbstractPayloadAction, KitAccountService, KitApiTokenMaintenanceListComponent, KitApiTokenMaintenanceListState, KitApiTokensPermissionCategories, KitAutocompleteComponent, KitAutocompleteDirective, KitAvatarComponent, KitAvatarSize, KitBackButtonComponent, KitBadgeDirective, KitBadgeTheme, KitBreadcrumbsComponent, KitBreadcrumbsService, KitButtonComponent, KitButtonIconPosition, KitButtonKind, KitButtonState, KitButtonType, KitCardComponent, KitCardDetailsComponent, KitCardTheme, KitCheckboxComponent, KitCheckboxState, KitClipboardService, KitCodeEditorComponent, KitCodeEditorLanguage, KitCodeEditorMode, KitCollapsedListComponent, KitCollapsedListDropdownAlign, KitCopyTextComponent, KitCreateEntityDialogComponent, KitCtaPanelAbstractConfirmationComponent, KitCtaPanelActionComponent, KitCtaPanelConfirmationComponent, KitCtaPanelItemComponent, KitCtaPanelItemType, KitDataFieldComponent, KitDataFieldLayout, KitDataFieldState, KitDateRangeSingleInput, KitDatepickerComponent, KitDatepickerSize, KitDaterangeComponent, KitDaterangeType, KitDatetimepickerComponent, KitDeferredFailedRequestService, KitDialogActionsComponent, KitDialogComponent, KitDialogService, KitDialogTitlebarComponent, KitDialogType, KitDrawerComponent, KitDrawerContentTemplateDirective, KitDrawerFooterTemplateDirective, KitDrawerMode, KitDropdownComponent, KitDropdownItemTemplateDirective, KitDropdownSize, KitEmptySectionComponent, KitEmptySectionSize, KitEntityGridComponent, KitEntitySectionComponent, KitEntitySectionContainerComponent, KitEntitySectionEditableActionsTemplateDirective, KitEntitySectionEditableComponent, KitEntitySectionEditableEditTemplateDirective, KitEntitySectionEditableMode, KitEntitySectionEditableViewTemplateDirective, KitEntitySectionLayout, KitEntityTitleComponent, KitExcelExportService, KitExpansionPanelComponent, KitExpansionPanelHeaderTemplateDirective, KitExpansionPanelToggleMode, KitExpansionPanelView, KitFileCardComponent, KitFileCardMessagesComponent, KitFileCardSize, KitFileUploadComponent, KitFileUploadTemplateType, KitFilterCheckboxComponent, KitFilterDateRange, KitFilterLogic, KitFilterOperator, KitFilterType, KitForbiddenComponent, KitFormErrors, KitFormFieldComponent, KitFormLabelComponent, KitFormMessageComponent, KitGlobalSearchComponent, KitGridActionComponent, KitGridArchiveToggle, KitGridCellComponent, KitGridCellService, KitGridCellTemplateDirective, KitGridCheckboxColumnComponent, KitGridCheckboxColumnType, KitGridColumnComponent, KitGridColumnManagerComponent, KitGridComponent, KitGridDetailTemplateDirective, KitGridDetailsButtonComponent, KitGridDropPosition, KitGridExportComponent, KitGridFiltersComponent, KitGridFiltersToggleComponent, KitGridLiveUpdatesControlComponent, KitGridSearchComponent, KitGridSortSettingsMode, KitGridState, KitGridUrlStateService, KitGridViewType, KitGridViewsComponent, KitGridViewsState, KitHttpErrorHandlerService, KitLanguage, KitListComponent, KitLoaderComponent, KitLocationStepperComponent, KitLocationStepperIconTheme, KitLocationStepperTheme, KitMobileHeaderComponent, KitMobileMenuComponent, KitMobileMenuState, KitMultiselectComponent, KitMultiselectGroupTagTemplateDirective, KitMultiselectItemsDirection, KitMultiselectSize, KitNavigationMenuComponent, KitNavigationMenuService, KitNavigationMenuSubmenuComponent, KitNavigationTabsComponent, KitNavigationTabsType, KitNotFoundComponent, KitNoteComponent, KitNotificationComponent, KitNotificationService, KitNotificationType, KitNumericTextboxComponent, KitNumericTextboxSize, KitNumericTextboxState, KitOptionToggleComponent, KitOptionToggleSize, KitPageLayoutComponent, KitPartnerComponent, KitPartnerService, KitPartnerState, KitPermissionDirective, KitPillComponent, KitPillTheme, KitPillType, KitPopoverAnchorDirective, KitPopoverComponent, KitPopoverPosition, KitPopoverShowOption, KitPopupAlignHorizontal, KitPopupAlignVertical, KitPopupComponent, KitPopupPositionMode, KitProfileMenuComponent, KitQueryParamsName, KitQueryParamsService, KitRadioButtonComponent, KitRadioButtonType, KitRoutePathComponent, KitSchedulerAgendaTimeTemplateDirective, KitSchedulerComponent, KitSchedulerCustomViewTemplateDirective, KitSchedulerMonthEventTemplateDirective, KitSchedulerMonthHeaderCellTemplateDirective, KitSchedulerToolbarTemplateDirective, KitSchedulerWeekEventTemplateDirective, KitScrollNavigationComponent, KitScrollNavigationSectionComponent, KitSearchBarComponent, KitSelectableCardComponent, KitShipmentRoutingCardComponent, KitShipmentRoutingOverviewComponent, KitSidebarComponent, KitSkeletonAnimation, KitSkeletonComponent, KitSkeletonGridComponent, KitSkeletonSectionComponent, KitSkeletonShape, KitSortDirection, KitSortableComponent, KitSplitContainerComponent, KitStatusLabelColor, KitStatusLabelComponent, KitStatusLabelSize, KitSvgIcon, KitSvgIconComponent, KitSvgIconType, KitSvgSpriteComponent, KitSwitchComponent, KitSwitchMode, KitSwitchState, KitTabComponent, KitTabContentDirective, KitTabsComponent, KitTabsSize, KitTabsType, KitTextLabelComponent, KitTextLabelState, KitTextareaComponent, KitTextareaState, KitTextboxActionsComponent, KitTextboxComponent, KitTextboxSize, KitTextboxState, KitThemeService, KitThemes, KitTileLayoutComponent, KitTileLayoutItemComponent, KitTimelineCardComponent, KitTimelineCompactComponent, KitTimelineCompactItemTheme, KitTimelineCompactLineTheme, KitTimelineComponent, KitTimelineTheme, KitTimelineType, KitTimepickerComponent, KitTitleTemplateDirective, KitToggleComponent, KitToggleSize, KitTooltipDirective, KitTooltipPosition, KitTopBarComponent, KitTrackingCardComponent, KitTrackingTimelineComponent, KitTranslateLoader, KitTranslateService, KitTreeComponent, KitTreeContentDirective, KitTreeContentFormat, KitTreeViewMode, KitTruncateTextComponent, KitUnitsTextboxComponent, KitUnitsTextboxDropdownPosition, KitUnitsTextboxType, KitUserApiService, KitUserApplicationsState, KitUserIdentitiesInterceptor, KitUserIdentitiesSelector, KitUserIdentitiesState, KitUserPermissionsState, KitUserRoleDetailsComponent, KitUserRolesComponent, KitUserRolesService, KitUserRolesState, KitUserSettingsComponent, KitUserSettingsKeys, KitUserSettingsState, KitUserState, KitUserType, KitUsersService, KitUsersSettingsComponent, KitUsersSettingsEntitlementType, KitUsersSettingsEntitlementsService, KitUsersSettingsEntitlementsState, KitUsersSettingsReferenceService, KitUsersSettingsState, RemoveGridFilter, SetGridColumns, SetGridFilters, SetGridSearch, SetGridSkip, SetGridSort, SetGridTake, SetUserIdentity, UpdateGridFilter, UpdatePartnerName, UpdateUserPreferences, buildRandomUUID, calculateCurrentLegProgress, calculateDurationInDays, calculateMainRouteProgressPercent, changeFilterField, createDataFetcherFactory, findMatches, getMainRouteActiveLegIndex, getTextboxState, getTransportIconLegIndex, isKitFilterDescriptor, isKitLanguageSupported, isLegReachedDestination, kitApiResponseDefaultEntities, kitApiTokenMaintenanceConfig, kitApiTokenMaintenanceRoutes, kitBuildFilterBooleanOptions, kitBuildFilterListOptions, kitBuildFilters, kitBuildGridColumn, kitBuildGridDataResults, kitBuildHttpParams, kitBuildOdataFilter, kitBuildSortString, kitDataStateToODataString, kitEncodeViewNameToUrl, kitFetchExportGridData, kitFetchGridData, kitFilterBy, kitFormatStringForSearch, kitGetPermissionTypesByCategory, kitHasPermission, kitNormalizeDateToUtc, kitShouldResetGridState, kitTranslations, kitUserPermissionsGuard, kitUserRolesConfig, kitUsersSettingsConfig, kitWhitespaceValidator, mapGlobalSearchResult, trimTrailingSlash };
 //# sourceMappingURL=indigina-ui-kit.mjs.map