@ngneers/controls 0.0.1-pre5 → 0.0.1-pre7

package/fesm2022/ngneers-controls-filter.mjs

@@ -1,9 +1,10 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, input, booleanAttribute, computed, output, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, DestroyRef, input, booleanAttribute, numberAttribute, computed, output, viewChild, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import { getActiveFilterConditions, executeFilter } from '@ngneers/controls/api';
 import { ValueControlBase, NgnPt, provideSelf } from '@ngneers/controls/base';
 import { NgnButton } from '@ngneers/controls/button';
+import { NgnCalendar } from '@ngneers/controls/calendar';
 import { I18n } from '@ngneers/controls/i18n';
 import { NgnIcon } from '@ngneers/controls/icon';
 import { NgnInput } from '@ngneers/controls/input';
@@ -74,51 +75,89 @@ class NgnFilter extends ValueControlBase {
     theme = this.injectThemeTemplate(filterControlTemplate, 'root');
     i18n = inject(I18n).translations;
     unsafeI18n = inject(I18n).unsafe;
+    _destroyRef = inject(DestroyRef);
     /** Data to filter. */
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     /** Datatype of the values in {@link data}. */
-    dataType = input('string', ...(ngDevMode ? [{ debugName: "dataType" }] : []));
+    dataType = input('string', ...(ngDevMode ? [{ debugName: "dataType" }] : /* istanbul ignore next */ []));
     /** Allows multiple conditions and a match mode (any/all). */
-    allowMultiple = input(false, { ...(ngDevMode ? { debugName: "allowMultiple" } : {}), transform: booleanAttribute });
+    allowMultiple = input(false, { ...(ngDevMode ? { debugName: "allowMultiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
      * Options for `dataType="list"`.
      * When provided, they are used as-is. When `null` or `undefined`, options are derived from {@link data}.
      */
-    listOptions = input(...(ngDevMode ? [undefined, { debugName: "listOptions" }] : []));
+    listOptions = input(...(ngDevMode ? [undefined, { debugName: "listOptions" }] : /* istanbul ignore next */ []));
     /**
      * Controls how the filter is rendered.
      * - `inline`: renders the filter rows directly
      * - `input`: renders an input-like trigger that opens a popover (default)
      * - `headless`: renders only the popover and can be opened programmatically via {@link show}
      */
-    mode = input('input', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    mode = input('input', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     /**
      * Popover anchor used only in `headless` mode.
      * In `input` mode the anchor is the internal input-field.
      */
-    anchor = input(null, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    anchor = input(null, ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
     /**
      * When true, the component will filter {@link data} locally and emit the filtered result.
      * When false, only the filter configuration is emitted (useful for server-side filtering).
      */
-    filterLocally = input(true, { ...(ngDevMode ? { debugName: "filterLocally" } : {}), transform: booleanAttribute });
+    filterLocally = input(true, { ...(ngDevMode ? { debugName: "filterLocally" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true (default), filters apply automatically as the user types/selects.
+     * When false, the user must click "Apply" to commit the filter.
+     */
+    autoApply = input(true, { ...(ngDevMode ? { debugName: "autoApply" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Debounce time in milliseconds for auto-apply mode.
+     * Only relevant when {@link autoApply} is `true`.
+     */
+    autoApplyDebounce = input(300, { ...(ngDevMode ? { debugName: "autoApplyDebounce" } : /* istanbul ignore next */ {}), transform: numberAttribute });
     /** Options for the popover (when {@link mode} is not `inline`). */
-    popoverOptions = input({}, ...(ngDevMode ? [{ debugName: "popoverOptions" }] : []));
+    popoverOptions = input({}, ...(ngDevMode ? [{ debugName: "popoverOptions" }] : /* istanbul ignore next */ []));
     appliedPopoverOptions = computed(() => deepMerge({
         sizeConstraints: {
-            width: '250px',
-            minHeight: '200px',
+            width: '360px',
+            minHeight: '120px',
             maxHeight: '500px',
         },
         placement: 'bottom-start',
-    }, this.popoverOptions()), ...(ngDevMode ? [{ debugName: "appliedPopoverOptions" }] : []));
+    }, this.popoverOptions()), ...(ngDevMode ? [{ debugName: "appliedPopoverOptions" }] : /* istanbul ignore next */ []));
     /** Emits whenever the filter configuration changes. */
     filterChange = output();
     /** Emits the filtered data whenever local filtering is enabled. */
     filterResultChange = output();
-    _popover = viewChild(NgnPopover, ...(ngDevMode ? [{ debugName: "_popover" }] : []));
-    // Note: `value()` is the single source of truth.
-    // It can be `null` (cleared). For rendering, use `templateConfig()` which falls back to defaults.
+    _popover = viewChild(NgnPopover, ...(ngDevMode ? [{ debugName: "_popover" }] : /* istanbul ignore next */ []));
+    /**
+     * Internal working config that the template binds to.
+     * In auto-apply mode, this syncs to value() via debounce.
+     * In manual mode, only apply() commits this to value().
+     */
+    workingConfig = signal(null, ...(ngDevMode ? [{ debugName: "workingConfig" }] : /* istanbul ignore next */ []));
+    /** Snapshot of value() taken when popover opens in manual mode, for cancel to restore. */
+    _snapshotConfig = null;
+    /** Debounce timer handle for auto-apply. */
+    _debounceTimer = null;
+    /** Whether there is an active filter applied. */
+    hasActiveFilter = computed(() => {
+        const cfg = this.value();
+        if (!cfg)
+            return false;
+        if (cfg.dataType === 'list') {
+            const raw = cfg.conditions[0]?.rawValue;
+            if (!raw)
+                return false;
+            try {
+                const parsed = JSON.parse(raw);
+                return Array.isArray(parsed) && parsed.length > 0;
+            }
+            catch {
+                return false;
+            }
+        }
+        return this.activeConditionConfigs().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasActiveFilter" }] : /* istanbul ignore next */ []));
     createCondition(operator) {
         return { operator, rawValue: null };
     }
@@ -133,7 +172,7 @@ class NgnFilter extends ValueControlBase {
         const firstOp = this.operatorDefs()[0]?.id ?? 'isEqual';
         return {
             dataType: this.dataType(),
-            matchMode: this.allowMultiple() ? 'all' : 'all',
+            matchMode: 'all',
             conditions: [
                 {
                     operator: firstOp,
@@ -144,9 +183,10 @@ class NgnFilter extends ValueControlBase {
     }
     /**
      * Config used for UI rendering.
-     * Falls back to a default config when the actual {@link value} is null.
+     * Always reads from workingConfig (the live editing state).
+     * Falls back to a default config when null.
      */
-    templateConfig = computed(() => (this.value() ?? this.defaultConfig()), ...(ngDevMode ? [{ debugName: "templateConfig" }] : []));
+    templateConfig = computed(() => (this.workingConfig() ?? this.defaultConfig()), ...(ngDevMode ? [{ debugName: "templateConfig" }] : /* istanbul ignore next */ []));
     templateListSelection = computed(() => {
         const cfg = this.templateConfig();
         if (cfg.dataType !== 'list') {
@@ -163,7 +203,7 @@ class NgnFilter extends ValueControlBase {
         catch {
             return [];
         }
-    }, ...(ngDevMode ? [{ debugName: "templateListSelection" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "templateListSelection" }] : /* istanbul ignore next */ []));
     operatorDefs = computed(() => {
         const dt = this.dataType();
         const defs = defaultOperatorsForType(dt);
@@ -171,7 +211,7 @@ class NgnFilter extends ValueControlBase {
             return defs;
         }
         return defs;
-    }, ...(ngDevMode ? [{ debugName: "operatorDefs" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "operatorDefs" }] : /* istanbul ignore next */ []));
     operatorOptions = computed(() => {
         const options = this.operatorDefs().map(op => ({
             label: this.i18n[op.labelKey],
@@ -179,7 +219,7 @@ class NgnFilter extends ValueControlBase {
             testId: `filter-operator-${op.id}`,
         }));
         return options;
-    }, ...(ngDevMode ? [{ debugName: "operatorOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "operatorOptions" }] : /* istanbul ignore next */ []));
     autoListOptions = computed(() => {
         const seen = new Set();
         const items = [];
@@ -200,7 +240,7 @@ class NgnFilter extends ValueControlBase {
             }
             return 0;
         });
-    }, ...(ngDevMode ? [{ debugName: "autoListOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "autoListOptions" }] : /* istanbul ignore next */ []));
     resolvedListOptions = computed(() => {
         const listOptions = this.listOptions();
         return listOptions
@@ -210,7 +250,7 @@ class NgnFilter extends ValueControlBase {
                 testId: `filter-list-${opt}`,
             }))
             : this.autoListOptions();
-    }, ...(ngDevMode ? [{ debugName: "resolvedListOptions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "resolvedListOptions" }] : /* istanbul ignore next */ []));
     matchModeOptions = [
         { label: this.i18n['filter_match_all'], value: 'all', testId: 'filter-match-all' },
         { label: this.i18n['filter_match_any'], value: 'any', testId: 'filter-match-any' },
@@ -226,7 +266,29 @@ class NgnFilter extends ValueControlBase {
             default:
                 return 'text';
         }
-    }, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    isDateType = computed(() => this.dataType() === 'date' || this.dataType() === 'dateTime', ...(ngDevMode ? [{ debugName: "isDateType" }] : /* istanbul ignore next */ []));
+    isShowTime = computed(() => this.dataType() === 'dateTime', ...(ngDevMode ? [{ debugName: "isShowTime" }] : /* istanbul ignore next */ []));
+    /** Parse a rawValue string to a Date for the calendar component. */
+    parseRawDate(rawValue) {
+        if (!rawValue)
+            return null;
+        const d = new Date(rawValue);
+        return Number.isNaN(d.getTime()) ? null : d;
+    }
+    /** Convert a Date from the calendar to a rawValue string. */
+    dateToRaw(date) {
+        if (!date || Number.isNaN(date.getTime()))
+            return null;
+        if (this.dataType() === 'dateTime') {
+            // Format as YYYY-MM-DDTHH:mm for datetime-local compatibility
+            const pad = (n) => String(n).padStart(2, '0');
+            return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+        }
+        // Format as YYYY-MM-DD for date
+        const pad = (n) => String(n).padStart(2, '0');
+        return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+    }
     summaryText = computed(() => {
         const currentValue = this.value();
         if (!currentValue) {
@@ -252,13 +314,13 @@ class NgnFilter extends ValueControlBase {
             const operatorLabel = def ? this.i18n._unsafe[def.labelKey]?.() : c?.operator;
             return c?.rawValue == null || c?.rawValue === ''
                 ? operatorLabel
-                : `${operatorLabel} ${c.rawValue}`;
+                : `${operatorLabel} "${c.rawValue}"`;
         }
         const matchLabel = currentValue.matchMode === 'all'
             ? this.i18n['filter_match_all']()
             : this.i18n['filter_match_any']();
         return `${active.length} ${this.i18n['filter_conditions']()} (${matchLabel})`;
-    }, ...(ngDevMode ? [{ debugName: "summaryText" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "summaryText" }] : /* istanbul ignore next */ []));
     activeConditionConfigs = computed(() => {
         const cfg = this.value();
         if (!cfg || cfg.dataType === 'list') {
@@ -271,11 +333,11 @@ class NgnFilter extends ValueControlBase {
             const requiresValue = def?.requiresValue ?? true;
             return !requiresValue || (c.rawValue != null && c.rawValue !== '');
         });
-    }, ...(ngDevMode ? [{ debugName: "activeConditionConfigs" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "activeConditionConfigs" }] : /* istanbul ignore next */ []));
     activeConditions = computed(() => {
         const cfg = this.value();
         return cfg ? getActiveFilterConditions(cfg) : [];
-    }, ...(ngDevMode ? [{ debugName: "activeConditions" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "activeConditions" }] : /* istanbul ignore next */ []));
     filteredData = computed(() => {
         if (!this.filterLocally()) {
             return this.data();
@@ -285,14 +347,22 @@ class NgnFilter extends ValueControlBase {
             return this.data();
         }
         return executeFilter(this.data(), cfg);
-    }, ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
+    /** The current match mode label for the condition divider */
+    matchModeLabel = computed(() => {
+        const cfg = this.templateConfig();
+        return cfg.matchMode === 'all'
+            ? this.i18n['filter_match_and']()
+            : this.i18n['filter_match_or']();
+    }, ...(ngDevMode ? [{ debugName: "matchModeLabel" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
+        // Initialize workingConfig from initial value.
+        this.workingConfig.set(this.value());
         effect(() => {
             this.filterChange.emit(this.value() ?? null);
         });
         effect(() => {
-            // When local filtering is disabled, do not emit or compute any result.
             if (!this.filterLocally()) {
                 return;
             }
@@ -320,7 +390,6 @@ class NgnFilter extends ValueControlBase {
             if (!first) {
                 throw new NgnError('filter', 'No operators available.');
             }
-            // Ensure all conditions use a valid operator
             const defIds = new Set(defs.map(d => d.id));
             const normalizeConditions = (conditions) => {
                 let changed = false;
@@ -343,6 +412,49 @@ class NgnFilter extends ValueControlBase {
                 this.value.set({ ...cfg, conditions: next });
             }
         });
+        this._destroyRef.onDestroy(() => {
+            if (this._debounceTimer != null) {
+                clearTimeout(this._debounceTimer);
+            }
+        });
+    }
+    /**
+     * Commits the working config to the actual value, with optional debounce.
+     * Called after every working config change.
+     */
+    commitWorkingConfig() {
+        if (this.autoApply()) {
+            if (this._debounceTimer != null) {
+                clearTimeout(this._debounceTimer);
+            }
+            const debounceMs = this.autoApplyDebounce();
+            if (debounceMs > 0) {
+                this._debounceTimer = setTimeout(() => {
+                    this._debounceTimer = null;
+                    this.value.set(this.workingConfig());
+                }, debounceMs);
+            }
+            else {
+                this.value.set(this.workingConfig());
+            }
+        }
+        // In manual mode, do nothing — wait for apply()
+    }
+    /** Updates the working config and optionally auto-applies. */
+    updateWorkingConfig(config) {
+        this.workingConfig.set(config);
+        this.commitWorkingConfig();
+    }
+    toggleMatchMode() {
+        const cfg = this.templateConfig();
+        if (cfg.dataType === 'list' || !this.allowMultiple()) {
+            return;
+        }
+        const newMode = cfg.matchMode === 'all' ? 'any' : 'all';
+        this.updateWorkingConfig({
+            ...cfg,
+            matchMode: newMode,
+        });
     }
     setMatchMode(value) {
         if (value === 'all' || value === 'any') {
@@ -350,7 +462,7 @@ class NgnFilter extends ValueControlBase {
             if (cfg.dataType === 'list') {
                 return;
             }
-            this.value.set({
+            this.updateWorkingConfig({
                 ...cfg,
                 matchMode: this.allowMultiple() ? value : 'all',
             });
@@ -378,7 +490,7 @@ class NgnFilter extends ValueControlBase {
             operator,
             rawValue: this.operatorRequiresValue(operator) ? existing.rawValue : null,
         };
-        this.value.set({
+        this.updateWorkingConfig({
             ...cfg,
             matchMode: this.allowMultiple() ? cfg.matchMode : 'all',
             conditions: next,
@@ -395,12 +507,15 @@ class NgnFilter extends ValueControlBase {
             return;
         }
         next[index] = { ...existing, rawValue };
-        this.value.set({
+        this.updateWorkingConfig({
             ...cfg,
             matchMode: this.allowMultiple() ? cfg.matchMode : 'all',
             conditions: next,
         });
     }
+    setDateValue(index, date) {
+        this.setRawValue(index, this.dateToRaw(date));
+    }
     addCondition() {
         if (!this.allowMultiple()) {
             return;
@@ -410,9 +525,9 @@ class NgnFilter extends ValueControlBase {
             return;
         }
         const firstOp = this.operatorDefs()[0]?.id ?? 'isEqual';
-        this.value.set({
+        this.updateWorkingConfig({
             ...cfg,
-            matchMode: 'all',
+            matchMode: cfg.matchMode,
             conditions: [...cfg.conditions, this.createCondition(firstOp)],
         });
     }
@@ -430,7 +545,7 @@ class NgnFilter extends ValueControlBase {
         }
         const next = current.slice();
         next.splice(index, 1);
-        this.value.set({
+        this.updateWorkingConfig({
             ...cfg,
             matchMode: cfg.matchMode,
             conditions: next,
@@ -442,7 +557,7 @@ class NgnFilter extends ValueControlBase {
             : value == null
                 ? []
                 : [String(value)];
-        this.value.set({
+        this.updateWorkingConfig({
             dataType: 'list',
             matchMode: 'all',
             conditions: [
@@ -453,8 +568,35 @@ class NgnFilter extends ValueControlBase {
             ],
         });
     }
+    /** Applies the working config (manual mode). */
+    apply() {
+        const cfg = this.workingConfig();
+        this.value.set(cfg);
+        // Update snapshot so next cancel restores to this applied state
+        this._snapshotConfig = cfg ? JSON.parse(JSON.stringify(cfg)) : null;
+        if (this.mode() !== 'inline') {
+            this.hide();
+        }
+    }
+    /** Cancels changes and restores the snapshot (manual mode). */
+    cancelChanges() {
+        // Clear any pending debounce
+        if (this._debounceTimer != null) {
+            clearTimeout(this._debounceTimer);
+            this._debounceTimer = null;
+        }
+        this.workingConfig.set(this._snapshotConfig ? JSON.parse(JSON.stringify(this._snapshotConfig)) : null);
+        if (this.mode() !== 'inline') {
+            this.hide();
+        }
+    }
     clear() {
-        this.value.set(null);
+        this.updateWorkingConfig(null);
+        if (!this.autoApply()) {
+            // In manual mode, also commit clear immediately
+            this.value.set(null);
+            this._snapshotConfig = null;
+        }
         if (this.mode() !== 'inline') {
             this.hide();
         }
@@ -471,6 +613,11 @@ class NgnFilter extends ValueControlBase {
         if (!popover) {
             throw new NgnError('filter', 'Popover is not available.');
         }
+        // Snapshot current value for cancel
+        const val = this.value();
+        this._snapshotConfig = val ? JSON.parse(JSON.stringify(val)) : null;
+        // Reset working config to current value
+        this.workingConfig.set(val);
         popover.show();
     }
     /** Hides the filter popup. Only works when {@link mode} is not `inline`. */
@@ -489,14 +636,15 @@ class NgnFilter extends ValueControlBase {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: NgnFilter, isStandalone: true, selector: "ngn-filter", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, listOptions: { classPropertyName: "listOptions", publicName: "listOptions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, popoverOptions: { classPropertyName: "popoverOptions", publicName: "popoverOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", filterResultChange: "filterResultChange" }, host: { styleAttribute: "display: block;" }, providers: [provideSelf(NgnFilter)], viewQueries: [{ propertyName: "_popover", first: true, predicate: NgnPopover, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #rowsTemplate>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'rows'\">\r\n    @if (dataType() === 'list') {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'row'\" data-testid=\"filter-row-list\">\r\n        <ngn-select\r\n          [ptInt]=\"this\"\r\n          [ptClass]=\"'value'\"\r\n          [multiple]=\"true\"\r\n          [options]=\"resolvedListOptions()\"\r\n          [value]=\"$any(templateListSelection())\"\r\n          (valueChange)=\"setListSelection($event)\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      @for (c of templateConfig().conditions; track $index; let i = $index) {\r\n        <div [ptInt]=\"this\" [ptClass]=\"'row'\" [attr.data-testid]=\"'filter-row-' + i\">\r\n          <ngn-select\r\n            [ptInt]=\"this\"\r\n            [ptClass]=\"'operator'\"\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"c.operator\"\r\n            (valueChange)=\"setOperator(i, $event)\"\r\n          />\r\n          @if (operatorRequiresValue(c.operator)) {\r\n            <ngn-input-field [ptInt]=\"this\" [ptClass]=\"'value'\">\r\n              <input\r\n                ngnInput\r\n                [type]=\"inputType()\"\r\n                [value]=\"c.rawValue || ''\"\r\n                (valueChange)=\"setRawValue(i, $event)\"\r\n              />\r\n            </ngn-input-field>\r\n          }\r\n\r\n          @if (allowMultiple() && templateConfig().conditions.length > 1) {\r\n            <div [ptInt]=\"this\" [ptClass]=\"'row-actions'\">\r\n              <button\r\n                type=\"button\"\r\n                ngnButton\r\n                [kind]=\"'text'\"\r\n                [color]=\"'error'\"\r\n                (click)=\"removeCondition(i)\"\r\n              >\r\n                {{ i18n['filter_removeCondition']() + ' ' + (i + 1) }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #matchModeTemplate>\r\n  @if (dataType() !== 'list' && allowMultiple()) {\r\n    <ngn-select\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'match'\"\r\n      [options]=\"matchModeOptions\"\r\n      [value]=\"templateConfig().matchMode\"\r\n      (valueChange)=\"setMatchMode($event)\"\r\n      data-testid=\"filter-match-mode\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'footer'\">\r\n    @if (dataType() !== 'list' && allowMultiple()) {\r\n      <button\r\n        type=\"button\"\r\n        ngnButton\r\n        kind=\"secondary\"\r\n        (click)=\"addCondition()\"\r\n        data-testid=\"filter-add-rule\"\r\n      >\r\n        <span aria-hidden=\"true\">+</span>\r\n        {{ i18n['filter_addCondition']() }}\r\n      </button>\r\n    }\r\n    <button type=\"button\" ngnButton kind=\"secondary\" (click)=\"clear()\" data-testid=\"filter-clear\">\r\n      {{ i18n['filter_clear']() }}\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #popoverTemplate let-anchor=\"anchor\">\r\n  <ngn-popover\r\n    #popover\r\n    [options]=\"appliedPopoverOptions()\"\r\n    [anchor]=\"anchor\"\r\n    [hasShrinkableContent]=\"true\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [id]=\"inputId() + '_popover'\"\r\n  >\r\n    <ng-template #lazy>\r\n      <div [ptInt]=\"this\" [ptClass]=\"'popover-content'\">\r\n        <ng-container [ngTemplateOutlet]=\"matchModeTemplate\" />\r\n        <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\r\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\r\n      </div>\r\n    </ng-template>\r\n  </ngn-popover>\r\n</ng-template>\r\n\r\n@if (mode() === 'inline') {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'inline'\">\r\n    <ng-container [ngTemplateOutlet]=\"matchModeTemplate\" />\r\n    <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\r\n  </div>\r\n} @else if (mode() === 'input') {\r\n  <ngn-input-field\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'input-field'\"\r\n    (click)=\"show()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    #field\r\n    [label]=\"label()\"\r\n    [inputId]=\"inputId()\"\r\n    [invalid]=\"invalid()\"\r\n  >\r\n    <div role=\"button\" [ptInt]=\"this\" [ptClass]=\"'summary'\">{{ summaryText() }}</div>\r\n    <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" defaultIcon=\"magnifying_glass\" />\r\n  </ngn-input-field>\r\n\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"popoverTemplate\"\r\n    [ngTemplateOutletContext]=\"{ anchor: field.element.nativeElement }\"\r\n  />\r\n} @else {\r\n  @if (anchor()) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"popoverTemplate\"\r\n      [ngTemplateOutletContext]=\"{ anchor: anchor() }\"\r\n    />\r\n  }\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnInputField, selector: "ngn-input-field", inputs: ["label", "labelledBy", "labelKind", "inputId", "showClearButton", "iconClearButton", "tabindex", "invalid", "readonly", "disabled"] }, { kind: "directive", type: NgnInput, selector: "input[ngnInput], textarea[ngnInput]", inputs: ["invalid", "value"], outputs: ["valueChange"], exportAs: ["ngnInput"] }, { kind: "component", type: NgnSelect, selector: "ngn-select", inputs: ["popoverOptions", "options", "filter", "filterText", "filterIcon", "dropdownIcon", "virtual", "itemHeight", "editable", "editableAutoFilter", "multiple", "scrollToSelectedItemOnOpen", "tabindex", "checkbox"] }, { kind: "component", type: NgnPopover, selector: "ngn-popover", inputs: ["open", "anchor", "options", "hasShrinkableContent", "closeBy"], outputs: ["closed", "closing", "openChange"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"], exportAs: ["ngnButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgnFilter, isStandalone: true, selector: "ngn-filter", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, allowMultiple: { classPropertyName: "allowMultiple", publicName: "allowMultiple", isSignal: true, isRequired: false, transformFunction: null }, listOptions: { classPropertyName: "listOptions", publicName: "listOptions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, filterLocally: { classPropertyName: "filterLocally", publicName: "filterLocally", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, autoApplyDebounce: { classPropertyName: "autoApplyDebounce", publicName: "autoApplyDebounce", isSignal: true, isRequired: false, transformFunction: null }, popoverOptions: { classPropertyName: "popoverOptions", publicName: "popoverOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", filterResultChange: "filterResultChange" }, host: { styleAttribute: "display: block;" }, providers: [provideSelf(NgnFilter)], viewQueries: [{ propertyName: "_popover", first: true, predicate: NgnPopover, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #rowsTemplate>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'rows'\">\r\n    @if (dataType() === 'list') {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'row'\" data-testid=\"filter-row-list\">\r\n        <ngn-select\r\n          [ptInt]=\"this\"\r\n          [ptClass]=\"'value'\"\r\n          [multiple]=\"true\"\r\n          [options]=\"resolvedListOptions()\"\r\n          [value]=\"$any(templateListSelection())\"\r\n          [disabled]=\"disabled()\"\r\n          [readonly]=\"readonly()\"\r\n          (valueChange)=\"setListSelection($event)\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      @for (c of templateConfig().conditions; track $index; let i = $index; let last = $last) {\r\n        <div [ptInt]=\"this\" [ptClass]=\"'row'\" [attr.data-testid]=\"'filter-row-' + i\">\r\n          <ngn-select\r\n            [ptInt]=\"this\"\r\n            [ptClass]=\"operatorRequiresValue(c.operator) ? 'operator' : 'value'\"\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"c.operator\"\r\n            [disabled]=\"disabled()\"\r\n            [readonly]=\"readonly()\"\r\n            (valueChange)=\"setOperator(i, $event)\"\r\n          />\r\n          @if (operatorRequiresValue(c.operator)) {\r\n            @if (isDateType()) {\r\n              <ngn-calendar\r\n                [ptInt]=\"this\"\r\n                [ptClass]=\"'value'\"\r\n                [showTime]=\"isShowTime()\"\r\n                [value]=\"parseRawDate(c.rawValue)\"\r\n                [disabled]=\"disabled()\"\r\n                [readonly]=\"readonly()\"\r\n                (valueChange)=\"setDateValue(i, $event)\"\r\n              />\r\n            } @else {\r\n              <ngn-input-field\r\n                [ptInt]=\"this\"\r\n                [ptClass]=\"'value'\"\r\n                [disabled]=\"disabled()\"\r\n                [readonly]=\"readonly()\"\r\n              >\r\n                <input\r\n                  ngnInput\r\n                  [type]=\"inputType()\"\r\n                  [value]=\"c.rawValue || ''\"\r\n                  [disabled]=\"disabled()\"\r\n                  [readOnly]=\"readonly()\"\r\n                  (valueChange)=\"setRawValue(i, $event)\"\r\n                />\r\n              </ngn-input-field>\r\n            }\r\n          }\r\n\r\n          @if (allowMultiple() && templateConfig().conditions.length > 1) {\r\n            <button\r\n              type=\"button\"\r\n              ngnButton\r\n              kind=\"icon\"\r\n              [ptInt]=\"this\"\r\n              [ptClass]=\"'remove-btn'\"\r\n              [disabled]=\"disabled() || readonly()\"\r\n              (click)=\"removeCondition(i)\"\r\n              [attr.aria-label]=\"i18n['filter_removeCondition']() + ' ' + (i + 1)\"\r\n              data-testid=\"filter-remove-condition\"\r\n            >\r\n              <ngn-icon defaultIcon=\"filter-remove\" />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (allowMultiple() && !last && templateConfig().conditions.length > 1) {\r\n          <div\r\n            [ptInt]=\"this\"\r\n            [ptClass]=\"'condition-divider'\"\r\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"!disabled() && !readonly() && toggleMatchMode()\"\r\n            (keydown.enter)=\"!disabled() && !readonly() && toggleMatchMode()\"\r\n            (keydown.space)=\"\r\n              !disabled() && !readonly() && toggleMatchMode(); $event.preventDefault()\r\n            \"\r\n            [attr.aria-disabled]=\"disabled() || readonly()\"\r\n            data-testid=\"filter-match-mode\"\r\n          >\r\n            {{ matchModeLabel() }}\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n  @if (!disabled() && !readonly()) {\r\n    <div [ptInt]=\"this\" [ptClass]=\"'footer'\">\r\n      @if (dataType() !== 'list' && allowMultiple()) {\r\n        <button\r\n          type=\"button\"\r\n          ngnButton\r\n          kind=\"secondary\"\r\n          (click)=\"addCondition()\"\r\n          data-testid=\"filter-add-rule\"\r\n        >\r\n          <span aria-hidden=\"true\">+</span>\r\n          {{ i18n['filter_addCondition']() }}\r\n        </button>\r\n      }\r\n      <div [ptInt]=\"this\" [ptClass]=\"'footer-actions'\">\r\n        @if (!autoApply()) {\r\n          <button\r\n            type=\"button\"\r\n            ngnButton\r\n            kind=\"secondary\"\r\n            (click)=\"cancelChanges()\"\r\n            data-testid=\"filter-cancel\"\r\n          >\r\n            {{ i18n['filter_cancel']() }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            ngnButton\r\n            kind=\"primary\"\r\n            (click)=\"apply()\"\r\n            data-testid=\"filter-apply\"\r\n          >\r\n            {{ i18n['filter_apply']() }}\r\n          </button>\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            ngnButton\r\n            kind=\"secondary\"\r\n            (click)=\"clear()\"\r\n            data-testid=\"filter-clear\"\r\n          >\r\n            {{ i18n['filter_clear']() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #popoverTemplate let-anchor=\"anchor\">\r\n  <ngn-popover\r\n    #popover\r\n    [options]=\"appliedPopoverOptions()\"\r\n    [anchor]=\"anchor\"\r\n    [hasShrinkableContent]=\"true\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [id]=\"inputId() + '_popover'\"\r\n  >\r\n    <ng-template #lazy>\r\n      <div [ptInt]=\"this\" [ptClass]=\"'popover-content'\">\r\n        <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\r\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\r\n      </div>\r\n    </ng-template>\r\n  </ngn-popover>\r\n</ng-template>\r\n\r\n@if (mode() === 'inline') {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'inline'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\r\n  </div>\r\n} @else if (mode() === 'input') {\r\n  <ngn-input-field\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'input-field'\"\r\n    (click)=\"!disabled() && !readonly() && show()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    #field\r\n    [label]=\"label()\"\r\n    [inputId]=\"inputId()\"\r\n    [invalid]=\"invalid()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n  >\r\n    <div role=\"button\" [ptInt]=\"this\" [ptClass]=\"'summary'\">{{ summaryText() }}</div>\r\n    <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" defaultIcon=\"search\" />\r\n  </ngn-input-field>\r\n\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"popoverTemplate\"\r\n    [ngTemplateOutletContext]=\"{ anchor: field.element.nativeElement }\"\r\n  />\r\n} @else {\r\n  @if (anchor()) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"popoverTemplate\"\r\n      [ngTemplateOutletContext]=\"{ anchor: anchor() }\"\r\n    />\r\n  }\r\n}\r\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnCalendar, selector: "ngn-calendar", inputs: ["firstDayOfWeek", "showTime", "showSeconds", "inline"] }, { kind: "component", type: NgnInputField, selector: "ngn-input-field", inputs: ["label", "labelledBy", "labelKind", "inputId", "showClearButton", "iconClearButton", "tabindex", "invalid", "readonly", "disabled"] }, { kind: "directive", type: NgnInput, selector: "input[ngnInput], textarea[ngnInput]", inputs: ["invalid", "value"], outputs: ["valueChange"], exportAs: ["ngnInput"] }, { kind: "component", type: NgnSelect, selector: "ngn-select", inputs: ["popoverOptions", "options", "filter", "filterText", "filterIcon", "dropdownIcon", "virtual", "itemHeight", "editable", "editableAutoFilter", "multiple", "scrollToSelectedItemOnOpen", "tabindex", "checkbox"] }, { kind: "component", type: NgnPopover, selector: "ngn-popover", inputs: ["open", "anchor", "options", "hasShrinkableContent", "closeBy"], outputs: ["closed", "closing", "openChange"] }, { kind: "component", type: NgnIcon, selector: "ngn-icon", inputs: ["defaultIcon", "icon"] }, { kind: "directive", type: NgnButton, selector: "button[ngnButton], a[ngnButton]", inputs: ["inline"], exportAs: ["ngnButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgnFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgnFilter, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngn-filter', imports: [
                         NgnPt,
                         NgTemplateOutlet,
+                        NgnCalendar,
                         NgnInputField,
                         NgnInput,
                         NgnSelect,
@@ -505,8 +653,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         NgnButton,
                     ], providers: [provideSelf(NgnFilter)], host: {
                         style: 'display: block;',
-                    }, template: "<ng-template #rowsTemplate>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'rows'\">\r\n    @if (dataType() === 'list') {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'row'\" data-testid=\"filter-row-list\">\r\n        <ngn-select\r\n          [ptInt]=\"this\"\r\n          [ptClass]=\"'value'\"\r\n          [multiple]=\"true\"\r\n          [options]=\"resolvedListOptions()\"\r\n          [value]=\"$any(templateListSelection())\"\r\n          (valueChange)=\"setListSelection($event)\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      @for (c of templateConfig().conditions; track $index; let i = $index) {\r\n        <div [ptInt]=\"this\" [ptClass]=\"'row'\" [attr.data-testid]=\"'filter-row-' + i\">\r\n          <ngn-select\r\n            [ptInt]=\"this\"\r\n            [ptClass]=\"'operator'\"\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"c.operator\"\r\n            (valueChange)=\"setOperator(i, $event)\"\r\n          />\r\n          @if (operatorRequiresValue(c.operator)) {\r\n            <ngn-input-field [ptInt]=\"this\" [ptClass]=\"'value'\">\r\n              <input\r\n                ngnInput\r\n                [type]=\"inputType()\"\r\n                [value]=\"c.rawValue || ''\"\r\n                (valueChange)=\"setRawValue(i, $event)\"\r\n              />\r\n            </ngn-input-field>\r\n          }\r\n\r\n          @if (allowMultiple() && templateConfig().conditions.length > 1) {\r\n            <div [ptInt]=\"this\" [ptClass]=\"'row-actions'\">\r\n              <button\r\n                type=\"button\"\r\n                ngnButton\r\n                [kind]=\"'text'\"\r\n                [color]=\"'error'\"\r\n                (click)=\"removeCondition(i)\"\r\n              >\r\n                {{ i18n['filter_removeCondition']() + ' ' + (i + 1) }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #matchModeTemplate>\r\n  @if (dataType() !== 'list' && allowMultiple()) {\r\n    <ngn-select\r\n      [ptInt]=\"this\"\r\n      [ptClass]=\"'match'\"\r\n      [options]=\"matchModeOptions\"\r\n      [value]=\"templateConfig().matchMode\"\r\n      (valueChange)=\"setMatchMode($event)\"\r\n      data-testid=\"filter-match-mode\"\r\n    />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'footer'\">\r\n    @if (dataType() !== 'list' && allowMultiple()) {\r\n      <button\r\n        type=\"button\"\r\n        ngnButton\r\n        kind=\"secondary\"\r\n        (click)=\"addCondition()\"\r\n        data-testid=\"filter-add-rule\"\r\n      >\r\n        <span aria-hidden=\"true\">+</span>\r\n        {{ i18n['filter_addCondition']() }}\r\n      </button>\r\n    }\r\n    <button type=\"button\" ngnButton kind=\"secondary\" (click)=\"clear()\" data-testid=\"filter-clear\">\r\n      {{ i18n['filter_clear']() }}\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #popoverTemplate let-anchor=\"anchor\">\r\n  <ngn-popover\r\n    #popover\r\n    [options]=\"appliedPopoverOptions()\"\r\n    [anchor]=\"anchor\"\r\n    [hasShrinkableContent]=\"true\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [id]=\"inputId() + '_popover'\"\r\n  >\r\n    <ng-template #lazy>\r\n      <div [ptInt]=\"this\" [ptClass]=\"'popover-content'\">\r\n        <ng-container [ngTemplateOutlet]=\"matchModeTemplate\" />\r\n        <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\r\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\r\n      </div>\r\n    </ng-template>\r\n  </ngn-popover>\r\n</ng-template>\r\n\r\n@if (mode() === 'inline') {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'inline'\">\r\n    <ng-container [ngTemplateOutlet]=\"matchModeTemplate\" />\r\n    <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\r\n  </div>\r\n} @else if (mode() === 'input') {\r\n  <ngn-input-field\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'input-field'\"\r\n    (click)=\"show()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    #field\r\n    [label]=\"label()\"\r\n    [inputId]=\"inputId()\"\r\n    [invalid]=\"invalid()\"\r\n  >\r\n    <div role=\"button\" [ptInt]=\"this\" [ptClass]=\"'summary'\">{{ summaryText() }}</div>\r\n    <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" defaultIcon=\"magnifying_glass\" />\r\n  </ngn-input-field>\r\n\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"popoverTemplate\"\r\n    [ngTemplateOutletContext]=\"{ anchor: field.element.nativeElement }\"\r\n  />\r\n} @else {\r\n  @if (anchor()) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"popoverTemplate\"\r\n      [ngTemplateOutletContext]=\"{ anchor: anchor() }\"\r\n    />\r\n  }\r\n}\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], listOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "listOptions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], filterLocally: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocally", required: false }] }], popoverOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOptions", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], filterResultChange: [{ type: i0.Output, args: ["filterResultChange"] }], _popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnPopover), { isSignal: true }] }] } });
+                    }, template: "<ng-template #rowsTemplate>\r\n  <div [ptInt]=\"this\" [ptClass]=\"'rows'\">\r\n    @if (dataType() === 'list') {\r\n      <div [ptInt]=\"this\" [ptClass]=\"'row'\" data-testid=\"filter-row-list\">\r\n        <ngn-select\r\n          [ptInt]=\"this\"\r\n          [ptClass]=\"'value'\"\r\n          [multiple]=\"true\"\r\n          [options]=\"resolvedListOptions()\"\r\n          [value]=\"$any(templateListSelection())\"\r\n          [disabled]=\"disabled()\"\r\n          [readonly]=\"readonly()\"\r\n          (valueChange)=\"setListSelection($event)\"\r\n        />\r\n      </div>\r\n    } @else {\r\n      @for (c of templateConfig().conditions; track $index; let i = $index; let last = $last) {\r\n        <div [ptInt]=\"this\" [ptClass]=\"'row'\" [attr.data-testid]=\"'filter-row-' + i\">\r\n          <ngn-select\r\n            [ptInt]=\"this\"\r\n            [ptClass]=\"operatorRequiresValue(c.operator) ? 'operator' : 'value'\"\r\n            [options]=\"operatorOptions()\"\r\n            [value]=\"c.operator\"\r\n            [disabled]=\"disabled()\"\r\n            [readonly]=\"readonly()\"\r\n            (valueChange)=\"setOperator(i, $event)\"\r\n          />\r\n          @if (operatorRequiresValue(c.operator)) {\r\n            @if (isDateType()) {\r\n              <ngn-calendar\r\n                [ptInt]=\"this\"\r\n                [ptClass]=\"'value'\"\r\n                [showTime]=\"isShowTime()\"\r\n                [value]=\"parseRawDate(c.rawValue)\"\r\n                [disabled]=\"disabled()\"\r\n                [readonly]=\"readonly()\"\r\n                (valueChange)=\"setDateValue(i, $event)\"\r\n              />\r\n            } @else {\r\n              <ngn-input-field\r\n                [ptInt]=\"this\"\r\n                [ptClass]=\"'value'\"\r\n                [disabled]=\"disabled()\"\r\n                [readonly]=\"readonly()\"\r\n              >\r\n                <input\r\n                  ngnInput\r\n                  [type]=\"inputType()\"\r\n                  [value]=\"c.rawValue || ''\"\r\n                  [disabled]=\"disabled()\"\r\n                  [readOnly]=\"readonly()\"\r\n                  (valueChange)=\"setRawValue(i, $event)\"\r\n                />\r\n              </ngn-input-field>\r\n            }\r\n          }\r\n\r\n          @if (allowMultiple() && templateConfig().conditions.length > 1) {\r\n            <button\r\n              type=\"button\"\r\n              ngnButton\r\n              kind=\"icon\"\r\n              [ptInt]=\"this\"\r\n              [ptClass]=\"'remove-btn'\"\r\n              [disabled]=\"disabled() || readonly()\"\r\n              (click)=\"removeCondition(i)\"\r\n              [attr.aria-label]=\"i18n['filter_removeCondition']() + ' ' + (i + 1)\"\r\n              data-testid=\"filter-remove-condition\"\r\n            >\r\n              <ngn-icon defaultIcon=\"filter-remove\" />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        @if (allowMultiple() && !last && templateConfig().conditions.length > 1) {\r\n          <div\r\n            [ptInt]=\"this\"\r\n            [ptClass]=\"'condition-divider'\"\r\n            role=\"button\"\r\n            tabindex=\"0\"\r\n            (click)=\"!disabled() && !readonly() && toggleMatchMode()\"\r\n            (keydown.enter)=\"!disabled() && !readonly() && toggleMatchMode()\"\r\n            (keydown.space)=\"\r\n              !disabled() && !readonly() && toggleMatchMode(); $event.preventDefault()\r\n            \"\r\n            [attr.aria-disabled]=\"disabled() || readonly()\"\r\n            data-testid=\"filter-match-mode\"\r\n          >\r\n            {{ matchModeLabel() }}\r\n          </div>\r\n        }\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #footerTemplate>\r\n  @if (!disabled() && !readonly()) {\r\n    <div [ptInt]=\"this\" [ptClass]=\"'footer'\">\r\n      @if (dataType() !== 'list' && allowMultiple()) {\r\n        <button\r\n          type=\"button\"\r\n          ngnButton\r\n          kind=\"secondary\"\r\n          (click)=\"addCondition()\"\r\n          data-testid=\"filter-add-rule\"\r\n        >\r\n          <span aria-hidden=\"true\">+</span>\r\n          {{ i18n['filter_addCondition']() }}\r\n        </button>\r\n      }\r\n      <div [ptInt]=\"this\" [ptClass]=\"'footer-actions'\">\r\n        @if (!autoApply()) {\r\n          <button\r\n            type=\"button\"\r\n            ngnButton\r\n            kind=\"secondary\"\r\n            (click)=\"cancelChanges()\"\r\n            data-testid=\"filter-cancel\"\r\n          >\r\n            {{ i18n['filter_cancel']() }}\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            ngnButton\r\n            kind=\"primary\"\r\n            (click)=\"apply()\"\r\n            data-testid=\"filter-apply\"\r\n          >\r\n            {{ i18n['filter_apply']() }}\r\n          </button>\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            ngnButton\r\n            kind=\"secondary\"\r\n            (click)=\"clear()\"\r\n            data-testid=\"filter-clear\"\r\n          >\r\n            {{ i18n['filter_clear']() }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #popoverTemplate let-anchor=\"anchor\">\r\n  <ngn-popover\r\n    #popover\r\n    [options]=\"appliedPopoverOptions()\"\r\n    [anchor]=\"anchor\"\r\n    [hasShrinkableContent]=\"true\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    [id]=\"inputId() + '_popover'\"\r\n  >\r\n    <ng-template #lazy>\r\n      <div [ptInt]=\"this\" [ptClass]=\"'popover-content'\">\r\n        <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\r\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\r\n      </div>\r\n    </ng-template>\r\n  </ngn-popover>\r\n</ng-template>\r\n\r\n@if (mode() === 'inline') {\r\n  <div [ptInt]=\"this\" [ptClass]=\"'inline'\">\r\n    <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\r\n    <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\r\n  </div>\r\n} @else if (mode() === 'input') {\r\n  <ngn-input-field\r\n    [ptInt]=\"this\"\r\n    [ptClass]=\"'input-field'\"\r\n    (click)=\"!disabled() && !readonly() && show()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n    #field\r\n    [label]=\"label()\"\r\n    [inputId]=\"inputId()\"\r\n    [invalid]=\"invalid()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n  >\r\n    <div role=\"button\" [ptInt]=\"this\" [ptClass]=\"'summary'\">{{ summaryText() }}</div>\r\n    <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" defaultIcon=\"search\" />\r\n  </ngn-input-field>\r\n\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"popoverTemplate\"\r\n    [ngTemplateOutletContext]=\"{ anchor: field.element.nativeElement }\"\r\n  />\r\n} @else {\r\n  @if (anchor()) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"popoverTemplate\"\r\n      [ngTemplateOutletContext]=\"{ anchor: anchor() }\"\r\n    />\r\n  }\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], dataType: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataType", required: false }] }], allowMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultiple", required: false }] }], listOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "listOptions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], filterLocally: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocally", required: false }] }], autoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoApply", required: false }] }], autoApplyDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoApplyDebounce", required: false }] }], popoverOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOptions", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], filterResultChange: [{ type: i0.Output, args: ["filterResultChange"] }], _popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgnPopover), { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.