@ngneers/controls 0.0.1-next.0

package/fesm2022/ngneers-controls-filter.mjs

@@ -0,0 +1,708 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, booleanAttribute, numberAttribute, computed, output, viewChild, signal, effect, 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';
+import { NgnInputField } from '@ngneers/controls/input-field';
+import { NgnPopover } from '@ngneers/controls/popover';
+import { NgnSelect } from '@ngneers/controls/select';
+import { deepMerge, NgnError } from '@ngneers/controls/utils';
+import { filterControlTemplate } from '@ngneers/controls-themes/templates/filter';
+
+function defaultOperatorsForType(dataType) {
+    switch (dataType) {
+        case 'string':
+            return [
+                { id: 'isEqual', labelKey: 'filter_operators_isEqual', requiresValue: true },
+                { id: 'isNotEqual', labelKey: 'filter_operators_isNotEqual', requiresValue: true },
+                { id: 'contains', labelKey: 'filter_operators_contains', requiresValue: true },
+                { id: 'startsWith', labelKey: 'filter_operators_startsWith', requiresValue: true },
+                { id: 'endsWith', labelKey: 'filter_operators_endsWith', requiresValue: true },
+                { id: 'isEmpty', labelKey: 'filter_operators_isEmpty', requiresValue: false },
+                { id: 'isNotEmpty', labelKey: 'filter_operators_isNotEmpty', requiresValue: false },
+            ];
+        case 'number':
+            return [
+                { id: 'isEqual', labelKey: 'filter_operators_isEqual', requiresValue: true },
+                { id: 'isNotEqual', labelKey: 'filter_operators_isNotEqual', requiresValue: true },
+                { id: 'greaterThan', labelKey: 'filter_operators_greaterThan', requiresValue: true },
+                {
+                    id: 'greaterThanOrEqual',
+                    labelKey: 'filter_operators_greaterThanOrEqual',
+                    requiresValue: true,
+                },
+                { id: 'lessThan', labelKey: 'filter_operators_lessThan', requiresValue: true },
+                {
+                    id: 'lessThanOrEqual',
+                    labelKey: 'filter_operators_lessThanOrEqual',
+                    requiresValue: true,
+                },
+            ];
+        case 'date':
+        case 'dateTime':
+            return [
+                { id: 'isEqual', labelKey: 'filter_operators_isEqual', requiresValue: true },
+                { id: 'isNotEqual', labelKey: 'filter_operators_isNotEqual', requiresValue: true },
+                { id: 'greaterThan', labelKey: 'filter_operators_after', requiresValue: true },
+                { id: 'greaterThanOrEqual', labelKey: 'filter_operators_onOrAfter', requiresValue: true },
+                { id: 'lessThan', labelKey: 'filter_operators_before', requiresValue: true },
+                { id: 'lessThanOrEqual', labelKey: 'filter_operators_onOrBefore', requiresValue: true },
+            ];
+        case 'boolean':
+            return [
+                { id: 'isTrue', labelKey: 'filter_operators_isTrue', requiresValue: false },
+                { id: 'isFalse', labelKey: 'filter_operators_isFalse', requiresValue: false },
+            ];
+        case 'custom':
+            return [
+                { id: 'custom', labelKey: 'filter_operators_custom', requiresValue: true },
+            ];
+        case 'list':
+            return [
+                { id: 'in', labelKey: 'filter_operators_in', requiresValue: true },
+            ];
+    }
+}
+/**
+ * @category control
+ */
+class NgnFilter extends ValueControlBase {
+    theme = this.injectThemeTemplate(filterControlTemplate, 'root');
+    _i18n = inject(I18n);
+    i18n = this._i18n.translations;
+    unsafeI18n = this._i18n.unsafe.bind(this._i18n);
+    _destroyRef = inject(DestroyRef);
+    /**
+     * Data to filter.
+     * @default []
+     */
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /**
+     * Datatype of the values in {@link data}. Determines the available operators and editor UI.
+     * @default 'string'
+     */
+    dataType = input('string', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataType" }] : /* istanbul ignore next */ []));
+    /**
+     * Allows multiple conditions and a match mode (any/all).
+     * @default false
+     */
+    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}.
+     * @default undefined
+     */
+    listOptions = input(/* @ts-ignore */
+    ...(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}
+     * @default 'input'
+     */
+    mode = input('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Popover anchor used only in `headless` mode.
+     * In `input` mode the anchor is the internal input-field.
+     * @default null
+     */
+    anchor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
+    /**
+     * When true, the component will filter {@link data} locally and emit the filtered result
+     * via {@link filterResultChange}. When false, only the filter configuration is emitted
+     * (useful for server-side filtering).
+     * @default true
+     */
+    filterLocally = input(true, { ...(ngDevMode ? { debugName: "filterLocally" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true, filters apply automatically as the user types/selects.
+     * When false, the user must click "Apply" to commit the filter.
+     * @default true
+     */
+    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`.
+     * @default 300
+     */
+    autoApplyDebounce = input(300, { ...(ngDevMode ? { debugName: "autoApplyDebounce" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Options for the popover (when {@link mode} is not `inline`).
+     * @default {}
+     */
+    popoverOptions = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popoverOptions" }] : /* istanbul ignore next */ []));
+    appliedPopoverOptions = computed(() => deepMerge({
+        sizeConstraints: {
+            width: '360px',
+            minHeight: '120px',
+            maxHeight: '500px',
+        },
+        placement: 'bottom-start',
+    }, this.popoverOptions()), /* @ts-ignore */
+    ...(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, /* @ts-ignore */
+    ...(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, /* @ts-ignore */
+    ...(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;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActiveFilter" }] : /* istanbul ignore next */ []));
+    createCondition(operator) {
+        return { operator, rawValue: null };
+    }
+    defaultConfig() {
+        if (this.dataType() === 'list') {
+            return {
+                dataType: 'list',
+                matchMode: 'all',
+                conditions: [{ operator: 'in', rawValue: null }],
+            };
+        }
+        const firstOp = this.operatorDefs()[0]?.id ?? 'isEqual';
+        return {
+            dataType: this.dataType(),
+            matchMode: 'all',
+            conditions: [
+                {
+                    operator: firstOp,
+                    rawValue: null,
+                },
+            ],
+        };
+    }
+    /**
+     * Config used for UI rendering.
+     * Always reads from workingConfig (the live editing state).
+     * Falls back to a default config when null.
+     */
+    templateConfig = computed(() => (this.workingConfig() ?? this.defaultConfig()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateConfig" }] : /* istanbul ignore next */ []));
+    templateListSelection = computed(() => {
+        const cfg = this.templateConfig();
+        if (cfg.dataType !== 'list') {
+            return [];
+        }
+        const raw = cfg.conditions[0]?.rawValue;
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed.map(v => String(v)) : [];
+        }
+        catch {
+            return [];
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateListSelection" }] : /* istanbul ignore next */ []));
+    operatorDefs = computed(() => {
+        const dt = this.dataType();
+        const defs = defaultOperatorsForType(dt);
+        if (dt === 'custom' && defs.length === 1 && defs[0]?.id === 'custom') {
+            return defs;
+        }
+        return defs;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorDefs" }] : /* istanbul ignore next */ []));
+    operatorOptions = computed(() => {
+        const options = this.operatorDefs().map(op => ({
+            label: this.i18n[op.labelKey],
+            value: op.id,
+            testId: `filter-operator-${op.id}`,
+        }));
+        return options;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorOptions" }] : /* istanbul ignore next */ []));
+    autoListOptions = computed(() => {
+        const seen = new Set();
+        const items = [];
+        for (const raw of this.data()) {
+            const s = String(raw);
+            if (seen.has(s)) {
+                continue;
+            }
+            seen.add(s);
+            items.push({ label: s, value: s, testId: `filter-list-${s}` });
+        }
+        return items.sort((a, b) => {
+            if (typeof a.label === 'string' && typeof b.label === 'string') {
+                return a.label.localeCompare(b.label);
+            }
+            if (typeof a.label === 'function' && typeof b.label === 'function') {
+                return a.label().localeCompare(b.label());
+            }
+            return 0;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoListOptions" }] : /* istanbul ignore next */ []));
+    resolvedListOptions = computed(() => {
+        const listOptions = this.listOptions();
+        return listOptions
+            ? listOptions.map((opt) => ({
+                label: opt,
+                value: opt,
+                testId: `filter-list-${opt}`,
+            }))
+            : this.autoListOptions();
+    }, /* @ts-ignore */
+    ...(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' },
+    ];
+    inputType = computed(() => {
+        switch (this.dataType()) {
+            case 'number':
+                return 'number';
+            case 'date':
+                return 'date';
+            case 'dateTime':
+                return 'datetime-local';
+            default:
+                return 'text';
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+    isDateType = computed(() => this.dataType() === 'date' || this.dataType() === 'dateTime', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDateType" }] : /* istanbul ignore next */ []));
+    isShowTime = computed(() => this.dataType() === 'dateTime', /* @ts-ignore */
+    ...(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) {
+            return this.i18n['filter_noFilter']();
+        }
+        if (currentValue.dataType === 'list') {
+            const selected = this.templateListSelection();
+            if (selected.length === 0) {
+                return this.i18n['filter_noFilter']();
+            }
+            if (selected.length === 1) {
+                return selected[0] ?? this.i18n['filter_noFilter']();
+            }
+            return `${selected.length} ${this.i18n['filter_selected']()}`;
+        }
+        const active = this.activeConditionConfigs();
+        if (active.length === 0) {
+            return this.i18n['filter_noFilter']();
+        }
+        if (active.length === 1) {
+            const c = active[0];
+            const def = this.operatorDefs().find(d => d.id === c?.operator);
+            const operatorLabel = def ? this.i18n._unsafe[def.labelKey]?.() : c?.operator;
+            return c?.rawValue == null || c?.rawValue === ''
+                ? operatorLabel
+                : `${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})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summaryText" }] : /* istanbul ignore next */ []));
+    activeConditionConfigs = computed(() => {
+        const cfg = this.value();
+        if (!cfg || cfg.dataType === 'list') {
+            return [];
+        }
+        const defs = this.operatorDefs();
+        const defById = new Map(defs.map(d => [d.id, d]));
+        return cfg.conditions.filter(c => {
+            const def = defById.get(c.operator);
+            const requiresValue = def?.requiresValue ?? true;
+            return !requiresValue || (c.rawValue != null && c.rawValue !== '');
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeConditionConfigs" }] : /* istanbul ignore next */ []));
+    activeConditions = computed(() => {
+        const cfg = this.value();
+        return cfg ? getActiveFilterConditions(cfg) : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeConditions" }] : /* istanbul ignore next */ []));
+    filteredData = computed(() => {
+        if (!this.filterLocally()) {
+            return this.data();
+        }
+        const cfg = this.value();
+        if (!cfg) {
+            return this.data();
+        }
+        return executeFilter(this.data(), cfg);
+    }, /* @ts-ignore */
+    ...(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']();
+    }, /* @ts-ignore */
+    ...(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(() => {
+            if (!this.filterLocally()) {
+                return;
+            }
+            this.filterResultChange.emit(this.filteredData());
+        });
+        effect(() => {
+            if (!this.allowMultiple()) {
+                const cfg = this.value();
+                if (!cfg || cfg.dataType === 'list') {
+                    return;
+                }
+                if (cfg.conditions.length <= 1 && cfg.matchMode === 'all') {
+                    return;
+                }
+                this.value.set({
+                    ...cfg,
+                    matchMode: 'all',
+                    conditions: cfg.conditions.slice(0, 1),
+                });
+            }
+        });
+        effect(() => {
+            const defs = this.operatorDefs();
+            const first = defs[0];
+            if (!first) {
+                throw new NgnError('filter', 'No operators available.');
+            }
+            const defIds = new Set(defs.map(d => d.id));
+            const normalizeConditions = (conditions) => {
+                let changed = false;
+                const next = conditions.map(c => {
+                    if (defIds.has(c.operator)) {
+                        return c;
+                    }
+                    changed = true;
+                    return { ...c, operator: first.id, rawValue: null };
+                });
+                return changed ? next : conditions;
+            };
+            const cfg = this.value();
+            if (!cfg || cfg.dataType === 'list') {
+                return;
+            }
+            const current = cfg.conditions;
+            const next = normalizeConditions(current);
+            if (next !== current) {
+                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') {
+            const cfg = this.templateConfig();
+            if (cfg.dataType === 'list') {
+                return;
+            }
+            this.updateWorkingConfig({
+                ...cfg,
+                matchMode: this.allowMultiple() ? value : 'all',
+            });
+        }
+    }
+    operatorRequiresValue(operator) {
+        const def = this.operatorDefs().find(d => d.id === operator);
+        return def?.requiresValue ?? true;
+    }
+    setOperator(index, operator) {
+        if (!operator) {
+            return;
+        }
+        const cfg = this.templateConfig();
+        if (cfg.dataType === 'list') {
+            return;
+        }
+        const next = cfg.conditions.slice();
+        const existing = next[index];
+        if (!existing) {
+            return;
+        }
+        next[index] = {
+            ...existing,
+            operator,
+            rawValue: this.operatorRequiresValue(operator) ? existing.rawValue : null,
+        };
+        this.updateWorkingConfig({
+            ...cfg,
+            matchMode: this.allowMultiple() ? cfg.matchMode : 'all',
+            conditions: next,
+        });
+    }
+    setRawValue(index, rawValue) {
+        const cfg = this.templateConfig();
+        if (cfg.dataType === 'list') {
+            return;
+        }
+        const next = cfg.conditions.slice();
+        const existing = next[index];
+        if (!existing) {
+            return;
+        }
+        next[index] = { ...existing, rawValue };
+        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;
+        }
+        const cfg = this.templateConfig();
+        if (cfg.dataType === 'list') {
+            return;
+        }
+        const firstOp = this.operatorDefs()[0]?.id ?? 'isEqual';
+        this.updateWorkingConfig({
+            ...cfg,
+            matchMode: cfg.matchMode,
+            conditions: [...cfg.conditions, this.createCondition(firstOp)],
+        });
+    }
+    removeCondition(index) {
+        if (!this.allowMultiple()) {
+            return;
+        }
+        const cfg = this.templateConfig();
+        if (cfg.dataType === 'list') {
+            return;
+        }
+        const current = cfg.conditions;
+        if (current.length <= 1) {
+            return;
+        }
+        const next = current.slice();
+        next.splice(index, 1);
+        this.updateWorkingConfig({
+            ...cfg,
+            matchMode: cfg.matchMode,
+            conditions: next,
+        });
+    }
+    setListSelection(value) {
+        const arr = Array.isArray(value)
+            ? value.map(v => String(v))
+            : value == null
+                ? []
+                : [String(value)];
+        this.updateWorkingConfig({
+            dataType: 'list',
+            matchMode: 'all',
+            conditions: [
+                {
+                    operator: 'in',
+                    rawValue: arr.length > 0 ? JSON.stringify(arr) : null,
+                },
+            ],
+        });
+    }
+    /** 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.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();
+        }
+    }
+    /** Shows the filter popup. Only works when {@link mode} is not `inline`. */
+    show() {
+        if (this.mode() === 'inline') {
+            throw new NgnError('filter', 'Cannot open an inline filter.');
+        }
+        if (this.mode() === 'headless' && !this.anchor()) {
+            throw new NgnError('filter', 'Headless mode requires an [anchor] input.');
+        }
+        const popover = this._popover();
+        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`. */
+    hide() {
+        if (this.mode() === 'inline') {
+            throw new NgnError('filter', 'Cannot close an inline filter.');
+        }
+        this._popover()?.hide();
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter') {
+            if (this.mode() !== 'inline') {
+                this._popover()?.toggle();
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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>\n  <div [ptInt]=\"this\" [ptClass]=\"'rows'\">\n    @if (dataType() === 'list') {\n      <div [ptInt]=\"this\" [ptClass]=\"'row'\" data-testid=\"filter-row-list\">\n        <ngn-input-field\n          [ptInt]=\"this\"\n          [ptDep]=\"'value'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n        >\n          <ngn-select\n            [ptInt]=\"this\"\n            [ptDep]=\"'list-select'\"\n            [multiple]=\"true\"\n            [options]=\"resolvedListOptions()\"\n            [value]=\"$any(templateListSelection())\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (valueChange)=\"setListSelection($event)\"\n          />\n        </ngn-input-field>\n      </div>\n    } @else {\n      @for (c of templateConfig().conditions; track $index; let i = $index; let last = $last) {\n        <div [ptInt]=\"this\" [ptClass]=\"'row'\" [attr.data-testid]=\"'filter-row-' + i\">\n          <ngn-input-field\n            [ptInt]=\"this\"\n            [ptDep]=\"operatorRequiresValue(c.operator) ? 'operator' : 'value'\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n          >\n            <ngn-select\n              [ptInt]=\"this\"\n              [ptDep]=\"'operator-select'\"\n              [options]=\"operatorOptions()\"\n              [label]=\"i18n['filter_operator']()\"\n              [value]=\"c.operator\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              (valueChange)=\"setOperator(i, $event)\"\n            />\n          </ngn-input-field>\n          @if (operatorRequiresValue(c.operator)) {\n            @if (isDateType()) {\n              <ngn-input-field\n                [ptInt]=\"this\"\n                [ptDep]=\"'value'\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                <ngn-calendar\n                  [ptInt]=\"this\"\n                  [ptDep]=\"'calendar'\"\n                  [showTime]=\"isShowTime()\"\n                  [value]=\"parseRawDate(c.rawValue)\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  (valueChange)=\"setDateValue(i, $event)\"\n                />\n              </ngn-input-field>\n            } @else {\n              <ngn-input-field\n                [ptInt]=\"this\"\n                [ptDep]=\"'value'\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                <input\n                  ngnInput\n                  [ptInt]=\"this\"\n                  [ptDep]=\"'input'\"\n                  [attr.aria-label]=\"i18n['filter_value']()\"\n                  [type]=\"inputType()\"\n                  [value]=\"c.rawValue || ''\"\n                  [disabled]=\"disabled()\"\n                  [readOnly]=\"readonly()\"\n                  (valueChange)=\"setRawValue(i, $event)\"\n                />\n              </ngn-input-field>\n            }\n          }\n\n          @if (allowMultiple() && templateConfig().conditions.length > 1) {\n            <button\n              type=\"button\"\n              ngnButton\n              kind=\"icon\"\n              [ptInt]=\"this\"\n              [ptDep]=\"'remove-btn'\"\n              [disabled]=\"disabled() || readonly()\"\n              (click)=\"removeCondition(i)\"\n              [attr.aria-label]=\"i18n['filter_removeCondition']() + ' ' + (i + 1)\"\n              data-testid=\"filter-remove-condition\"\n            >\n              <ngn-icon defaultIcon=\"filter-remove\" />\n            </button>\n          }\n        </div>\n\n        @if (allowMultiple() && !last && templateConfig().conditions.length > 1) {\n          <div\n            [ptInt]=\"this\"\n            [ptClass]=\"'condition-divider'\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"!disabled() && !readonly() && toggleMatchMode()\"\n            (keydown.enter)=\"!disabled() && !readonly() && toggleMatchMode()\"\n            (keydown.space)=\"\n              !disabled() && !readonly() && toggleMatchMode(); $event.preventDefault()\n            \"\n            [attr.aria-disabled]=\"disabled() || readonly()\"\n            data-testid=\"filter-match-mode\"\n          >\n            {{ matchModeLabel() }}\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  @if (!disabled() && !readonly()) {\n    <div [ptInt]=\"this\" [ptClass]=\"'footer'\">\n      @if (dataType() !== 'list' && allowMultiple()) {\n        <button\n          type=\"button\"\n          ngnButton\n          kind=\"secondary\"\n          [ptInt]=\"this\"\n          [ptDep]=\"'add-button'\"\n          (click)=\"addCondition()\"\n          data-testid=\"filter-add-rule\"\n        >\n          <span aria-hidden=\"true\">+</span>\n          {{ i18n['filter_addCondition']() }}\n        </button>\n      }\n      <div [ptInt]=\"this\" [ptClass]=\"'footer-actions'\">\n        @if (!autoApply()) {\n          <button\n            type=\"button\"\n            ngnButton\n            kind=\"secondary\"\n            [ptInt]=\"this\"\n            [ptDep]=\"'cancel-button'\"\n            (click)=\"cancelChanges()\"\n            data-testid=\"filter-cancel\"\n          >\n            {{ i18n['filter_cancel']() }}\n          </button>\n          <button\n            type=\"button\"\n            ngnButton\n            kind=\"primary\"\n            [ptInt]=\"this\"\n            [ptDep]=\"'apply-button'\"\n            (click)=\"apply()\"\n            data-testid=\"filter-apply\"\n          >\n            {{ i18n['filter_apply']() }}\n          </button>\n        } @else {\n          <button\n            type=\"button\"\n            ngnButton\n            kind=\"secondary\"\n            [ptInt]=\"this\"\n            [ptDep]=\"'clear-button'\"\n            (click)=\"clear()\"\n            data-testid=\"filter-clear\"\n          >\n            {{ i18n['filter_clear']() }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #popoverTemplate let-anchor=\"anchor\">\n  <ngn-popover\n    #popover\n    [ptInt]=\"this\"\n    [ptDep]=\"'popover'\"\n    [options]=\"appliedPopoverOptions()\"\n    [anchor]=\"anchor\"\n    [hasShrinkableContent]=\"true\"\n    (keydown)=\"onKeyDown($event)\"\n    [id]=\"inputId() + '_popover'\"\n  >\n    <ng-template #lazy>\n      <div [ptInt]=\"this\" [ptClass]=\"'popover-content'\">\n        <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\n      </div>\n    </ng-template>\n  </ngn-popover>\n</ng-template>\n\n@if (mode() === 'inline') {\n  <div [ptInt]=\"this\" [ptClass]=\"'inline'\">\n    <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\n    <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\n  </div>\n} @else if (mode() === 'input') {\n  <ngn-input-field\n    [ptInt]=\"this\"\n    [ptDep]=\"'input-field'\"\n    (click)=\"!disabled() && !readonly() && show()\"\n    (keydown)=\"onKeyDown($event)\"\n    #field\n    [label]=\"label()\"\n    [inputId]=\"inputId()\"\n    [invalid]=\"invalid()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    <div role=\"button\" [ptInt]=\"this\" [ptClass]=\"'summary'\">{{ summaryText() }}</div>\n    <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" defaultIcon=\"search\" />\n  </ngn-input-field>\n\n  <ng-container\n    [ngTemplateOutlet]=\"popoverTemplate\"\n    [ngTemplateOutletContext]=\"{ anchor: field.element.nativeElement }\"\n  />\n} @else {\n  @if (anchor()) {\n    <ng-container\n      [ngTemplateOutlet]=\"popoverTemplate\"\n      [ngTemplateOutletContext]=\"{ anchor: anchor() }\"\n    />\n  }\n}\n", dependencies: [{ kind: "directive", type: NgnPt, selector: "[ptInt]", inputs: ["ptInt", "ptClass", "ptDep"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgnCalendar, selector: "ngn-calendar", inputs: ["firstDayOfWeek", "showTime", "showSeconds", "inline", "format"] }, { 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", "iconFilter", "iconDropdown", "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: ["ngnButtonInline"], exportAs: ["ngnButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NgnFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngn-filter', imports: [
+                        NgnPt,
+                        NgTemplateOutlet,
+                        NgnCalendar,
+                        NgnInputField,
+                        NgnInput,
+                        NgnSelect,
+                        NgnPopover,
+                        NgnIcon,
+                        NgnButton,
+                    ], providers: [provideSelf(NgnFilter)], host: {
+                        style: 'display: block;',
+                    }, template: "<ng-template #rowsTemplate>\n  <div [ptInt]=\"this\" [ptClass]=\"'rows'\">\n    @if (dataType() === 'list') {\n      <div [ptInt]=\"this\" [ptClass]=\"'row'\" data-testid=\"filter-row-list\">\n        <ngn-input-field\n          [ptInt]=\"this\"\n          [ptDep]=\"'value'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n        >\n          <ngn-select\n            [ptInt]=\"this\"\n            [ptDep]=\"'list-select'\"\n            [multiple]=\"true\"\n            [options]=\"resolvedListOptions()\"\n            [value]=\"$any(templateListSelection())\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            (valueChange)=\"setListSelection($event)\"\n          />\n        </ngn-input-field>\n      </div>\n    } @else {\n      @for (c of templateConfig().conditions; track $index; let i = $index; let last = $last) {\n        <div [ptInt]=\"this\" [ptClass]=\"'row'\" [attr.data-testid]=\"'filter-row-' + i\">\n          <ngn-input-field\n            [ptInt]=\"this\"\n            [ptDep]=\"operatorRequiresValue(c.operator) ? 'operator' : 'value'\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n          >\n            <ngn-select\n              [ptInt]=\"this\"\n              [ptDep]=\"'operator-select'\"\n              [options]=\"operatorOptions()\"\n              [label]=\"i18n['filter_operator']()\"\n              [value]=\"c.operator\"\n              [disabled]=\"disabled()\"\n              [readonly]=\"readonly()\"\n              (valueChange)=\"setOperator(i, $event)\"\n            />\n          </ngn-input-field>\n          @if (operatorRequiresValue(c.operator)) {\n            @if (isDateType()) {\n              <ngn-input-field\n                [ptInt]=\"this\"\n                [ptDep]=\"'value'\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                <ngn-calendar\n                  [ptInt]=\"this\"\n                  [ptDep]=\"'calendar'\"\n                  [showTime]=\"isShowTime()\"\n                  [value]=\"parseRawDate(c.rawValue)\"\n                  [disabled]=\"disabled()\"\n                  [readonly]=\"readonly()\"\n                  (valueChange)=\"setDateValue(i, $event)\"\n                />\n              </ngn-input-field>\n            } @else {\n              <ngn-input-field\n                [ptInt]=\"this\"\n                [ptDep]=\"'value'\"\n                [disabled]=\"disabled()\"\n                [readonly]=\"readonly()\"\n              >\n                <input\n                  ngnInput\n                  [ptInt]=\"this\"\n                  [ptDep]=\"'input'\"\n                  [attr.aria-label]=\"i18n['filter_value']()\"\n                  [type]=\"inputType()\"\n                  [value]=\"c.rawValue || ''\"\n                  [disabled]=\"disabled()\"\n                  [readOnly]=\"readonly()\"\n                  (valueChange)=\"setRawValue(i, $event)\"\n                />\n              </ngn-input-field>\n            }\n          }\n\n          @if (allowMultiple() && templateConfig().conditions.length > 1) {\n            <button\n              type=\"button\"\n              ngnButton\n              kind=\"icon\"\n              [ptInt]=\"this\"\n              [ptDep]=\"'remove-btn'\"\n              [disabled]=\"disabled() || readonly()\"\n              (click)=\"removeCondition(i)\"\n              [attr.aria-label]=\"i18n['filter_removeCondition']() + ' ' + (i + 1)\"\n              data-testid=\"filter-remove-condition\"\n            >\n              <ngn-icon defaultIcon=\"filter-remove\" />\n            </button>\n          }\n        </div>\n\n        @if (allowMultiple() && !last && templateConfig().conditions.length > 1) {\n          <div\n            [ptInt]=\"this\"\n            [ptClass]=\"'condition-divider'\"\n            role=\"button\"\n            tabindex=\"0\"\n            (click)=\"!disabled() && !readonly() && toggleMatchMode()\"\n            (keydown.enter)=\"!disabled() && !readonly() && toggleMatchMode()\"\n            (keydown.space)=\"\n              !disabled() && !readonly() && toggleMatchMode(); $event.preventDefault()\n            \"\n            [attr.aria-disabled]=\"disabled() || readonly()\"\n            data-testid=\"filter-match-mode\"\n          >\n            {{ matchModeLabel() }}\n          </div>\n        }\n      }\n    }\n  </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n  @if (!disabled() && !readonly()) {\n    <div [ptInt]=\"this\" [ptClass]=\"'footer'\">\n      @if (dataType() !== 'list' && allowMultiple()) {\n        <button\n          type=\"button\"\n          ngnButton\n          kind=\"secondary\"\n          [ptInt]=\"this\"\n          [ptDep]=\"'add-button'\"\n          (click)=\"addCondition()\"\n          data-testid=\"filter-add-rule\"\n        >\n          <span aria-hidden=\"true\">+</span>\n          {{ i18n['filter_addCondition']() }}\n        </button>\n      }\n      <div [ptInt]=\"this\" [ptClass]=\"'footer-actions'\">\n        @if (!autoApply()) {\n          <button\n            type=\"button\"\n            ngnButton\n            kind=\"secondary\"\n            [ptInt]=\"this\"\n            [ptDep]=\"'cancel-button'\"\n            (click)=\"cancelChanges()\"\n            data-testid=\"filter-cancel\"\n          >\n            {{ i18n['filter_cancel']() }}\n          </button>\n          <button\n            type=\"button\"\n            ngnButton\n            kind=\"primary\"\n            [ptInt]=\"this\"\n            [ptDep]=\"'apply-button'\"\n            (click)=\"apply()\"\n            data-testid=\"filter-apply\"\n          >\n            {{ i18n['filter_apply']() }}\n          </button>\n        } @else {\n          <button\n            type=\"button\"\n            ngnButton\n            kind=\"secondary\"\n            [ptInt]=\"this\"\n            [ptDep]=\"'clear-button'\"\n            (click)=\"clear()\"\n            data-testid=\"filter-clear\"\n          >\n            {{ i18n['filter_clear']() }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n\n<ng-template #popoverTemplate let-anchor=\"anchor\">\n  <ngn-popover\n    #popover\n    [ptInt]=\"this\"\n    [ptDep]=\"'popover'\"\n    [options]=\"appliedPopoverOptions()\"\n    [anchor]=\"anchor\"\n    [hasShrinkableContent]=\"true\"\n    (keydown)=\"onKeyDown($event)\"\n    [id]=\"inputId() + '_popover'\"\n  >\n    <ng-template #lazy>\n      <div [ptInt]=\"this\" [ptClass]=\"'popover-content'\">\n        <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\n        <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\n      </div>\n    </ng-template>\n  </ngn-popover>\n</ng-template>\n\n@if (mode() === 'inline') {\n  <div [ptInt]=\"this\" [ptClass]=\"'inline'\">\n    <ng-container [ngTemplateOutlet]=\"rowsTemplate\" />\n    <ng-container [ngTemplateOutlet]=\"footerTemplate\" />\n  </div>\n} @else if (mode() === 'input') {\n  <ngn-input-field\n    [ptInt]=\"this\"\n    [ptDep]=\"'input-field'\"\n    (click)=\"!disabled() && !readonly() && show()\"\n    (keydown)=\"onKeyDown($event)\"\n    #field\n    [label]=\"label()\"\n    [inputId]=\"inputId()\"\n    [invalid]=\"invalid()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    <div role=\"button\" [ptInt]=\"this\" [ptClass]=\"'summary'\">{{ summaryText() }}</div>\n    <ngn-icon [ptInt]=\"this\" [ptClass]=\"'icon'\" defaultIcon=\"search\" />\n  </ngn-input-field>\n\n  <ng-container\n    [ngTemplateOutlet]=\"popoverTemplate\"\n    [ngTemplateOutletContext]=\"{ anchor: field.element.nativeElement }\"\n  />\n} @else {\n  @if (anchor()) {\n    <ng-container\n      [ngTemplateOutlet]=\"popoverTemplate\"\n      [ngTemplateOutletContext]=\"{ anchor: anchor() }\"\n    />\n  }\n}\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.
+ */
+
+export { NgnFilter };
+//# sourceMappingURL=ngneers-controls-filter.mjs.map