@malva-ui/core 0.1.12

package/esm2022/filter/lib/smart-filter-bar/smart-filter-bar.js

@@ -0,0 +1,518 @@
+import { ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation, computed, effect, inject, input, model, numberAttribute, output, signal, viewChild, viewChildren, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { LucideChevronDown, LucideChevronUp, LucideRefreshCw, LucideSettings2, } from '@lucide/angular';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvButton, MlvButtonIcon } from '@malva-ui/core/button';
+import { MlvCheckbox } from '@malva-ui/core/checkbox';
+import { normalizeForMatch } from '@malva-ui/core/dropdown';
+import { MlvPopup, MlvPopupContent, MlvPopupTrigger, } from '@malva-ui/core/popup';
+import { MlvSearchField } from '@malva-ui/core/search-field';
+import { MLV_FILTER_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { MlvFilter } from '../filter/filter';
+import * as i0 from "@angular/core";
+/** 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. */
+export class MlvSmartFilterBar {
+    /** @protected Reactive translated strings for filters. */
+    _i18n = inject(MLV_FILTER_I18N);
+    /** @private ICU resolver for parameterized translated strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /** 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 */ []));
+    /** 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 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 Rendered filter hosts used to focus the first invalid field. */
+    _filterHosts = viewChildren(MlvFilter, { ...(ngDevMode ? { debugName: "_filterHosts" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** 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 */ []));
+    /** 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(this._availableSearch().trim());
+        if (!query)
+            return this.definitions();
+        return this.definitions().filter((definition) => normalizeForMatch(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 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);
+            }
+            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 Returns applied conditions for a definition key. */
+    _conditionsFor(key) {
+        return this.filters().find((state) => state.key === key)?.conditions ?? [];
+    }
+    /** @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.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()],
+        };
+    }
+    /** @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 }, 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()", "attr.aria-busy": "loading() || null" }, classAttribute: "mlv-smart-filter-bar" }, viewQueries: [{ propertyName: "_managerPanel", first: true, predicate: ["managerPanel"], descendants: true, isSignal: true }, { propertyName: "_managerButton", first: true, predicate: ["managerButton"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_filterHosts", predicate: MlvFilter, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<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<div\n  class=\"mlv-smart-filter-bar__filters\"\n  [id]=\"_filtersId\"\n  [hidden]=\"!filtersVisible()\"\n>\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      [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\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", styles: [".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: .75rem;display:flex;width:100%;min-width:0;flex-direction:column;gap:var(--mlv-smart-filter-bar-gap);padding:1rem;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:.25rem}.mlv-smart-filter-bar__filter-toolbar{justify-content:flex-end;padding-top:.25rem;border-top:.0625rem solid var(--mlv-border-subtle)}.mlv-smart-filter-bar__filters{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem;padding-block:.25rem}.mlv-smart-filter-bar__filters[hidden]{display:none}.mlv-smart-filter-bar__field{display:flex;max-width:100%;flex-direction:column;align-items:flex-start;gap:.25rem}.mlv-smart-filter-bar__validation-summary{padding:.5rem .625rem;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:.5rem;padding:.625rem .75rem}.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:.75rem .75rem .375rem}.mlv-smart-filter-bar__manager-list{display:flex;max-height:18rem;flex-direction:column;gap:.25rem;overflow-y:auto;padding:.375rem .75rem .75rem}.mlv-smart-filter-bar__manager-option{width:100%}.mlv-smart-filter-bar__manager-option-label{margin-inline-end:.375rem}.mlv-smart-filter-bar__manager-option-status{display:inline-flex;padding:.0625rem .375rem;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:.25rem}.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}}@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"] }, { 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", "options", "editor", "multiple", "allowMultipleConditions", "operators", "operatorLabels", "defaultOperator", "placeholder", "applyMode", "disabled", "loading", "invalid", "ariaDescribedBy", "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: LucideRefreshCw, selector: "svg[lucideRefreshCw]" }, { kind: "component", type: LucideSettings2, selector: "svg[lucideSettings2]" }], 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,
+                        LucideRefreshCw,
+                        LucideSettings2,
+                    ], 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()',
+                        '[attr.aria-busy]': 'loading() || null',
+                    }, template: "<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<div\n  class=\"mlv-smart-filter-bar__filters\"\n  [id]=\"_filtersId\"\n  [hidden]=\"!filtersVisible()\"\n>\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      [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\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", styles: [".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: .75rem;display:flex;width:100%;min-width:0;flex-direction:column;gap:var(--mlv-smart-filter-bar-gap);padding:1rem;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:.25rem}.mlv-smart-filter-bar__filter-toolbar{justify-content:flex-end;padding-top:.25rem;border-top:.0625rem solid var(--mlv-border-subtle)}.mlv-smart-filter-bar__filters{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem;padding-block:.25rem}.mlv-smart-filter-bar__filters[hidden]{display:none}.mlv-smart-filter-bar__field{display:flex;max-width:100%;flex-direction:column;align-items:flex-start;gap:.25rem}.mlv-smart-filter-bar__validation-summary{padding:.5rem .625rem;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:.5rem;padding:.625rem .75rem}.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:.75rem .75rem .375rem}.mlv-smart-filter-bar__manager-list{display:flex;max-height:18rem;flex-direction:column;gap:.25rem;overflow-y:auto;padding:.375rem .75rem .75rem}.mlv-smart-filter-bar__manager-option{width:100%}.mlv-smart-filter-bar__manager-option-label{margin-inline-end:.375rem}.mlv-smart-filter-bar__manager-option-status{display:inline-flex;padding:.0625rem .375rem;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:.25rem}.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}}@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"] }], 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 }] }], _filterHosts: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MlvFilter), { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }] } });
+//# sourceMappingURL=smart-filter-bar.js.map