@malva-ui/core 0.1.13 → 0.1.14

package/fesm2022/malva-ui-core-filter.mjs

@@ -0,0 +1,1627 @@
+import { normalizeForMatch, mlvNextId, MlvSpacer } from '@malva-ui/cdk/utils';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, model, output, signal, viewChild, ElementRef, viewChildren, contentChild, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, Injector, numberAttribute, contentChildren, afterNextRender } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { LucideChevronDown, LucidePlus, LucideTrash2, LucideX, LucideChevronUp, LucideRefreshCw, LucideSettings2 } from '@lucide/angular';
+import { deepEqual } from 'fast-equals';
+import { MlvTabbableElementService, MlvClick } from '@malva-ui/cdk/accessibility';
+import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
+import { isReconciliationEmit, filteredOutCommitted, MlvDropdownPanel, normalizeForMatch as normalizeForMatch$1 } from '@malva-ui/core/dropdown';
+import { MlvSelectionService } from '@malva-ui/core/form-utils';
+import { MlvInput } from '@malva-ui/core/input';
+import { MlvPopup, MlvPopupContent, MlvPopupTrigger } from '@malva-ui/core/popup';
+import { MlvSelect } from '@malva-ui/core/select';
+import { MLV_FILTER_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { MlvToolbar } from '@malva-ui/core/toolbar';
+import { MlvLink } from '@malva-ui/core/link';
+import { MlvCheckbox } from '@malva-ui/core/checkbox';
+import { MlvSearchField } from '@malva-ui/core/search-field';
+import { MlvExpand } from '@malva-ui/core/expand';
+
+/**
+ * Converts the flat Smart Filter Bar model to its equivalent expression tree.
+ * Empty field states are omitted because they do not constrain a flat query.
+ */
+function mlvFilterFieldsToExpression(fields) {
+    return {
+        kind: 'group',
+        combinator: 'and',
+        children: fields.flatMap((field) => {
+            const children = field.conditions.map((condition) => ({
+                kind: 'condition',
+                key: field.key,
+                condition,
+            }));
+            if (children.length === 0)
+                return [];
+            if (children.length === 1)
+                return children;
+            return [
+                {
+                    kind: 'group',
+                    combinator: field.strategy,
+                    children,
+                },
+            ];
+        }),
+    };
+}
+/**
+ * Converts an expression to flat field state only when no grouping information
+ * would be lost. Direct leaves and singleton groups are canonicalized to the
+ * semantically-neutral `and` strategy. Returns `null` for cross-field ORs,
+ * contradictory field compositions, and false (empty OR) groups.
+ */
+function mlvFilterExpressionToFields(expression) {
+    const collection = _collectFlatExpression(expression);
+    if (collection.kind === 'true')
+        return [];
+    if (collection.kind !== 'terms')
+        return null;
+    const fields = [];
+    const fieldIndexes = new Map();
+    for (const term of collection.terms) {
+        const index = fieldIndexes.get(term.key);
+        if (index === undefined) {
+            fieldIndexes.set(term.key, fields.length);
+            fields.push({
+                key: term.key,
+                strategy: term.strategy,
+                conditions: [...term.conditions],
+            });
+            continue;
+        }
+        const existing = fields[index];
+        if (existing === undefined ||
+            existing.strategy !== 'and' ||
+            term.strategy !== 'and') {
+            return null;
+        }
+        fields[index] = {
+            ...existing,
+            conditions: [...existing.conditions, ...term.conditions],
+        };
+    }
+    return fields;
+}
+/**
+ * Evaluates an expression using a domain-owned value reader. String predicates
+ * are case- and diacritic-insensitive; equality and membership remain strict.
+ */
+function mlvMatchesFilterExpression(value, expression, readValue) {
+    if (expression.kind === 'condition') {
+        return _matchesCondition(readValue(value, expression.key), expression.condition);
+    }
+    return expression.combinator === 'and'
+        ? expression.children.every((child) => mlvMatchesFilterExpression(value, child, readValue))
+        : expression.children.some((child) => mlvMatchesFilterExpression(value, child, readValue));
+}
+/**
+ * @private Normalizes an expression into a boolean identity or flat terms.
+ * A distinct unrepresentable state prevents false identities from being
+ * confused with shapes that would lose grouping semantics when flattened.
+ */
+function _collectFlatExpression(expression) {
+    if (expression.kind === 'condition') {
+        return {
+            kind: 'terms',
+            terms: [
+                {
+                    key: expression.key,
+                    strategy: 'and',
+                    conditions: [expression.condition],
+                },
+            ],
+        };
+    }
+    return expression.combinator === 'and'
+        ? _collectAndGroup(expression.children)
+        : _collectOrGroup(expression.children);
+}
+/** @private Combines child collections using AND's true/false identities. */
+function _collectAndGroup(children) {
+    const terms = [];
+    let hasFalseChild = false;
+    let hasUnrepresentableChild = false;
+    for (const child of children) {
+        const collection = _collectFlatExpression(child);
+        if (collection.kind === 'false') {
+            hasFalseChild = true;
+            continue;
+        }
+        if (collection.kind === 'unrepresentable') {
+            hasUnrepresentableChild = true;
+            continue;
+        }
+        if (collection.kind === 'terms')
+            terms.push(...collection.terms);
+    }
+    if (hasFalseChild)
+        return { kind: 'false' };
+    if (hasUnrepresentableChild)
+        return { kind: 'unrepresentable' };
+    return terms.length === 0 ? { kind: 'true' } : { kind: 'terms', terms };
+}
+/**
+ * @private Combines child collections using OR's true/false identities, then
+ * flattens only multiple alternatives for one field.
+ */
+function _collectOrGroup(children) {
+    const alternatives = [];
+    let hasUnrepresentableChild = false;
+    for (const child of children) {
+        const collection = _collectFlatExpression(child);
+        if (collection.kind === 'true')
+            return collection;
+        if (collection.kind === 'false')
+            continue;
+        if (collection.kind === 'unrepresentable') {
+            hasUnrepresentableChild = true;
+            continue;
+        }
+        alternatives.push([...collection.terms]);
+    }
+    if (hasUnrepresentableChild)
+        return { kind: 'unrepresentable' };
+    if (alternatives.length === 0)
+        return { kind: 'false' };
+    if (alternatives.length === 1) {
+        const onlyAlternative = alternatives[0];
+        return onlyAlternative === undefined
+            ? { kind: 'false' }
+            : { kind: 'terms', terms: onlyAlternative };
+    }
+    const terms = alternatives.flat();
+    const first = terms[0];
+    if (first === undefined ||
+        terms.length !== alternatives.length ||
+        terms.some((term) => term.key !== first.key)) {
+        return { kind: 'unrepresentable' };
+    }
+    return {
+        kind: 'terms',
+        terms: [
+            {
+                key: first.key,
+                strategy: 'or',
+                conditions: terms.flatMap((term) => term.conditions),
+            },
+        ],
+    };
+}
+/** @private Evaluates one condition without coupling the filter package to a row shape. */
+function _matchesCondition(value, condition) {
+    const operand = condition.value;
+    switch (condition.operator) {
+        case 'contains':
+            return _normalizedText(value).includes(_normalizedText(operand));
+        case 'not-contains':
+            return !_normalizedText(value).includes(_normalizedText(operand));
+        case 'starts-with':
+            return _normalizedText(value).startsWith(_normalizedText(operand));
+        case 'ends-with':
+            return _normalizedText(value).endsWith(_normalizedText(operand));
+        case 'equals':
+            return value === operand;
+        case 'not-equals':
+            return value !== operand;
+        case 'greater-than':
+            return _compareNumbers(value, operand, (left, right) => left > right);
+        case 'greater-than-or-equal':
+            return _compareNumbers(value, operand, (left, right) => left >= right);
+        case 'less-than':
+            return _compareNumbers(value, operand, (left, right) => left < right);
+        case 'less-than-or-equal':
+            return _compareNumbers(value, operand, (left, right) => left <= right);
+        case 'between':
+            return _isBetween(value, operand);
+        case 'in':
+            return Array.isArray(operand) && operand.includes(value);
+        case 'not-in':
+            return Array.isArray(operand) && !operand.includes(value);
+        case 'empty':
+            return _isEmpty(value);
+        case 'not-empty':
+            return !_isEmpty(value);
+    }
+}
+/** @private Normalizes text according to the existing data-source predicate contract. */
+function _normalizedText(value) {
+    return normalizeForMatch(String(value ?? ''));
+}
+/** @private Converts number-editor compatible values to a finite number. */
+function _toFiniteNumber(value) {
+    if (typeof value === 'number')
+        return Number.isFinite(value) ? value : null;
+    if (typeof value !== 'string' || value.trim() === '')
+        return null;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+/** @private Applies one numeric relation only to two valid finite numeric values. */
+function _compareNumbers(value, operand, compare) {
+    const numericValue = _toFiniteNumber(value);
+    const numericOperand = _toFiniteNumber(operand);
+    return (numericValue !== null &&
+        numericOperand !== null &&
+        compare(numericValue, numericOperand));
+}
+/** @private Applies an inclusive ordered numeric range with an exact two-value operand. */
+function _isBetween(value, operand) {
+    if (!Array.isArray(operand) || operand.length !== 2)
+        return false;
+    const numericValue = _toFiniteNumber(value);
+    const minimum = _toFiniteNumber(operand[0]);
+    const maximum = _toFiniteNumber(operand[1]);
+    return (numericValue !== null &&
+        minimum !== null &&
+        maximum !== null &&
+        minimum <= maximum &&
+        numericValue >= minimum &&
+        numericValue <= maximum);
+}
+/** @private Treats nullish values, empty strings, and empty arrays as empty. */
+function _isEmpty(value) {
+    return (value === null ||
+        value === undefined ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0));
+}
+
+/**
+ * Marks an `ng-template` as the value editor for free-form filter conditions.
+ * Standalone `mlv-filter`: project the template as content. Inside
+ * `mlv-smart-filter-bar`: set the input to a definition key to target one
+ * field; an empty key is the fallback for every free-form field.
+ *
+ * ```html
+ * <mlv-filter label="Renewal" editor="text">
+ *   <ng-template mlvFilterValueEditor let-value let-set="setValue">
+ *     <mlv-day-picker [value]="$any(value)" (valueChange)="set($event)" />
+ *   </ng-template>
+ * </mlv-filter>
+ * ```
+ */
+class MlvFilterValueEditorDef {
+    /** Definition key this editor targets; empty targets all free-form fields. */
+    mlvFilterValueEditor = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvFilterValueEditor" }] : /* istanbul ignore next */ []));
+    /** The template rendered in place of the built-in value input. */
+    templateRef = inject((TemplateRef));
+    /**
+     * Type guard for template context inference.
+     * @internal
+     */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFilterValueEditorDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvFilterValueEditorDef, isStandalone: true, selector: "[mlvFilterValueEditor]", inputs: { mlvFilterValueEditor: { classPropertyName: "mlvFilterValueEditor", publicName: "mlvFilterValueEditor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFilterValueEditorDef, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mlvFilterValueEditor]' }]
+        }], propDecorators: { mlvFilterValueEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvFilterValueEditor", required: false }] }] } });
+
+/** Default operators for free-form filters. */
+const DEFAULT_OPERATORS = [
+    'contains',
+    'not-contains',
+    'equals',
+    'not-equals',
+];
+/**
+ * Controls a custom value editor may expose as its first focus target. Used
+ * only when the CDK interactivity checker finds nothing, which happens in
+ * environments without layout geometry.
+ */
+const FOCUSABLE_EDITOR_SELECTOR = [
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'button:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+].join(',');
+/**
+ * Height budget (px) for the bounded options panel — the 20rem slab the
+ * hand-rolled listbox used, kept instead of the dropdown panel's taller
+ * viewport-derived default. `MlvDropdownPanel.maxHeight` is px-only.
+ */
+const OPTIONS_MAX_HEIGHT = 320;
+/** Returns whether an operator requires no operand. */
+function isValuelessOperator(operator) {
+    return operator === 'empty' || operator === 'not-empty';
+}
+/**
+ * Whether two selections hold the same values, compared as **multisets**:
+ * order-insensitive, because aria emits in option-registration order while a
+ * draft carries pick order, but duplicate-sensitive, so `['a', 'a']` and
+ * `['a', 'b']` are correctly different (a plain "same length + every value is a
+ * member" test reads those two as equal). Elements compare with `fast-equals`'
+ * `deepEqual`, so structured option values match by shape.
+ */
+function isSameSelection(values, other) {
+    if (values.length !== other.length)
+        return false;
+    const unmatched = [...other];
+    return values.every((value) => {
+        const index = unmatched.findIndex((candidate) => deepEqual(candidate, value));
+        if (index < 0)
+            return false;
+        unmatched.splice(index, 1);
+        return true;
+    });
+}
+/** Returns a defensive shallow copy of filter conditions and array operands. */
+function cloneConditions(conditions) {
+    return conditions.map((condition) => ({
+        ...condition,
+        value: Array.isArray(condition.value)
+            ? [...condition.value]
+            : condition.value,
+    }));
+}
+/** Compact filter trigger and in-place condition editor. */
+class MlvFilter {
+    /** @private Document used for conservative focus restoration. */
+    _document = inject(DOCUMENT);
+    /** @protected Reactive translated strings for filters. */
+    _i18n = inject(MLV_FILTER_I18N);
+    /** @private ICU resolver for parameterized translated strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /** @private Tabbable-element lookup for focusing custom editors. */
+    _tabbable = inject(MlvTabbableElementService);
+    /** Visible filter name. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Optional domain key for consumers coordinating multiple filter instances. */
+    key = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    /** Whether this field renders as a classic control or a natural-language chip. */
+    appearance = input('field', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Whether an empty query field exposes removal instead of becoming sticky. */
+    queryRemovable = input(false, { ...(ngDevMode ? { debugName: "queryRemovable" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Bounded values shown as a listbox. */
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Explicit editor override. Options are inferred when choices are provided. */
+    editor = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+    /** Whether a bounded editor accepts multiple values. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether a free-form editor may add multiple conditions. */
+    allowMultipleConditions = input(false, { ...(ngDevMode ? { debugName: "allowMultipleConditions" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Operators available to a free-form editor. */
+    operators = input(DEFAULT_OPERATORS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operators" }] : /* istanbul ignore next */ []));
+    /** Optional user-facing labels for domain-specific operator vocabulary. */
+    operatorLabels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorLabels" }] : /* istanbul ignore next */ []));
+    /** Operator assigned to a newly-created free-form condition. */
+    defaultOperator = input('contains', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultOperator" }] : /* istanbul ignore next */ []));
+    /** Optional placeholder for free-form values. */
+    placeholder = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Whether edits publish immediately or wait for the Apply action. */
+    applyMode = input('live', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyMode" }] : /* istanbul ignore next */ []));
+    /** Prevents opening and editing the filter. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Shows progress and prevents editing while filter metadata is loading. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether the filter trigger represents an invalid field value. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Id reference describing the filter trigger's validation state. */
+    ariaDescribedBy = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom value-editor template forwarded by a smart filter bar. Wins over a
+     * projected `[mlvFilterValueEditor]` content child.
+     */
+    valueEditor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueEditor" }] : /* istanbul ignore next */ []));
+    /** Applied conditions. */
+    conditions = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "conditions" }] : /* istanbul ignore next */ []));
+    /** Combination rule used when more than one condition is present. */
+    conditionStrategy = model('or', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "conditionStrategy" }] : /* istanbul ignore next */ []));
+    /** Whether the condition editor is open. */
+    opened = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    /** Emitted whenever live editing or Apply commits conditions. */
+    applied = output();
+    /** Emitted when the clear action removes every condition. */
+    cleared = output();
+    /** @protected Unique id linking the trigger to its popup content. */
+    _panelId = mlvNextId('mlv-filter-panel');
+    /** @protected Height budget handed to the bounded options panel. */
+    _optionsMaxHeight = OPTIONS_MAX_HEIGHT;
+    /** @private Working conditions kept separate for explicit-apply mode. */
+    _draftConditions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_draftConditions" }] : /* istanbul ignore next */ []));
+    /** @private Working condition strategy kept separate until Apply. */
+    _draftStrategy = signal('or', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_draftStrategy" }] : /* istanbul ignore next */ []));
+    /** @private Trigger element used for focus restoration. */
+    _trigger = viewChild('trigger', { ...(ngDevMode ? { debugName: "_trigger" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    /** @private Rendered value fields used to focus the free-form editor. */
+    _conditionInputs = viewChildren(MlvInput, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_conditionInputs" }] : /* istanbul ignore next */ []));
+    /** @private Rendered value cells used to focus custom editors. */
+    _valueCells = viewChildren('valueCell', { ...(ngDevMode ? { debugName: "_valueCells" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    /** @private Projected value-editor template for standalone usage. */
+    _contentValueEditor = contentChild(MlvFilterValueEditorDef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_contentValueEditor" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Resolved custom value-editor template; `null` renders the
+     * built-in input.
+     */
+    _valueEditorTemplate = computed(() => this.valueEditor() ?? this._contentValueEditor()?.templateRef ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_valueEditorTemplate" }] : /* istanbul ignore next */ []));
+    /** @protected Resolved editor based on the explicit input and available options. */
+    _resolvedEditor = computed(() => this.editor() ?? (this.options().length > 0 ? 'options' : 'text'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedEditor" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the current editor is a bounded options list. */
+    _usesOptions = computed(() => this._resolvedEditor() === 'options', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_usesOptions" }] : /* istanbul ignore next */ []));
+    /** @protected Whether an open editor must reject every state-changing action. */
+    _editorDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_editorDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Bounded options mapped to the dropdown panel's option shape. A
+     * locked editor (disabled or loading) marks every row disabled, so a panel
+     * that is already open when loading starts stops offering picks it would
+     * silently reject.
+     */
+    _panelOptions = computed(() => {
+        const locked = this._editorDisabled();
+        return this.options().map((option) => ({
+            label: option.label,
+            value: option.value,
+            disabled: locked || (option.disabled ?? false),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_panelOptions" }] : /* istanbul ignore next */ []));
+    /** @protected Values currently selected in the draft, for the dropdown panel. */
+    _selectedValues = computed(() => this._draftConditions().flatMap((condition) => Array.isArray(condition.value) ? condition.value : [condition.value]), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectedValues" }] : /* istanbul ignore next */ []));
+    /** @protected Valid new-condition operator, constrained to the allowed list. */
+    _resolvedDefaultOperator = computed(() => {
+        const operators = this.operators();
+        const requested = this.defaultOperator();
+        return operators.includes(requested)
+            ? requested
+            : (operators[0] ?? 'contains');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedDefaultOperator" }] : /* istanbul ignore next */ []));
+    /** @protected Snapshot used by the editor template. */
+    _draft = this._draftConditions.asReadonly();
+    /** @protected Draft strategy used by the editor template. */
+    _strategy = this._draftStrategy.asReadonly();
+    /** @protected Resolved value placeholder with an i18n fallback. */
+    _resolvedPlaceholder = computed(() => this.placeholder() ?? this._i18n().valuePlaceholder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    /** @protected Operator-to-select-option adapter. */
+    _operatorTransform = (operator) => ({ value: operator, label: this._operatorLabel(operator) });
+    /** @protected Strategy-to-select-option adapter. */
+    _strategyTransform = (strategy) => ({ value: strategy, label: this._i18n()[strategy] });
+    /** @protected Strategies available when multiple conditions exist. */
+    _strategies = [
+        'and',
+        'or',
+    ];
+    /** @protected Number of selected scalar values represented by the conditions. */
+    valueCount = computed(() => this._displayValues(this.conditions()).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueCount" }] : /* istanbul ignore next */ []));
+    /** @protected Whether at least one meaningful condition is applied. */
+    hasValue = computed(() => this.conditions().some((condition) => this._isConditionMeaningful(condition)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** @protected First applied value rendered in the compact trigger. */
+    primaryValue = computed(() => this._displayValues(this.conditions())[0] ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "primaryValue" }] : /* istanbul ignore next */ []));
+    /** @protected Number of values hidden behind the `+ n more` summary. */
+    additionalValueCount = computed(() => Math.max(0, this.valueCount() - 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "additionalValueCount" }] : /* istanbul ignore next */ []));
+    /** @protected Accessible description of the current applied state. */
+    _triggerAriaLabel = computed(() => {
+        if (this.appearance() === 'query' && this.hasValue()) {
+            return this._querySentence();
+        }
+        if (!this.hasValue()) {
+            return this._resolveMessage('openFilter', { label: this.label() });
+        }
+        return `${this.label()}: ${this.primaryValue()}${this.additionalValueCount() > 0 ? ` ${this._moreValuesLabel()}` : ''}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Translated accessible label for the clear action. */
+    _clearAriaLabel = computed(() => this.appearance() === 'query' && this.queryRemovable()
+        ? this._resolveMessage('removeFilter', { label: this.label() })
+        : this._resolveMessage('clearFilter', { label: this.label() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_clearAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Whether the compact clear/remove action should be shown. */
+    _showsClearAction = computed(() => this.hasValue() ||
+        (this.appearance() === 'query' && this.queryRemovable()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showsClearAction" }] : /* istanbul ignore next */ []));
+    /** @protected Full natural-language summary used by a query chip. */
+    _querySentence = computed(() => {
+        const conditions = this.conditions().filter((condition) => this._isConditionMeaningful(condition));
+        if (conditions.length === 0)
+            return this.label();
+        return conditions
+            .map((condition) => {
+            const operator = this._operatorLabel(condition.operator);
+            if (isValuelessOperator(condition.operator)) {
+                return `${this.label()} ${operator}`;
+            }
+            const operand = this._displayValues([condition]).join(', ');
+            return `${this.label()} ${operator}${operand ? ` ${operand}` : ''}`;
+        })
+            .join(` ${this._i18n()[this.conditionStrategy()]} `);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_querySentence" }] : /* istanbul ignore next */ []));
+    /** @protected Translated compact summary for values beyond the first. */
+    _moreValuesLabel = computed(() => this._resolveMessage('moreValues', {
+        count: this.additionalValueCount(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_moreValuesLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const conditions = this.conditions();
+            const strategy = this.conditionStrategy();
+            if (!this.opened()) {
+                this._draftConditions.set(cloneConditions(conditions));
+                this._draftStrategy.set(strategy);
+            }
+        });
+    }
+    /** @protected Prepares and focuses the editor after the overlay attaches. */
+    _onOpened() {
+        if (!this._usesOptions() && this._draftConditions().length === 0) {
+            this._draftConditions.set([this._newCondition()]);
+        }
+        queueMicrotask(() => {
+            if (this._usesOptions()) {
+                // The panel's aria listbox already parks its roving tab stop on the
+                // selected option (falling back to the first focusable one), so the
+                // `tabindex="0"` row is the correct entry point.
+                const panel = this._document.getElementById(this._panelId);
+                const target = panel?.querySelector('[role="option"][tabindex="0"]') ??
+                    panel?.querySelector('[role="option"]');
+                target?.focus();
+            }
+            else {
+                // A custom editor owns its own controls, so the first focusable element
+                // inside the value cell is the only reliable entry point.
+                const cell = this._valueCells()[0]?.nativeElement;
+                const target = cell ? this._firstFocusableIn(cell) : null;
+                if (target)
+                    target.focus();
+                else
+                    this._conditionInputs()[0]?.focus();
+            }
+        });
+    }
+    /** @protected Resynchronises drafts and restores focus after a keyboard/action close. */
+    _onClosed() {
+        this._draftConditions.set(cloneConditions(this.conditions()));
+        this._draftStrategy.set(this.conditionStrategy());
+        if (this._document.activeElement === this._document.body) {
+            this._trigger()?.nativeElement.focus();
+        }
+    }
+    /** @protected Removes all applied and in-progress values. */
+    _clear(event) {
+        event?.stopPropagation();
+        if (this._editorDisabled())
+            return;
+        this._draftConditions.set([]);
+        this.conditions.set([]);
+        this.applied.emit([]);
+        this.cleared.emit();
+        this.opened.set(false);
+        if (event) {
+            queueMicrotask(() => this._trigger()?.nativeElement.focus());
+        }
+    }
+    /** @protected Clears the editor draft while preserving explicit-mode rollback. */
+    _clearDraft() {
+        if (this._editorDisabled())
+            return;
+        this._draftConditions.set(this._usesOptions() ? [] : [this._newCondition()]);
+        if (this.applyMode() === 'explicit')
+            return;
+        this.conditions.set([]);
+        this.applied.emit([]);
+        this.cleared.emit();
+        this.opened.set(false);
+    }
+    /** @protected Discards uncommitted edits and closes the editor. */
+    _cancel() {
+        this._draftConditions.set(cloneConditions(this.conditions()));
+        this._draftStrategy.set(this.conditionStrategy());
+        this.opened.set(false);
+    }
+    /** @protected Commits meaningful draft conditions and closes the editor. */
+    _apply() {
+        if (this._editorDisabled())
+            return;
+        const hadAppliedConditions = this.conditions().some((condition) => this._isConditionMeaningful(condition));
+        const conditions = this._draftConditions().filter((condition) => this._isConditionMeaningful(condition));
+        this.conditions.set(cloneConditions(conditions));
+        this.conditionStrategy.set(this._draftStrategy());
+        this.applied.emit(cloneConditions(conditions));
+        if (hadAppliedConditions && conditions.length === 0)
+            this.cleared.emit();
+        this.opened.set(false);
+    }
+    /**
+     * @protected Applies a dropdown-panel selection to the draft.
+     *
+     * `@angular/aria`'s listbox owns a `value` model that it reconciles against
+     * the options actually *registered* in the DOM, and it re-emits `valueChange`
+     * from that reconciliation — not only when a user picks. Two kinds of noise
+     * therefore have to be filtered out before anything may rewrite the draft:
+     *
+     * 1. An emit that restates the selection unchanged.
+     * 2. An emit that drops committed values whose option is not rendered — async
+     *    options that have not arrived, a saved view restored ahead of its
+     *    choices, a value whose option was removed. Left unguarded this silently
+     *    wipes committed conditions the moment the popover opens.
+     */
+    _onOptionValuesChange(values) {
+        if (this._editorDisabled())
+            return;
+        const current = this._selectedValues();
+        if (isSameSelection(values, current)) {
+            // Defensive, not a real DOM gesture path: in explicit aria mode a
+            // single-select re-click toggles to *deselect* (an empty emit), so no
+            // interaction actually restates the committed selection unchanged.
+            // This guards against a hypothetical aria restate emit after an option
+            // re-registers (e.g. options reloading/reordering while a value stays
+            // selected) — closing stays `_commitLive`'s privilege, so an
+            // explicit-mode draft is resolved by Apply/Cancel alone.
+            if (values.length > 0 &&
+                !this.multiple() &&
+                this.applyMode() === 'live') {
+                this.opened.set(false);
+            }
+            return;
+        }
+        // `Object.is` (not deep equality) is deliberate here: this predicate has to
+        // mirror aria's own `===` matching of a value against its rendered option,
+        // otherwise a structurally-equal-but-distinct value would read as "still
+        // rendered" and the drop would be treated as a real deselection.
+        const visible = this._panelOptions().map((option) => option.value);
+        if (isReconciliationEmit(values, current, visible, Object.is))
+            return;
+        if (this.multiple()) {
+            // aria has already dropped every committed value with no rendered option,
+            // so a genuine pick arrives without them. Re-add them, or picking one
+            // more value would quietly discard the rest of the selection.
+            const next = [
+                ...values,
+                ...filteredOutCommitted(values, current, visible, Object.is),
+            ];
+            this._draftConditions.set(next.length > 0 ? [{ operator: 'in', value: next }] : []);
+            this._commitLive(false);
+            return;
+        }
+        const value = values[0];
+        this._draftConditions.set(value === undefined ? [] : [{ operator: 'equals', value }]);
+        this._commitLive(true);
+    }
+    /** @protected Updates one condition's operator. */
+    _setOperator(index, operator) {
+        if (this._editorDisabled())
+            return;
+        const next = cloneConditions(this._draftConditions());
+        const current = next[index] ?? this._newCondition();
+        let value = current.value;
+        if (isValuelessOperator(operator))
+            value = null;
+        else if (operator === 'between' && current.operator !== 'between') {
+            value = ['', ''];
+        }
+        else if (current.operator === 'between' ||
+            isValuelessOperator(current.operator)) {
+            value = '';
+        }
+        next[index] = {
+            ...current,
+            operator,
+            value,
+        };
+        this._draftConditions.set(next);
+        this._commitLive(false);
+    }
+    /** @protected Updates one condition's operand. */
+    _setConditionValue(index, value) {
+        if (this._editorDisabled())
+            return;
+        const next = cloneConditions(this._draftConditions());
+        const current = next[index] ?? this._newCondition();
+        next[index] = { ...current, value: this._normalizeValue(value) };
+        this._draftConditions.set(next);
+        this._commitLive(false);
+    }
+    /** @protected Builds the template context for one condition's custom editor. */
+    _valueEditorContext(condition, index) {
+        return {
+            $implicit: condition.value,
+            condition,
+            index,
+            operator: condition.operator,
+            disabled: this._editorDisabled(),
+            placeholder: this._resolvedPlaceholder(),
+            setValue: (value) => this._setConditionValue(index, value),
+            commit: () => {
+                if (this.applyMode() === 'explicit')
+                    this._apply();
+            },
+        };
+    }
+    /** @protected Returns one side of a between-condition range. */
+    _conditionRangeValue(condition, rangeIndex) {
+        return Array.isArray(condition.value)
+            ? (condition.value[rangeIndex] ?? '')
+            : '';
+    }
+    /** @protected Updates one side of a between-condition range. */
+    _setConditionRangeValue(conditionIndex, rangeIndex, value) {
+        if (this._editorDisabled())
+            return;
+        const next = cloneConditions(this._draftConditions());
+        const current = next[conditionIndex] ?? this._newCondition();
+        const range = Array.isArray(current.value) ? [...current.value] : ['', ''];
+        range[rangeIndex] = this._normalizeValue(value);
+        next[conditionIndex] = { ...current, value: range };
+        this._draftConditions.set(next);
+        this._commitLive(false);
+    }
+    /** @protected Updates the combination rule for working conditions. */
+    _setStrategy(strategy) {
+        if (this._editorDisabled())
+            return;
+        this._draftStrategy.set(strategy);
+        if (this.applyMode() === 'live') {
+            this.conditionStrategy.set(strategy);
+        }
+    }
+    /** @protected Adds another free-form condition and focuses it. */
+    _addCondition() {
+        if (this._editorDisabled())
+            return;
+        // A custom editor renders no `mlv-input`, so the new row is located by its
+        // value cell first and only then by the built-in input list.
+        const previousCellCount = this._valueCells().length;
+        const previousInputCount = this._conditionInputs().length;
+        this._draftConditions.update((conditions) => [
+            ...conditions,
+            this._newCondition(),
+        ]);
+        queueMicrotask(() => {
+            const cell = this._valueCells()[previousCellCount]?.nativeElement;
+            const target = cell ? this._firstFocusableIn(cell) : null;
+            if (target)
+                target.focus();
+            else
+                this._conditionInputs()[previousInputCount]?.focus();
+        });
+    }
+    /** @protected Removes one working condition. */
+    _removeCondition(index) {
+        if (this._editorDisabled())
+            return;
+        this._draftConditions.update((conditions) => conditions.filter((_, conditionIndex) => conditionIndex !== index));
+        if (this._draftConditions().length === 0) {
+            this._draftConditions.set([this._newCondition()]);
+        }
+        this._commitLive(false);
+    }
+    /**
+     * @private First focusable control rendered inside a value cell. The CDK
+     * interactivity checker requires layout geometry, so a plain selector query
+     * takes over whenever it reports nothing focusable.
+     */
+    _firstFocusableIn(cell) {
+        return (this._tabbable.getTabbableElement(cell, false, true) ??
+            cell.querySelector(FOCUSABLE_EDITOR_SELECTOR));
+    }
+    /** @private Creates an empty free-form condition. */
+    _newCondition() {
+        const operator = this._resolvedDefaultOperator();
+        return {
+            id: mlvNextId('mlv-filter-condition'),
+            operator,
+            value: isValuelessOperator(operator)
+                ? null
+                : operator === 'between'
+                    ? ['', '']
+                    : '',
+        };
+    }
+    /** @private Publishes draft state immediately when live mode is active. */
+    _commitLive(close) {
+        if (this.applyMode() !== 'live' || this._editorDisabled())
+            return;
+        const meaningful = this._draftConditions().filter((condition) => this._isConditionMeaningful(condition));
+        this.conditions.set(cloneConditions(meaningful));
+        this.applied.emit(cloneConditions(meaningful));
+        if (close)
+            this.opened.set(false);
+    }
+    /** @private Normalizes number-editor input while preserving empty/invalid drafts. */
+    _normalizeValue(value) {
+        const parsedNumber = typeof value === 'string' ? Number(value) : NaN;
+        return this._resolvedEditor() === 'number' &&
+            typeof value === 'string' &&
+            value !== '' &&
+            Number.isFinite(parsedNumber)
+            ? parsedNumber
+            : value;
+    }
+    /** @private Converts applied operands into compact, human-readable labels. */
+    _displayValues(conditions) {
+        return conditions.flatMap((condition) => {
+            if (isValuelessOperator(condition.operator)) {
+                return [this._operatorLabel(condition.operator)];
+            }
+            if (condition.operator === 'between' &&
+                Array.isArray(condition.value) &&
+                condition.value.length === 2) {
+                return [
+                    `${String(condition.value[0])} – ${String(condition.value[1])}`,
+                ];
+            }
+            const values = Array.isArray(condition.value)
+                ? condition.value
+                : [condition.value];
+            return values
+                .filter((value) => value !== null && value !== undefined && value !== '')
+                .map((value) => {
+                const option = this.options().find((candidate) => Object.is(candidate.value, value));
+                return option?.label ?? String(value);
+            });
+        });
+    }
+    /** @private Whether a condition has an operator-complete operand. */
+    _isConditionMeaningful(condition) {
+        if (isValuelessOperator(condition.operator))
+            return true;
+        if (condition.operator === 'between' && Array.isArray(condition.value)) {
+            return (condition.value.length === 2 &&
+                condition.value.every((value) => value !== null && value !== undefined && value !== ''));
+        }
+        if (Array.isArray(condition.value))
+            return condition.value.length > 0;
+        return (condition.value !== null &&
+            condition.value !== undefined &&
+            condition.value !== '');
+    }
+    /** @private Resolves translated labels for built-in operators. */
+    _operatorLabel(operator) {
+        const override = this.operatorLabels()[operator];
+        if (override)
+            return override;
+        const i18n = this._i18n();
+        switch (operator) {
+            case 'contains':
+                return i18n.contains;
+            case 'not-contains':
+                return i18n.notContains;
+            case 'starts-with':
+                return i18n.startsWith;
+            case 'ends-with':
+                return i18n.endsWith;
+            case 'equals':
+                return i18n.equals;
+            case 'not-equals':
+                return i18n.notEquals;
+            case 'greater-than':
+                return i18n.greaterThan;
+            case 'greater-than-or-equal':
+                return i18n.greaterThanOrEqual;
+            case 'less-than':
+                return i18n.lessThan;
+            case 'less-than-or-equal':
+                return i18n.lessThanOrEqual;
+            case 'between':
+                return i18n.between;
+            case 'in':
+                return i18n.in;
+            case 'not-in':
+                return i18n.notIn;
+            case 'empty':
+                return i18n.empty;
+            case 'not-empty':
+                return i18n.notEmpty;
+        }
+    }
+    /** @private Resolves one ICU message from the filter translation slice. */
+    _resolveMessage(key, params) {
+        return this._resolver.resolve(this._i18n(), key, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvFilter, isStandalone: true, selector: "mlv-filter", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, queryRemovable: { classPropertyName: "queryRemovable", publicName: "queryRemovable", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, allowMultipleConditions: { classPropertyName: "allowMultipleConditions", publicName: "allowMultipleConditions", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, operatorLabels: { classPropertyName: "operatorLabels", publicName: "operatorLabels", isSignal: true, isRequired: false, transformFunction: null }, defaultOperator: { classPropertyName: "defaultOperator", publicName: "defaultOperator", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, applyMode: { classPropertyName: "applyMode", publicName: "applyMode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, valueEditor: { classPropertyName: "valueEditor", publicName: "valueEditor", isSignal: true, isRequired: false, transformFunction: null }, conditions: { classPropertyName: "conditions", publicName: "conditions", isSignal: true, isRequired: false, transformFunction: null }, conditionStrategy: { classPropertyName: "conditionStrategy", publicName: "conditionStrategy", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { conditions: "conditionsChange", conditionStrategy: "conditionStrategyChange", opened: "openedChange", applied: "applied", cleared: "cleared" }, host: { properties: { "class.mlv-filter--applied": "hasValue()", "class.mlv-filter--invalid": "invalid()", "class.mlv-filter--open": "opened()", "class.mlv-filter--disabled": "disabled()", "class.mlv-filter--loading": "loading()", "class.mlv-filter--query": "appearance() === 'query'", "attr.aria-busy": "loading() || null" }, classAttribute: "mlv-filter" }, providers: [MlvSelectionService], queries: [{ propertyName: "_contentValueEditor", first: true, predicate: MlvFilterValueEditorDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_conditionInputs", predicate: MlvInput, descendants: true, isSignal: true }, { propertyName: "_valueCells", predicate: ["valueCell"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"mlv-filter__control\" role=\"group\" [attr.aria-label]=\"label()\">\n  <button\n    #trigger\n    mlvButton\n    type=\"button\"\n    variant=\"secondary\"\n    class=\"mlv-filter__trigger\"\n    [class.mlv-filter__trigger--applied]=\"hasValue()\"\n    [mlvPopupTrigger]=\"filterPopup\"\n    [ariaHasPopup]=\"'dialog'\"\n    [disabled]=\"_editorDisabled()\"\n    [loading]=\"loading()\"\n    [attr.aria-controls]=\"_panelId\"\n    [attr.aria-label]=\"_triggerAriaLabel()\"\n    [attr.title]=\"appearance() === 'query' && hasValue() ? _querySentence() : null\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    <span\n      class=\"mlv-filter__summary\"\n      [class.mlv-filter__summary--query]=\"appearance() === 'query'\"\n    >\n      @if (appearance() === 'query') {\n      <span class=\"mlv-filter__sentence\">{{ _querySentence() }}</span>\n      } @else { @if (hasValue()) {\n      <span class=\"mlv-filter__label\">{{ label() }}:</span>\n      <strong class=\"mlv-filter__value\">{{ primaryValue() }}</strong>\n      @if (additionalValueCount() > 0) {\n      <span class=\"mlv-filter__more\">{{ _moreValuesLabel() }}</span>\n      } } @else {\n      <span class=\"mlv-filter__label\">{{ label() }}</span>\n      } }\n    </span>\n    @if (appearance() === 'field') {\n    <svg\n      mlvButtonIcon\n      lucideChevronDown\n      [size]=\"14\"\n      aria-hidden=\"true\"\n      class=\"mlv-filter__chevron\"\n    ></svg>\n    }\n  </button>\n\n  @if (_showsClearAction()) {\n  <button\n    mlvButton\n    type=\"button\"\n    variant=\"secondary\"\n    shape=\"square\"\n    class=\"mlv-filter__clear\"\n    [disabled]=\"disabled() || loading()\"\n    [attr.aria-label]=\"_clearAriaLabel()\"\n    (click)=\"_clear($event)\"\n  >\n    <svg mlvButtonIcon lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n  </button>\n  }\n</div>\n\n<mlv-popup\n  #filterPopup\n  [(opened)]=\"opened\"\n  [position]=\"['bottom-start', 'top-start']\"\n  [hasShadow]=\"true\"\n  panelRole=\"dialog\"\n  [ariaLabel]=\"_triggerAriaLabel()\"\n  minWidth=\"14rem\"\n  maxWidth=\"28rem\"\n  (afterOpened)=\"_onOpened()\"\n  (afterClosed)=\"_onClosed()\"\n>\n  <ng-template mlvPopupContent>\n    <div class=\"mlv-filter__panel\" [id]=\"_panelId\">\n      @if (_usesOptions()) {\n      <mlv-dropdown-panel\n        class=\"mlv-filter__options\"\n        [ariaLabel]=\"label()\"\n        [maxHeight]=\"_optionsMaxHeight\"\n        [options]=\"_panelOptions()\"\n        [multiple]=\"multiple()\"\n        [selectedValues]=\"_selectedValues()\"\n        (valueChange)=\"_onOptionValuesChange($event)\"\n      >\n        <span class=\"mlv-filter__empty\">{{ _i18n().selectValue }}</span>\n      </mlv-dropdown-panel>\n      } @else {\n      <div class=\"mlv-filter__conditions\">\n        @if (_draft().length > 1) {\n        <mlv-select\n          class=\"mlv-filter__strategy\"\n          [options]=\"_strategies\"\n          [toOption]=\"_strategyTransform\"\n          [value]=\"_strategy()\"\n          [ariaLabel]=\"label()\"\n          [disabled]=\"_editorDisabled()\"\n          mobileMode=\"off\"\n          (valueChange)=\"_setStrategy($any($event))\"\n        />\n        } @for ( condition of _draft(); track condition.id || $index; let index\n        = $index ) {\n        <div class=\"mlv-filter__condition\">\n          <mlv-select\n            class=\"mlv-filter__operator\"\n            [options]=\"operators()\"\n            [toOption]=\"_operatorTransform\"\n            [value]=\"condition.operator\"\n            [ariaLabel]=\"label() + ' ' + (index + 1)\"\n            [disabled]=\"_editorDisabled()\"\n            mobileMode=\"off\"\n            (valueChange)=\"_setOperator(index, $any($event))\"\n          />\n\n          @if ( condition.operator !== 'empty' && condition.operator !==\n          'not-empty' ) {\n          <div class=\"mlv-filter__value-cell\" #valueCell>\n            @if (_valueEditorTemplate(); as editorTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"editorTemplate\"\n              [ngTemplateOutletContext]=\"_valueEditorContext(condition, index)\"\n            />\n            } @else { @if (condition.operator === 'between') {\n            <div class=\"mlv-filter__range\">\n              <mlv-input\n                class=\"mlv-filter__input\"\n                [type]=\"_resolvedEditor() === 'number' ? 'number' : 'text'\"\n                [value]=\"$any(_conditionRangeValue(condition, 0))\"\n                [placeholder]=\"_resolvedPlaceholder()\"\n                [ariaLabel]=\"label() + ' ' + (index + 1) + ' 1'\"\n                [disabled]=\"_editorDisabled()\"\n                (valueChange)=\"_setConditionRangeValue(index, 0, $event)\"\n                (keydown.enter)=\"applyMode() === 'explicit' && _apply()\"\n              />\n              <span class=\"mlv-filter__range-separator\" aria-hidden=\"true\"\n                >\u2013</span\n              >\n              <mlv-input\n                class=\"mlv-filter__input\"\n                [type]=\"_resolvedEditor() === 'number' ? 'number' : 'text'\"\n                [value]=\"$any(_conditionRangeValue(condition, 1))\"\n                [placeholder]=\"_resolvedPlaceholder()\"\n                [ariaLabel]=\"label() + ' ' + (index + 1) + ' 2'\"\n                [disabled]=\"_editorDisabled()\"\n                (valueChange)=\"_setConditionRangeValue(index, 1, $event)\"\n                (keydown.enter)=\"applyMode() === 'explicit' && _apply()\"\n              />\n            </div>\n            } @else {\n            <mlv-input\n              class=\"mlv-filter__input\"\n              [type]=\"_resolvedEditor() === 'number' ? 'number' : 'text'\"\n              [value]=\"$any(condition.value)\"\n              [placeholder]=\"_resolvedPlaceholder()\"\n              [ariaLabel]=\"label() + ' ' + (index + 1)\"\n              [disabled]=\"_editorDisabled()\"\n              (valueChange)=\"_setConditionValue(index, $event)\"\n              (keydown.enter)=\"applyMode() === 'explicit' && _apply()\"\n            />\n            } }\n          </div>\n          } @if (allowMultipleConditions() && _draft().length > 1) {\n          <button\n            mlvButton\n            type=\"button\"\n            shape=\"square\"\n            variant=\"transparent\"\n            class=\"mlv-filter__remove-condition\"\n            [disabled]=\"_editorDisabled()\"\n            [attr.aria-label]=\"_i18n().removeCondition\"\n            (click)=\"_removeCondition(index)\"\n          >\n            <svg\n              mlvButtonIcon\n              lucideTrash2\n              [size]=\"16\"\n              aria-hidden=\"true\"\n            ></svg>\n          </button>\n          }\n        </div>\n        } @if (allowMultipleConditions()) {\n        <button\n          mlvButton\n          type=\"button\"\n          variant=\"transparent\"\n          class=\"mlv-filter__add-condition\"\n          [disabled]=\"_editorDisabled()\"\n          (click)=\"_addCondition()\"\n        >\n          <svg mlvButtonIcon lucidePlus [size]=\"16\" aria-hidden=\"true\"></svg>\n          {{ _i18n().addCondition }}\n        </button>\n        }\n      </div>\n      } @if (_draft().length > 0 || applyMode() === 'explicit') {\n      <mlv-toolbar class=\"mlv-filter__panel-footer\">\n        @if (_draft().length > 0) {\n        <a\n          mlvLink\n          class=\"mlv-filter__panel-clear\"\n          [disabled]=\"_editorDisabled()\"\n          (mlvClick)=\"_clearDraft()\"\n          >{{ _i18n().clear }}</a\n        >\n        <mlv-spacer />\n        } @if ((applyMode() === 'explicit')) {\n        <button\n          mlvButton\n          type=\"button\"\n          mlvDensity=\"compact\"\n          variant=\"transparent\"\n          (click)=\"_cancel()\"\n        >\n          {{ _i18n().cancel }}\n        </button>\n        <button\n          mlvButton\n          type=\"button\"\n          mlvDensity=\"compact\"\n          [disabled]=\"_editorDisabled()\"\n          (click)=\"_apply()\"\n        >\n          {{ _i18n().apply }}\n        </button>\n        }\n      </mlv-toolbar>\n      }\n    </div>\n  </ng-template>\n</mlv-popup>\n", styles: ["@layer mlv.components{.mlv-filter{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-filter *{box-sizing:border-box}.mlv-filter,.mlv-filter__control{display:inline-flex;min-width:0;max-width:100%}.mlv-filter__trigger{min-width:0;max-width:100%;justify-content:space-between}.mlv-filter__trigger--applied{border-start-end-radius:0;border-end-end-radius:0}.mlv-filter__clear{flex:none;margin-inline-start:-.0625rem;border-start-start-radius:0;border-end-start-radius:0}.mlv-filter__summary{display:inline-flex;align-items:baseline;min-width:0;gap:var(--mlv-spacing-1);overflow:hidden}.mlv-button__text>.mlv-filter__summary{flex-shrink:1}.mlv-filter__summary--query,.mlv-filter__sentence{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mlv-filter__label,.mlv-filter__more{flex:none;font-weight:var(--mlv-typography-body-m-weight)}.mlv-filter__value{min-width:0;overflow:hidden;color:var(--mlv-text-primary);font-weight:600;text-overflow:ellipsis;white-space:nowrap}.mlv-filter__chevron{flex:none;transition-property:transform;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-out)}.mlv-filter--open .mlv-filter__chevron{transform:rotate(180deg)}.mlv-filter--invalid .mlv-filter__trigger{--mlv-btn-box-shadow: inset 0 0 0 .0625rem var(--mlv-border-error)}.mlv-filter--query .mlv-filter__trigger{--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs);max-width:18rem;border-start-end-radius:var(--mlv-radius-m);border-end-end-radius:var(--mlv-radius-m)}.mlv-filter--query .mlv-filter__trigger--applied{border-start-end-radius:0;border-end-end-radius:0}.mlv-filter--query .mlv-filter__clear{--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs)}.mlv-filter__panel{display:flex;width:min(26rem,100vw - 2rem);max-width:100%;flex-direction:column;color:var(--mlv-text-primary)}.mlv-filter__panel-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-2-5) var(--mlv-spacing-3)}.mlv-filter__panel-footer{justify-content:flex-end;border-top:.0625rem solid var(--mlv-border-subtle)}.mlv-filter__panel-clear{--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs)}.mlv-filter__options{min-width:0}.mlv-filter__empty{display:block;padding:var(--mlv-spacing-3);color:var(--mlv-text-secondary);text-align:center}.mlv-filter__conditions{display:flex;flex-direction:column;gap:var(--mlv-spacing-2-5);padding:var(--mlv-spacing-3)}.mlv-filter__condition{display:grid;grid-template-columns:minmax(8rem,.8fr) minmax(10rem,1.2fr) auto;align-items:start;gap:var(--mlv-spacing-2)}.mlv-filter__operator,.mlv-filter__input,.mlv-filter__strategy,.mlv-filter__range,.mlv-filter__value-cell{min-width:0}.mlv-filter__range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--mlv-spacing-1-5)}.mlv-filter__range-separator{color:var(--mlv-text-secondary)}.mlv-filter__remove-condition{margin-top:var(--mlv-spacing-0-5)}.mlv-filter__add-condition{align-self:flex-start}@media(max-width:30rem){.mlv-filter__condition{grid-template-columns:1fr auto}.mlv-filter__operator,.mlv-filter__value-cell{grid-column:1}.mlv-filter__remove-condition{grid-column:2;grid-row:1/span 2}}@media(prefers-reduced-motion:reduce){.mlv-filter,.mlv-filter *,.mlv-filter:before,.mlv-filter:after,[class^=mlv-filter__],[class*=\" mlv-filter__\"],[class^=mlv-filter--],[class*=\" mlv-filter--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "directive", type: MlvButtonIcon, selector: "[mlvButtonIcon]" }, { kind: "component", type: MlvDropdownPanel, selector: "mlv-dropdown-panel", inputs: ["scrollMode", "minHeight", "maxHeight", "options", "multiple", "selectedValues", "itemTemplate", "focusMode", "activeIndex", "listboxId", "ariaLabel", "highlightQuery", "loading", "loadingText", "loadingMore", "hasMore", "infiniteScrollThreshold"], outputs: ["loadMore", "valueChange"] }, { kind: "component", type: MlvInput, selector: "mlv-input", inputs: ["type", "placeholder", "autocomplete", "inputMode", "maxLength", "minLength", "pattern", "name", "autofocus", "min", "max", "step", "bare", "projectControl", "role", "ariaExpanded", "ariaHasPopup", "ariaAutocomplete", "ariaControls", "ariaActiveDescendant", "ariaDescribedBy", "value"], outputs: ["valueChange", "inputFocus", "inputBlur"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "component", type: MlvSelect, selector: "mlv-select", inputs: ["value", "options", "searchFn", "searchDebounce", "multiple", "native", "placeholder", "toOption", "compareWith", "searchable", "searchPlaceholder", "matcher", "mobileMode", "mlvDensity", "mobileTitle"], outputs: ["valueChange"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: LucideTrash2, selector: "svg[lucideTrash2]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: MlvToolbar, selector: "mlv-toolbar", inputs: ["gap", "equalSize"] }, { kind: "component", type: MlvSpacer, selector: "mlv-spacer" }, { kind: "component", type: MlvLink, selector: "a[mlvLink]", inputs: ["variant", "disabled"] }, { kind: "directive", type: MlvClick, selector: "[mlvClick]", inputs: ["disabled", "hostRole"], outputs: ["mlvClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-filter', imports: [
+                        NgTemplateOutlet,
+                        MlvButton,
+                        MlvButtonIcon,
+                        MlvDropdownPanel,
+                        MlvInput,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupTrigger,
+                        MlvSelect,
+                        LucideChevronDown,
+                        LucidePlus,
+                        LucideTrash2,
+                        LucideX,
+                        MlvToolbar,
+                        MlvSpacer,
+                        MlvLink,
+                        MlvClick,
+                    ], providers: [MlvSelectionService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-filter',
+                        '[class.mlv-filter--applied]': 'hasValue()',
+                        '[class.mlv-filter--invalid]': 'invalid()',
+                        '[class.mlv-filter--open]': 'opened()',
+                        '[class.mlv-filter--disabled]': 'disabled()',
+                        '[class.mlv-filter--loading]': 'loading()',
+                        '[class.mlv-filter--query]': "appearance() === 'query'",
+                        '[attr.aria-busy]': 'loading() || null',
+                    }, template: "<div class=\"mlv-filter__control\" role=\"group\" [attr.aria-label]=\"label()\">\n  <button\n    #trigger\n    mlvButton\n    type=\"button\"\n    variant=\"secondary\"\n    class=\"mlv-filter__trigger\"\n    [class.mlv-filter__trigger--applied]=\"hasValue()\"\n    [mlvPopupTrigger]=\"filterPopup\"\n    [ariaHasPopup]=\"'dialog'\"\n    [disabled]=\"_editorDisabled()\"\n    [loading]=\"loading()\"\n    [attr.aria-controls]=\"_panelId\"\n    [attr.aria-label]=\"_triggerAriaLabel()\"\n    [attr.title]=\"appearance() === 'query' && hasValue() ? _querySentence() : null\"\n    [attr.aria-invalid]=\"invalid() || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || null\"\n  >\n    <span\n      class=\"mlv-filter__summary\"\n      [class.mlv-filter__summary--query]=\"appearance() === 'query'\"\n    >\n      @if (appearance() === 'query') {\n      <span class=\"mlv-filter__sentence\">{{ _querySentence() }}</span>\n      } @else { @if (hasValue()) {\n      <span class=\"mlv-filter__label\">{{ label() }}:</span>\n      <strong class=\"mlv-filter__value\">{{ primaryValue() }}</strong>\n      @if (additionalValueCount() > 0) {\n      <span class=\"mlv-filter__more\">{{ _moreValuesLabel() }}</span>\n      } } @else {\n      <span class=\"mlv-filter__label\">{{ label() }}</span>\n      } }\n    </span>\n    @if (appearance() === 'field') {\n    <svg\n      mlvButtonIcon\n      lucideChevronDown\n      [size]=\"14\"\n      aria-hidden=\"true\"\n      class=\"mlv-filter__chevron\"\n    ></svg>\n    }\n  </button>\n\n  @if (_showsClearAction()) {\n  <button\n    mlvButton\n    type=\"button\"\n    variant=\"secondary\"\n    shape=\"square\"\n    class=\"mlv-filter__clear\"\n    [disabled]=\"disabled() || loading()\"\n    [attr.aria-label]=\"_clearAriaLabel()\"\n    (click)=\"_clear($event)\"\n  >\n    <svg mlvButtonIcon lucideX [size]=\"14\" aria-hidden=\"true\"></svg>\n  </button>\n  }\n</div>\n\n<mlv-popup\n  #filterPopup\n  [(opened)]=\"opened\"\n  [position]=\"['bottom-start', 'top-start']\"\n  [hasShadow]=\"true\"\n  panelRole=\"dialog\"\n  [ariaLabel]=\"_triggerAriaLabel()\"\n  minWidth=\"14rem\"\n  maxWidth=\"28rem\"\n  (afterOpened)=\"_onOpened()\"\n  (afterClosed)=\"_onClosed()\"\n>\n  <ng-template mlvPopupContent>\n    <div class=\"mlv-filter__panel\" [id]=\"_panelId\">\n      @if (_usesOptions()) {\n      <mlv-dropdown-panel\n        class=\"mlv-filter__options\"\n        [ariaLabel]=\"label()\"\n        [maxHeight]=\"_optionsMaxHeight\"\n        [options]=\"_panelOptions()\"\n        [multiple]=\"multiple()\"\n        [selectedValues]=\"_selectedValues()\"\n        (valueChange)=\"_onOptionValuesChange($event)\"\n      >\n        <span class=\"mlv-filter__empty\">{{ _i18n().selectValue }}</span>\n      </mlv-dropdown-panel>\n      } @else {\n      <div class=\"mlv-filter__conditions\">\n        @if (_draft().length > 1) {\n        <mlv-select\n          class=\"mlv-filter__strategy\"\n          [options]=\"_strategies\"\n          [toOption]=\"_strategyTransform\"\n          [value]=\"_strategy()\"\n          [ariaLabel]=\"label()\"\n          [disabled]=\"_editorDisabled()\"\n          mobileMode=\"off\"\n          (valueChange)=\"_setStrategy($any($event))\"\n        />\n        } @for ( condition of _draft(); track condition.id || $index; let index\n        = $index ) {\n        <div class=\"mlv-filter__condition\">\n          <mlv-select\n            class=\"mlv-filter__operator\"\n            [options]=\"operators()\"\n            [toOption]=\"_operatorTransform\"\n            [value]=\"condition.operator\"\n            [ariaLabel]=\"label() + ' ' + (index + 1)\"\n            [disabled]=\"_editorDisabled()\"\n            mobileMode=\"off\"\n            (valueChange)=\"_setOperator(index, $any($event))\"\n          />\n\n          @if ( condition.operator !== 'empty' && condition.operator !==\n          'not-empty' ) {\n          <div class=\"mlv-filter__value-cell\" #valueCell>\n            @if (_valueEditorTemplate(); as editorTemplate) {\n            <ng-container\n              [ngTemplateOutlet]=\"editorTemplate\"\n              [ngTemplateOutletContext]=\"_valueEditorContext(condition, index)\"\n            />\n            } @else { @if (condition.operator === 'between') {\n            <div class=\"mlv-filter__range\">\n              <mlv-input\n                class=\"mlv-filter__input\"\n                [type]=\"_resolvedEditor() === 'number' ? 'number' : 'text'\"\n                [value]=\"$any(_conditionRangeValue(condition, 0))\"\n                [placeholder]=\"_resolvedPlaceholder()\"\n                [ariaLabel]=\"label() + ' ' + (index + 1) + ' 1'\"\n                [disabled]=\"_editorDisabled()\"\n                (valueChange)=\"_setConditionRangeValue(index, 0, $event)\"\n                (keydown.enter)=\"applyMode() === 'explicit' && _apply()\"\n              />\n              <span class=\"mlv-filter__range-separator\" aria-hidden=\"true\"\n                >\u2013</span\n              >\n              <mlv-input\n                class=\"mlv-filter__input\"\n                [type]=\"_resolvedEditor() === 'number' ? 'number' : 'text'\"\n                [value]=\"$any(_conditionRangeValue(condition, 1))\"\n                [placeholder]=\"_resolvedPlaceholder()\"\n                [ariaLabel]=\"label() + ' ' + (index + 1) + ' 2'\"\n                [disabled]=\"_editorDisabled()\"\n                (valueChange)=\"_setConditionRangeValue(index, 1, $event)\"\n                (keydown.enter)=\"applyMode() === 'explicit' && _apply()\"\n              />\n            </div>\n            } @else {\n            <mlv-input\n              class=\"mlv-filter__input\"\n              [type]=\"_resolvedEditor() === 'number' ? 'number' : 'text'\"\n              [value]=\"$any(condition.value)\"\n              [placeholder]=\"_resolvedPlaceholder()\"\n              [ariaLabel]=\"label() + ' ' + (index + 1)\"\n              [disabled]=\"_editorDisabled()\"\n              (valueChange)=\"_setConditionValue(index, $event)\"\n              (keydown.enter)=\"applyMode() === 'explicit' && _apply()\"\n            />\n            } }\n          </div>\n          } @if (allowMultipleConditions() && _draft().length > 1) {\n          <button\n            mlvButton\n            type=\"button\"\n            shape=\"square\"\n            variant=\"transparent\"\n            class=\"mlv-filter__remove-condition\"\n            [disabled]=\"_editorDisabled()\"\n            [attr.aria-label]=\"_i18n().removeCondition\"\n            (click)=\"_removeCondition(index)\"\n          >\n            <svg\n              mlvButtonIcon\n              lucideTrash2\n              [size]=\"16\"\n              aria-hidden=\"true\"\n            ></svg>\n          </button>\n          }\n        </div>\n        } @if (allowMultipleConditions()) {\n        <button\n          mlvButton\n          type=\"button\"\n          variant=\"transparent\"\n          class=\"mlv-filter__add-condition\"\n          [disabled]=\"_editorDisabled()\"\n          (click)=\"_addCondition()\"\n        >\n          <svg mlvButtonIcon lucidePlus [size]=\"16\" aria-hidden=\"true\"></svg>\n          {{ _i18n().addCondition }}\n        </button>\n        }\n      </div>\n      } @if (_draft().length > 0 || applyMode() === 'explicit') {\n      <mlv-toolbar class=\"mlv-filter__panel-footer\">\n        @if (_draft().length > 0) {\n        <a\n          mlvLink\n          class=\"mlv-filter__panel-clear\"\n          [disabled]=\"_editorDisabled()\"\n          (mlvClick)=\"_clearDraft()\"\n          >{{ _i18n().clear }}</a\n        >\n        <mlv-spacer />\n        } @if ((applyMode() === 'explicit')) {\n        <button\n          mlvButton\n          type=\"button\"\n          mlvDensity=\"compact\"\n          variant=\"transparent\"\n          (click)=\"_cancel()\"\n        >\n          {{ _i18n().cancel }}\n        </button>\n        <button\n          mlvButton\n          type=\"button\"\n          mlvDensity=\"compact\"\n          [disabled]=\"_editorDisabled()\"\n          (click)=\"_apply()\"\n        >\n          {{ _i18n().apply }}\n        </button>\n        }\n      </mlv-toolbar>\n      }\n    </div>\n  </ng-template>\n</mlv-popup>\n", styles: ["@layer mlv.components{.mlv-filter{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-filter *{box-sizing:border-box}.mlv-filter,.mlv-filter__control{display:inline-flex;min-width:0;max-width:100%}.mlv-filter__trigger{min-width:0;max-width:100%;justify-content:space-between}.mlv-filter__trigger--applied{border-start-end-radius:0;border-end-end-radius:0}.mlv-filter__clear{flex:none;margin-inline-start:-.0625rem;border-start-start-radius:0;border-end-start-radius:0}.mlv-filter__summary{display:inline-flex;align-items:baseline;min-width:0;gap:var(--mlv-spacing-1);overflow:hidden}.mlv-button__text>.mlv-filter__summary{flex-shrink:1}.mlv-filter__summary--query,.mlv-filter__sentence{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mlv-filter__label,.mlv-filter__more{flex:none;font-weight:var(--mlv-typography-body-m-weight)}.mlv-filter__value{min-width:0;overflow:hidden;color:var(--mlv-text-primary);font-weight:600;text-overflow:ellipsis;white-space:nowrap}.mlv-filter__chevron{flex:none;transition-property:transform;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-out)}.mlv-filter--open .mlv-filter__chevron{transform:rotate(180deg)}.mlv-filter--invalid .mlv-filter__trigger{--mlv-btn-box-shadow: inset 0 0 0 .0625rem var(--mlv-border-error)}.mlv-filter--query .mlv-filter__trigger{--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs);max-width:18rem;border-start-end-radius:var(--mlv-radius-m);border-end-end-radius:var(--mlv-radius-m)}.mlv-filter--query .mlv-filter__trigger--applied{border-start-end-radius:0;border-end-end-radius:0}.mlv-filter--query .mlv-filter__clear{--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs)}.mlv-filter__panel{display:flex;width:min(26rem,100vw - 2rem);max-width:100%;flex-direction:column;color:var(--mlv-text-primary)}.mlv-filter__panel-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-2-5) var(--mlv-spacing-3)}.mlv-filter__panel-footer{justify-content:flex-end;border-top:.0625rem solid var(--mlv-border-subtle)}.mlv-filter__panel-clear{--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs)}.mlv-filter__options{min-width:0}.mlv-filter__empty{display:block;padding:var(--mlv-spacing-3);color:var(--mlv-text-secondary);text-align:center}.mlv-filter__conditions{display:flex;flex-direction:column;gap:var(--mlv-spacing-2-5);padding:var(--mlv-spacing-3)}.mlv-filter__condition{display:grid;grid-template-columns:minmax(8rem,.8fr) minmax(10rem,1.2fr) auto;align-items:start;gap:var(--mlv-spacing-2)}.mlv-filter__operator,.mlv-filter__input,.mlv-filter__strategy,.mlv-filter__range,.mlv-filter__value-cell{min-width:0}.mlv-filter__range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--mlv-spacing-1-5)}.mlv-filter__range-separator{color:var(--mlv-text-secondary)}.mlv-filter__remove-condition{margin-top:var(--mlv-spacing-0-5)}.mlv-filter__add-condition{align-self:flex-start}@media(max-width:30rem){.mlv-filter__condition{grid-template-columns:1fr auto}.mlv-filter__operator,.mlv-filter__value-cell{grid-column:1}.mlv-filter__remove-condition{grid-column:2;grid-row:1/span 2}}@media(prefers-reduced-motion:reduce){.mlv-filter,.mlv-filter *,.mlv-filter:before,.mlv-filter:after,[class^=mlv-filter__],[class*=\" mlv-filter__\"],[class^=mlv-filter--],[class*=\" mlv-filter--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], queryRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryRemovable", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowMultipleConditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowMultipleConditions", required: false }] }], operators: [{ type: i0.Input, args: [{ isSignal: true, alias: "operators", required: false }] }], operatorLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "operatorLabels", required: false }] }], defaultOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOperator", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], applyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyMode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], valueEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueEditor", required: false }] }], conditions: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditions", required: false }] }, { type: i0.Output, args: ["conditionsChange"] }], conditionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionStrategy", required: false }] }, { type: i0.Output, args: ["conditionStrategyChange"] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], applied: [{ type: i0.Output, args: ["applied"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], _trigger: [{ type: i0.ViewChild, args: ['trigger', { ...{
+                            read: (ElementRef),
+                        }, isSignal: true }] }], _conditionInputs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MlvInput), { isSignal: true }] }], _valueCells: [{ type: i0.ViewChildren, args: ['valueCell', { ...{
+                            read: (ElementRef),
+                        }, isSignal: true }] }], _contentValueEditor: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvFilterValueEditorDef), { isSignal: true }] }] } });
+
+/** Returns whether an operator-complete condition represents an applied value. */
+function isConditionMeaningful(condition) {
+    if (condition.operator === 'empty' || condition.operator === 'not-empty') {
+        return true;
+    }
+    if (condition.operator === 'between' && Array.isArray(condition.value)) {
+        return (condition.value.length === 2 &&
+            condition.value.every((value) => value !== null && value !== undefined && value !== ''));
+    }
+    if (Array.isArray(condition.value))
+        return condition.value.length > 0;
+    return (condition.value !== null &&
+        condition.value !== undefined &&
+        condition.value !== '');
+}
+/** Deeply copies a supported structured filter value. */
+function cloneFilterValue(value) {
+    if (typeof structuredClone === 'function') {
+        try {
+            return structuredClone(value);
+        }
+        catch {
+            // Fall through for values outside the structured-clone algorithm.
+        }
+    }
+    if (Array.isArray(value)) {
+        return value.map((item) => cloneFilterValue(item));
+    }
+    if (value instanceof Date)
+        return new Date(value.getTime());
+    if (value instanceof Map) {
+        return new Map([...value].map(([key, item]) => [
+            cloneFilterValue(key),
+            cloneFilterValue(item),
+        ]));
+    }
+    if (value instanceof Set) {
+        return new Set([...value].map((item) => cloneFilterValue(item)));
+    }
+    if (value !== null && typeof value === 'object') {
+        return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, cloneFilterValue(item)]));
+    }
+    return value;
+}
+/** Copies field states and nested operands for immutable public snapshots. */
+function cloneFieldStates(states) {
+    return states.map((state) => ({
+        key: state.key,
+        strategy: state.strategy,
+        conditions: state.conditions.map((condition) => ({
+            ...condition,
+            value: cloneFilterValue(condition.value),
+        })),
+    }));
+}
+/** Whether two ordered string collections contain the same values. */
+function stringArraysEqual(first, second) {
+    return (first.length === second.length &&
+        first.every((value, index) => value === second[index]));
+}
+/** Metadata-driven query header for search, field filters, and execution. */
+class MlvSmartFilterBar {
+    /** @protected Reactive translated strings for filters. */
+    _i18n = inject(MLV_FILTER_I18N);
+    /** @private ICU resolver for parameterized translated strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /** @private Injector required by post-overlay render focus restoration. */
+    _injector = inject(Injector);
+    /** Metadata for every available filter field. */
+    definitions = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "definitions" }] : /* istanbul ignore next */ []));
+    /** Structured filter state. */
+    filters = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []));
+    /** Whether the bar renders its established toolbar or natural-language query row. */
+    appearance = input('classic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /** Keys currently shown in the filter row. */
+    visibleKeys = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleKeys" }] : /* istanbul ignore next */ []));
+    /** Global search query submitted with structured filters. */
+    searchValue = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+    /** Commit behavior for the global search field. */
+    searchTrigger = input('live', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTrigger" }] : /* istanbul ignore next */ []));
+    /** Debounce passed to the global live-search field. */
+    searchDebounce = input(200, { ...(ngDevMode ? { debugName: "searchDebounce" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(0, numberAttribute(value, 200)) });
+    /** Apply behavior used by each field filter editor. */
+    filterApplyMode = input('live', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterApplyMode" }] : /* istanbul ignore next */ []));
+    /** Whether live search/filter commits should execute immediately. */
+    autoExecute = input(false, { ...(ngDevMode ? { debugName: "autoExecute" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether structured fields are expanded beneath the query actions. */
+    filtersVisible = model(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filtersVisible" }] : /* istanbul ignore next */ []));
+    /** Whether the global search field is rendered. */
+    showSearch = input(true, { ...(ngDevMode ? { debugName: "showSearch" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether query execution is in progress. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether every control in the bar is unavailable. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emitted with an immutable snapshot when the query executes. */
+    execute = output();
+    /** Emitted when consumers should refresh using the current query snapshot. */
+    refresh = output();
+    /** Emitted after search, filter values, and visibility return to defaults. */
+    resetCompleted = output();
+    /** @protected Search term used only inside the available-filters manager. */
+    _availableSearch = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_availableSearch" }] : /* istanbul ignore next */ []));
+    /** @private Optional blank fields deliberately selected through query Add filter. */
+    _queryAddedKeys = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_queryAddedKeys" }] : /* istanbul ignore next */ []));
+    /** @private Added key awaiting focus after its popup has detached. */
+    _pendingAddedKey = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pendingAddedKey" }] : /* istanbul ignore next */ []));
+    /** @private Staged field visibility while the manager dialog is open. */
+    _draftVisibleKeys = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_draftVisibleKeys" }] : /* istanbul ignore next */ []));
+    /** @protected Id linking the filter visibility trigger to its region. */
+    _filtersId = mlvNextId('mlv-smart-filter-bar-filters');
+    /** @protected Id linking the manager trigger to its dialog content. */
+    _managerId = mlvNextId('mlv-smart-filter-bar-manager');
+    /** @protected Id for the validation summary announced after a blocked query. */
+    _validationSummaryId = mlvNextId('mlv-smart-filter-bar-validation');
+    /** @private Whether metadata defaults have been applied to a usable definition set. */
+    _definitionsInitialized = false;
+    /** @private Previous metadata keys used to distinguish new defaults from hidden fields. */
+    _knownDefinitionKeys = new Set();
+    /** @private Whether a query attempt should expose required-field errors. */
+    _validationAttempted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_validationAttempted" }] : /* istanbul ignore next */ []));
+    /** @private Coalesces paired condition/strategy model changes into one execution. */
+    _autoExecuteQueued = false;
+    /** @private Manager panel used to focus its search field after opening. */
+    _managerPanel = viewChild('managerPanel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_managerPanel" }] : /* istanbul ignore next */ []));
+    /** @private Manager trigger restored after keyboard and action closes. */
+    _managerButton = viewChild('managerButton', { ...(ngDevMode ? { debugName: "_managerButton" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    /** @private Query Add filter popup panel focused after it opens. */
+    _addPanel = viewChild('addPanel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_addPanel" }] : /* istanbul ignore next */ []));
+    /** @private Query Add filter trigger used when the pending field disappears. */
+    _addButton = viewChild('addButton', { ...(ngDevMode ? { debugName: "_addButton" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    /** @private Rendered filter hosts used to focus the first invalid field. */
+    _filterHosts = viewChildren(MlvFilter, { ...(ngDevMode ? { debugName: "_filterHosts" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** @private Projected custom value-editor templates, matched to definitions by key. */
+    _valueEditors = contentChildren(MlvFilterValueEditorDef, { ...(ngDevMode ? { debugName: "_valueEditors" } : /* istanbul ignore next */ {}), descendants: true });
+    /** Visible definitions in stable metadata order. */
+    visibleDefinitions = computed(() => {
+        const visible = new Set(this.visibleKeys());
+        return this.definitions().filter((definition) => visible.has(definition.key));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleDefinitions" }] : /* istanbul ignore next */ []));
+    /** @protected Query chips represent required, meaningful, or deliberately added blank fields. */
+    _queryDefinitions = computed(() => {
+        const active = new Set(this.filters()
+            .filter((state) => state.conditions.some(isConditionMeaningful))
+            .map((state) => state.key));
+        const added = new Set(this._queryAddedKeys());
+        return this.visibleDefinitions().filter((definition) => definition.required ||
+            active.has(definition.key) ||
+            added.has(definition.key));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_queryDefinitions" }] : /* istanbul ignore next */ []));
+    /** @protected Definitions that may be added without creating duplicate or disabled fields. */
+    _addableDefinitions = computed(() => {
+        const visible = new Set(this._queryDefinitions().map((definition) => definition.key));
+        const query = normalizeForMatch$1(this._availableSearch().trim());
+        return this.definitions().filter((definition) => !definition.disabled &&
+            !visible.has(definition.key) &&
+            (!query || normalizeForMatch$1(definition.label).includes(query)));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_addableDefinitions" }] : /* istanbul ignore next */ []));
+    /** Number of filter fields currently visible. */
+    visibleFilterCount = computed(() => this.visibleDefinitions().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleFilterCount" }] : /* istanbul ignore next */ []));
+    /** Number of fields with at least one applied condition. */
+    appliedFilterCount = computed(() => this.filters().filter((state) => state.conditions.some(isConditionMeaningful)).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appliedFilterCount" }] : /* istanbul ignore next */ []));
+    /** @protected Required definitions without an applied, meaningful condition. */
+    _missingRequiredDefinitions = computed(() => {
+        const states = new Map(this.filters().map((state) => [state.key, state]));
+        return this.definitions().filter((definition) => {
+            if (!definition.required)
+                return false;
+            return !states
+                .get(definition.key)
+                ?.conditions.some(isConditionMeaningful);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_missingRequiredDefinitions" }] : /* istanbul ignore next */ []));
+    /** @protected Whether required-field errors should currently be rendered. */
+    _showRequiredErrors = computed(() => this._validationAttempted() &&
+        this._missingRequiredDefinitions().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showRequiredErrors" }] : /* istanbul ignore next */ []));
+    /** @protected Whether search or any structured condition is active. */
+    _hasState = computed(() => this.searchValue().length > 0 || this.appliedFilterCount() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasState" }] : /* istanbul ignore next */ []));
+    /** @protected Definitions matching the available-filter search. */
+    _filteredDefinitions = computed(() => {
+        const query = normalizeForMatch$1(this._availableSearch().trim());
+        if (!query)
+            return this.definitions();
+        return this.definitions().filter((definition) => normalizeForMatch$1(definition.label).includes(query));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filteredDefinitions" }] : /* istanbul ignore next */ []));
+    /** @protected Parameterized label for the filter-management action. */
+    _filtersLabel = computed(() => this._resolveMessage('filters', { count: this.visibleFilterCount() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filtersLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Parameterized status for fields with applied values. */
+    _appliedFiltersLabel = computed(() => this._resolveMessage('filters', { count: this.appliedFilterCount() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_appliedFiltersLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Parameterized heading for the available-filter list. */
+    _availableFiltersLabel = computed(() => this._resolveMessage('availableFilters', {
+        count: this.definitions().length,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_availableFiltersLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Localized validation summary for all missing required fields. */
+    _requiredFiltersMessage = computed(() => this._resolveMessage('requiredFilters', {
+        count: this._missingRequiredDefinitions().length,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_requiredFiltersMessage" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const definitions = this.definitions();
+            if (definitions.length === 0 && !this._definitionsInitialized)
+                return;
+            const definitionKeys = definitions.map((definition) => definition.key);
+            const allowedKeys = new Set(definitionKeys);
+            const currentFilters = this.filters();
+            const queryAddedKeys = this._queryAddedKeys();
+            const stateByKey = new Map(currentFilters
+                .filter((state) => allowedKeys.has(state.key))
+                .map((state) => [state.key, state]));
+            const normalizedFilters = definitions.flatMap((definition) => {
+                const state = stateByKey.get(definition.key);
+                return state ? [state] : [];
+            });
+            if (normalizedFilters.length !== currentFilters.length ||
+                normalizedFilters.some((state, index) => state !== currentFilters[index])) {
+                this.filters.set(cloneFieldStates(normalizedFilters));
+            }
+            const activeKeys = new Set(normalizedFilters
+                .filter((state) => state.conditions.some(isConditionMeaningful))
+                .map((state) => state.key));
+            const currentVisible = this.visibleKeys();
+            const requestedVisible = new Set(currentVisible.filter((key) => allowedKeys.has(key)));
+            const initializeDefaults = !this._definitionsInitialized && currentVisible.length === 0;
+            for (const definition of definitions) {
+                const newlyAdded = !this._knownDefinitionKeys.has(definition.key);
+                if (definition.required ||
+                    activeKeys.has(definition.key) ||
+                    (definition.defaultVisible &&
+                        (initializeDefaults ||
+                            (this._definitionsInitialized && newlyAdded)))) {
+                    requestedVisible.add(definition.key);
+                }
+            }
+            const normalizedVisible = definitionKeys.filter((key) => requestedVisible.has(key));
+            if (!stringArraysEqual(normalizedVisible, currentVisible)) {
+                this.visibleKeys.set(normalizedVisible);
+            }
+            const normalizedQueryAddedKeys = queryAddedKeys.filter((key) => allowedKeys.has(key) && requestedVisible.has(key));
+            if (!stringArraysEqual(normalizedQueryAddedKeys, queryAddedKeys)) {
+                this._queryAddedKeys.set(normalizedQueryAddedKeys);
+            }
+            if (definitions.length > 0)
+                this._definitionsInitialized = true;
+            this._knownDefinitionKeys = allowedKeys;
+        });
+    }
+    /** Executes the current search and structured-filter snapshot. */
+    executeQuery() {
+        if (this.disabled() || this.loading())
+            return;
+        if (!this._validateRequiredFilters())
+            return;
+        this.execute.emit(this._payload());
+    }
+    /** Requests fresh results using the current query snapshot. */
+    refreshQuery() {
+        if (this.disabled() || this.loading())
+            return;
+        if (!this._validateRequiredFilters())
+            return;
+        this.refresh.emit(this._payload());
+    }
+    /** Clears search and conditions while retaining the user's visible fields. */
+    clear() {
+        if (this.disabled() || this.loading())
+            return;
+        this._validationAttempted.set(false);
+        this.searchValue.set('');
+        this.filters.set([]);
+        if (this.autoExecute())
+            this.executeQuery();
+    }
+    /** Restores search, conditions, and visible fields to metadata defaults. */
+    resetToDefaults() {
+        if (this.disabled() || this.loading())
+            return;
+        this._validationAttempted.set(false);
+        this.searchValue.set('');
+        this.filters.set([]);
+        this.visibleKeys.set(this._defaultVisibleKeys());
+        this._availableSearch.set('');
+        this.resetCompleted.emit();
+        if (this.autoExecute())
+            this.executeQuery();
+    }
+    /** @protected Updates search state and executes for submit or auto mode. */
+    _onSearch(query) {
+        this.searchValue.set(query);
+        if (this.searchTrigger() === 'submit' || this.autoExecute()) {
+            this.executeQuery();
+        }
+    }
+    /** @protected Executes a staged live-search value immediately from Enter. */
+    _onSearchEnter(event) {
+        if (!(event instanceof KeyboardEvent) ||
+            event.isComposing ||
+            this.searchTrigger() !== 'live' ||
+            this.autoExecute()) {
+            return;
+        }
+        event.preventDefault();
+        this.executeQuery();
+    }
+    /** @protected Updates the available-filter manager search. */
+    _onAvailableSearch(query) {
+        this._availableSearch.set(query);
+    }
+    /** @protected Focuses the searchable Add filter menu after its popup attaches. */
+    _onAddOpened() {
+        this._availableSearch.set('');
+        queueMicrotask(() => {
+            this._addPanel()
+                ?.nativeElement.querySelector('input')
+                ?.focus();
+        });
+    }
+    /** @protected Clears transient Add filter search after its popup closes. */
+    _onAddClosed() {
+        this._availableSearch.set('');
+        if (!this._pendingAddedKey())
+            return;
+        afterNextRender(() => {
+            const pendingKey = this._pendingAddedKey();
+            this._pendingAddedKey.set(undefined);
+            const index = this._queryDefinitions().findIndex((definition) => definition.key === pendingKey);
+            const host = this._filterHosts()[index]?.nativeElement;
+            const trigger = host?.querySelector('.mlv-filter__trigger');
+            const focusTarget = trigger ?? this._addButton()?.nativeElement;
+            focusTarget?.focus();
+        }, { injector: this._injector });
+    }
+    /** @protected Adds visibility only, then sends focus to the newly rendered field trigger. */
+    _addQueryFilter(definition, trigger) {
+        if (this.disabled() || this.loading() || definition.disabled)
+            return;
+        const requested = new Set(this.visibleKeys());
+        requested.add(definition.key);
+        this.visibleKeys.set(this.definitions()
+            .map((candidate) => candidate.key)
+            .filter((key) => requested.has(key)));
+        this._queryAddedKeys.update((keys) => keys.includes(definition.key) ? keys : [...keys, definition.key]);
+        this._pendingAddedKey.set(definition.key);
+        trigger.close();
+    }
+    /** @protected Removes an optional query field's state and visibility. */
+    _removeQueryFilter(definition) {
+        if (this.disabled() || this.loading())
+            return;
+        this._replaceFieldState({
+            key: definition.key,
+            conditions: [],
+            strategy: this._strategyFor(definition.key),
+        });
+        this._queryAddedKeys.update((keys) => keys.filter((key) => key !== definition.key));
+        if (!definition.required) {
+            this.visibleKeys.set(this.visibleKeys().filter((key) => key !== definition.key));
+        }
+    }
+    /** @protected Clears search and all optional query fields while retaining required visibility. */
+    _clearQuery() {
+        if (this.disabled() || this.loading())
+            return;
+        this._validationAttempted.set(false);
+        this.searchValue.set('');
+        this.filters.set([]);
+        this._queryAddedKeys.set([]);
+        this.visibleKeys.set(this.definitions()
+            .filter((definition) => definition.required)
+            .map((definition) => definition.key));
+        this._queueAutoExecute();
+    }
+    /** @protected Returns applied conditions for a definition key. */
+    _conditionsFor(key) {
+        return this.filters().find((state) => state.key === key)?.conditions ?? [];
+    }
+    /** @protected Resolves the value-editor template for one definition (exact key > key-less fallback > null). */
+    _valueEditorFor(definition) {
+        const editors = this._valueEditors();
+        const exact = editors.find((editor) => editor.mlvFilterValueEditor() === definition.key);
+        if (exact)
+            return exact.templateRef;
+        const fallback = editors.find((editor) => editor.mlvFilterValueEditor() === '');
+        return fallback?.templateRef ?? null;
+    }
+    /** @protected Returns the applied strategy for a definition key. */
+    _strategyFor(key) {
+        return (this.filters().find((state) => state.key === key)?.strategy ??
+            this.definitions().find((definition) => definition.key === key)
+                ?.conditionStrategy ??
+            'or');
+    }
+    /** @protected Whether a definition permits more than one free-form condition. */
+    _allowsMultipleConditions(definition) {
+        if (definition.allowMultipleConditions !== undefined) {
+            return definition.allowMultipleConditions;
+        }
+        return !(definition.editor === 'options' ||
+            (definition.editor === undefined && (definition.options?.length ?? 0) > 0));
+    }
+    /** @protected Operators for a definition with the neutral default fallback. */
+    _operatorsFor(definition) {
+        return (definition.operators ?? [
+            'contains',
+            'not-contains',
+            'equals',
+            'not-equals',
+        ]);
+    }
+    /** @protected Updates one field's conditions without disturbing other fields. */
+    _setConditions(definition, conditions) {
+        const state = this.filters().find((candidate) => candidate.key === definition.key);
+        this._replaceFieldState({
+            key: definition.key,
+            conditions,
+            strategy: state?.strategy ?? definition.conditionStrategy ?? 'or',
+        });
+    }
+    /** @protected Updates one field's condition-combination strategy. */
+    _setStrategy(definition, strategy) {
+        this._replaceFieldState({
+            key: definition.key,
+            conditions: this._conditionsFor(definition.key),
+            strategy,
+        });
+    }
+    /** @protected Whether a field key is currently visible. */
+    _isVisible(key) {
+        return this._draftVisibleKeys().includes(key);
+    }
+    /** @protected Whether a field currently has an applied, meaningful condition. */
+    _isActive(key) {
+        return (this.filters()
+            .find((state) => state.key === key)
+            ?.conditions.some(isConditionMeaningful) ?? false);
+    }
+    /** @protected Stages a field for addition or removal from the filter row. */
+    _setVisible(definition, visible) {
+        if (this.disabled() || this.loading())
+            return;
+        if ((definition.required || this._isActive(definition.key)) && !visible) {
+            return;
+        }
+        const keys = new Set(this._draftVisibleKeys());
+        if (visible)
+            keys.add(definition.key);
+        else
+            keys.delete(definition.key);
+        const definitionOrder = this.definitions().map((candidate) => candidate.key);
+        this._draftVisibleKeys.set(definitionOrder.filter((key) => keys.has(key)));
+    }
+    /** @protected Toggles the structured filter row. */
+    _toggleFilters() {
+        this.filtersVisible.update((visible) => !visible);
+    }
+    /** @protected Focuses the manager's search input after the popup attaches. */
+    _onManagerOpened() {
+        this._draftVisibleKeys.set([...this.visibleKeys()]);
+        this._availableSearch.set('');
+        queueMicrotask(() => {
+            this._managerPanel()
+                ?.nativeElement.querySelector('input')
+                ?.focus();
+        });
+    }
+    /** @protected Restores manager-trigger focus after an overlay action closes. */
+    _onManagerClosed() {
+        this._draftVisibleKeys.set([...this.visibleKeys()]);
+        this._availableSearch.set('');
+        queueMicrotask(() => this._managerButton()?.nativeElement.focus());
+    }
+    /** @protected Stages the metadata default field selection in the manager. */
+    _resetManagerSelection() {
+        if (this.disabled() || this.loading())
+            return;
+        this._draftVisibleKeys.set(this._defaultVisibleKeys());
+    }
+    /** @protected Discards manager edits and closes its popup. */
+    _cancelManager(trigger) {
+        this._draftVisibleKeys.set([...this.visibleKeys()]);
+        trigger.close();
+    }
+    /** @protected Commits staged manager edits and closes its popup. */
+    _applyManager(trigger) {
+        if (this.disabled() || this.loading())
+            return;
+        const staged = new Set(this._draftVisibleKeys());
+        this.definitions()
+            .filter((definition) => definition.required || this._isActive(definition.key))
+            .forEach((definition) => staged.add(definition.key));
+        this.visibleKeys.set(this.definitions()
+            .map((definition) => definition.key)
+            .filter((key) => staged.has(key)));
+        trigger.close();
+    }
+    /** @private Replaces or removes one field state and optionally auto-executes. */
+    _replaceFieldState(state) {
+        const remaining = this.filters().filter((candidate) => candidate.key !== state.key);
+        const next = state.conditions.length > 0 ? [...remaining, state] : remaining;
+        const order = this.definitions().map((definition) => definition.key);
+        next.sort((a, b) => order.indexOf(a.key) - order.indexOf(b.key));
+        this.filters.set(cloneFieldStates(next));
+        this._queueAutoExecute();
+    }
+    /** @private Schedules one auto execution for the current microtask. */
+    _queueAutoExecute() {
+        if (this.appearance() === 'query' &&
+            this.filterApplyMode() === 'explicit') {
+            return;
+        }
+        if (!this.autoExecute() || this._autoExecuteQueued)
+            return;
+        this._autoExecuteQueued = true;
+        queueMicrotask(() => {
+            this._autoExecuteQueued = false;
+            this.executeQuery();
+        });
+    }
+    /** @private Default-visible keys, always including required definitions. */
+    _defaultVisibleKeys() {
+        return this.definitions()
+            .filter((definition) => definition.required ||
+            definition.defaultVisible ||
+            this._isActive(definition.key))
+            .map((definition) => definition.key);
+    }
+    /** @protected Whether a required field should currently expose an error. */
+    _isRequiredMissing(definition) {
+        return (this._showRequiredErrors() &&
+            this._missingRequiredDefinitions().some((candidate) => candidate.key === definition.key));
+    }
+    /** @protected Stable id for one field-level validation message. */
+    _requiredErrorId(definition) {
+        const index = this.definitions().findIndex((candidate) => candidate.key === definition.key);
+        return `${this._validationSummaryId}-field-${Math.max(0, index)}`;
+    }
+    /** @protected Localized field-level validation message. */
+    _requiredFilterMessage(definition) {
+        return this._resolveMessage('requiredFilter', { label: definition.label });
+    }
+    /** @private Blocks execution and focuses the first incomplete required field. */
+    _validateRequiredFilters() {
+        const missing = this._missingRequiredDefinitions();
+        if (missing.length === 0) {
+            this._validationAttempted.set(false);
+            return true;
+        }
+        this._validationAttempted.set(true);
+        this.filtersVisible.set(true);
+        queueMicrotask(() => {
+            const firstMissingKey = this._missingRequiredDefinitions()[0]?.key;
+            const index = this.visibleDefinitions().findIndex((definition) => definition.key === firstMissingKey);
+            const host = this._filterHosts()[index]?.nativeElement;
+            host?.querySelector('.mlv-filter__trigger')?.focus();
+        });
+        return false;
+    }
+    /** @private Builds a defensive execution snapshot. */
+    _payload() {
+        return {
+            search: this.searchValue(),
+            filters: cloneFieldStates(this.filters()),
+            visibleKeys: [...this.visibleKeys()],
+            expression: mlvFilterFieldsToExpression(cloneFieldStates(this.filters())),
+        };
+    }
+    /** @private Resolves one ICU message from the filter translation slice. */
+    _resolveMessage(key, params) {
+        return this._resolver.resolve(this._i18n(), key, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSmartFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSmartFilterBar, isStandalone: true, selector: "mlv-smart-filter-bar", inputs: { definitions: { classPropertyName: "definitions", publicName: "definitions", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, visibleKeys: { classPropertyName: "visibleKeys", publicName: "visibleKeys", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, searchTrigger: { classPropertyName: "searchTrigger", publicName: "searchTrigger", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, filterApplyMode: { classPropertyName: "filterApplyMode", publicName: "filterApplyMode", isSignal: true, isRequired: false, transformFunction: null }, autoExecute: { classPropertyName: "autoExecute", publicName: "autoExecute", isSignal: true, isRequired: false, transformFunction: null }, filtersVisible: { classPropertyName: "filtersVisible", publicName: "filtersVisible", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", visibleKeys: "visibleKeysChange", searchValue: "searchValueChange", filtersVisible: "filtersVisibleChange", execute: "execute", refresh: "refresh", resetCompleted: "resetCompleted" }, host: { properties: { "class.mlv-smart-filter-bar--collapsed": "!filtersVisible()", "class.mlv-smart-filter-bar--loading": "loading()", "class.mlv-smart-filter-bar--disabled": "disabled()", "class.mlv-smart-filter-bar--query": "appearance() === 'query'", "attr.aria-busy": "loading() || null" }, classAttribute: "mlv-smart-filter-bar" }, queries: [{ propertyName: "_valueEditors", predicate: MlvFilterValueEditorDef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_managerPanel", first: true, predicate: ["managerPanel"], descendants: true, isSignal: true }, { propertyName: "_managerButton", first: true, predicate: ["managerButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_addPanel", first: true, predicate: ["addPanel"], descendants: true, isSignal: true }, { propertyName: "_addButton", first: true, predicate: ["addButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_filterHosts", predicate: MlvFilter, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (appearance() === 'classic') {\n<div class=\"mlv-smart-filter-bar__query-row\">\n  @if (showSearch()) {\n  <mlv-search-field\n    class=\"mlv-smart-filter-bar__search\"\n    [value]=\"searchValue()\"\n    [trigger]=\"searchTrigger()\"\n    [debounce]=\"searchDebounce()\"\n    [commitOnClear]=\"autoExecute() || searchTrigger() === 'live'\"\n    [disabled]=\"disabled() || loading()\"\n    [loading]=\"loading()\"\n    (valueChange)=\"searchValue.set($event)\"\n    (search)=\"_onSearch($event)\"\n    (keydown.enter)=\"_onSearchEnter($event)\"\n  />\n  }\n\n  <div class=\"mlv-smart-filter-bar__primary-actions\">\n    <button\n      mlvButton\n      type=\"button\"\n      [disabled]=\"disabled() || loading()\"\n      [loading]=\"loading()\"\n      (click)=\"executeQuery()\"\n    >\n      {{ _i18n().go }}\n    </button>\n\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"secondary\"\n      shape=\"square\"\n      [disabled]=\"disabled() || loading()\"\n      [attr.aria-label]=\"_i18n().refresh\"\n      (click)=\"refreshQuery()\"\n    >\n      <svg mlvButtonIcon lucideRefreshCw [size]=\"16\" aria-hidden=\"true\"></svg>\n    </button>\n  </div>\n</div>\n\n<div class=\"mlv-smart-filter-bar__filter-toolbar\">\n  <div class=\"mlv-smart-filter-bar__filter-actions\">\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"transparent\"\n      [disabled]=\"disabled() || loading()\"\n      [attr.aria-expanded]=\"filtersVisible()\"\n      [attr.aria-controls]=\"_filtersId\"\n      (click)=\"_toggleFilters()\"\n    >\n      @if (filtersVisible()) {\n      <svg mlvButtonIcon lucideChevronUp [size]=\"16\" aria-hidden=\"true\"></svg>\n      {{ _i18n().hideFilters }} } @else {\n      <svg mlvButtonIcon lucideChevronDown [size]=\"16\" aria-hidden=\"true\"></svg>\n      {{ _i18n().showFilters }} }\n    </button>\n\n    <button\n      #managerButton\n      #managerTrigger=\"mlvPopupTrigger\"\n      mlvButton\n      type=\"button\"\n      variant=\"transparent\"\n      [mlvPopupTrigger]=\"managerPopup\"\n      [ariaHasPopup]=\"'dialog'\"\n      [disabled]=\"disabled() || loading()\"\n      [attr.aria-label]=\"_i18n().manageFilters\"\n      [attr.aria-controls]=\"_managerId\"\n    >\n      <svg mlvButtonIcon lucideSettings2 [size]=\"16\" aria-hidden=\"true\"></svg>\n      {{ _filtersLabel() }}\n    </button>\n\n    @if (_hasState()) {\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"transparent\"\n      [disabled]=\"disabled() || loading()\"\n      (click)=\"clear()\"\n    >\n      {{ _i18n().clear }}\n    </button>\n    }\n  </div>\n\n  <span class=\"mlv-smart-filter-bar__status\" aria-live=\"polite\">\n    {{ _appliedFiltersLabel() }}\n  </span>\n</div>\n\n@if (_showRequiredErrors()) {\n<div\n  class=\"mlv-smart-filter-bar__validation-summary\"\n  [id]=\"_validationSummaryId\"\n  role=\"alert\"\n>\n  {{ _requiredFiltersMessage() }}\n</div>\n}\n\n<mlv-expand #panel [id]=\"_filtersId\" [opened]=\"filtersVisible()\">\n  <div class=\"mlv-smart-filter-bar__filters\">\n    @for (definition of visibleDefinitions(); track definition.key) {\n    <div\n      class=\"mlv-smart-filter-bar__field\"\n      [class.mlv-smart-filter-bar__field--invalid]=\"\n      _isRequiredMissing(definition)\n    \"\n    >\n      <mlv-filter\n        [key]=\"definition.key\"\n        [label]=\"definition.label\"\n        [editor]=\"definition.editor\"\n        [options]=\"definition.options ?? []\"\n        [operators]=\"_operatorsFor(definition)\"\n        [operatorLabels]=\"definition.operatorLabels ?? {}\"\n        [defaultOperator]=\"definition.defaultOperator ?? 'contains'\"\n        [multiple]=\"definition.multiple ?? false\"\n        [allowMultipleConditions]=\"_allowsMultipleConditions(definition)\"\n        [placeholder]=\"definition.placeholder\"\n        [applyMode]=\"filterApplyMode()\"\n        [disabled]=\"\n        disabled() || loading() || (definition.disabled ?? false)\n      \"\n        [loading]=\"loading()\"\n        [invalid]=\"_isRequiredMissing(definition)\"\n        [ariaDescribedBy]=\"\n        _isRequiredMissing(definition)\n          ? _requiredErrorId(definition)\n          : undefined\n      \"\n        [valueEditor]=\"_valueEditorFor(definition)\"\n        [conditions]=\"_conditionsFor(definition.key)\"\n        [conditionStrategy]=\"_strategyFor(definition.key)\"\n        (conditionsChange)=\"_setConditions(definition, $event)\"\n        (conditionStrategyChange)=\"_setStrategy(definition, $event)\"\n      />\n      @if (_isRequiredMissing(definition)) {\n      <span\n        class=\"mlv-smart-filter-bar__field-error\"\n        [id]=\"_requiredErrorId(definition)\"\n      >\n        {{ _requiredFilterMessage(definition) }}\n      </span>\n      }\n    </div>\n    }\n  </div>\n</mlv-expand>\n\n<mlv-popup\n  #managerPopup\n  panelRole=\"dialog\"\n  [modal]=\"true\"\n  [ariaLabel]=\"_i18n().manageFilters\"\n  [position]=\"['bottom-end', 'top-end']\"\n  [hasShadow]=\"true\"\n  minWidth=\"18rem\"\n  maxWidth=\"28rem\"\n  (afterOpened)=\"_onManagerOpened()\"\n  (afterClosed)=\"_onManagerClosed()\"\n>\n  <ng-template mlvPopupContent>\n    <div #managerPanel class=\"mlv-smart-filter-bar__manager\" [id]=\"_managerId\">\n      <div class=\"mlv-smart-filter-bar__manager-header\">\n        <span class=\"mlv-smart-filter-bar__manager-title\">\n          {{ _availableFiltersLabel() }}\n        </span>\n        <button\n          mlvButton\n          type=\"button\"\n          variant=\"transparent\"\n          [disabled]=\"disabled() || loading()\"\n          (click)=\"_resetManagerSelection()\"\n        >\n          {{ _i18n().reset }}\n        </button>\n      </div>\n\n      <mlv-search-field\n        class=\"mlv-smart-filter-bar__manager-search\"\n        trigger=\"live\"\n        [debounce]=\"0\"\n        [value]=\"_availableSearch()\"\n        [placeholder]=\"_i18n().searchAvailableFilters\"\n        [ariaLabel]=\"_i18n().searchAvailableFilters\"\n        [disabled]=\"disabled() || loading()\"\n        (valueChange)=\"_availableSearch.set($event)\"\n        (search)=\"_onAvailableSearch($event)\"\n      />\n\n      <div\n        class=\"mlv-smart-filter-bar__manager-list\"\n        role=\"group\"\n        [attr.aria-label]=\"_availableFiltersLabel()\"\n      >\n        @for (definition of _filteredDefinitions(); track definition.key) {\n        <mlv-checkbox\n          class=\"mlv-smart-filter-bar__manager-option\"\n          [checked]=\"_isVisible(definition.key)\"\n          [disabled]=\"\n            disabled() ||\n            loading() ||\n            (definition.required ?? false) ||\n            _isActive(definition.key)\n          \"\n          (checkedChange)=\"_setVisible(definition, $event)\"\n        >\n          <span class=\"mlv-smart-filter-bar__manager-option-label\">\n            {{ definition.label }}\n          </span>\n          @if (definition.required) {\n          <span class=\"mlv-smart-filter-bar__manager-option-status\">\n            {{ _i18n().required }}\n          </span>\n          } @if (_isActive(definition.key)) {\n          <span class=\"mlv-smart-filter-bar__manager-option-status\">\n            {{ _i18n().active }}\n          </span>\n          }\n        </mlv-checkbox>\n        }\n      </div>\n\n      <div class=\"mlv-smart-filter-bar__manager-footer\">\n        <button\n          mlvButton\n          type=\"button\"\n          variant=\"transparent\"\n          [disabled]=\"disabled() || loading()\"\n          (click)=\"_cancelManager(managerTrigger)\"\n        >\n          {{ _i18n().cancel }}\n        </button>\n        <button\n          mlvButton\n          type=\"button\"\n          [disabled]=\"disabled() || loading()\"\n          (click)=\"_applyManager(managerTrigger)\"\n        >\n          {{ _i18n().apply }}\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</mlv-popup>\n} @else {\n<div class=\"mlv-smart-filter-bar__query-filters\">\n  @if (showSearch()) {\n  <mlv-search-field\n    class=\"mlv-smart-filter-bar__query-search\"\n    [value]=\"searchValue()\"\n    [trigger]=\"searchTrigger()\"\n    [debounce]=\"searchDebounce()\"\n    [commitOnClear]=\"autoExecute() || searchTrigger() === 'live'\"\n    [disabled]=\"disabled() || loading()\"\n    [loading]=\"loading()\"\n    (valueChange)=\"searchValue.set($event)\"\n    (search)=\"_onSearch($event)\"\n    (keydown.enter)=\"_onSearchEnter($event)\"\n  />\n  } @for (definition of _queryDefinitions(); track definition.key) {\n  <div class=\"mlv-smart-filter-bar__query-field\">\n    <mlv-filter\n      [key]=\"definition.key\"\n      appearance=\"query\"\n      [queryRemovable]=\"!definition.required\"\n      [label]=\"definition.label\"\n      [editor]=\"definition.editor\"\n      [options]=\"definition.options ?? []\"\n      [operators]=\"_operatorsFor(definition)\"\n      [operatorLabels]=\"definition.operatorLabels ?? {}\"\n      [defaultOperator]=\"definition.defaultOperator ?? 'contains'\"\n      [multiple]=\"definition.multiple ?? false\"\n      [allowMultipleConditions]=\"_allowsMultipleConditions(definition)\"\n      [placeholder]=\"definition.placeholder\"\n      [applyMode]=\"filterApplyMode()\"\n      [disabled]=\"disabled() || loading() || (definition.disabled ?? false)\"\n      [loading]=\"loading()\"\n      [invalid]=\"_isRequiredMissing(definition)\"\n      [ariaDescribedBy]=\"\n        _isRequiredMissing(definition)\n          ? _requiredErrorId(definition)\n          : undefined\n      \"\n      [valueEditor]=\"_valueEditorFor(definition)\"\n      [conditions]=\"_conditionsFor(definition.key)\"\n      [conditionStrategy]=\"_strategyFor(definition.key)\"\n      (conditionsChange)=\"_setConditions(definition, $event)\"\n      (conditionStrategyChange)=\"_setStrategy(definition, $event)\"\n      (cleared)=\"_removeQueryFilter(definition)\"\n    />\n    @if (_isRequiredMissing(definition)) {\n    <span\n      class=\"mlv-smart-filter-bar__field-error\"\n      [id]=\"_requiredErrorId(definition)\"\n    >\n      {{ _requiredFilterMessage(definition) }}\n    </span>\n    }\n  </div>\n  }\n\n  <button\n    #addButton\n    #addTrigger=\"mlvPopupTrigger\"\n    mlvButton\n    type=\"button\"\n    variant=\"transparent\"\n    class=\"mlv-smart-filter-bar__add\"\n    [mlvPopupTrigger]=\"addPopup\"\n    [ariaHasPopup]=\"'dialog'\"\n    [disabled]=\"disabled() || loading()\"\n  >\n    <svg mlvButtonIcon lucidePlus [size]=\"14\" aria-hidden=\"true\"></svg>\n    {{ _i18n().addFilter }}\n  </button>\n\n  @if (_hasState()) {\n  <button\n    mlvButton\n    type=\"button\"\n    variant=\"transparent\"\n    class=\"mlv-smart-filter-bar__clear-all\"\n    [disabled]=\"disabled() || loading()\"\n    (click)=\"_clearQuery()\"\n  >\n    {{ _i18n().clearAll }}\n  </button>\n  } @if (filterApplyMode() === 'explicit') {\n  <button\n    mlvButton\n    type=\"button\"\n    class=\"mlv-smart-filter-bar__apply-query\"\n    [disabled]=\"disabled() || loading()\"\n    (click)=\"executeQuery()\"\n  >\n    {{ _i18n().apply }}\n  </button>\n  }\n</div>\n\n@if (_showRequiredErrors()) {\n<div\n  class=\"mlv-smart-filter-bar__validation-summary\"\n  [id]=\"_validationSummaryId\"\n  role=\"alert\"\n>\n  {{ _requiredFiltersMessage() }}\n</div>\n}\n\n<mlv-popup\n  #addPopup\n  panelRole=\"dialog\"\n  [ariaLabel]=\"_i18n().addFilter\"\n  [position]=\"['bottom-start', 'top-start']\"\n  [hasShadow]=\"true\"\n  minWidth=\"14rem\"\n  maxWidth=\"28rem\"\n  (afterOpened)=\"_onAddOpened()\"\n  (afterClosed)=\"_onAddClosed()\"\n>\n  <ng-template mlvPopupContent>\n    <div #addPanel class=\"mlv-smart-filter-bar__add-menu\">\n      <mlv-search-field\n        class=\"mlv-smart-filter-bar__add-search\"\n        trigger=\"live\"\n        [debounce]=\"0\"\n        [value]=\"_availableSearch()\"\n        [placeholder]=\"_i18n().searchAvailableFilters\"\n        [ariaLabel]=\"_i18n().searchAvailableFilters\"\n        [disabled]=\"disabled() || loading()\"\n        (valueChange)=\"_availableSearch.set($event)\"\n        (search)=\"_onAvailableSearch($event)\"\n      />\n      <ul class=\"mlv-smart-filter-bar__add-list\">\n        @for (definition of _addableDefinitions(); track definition.key) {\n        <li class=\"mlv-smart-filter-bar__add-item\">\n          <button\n            mlvButton\n            type=\"button\"\n            variant=\"transparent\"\n            class=\"mlv-smart-filter-bar__add-option\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"_addQueryFilter(definition, addTrigger)\"\n          >\n            {{ definition.label }}\n          </button>\n        </li>\n        } @empty {\n        <li class=\"mlv-smart-filter-bar__add-empty\">\n          {{ _i18n().noFiltersAvailable }}\n        </li>\n        }\n      </ul>\n    </div>\n  </ng-template>\n</mlv-popup>\n}\n", styles: ["@layer mlv.components{.mlv-smart-filter-bar{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-smart-filter-bar *{box-sizing:border-box}.mlv-smart-filter-bar{--mlv-smart-filter-bar-gap: var(--mlv-spacing-3);display:flex;width:100%;min-width:0;flex-direction:column;gap:var(--mlv-smart-filter-bar-gap);padding:var(--mlv-spacing-4);border:.0625rem solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-panel);background-color:var(--mlv-background-raised)}.mlv-smart-filter-bar__query-row,.mlv-smart-filter-bar__filter-toolbar{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:var(--mlv-smart-filter-bar-gap)}.mlv-smart-filter-bar__search{width:min(32rem,100%);min-width:12rem}.mlv-smart-filter-bar__primary-actions,.mlv-smart-filter-bar__filter-actions{display:inline-flex;flex:none;align-items:center;gap:var(--mlv-spacing-1)}.mlv-smart-filter-bar__filter-toolbar{justify-content:flex-end;padding-top:var(--mlv-spacing-1);border-top:.0625rem solid var(--mlv-border-subtle)}.mlv-smart-filter-bar__filters{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--mlv-spacing-2);padding-block:var(--mlv-spacing-1)}.mlv-smart-filter-bar__filters[hidden]{display:none}.mlv-smart-filter-bar__query-filters{display:flex;min-width:0;flex-wrap:wrap;align-items:center;gap:var(--mlv-smart-filter-bar-gap)}.mlv-smart-filter-bar__query-search{width:min(24rem,100%);min-width:12rem}.mlv-smart-filter-bar__query-field{display:flex;min-width:0;max-width:100%;flex-direction:column;gap:var(--mlv-spacing-1)}.mlv-smart-filter-bar__add{--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs);flex:none;border:var(--mlv-stroke-width) dashed var(--mlv-border-normal)}.mlv-smart-filter-bar__clear-all,.mlv-smart-filter-bar__apply-query{flex:none}.mlv-smart-filter-bar__add-menu{display:flex;width:min(20rem,100vw - 2rem);max-width:100%;flex-direction:column;padding:var(--mlv-spacing-2);gap:var(--mlv-spacing-1-5)}.mlv-smart-filter-bar__add-list{display:flex;max-height:18rem;flex-direction:column;gap:var(--mlv-spacing-0-5);overflow-y:auto;padding:0;margin:0;list-style:none}.mlv-smart-filter-bar__add-option{width:100%;justify-content:flex-start}.mlv-smart-filter-bar__add-empty{padding:var(--mlv-spacing-2);color:var(--mlv-text-secondary)}.mlv-smart-filter-bar__field{display:flex;max-width:100%;flex-direction:column;align-items:flex-start;gap:var(--mlv-spacing-1)}.mlv-smart-filter-bar__validation-summary{padding:var(--mlv-spacing-2) var(--mlv-spacing-2-5);border:.0625rem solid var(--mlv-border-error);border-radius:var(--mlv-radius-m);background-color:var(--mlv-background-danger-1-pale);color:var(--mlv-text-error);font-size:var(--mlv-typography-error-size);font-weight:var(--mlv-typography-error-weight);line-height:var(--mlv-typography-error-line-height)}.mlv-smart-filter-bar__field-error{color:var(--mlv-text-error);font-size:var(--mlv-typography-error-size);font-weight:var(--mlv-typography-error-weight);line-height:var(--mlv-typography-error-line-height)}.mlv-smart-filter-bar__status{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mlv-smart-filter-bar__manager{display:flex;width:min(26rem,100vw - 2rem);max-width:100%;flex-direction:column}.mlv-smart-filter-bar__manager-header,.mlv-smart-filter-bar__manager-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-2-5) var(--mlv-spacing-3)}.mlv-smart-filter-bar__manager-header{border-bottom:.0625rem solid var(--mlv-border-subtle)}.mlv-smart-filter-bar__manager-footer{justify-content:flex-end;border-top:.0625rem solid var(--mlv-border-subtle)}.mlv-smart-filter-bar__manager-title{color:var(--mlv-text-primary);font-weight:600}.mlv-smart-filter-bar__manager-search{margin:var(--mlv-spacing-3) var(--mlv-spacing-3) var(--mlv-spacing-1-5)}.mlv-smart-filter-bar__manager-list{display:flex;max-height:18rem;flex-direction:column;gap:var(--mlv-spacing-1);overflow-y:auto;padding:var(--mlv-spacing-1-5) var(--mlv-spacing-3) var(--mlv-spacing-3)}.mlv-smart-filter-bar__manager-option{width:100%}.mlv-smart-filter-bar__manager-option-label{margin-inline-end:var(--mlv-spacing-1-5)}.mlv-smart-filter-bar__manager-option-status{display:inline-flex;padding:.0625rem var(--mlv-spacing-1-5);border-radius:var(--mlv-radius-full);background-color:var(--mlv-background-neutral-2);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-typography-body-s-weight);line-height:var(--mlv-typography-body-s-line-height);white-space:nowrap}.mlv-smart-filter-bar__manager-option-status+.mlv-smart-filter-bar__manager-option-status{margin-inline-start:var(--mlv-spacing-1)}.mlv-smart-filter-bar--loading{cursor:progress}.mlv-smart-filter-bar--disabled{opacity:var(--mlv-disabled-opacity)}@media(max-width:42rem){.mlv-smart-filter-bar__query-row{align-items:stretch;flex-direction:column}.mlv-smart-filter-bar__search{width:100%;min-width:0}.mlv-smart-filter-bar__primary-actions{justify-content:flex-end}.mlv-smart-filter-bar__filter-toolbar{align-items:flex-start}.mlv-smart-filter-bar__filter-actions{flex-wrap:wrap;justify-content:flex-end}.mlv-smart-filter-bar__query-search{width:100%;min-width:100%}}@media(prefers-reduced-motion:reduce){.mlv-smart-filter-bar,.mlv-smart-filter-bar *,.mlv-smart-filter-bar:before,.mlv-smart-filter-bar:after,[class^=mlv-smart-filter-bar__],[class*=\" mlv-smart-filter-bar__\"],[class^=mlv-smart-filter-bar--],[class*=\" mlv-smart-filter-bar--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"], dependencies: [{ kind: "component", type: MlvButton, selector: "button[mlvButton], a[mlvButton]", inputs: ["variant", "shape", "disabled", "loading", "selected"] }, { kind: "directive", type: MlvButtonIcon, selector: "[mlvButtonIcon]" }, { kind: "component", type: MlvCheckbox, selector: "mlv-checkbox", inputs: ["ariaLabelledBy", "checked", "indeterminate", "tabbable"], outputs: ["checkedChange"] }, { kind: "component", type: MlvFilter, selector: "mlv-filter", inputs: ["label", "key", "appearance", "queryRemovable", "options", "editor", "multiple", "allowMultipleConditions", "operators", "operatorLabels", "defaultOperator", "placeholder", "applyMode", "disabled", "loading", "invalid", "ariaDescribedBy", "valueEditor", "conditions", "conditionStrategy", "opened"], outputs: ["conditionsChange", "conditionStrategyChange", "openedChange", "applied", "cleared"] }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "component", type: MlvSearchField, selector: "mlv-search-field", inputs: ["value", "trigger", "debounce", "placeholder", "ariaLabel", "disabled", "loading", "showSubmit", "clearable", "commitOnClear", "presentation", "overlay", "role", "ariaControls", "ariaActiveDescendant", "ariaAutocomplete", "ariaExpanded"], outputs: ["valueChange", "search", "navigate", "commit"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }, { kind: "component", type: LucideRefreshCw, selector: "svg[lucideRefreshCw]" }, { kind: "component", type: LucideSettings2, selector: "svg[lucideSettings2]" }, { kind: "component", type: MlvExpand, selector: "mlv-expand", inputs: ["opened", "disabled", "ariaLabel", "ariaLabelledBy"], outputs: ["openedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSmartFilterBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-smart-filter-bar', imports: [
+                        MlvButton,
+                        MlvButtonIcon,
+                        MlvCheckbox,
+                        MlvFilter,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupTrigger,
+                        MlvSearchField,
+                        LucideChevronDown,
+                        LucideChevronUp,
+                        LucidePlus,
+                        LucideRefreshCw,
+                        LucideSettings2,
+                        MlvExpand,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-smart-filter-bar',
+                        '[class.mlv-smart-filter-bar--collapsed]': '!filtersVisible()',
+                        '[class.mlv-smart-filter-bar--loading]': 'loading()',
+                        '[class.mlv-smart-filter-bar--disabled]': 'disabled()',
+                        '[class.mlv-smart-filter-bar--query]': "appearance() === 'query'",
+                        '[attr.aria-busy]': 'loading() || null',
+                    }, template: "@if (appearance() === 'classic') {\n<div class=\"mlv-smart-filter-bar__query-row\">\n  @if (showSearch()) {\n  <mlv-search-field\n    class=\"mlv-smart-filter-bar__search\"\n    [value]=\"searchValue()\"\n    [trigger]=\"searchTrigger()\"\n    [debounce]=\"searchDebounce()\"\n    [commitOnClear]=\"autoExecute() || searchTrigger() === 'live'\"\n    [disabled]=\"disabled() || loading()\"\n    [loading]=\"loading()\"\n    (valueChange)=\"searchValue.set($event)\"\n    (search)=\"_onSearch($event)\"\n    (keydown.enter)=\"_onSearchEnter($event)\"\n  />\n  }\n\n  <div class=\"mlv-smart-filter-bar__primary-actions\">\n    <button\n      mlvButton\n      type=\"button\"\n      [disabled]=\"disabled() || loading()\"\n      [loading]=\"loading()\"\n      (click)=\"executeQuery()\"\n    >\n      {{ _i18n().go }}\n    </button>\n\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"secondary\"\n      shape=\"square\"\n      [disabled]=\"disabled() || loading()\"\n      [attr.aria-label]=\"_i18n().refresh\"\n      (click)=\"refreshQuery()\"\n    >\n      <svg mlvButtonIcon lucideRefreshCw [size]=\"16\" aria-hidden=\"true\"></svg>\n    </button>\n  </div>\n</div>\n\n<div class=\"mlv-smart-filter-bar__filter-toolbar\">\n  <div class=\"mlv-smart-filter-bar__filter-actions\">\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"transparent\"\n      [disabled]=\"disabled() || loading()\"\n      [attr.aria-expanded]=\"filtersVisible()\"\n      [attr.aria-controls]=\"_filtersId\"\n      (click)=\"_toggleFilters()\"\n    >\n      @if (filtersVisible()) {\n      <svg mlvButtonIcon lucideChevronUp [size]=\"16\" aria-hidden=\"true\"></svg>\n      {{ _i18n().hideFilters }} } @else {\n      <svg mlvButtonIcon lucideChevronDown [size]=\"16\" aria-hidden=\"true\"></svg>\n      {{ _i18n().showFilters }} }\n    </button>\n\n    <button\n      #managerButton\n      #managerTrigger=\"mlvPopupTrigger\"\n      mlvButton\n      type=\"button\"\n      variant=\"transparent\"\n      [mlvPopupTrigger]=\"managerPopup\"\n      [ariaHasPopup]=\"'dialog'\"\n      [disabled]=\"disabled() || loading()\"\n      [attr.aria-label]=\"_i18n().manageFilters\"\n      [attr.aria-controls]=\"_managerId\"\n    >\n      <svg mlvButtonIcon lucideSettings2 [size]=\"16\" aria-hidden=\"true\"></svg>\n      {{ _filtersLabel() }}\n    </button>\n\n    @if (_hasState()) {\n    <button\n      mlvButton\n      type=\"button\"\n      variant=\"transparent\"\n      [disabled]=\"disabled() || loading()\"\n      (click)=\"clear()\"\n    >\n      {{ _i18n().clear }}\n    </button>\n    }\n  </div>\n\n  <span class=\"mlv-smart-filter-bar__status\" aria-live=\"polite\">\n    {{ _appliedFiltersLabel() }}\n  </span>\n</div>\n\n@if (_showRequiredErrors()) {\n<div\n  class=\"mlv-smart-filter-bar__validation-summary\"\n  [id]=\"_validationSummaryId\"\n  role=\"alert\"\n>\n  {{ _requiredFiltersMessage() }}\n</div>\n}\n\n<mlv-expand #panel [id]=\"_filtersId\" [opened]=\"filtersVisible()\">\n  <div class=\"mlv-smart-filter-bar__filters\">\n    @for (definition of visibleDefinitions(); track definition.key) {\n    <div\n      class=\"mlv-smart-filter-bar__field\"\n      [class.mlv-smart-filter-bar__field--invalid]=\"\n      _isRequiredMissing(definition)\n    \"\n    >\n      <mlv-filter\n        [key]=\"definition.key\"\n        [label]=\"definition.label\"\n        [editor]=\"definition.editor\"\n        [options]=\"definition.options ?? []\"\n        [operators]=\"_operatorsFor(definition)\"\n        [operatorLabels]=\"definition.operatorLabels ?? {}\"\n        [defaultOperator]=\"definition.defaultOperator ?? 'contains'\"\n        [multiple]=\"definition.multiple ?? false\"\n        [allowMultipleConditions]=\"_allowsMultipleConditions(definition)\"\n        [placeholder]=\"definition.placeholder\"\n        [applyMode]=\"filterApplyMode()\"\n        [disabled]=\"\n        disabled() || loading() || (definition.disabled ?? false)\n      \"\n        [loading]=\"loading()\"\n        [invalid]=\"_isRequiredMissing(definition)\"\n        [ariaDescribedBy]=\"\n        _isRequiredMissing(definition)\n          ? _requiredErrorId(definition)\n          : undefined\n      \"\n        [valueEditor]=\"_valueEditorFor(definition)\"\n        [conditions]=\"_conditionsFor(definition.key)\"\n        [conditionStrategy]=\"_strategyFor(definition.key)\"\n        (conditionsChange)=\"_setConditions(definition, $event)\"\n        (conditionStrategyChange)=\"_setStrategy(definition, $event)\"\n      />\n      @if (_isRequiredMissing(definition)) {\n      <span\n        class=\"mlv-smart-filter-bar__field-error\"\n        [id]=\"_requiredErrorId(definition)\"\n      >\n        {{ _requiredFilterMessage(definition) }}\n      </span>\n      }\n    </div>\n    }\n  </div>\n</mlv-expand>\n\n<mlv-popup\n  #managerPopup\n  panelRole=\"dialog\"\n  [modal]=\"true\"\n  [ariaLabel]=\"_i18n().manageFilters\"\n  [position]=\"['bottom-end', 'top-end']\"\n  [hasShadow]=\"true\"\n  minWidth=\"18rem\"\n  maxWidth=\"28rem\"\n  (afterOpened)=\"_onManagerOpened()\"\n  (afterClosed)=\"_onManagerClosed()\"\n>\n  <ng-template mlvPopupContent>\n    <div #managerPanel class=\"mlv-smart-filter-bar__manager\" [id]=\"_managerId\">\n      <div class=\"mlv-smart-filter-bar__manager-header\">\n        <span class=\"mlv-smart-filter-bar__manager-title\">\n          {{ _availableFiltersLabel() }}\n        </span>\n        <button\n          mlvButton\n          type=\"button\"\n          variant=\"transparent\"\n          [disabled]=\"disabled() || loading()\"\n          (click)=\"_resetManagerSelection()\"\n        >\n          {{ _i18n().reset }}\n        </button>\n      </div>\n\n      <mlv-search-field\n        class=\"mlv-smart-filter-bar__manager-search\"\n        trigger=\"live\"\n        [debounce]=\"0\"\n        [value]=\"_availableSearch()\"\n        [placeholder]=\"_i18n().searchAvailableFilters\"\n        [ariaLabel]=\"_i18n().searchAvailableFilters\"\n        [disabled]=\"disabled() || loading()\"\n        (valueChange)=\"_availableSearch.set($event)\"\n        (search)=\"_onAvailableSearch($event)\"\n      />\n\n      <div\n        class=\"mlv-smart-filter-bar__manager-list\"\n        role=\"group\"\n        [attr.aria-label]=\"_availableFiltersLabel()\"\n      >\n        @for (definition of _filteredDefinitions(); track definition.key) {\n        <mlv-checkbox\n          class=\"mlv-smart-filter-bar__manager-option\"\n          [checked]=\"_isVisible(definition.key)\"\n          [disabled]=\"\n            disabled() ||\n            loading() ||\n            (definition.required ?? false) ||\n            _isActive(definition.key)\n          \"\n          (checkedChange)=\"_setVisible(definition, $event)\"\n        >\n          <span class=\"mlv-smart-filter-bar__manager-option-label\">\n            {{ definition.label }}\n          </span>\n          @if (definition.required) {\n          <span class=\"mlv-smart-filter-bar__manager-option-status\">\n            {{ _i18n().required }}\n          </span>\n          } @if (_isActive(definition.key)) {\n          <span class=\"mlv-smart-filter-bar__manager-option-status\">\n            {{ _i18n().active }}\n          </span>\n          }\n        </mlv-checkbox>\n        }\n      </div>\n\n      <div class=\"mlv-smart-filter-bar__manager-footer\">\n        <button\n          mlvButton\n          type=\"button\"\n          variant=\"transparent\"\n          [disabled]=\"disabled() || loading()\"\n          (click)=\"_cancelManager(managerTrigger)\"\n        >\n          {{ _i18n().cancel }}\n        </button>\n        <button\n          mlvButton\n          type=\"button\"\n          [disabled]=\"disabled() || loading()\"\n          (click)=\"_applyManager(managerTrigger)\"\n        >\n          {{ _i18n().apply }}\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</mlv-popup>\n} @else {\n<div class=\"mlv-smart-filter-bar__query-filters\">\n  @if (showSearch()) {\n  <mlv-search-field\n    class=\"mlv-smart-filter-bar__query-search\"\n    [value]=\"searchValue()\"\n    [trigger]=\"searchTrigger()\"\n    [debounce]=\"searchDebounce()\"\n    [commitOnClear]=\"autoExecute() || searchTrigger() === 'live'\"\n    [disabled]=\"disabled() || loading()\"\n    [loading]=\"loading()\"\n    (valueChange)=\"searchValue.set($event)\"\n    (search)=\"_onSearch($event)\"\n    (keydown.enter)=\"_onSearchEnter($event)\"\n  />\n  } @for (definition of _queryDefinitions(); track definition.key) {\n  <div class=\"mlv-smart-filter-bar__query-field\">\n    <mlv-filter\n      [key]=\"definition.key\"\n      appearance=\"query\"\n      [queryRemovable]=\"!definition.required\"\n      [label]=\"definition.label\"\n      [editor]=\"definition.editor\"\n      [options]=\"definition.options ?? []\"\n      [operators]=\"_operatorsFor(definition)\"\n      [operatorLabels]=\"definition.operatorLabels ?? {}\"\n      [defaultOperator]=\"definition.defaultOperator ?? 'contains'\"\n      [multiple]=\"definition.multiple ?? false\"\n      [allowMultipleConditions]=\"_allowsMultipleConditions(definition)\"\n      [placeholder]=\"definition.placeholder\"\n      [applyMode]=\"filterApplyMode()\"\n      [disabled]=\"disabled() || loading() || (definition.disabled ?? false)\"\n      [loading]=\"loading()\"\n      [invalid]=\"_isRequiredMissing(definition)\"\n      [ariaDescribedBy]=\"\n        _isRequiredMissing(definition)\n          ? _requiredErrorId(definition)\n          : undefined\n      \"\n      [valueEditor]=\"_valueEditorFor(definition)\"\n      [conditions]=\"_conditionsFor(definition.key)\"\n      [conditionStrategy]=\"_strategyFor(definition.key)\"\n      (conditionsChange)=\"_setConditions(definition, $event)\"\n      (conditionStrategyChange)=\"_setStrategy(definition, $event)\"\n      (cleared)=\"_removeQueryFilter(definition)\"\n    />\n    @if (_isRequiredMissing(definition)) {\n    <span\n      class=\"mlv-smart-filter-bar__field-error\"\n      [id]=\"_requiredErrorId(definition)\"\n    >\n      {{ _requiredFilterMessage(definition) }}\n    </span>\n    }\n  </div>\n  }\n\n  <button\n    #addButton\n    #addTrigger=\"mlvPopupTrigger\"\n    mlvButton\n    type=\"button\"\n    variant=\"transparent\"\n    class=\"mlv-smart-filter-bar__add\"\n    [mlvPopupTrigger]=\"addPopup\"\n    [ariaHasPopup]=\"'dialog'\"\n    [disabled]=\"disabled() || loading()\"\n  >\n    <svg mlvButtonIcon lucidePlus [size]=\"14\" aria-hidden=\"true\"></svg>\n    {{ _i18n().addFilter }}\n  </button>\n\n  @if (_hasState()) {\n  <button\n    mlvButton\n    type=\"button\"\n    variant=\"transparent\"\n    class=\"mlv-smart-filter-bar__clear-all\"\n    [disabled]=\"disabled() || loading()\"\n    (click)=\"_clearQuery()\"\n  >\n    {{ _i18n().clearAll }}\n  </button>\n  } @if (filterApplyMode() === 'explicit') {\n  <button\n    mlvButton\n    type=\"button\"\n    class=\"mlv-smart-filter-bar__apply-query\"\n    [disabled]=\"disabled() || loading()\"\n    (click)=\"executeQuery()\"\n  >\n    {{ _i18n().apply }}\n  </button>\n  }\n</div>\n\n@if (_showRequiredErrors()) {\n<div\n  class=\"mlv-smart-filter-bar__validation-summary\"\n  [id]=\"_validationSummaryId\"\n  role=\"alert\"\n>\n  {{ _requiredFiltersMessage() }}\n</div>\n}\n\n<mlv-popup\n  #addPopup\n  panelRole=\"dialog\"\n  [ariaLabel]=\"_i18n().addFilter\"\n  [position]=\"['bottom-start', 'top-start']\"\n  [hasShadow]=\"true\"\n  minWidth=\"14rem\"\n  maxWidth=\"28rem\"\n  (afterOpened)=\"_onAddOpened()\"\n  (afterClosed)=\"_onAddClosed()\"\n>\n  <ng-template mlvPopupContent>\n    <div #addPanel class=\"mlv-smart-filter-bar__add-menu\">\n      <mlv-search-field\n        class=\"mlv-smart-filter-bar__add-search\"\n        trigger=\"live\"\n        [debounce]=\"0\"\n        [value]=\"_availableSearch()\"\n        [placeholder]=\"_i18n().searchAvailableFilters\"\n        [ariaLabel]=\"_i18n().searchAvailableFilters\"\n        [disabled]=\"disabled() || loading()\"\n        (valueChange)=\"_availableSearch.set($event)\"\n        (search)=\"_onAvailableSearch($event)\"\n      />\n      <ul class=\"mlv-smart-filter-bar__add-list\">\n        @for (definition of _addableDefinitions(); track definition.key) {\n        <li class=\"mlv-smart-filter-bar__add-item\">\n          <button\n            mlvButton\n            type=\"button\"\n            variant=\"transparent\"\n            class=\"mlv-smart-filter-bar__add-option\"\n            [disabled]=\"disabled() || loading()\"\n            (click)=\"_addQueryFilter(definition, addTrigger)\"\n          >\n            {{ definition.label }}\n          </button>\n        </li>\n        } @empty {\n        <li class=\"mlv-smart-filter-bar__add-empty\">\n          {{ _i18n().noFiltersAvailable }}\n        </li>\n        }\n      </ul>\n    </div>\n  </ng-template>\n</mlv-popup>\n}\n", styles: ["@layer mlv.components{.mlv-smart-filter-bar{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-typography-body-m-size)}.mlv-smart-filter-bar *{box-sizing:border-box}.mlv-smart-filter-bar{--mlv-smart-filter-bar-gap: var(--mlv-spacing-3);display:flex;width:100%;min-width:0;flex-direction:column;gap:var(--mlv-smart-filter-bar-gap);padding:var(--mlv-spacing-4);border:.0625rem solid var(--mlv-border-subtle);border-radius:var(--mlv-radius-panel);background-color:var(--mlv-background-raised)}.mlv-smart-filter-bar__query-row,.mlv-smart-filter-bar__filter-toolbar{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:var(--mlv-smart-filter-bar-gap)}.mlv-smart-filter-bar__search{width:min(32rem,100%);min-width:12rem}.mlv-smart-filter-bar__primary-actions,.mlv-smart-filter-bar__filter-actions{display:inline-flex;flex:none;align-items:center;gap:var(--mlv-spacing-1)}.mlv-smart-filter-bar__filter-toolbar{justify-content:flex-end;padding-top:var(--mlv-spacing-1);border-top:.0625rem solid var(--mlv-border-subtle)}.mlv-smart-filter-bar__filters{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--mlv-spacing-2);padding-block:var(--mlv-spacing-1)}.mlv-smart-filter-bar__filters[hidden]{display:none}.mlv-smart-filter-bar__query-filters{display:flex;min-width:0;flex-wrap:wrap;align-items:center;gap:var(--mlv-smart-filter-bar-gap)}.mlv-smart-filter-bar__query-search{width:min(24rem,100%);min-width:12rem}.mlv-smart-filter-bar__query-field{display:flex;min-width:0;max-width:100%;flex-direction:column;gap:var(--mlv-spacing-1)}.mlv-smart-filter-bar__add{--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs);flex:none;border:var(--mlv-stroke-width) dashed var(--mlv-border-normal)}.mlv-smart-filter-bar__clear-all,.mlv-smart-filter-bar__apply-query{flex:none}.mlv-smart-filter-bar__add-menu{display:flex;width:min(20rem,100vw - 2rem);max-width:100%;flex-direction:column;padding:var(--mlv-spacing-2);gap:var(--mlv-spacing-1-5)}.mlv-smart-filter-bar__add-list{display:flex;max-height:18rem;flex-direction:column;gap:var(--mlv-spacing-0-5);overflow-y:auto;padding:0;margin:0;list-style:none}.mlv-smart-filter-bar__add-option{width:100%;justify-content:flex-start}.mlv-smart-filter-bar__add-empty{padding:var(--mlv-spacing-2);color:var(--mlv-text-secondary)}.mlv-smart-filter-bar__field{display:flex;max-width:100%;flex-direction:column;align-items:flex-start;gap:var(--mlv-spacing-1)}.mlv-smart-filter-bar__validation-summary{padding:var(--mlv-spacing-2) var(--mlv-spacing-2-5);border:.0625rem solid var(--mlv-border-error);border-radius:var(--mlv-radius-m);background-color:var(--mlv-background-danger-1-pale);color:var(--mlv-text-error);font-size:var(--mlv-typography-error-size);font-weight:var(--mlv-typography-error-weight);line-height:var(--mlv-typography-error-line-height)}.mlv-smart-filter-bar__field-error{color:var(--mlv-text-error);font-size:var(--mlv-typography-error-size);font-weight:var(--mlv-typography-error-weight);line-height:var(--mlv-typography-error-line-height)}.mlv-smart-filter-bar__status{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mlv-smart-filter-bar__manager{display:flex;width:min(26rem,100vw - 2rem);max-width:100%;flex-direction:column}.mlv-smart-filter-bar__manager-header,.mlv-smart-filter-bar__manager-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--mlv-spacing-2);padding:var(--mlv-spacing-2-5) var(--mlv-spacing-3)}.mlv-smart-filter-bar__manager-header{border-bottom:.0625rem solid var(--mlv-border-subtle)}.mlv-smart-filter-bar__manager-footer{justify-content:flex-end;border-top:.0625rem solid var(--mlv-border-subtle)}.mlv-smart-filter-bar__manager-title{color:var(--mlv-text-primary);font-weight:600}.mlv-smart-filter-bar__manager-search{margin:var(--mlv-spacing-3) var(--mlv-spacing-3) var(--mlv-spacing-1-5)}.mlv-smart-filter-bar__manager-list{display:flex;max-height:18rem;flex-direction:column;gap:var(--mlv-spacing-1);overflow-y:auto;padding:var(--mlv-spacing-1-5) var(--mlv-spacing-3) var(--mlv-spacing-3)}.mlv-smart-filter-bar__manager-option{width:100%}.mlv-smart-filter-bar__manager-option-label{margin-inline-end:var(--mlv-spacing-1-5)}.mlv-smart-filter-bar__manager-option-status{display:inline-flex;padding:.0625rem var(--mlv-spacing-1-5);border-radius:var(--mlv-radius-full);background-color:var(--mlv-background-neutral-2);color:var(--mlv-text-secondary);font-size:var(--mlv-typography-body-s-size);font-weight:var(--mlv-typography-body-s-weight);line-height:var(--mlv-typography-body-s-line-height);white-space:nowrap}.mlv-smart-filter-bar__manager-option-status+.mlv-smart-filter-bar__manager-option-status{margin-inline-start:var(--mlv-spacing-1)}.mlv-smart-filter-bar--loading{cursor:progress}.mlv-smart-filter-bar--disabled{opacity:var(--mlv-disabled-opacity)}@media(max-width:42rem){.mlv-smart-filter-bar__query-row{align-items:stretch;flex-direction:column}.mlv-smart-filter-bar__search{width:100%;min-width:0}.mlv-smart-filter-bar__primary-actions{justify-content:flex-end}.mlv-smart-filter-bar__filter-toolbar{align-items:flex-start}.mlv-smart-filter-bar__filter-actions{flex-wrap:wrap;justify-content:flex-end}.mlv-smart-filter-bar__query-search{width:100%;min-width:100%}}@media(prefers-reduced-motion:reduce){.mlv-smart-filter-bar,.mlv-smart-filter-bar *,.mlv-smart-filter-bar:before,.mlv-smart-filter-bar:after,[class^=mlv-smart-filter-bar__],[class*=\" mlv-smart-filter-bar__\"],[class^=mlv-smart-filter-bar--],[class*=\" mlv-smart-filter-bar--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { definitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "definitions", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], visibleKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleKeys", required: false }] }, { type: i0.Output, args: ["visibleKeysChange"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], searchTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTrigger", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], filterApplyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterApplyMode", required: false }] }], autoExecute: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoExecute", required: false }] }], filtersVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersVisible", required: false }] }, { type: i0.Output, args: ["filtersVisibleChange"] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], execute: [{ type: i0.Output, args: ["execute"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], resetCompleted: [{ type: i0.Output, args: ["resetCompleted"] }], _managerPanel: [{ type: i0.ViewChild, args: ['managerPanel', { isSignal: true }] }], _managerButton: [{ type: i0.ViewChild, args: ['managerButton', { ...{
+                            read: (ElementRef),
+                        }, isSignal: true }] }], _addPanel: [{ type: i0.ViewChild, args: ['addPanel', { isSignal: true }] }], _addButton: [{ type: i0.ViewChild, args: ['addButton', { ...{
+                            read: (ElementRef),
+                        }, isSignal: true }] }], _filterHosts: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MlvFilter), { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }], _valueEditors: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvFilterValueEditorDef), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MlvFilter, MlvFilterValueEditorDef, MlvSmartFilterBar, mlvFilterExpressionToFields, mlvFilterFieldsToExpression, mlvMatchesFilterExpression };
+//# sourceMappingURL=malva-ui-core-filter.mjs.map