@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-filter-bar.mjs

@@ -0,0 +1,3107 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, TemplateRef, Directive, ElementRef, afterNextRender, booleanAttribute, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, forwardRef, DestroyRef, signal, effect, untracked, model, numberAttribute, Injector, HostAttributeToken, viewChild, contentChildren, contentChild, afterRenderEffect } from '@angular/core';
+import { parseISODate, parseISOTime, parseISODateTime, isPlainDate, toISODate, isPlainTime, toISOTime, isPlainDateTime, toISODateTime } from '@slotted/core/date';
+import { serializeFilterGroup, defaultOperator, emptyFilter, operandCount, spokenOperator, normalizeFilterGroup, isFilterGroup, operatorsFor, withCondition, removeNodeAt, withGroupJoin, updateNodeAt, insertNodeAt, emptyFilterGroup, ruleFor, describeFilterGroup, isFilterActive, describeFilter, withRuleFor, withoutRuleFor, firstLevelRules } from '@slotted/core/filter';
+import { createRovingTabindex, createRemovalFocus } from '@slotted/core/focus';
+import { filterBarMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+import { SlButton, SlButtonStart, SlIconButton } from '@slotted/angular/button';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlDatePicker } from '@slotted/angular/date-picker';
+import { SlDateTimePicker } from '@slotted/angular/datetime-picker';
+import { SlDrawer, SlDrawerBody, SlDrawerClose, SlDrawerFooter, SlDrawerHeader, SlDrawerTitle } from '@slotted/angular/drawer';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlKbd } from '@slotted/angular/kbd';
+import { SlMenu, SlMenuGroup, SlMenuItem, SlMenuItemIcon, SlMenuRadioGroup, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlMultiSelect, SlMultiSelectItem } from '@slotted/angular/multi-select';
+import { SlNumberField, SlNumberFieldInput } from '@slotted/angular/number-field';
+import { SlPopover, SlPopoverContent, SlPopoverBody, SlPopoverLayer, SlPopoverTrigger } from '@slotted/angular/popover';
+import { SlSegment, SlSegmentedControl } from '@slotted/angular/segmented-control';
+import { SlSelect, SlSelectItem } from '@slotted/angular/select';
+import { SlTextField, SlTextFieldInput, SlTextFieldEnd, SlTextFieldStart } from '@slotted/angular/text-field';
+import { SlTimePicker } from '@slotted/angular/time-picker';
+
+const FILTER_BAR_DEFAULT_APPLY = 'live';
+const FILTER_BAR_DEFAULT_SIZE = 'md';
+const FILTER_BAR_DEFAULT_QUERY_DELAY = 320;
+const FILTER_BAR_DEFAULT_CHIP_LIMIT = 6;
+const FILTER_BAR_DEFAULTS_TOKEN = new InjectionToken('slotted filter-bar defaults', { providedIn: 'root', factory: () => ({}) });
+/**
+ * An application decides once how its bars apply, how long the query waits,
+ * how many chips show, and which key reaches the search. A bar that states any
+ * of those itself still wins. Its words come from the language in force
+ * (`provideSlotted`).
+ */
+function provideFilterBarDefaults(defaults) {
+    return { provide: FILTER_BAR_DEFAULTS_TOKEN, useValue: defaults };
+}
+function injectFilterBarDefaults() {
+    return inject(FILTER_BAR_DEFAULTS_TOKEN);
+}
+
+/**
+ * Every stop of the one toolbar, in DOM order: the arrows walk the pills, each
+ * segment of each chip, more, add, clear and the actions, line after line. A
+ * stop the stylesheet hides at this width is skipped by its visibility.
+ */
+const BAR_ITEMS = [
+    'summary',
+    'pill',
+    'chip-operator',
+    'chip-value',
+    'chip-remove',
+    'more',
+    'add',
+    'clear',
+    'reset',
+    'apply',
+]
+    .map((part) => `[data-part='${part}']`)
+    .join(', ');
+const SEGMENTS = "[data-part='chip-operator'], [data-part='chip-value'], [data-part='chip-remove']";
+/** The bar's narrow breakpoint and the builder's sheet breakpoint, in rems — the stylesheet's. */
+const NARROW_REM = 36;
+const STICKY_TOP = '--slotted-page-sticky-top';
+let counter = 0;
+function remToPx(element, rem) {
+    const size = parseFloat(element.ownerDocument.defaultView?.getComputedStyle(element.ownerDocument.documentElement)
+        .fontSize ?? '16');
+    return rem * (Number.isFinite(size) ? size : 16);
+}
+function sameGroup(a, b) {
+    return serializeFilterGroup(a) === serializeFilterGroup(b);
+}
+function fieldByKey(fields, key) {
+    return fields.find((field) => field.key === key);
+}
+/**
+ * A translator that calls the one an input holds at the moment it is read, so
+ * an editor's template writes `t('key')` and follows both the input and a
+ * change of language.
+ */
+function follow(source) {
+    return ((key, slots) => source()(key, slots));
+}
+/** An operator's name, or the operator itself when the catalog names no such operator. */
+function operatorName(t, operator) {
+    return operator in filterBarMessages.base.operators
+        ? t(`operators.${operator}`)
+        : operator;
+}
+/**
+ * A message's text on either side of one slot, for a sentence that holds a
+ * control: the join chooser stands where `{join}` stands, in the order the
+ * language writes it.
+ */
+function aroundSlot(written) {
+    const mark = '\u0000';
+    const [before = '', after = ''] = written(mark).split(mark);
+    return [before.trim(), after.trim()];
+}
+/** The rule a field starts with: its default, else one empty condition on its default operator. */
+function blankRule(field) {
+    if (field.defaultValue)
+        return field.defaultValue;
+    const operator = field.defaultOperator ?? defaultOperator(field.kind);
+    return emptyFilter(field.kind, operator);
+}
+/**
+ * A condition in the words a chip and a rule card write it with: the operator
+ * as the sentence reads it, and the value — a list of more than two written as
+ * its first two and a count, the whole list kept in `full` for the name and the
+ * title.
+ */
+function ruleWords(t, field, filter) {
+    const kind = filter?.kind ?? field?.kind ?? 'text';
+    const condition = filter?.conditions[0] ?? {
+        operator: field ? (field.defaultOperator ?? defaultOperator(field.kind)) : 'contains',
+    };
+    const operands = operandCount(condition.operator);
+    const operator = operatorName(t, spokenOperator(kind, condition));
+    const write = (value) => field?.options?.find((option) => option.value === value)?.label ?? String(value);
+    const present = (value) => value !== undefined &&
+        value !== null &&
+        value !== '' &&
+        !(Array.isArray(value) && value.length === 0);
+    if (operands === 0)
+        return { operator, value: '', full: '', operands };
+    if (kind === 'set') {
+        const values = (condition.value ?? []).map(write);
+        const full = values.join(', ');
+        const value = values.length > 2
+            ? t('moreValues', { values: values.slice(0, 2).join(', '), count: values.length - 2 })
+            : full;
+        return { operator, value, full, operands };
+    }
+    if (operands === 2) {
+        if (!present(condition.value) || !present(condition.end)) {
+            return { operator, value: '', full: '', operands };
+        }
+        const range = `${write(condition.value)} – ${write(condition.end)}`;
+        return { operator, value: range, full: range, operands };
+    }
+    const value = present(condition.value) ? write(condition.value) : '';
+    return { operator, value, full: value, operands };
+}
+function countActive(group) {
+    const active = normalizeFilterGroup(group);
+    if (!active)
+        return 0;
+    let count = 0;
+    const walk = (node) => {
+        if (isFilterGroup(node))
+            node.rules.forEach(walk);
+        else
+            count += 1;
+    };
+    walk(active);
+    return count;
+}
+function isEditable(element) {
+    if (!element)
+        return false;
+    const tag = element.tagName;
+    return (tag === 'INPUT' ||
+        tag === 'TEXTAREA' ||
+        tag === 'SELECT' ||
+        element.isContentEditable);
+}
+/**
+ * Replaces the operand control of a field's rules. `slFilterBarOperand` names
+ * the field, or `*` for every field. The template is rendered per rule and
+ * never built for a closed surface.
+ */
+class SlFilterBarOperand {
+    field = input.required({ ...(ngDevMode ? { debugName: "field" } : /* istanbul ignore next */ {}), alias: 'slFilterBarOperand' });
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarOperand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlFilterBarOperand, isStandalone: true, selector: "ng-template[slFilterBarOperand]", inputs: { field: { classPropertyName: "field", publicName: "slFilterBarOperand", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarOperand, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[slFilterBarOperand]', standalone: true }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "slFilterBarOperand", required: true }] }] } });
+/**
+ * Writes this family's part name on a control another family's directive
+ * owns. `slButton`, `slIconButton` and `slMenuTriggerFor` each write
+ * `data-part` from their host metadata, which erases the one the template
+ * wrote — the rule the briefing records for `toolbar`'s overflow control — so
+ * the part is written back after the first render, where nothing writes over
+ * it again.
+ */
+class SlFilterBarPart {
+    part = input.required({ ...(ngDevMode ? { debugName: "part" } : /* istanbul ignore next */ {}), alias: 'slFilterBarPart' });
+    host = inject(ElementRef);
+    constructor() {
+        afterNextRender(() => this.host.nativeElement.setAttribute('data-part', this.part()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlFilterBarPart, isStandalone: true, selector: "[slFilterBarPart]", inputs: { part: { classPropertyName: "part", publicName: "slFilterBarPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarPart, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slFilterBarPart]', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { part: [{ type: i0.Input, args: [{ isSignal: true, alias: "slFilterBarPart", required: true }] }] } });
+/** The consumer's own controls, drawn in the `end` slot. */
+class SlFilterBarEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlFilterBarEnd, isStandalone: true, selector: "[slFilterBarEnd]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarEnd, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slFilterBarEnd]', standalone: true }]
+        }] });
+/**
+ * One condition — the operator and its operands — with the operand control the
+ * kind draws, the same choice `table`'s typed filters make, or the consumer's
+ * own template.
+ */
+class SlFilterBarCondition {
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    condition = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "condition" }] : /* istanbul ignore next */ []));
+    /** The bar's words, which the condition speaks in. */
+    translator = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translator" }] : /* istanbul ignore next */ []));
+    size = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    operandTemplates = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operandTemplates" }] : /* istanbul ignore next */ []));
+    /** Draws the operator control. A chip's value popover leaves it to the chip's operator segment. */
+    withOperator = input(true, { ...(ngDevMode ? { debugName: "withOperator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The rule is invalid: the operator select says so itself, edge and ring. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Ids for the two parts, which a rule card's sentence names in `aria-controls`. */
+    ids = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []));
+    applyRequest = output();
+    conditionChange = output();
+    truths = [
+        { label: 'true', value: 'true' },
+        { label: 'false', value: 'false' },
+    ];
+    operators = computed(() => this.field().operators ?? operatorsFor(this.field().kind), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operators" }] : /* istanbul ignore next */ []));
+    operatorItems = computed(() => this.operators().map((operator) => ({ label: this.operatorName(operator), value: operator })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operatorItems" }] : /* istanbul ignore next */ []));
+    slots = computed(() => {
+        const operands = operandCount(this.condition().operator);
+        return operands === 0 ? [] : operands === 1 ? [0] : [0, 1];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
+    customTemplate = computed(() => {
+        const key = this.field().key;
+        const templates = this.operandTemplates();
+        return (templates.find((entry) => entry.field() === key) ??
+            templates.find((entry) => entry.field() === '*'));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customTemplate" }] : /* istanbul ignore next */ []));
+    t = follow(this.translator);
+    operatorName(operator) {
+        return operatorName(this.t, operator);
+    }
+    operandLabel(slot) {
+        if (this.slots().length < 2)
+            return this.t('value');
+        return slot === 0 ? this.t('from') : this.t('to');
+    }
+    operand(slot) {
+        const condition = this.condition();
+        return (slot === 0 ? condition.value : condition.end) ?? null;
+    }
+    numberBound(value) {
+        return typeof value === 'number' ? value : null;
+    }
+    day = (value) => (value ? parseISODate(String(value)) : null);
+    time = (value) => (value ? parseISOTime(String(value)) : null);
+    dateTime = (value) => (value ? parseISODateTime(String(value)) : null);
+    isoDay = (value) => (isPlainDate(value) ? toISODate(value) : null);
+    isoTime = (value) => (isPlainTime(value) ? toISOTime(value, 'minute') : null);
+    isoDateTime = (value) => isPlainDateTime(value) ? toISODateTime(value) : null;
+    setOperator(operator) {
+        const condition = this.condition();
+        const before = operandCount(condition.operator);
+        const after = operandCount(operator);
+        /* An operand the new operator still takes survives the change. */
+        this.conditionChange.emit({
+            operator,
+            ...(after >= 1 && before >= 1 ? { value: condition.value } : {}),
+            ...(after === 2 && before === 2 ? { end: condition.end } : {}),
+        });
+    }
+    setOperand(slot, value) {
+        const condition = this.condition();
+        this.conditionChange.emit(slot === 0 ? { ...condition, value } : { ...condition, end: value });
+    }
+    apply() {
+        this.applyRequest.emit();
+    }
+    context(slot) {
+        const field = this.field();
+        return {
+            $implicit: field,
+            apply: () => this.apply(),
+            field,
+            index: slot,
+            label: this.operandLabel(slot),
+            operator: this.condition().operator,
+            set: (value) => this.setOperand(slot, value),
+            size: this.size(),
+            value: this.operand(slot),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarCondition, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlFilterBarCondition, isStandalone: true, selector: "[slFilterBarCondition]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", isSignal: true, isRequired: true, transformFunction: null }, translator: { classPropertyName: "translator", publicName: "translator", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, operandTemplates: { classPropertyName: "operandTemplates", publicName: "operandTemplates", isSignal: true, isRequired: false, transformFunction: null }, withOperator: { classPropertyName: "withOperator", publicName: "withOperator", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ids: { classPropertyName: "ids", publicName: "ids", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applyRequest: "applyRequest", conditionChange: "conditionChange" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: `
+    @if (withOperator()) {
+      <div data-part="operator" [attr.id]="ids()?.operator ?? null">
+        <sl-select
+          [size]="size()"
+          [fullWidth]="true"
+          [invalid]="invalid() ? true : undefined"
+          [items]="operatorItems()"
+          [attr.aria-label]="t('operator')"
+          [value]="condition().operator"
+          (valueChange)="setOperator($any($event))"
+        >
+          @for (operator of operators(); track operator) {
+            <sl-select-item [value]="operator">{{ operatorName(operator) }}</sl-select-item>
+          }
+        </sl-select>
+      </div>
+    }
+    <div data-part="operand" [attr.id]="ids()?.operand ?? null">
+      @for (slot of slots(); track slot) {
+        @if (customTemplate(); as custom) {
+          <ng-container
+            [ngTemplateOutlet]="custom.template"
+            [ngTemplateOutletContext]="context(slot)"
+          />
+        } @else {
+          @switch (field().kind) {
+            @case ('number') {
+              <div slNumberField [size]="size()">
+                <input
+                  slNumberFieldInput
+                  [value]="$any(operand(slot)) ?? null"
+                  [attr.aria-label]="operandLabel(slot)"
+                  [attr.placeholder]="operandLabel(slot)"
+                  [attr.min]="numberBound(field().min)"
+                  [attr.max]="numberBound(field().max)"
+                  [attr.step]="field().step ?? null"
+                  (valueChange)="setOperand(slot, $event.value)"
+                  (keydown.enter)="apply()"
+                />
+              </div>
+            }
+            @case ('date') {
+              <div
+                slDatePicker
+                [size]="size()"
+                [value]="day(operand(slot))"
+                [min]="day(field().min) ?? undefined"
+                [max]="day(field().max) ?? undefined"
+                [attr.aria-label]="operandLabel(slot)"
+                (valueChange)="setOperand(slot, isoDay($event.value))"
+                (keydown.enter)="apply()"
+              ></div>
+            }
+            @case ('time') {
+              <div
+                slTimePicker
+                [size]="size()"
+                [value]="time(operand(slot))"
+                [attr.aria-label]="operandLabel(slot)"
+                (valueChange)="setOperand(slot, isoTime($event.value))"
+                (keydown.enter)="apply()"
+              ></div>
+            }
+            @case ('datetime') {
+              <div
+                slDateTimePicker
+                [size]="size()"
+                [value]="dateTime(operand(slot))"
+                [attr.aria-label]="operandLabel(slot)"
+                (valueChange)="setOperand(slot, isoDateTime($event.value))"
+                (keydown.enter)="apply()"
+              ></div>
+            }
+            @case ('boolean') {
+              <sl-select
+                [size]="size()"
+                [fullWidth]="true"
+                [items]="truths"
+                [attr.aria-label]="operandLabel(slot)"
+                [value]="operand(slot) === true ? 'true' : operand(slot) === false ? 'false' : null"
+                (valueChange)="setOperand(slot, $event === 'true')"
+              >
+                <sl-select-item value="true">true</sl-select-item>
+                <sl-select-item value="false">false</sl-select-item>
+              </sl-select>
+            }
+            @case ('set') {
+              <sl-multi-select
+                [size]="size()"
+                [items]="field().options ?? []"
+                [placeholder]="operandLabel(slot)"
+                [attr.aria-label]="operandLabel(slot)"
+                [value]="$any(operand(slot)) ?? []"
+                (valueChange)="setOperand(slot, [...$event])"
+              >
+                @for (option of field().options ?? []; track option.value) {
+                  <sl-multi-select-item [value]="option.value" [label]="option.label" />
+                }
+              </sl-multi-select>
+            }
+            @default {
+              <div slTextField [size]="size()">
+                <input
+                  slTextFieldInput
+                  [value]="$any(operand(slot)) ?? ''"
+                  [attr.aria-label]="operandLabel(slot)"
+                  [attr.placeholder]="operandLabel(slot)"
+                  (valueChange)="setOperand(slot, $event.value)"
+                  (keydown.enter)="apply()"
+                />
+              </div>
+            }
+          }
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlDatePicker, selector: "[slDatePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "min", "max", "isDateUnavailable", "selectionMode", "months", "defaultView", "weekNumbers", "fixedWeeks", "locale", "timeZone", "firstDayOfWeek", "yearPivot", "calendar", "size", "variant", "placement", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "name", "messages"], outputs: ["valueChange", "openChange"], exportAs: ["slDatePicker"] }, { kind: "component", type: SlDateTimePicker, selector: "[slDateTimePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "highlighted", "defaultHighlighted", "min", "max", "minTime", "maxTime", "isDateUnavailable", "isTimeUnavailable", "step", "options", "maxOptions", "unavailableOptions", "locale", "timeZone", "hourCycle", "granularity", "calendar", "firstDayOfWeek", "months", "weekNumbers", "referenceDateTime", "size", "variant", "placement", "openTo", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "relative", "name", "messages"], outputs: ["valueChange", "openChange", "highlightedChange"], exportAs: ["slDateTimePicker"] }, { kind: "component", type: SlMultiSelect, selector: "sl-multi-select", inputs: ["value", "defaultValue", "inputValue", "open", "highlightedValue", "aria-label", "placeholder", "name", "form", "items", "total", "locale", "filter", "validateValue", "delimiters", "max", "size", "variant", "side", "align", "width", "mount", "strategy", "openOn", "overflow", "chosenOptions", "messages", "sideOffset", "alignOffset", "collisionPadding", "addOnPaste", "allowDuplicates", "commitOnBlur", "creatable", "editable", "reorderable", "highlightMatch", "clearable", "loop", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "fullWidth", "disabled", "readOnly", "required", "invalid", "loading"], outputs: ["valueChange", "valueChangeRequest", "inputValueChange", "inputValueChangeRequest", "openChange", "openChangeRequest", "highlightedValueChange", "highlightedValueChangeRequest", "valueRefuse", "loadMore"], exportAs: ["slMultiSelect"] }, { kind: "component", type: SlMultiSelectItem, selector: "sl-multi-select-item", inputs: ["value", "label", "disabled", "description", "icon", "position"], exportAs: ["slMultiSelectItem"] }, { kind: "component", type: SlNumberField, selector: "[slNumberField]", inputs: ["size", "variant", "stepper", "messages"], exportAs: ["slNumberField"] }, { kind: "directive", type: SlNumberFieldInput, selector: "input[slNumberFieldInput]", inputs: ["value", "defaultValue", "min", "max", "step", "largeStep", "smallStep", "stepFrom", "snapToStep", "clamp", "format", "formatOn", "locale", "wheel", "disabled", "readOnly", "invalid"], outputs: ["valueChange"], exportAs: ["slNumberFieldInput"] }, { kind: "component", type: SlSelect, selector: "sl-select", inputs: ["value", "open", "highlightedValue", "searchValue", "aria-label", "placeholder", "name", "form", "items", "total", "size", "variant", "side", "align", "width", "mount", "strategy", "messages", "filter", "locale", "sideOffset", "alignOffset", "collisionPadding", "typeaheadTimeout", "multiple", "clearable", "loop", "search", "highlightMatch", "typeahead", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "fullWidth", "disabled", "readOnly", "required", "invalid", "loading"], outputs: ["valueChange", "valueChangeRequest", "openChange", "openChangeRequest", "highlightedValueChange", "highlightedValueChangeRequest", "searchValueChange", "searchValueChangeRequest"], exportAs: ["slSelect"] }, { kind: "component", type: SlSelectItem, selector: "sl-select-item", inputs: ["value", "disabled", "description", "icon", "textValue", "label", "position"], exportAs: ["slSelectItem"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }, { kind: "component", type: SlTimePicker, selector: "[slTimePicker]", inputs: ["value", "defaultValue", "open", "defaultOpen", "highlightedValue", "defaultHighlightedValue", "min", "max", "isTimeUnavailable", "step", "options", "maxOptions", "unavailableOptions", "locale", "timeZone", "hourCycle", "granularity", "referenceTime", "size", "variant", "placement", "closeOnSelect", "disabled", "readOnly", "invalid", "required", "clearable", "relative", "name", "messages"], outputs: ["valueChange", "openChange", "highlightedValueChange"], exportAs: ["slTimePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarCondition, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slFilterBarCondition]',
+                    standalone: true,
+                    imports: [
+                        NgTemplateOutlet,
+                        SlDatePicker,
+                        SlDateTimePicker,
+                        SlMultiSelect,
+                        SlMultiSelectItem,
+                        SlNumberField,
+                        SlNumberFieldInput,
+                        SlSelect,
+                        SlSelectItem,
+                        SlTextField,
+                        SlTextFieldInput,
+                        SlTimePicker,
+                    ],
+                    template: `
+    @if (withOperator()) {
+      <div data-part="operator" [attr.id]="ids()?.operator ?? null">
+        <sl-select
+          [size]="size()"
+          [fullWidth]="true"
+          [invalid]="invalid() ? true : undefined"
+          [items]="operatorItems()"
+          [attr.aria-label]="t('operator')"
+          [value]="condition().operator"
+          (valueChange)="setOperator($any($event))"
+        >
+          @for (operator of operators(); track operator) {
+            <sl-select-item [value]="operator">{{ operatorName(operator) }}</sl-select-item>
+          }
+        </sl-select>
+      </div>
+    }
+    <div data-part="operand" [attr.id]="ids()?.operand ?? null">
+      @for (slot of slots(); track slot) {
+        @if (customTemplate(); as custom) {
+          <ng-container
+            [ngTemplateOutlet]="custom.template"
+            [ngTemplateOutletContext]="context(slot)"
+          />
+        } @else {
+          @switch (field().kind) {
+            @case ('number') {
+              <div slNumberField [size]="size()">
+                <input
+                  slNumberFieldInput
+                  [value]="$any(operand(slot)) ?? null"
+                  [attr.aria-label]="operandLabel(slot)"
+                  [attr.placeholder]="operandLabel(slot)"
+                  [attr.min]="numberBound(field().min)"
+                  [attr.max]="numberBound(field().max)"
+                  [attr.step]="field().step ?? null"
+                  (valueChange)="setOperand(slot, $event.value)"
+                  (keydown.enter)="apply()"
+                />
+              </div>
+            }
+            @case ('date') {
+              <div
+                slDatePicker
+                [size]="size()"
+                [value]="day(operand(slot))"
+                [min]="day(field().min) ?? undefined"
+                [max]="day(field().max) ?? undefined"
+                [attr.aria-label]="operandLabel(slot)"
+                (valueChange)="setOperand(slot, isoDay($event.value))"
+                (keydown.enter)="apply()"
+              ></div>
+            }
+            @case ('time') {
+              <div
+                slTimePicker
+                [size]="size()"
+                [value]="time(operand(slot))"
+                [attr.aria-label]="operandLabel(slot)"
+                (valueChange)="setOperand(slot, isoTime($event.value))"
+                (keydown.enter)="apply()"
+              ></div>
+            }
+            @case ('datetime') {
+              <div
+                slDateTimePicker
+                [size]="size()"
+                [value]="dateTime(operand(slot))"
+                [attr.aria-label]="operandLabel(slot)"
+                (valueChange)="setOperand(slot, isoDateTime($event.value))"
+                (keydown.enter)="apply()"
+              ></div>
+            }
+            @case ('boolean') {
+              <sl-select
+                [size]="size()"
+                [fullWidth]="true"
+                [items]="truths"
+                [attr.aria-label]="operandLabel(slot)"
+                [value]="operand(slot) === true ? 'true' : operand(slot) === false ? 'false' : null"
+                (valueChange)="setOperand(slot, $event === 'true')"
+              >
+                <sl-select-item value="true">true</sl-select-item>
+                <sl-select-item value="false">false</sl-select-item>
+              </sl-select>
+            }
+            @case ('set') {
+              <sl-multi-select
+                [size]="size()"
+                [items]="field().options ?? []"
+                [placeholder]="operandLabel(slot)"
+                [attr.aria-label]="operandLabel(slot)"
+                [value]="$any(operand(slot)) ?? []"
+                (valueChange)="setOperand(slot, [...$event])"
+              >
+                @for (option of field().options ?? []; track option.value) {
+                  <sl-multi-select-item [value]="option.value" [label]="option.label" />
+                }
+              </sl-multi-select>
+            }
+            @default {
+              <div slTextField [size]="size()">
+                <input
+                  slTextFieldInput
+                  [value]="$any(operand(slot)) ?? ''"
+                  [attr.aria-label]="operandLabel(slot)"
+                  [attr.placeholder]="operandLabel(slot)"
+                  (valueChange)="setOperand(slot, $event.value)"
+                  (keydown.enter)="apply()"
+                />
+              </div>
+            }
+          }
+        }
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: { style: 'display: contents' },
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], condition: [{ type: i0.Input, args: [{ isSignal: true, alias: "condition", required: true }] }], translator: [{ type: i0.Input, args: [{ isSignal: true, alias: "translator", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], operandTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "operandTemplates", required: false }] }], withOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "withOperator", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ids: [{ type: i0.Input, args: [{ isSignal: true, alias: "ids", required: false }] }], applyRequest: [{ type: i0.Output, args: ["applyRequest"] }], conditionChange: [{ type: i0.Output, args: ["conditionChange"] }] } });
+/**
+ * One rule row in the builder: its sentence, field, operator, operand, remove.
+ * The sentence heads the card the stylesheet draws while the builder is
+ * narrow, and pressing it expands the card.
+ */
+class SlFilterBarRule {
+    rule = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rule" }] : /* istanbul ignore next */ []));
+    fields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    /** The bar's words, which the rule speaks in. */
+    translator = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translator" }] : /* istanbul ignore next */ []));
+    size = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    operandTemplates = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operandTemplates" }] : /* istanbul ignore next */ []));
+    removable = input(true, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The rule's path inside the root, which names its card. */
+    path = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    /** The one card open in the builder, by its path joined with dots. */
+    expanded = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    ruleChange = output();
+    removeRequest = output();
+    applyRequest = output();
+    expandedChange = output();
+    id = `slotted-filter-bar-rule-${(counter += 1)}`;
+    t = follow(this.translator);
+    key = computed(() => this.path().join('.'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    isExpanded = computed(() => this.expanded() === this.key(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    field = computed(() => fieldByKey(this.fields(), this.rule().field), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    condition = computed(() => {
+        const field = this.field();
+        return (this.rule().filter.conditions[0] ?? {
+            operator: field ? (field.defaultOperator ?? defaultOperator(field.kind)) : 'contains',
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "condition" }] : /* istanbul ignore next */ []));
+    operands = computed(() => this.field() ? operandCount(this.condition().operator) : 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operands" }] : /* istanbul ignore next */ []));
+    fieldItems = computed(() => this.fields().map((entry) => ({ label: entry.label, value: entry.key })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldItems" }] : /* istanbul ignore next */ []));
+    words = computed(() => ruleWords(this.t, this.field(), this.rule().filter), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "words" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.field()?.label ?? this.t('unknownField', { field: this.rule().field }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    changeField(key) {
+        const next = fieldByKey(this.fields(), key);
+        if (!next)
+            return;
+        this.ruleChange.emit({ field: key, filter: blankRule(next) });
+    }
+    changeCondition(condition) {
+        const rule = this.rule();
+        this.ruleChange.emit({
+            field: rule.field,
+            filter: withCondition(rule.filter, 0, condition),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarRule, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlFilterBarRule, isStandalone: true, selector: "[slFilterBarRule]", inputs: { rule: { classPropertyName: "rule", publicName: "rule", isSignal: true, isRequired: true, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, translator: { classPropertyName: "translator", publicName: "translator", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, operandTemplates: { classPropertyName: "operandTemplates", publicName: "operandTemplates", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ruleChange: "ruleChange", removeRequest: "removeRequest", applyRequest: "applyRequest", expandedChange: "expandedChange" }, host: { attributes: { "data-part": "rule" }, properties: { "attr.data-kind": "field()?.kind ?? null", "attr.data-operands": "operands()", "attr.data-invalid": "invalid() || !field() ? \"\" : null", "attr.data-expanded": "isExpanded() ? \"\" : null" } }, ngImport: i0, template: `
+    <button
+      data-part="rule-summary"
+      type="button"
+      [attr.aria-expanded]="isExpanded()"
+      [attr.aria-controls]="id + '-field ' + id + '-operator ' + id + '-operand'"
+      (click)="expandedChange.emit(isExpanded() ? null : key())"
+    >
+      <span data-sentence
+        ><span data-field>{{ label() }}</span
+        >&ngsp;<span data-operator>{{ words().operator }}</span>
+        @if (words().operands > 0) {
+          &ngsp;<span data-value>{{ words().value || t('noValue') }}</span>
+        }
+      </span>
+      <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <div data-part="field" [id]="id + '-field'">
+      <sl-select
+        [size]="size()"
+        [fullWidth]="true"
+        [invalid]="invalid() || !field() ? true : undefined"
+        [items]="fieldItems()"
+        [attr.aria-label]="t('field')"
+        [value]="rule().field"
+        (valueChange)="changeField($any($event))"
+      >
+        @for (entry of fields(); track entry.key) {
+          <sl-select-item [value]="entry.key">{{ entry.label }}</sl-select-item>
+        }
+      </sl-select>
+    </div>
+    @if (field(); as known) {
+      <div
+        slFilterBarCondition
+        [field]="known"
+        [condition]="condition()"
+        [translator]="translator()"
+        [size]="size()"
+        [operandTemplates]="operandTemplates()"
+        [ids]="{ operator: id + '-operator', operand: id + '-operand' }"
+        [invalid]="invalid()"
+        (conditionChange)="changeCondition($event)"
+        (applyRequest)="applyRequest.emit()"
+      ></div>
+    } @else {
+      <div data-part="operator" [id]="id + '-operator'"></div>
+      <div data-part="operand" [id]="id + '-operand'"></div>
+    }
+    @if (removable()) {
+      <button
+        data-part="remove"
+        type="button"
+        [attr.aria-label]="t('removeRule')"
+        (click)="removeRequest.emit()"
+      >
+        <span slIcon><svg slGlyph name="x"></svg></span>
+      </button>
+    } @else {
+      <span></span>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SlFilterBarCondition, selector: "[slFilterBarCondition]", inputs: ["field", "condition", "translator", "size", "operandTemplates", "withOperator", "invalid", "ids"], outputs: ["applyRequest", "conditionChange"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlSelect, selector: "sl-select", inputs: ["value", "open", "highlightedValue", "searchValue", "aria-label", "placeholder", "name", "form", "items", "total", "size", "variant", "side", "align", "width", "mount", "strategy", "messages", "filter", "locale", "sideOffset", "alignOffset", "collisionPadding", "typeaheadTimeout", "multiple", "clearable", "loop", "search", "highlightMatch", "typeahead", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "fullWidth", "disabled", "readOnly", "required", "invalid", "loading"], outputs: ["valueChange", "valueChangeRequest", "openChange", "openChangeRequest", "highlightedValueChange", "highlightedValueChangeRequest", "searchValueChange", "searchValueChangeRequest"], exportAs: ["slSelect"] }, { kind: "component", type: SlSelectItem, selector: "sl-select-item", inputs: ["value", "disabled", "description", "icon", "textValue", "label", "position"], exportAs: ["slSelectItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarRule, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slFilterBarRule]',
+                    standalone: true,
+                    imports: [SlFilterBarCondition, SlGlyph, SlIcon, SlSelect, SlSelectItem],
+                    template: `
+    <button
+      data-part="rule-summary"
+      type="button"
+      [attr.aria-expanded]="isExpanded()"
+      [attr.aria-controls]="id + '-field ' + id + '-operator ' + id + '-operand'"
+      (click)="expandedChange.emit(isExpanded() ? null : key())"
+    >
+      <span data-sentence
+        ><span data-field>{{ label() }}</span
+        >&ngsp;<span data-operator>{{ words().operator }}</span>
+        @if (words().operands > 0) {
+          &ngsp;<span data-value>{{ words().value || t('noValue') }}</span>
+        }
+      </span>
+      <span slIcon><svg slGlyph name="chevron-down"></svg></span>
+    </button>
+    <div data-part="field" [id]="id + '-field'">
+      <sl-select
+        [size]="size()"
+        [fullWidth]="true"
+        [invalid]="invalid() || !field() ? true : undefined"
+        [items]="fieldItems()"
+        [attr.aria-label]="t('field')"
+        [value]="rule().field"
+        (valueChange)="changeField($any($event))"
+      >
+        @for (entry of fields(); track entry.key) {
+          <sl-select-item [value]="entry.key">{{ entry.label }}</sl-select-item>
+        }
+      </sl-select>
+    </div>
+    @if (field(); as known) {
+      <div
+        slFilterBarCondition
+        [field]="known"
+        [condition]="condition()"
+        [translator]="translator()"
+        [size]="size()"
+        [operandTemplates]="operandTemplates()"
+        [ids]="{ operator: id + '-operator', operand: id + '-operand' }"
+        [invalid]="invalid()"
+        (conditionChange)="changeCondition($event)"
+        (applyRequest)="applyRequest.emit()"
+      ></div>
+    } @else {
+      <div data-part="operator" [id]="id + '-operator'"></div>
+      <div data-part="operand" [id]="id + '-operand'"></div>
+    }
+    @if (removable()) {
+      <button
+        data-part="remove"
+        type="button"
+        [attr.aria-label]="t('removeRule')"
+        (click)="removeRequest.emit()"
+      >
+        <span slIcon><svg slGlyph name="x"></svg></span>
+      </button>
+    } @else {
+      <span></span>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'rule',
+                        '[attr.data-kind]': 'field()?.kind ?? null',
+                        '[attr.data-operands]': 'operands()',
+                        '[attr.data-invalid]': 'invalid() || !field() ? "" : null',
+                        '[attr.data-expanded]': 'isExpanded() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { rule: [{ type: i0.Input, args: [{ isSignal: true, alias: "rule", required: true }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], translator: [{ type: i0.Input, args: [{ isSignal: true, alias: "translator", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], operandTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "operandTemplates", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], ruleChange: [{ type: i0.Output, args: ["ruleChange"] }], removeRequest: [{ type: i0.Output, args: ["removeRequest"] }], applyRequest: [{ type: i0.Output, args: ["applyRequest"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+/**
+ * A group: its join, its rules and groups in order, and the controls that grow
+ * it. Recursive, so a group holds a group; the depth is on the element for the
+ * rail the stylesheet draws.
+ */
+class SlFilterBarGroup {
+    group = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    path = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    root = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+    fields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    /** The bar's words, which the group speaks in. */
+    translator = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translator" }] : /* istanbul ignore next */ []));
+    size = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    operandTemplates = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operandTemplates" }] : /* istanbul ignore next */ []));
+    /** The one rule card open in the builder, by its path joined with dots. */
+    expanded = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    rootChange = output();
+    applyRequest = output();
+    expandedChange = output();
+    t = follow(this.translator);
+    joinWord = computed(() => this.group().join === 'and' ? this.t('matchAll') : this.t('matchAny'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "joinWord" }] : /* istanbul ignore next */ []));
+    /** The words of `matches` before and after the join chooser, which stands in its `{join}`. */
+    aroundJoin = computed(() => aroundSlot((join) => this.t('matches', { join })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aroundJoin" }] : /* istanbul ignore next */ []));
+    removeNodeAt = removeNodeAt;
+    firstField = computed(() => this.fields()[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstField" }] : /* istanbul ignore next */ []));
+    buttonSize = computed(() => (this.size() === 'lg' ? 'md' : 'sm'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
+    isGroup(node) {
+        return isFilterGroup(node);
+    }
+    isRequired(rule) {
+        return fieldByKey(this.fields(), rule.field)?.required === true;
+    }
+    childPath(index) {
+        return [...this.path(), index];
+    }
+    setJoin(join) {
+        this.rootChange.emit(withGroupJoin(this.root(), this.path(), join));
+    }
+    replace(index, rule) {
+        this.rootChange.emit(updateNodeAt(this.root(), this.childPath(index), rule));
+    }
+    remove(index) {
+        this.rootChange.emit(removeNodeAt(this.root(), this.childPath(index)));
+    }
+    /* A rule just added opens as an expanded card, where its three controls are. */
+    addRule() {
+        const field = this.firstField();
+        if (!field)
+            return;
+        const at = this.group().rules.length;
+        this.rootChange.emit(insertNodeAt(this.root(), this.path(), { field: field.key, filter: blankRule(field) }));
+        this.expandedChange.emit([...this.path(), at].join('.'));
+    }
+    addGroup() {
+        const field = this.firstField();
+        if (!field)
+            return;
+        const at = this.group().rules.length;
+        this.rootChange.emit(insertNodeAt(this.root(), this.path(), {
+            join: this.group().join === 'and' ? 'or' : 'and',
+            rules: [{ field: field.key, filter: blankRule(field) }],
+        }));
+        this.expandedChange.emit([...this.path(), at, 0].join('.'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlFilterBarGroup, isStandalone: true, selector: "fieldset[slFilterBarGroup]", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: true, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, translator: { classPropertyName: "translator", publicName: "translator", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, operandTemplates: { classPropertyName: "operandTemplates", publicName: "operandTemplates", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rootChange: "rootChange", applyRequest: "applyRequest", expandedChange: "expandedChange" }, host: { attributes: { "data-part": "group" }, properties: { "attr.data-depth": "path().length" } }, ngImport: i0, template: `
+    <legend>{{ t('matches', { join: joinWord() }) }}</legend>
+    <div data-part="join">
+      @if (aroundJoin()[0]) {
+        <span>{{ aroundJoin()[0] }}</span>
+      }
+      <div
+        slSegmentedControl
+        size="sm"
+        [attr.aria-label]="t('match')"
+        [value]="group().join"
+        (valueChange)="setJoin($event.value ?? 'and')"
+      >
+        <label slSegment value="and">{{ t('matchAll') }}</label>
+        <label slSegment value="or">{{ t('matchAny') }}</label>
+      </div>
+      @if (aroundJoin()[1]) {
+        <span>{{ aroundJoin()[1] }}</span>
+      }
+      @if (path().length > 0) {
+        <button
+          slIconButton
+          slFilterBarPart="remove-group"
+          type="button"
+          tone="secondary"
+          variant="ghost"
+          [size]="buttonSize()"
+          [attr.aria-label]="t('removeGroup')"
+          [attr.title]="t('removeGroup')"
+          (click)="rootChange.emit(removeNodeAt(root(), path()))"
+        >
+          <span slIcon><svg slGlyph name="trash"></svg></span>
+        </button>
+      }
+    </div>
+    <div data-part="rules">
+      @for (node of group().rules; track $index) {
+        <span data-part="conjunction">{{
+          $index === 0 ? t('where') : t(group().join === 'and' ? 'joins.and' : 'joins.or')
+        }}</span>
+        @if (isGroup(node)) {
+          <fieldset
+            slFilterBarGroup
+            [group]="$any(node)"
+            [path]="childPath($index)"
+            [root]="root()"
+            [fields]="fields()"
+            [translator]="translator()"
+            [size]="size()"
+            [operandTemplates]="operandTemplates()"
+            [expanded]="expanded()"
+            (expandedChange)="expandedChange.emit($event)"
+            (rootChange)="rootChange.emit($event)"
+            (applyRequest)="applyRequest.emit()"
+          ></fieldset>
+        } @else {
+          <div
+            slFilterBarRule
+            [rule]="$any(node)"
+            [path]="childPath($index)"
+            [fields]="fields()"
+            [translator]="translator()"
+            [size]="size()"
+            [operandTemplates]="operandTemplates()"
+            [removable]="!isRequired($any(node))"
+            [expanded]="expanded()"
+            (expandedChange)="expandedChange.emit($event)"
+            (ruleChange)="replace($index, $event)"
+            (removeRequest)="remove($index)"
+            (applyRequest)="applyRequest.emit()"
+          ></div>
+        }
+      }
+    </div>
+    <div data-part="actions">
+      <button
+        slButton
+        slFilterBarPart="add-rule"
+        type="button"
+        tone="secondary"
+        [variant]="path().length === 0 ? 'outline' : 'ghost'"
+        [size]="buttonSize()"
+        [disabled]="!firstField()"
+        (click)="addRule()"
+      >
+        <span slButtonStart
+          ><span slIcon><svg slGlyph name="plus"></svg></span
+        ></span>
+        {{ t('addRule') }}
+      </button>
+      <button
+        slButton
+        slFilterBarPart="add-group"
+        type="button"
+        tone="secondary"
+        [variant]="path().length === 0 ? 'outline' : 'ghost'"
+        [size]="buttonSize()"
+        [disabled]="!firstField()"
+        (click)="addGroup()"
+      >
+        <span slButtonStart
+          ><span slIcon><svg slGlyph name="plus"></svg></span
+        ></span>
+        {{ t('addGroup') }}
+      </button>
+      @if (path().length === 0) {
+        <ng-content></ng-content>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => SlFilterBarGroup), selector: "fieldset[slFilterBarGroup]", inputs: ["group", "path", "root", "fields", "translator", "size", "operandTemplates", "expanded"], outputs: ["rootChange", "applyRequest", "expandedChange"] }, { kind: "component", type: i0.forwardRef(() => SlButton), selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: i0.forwardRef(() => SlButtonStart), selector: "[slButtonStart]", exportAs: ["slButtonStart"] }, { kind: "directive", type: i0.forwardRef(() => SlFilterBarPart), selector: "[slFilterBarPart]", inputs: ["slFilterBarPart"] }, { kind: "component", type: i0.forwardRef(() => SlFilterBarRule), selector: "[slFilterBarRule]", inputs: ["rule", "fields", "translator", "size", "operandTemplates", "removable", "invalid", "path", "expanded"], outputs: ["ruleChange", "removeRequest", "applyRequest", "expandedChange"] }, { kind: "component", type: i0.forwardRef(() => SlGlyph), selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: i0.forwardRef(() => SlIcon), selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: i0.forwardRef(() => SlIconButton), selector: "button[slIconButton]", inputs: ["disabled", "focusableWhenDisabled", "loading", "loadingDelay", "messages", "shape", "size", "tone", "type", "variant", "pressed", "defaultPressed"], outputs: ["pressedChange"], exportAs: ["slIconButton"] }, { kind: "component", type: i0.forwardRef(() => SlSegment), selector: "[slSegment]", inputs: ["value", "disabled"], exportAs: ["slSegment"] }, { kind: "component", type: i0.forwardRef(() => SlSegmentedControl), selector: "[slSegmentedControl]", inputs: ["value", "defaultValue", "name", "size", "orientation", "condense", "fullWidth", "disabled", "readOnly", "invalid", "required"], outputs: ["valueChange"], exportAs: ["slSegmentedControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fieldset[slFilterBarGroup]',
+                    standalone: true,
+                    imports: [
+                        forwardRef(() => SlFilterBarGroup),
+                        SlButton,
+                        SlButtonStart,
+                        SlFilterBarPart,
+                        SlFilterBarRule,
+                        SlGlyph,
+                        SlIcon,
+                        SlIconButton,
+                        SlSegment,
+                        SlSegmentedControl,
+                    ],
+                    template: `
+    <legend>{{ t('matches', { join: joinWord() }) }}</legend>
+    <div data-part="join">
+      @if (aroundJoin()[0]) {
+        <span>{{ aroundJoin()[0] }}</span>
+      }
+      <div
+        slSegmentedControl
+        size="sm"
+        [attr.aria-label]="t('match')"
+        [value]="group().join"
+        (valueChange)="setJoin($event.value ?? 'and')"
+      >
+        <label slSegment value="and">{{ t('matchAll') }}</label>
+        <label slSegment value="or">{{ t('matchAny') }}</label>
+      </div>
+      @if (aroundJoin()[1]) {
+        <span>{{ aroundJoin()[1] }}</span>
+      }
+      @if (path().length > 0) {
+        <button
+          slIconButton
+          slFilterBarPart="remove-group"
+          type="button"
+          tone="secondary"
+          variant="ghost"
+          [size]="buttonSize()"
+          [attr.aria-label]="t('removeGroup')"
+          [attr.title]="t('removeGroup')"
+          (click)="rootChange.emit(removeNodeAt(root(), path()))"
+        >
+          <span slIcon><svg slGlyph name="trash"></svg></span>
+        </button>
+      }
+    </div>
+    <div data-part="rules">
+      @for (node of group().rules; track $index) {
+        <span data-part="conjunction">{{
+          $index === 0 ? t('where') : t(group().join === 'and' ? 'joins.and' : 'joins.or')
+        }}</span>
+        @if (isGroup(node)) {
+          <fieldset
+            slFilterBarGroup
+            [group]="$any(node)"
+            [path]="childPath($index)"
+            [root]="root()"
+            [fields]="fields()"
+            [translator]="translator()"
+            [size]="size()"
+            [operandTemplates]="operandTemplates()"
+            [expanded]="expanded()"
+            (expandedChange)="expandedChange.emit($event)"
+            (rootChange)="rootChange.emit($event)"
+            (applyRequest)="applyRequest.emit()"
+          ></fieldset>
+        } @else {
+          <div
+            slFilterBarRule
+            [rule]="$any(node)"
+            [path]="childPath($index)"
+            [fields]="fields()"
+            [translator]="translator()"
+            [size]="size()"
+            [operandTemplates]="operandTemplates()"
+            [removable]="!isRequired($any(node))"
+            [expanded]="expanded()"
+            (expandedChange)="expandedChange.emit($event)"
+            (ruleChange)="replace($index, $event)"
+            (removeRequest)="remove($index)"
+            (applyRequest)="applyRequest.emit()"
+          ></div>
+        }
+      }
+    </div>
+    <div data-part="actions">
+      <button
+        slButton
+        slFilterBarPart="add-rule"
+        type="button"
+        tone="secondary"
+        [variant]="path().length === 0 ? 'outline' : 'ghost'"
+        [size]="buttonSize()"
+        [disabled]="!firstField()"
+        (click)="addRule()"
+      >
+        <span slButtonStart
+          ><span slIcon><svg slGlyph name="plus"></svg></span
+        ></span>
+        {{ t('addRule') }}
+      </button>
+      <button
+        slButton
+        slFilterBarPart="add-group"
+        type="button"
+        tone="secondary"
+        [variant]="path().length === 0 ? 'outline' : 'ghost'"
+        [size]="buttonSize()"
+        [disabled]="!firstField()"
+        (click)="addGroup()"
+      >
+        <span slButtonStart
+          ><span slIcon><svg slGlyph name="plus"></svg></span
+        ></span>
+        {{ t('addGroup') }}
+      </button>
+      @if (path().length === 0) {
+        <ng-content></ng-content>
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-part': 'group',
+                        '[attr.data-depth]': 'path().length',
+                    },
+                }]
+        }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: true }] }], fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], translator: [{ type: i0.Input, args: [{ isSignal: true, alias: "translator", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], operandTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "operandTemplates", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], rootChange: [{ type: i0.Output, args: ["rootChange"] }], applyRequest: [{ type: i0.Output, args: ["applyRequest"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+/**
+ * One rule in a popover. Under `live` every change is requested at once — a
+ * text or number operand after `queryDelay`, so a query does not fire per
+ * keystroke — and Done closes; under `manual` the change goes to the draft the
+ * same way. Clear removes the rule, which a required field refuses.
+ */
+class SlFilterBarRuleEditor {
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    current = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** The bar's words, which the editor speaks in. */
+    translator = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "translator" }] : /* istanbul ignore next */ []));
+    size = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    operandTemplates = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operandTemplates" }] : /* istanbul ignore next */ []));
+    queryDelay = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryDelay" }] : /* istanbul ignore next */ []));
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Draws the operator control: a chip's value popover leaves it to the chip. */
+    withOperator = input(true, { ...(ngDevMode ? { debugName: "withOperator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    ruleChange = output();
+    doneRequest = output();
+    t = follow(this.translator);
+    destroyRef = inject(DestroyRef);
+    local = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "local" }] : /* istanbul ignore next */ []));
+    timer;
+    draft = computed(() => this.local() ?? this.current() ?? blankRule(this.field()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    condition = computed(() => this.draft().conditions[0] ?? {
+        operator: this.field().defaultOperator ?? defaultOperator(this.field().kind),
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "condition" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* A change made elsewhere — the chip's operator segment — reaches the
+           editor unless a keystroke is still waiting. */
+        effect(() => {
+            this.current();
+            untracked(() => {
+                if (this.timer === undefined)
+                    this.local.set(null);
+            });
+        });
+        this.destroyRef.onDestroy(() => clearTimeout(this.timer));
+    }
+    change(condition) {
+        const next = { ...this.draft(), conditions: [condition] };
+        this.local.set(next);
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        const kind = this.field().kind;
+        const debounced = (kind === 'text' || kind === 'number') && this.queryDelay() > 0;
+        if (!debounced) {
+            this.ruleChange.emit(next);
+            return;
+        }
+        this.timer = setTimeout(() => {
+            this.timer = undefined;
+            this.ruleChange.emit(next);
+        }, this.queryDelay());
+    }
+    done() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+            this.ruleChange.emit(this.draft());
+        }
+        this.doneRequest.emit();
+    }
+    clear() {
+        clearTimeout(this.timer);
+        this.timer = undefined;
+        this.local.set(null);
+        this.ruleChange.emit(null);
+        this.doneRequest.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarRuleEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlFilterBarRuleEditor, isStandalone: true, selector: "[slFilterBarRuleEditor]", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, translator: { classPropertyName: "translator", publicName: "translator", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, operandTemplates: { classPropertyName: "operandTemplates", publicName: "operandTemplates", isSignal: true, isRequired: false, transformFunction: null }, queryDelay: { classPropertyName: "queryDelay", publicName: "queryDelay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, withOperator: { classPropertyName: "withOperator", publicName: "withOperator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ruleChange: "ruleChange", doneRequest: "doneRequest" }, host: { attributes: { "data-ui": "filter-bar", "data-part": "rule" }, properties: { "attr.data-kind": "field().kind", "attr.data-invalid": "invalid() ? \"\" : null" } }, ngImport: i0, template: `
+    <div
+      slFilterBarCondition
+      [field]="field()"
+      [condition]="condition()"
+      [translator]="translator()"
+      [size]="size()"
+      [operandTemplates]="operandTemplates()"
+      [withOperator]="withOperator()"
+      [invalid]="invalid()"
+      (conditionChange)="change($event)"
+      (applyRequest)="done()"
+    ></div>
+    <div data-part="actions">
+      <button
+        slButton
+        type="button"
+        size="sm"
+        tone="secondary"
+        variant="ghost"
+        [disabled]="field().required === true"
+        (click)="clear()"
+      >
+        {{ t('clearRule') }}
+      </button>
+      <button slButton type="button" size="sm" (click)="done()">{{ t('done') }}</button>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlFilterBarCondition, selector: "[slFilterBarCondition]", inputs: ["field", "condition", "translator", "size", "operandTemplates", "withOperator", "invalid", "ids"], outputs: ["applyRequest", "conditionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBarRuleEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[slFilterBarRuleEditor]',
+                    standalone: true,
+                    imports: [SlButton, SlFilterBarCondition],
+                    template: `
+    <div
+      slFilterBarCondition
+      [field]="field()"
+      [condition]="condition()"
+      [translator]="translator()"
+      [size]="size()"
+      [operandTemplates]="operandTemplates()"
+      [withOperator]="withOperator()"
+      [invalid]="invalid()"
+      (conditionChange)="change($event)"
+      (applyRequest)="done()"
+    ></div>
+    <div data-part="actions">
+      <button
+        slButton
+        type="button"
+        size="sm"
+        tone="secondary"
+        variant="ghost"
+        [disabled]="field().required === true"
+        (click)="clear()"
+      >
+        {{ t('clearRule') }}
+      </button>
+      <button slButton type="button" size="sm" (click)="done()">{{ t('done') }}</button>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'data-ui': 'filter-bar',
+                        'data-part': 'rule',
+                        '[attr.data-kind]': 'field().kind',
+                        '[attr.data-invalid]': 'invalid() ? "" : null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], translator: [{ type: i0.Input, args: [{ isSignal: true, alias: "translator", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], operandTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "operandTemplates", required: false }] }], queryDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryDelay", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], withOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "withOperator", required: false }] }], ruleChange: [{ type: i0.Output, args: ["ruleChange"] }], doneRequest: [{ type: i0.Output, args: ["doneRequest"] }] } });
+/**
+ * A bar above a listing that edits one value: a tree of conditions over the
+ * listing's fields, whose leaves are the descriptor `table` edits in a column
+ * header. The bar draws the first level — a search field, a pill per pinned
+ * field without a condition, a chip of segments per condition — and opens a
+ * drawer on the whole tree.
+ *
+ * The family applies nothing. It reports the tree and the query, and
+ * `createFilterGroupPredicate` and `createSearchPredicate` in
+ * `@slotted/core/filter` are what a consumer applies to its own rows.
+ */
+class SlFilterBar {
+    /** The fields the listing can be filtered by, in the order the add menu lists them. */
+    fields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    /** The tree. Present is controlled, for the life of the bar. */
+    value = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Where an uncontrolled tree starts, read once. */
+    defaultValue = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+    /** The global query. */
+    query = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    defaultQuery = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultQuery" }] : /* istanbul ignore next */ []));
+    presets = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    preset = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preset" }] : /* istanbul ignore next */ []));
+    defaultPreset = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultPreset" }] : /* istanbul ignore next */ []));
+    /** Whether the builder is open. */
+    open = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the chips past `chipLimit` are shown. */
+    revealed = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
+    defaultRevealed = input(false, { ...(ngDevMode ? { debugName: "defaultRevealed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The five effective values: the model when it is set, the default otherwise. */
+    currentValue = computed(() => this.value() ?? this.defaultValue(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    currentQuery = computed(() => this.query() ?? this.defaultQuery(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentQuery" }] : /* istanbul ignore next */ []));
+    currentPreset = computed(() => this.preset() ?? this.defaultPreset(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentPreset" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => this.open() ?? this.defaultOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    isRevealed = computed(() => this.revealed() ?? this.defaultRevealed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRevealed" }] : /* istanbul ignore next */ []));
+    apply = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "apply" }] : /* istanbul ignore next */ []));
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** A parent for the builder's drawer alone, instead of the shared portal root. */
+    container = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    queryDelay = input(undefined, { ...(ngDevMode ? { debugName: "queryDelay" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    chipLimit = input(undefined, { ...(ngDevMode ? { debugName: "chipLimit" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    shortcut = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** The conditions can be read and reached, and nothing changes them. */
+    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The number of rows the filter kept, and the number there are. Written by
+     * the `count` message, or `countOnly` without a total, in the digits of the
+     * language in force.
+     */
+    count = input(undefined, { ...(ngDevMode ? { debugName: "count" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    total = input(undefined, { ...(ngDevMode ? { debugName: "total" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : numberAttribute(value)) });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * landmark's name (`bar`), the controls, the chips' names, the count and the
+     * announcements.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** The requests behind every committed change, each with the reason it carries. */
+    valueChangeRequest = output();
+    queryChangeRequest = output();
+    presetChangeRequest = output();
+    openChangeRequest = output();
+    revealedChangeRequest = output();
+    /** Draws the save-as-view control in the builder. */
+    savePresetEnabled = input(false, { ...(ngDevMode ? { debugName: "savePresetEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Asks the application to save the tree as a view. */
+    savePreset = output();
+    defaults = injectFilterBarDefaults();
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    ariaLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    searchInput = viewChild.required('search', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
+    barElement = viewChild.required('barRow', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barElement" }] : /* istanbul ignore next */ []));
+    operandTemplates = contentChildren(SlFilterBarOperand, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operandTemplates" }] : /* istanbul ignore next */ []));
+    endSlot = contentChild(SlFilterBarEnd, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endSlot" }] : /* istanbul ignore next */ []));
+    id = `slotted-filter-bar-${(counter += 1)}`;
+    empty = emptyFilterGroup();
+    /** The family's words in the language in force, with this bar's `messages` laid over them. */
+    t = injectMessages(filterBarMessages, this.messages);
+    applyValue = computed(() => this.apply() ?? this.defaults.apply ?? FILTER_BAR_DEFAULT_APPLY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "applyValue" }] : /* istanbul ignore next */ []));
+    sizeValue = computed(() => this.size() ?? this.defaults.size ?? FILTER_BAR_DEFAULT_SIZE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
+    queryDelayValue = computed(() => this.queryDelay() ?? this.defaults.queryDelay ?? FILTER_BAR_DEFAULT_QUERY_DELAY, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "queryDelayValue" }] : /* istanbul ignore next */ []));
+    chipLimitValue = computed(() => this.chipLimit() ?? this.defaults.chipLimit ?? FILTER_BAR_DEFAULT_CHIP_LIMIT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipLimitValue" }] : /* istanbul ignore next */ []));
+    shortcutValue = computed(() => {
+        const own = this.shortcut();
+        return own === undefined ? (this.defaults.shortcut ?? null) : own;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shortcutValue" }] : /* istanbul ignore next */ []));
+    locked = computed(() => this.disabled() || this.readOnly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []));
+    /* ── State the bar owns ────────────────────────────────────────────── */
+    draft = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    invalid = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    pending = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    /** Which chip's value popover is open, by its field key. */
+    valueOpen = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueOpen" }] : /* istanbul ignore next */ []));
+    /** The one rule card open in the builder's card form, by its path. */
+    expanded = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    drawerDraft = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawerDraft" }] : /* istanbul ignore next */ []));
+    /** Whether the bar is under its narrow breakpoint: an edit then goes to the builder. */
+    narrow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "narrow" }] : /* istanbul ignore next */ []));
+    /** Whether the viewport is under the sheet breakpoint: the builder then comes up from the bottom. */
+    sheet = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sheet" }] : /* istanbul ignore next */ []));
+    typed = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []));
+    /** A tree the builder opens on instead of the shown one: a rule the reader just started. */
+    seed = null;
+    timer;
+    shown = computed(() => {
+        const draft = this.draft();
+        return this.applyValue() === 'manual' && draft ? draft.value : this.currentValue();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    shownQuery = computed(() => {
+        const typed = this.typed();
+        if (typed !== null)
+            return typed;
+        const draft = this.draft();
+        return this.applyValue() === 'manual' && draft ? draft.query : this.currentQuery();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownQuery" }] : /* istanbul ignore next */ []));
+    dirty = computed(() => {
+        const draft = this.draft();
+        return (this.applyValue() === 'manual' &&
+            draft !== null &&
+            (!sameGroup(draft.value, this.currentValue()) || draft.query !== this.currentQuery()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    presetDirty = computed(() => {
+        const chosen = this.presets()?.find((entry) => entry.key === this.currentPreset());
+        return (chosen !== undefined && !sameGroup(normalizeFilterGroup(chosen.value), this.currentValue()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetDirty" }] : /* istanbul ignore next */ []));
+    format = computed(() => {
+        const fields = this.fields();
+        return {
+            field: (key) => fieldByKey(fields, key)?.label ?? key,
+            join: (join) => this.t(join === 'and' ? 'joins.and' : 'joins.or'),
+            operator: (operator) => operatorName(this.t, operator),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    required = computed(() => this.fields().filter((field) => field.required), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    pinned = computed(() => this.fields().filter((field) => field.pinned || field.required), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
+    pinnedKeys = computed(() => new Set(this.pinned().map((field) => field.key)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pinnedKeys" }] : /* istanbul ignore next */ []));
+    activeCount = computed(() => countActive(this.shown()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeCount" }] : /* istanbul ignore next */ []));
+    draftActive = computed(() => countActive(this.drawerDraft()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draftActive" }] : /* istanbul ignore next */ []));
+    unfiltered = computed(() => {
+        const pending = this.pending()?.key;
+        return this.fields().filter((field) => !this.pinnedKeys().has(field.key) &&
+            ruleFor(this.shown(), field.key) === undefined &&
+            field.key !== pending);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unfiltered" }] : /* istanbul ignore next */ []));
+    sections = computed(() => {
+        const map = new Map();
+        for (const field of this.unfiltered()) {
+            const list = map.get(field.section) ?? [];
+            list.push(field);
+            map.set(field.section, list);
+        }
+        return [...map.entries()].map(([name, fields]) => ({ fields, name }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    presetItems = computed(() => this.presets()?.map((entry) => ({ label: entry.label, value: entry.key })) ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presetItems" }] : /* istanbul ignore next */ []));
+    /**
+     * The bar's members in order: pinned fields as declared — a chip, or a pill
+     * while they hold no condition — then the other first-level conditions, then
+     * the one pending, which keeps the place an applied rule had when it lost its
+     * operand.
+     */
+    members = computed(() => {
+        const shown = this.shown();
+        const pending = this.pending();
+        const pinnedKeys = this.pinnedKeys();
+        const limit = this.chipLimitValue();
+        const readOnly = this.readOnly();
+        const format = this.format();
+        const members = [];
+        let index = 0;
+        const nextFolded = () => index++ >= limit;
+        for (const field of this.pinned()) {
+            const rule = ruleFor(shown, field.key);
+            if (rule !== undefined) {
+                members.push(this.describeChip(field.key, rule, { folded: nextFolded(), pinned: true }));
+            }
+            else if (pending?.key === field.key) {
+                members.push(this.describeChip(field.key, pending.filter, {
+                    folded: nextFolded(),
+                    incomplete: true,
+                    pinned: true,
+                }));
+            }
+            else if (!readOnly) {
+                members.push({ field, id: `pill:${field.key}`, kind: 'pill' });
+            }
+        }
+        const floating = pending && !pinnedKeys.has(pending.key) && ruleFor(shown, pending.key) === undefined
+            ? pending
+            : null;
+        const pendingChip = (rule) => this.describeChip(rule.key, rule.filter, { folded: nextFolded(), incomplete: true });
+        let placed = false;
+        (shown?.rules ?? []).forEach((node, at) => {
+            if (floating && floating.at === at) {
+                members.push(pendingChip(floating));
+                placed = true;
+            }
+            if (isFilterGroup(node)) {
+                members.push({
+                    folded: nextFolded(),
+                    id: `group:${at}`,
+                    kind: 'group',
+                    path: [at],
+                    words: `(${describeFilterGroup(node, format)})`,
+                });
+            }
+            else if (!pinnedKeys.has(node.field)) {
+                members.push(this.describeChip(node.field, node.filter, { folded: nextFolded() }));
+            }
+        });
+        if (floating && !placed)
+            members.push(pendingChip(floating));
+        return members;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "members" }] : /* istanbul ignore next */ []));
+    chipCount = computed(() => this.members().filter((member) => member.kind !== 'pill').length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chipCount" }] : /* istanbul ignore next */ []));
+    folded = computed(() => Math.max(0, this.chipCount() - this.chipLimitValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "folded" }] : /* istanbul ignore next */ []));
+    countText = computed(() => {
+        const count = this.count();
+        if (count === undefined)
+            return null;
+        const total = this.total();
+        return total === undefined ? this.t('countOnly', { count }) : this.t('count', { count, total });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        /* A controlled value that changes from outside replaces the draft: the application's value wins. */
+        let last = untracked(this.currentValue);
+        effect(() => {
+            const value = this.currentValue();
+            if (!sameGroup(last, value)) {
+                last = value;
+                untracked(() => this.draft.set(null));
+            }
+        });
+        /* The draft the drawer edits, taken each time it opens from the tree — or
+           from the seed a chip left, when the reader started a rule on a phone and
+           the builder is where it is finished. */
+        let wasOpen = false;
+        effect(() => {
+            const open = this.isOpen();
+            if (open && !wasOpen) {
+                untracked(() => {
+                    this.drawerDraft.set(this.seed ?? this.shown());
+                    this.seed = null;
+                });
+            }
+            wasOpen = open;
+        });
+        /* The ring: one tab stop for the bar, arrows over every control and every
+           chip segment. After render, because the items are the template's. */
+        afterRenderEffect((onCleanup) => {
+            const bar = this.barElement().nativeElement;
+            const ring = createRovingTabindex(bar, {
+                includeAriaDisabled: true,
+                itemSelector: BAR_ITEMS,
+            });
+            /* A chip removed by the pointer: focus goes to the stop that took its place. */
+            const removal = createRemovalFocus(bar, {
+                fallback: () => bar.querySelector("[data-part='add']") ?? null,
+                itemSelector: BAR_ITEMS,
+            });
+            /* Read the DOM again after a chip, a pill or a control came or went. */
+            const observer = new MutationObserver(() => ring.refresh());
+            observer.observe(bar, { childList: true, subtree: true });
+            onCleanup(() => {
+                observer.disconnect();
+                ring.destroy();
+                removal.destroy();
+            });
+        });
+        /* The narrow breakpoint, read from the root's own width, and the sheet
+           breakpoint, read from the viewport — the side a drawer opens from is the
+           viewport's question. A root with no box is not measured. */
+        afterNextRender(() => {
+            const element = this.host.nativeElement;
+            const view = element.ownerDocument.defaultView;
+            if (typeof ResizeObserver !== 'undefined') {
+                const read = () => {
+                    const width = element.getBoundingClientRect().width;
+                    this.narrow.set(width > 0 && width < remToPx(element, NARROW_REM));
+                };
+                const observer = new ResizeObserver(read);
+                observer.observe(element);
+                read();
+                this.destroyRef.onDestroy(() => observer.disconnect());
+            }
+            if (view?.matchMedia) {
+                const query = view.matchMedia(`(max-width: ${NARROW_REM}rem)`);
+                const read = () => this.sheet.set(query.matches);
+                read();
+                query.addEventListener?.('change', read);
+                this.destroyRef.onDestroy(() => query.removeEventListener?.('change', read));
+            }
+        });
+        /* The document key that reaches the search, unless the reader is typing. */
+        effect((onCleanup) => {
+            const key = this.shortcutValue();
+            if (!key || this.disabled())
+                return;
+            const doc = this.host.nativeElement.ownerDocument;
+            const listener = (event) => {
+                if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey)
+                    return;
+                if (event.key !== key || isEditable(doc.activeElement))
+                    return;
+                event.preventDefault();
+                this.focusSearch();
+            };
+            doc.addEventListener('keydown', listener);
+            onCleanup(() => doc.removeEventListener('keydown', listener));
+        });
+        /* Sticky: the bar reads the page property and adds its own height for what follows. */
+        effect((onCleanup) => {
+            if (!this.sticky() || typeof ResizeObserver === 'undefined')
+                return;
+            const element = this.host.nativeElement;
+            const parent = element.parentElement;
+            const view = element.ownerDocument.defaultView;
+            if (!parent || !view)
+                return;
+            /* What the parent declared inline before this bar added itself: put back
+               before every read, so a second measure never sums the bar twice. */
+            const declared = parent.style.getPropertyValue(STICKY_TOP);
+            const restore = () => declared
+                ? parent.style.setProperty(STICKY_TOP, declared)
+                : parent.style.removeProperty(STICKY_TOP);
+            const publish = () => {
+                restore();
+                const above = view.getComputedStyle(parent).getPropertyValue(STICKY_TOP).trim() || '0px';
+                const height = element.getBoundingClientRect().height;
+                element.style.setProperty(STICKY_TOP, above);
+                parent.style.setProperty(STICKY_TOP, `calc(${above} + ${height}px)`);
+            };
+            const observer = new ResizeObserver(publish);
+            observer.observe(element);
+            publish();
+            onCleanup(() => {
+                observer.disconnect();
+                element.style.removeProperty(STICKY_TOP);
+                restore();
+            });
+        });
+        this.destroyRef.onDestroy(() => clearTimeout(this.timer));
+    }
+    /* ── Helpers the template reads ─────────────────────────────────────── */
+    pillOf(member) {
+        return member.kind === 'pill' ? member : null;
+    }
+    chipOf(member) {
+        return member.kind === 'chip' ? member : null;
+    }
+    groupOf(member) {
+        return member.kind === 'group' ? member : null;
+    }
+    isTemplate(icon) {
+        return icon instanceof TemplateRef;
+    }
+    operatorWords(operator) {
+        return operatorName(this.t, operator);
+    }
+    normalized(group) {
+        return normalizeFilterGroup(group);
+    }
+    /** One field's condition as its chip draws it. */
+    describeChip(key, filter, flags) {
+        const field = fieldByKey(this.fields(), key);
+        const unknown = field === undefined;
+        const label = field?.label ?? key;
+        const words = ruleWords(this.t, field, filter);
+        const incomplete = flags.incomplete === true || !isFilterActive(filter);
+        const value = words.value || this.t('noValue');
+        const rule = this.t('rule', {
+            condition: words.operands > 0
+                ? this.t('condition', { operator: words.operator, value })
+                : words.operator,
+            field: unknown ? this.t('unknownField', { field: key }) : label,
+        });
+        return {
+            condition: filter.conditions[0]?.operator ?? '',
+            field,
+            filter,
+            folded: flags.folded,
+            hasValue: words.operands > 0 || incomplete,
+            id: `chip:${key}`,
+            incomplete,
+            key,
+            kind: 'chip',
+            label,
+            name: incomplete ? this.t('incomplete', { rule }) : rule,
+            operands: words.operands,
+            operator: words.operator,
+            operators: field?.operators ?? (field ? operatorsFor(field.kind) : []),
+            pinned: flags.pinned === true,
+            removable: field?.required !== true && !this.readOnly(),
+            unknown,
+            value,
+            valueName: this.t('condition', { operator: words.operator, value: words.full || value }),
+            valueTitle: words.full && words.full !== words.value ? words.full : null,
+        };
+    }
+    sentenceOf(field, filter) {
+        return describeFilter(filter, {
+            ...this.format(),
+            value: (value) => field?.options?.find((option) => option.value === value)?.label ?? String(value),
+        });
+    }
+    announce(message) {
+        getLiveAnnouncer(this.host.nativeElement.ownerDocument).announce(message);
+    }
+    /* ── The five requests ─────────────────────────────────────────────── */
+    requestValue(next, reason, source) {
+        const normalized = normalizeFilterGroup(next);
+        const state = createControllable({
+            equals: sameGroup,
+            initial: this.currentValue(),
+            onRequest: (request) => this.valueChangeRequest.emit(request),
+        });
+        if (state.request(normalized, reason, source))
+            this.value.set(normalized);
+    }
+    requestQuery(next, reason, source) {
+        const state = createControllable({
+            initial: this.currentQuery(),
+            onRequest: (request) => this.queryChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.query.set(next);
+    }
+    requestPreset(next, reason, source) {
+        const state = createControllable({
+            initial: this.currentPreset(),
+            onRequest: (request) => this.presetChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.preset.set(next);
+    }
+    requestOpen(next, reason, source) {
+        const state = createControllable({
+            initial: this.isOpen(),
+            onRequest: (request) => this.openChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.open.set(next);
+    }
+    requestRevealed(next, reason, source) {
+        const state = createControllable({
+            initial: this.isRevealed(),
+            onRequest: (request) => this.revealedChangeRequest.emit(request),
+        });
+        if (state.request(next, reason, source))
+            this.revealed.set(next);
+    }
+    /* ── Edits ─────────────────────────────────────────────────────────── */
+    /**
+     * Every edit of the tree goes through here: under `live` it is requested at
+     * once, under `manual` it goes to the draft and Apply requests it.
+     */
+    edit(next, reason, source) {
+        if (this.applyValue() === 'manual') {
+            this.draft.set({ query: this.shownQuery(), value: next });
+            return;
+        }
+        this.requestValue(next, reason, source);
+    }
+    /** The tree with every required field at its default, which is what Clear returns to. */
+    baseline() {
+        let next = null;
+        for (const field of this.required()) {
+            if (field.defaultValue)
+                next = withRuleFor(next, field.key, field.defaultValue);
+        }
+        return normalizeFilterGroup(next);
+    }
+    missing(tree) {
+        return this.required().filter((field) => !isFilterActive(ruleFor(tree, field.key) ?? null));
+    }
+    /** A required field refuses: data-invalid on its chip or pill, its message said, and focus on it when asked. */
+    refuse(field, focus) {
+        this.invalid.set(field.key);
+        this.announce(this.t('required', { field: field.label }));
+        if (!focus)
+            return;
+        const member = this.barElement().nativeElement.querySelector(`[data-field='${CSS.escape(field.key)}']`);
+        (member?.matches('button') ? member : member?.querySelector(SEGMENTS))?.focus();
+    }
+    /** A field chosen from `add` or pressed as a pill: its chip, incomplete, with the value popover open. */
+    start(key, source) {
+        const field = fieldByKey(this.fields(), key);
+        if (!field || this.locked())
+            return;
+        if (this.narrow()) {
+            this.openBuilderOn(key, source);
+            return;
+        }
+        const filter = blankRule(field);
+        if (isFilterActive(filter)) {
+            this.edit(withRuleFor(this.shown(), key, filter), 'pointer', source);
+        }
+        else {
+            this.pending.set({ filter, key });
+        }
+        this.valueOpen.set(key);
+    }
+    /** Every change to one field's rule from a chip: pending until active, then the value's. */
+    changeRule(key, next, reason) {
+        const field = fieldByKey(this.fields(), key);
+        const shown = this.shown();
+        if (next === null) {
+            if (field?.required) {
+                this.refuse(field, false);
+                return;
+            }
+            if (this.pending()?.key === key)
+                this.pending.set(null);
+            this.edit(withoutRuleFor(shown, key), 'clear');
+            return;
+        }
+        this.invalid.set(null);
+        if (!isFilterActive(next)) {
+            /* A draft holds an unfinished rule as it stands; the value never does. */
+            if (this.applyValue() === 'manual') {
+                this.edit(withRuleFor(shown, key, next), reason);
+                return;
+            }
+            const at = shown
+                ? shown.rules.findIndex((node) => !isFilterGroup(node) && node.field === key)
+                : -1;
+            this.pending.set({ filter: next, key, ...(at === -1 ? {} : { at }) });
+            if (at !== -1)
+                this.edit(withoutRuleFor(shown, key), reason);
+            return;
+        }
+        if (this.pending()?.key === key)
+            this.pending.set(null);
+        this.edit(withRuleFor(shown, key, next), reason);
+    }
+    setOperator(key, filter, operator) {
+        const condition = (filter.conditions[0] ?? { operator });
+        const before = operandCount(condition.operator);
+        const after = operandCount(operator);
+        const next = withCondition(filter, 0, {
+            operator,
+            ...(after >= 1 && before >= 1 ? { value: condition.value } : {}),
+            ...(after === 2 && before === 2 ? { end: condition.end } : {}),
+        });
+        this.changeRule(key, next, 'pointer');
+        /* An operator that wants an operand the rule lacks moves on to the value. */
+        if (after > 0 && !isFilterActive(next))
+            this.valueOpen.set(key);
+    }
+    toggleValue(key, open) {
+        const current = this.valueOpen();
+        this.valueOpen.set(open ? key : current === key ? null : current);
+    }
+    /** Done in a chip's value popover: the condition is said, and the popover closes. */
+    finishValue(key) {
+        const field = fieldByKey(this.fields(), key);
+        const rule = ruleFor(this.shown(), key);
+        if (rule && isFilterActive(rule)) {
+            this.announce(this.t('rule', { condition: this.sentenceOf(field, rule), field: field?.label ?? key }));
+        }
+        if (this.valueOpen() === key)
+            this.valueOpen.set(null);
+    }
+    /** The value segment drawn without its popover: under the narrow breakpoint it opens the builder. */
+    onValueSegment(chip, event) {
+        if (this.readOnly() || chip.unknown || !this.narrow())
+            return;
+        this.openBuilderOn(chip.key, event);
+    }
+    removeField(key, source) {
+        const field = fieldByKey(this.fields(), key);
+        if (field?.required) {
+            this.refuse(field, false);
+            return;
+        }
+        const pending = this.pending();
+        if (pending?.key === key) {
+            this.pending.set(null);
+            if (ruleFor(this.shown(), key) === undefined)
+                return;
+        }
+        this.edit(withoutRuleFor(this.shown(), key), 'remove', source);
+        this.announce(this.t('removed', { field: field?.label ?? key }));
+    }
+    removeNode(path, source) {
+        const shown = this.shown();
+        if (!shown)
+            return;
+        this.edit(removeNodeAt(shown, path), 'remove', source);
+    }
+    /**
+     * `Delete` and `Backspace` on a segment remove the condition. The keyboard
+     * goes to the segment of the same role on the chip that followed, else on
+     * the one before, else to `add` — chosen before the removal, while both
+     * neighbours are still in the DOM, and focused after the render.
+     */
+    onChipKeyDown(event, key) {
+        if (event.key !== 'Delete' && event.key !== 'Backspace')
+            return;
+        const segment = event.target.closest(SEGMENTS);
+        if (!segment || this.locked() || event.defaultPrevented)
+            return;
+        event.preventDefault();
+        if (fieldByKey(this.fields(), key)?.required) {
+            this.removeField(key, event);
+            return;
+        }
+        const bar = this.barElement().nativeElement;
+        const chips = [...bar.querySelectorAll("[data-part='chip']")].filter((chip) => chip.checkVisibility?.() ?? true);
+        const here = segment.closest("[data-part='chip']");
+        const index = here ? chips.indexOf(here) : -1;
+        const role = segment.getAttribute('data-part');
+        const neighbour = chips[index + 1] ?? chips[index - 1];
+        const target = neighbour?.querySelector(`[data-part='${role}']`) ??
+            neighbour?.querySelector('button') ??
+            null;
+        this.focusAfterRender(target);
+        this.removeField(key, event);
+    }
+    onGroupKeyDown(event, path) {
+        if ((event.key !== 'Delete' && event.key !== 'Backspace') || this.locked())
+            return;
+        event.preventDefault();
+        this.removeNode(path, event);
+    }
+    focusAfterRender(target) {
+        afterNextRender({
+            write: () => {
+                const bar = this.barElement().nativeElement;
+                (target?.isConnected
+                    ? target
+                    : bar.querySelector("[data-part='add']"))?.focus();
+            },
+        }, { injector: this.injector });
+    }
+    clearAll(source) {
+        const next = this.baseline();
+        this.invalid.set(null);
+        this.pending.set(null);
+        if (this.applyValue() === 'manual') {
+            this.draft.set({ query: '', value: next });
+        }
+        else {
+            this.requestValue(next, 'clear', source);
+            if (this.currentQuery() !== '')
+                this.requestQuery('', 'clear', source);
+        }
+        this.announce(next
+            ? this.t('clearedTo', { filters: describeFilterGroup(next, this.format()) })
+            : this.t('cleared'));
+    }
+    submit(source) {
+        const draft = this.draft();
+        if (!draft)
+            return;
+        const lacking = this.missing(draft.value);
+        if (lacking[0]) {
+            this.refuse(lacking[0], true);
+            return;
+        }
+        this.invalid.set(null);
+        this.requestValue(draft.value, 'submit', source);
+        if (draft.query !== this.currentQuery())
+            this.requestQuery(draft.query, 'submit', source);
+        this.draft.set(null);
+        const applied = normalizeFilterGroup(draft.value);
+        this.announce(applied
+            ? this.t('appliedCount', {
+                count: firstLevelRules(applied).length,
+                filters: describeFilterGroup(applied, this.format()),
+            })
+            : this.t('cleared'));
+    }
+    reset() {
+        this.draft.set(null);
+        this.invalid.set(null);
+    }
+    choosePreset(key, source) {
+        this.requestPreset(key, key === null ? 'clear' : 'select', source);
+        const chosen = this.presets()?.find((entry) => entry.key === key);
+        if (chosen) {
+            this.draft.set(null);
+            this.requestValue(chosen.value, 'select', source);
+            this.announce(chosen.label);
+        }
+    }
+    /* ── The builder ───────────────────────────────────────────────────── */
+    /** Opens the builder, with the card at `at.path` expanded, on `at.tree` when given. */
+    openBuilderAt(reason, source, at) {
+        if (at?.tree !== undefined)
+            this.seed = at.tree;
+        this.expanded.set(at ? at.path.join('.') : null);
+        this.requestOpen(true, reason, source);
+    }
+    /** The builder open on one field's rule: the applied one, the pending one, or a fresh one. */
+    openBuilderOn(key, source) {
+        const field = fieldByKey(this.fields(), key);
+        const shown = this.shown();
+        const pending = this.pending();
+        const applied = shown
+            ? shown.rules.findIndex((node) => !isFilterGroup(node) && node.field === key)
+            : -1;
+        if (applied !== -1 && pending?.key !== key) {
+            this.openBuilderAt('pointer', source, { path: [applied] });
+            return;
+        }
+        const filter = pending?.key === key ? pending.filter : field ? blankRule(field) : null;
+        if (!filter)
+            return;
+        const tree = withRuleFor(shown, key, filter);
+        this.pending.set(null);
+        this.openBuilderAt('pointer', source, {
+            path: [tree.rules.findIndex((node) => !isFilterGroup(node) && node.field === key)],
+            tree,
+        });
+    }
+    commitDrawer() {
+        const next = this.drawerDraft();
+        const lacking = this.missing(next);
+        if (lacking[0]) {
+            this.refuse(lacking[0], false);
+            return;
+        }
+        this.invalid.set(null);
+        this.edit(next, 'submit');
+        const applied = normalizeFilterGroup(next);
+        this.announce(applied
+            ? this.t('appliedCount', {
+                count: countActive(applied),
+                filters: describeFilterGroup(applied, this.format()),
+            })
+            : this.t('cleared'));
+        this.requestOpen(false, 'submit');
+    }
+    onDrawerRequest(request) {
+        this.requestOpen(request.value, request.reason, request.source);
+    }
+    /* ── The query ─────────────────────────────────────────────────────── */
+    typeQuery(request) {
+        const next = request.value;
+        const reason = request.reason === 'clear' ? 'clear' : 'keyboard';
+        if (this.applyValue() === 'manual') {
+            this.draft.set({ query: next, value: this.shown() });
+            return;
+        }
+        this.typed.set(next);
+        clearTimeout(this.timer);
+        if (reason === 'clear' || this.queryDelayValue() === 0) {
+            this.typed.set(null);
+            this.requestQuery(next, reason, request.source);
+            return;
+        }
+        this.timer = setTimeout(() => {
+            this.timer = undefined;
+            this.typed.set(null);
+            this.requestQuery(next, reason, request.source);
+        }, this.queryDelayValue());
+    }
+    onSearchKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        if (event.key === 'Escape' && this.shownQuery() !== '') {
+            event.preventDefault();
+            this.typeQuery({
+                cancel: () => { },
+                cancelled: false,
+                previous: this.shownQuery(),
+                reason: 'clear',
+                source: event,
+                value: '',
+            });
+        }
+        if (event.key === 'Enter' && this.applyValue() === 'manual')
+            this.submit(event);
+    }
+    /* ── Imperative ────────────────────────────────────────────────────── */
+    /** Puts focus in the search field. */
+    focusSearch() {
+        this.searchInput().nativeElement.focus();
+    }
+    /**
+     * Opens the builder. With a path, the rule at that path opens as the
+     * expanded card. `open` is the model's name here, so the handle's `open(path)`
+     * is `openBuilder(path)`.
+     */
+    openBuilder(path) {
+        this.openBuilderAt('programmatic', undefined, path ? { path } : undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlFilterBar, isStandalone: true, selector: "[slFilterBar]", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, defaultQuery: { classPropertyName: "defaultQuery", publicName: "defaultQuery", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, preset: { classPropertyName: "preset", publicName: "preset", isSignal: true, isRequired: false, transformFunction: null }, defaultPreset: { classPropertyName: "defaultPreset", publicName: "defaultPreset", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, revealed: { classPropertyName: "revealed", publicName: "revealed", isSignal: true, isRequired: false, transformFunction: null }, defaultRevealed: { classPropertyName: "defaultRevealed", publicName: "defaultRevealed", isSignal: true, isRequired: false, transformFunction: null }, apply: { classPropertyName: "apply", publicName: "apply", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, queryDelay: { classPropertyName: "queryDelay", publicName: "queryDelay", isSignal: true, isRequired: false, transformFunction: null }, chipLimit: { classPropertyName: "chipLimit", publicName: "chipLimit", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, savePresetEnabled: { classPropertyName: "savePresetEnabled", publicName: "savePresetEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", query: "queryChange", preset: "presetChange", open: "openChange", revealed: "revealedChange", valueChangeRequest: "valueChangeRequest", queryChangeRequest: "queryChangeRequest", presetChangeRequest: "presetChangeRequest", openChangeRequest: "openChangeRequest", revealedChangeRequest: "revealedChangeRequest", savePreset: "savePreset" }, host: { attributes: { "data-ui": "filter-bar", "data-part": "root", "role": "search" }, properties: { "attr.aria-label": "ariaLabel ?? t('bar')", "attr.data-apply": "applyValue()", "attr.data-size": "sizeValue()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-readonly": "readOnly() ? \"\" : null", "attr.data-loading": "loading() ? \"\" : null", "attr.data-dirty": "dirty() || presetDirty() ? \"\" : null", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-sticky": "sticky() ? \"\" : null" } }, queries: [{ propertyName: "operandTemplates", predicate: SlFilterBarOperand, isSignal: true }, { propertyName: "endSlot", first: true, predicate: SlFilterBarEnd, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "barElement", first: true, predicate: ["barRow"], descendants: true, isSignal: true }], exportAs: ["slFilterBar"], ngImport: i0, template: `
+    <ng-template #fieldIcon let-icon>
+      @if (isTemplate(icon)) {
+        <span slIcon><ng-container [ngTemplateOutlet]="icon" /></span>
+      } @else if (icon) {
+        <span slIcon><svg slGlyph [name]="icon"></svg></span>
+      }
+    </ng-template>
+
+    <div data-part="frame">
+      <div data-part="search">
+        <div slTextField [size]="sizeValue()" [clearable]="true">
+          <span slTextFieldStart
+            ><span slIcon><svg slGlyph name="search"></svg></span
+          ></span>
+          <input
+            #search
+            slTextFieldInput
+            type="search"
+            [value]="shownQuery()"
+            [attr.aria-label]="t('search')"
+            [attr.placeholder]="t('search')"
+            [disabled]="disabled()"
+            (valueChange)="typeQuery($event)"
+            (keydown)="onSearchKeyDown($event)"
+          />
+          @if (shortcutValue(); as key) {
+            <span slTextFieldEnd
+              ><kbd slKbd size="sm">{{ key }}</kbd></span
+            >
+          }
+        </div>
+      </div>
+
+      <div
+        #barRow
+        data-part="bar"
+        role="toolbar"
+        [attr.aria-label]="t('filters')"
+        [attr.aria-description]="readOnly() ? t('readOnly') : null"
+        [attr.data-revealed]="isRevealed() ? '' : null"
+      >
+        <button
+          slButton
+          slFilterBarPart="summary"
+          type="button"
+          tone="secondary"
+          variant="outline"
+          aria-haspopup="dialog"
+          [size]="sizeValue()"
+          [disabled]="disabled()"
+          (click)="openBuilderAt('pointer', $event)"
+        >
+          <span slButtonStart
+            ><span slIcon><svg slGlyph name="funnel"></svg></span
+          ></span>
+          <span>{{ t('summary', { count: activeCount() }) }}</span>
+        </button>
+
+        @for (member of members(); track member.id) {
+          @if (pillOf(member); as pill) {
+            <button
+              data-part="pill"
+              type="button"
+              aria-haspopup="dialog"
+              [attr.data-field]="pill.field.key"
+              [attr.data-invalid]="invalid() === pill.field.key ? '' : null"
+              [attr.aria-invalid]="invalid() === pill.field.key ? 'true' : null"
+              [disabled]="disabled()"
+              (click)="start(pill.field.key, $event)"
+            >
+              <span slIcon><svg slGlyph name="plus"></svg></span><span>{{ pill.field.label }}</span>
+            </button>
+          }
+          @if (chipOf(member); as chip) {
+            <div
+              data-part="chip"
+              role="group"
+              [attr.aria-label]="chip.name"
+              [attr.data-field]="chip.key"
+              [attr.data-operands]="chip.operands"
+              [attr.data-pinned]="chip.pinned ? '' : null"
+              [attr.data-incomplete]="chip.incomplete ? '' : null"
+              [attr.data-folded]="chip.folded ? '' : null"
+              [attr.data-invalid]="chip.unknown || invalid() === chip.key ? '' : null"
+              (keydown)="onChipKeyDown($event, chip.key)"
+            >
+              <span data-part="chip-field"
+                ><ng-container
+                  [ngTemplateOutlet]="fieldIcon"
+                  [ngTemplateOutletContext]="{ $implicit: chip.field?.icon }"
+                /><span>{{ chip.label }}</span></span
+              >
+              @if (readOnly() || chip.unknown) {
+                <button
+                  data-part="chip-operator"
+                  type="button"
+                  aria-disabled="true"
+                  [disabled]="disabled()"
+                >
+                  {{ chip.operator }}
+                </button>
+              } @else {
+                <button
+                  data-part="chip-operator"
+                  slFilterBarPart="chip-operator"
+                  type="button"
+                  [disabled]="disabled()"
+                  [slMenuTriggerFor]="operatorMenu"
+                >
+                  {{ chip.operator }}
+                </button>
+                <sl-menu #operatorMenu [aria-label]="t('operator')">
+                  <sl-menu-radio-group
+                    [value]="chip.condition"
+                    (valueChangeRequest)="setOperator(chip.key, chip.filter, $event.value)"
+                  >
+                    @for (operator of chip.operators; track operator) {
+                      <button slMenuRadioItem [value]="operator" [closeOnSelect]="true">
+                        {{ operatorWords(operator) }}
+                      </button>
+                    }
+                  </sl-menu-radio-group>
+                </sl-menu>
+              }
+              @if (chip.hasValue) {
+                @if (readOnly() || chip.unknown || narrow()) {
+                  <button
+                    data-part="chip-value"
+                    type="button"
+                    [attr.aria-haspopup]="readOnly() || chip.unknown ? null : 'dialog'"
+                    [attr.aria-disabled]="readOnly() || chip.unknown ? 'true' : null"
+                    [attr.aria-label]="chip.valueName"
+                    [attr.title]="chip.valueTitle"
+                    [disabled]="disabled()"
+                    (click)="onValueSegment(chip, $event)"
+                  >
+                    <span data-operator>{{ chip.operator }}</span
+                    ><span data-value>{{ chip.value }}</span>
+                  </button>
+                } @else if (chip.field; as field) {
+                  <ng-container
+                    slPopover
+                    [open]="valueOpen() === chip.key"
+                    (openChange)="toggleValue(chip.key, $event)"
+                  >
+                    <button
+                      slPopoverTrigger
+                      data-part="chip-value"
+                      type="button"
+                      aria-haspopup="dialog"
+                      [attr.aria-label]="chip.valueName"
+                      [attr.title]="chip.valueTitle"
+                      [disabled]="disabled()"
+                    >
+                      <span data-operator>{{ chip.operator }}</span
+                      ><span data-value>{{ chip.value }}</span>
+                    </button>
+                    <ng-template slPopoverLayer>
+                      <div slPopoverContent [attr.aria-label]="chip.label">
+                        <div slPopoverBody>
+                          <div
+                            slFilterBarRuleEditor
+                            [field]="field"
+                            [current]="chip.filter"
+                            [translator]="t"
+                            [size]="sizeValue()"
+                            [operandTemplates]="operandTemplates()"
+                            [queryDelay]="applyValue() === 'live' ? queryDelayValue() : 0"
+                            [invalid]="invalid() === chip.key"
+                            [withOperator]="false"
+                            (ruleChange)="changeRule(chip.key, $event, 'keyboard')"
+                            (doneRequest)="finishValue(chip.key)"
+                          ></div>
+                        </div>
+                      </div>
+                    </ng-template>
+                  </ng-container>
+                }
+              }
+              @if (chip.removable) {
+                <button
+                  data-part="chip-remove"
+                  type="button"
+                  [attr.aria-label]="t('remove', { name: chip.label })"
+                  [disabled]="disabled()"
+                  (click)="removeField(chip.key, $event)"
+                >
+                  <span slIcon><svg slGlyph name="x"></svg></span>
+                </button>
+              }
+            </div>
+          }
+          @if (groupOf(member); as group) {
+            <div
+              data-part="chip"
+              role="group"
+              data-operands="1"
+              [attr.aria-label]="group.words"
+              [attr.data-folded]="group.folded ? '' : null"
+              (keydown)="onGroupKeyDown($event, group.path)"
+            >
+              <button
+                data-part="chip-value"
+                type="button"
+                aria-haspopup="dialog"
+                [attr.aria-disabled]="readOnly() ? 'true' : null"
+                [attr.title]="group.words"
+                [disabled]="disabled()"
+                (click)="readOnly() ? null : openBuilderAt('pointer', $event, { path: group.path })"
+              >
+                <span data-value>{{ group.words }}</span>
+              </button>
+              @if (!readOnly()) {
+                <button
+                  data-part="chip-remove"
+                  type="button"
+                  [attr.aria-label]="t('remove', { name: group.words })"
+                  [disabled]="disabled()"
+                  (click)="removeNode(group.path, $event)"
+                >
+                  <span slIcon><svg slGlyph name="x"></svg></span>
+                </button>
+              }
+            </div>
+          }
+        }
+
+        @if (folded() > 0) {
+          <button
+            data-part="more"
+            type="button"
+            [attr.aria-expanded]="isRevealed()"
+            [disabled]="disabled()"
+            (click)="requestRevealed(!isRevealed(), 'pointer', $event)"
+          >
+            {{ isRevealed() ? t('less') : t('more', { count: folded() }) }}
+          </button>
+        }
+
+        @if (!readOnly()) {
+          @if (chipCount() > 0) {
+            <!-- With a chip in the bar, add is its glyph alone, in the chips' shape; the label stays its name. -->
+            <button
+              slIconButton
+              slFilterBarPart="add"
+              data-compact
+              type="button"
+              shape="circle"
+              tone="secondary"
+              variant="outline"
+              [size]="sizeValue()"
+              [attr.aria-label]="t('add')"
+              [attr.title]="t('add')"
+              [disabled]="disabled() || unfiltered().length === 0"
+              [slMenuTriggerFor]="addMenu"
+            >
+              <span slIcon><svg slGlyph name="plus"></svg></span>
+            </button>
+          } @else {
+            <button
+              slButton
+              slFilterBarPart="add"
+              type="button"
+              tone="secondary"
+              variant="ghost"
+              [size]="sizeValue()"
+              [disabled]="disabled() || unfiltered().length === 0"
+              [slMenuTriggerFor]="addMenu"
+            >
+              <!-- The glyph stands in the button's own box; bare in the label it has no size. -->
+              <span slButtonStart
+                ><span slIcon><svg slGlyph name="plus"></svg></span
+              ></span>
+              {{ t('add') }}
+            </button>
+          }
+          <sl-menu #addMenu [aria-label]="t('add')">
+            @for (section of sections(); track section.name ?? '') {
+              @if (section.name === undefined) {
+                @for (field of section.fields; track field.key) {
+                  <button slMenuItem (select)="start(field.key, $event.source)">
+                    @if (field.icon) {
+                      <span slMenuItemIcon
+                        ><ng-container
+                          [ngTemplateOutlet]="fieldIcon"
+                          [ngTemplateOutletContext]="{ $implicit: field.icon }"
+                      /></span>
+                    }
+                    {{ field.label }}
+                  </button>
+                }
+              } @else {
+                <sl-menu-group [label]="section.name">
+                  @for (field of section.fields; track field.key) {
+                    <button slMenuItem (select)="start(field.key, $event.source)">
+                      @if (field.icon) {
+                        <span slMenuItemIcon
+                          ><ng-container
+                            [ngTemplateOutlet]="fieldIcon"
+                            [ngTemplateOutletContext]="{ $implicit: field.icon }"
+                        /></span>
+                      }
+                      {{ field.label }}
+                    </button>
+                  }
+                </sl-menu-group>
+              }
+            }
+          </sl-menu>
+        }
+
+        @if (!readOnly() && (activeCount() > 0 || shownQuery() !== '' || pending())) {
+          <button
+            slButton
+            slFilterBarPart="clear"
+            type="button"
+            tone="secondary"
+            variant="ghost"
+            [size]="sizeValue()"
+            [disabled]="disabled()"
+            (click)="clearAll($event)"
+          >
+            {{ t('clear') }}
+          </button>
+        }
+
+        @if (applyValue() === 'manual' && !readOnly()) {
+          <div data-part="actions">
+            <button
+              slButton
+              slFilterBarPart="reset"
+              type="button"
+              tone="secondary"
+              variant="ghost"
+              [size]="sizeValue()"
+              [disabled]="disabled() || !dirty()"
+              (click)="reset()"
+            >
+              {{ t('reset') }}
+            </button>
+            <button
+              slButton
+              slFilterBarPart="apply"
+              type="button"
+              [size]="sizeValue()"
+              [disabled]="disabled() || loading() || !dirty()"
+              (click)="submit($event)"
+            >
+              {{ t('apply') }}
+            </button>
+          </div>
+        }
+      </div>
+
+      <div data-part="end">
+        @if (presets(); as views) {
+          @if (views.length > 0) {
+            <!-- Clearable: leaving a preset is the control's own clear, and
+                 without it the one way out of a saved view is deleting it. -->
+            <div data-part="preset">
+              <sl-select
+                clearable
+                [size]="sizeValue()"
+                [disabled]="disabled() || readOnly()"
+                [items]="presetItems()"
+                [attr.aria-label]="t('preset')"
+                [placeholder]="t('presetNone')"
+                [value]="currentPreset()"
+                (valueChange)="choosePreset($any($event))"
+              >
+                @for (view of views; track view.key) {
+                  <sl-select-item [value]="view.key">{{ view.label }}</sl-select-item>
+                }
+              </sl-select>
+            </div>
+          }
+        }
+        <ng-content select="[slFilterBarEnd]"></ng-content>
+      </div>
+
+      @if (countText() !== null || loading()) {
+        <p data-part="count" aria-live="polite" [attr.aria-busy]="loading() ? 'true' : null">
+          @if (loading()) {
+            <span
+              data-ui="spinner"
+              data-part="root"
+              data-size="sm"
+              role="progressbar"
+              [attr.aria-label]="t('filters')"
+            ></span>
+          }
+          {{ countText() }}
+        </p>
+      }
+    </div>
+
+    <sl-drawer
+      [side]="sheet() ? 'bottom' : 'end'"
+      [size]="sheet() ? 'content' : 'xl'"
+      [container]="container()"
+      [open]="isOpen()"
+      (openChangeRequest)="onDrawerRequest($event)"
+    >
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>{{ t('builder') }}</h2>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div data-part="builder" data-ui="filter-bar" [id]="id + '-builder'">
+          <fieldset
+            slFilterBarGroup
+            [group]="drawerDraft() ?? empty"
+            [root]="drawerDraft() ?? empty"
+            [fields]="fields()"
+            [translator]="t"
+            [size]="sizeValue()"
+            [operandTemplates]="operandTemplates()"
+            [expanded]="expanded()"
+            (expandedChange)="expanded.set($event)"
+            (rootChange)="drawerDraft.set($event)"
+            (applyRequest)="commitDrawer()"
+          >
+            @if (draftActive() > 0) {
+              <button
+                slButton
+                slFilterBarPart="clear"
+                type="button"
+                size="sm"
+                tone="secondary"
+                variant="ghost"
+                (click)="drawerDraft.set(baseline())"
+              >
+                {{ t('clear') }}
+              </button>
+            }
+            @if (savePresetEnabled()) {
+              <button
+                slButton
+                slFilterBarPart="save-preset"
+                type="button"
+                size="sm"
+                tone="secondary"
+                variant="ghost"
+                (click)="savePreset.emit(normalized(drawerDraft()))"
+              >
+                {{ t('savePreset') }}
+              </button>
+            }
+          </fieldset>
+        </div>
+      </div>
+      <footer slDrawerFooter>
+        <button
+          slButton
+          type="button"
+          size="sm"
+          tone="secondary"
+          variant="ghost"
+          (click)="requestOpen(false, 'dismiss', $event)"
+        >
+          {{ t('cancel') }}
+        </button>
+        <button slButton type="button" size="sm" (click)="commitDrawer()">
+          {{ t('apply') }}
+        </button>
+      </footer>
+    </sl-drawer>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=filter-bar]{--_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-md, 8px));--_gap-sm: var(--slotted-control-gap-sm, 6px);--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, 13px);--_pad: var(--slotted-control-padding-inline-md, 13px);--_seg-pad: var(--slotted-control-padding-inline-sm, 10px);--_icon: var(--slotted-control-icon-size-md, 16px);--_radius: var(--slotted-filter-bar-pill-radius, var(--slotted-radius-full, 9999px));--_control-radius: var(--slotted-control-radius, var(--slotted-radius-sm, 4px));--_border-width: var(--slotted-control-border-width, 1px);--_ink: var(--slotted-filter-bar-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-filter-bar-color-muted, var(--slotted-text-muted, GrayText));--_edge: var( --slotted-filter-bar-pill-border, var(--slotted-control-border-color, ButtonBorder) );--_seam: var(--slotted-filter-bar-chip-seam, var(--slotted-border-subtle, ButtonBorder));--_surface: var(--slotted-filter-bar-surface, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_invalid: var(--slotted-tone-danger-border, GrayText);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));box-sizing:border-box;color:var(--_ink);font-family:var(--slotted-filter-bar-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);min-inline-size:0}[data-ui=filter-bar][data-part=root]{container-name:slotted-filter-bar;container-type:inline-size;display:block;inline-size:100%}[data-ui=filter-bar][data-part=rule]{display:grid;gap:var(--_gap);inline-size:var(--slotted-filter-bar-editor-size, 18rem);max-inline-size:100%}[data-ui=filter-bar][data-part=rule] [data-part=operand]{display:grid;gap:var(--_gap-sm);min-inline-size:0}[data-ui=filter-bar][data-part=rule][data-kind=boolean] [data-part=operand]:empty{display:none}[data-ui=filter-bar][data-part=rule]>[data-part=actions]{align-items:center;display:flex;gap:var(--_gap-sm);justify-content:flex-end}[data-ui=filter-bar]>[data-part=frame]{align-items:start;column-gap:var(--_gap);display:grid;grid-template-areas:\"search end count\" \"bar bar bar\";grid-template-columns:minmax(0,1fr) auto auto;row-gap:var(--_gap)}[data-ui=filter-bar]>[data-part=frame]>[data-part=search]{grid-area:search;max-inline-size:var(--slotted-filter-bar-search-max, 28rem);min-inline-size:0}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]{grid-area:bar}[data-ui=filter-bar]>[data-part=frame]>[data-part=end]{grid-area:end}[data-ui=filter-bar]>[data-part=frame]>[data-part=count]{grid-area:count;justify-self:end}[data-ui=filter-bar]>[data-part=frame]>[data-part=end]:empty{display:none}[data-ui=filter-bar][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_pad: var(--slotted-control-padding-inline-sm, 10px);--_seg-pad: var(--slotted-control-gap-md, 8px);--_icon: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-sm, 6px));--_gap-sm: var(--slotted-control-gap-sm, 4px)}[data-ui=filter-bar][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_pad: var(--slotted-control-padding-inline-lg, 16px);--_seg-pad: var(--slotted-control-padding-inline-md, 13px);--_icon: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-lg, 8px))}[data-ui=filter-bar] [data-part=search]>[data-ui=text-field],[data-ui=filter-bar] [data-part=preset]>[data-ui=select],[data-ui=filter-bar] :is([data-part=field],[data-part=operator])>[data-ui=select]{inline-size:100%}[data-ui=filter-bar] [data-part=bar]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);min-inline-size:0}[data-ui=filter-bar] [data-part=end]{align-items:center;display:flex;gap:var(--_gap)}[data-ui=filter-bar]>[data-part=frame]>[data-part=count]{color:var(--_muted);font-variant-numeric:tabular-nums;margin:0;min-block-size:1lh;padding-block:max(0px,calc((var(--_height) - 1lh) / 2));white-space:nowrap}[data-ui=filter-bar] [data-part=pill]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_height);border:var(--_border-width) dashed var(--_edge);border-radius:var(--_radius);box-sizing:border-box;color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_gap-sm);line-height:var(--slotted-control-line-height, 1);margin:0;padding-block:0;padding-inline:calc(var(--_pad) - var(--_gap-sm)) var(--_pad);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter);white-space:nowrap}[data-ui=filter-bar] [data-part=pill]>span:not([data-ui=icon]){min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate}[data-ui=filter-bar] [data-part=pill]>[data-ui=icon]{--slotted-icon-size: var(--_icon)}[data-ui=filter-bar] [data-part=pill][data-invalid]{border-color:var(--_invalid);box-shadow:var(--_invalid-edge)}[data-ui=filter-bar] [data-part=pill]:enabled:hover{background-color:var(--_hover);border-color:var(--slotted-border-strong, ButtonBorder);color:var(--_ink)}[data-ui=filter-bar] [data-part=pill]:enabled:active,[data-ui=filter-bar] [data-part=pill]:enabled[aria-expanded=true]{background-color:var(--_active);border-color:var(--slotted-border-strong, ButtonBorder);color:var(--_ink)}[data-ui=filter-bar] [data-part=pill]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=filter-bar] [data-part=chip]{align-items:stretch;background-color:var(--_surface);block-size:var(--_height);border:var(--_border-width) solid var(--_edge);border-radius:var(--_radius);box-shadow:var(--slotted-control-shadow, none);box-sizing:border-box;display:inline-flex;max-inline-size:100%;min-inline-size:0;transition:border-color var(--_duration) var(--_easing),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=filter-bar] :is([data-part=chip],[data-part=pill]){opacity:0;translate:0 calc(-1 * var(--slotted-space-2, .25rem))}}[data-ui=filter-bar] [data-part=chip]>*{align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:inherit;display:inline-flex;flex:none;font:inherit;gap:var(--_gap-sm);line-height:var(--slotted-control-line-height, 1);margin:0;min-inline-size:0;padding-block:0;padding-inline:var(--_seg-pad);white-space:nowrap}[data-ui=filter-bar] [data-part=chip]>*+*{border-inline-start:var(--_border-width) solid var(--_seam)}[data-ui=filter-bar] [data-part=chip]>:first-child{border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);padding-inline-start:var(--_pad)}[data-ui=filter-bar] [data-part=chip]>:last-child{border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius)}[data-ui=filter-bar] [data-part=chip] [data-ui=icon]{--slotted-icon-size: var(--_icon)}[data-ui=filter-bar] [data-part=chip-field]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=filter-bar] [data-part=chip-field]>[data-ui=icon]{color:var(--_muted)}[data-ui=filter-bar] [data-part=chip]>*>span:not([data-ui]),[data-ui=filter-bar] [data-part=chip-operator]{unicode-bidi:isolate}[data-ui=filter-bar] [data-part=chip-operator]{color:var(--_muted);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=filter-bar] [data-part=chip-value]{font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:0}[data-ui=filter-bar] [data-part=chip-value]>[data-value]{max-inline-size:var(--slotted-filter-bar-value-max, 12rem);min-inline-size:0;overflow:hidden;text-overflow:ellipsis}[data-ui=filter-bar] [data-part=chip-value]>[data-operator]{color:var(--_muted);display:none;font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=filter-bar] [data-part=chip-remove]{aspect-ratio:1;color:var(--_muted);justify-content:center;padding-inline:0}[data-ui=filter-bar] [data-part=chip]>:is(button,[role=button]){cursor:pointer;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=filter-bar] [data-part=chip]>:is(button,[role=button]):enabled:not([aria-disabled=true]):hover{background-color:var(--_hover);color:var(--_ink)}[data-ui=filter-bar] [data-part=chip]>:is(button,[role=button]):enabled:not([aria-disabled=true]):active,[data-ui=filter-bar] [data-part=chip]>:is(button,[role=button])[aria-expanded=true]{background-color:var(--_active);color:var(--_ink)}[data-ui=filter-bar] [data-part=chip]>:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=filter-bar] [data-part=chip][data-incomplete]{border-style:dashed;box-shadow:none}[data-ui=filter-bar] [data-part=chip][data-incomplete]>[data-part=chip-value]{color:var(--_muted);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=filter-bar] [data-part=chip][data-invalid]{border-color:var(--_invalid);box-shadow:var(--_invalid-edge)}[data-ui=filter-bar] [data-part=chip][data-invalid]>[data-part=chip-field],[data-ui=filter-bar] [data-part=chip][data-invalid]>[data-part=chip-field]>[data-ui=icon]{color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=filter-bar] [data-part=chip][data-folded]{display:none;visibility:hidden}[data-ui=filter-bar] [data-part=bar][data-revealed] [data-part=chip][data-folded]{display:inline-flex;visibility:visible}[data-ui=filter-bar] [data-part=more]{align-items:center;appearance:none;background:none;block-size:var(--_height);border:0;border-radius:var(--_radius);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);justify-content:center;margin:0;padding-inline:var(--_seg-pad);transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing);white-space:nowrap}[data-ui=filter-bar] [data-part=more]:enabled:hover{background-color:var(--_hover);color:var(--_ink)}[data-ui=filter-bar] [data-part=more]:enabled:active{background-color:var(--_active);color:var(--_ink)}[data-ui=filter-bar] [data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=filter-bar] [data-part=bar] :is([data-part=clear],[data-part=reset]){--slotted-control-font-weight: var(--slotted-font-weight-medium, 500)}[data-ui=filter-bar] [data-part=summary]{display:none;visibility:hidden}[data-ui=filter-bar] [data-part=summary]>[data-part=label]>span{font-variant-numeric:tabular-nums}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>[data-part=actions]{align-items:center;display:flex;gap:var(--_gap-sm);margin-inline-start:auto}[data-ui=filter-bar][data-disabled]{--_ink: var(--slotted-disabled-foreground, GrayText);--_muted: var(--slotted-disabled-foreground, GrayText);--_edge: var(--slotted-disabled-border, GrayText);--_seam: var(--slotted-disabled-border, GrayText);--_surface: var(--slotted-disabled-background, Canvas)}[data-ui=filter-bar][data-disabled] :is([data-part=pill],[data-part=chip]){box-shadow:none}[data-ui=filter-bar][data-disabled] :is([data-part=pill],[data-part=chip]>*){cursor:not-allowed}[data-ui=filter-bar][data-readonly] [data-part=chip]>*{cursor:default}[data-ui=filter-bar][data-loading]>[data-part=frame]>[data-part=count]{align-items:center;display:inline-flex;gap:var(--_gap-sm)}[data-ui=filter-bar][data-sticky]{background-color:var(--_surface);inset-block-start:var(--slotted-page-sticky-top, 0px);padding-block:var(--slotted-space-3, .375rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=filter-bar][data-part=builder]{--_join-col: var(--slotted-filter-bar-join-size, 3.5rem);--_group-surface: var( --slotted-filter-bar-group-surface, var(--slotted-surface-sunken, Canvas) );--_group-edge: var(--slotted-filter-bar-group-border, var(--slotted-border-subtle, GrayText));container-name:slotted-filter-bar-builder;container-type:inline-size;display:grid;gap:var(--slotted-space-5, .75rem)}[data-ui=filter-bar][data-part=builder] [data-part=group]{border:0;container-name:slotted-filter-bar-group;container-type:inline-size;display:grid;gap:var(--_gap);margin:0;min-inline-size:0;padding:0}[data-ui=filter-bar][data-part=builder] [data-part=group]:not([data-depth=\"0\"]){background-color:var(--_group-surface);border:var(--slotted-border-width-thin, 1px) solid var(--_group-edge);border-radius:var(--slotted-radius-md, 6px);padding:var(--slotted-space-5, .75rem)}[data-ui=filter-bar][data-part=builder] [data-part=group]:is([data-depth=\"2\"],[data-depth=\"4\"],[data-depth=\"6\"]){background-color:var(--_surface)}[data-ui=filter-bar][data-part=builder] [data-part=group]>legend{block-size:1px;clip-path:inset(50%);overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}[data-ui=filter-bar][data-part=builder] [data-part=join]{align-items:center;color:var(--_ink);display:flex;flex-wrap:wrap;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_gap-sm)}[data-ui=filter-bar][data-part=builder] [data-part=join]>[data-part=remove-group]{margin-inline-start:auto}[data-ui=filter-bar][data-part=builder] [data-part=rules]{align-items:start;column-gap:var(--_gap-sm);display:grid;grid-template-columns:var(--_join-col) minmax(0,1fr);min-inline-size:0;row-gap:var(--_gap)}[data-ui=filter-bar][data-part=builder] [data-part=conjunction]{color:var(--_muted);line-height:var(--_height);overflow:hidden;text-align:end;text-overflow:ellipsis;white-space:nowrap}[data-ui=filter-bar][data-part=builder] [data-part=rule]{align-items:center;display:grid;gap:var(--_gap-sm);grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr) var(--slotted-target-min, 24px);min-inline-size:0}[data-ui=filter-bar][data-part=builder] [data-part=rule]>*,[data-ui=filter-bar][data-part=builder] [data-part=rule] :is([data-part=operator],[data-part=operand]){min-inline-size:0}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"0\"] [data-part=operand]{display:none}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"0\"]{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr) var(--slotted-target-min, 24px)}[data-ui=filter-bar][data-part=builder] [data-part=operand]{display:grid;gap:var(--_gap-sm);min-inline-size:0}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"2\"] [data-part=operand]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap-sm);padding-inline-start:calc(var(--_join-col) + var(--_gap-sm))}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]>:is([data-part=add-rule],[data-part=add-group],[data-part=clear],[data-part=save-preset]){--slotted-control-font-weight: var(--slotted-font-weight-medium, 500)}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]>[data-part=save-preset]{margin-inline-start:auto}@container slotted-filter-bar-group (max-width: 30rem){[data-ui=filter-bar][data-part=builder] [data-part=rule],[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"0\"]{grid-template-columns:minmax(0,1fr) var(--slotted-target-min, 24px)}[data-ui=filter-bar][data-part=builder] [data-part=rule]>[data-part=field]{grid-column:1}[data-ui=filter-bar][data-part=builder] [data-part=rule]>[data-part=remove]{grid-column:2;grid-row:1}[data-ui=filter-bar][data-part=builder] [data-part=rule] :is([data-part=operator],[data-part=operand]){grid-column:1 / -1}}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]{display:none;visibility:hidden}@container slotted-filter-bar-builder (max-width: 30rem){[data-ui=filter-bar][data-part=builder]{gap:var(--_gap)}[data-ui=filter-bar][data-part=builder] [data-part=rules]{grid-template-columns:minmax(0,1fr);row-gap:var(--_gap-sm)}[data-ui=filter-bar][data-part=builder] [data-part=conjunction]{font-size:var(--slotted-font-size-xs, 12px);line-height:var(--slotted-line-height-xs, 1.5);padding-inline-start:var(--_seg-pad);text-align:start}[data-ui=filter-bar][data-part=builder] [data-part=rules]>[data-part=conjunction]:first-child{display:none}[data-ui=filter-bar][data-part=builder] [data-part=group]:not([data-depth=\"0\"]),[data-ui=filter-bar][data-part=builder] [data-part=group]:is([data-depth=\"2\"],[data-depth=\"4\"],[data-depth=\"6\"]){background-color:transparent;border:0;border-inline-start:var(--slotted-border-width-medium, 2px) solid var(--_edge);border-radius:0;padding-block:0;padding-inline:var(--slotted-space-4, .5rem) 0}[data-ui=filter-bar][data-part=builder] [data-part=rule],[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"0\"]{background-color:var(--_surface);border:var(--_border-width) solid var(--_edge);border-radius:var(--slotted-radius-md, 6px);box-shadow:var(--slotted-control-shadow, none);column-gap:0;grid-template-areas:\"summary remove\";grid-template-columns:minmax(0,1fr) var(--_height);row-gap:var(--_gap-sm);transition:border-color var(--_duration) var(--_easing)}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-expanded]{border-color:var(--slotted-border-strong, ButtonBorder);padding-block-end:var(--_seg-pad)}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-invalid]{border-color:var(--_invalid);box-shadow:var(--_invalid-edge)}@media(forced-colors:active){[data-ui=filter-bar][data-part=builder] [data-part=rule][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]{align-items:center;appearance:none;background:none;border:0;border-radius:calc(var(--slotted-radius-md, 6px) - var(--_border-width));color:var(--_ink);cursor:pointer;display:flex;font:inherit;gap:var(--_gap-sm);grid-area:summary;margin:0;min-block-size:var(--_height);min-inline-size:0;padding-block:max(var(--_gap-sm),calc((var(--_height) - 1lh) / 2));padding-inline:var(--_seg-pad) 0;text-align:start;transition:background-color var(--_duration) var(--_easing);visibility:visible}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]>[data-sentence]{flex:1 1 auto;min-inline-size:0}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary] [data-field]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary] [data-operator]{color:var(--_muted)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary] [data-value]{font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:0;overflow-wrap:anywhere}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]>[data-ui=icon]{--slotted-icon-size: var(--_icon);color:var(--_muted);flex:none;margin-inline-start:auto;transition:rotate var(--_duration) var(--_easing)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary][aria-expanded=true]>[data-ui=icon]{rotate:180deg}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]:enabled:hover{background-color:var(--_hover)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]:enabled:active{background-color:var(--_active)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=filter-bar][data-part=builder] [data-part=rule]>[data-part=remove]{align-self:center;grid-area:remove;grid-row:1;justify-self:center}[data-ui=filter-bar][data-part=builder] [data-part=rule]:not([data-expanded]) :is([data-part=field],[data-part=operator],[data-part=operand]){display:none;visibility:hidden}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-expanded] :is([data-part=field],[data-part=operator],[data-part=operand]){grid-column:1 / -1;margin-inline:var(--_seg-pad);transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=filter-bar][data-part=builder] [data-part=rule][data-expanded] :is([data-part=field],[data-part=operator],[data-part=operand]){opacity:0;translate:0 calc(-1 * var(--slotted-space-2, .25rem))}}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]{padding-inline-start:0}[data-ui=filter-bar][data-part=builder] [data-part=group][data-depth=\"0\"]>[data-part=actions]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}[data-ui=filter-bar][data-part=builder] [data-part=group][data-depth=\"0\"]>[data-part=actions]>:is([data-part=add-rule],[data-part=add-group]){inline-size:100%}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]>:is([data-part=clear],[data-part=save-preset]){margin-inline-start:0}}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]{align-items:center;appearance:none;background:none;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--_control-radius);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--slotted-target-min, 24px);justify-content:center;padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]>[data-ui=icon]{--slotted-icon-size: var(--_icon)}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]:enabled:hover{background-color:var(--_hover);color:var(--_ink)}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]:enabled:active{background-color:var(--_active);color:var(--_ink)}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@container slotted-filter-bar (max-width: 36rem){[data-ui=filter-bar]>[data-part=frame]{grid-template-areas:\"search\" \"bar\" \"count\";grid-template-columns:minmax(0,1fr)}[data-ui=filter-bar]>[data-part=frame]:has(>[data-part=end]:not(:empty)){grid-template-areas:\"search\" \"bar\" \"end\" \"count\"}[data-ui=filter-bar]>[data-part=frame]>[data-part=search]{max-inline-size:none}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>:is([data-part=summary],[data-part=pill]):focus-visible{outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]::-webkit-scrollbar{display:none}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>:is([data-part=summary],[data-part=chip],[data-part=pill]){flex:none}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>:is([data-part=more],[data-part=add],[data-part=clear],[data-part=actions]),[data-ui=filter-bar] [data-part=chip]>[data-part=chip-operator]{display:none;visibility:hidden}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>[data-part=chip][data-folded]{display:inline-flex;visibility:visible}[data-ui=filter-bar] [data-part=chip-value]>[data-operator]{display:inline}[data-ui=filter-bar] [data-part=chip-value]>[data-value]{max-inline-size:var(--slotted-filter-bar-value-max-narrow, 9rem)}[data-ui=filter-bar] [data-part=summary]{display:inline-flex;visibility:visible}[data-ui=filter-bar]>[data-part=frame]>[data-part=count]{justify-self:start;padding-block:0}}@media(hover:none)and (pointer:coarse){[data-ui=filter-bar] [data-part=search] [data-ui=kbd]{display:none}}@media(pointer:coarse){[data-ui=filter-bar] :is([data-part=more],[data-part=rule]>[data-part=remove]){position:relative}[data-ui=filter-bar] :is([data-part=more],[data-part=rule]>[data-part=remove]):before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}@media(forced-colors:active){[data-ui=filter-bar] [data-part=pill][data-invalid],[data-ui=filter-bar] [data-part=chip][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}[data-ui=filter-bar] [data-part=pill][data-invalid]:focus-visible{outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=filter-bar] [data-part=chip]>*+*{border-inline-start-color:GrayText}[data-ui=filter-bar] [data-part=chip]>[aria-expanded=true]{background-color:Highlight;color:HighlightText}}@media print{[data-ui=filter-bar][data-sticky]{position:static}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlButtonStart, selector: "[slButtonStart]", exportAs: ["slButtonStart"] }, { kind: "component", type: SlDrawer, selector: "sl-drawer", inputs: ["open", "extent", "mode", "side", "size", "mount", "escape", "outsidePress", "back", "modal", "loading", "messages", "drag", "scrimFrom", "minExtent", "maxExtent", "snapPoints", "container", "initialFocus", "finalFocus"], outputs: ["openChange", "extentChange", "openChangeRequest", "extentChangeRequest", "closed"], exportAs: ["slDrawer"] }, { kind: "directive", type: SlDrawerBody, selector: "[slDrawerBody]", inputs: ["inset"], exportAs: ["slDrawerBody"] }, { kind: "component", type: SlDrawerClose, selector: "[slDrawerClose]", inputs: ["value"], exportAs: ["slDrawerClose"] }, { kind: "directive", type: SlDrawerFooter, selector: "[slDrawerFooter]", exportAs: ["slDrawerFooter"] }, { kind: "directive", type: SlDrawerHeader, selector: "[slDrawerHeader]", exportAs: ["slDrawerHeader"] }, { kind: "directive", type: SlDrawerTitle, selector: "[slDrawerTitle]", exportAs: ["slDrawerTitle"] }, { kind: "component", type: SlFilterBarGroup, selector: "fieldset[slFilterBarGroup]", inputs: ["group", "path", "root", "fields", "translator", "size", "operandTemplates", "expanded"], outputs: ["rootChange", "applyRequest", "expandedChange"] }, { kind: "directive", type: SlFilterBarPart, selector: "[slFilterBarPart]", inputs: ["slFilterBarPart"] }, { kind: "component", type: SlFilterBarRuleEditor, selector: "[slFilterBarRuleEditor]", inputs: ["field", "current", "translator", "size", "operandTemplates", "queryDelay", "invalid", "withOperator"], outputs: ["ruleChange", "doneRequest"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlIconButton, selector: "button[slIconButton]", inputs: ["disabled", "focusableWhenDisabled", "loading", "loadingDelay", "messages", "shape", "size", "tone", "type", "variant", "pressed", "defaultPressed"], outputs: ["pressedChange"], exportAs: ["slIconButton"] }, { kind: "component", type: SlKbd, selector: "kbd[slKbd]", inputs: ["keyName", "platform", "size", "variant", "disabled", "messages"], exportAs: ["slKbd"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuGroup, selector: "sl-menu-group", inputs: ["label"], exportAs: ["slMenuGroup"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "directive", type: SlMenuItemIcon, selector: "[slMenuItemIcon]" }, { kind: "component", type: SlMenuRadioGroup, selector: "sl-menu-radio-group", inputs: ["value"], outputs: ["valueChange", "valueChangeRequest"], exportAs: ["slMenuRadioGroup"] }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverBody, selector: "[slPopoverBody]", exportAs: ["slPopoverBody"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "directive", type: SlPopoverTrigger, selector: "[slPopoverTrigger]", exportAs: ["slPopoverTrigger"] }, { kind: "component", type: SlSelect, selector: "sl-select", inputs: ["value", "open", "highlightedValue", "searchValue", "aria-label", "placeholder", "name", "form", "items", "total", "size", "variant", "side", "align", "width", "mount", "strategy", "messages", "filter", "locale", "sideOffset", "alignOffset", "collisionPadding", "typeaheadTimeout", "multiple", "clearable", "loop", "search", "highlightMatch", "typeahead", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "fullWidth", "disabled", "readOnly", "required", "invalid", "loading"], outputs: ["valueChange", "valueChangeRequest", "openChange", "openChangeRequest", "highlightedValueChange", "highlightedValueChangeRequest", "searchValueChange", "searchValueChangeRequest"], exportAs: ["slSelect"] }, { kind: "component", type: SlSelectItem, selector: "sl-select-item", inputs: ["value", "disabled", "description", "icon", "textValue", "label", "position"], exportAs: ["slSelectItem"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldEnd, selector: "[slTextFieldEnd]", exportAs: ["slTextFieldEnd"] }, { kind: "directive", type: SlTextFieldStart, selector: "[slTextFieldStart]", exportAs: ["slTextFieldStart"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlFilterBar, decorators: [{
+            type: Component,
+            args: [{ selector: '[slFilterBar]', standalone: true, imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlButtonStart,
+                        SlDrawer,
+                        SlDrawerBody,
+                        SlDrawerClose,
+                        SlDrawerFooter,
+                        SlDrawerHeader,
+                        SlDrawerTitle,
+                        SlFilterBarGroup,
+                        SlFilterBarPart,
+                        SlFilterBarRuleEditor,
+                        SlGlyph,
+                        SlIcon,
+                        SlIconButton,
+                        SlKbd,
+                        SlMenu,
+                        SlMenuGroup,
+                        SlMenuItem,
+                        SlMenuItemIcon,
+                        SlMenuRadioGroup,
+                        SlMenuTrigger,
+                        SlPopover,
+                        SlPopoverContent,
+                        SlPopoverBody,
+                        SlPopoverLayer,
+                        SlPopoverTrigger,
+                        SlSelect,
+                        SlSelectItem,
+                        SlTextField,
+                        SlTextFieldEnd,
+                        SlTextFieldStart,
+                        SlTextFieldInput,
+                    ], template: `
+    <ng-template #fieldIcon let-icon>
+      @if (isTemplate(icon)) {
+        <span slIcon><ng-container [ngTemplateOutlet]="icon" /></span>
+      } @else if (icon) {
+        <span slIcon><svg slGlyph [name]="icon"></svg></span>
+      }
+    </ng-template>
+
+    <div data-part="frame">
+      <div data-part="search">
+        <div slTextField [size]="sizeValue()" [clearable]="true">
+          <span slTextFieldStart
+            ><span slIcon><svg slGlyph name="search"></svg></span
+          ></span>
+          <input
+            #search
+            slTextFieldInput
+            type="search"
+            [value]="shownQuery()"
+            [attr.aria-label]="t('search')"
+            [attr.placeholder]="t('search')"
+            [disabled]="disabled()"
+            (valueChange)="typeQuery($event)"
+            (keydown)="onSearchKeyDown($event)"
+          />
+          @if (shortcutValue(); as key) {
+            <span slTextFieldEnd
+              ><kbd slKbd size="sm">{{ key }}</kbd></span
+            >
+          }
+        </div>
+      </div>
+
+      <div
+        #barRow
+        data-part="bar"
+        role="toolbar"
+        [attr.aria-label]="t('filters')"
+        [attr.aria-description]="readOnly() ? t('readOnly') : null"
+        [attr.data-revealed]="isRevealed() ? '' : null"
+      >
+        <button
+          slButton
+          slFilterBarPart="summary"
+          type="button"
+          tone="secondary"
+          variant="outline"
+          aria-haspopup="dialog"
+          [size]="sizeValue()"
+          [disabled]="disabled()"
+          (click)="openBuilderAt('pointer', $event)"
+        >
+          <span slButtonStart
+            ><span slIcon><svg slGlyph name="funnel"></svg></span
+          ></span>
+          <span>{{ t('summary', { count: activeCount() }) }}</span>
+        </button>
+
+        @for (member of members(); track member.id) {
+          @if (pillOf(member); as pill) {
+            <button
+              data-part="pill"
+              type="button"
+              aria-haspopup="dialog"
+              [attr.data-field]="pill.field.key"
+              [attr.data-invalid]="invalid() === pill.field.key ? '' : null"
+              [attr.aria-invalid]="invalid() === pill.field.key ? 'true' : null"
+              [disabled]="disabled()"
+              (click)="start(pill.field.key, $event)"
+            >
+              <span slIcon><svg slGlyph name="plus"></svg></span><span>{{ pill.field.label }}</span>
+            </button>
+          }
+          @if (chipOf(member); as chip) {
+            <div
+              data-part="chip"
+              role="group"
+              [attr.aria-label]="chip.name"
+              [attr.data-field]="chip.key"
+              [attr.data-operands]="chip.operands"
+              [attr.data-pinned]="chip.pinned ? '' : null"
+              [attr.data-incomplete]="chip.incomplete ? '' : null"
+              [attr.data-folded]="chip.folded ? '' : null"
+              [attr.data-invalid]="chip.unknown || invalid() === chip.key ? '' : null"
+              (keydown)="onChipKeyDown($event, chip.key)"
+            >
+              <span data-part="chip-field"
+                ><ng-container
+                  [ngTemplateOutlet]="fieldIcon"
+                  [ngTemplateOutletContext]="{ $implicit: chip.field?.icon }"
+                /><span>{{ chip.label }}</span></span
+              >
+              @if (readOnly() || chip.unknown) {
+                <button
+                  data-part="chip-operator"
+                  type="button"
+                  aria-disabled="true"
+                  [disabled]="disabled()"
+                >
+                  {{ chip.operator }}
+                </button>
+              } @else {
+                <button
+                  data-part="chip-operator"
+                  slFilterBarPart="chip-operator"
+                  type="button"
+                  [disabled]="disabled()"
+                  [slMenuTriggerFor]="operatorMenu"
+                >
+                  {{ chip.operator }}
+                </button>
+                <sl-menu #operatorMenu [aria-label]="t('operator')">
+                  <sl-menu-radio-group
+                    [value]="chip.condition"
+                    (valueChangeRequest)="setOperator(chip.key, chip.filter, $event.value)"
+                  >
+                    @for (operator of chip.operators; track operator) {
+                      <button slMenuRadioItem [value]="operator" [closeOnSelect]="true">
+                        {{ operatorWords(operator) }}
+                      </button>
+                    }
+                  </sl-menu-radio-group>
+                </sl-menu>
+              }
+              @if (chip.hasValue) {
+                @if (readOnly() || chip.unknown || narrow()) {
+                  <button
+                    data-part="chip-value"
+                    type="button"
+                    [attr.aria-haspopup]="readOnly() || chip.unknown ? null : 'dialog'"
+                    [attr.aria-disabled]="readOnly() || chip.unknown ? 'true' : null"
+                    [attr.aria-label]="chip.valueName"
+                    [attr.title]="chip.valueTitle"
+                    [disabled]="disabled()"
+                    (click)="onValueSegment(chip, $event)"
+                  >
+                    <span data-operator>{{ chip.operator }}</span
+                    ><span data-value>{{ chip.value }}</span>
+                  </button>
+                } @else if (chip.field; as field) {
+                  <ng-container
+                    slPopover
+                    [open]="valueOpen() === chip.key"
+                    (openChange)="toggleValue(chip.key, $event)"
+                  >
+                    <button
+                      slPopoverTrigger
+                      data-part="chip-value"
+                      type="button"
+                      aria-haspopup="dialog"
+                      [attr.aria-label]="chip.valueName"
+                      [attr.title]="chip.valueTitle"
+                      [disabled]="disabled()"
+                    >
+                      <span data-operator>{{ chip.operator }}</span
+                      ><span data-value>{{ chip.value }}</span>
+                    </button>
+                    <ng-template slPopoverLayer>
+                      <div slPopoverContent [attr.aria-label]="chip.label">
+                        <div slPopoverBody>
+                          <div
+                            slFilterBarRuleEditor
+                            [field]="field"
+                            [current]="chip.filter"
+                            [translator]="t"
+                            [size]="sizeValue()"
+                            [operandTemplates]="operandTemplates()"
+                            [queryDelay]="applyValue() === 'live' ? queryDelayValue() : 0"
+                            [invalid]="invalid() === chip.key"
+                            [withOperator]="false"
+                            (ruleChange)="changeRule(chip.key, $event, 'keyboard')"
+                            (doneRequest)="finishValue(chip.key)"
+                          ></div>
+                        </div>
+                      </div>
+                    </ng-template>
+                  </ng-container>
+                }
+              }
+              @if (chip.removable) {
+                <button
+                  data-part="chip-remove"
+                  type="button"
+                  [attr.aria-label]="t('remove', { name: chip.label })"
+                  [disabled]="disabled()"
+                  (click)="removeField(chip.key, $event)"
+                >
+                  <span slIcon><svg slGlyph name="x"></svg></span>
+                </button>
+              }
+            </div>
+          }
+          @if (groupOf(member); as group) {
+            <div
+              data-part="chip"
+              role="group"
+              data-operands="1"
+              [attr.aria-label]="group.words"
+              [attr.data-folded]="group.folded ? '' : null"
+              (keydown)="onGroupKeyDown($event, group.path)"
+            >
+              <button
+                data-part="chip-value"
+                type="button"
+                aria-haspopup="dialog"
+                [attr.aria-disabled]="readOnly() ? 'true' : null"
+                [attr.title]="group.words"
+                [disabled]="disabled()"
+                (click)="readOnly() ? null : openBuilderAt('pointer', $event, { path: group.path })"
+              >
+                <span data-value>{{ group.words }}</span>
+              </button>
+              @if (!readOnly()) {
+                <button
+                  data-part="chip-remove"
+                  type="button"
+                  [attr.aria-label]="t('remove', { name: group.words })"
+                  [disabled]="disabled()"
+                  (click)="removeNode(group.path, $event)"
+                >
+                  <span slIcon><svg slGlyph name="x"></svg></span>
+                </button>
+              }
+            </div>
+          }
+        }
+
+        @if (folded() > 0) {
+          <button
+            data-part="more"
+            type="button"
+            [attr.aria-expanded]="isRevealed()"
+            [disabled]="disabled()"
+            (click)="requestRevealed(!isRevealed(), 'pointer', $event)"
+          >
+            {{ isRevealed() ? t('less') : t('more', { count: folded() }) }}
+          </button>
+        }
+
+        @if (!readOnly()) {
+          @if (chipCount() > 0) {
+            <!-- With a chip in the bar, add is its glyph alone, in the chips' shape; the label stays its name. -->
+            <button
+              slIconButton
+              slFilterBarPart="add"
+              data-compact
+              type="button"
+              shape="circle"
+              tone="secondary"
+              variant="outline"
+              [size]="sizeValue()"
+              [attr.aria-label]="t('add')"
+              [attr.title]="t('add')"
+              [disabled]="disabled() || unfiltered().length === 0"
+              [slMenuTriggerFor]="addMenu"
+            >
+              <span slIcon><svg slGlyph name="plus"></svg></span>
+            </button>
+          } @else {
+            <button
+              slButton
+              slFilterBarPart="add"
+              type="button"
+              tone="secondary"
+              variant="ghost"
+              [size]="sizeValue()"
+              [disabled]="disabled() || unfiltered().length === 0"
+              [slMenuTriggerFor]="addMenu"
+            >
+              <!-- The glyph stands in the button's own box; bare in the label it has no size. -->
+              <span slButtonStart
+                ><span slIcon><svg slGlyph name="plus"></svg></span
+              ></span>
+              {{ t('add') }}
+            </button>
+          }
+          <sl-menu #addMenu [aria-label]="t('add')">
+            @for (section of sections(); track section.name ?? '') {
+              @if (section.name === undefined) {
+                @for (field of section.fields; track field.key) {
+                  <button slMenuItem (select)="start(field.key, $event.source)">
+                    @if (field.icon) {
+                      <span slMenuItemIcon
+                        ><ng-container
+                          [ngTemplateOutlet]="fieldIcon"
+                          [ngTemplateOutletContext]="{ $implicit: field.icon }"
+                      /></span>
+                    }
+                    {{ field.label }}
+                  </button>
+                }
+              } @else {
+                <sl-menu-group [label]="section.name">
+                  @for (field of section.fields; track field.key) {
+                    <button slMenuItem (select)="start(field.key, $event.source)">
+                      @if (field.icon) {
+                        <span slMenuItemIcon
+                          ><ng-container
+                            [ngTemplateOutlet]="fieldIcon"
+                            [ngTemplateOutletContext]="{ $implicit: field.icon }"
+                        /></span>
+                      }
+                      {{ field.label }}
+                    </button>
+                  }
+                </sl-menu-group>
+              }
+            }
+          </sl-menu>
+        }
+
+        @if (!readOnly() && (activeCount() > 0 || shownQuery() !== '' || pending())) {
+          <button
+            slButton
+            slFilterBarPart="clear"
+            type="button"
+            tone="secondary"
+            variant="ghost"
+            [size]="sizeValue()"
+            [disabled]="disabled()"
+            (click)="clearAll($event)"
+          >
+            {{ t('clear') }}
+          </button>
+        }
+
+        @if (applyValue() === 'manual' && !readOnly()) {
+          <div data-part="actions">
+            <button
+              slButton
+              slFilterBarPart="reset"
+              type="button"
+              tone="secondary"
+              variant="ghost"
+              [size]="sizeValue()"
+              [disabled]="disabled() || !dirty()"
+              (click)="reset()"
+            >
+              {{ t('reset') }}
+            </button>
+            <button
+              slButton
+              slFilterBarPart="apply"
+              type="button"
+              [size]="sizeValue()"
+              [disabled]="disabled() || loading() || !dirty()"
+              (click)="submit($event)"
+            >
+              {{ t('apply') }}
+            </button>
+          </div>
+        }
+      </div>
+
+      <div data-part="end">
+        @if (presets(); as views) {
+          @if (views.length > 0) {
+            <!-- Clearable: leaving a preset is the control's own clear, and
+                 without it the one way out of a saved view is deleting it. -->
+            <div data-part="preset">
+              <sl-select
+                clearable
+                [size]="sizeValue()"
+                [disabled]="disabled() || readOnly()"
+                [items]="presetItems()"
+                [attr.aria-label]="t('preset')"
+                [placeholder]="t('presetNone')"
+                [value]="currentPreset()"
+                (valueChange)="choosePreset($any($event))"
+              >
+                @for (view of views; track view.key) {
+                  <sl-select-item [value]="view.key">{{ view.label }}</sl-select-item>
+                }
+              </sl-select>
+            </div>
+          }
+        }
+        <ng-content select="[slFilterBarEnd]"></ng-content>
+      </div>
+
+      @if (countText() !== null || loading()) {
+        <p data-part="count" aria-live="polite" [attr.aria-busy]="loading() ? 'true' : null">
+          @if (loading()) {
+            <span
+              data-ui="spinner"
+              data-part="root"
+              data-size="sm"
+              role="progressbar"
+              [attr.aria-label]="t('filters')"
+            ></span>
+          }
+          {{ countText() }}
+        </p>
+      }
+    </div>
+
+    <sl-drawer
+      [side]="sheet() ? 'bottom' : 'end'"
+      [size]="sheet() ? 'content' : 'xl'"
+      [container]="container()"
+      [open]="isOpen()"
+      (openChangeRequest)="onDrawerRequest($event)"
+    >
+      <header slDrawerHeader>
+        <h2 slDrawerTitle>{{ t('builder') }}</h2>
+        <button slDrawerClose></button>
+      </header>
+      <div slDrawerBody>
+        <div data-part="builder" data-ui="filter-bar" [id]="id + '-builder'">
+          <fieldset
+            slFilterBarGroup
+            [group]="drawerDraft() ?? empty"
+            [root]="drawerDraft() ?? empty"
+            [fields]="fields()"
+            [translator]="t"
+            [size]="sizeValue()"
+            [operandTemplates]="operandTemplates()"
+            [expanded]="expanded()"
+            (expandedChange)="expanded.set($event)"
+            (rootChange)="drawerDraft.set($event)"
+            (applyRequest)="commitDrawer()"
+          >
+            @if (draftActive() > 0) {
+              <button
+                slButton
+                slFilterBarPart="clear"
+                type="button"
+                size="sm"
+                tone="secondary"
+                variant="ghost"
+                (click)="drawerDraft.set(baseline())"
+              >
+                {{ t('clear') }}
+              </button>
+            }
+            @if (savePresetEnabled()) {
+              <button
+                slButton
+                slFilterBarPart="save-preset"
+                type="button"
+                size="sm"
+                tone="secondary"
+                variant="ghost"
+                (click)="savePreset.emit(normalized(drawerDraft()))"
+              >
+                {{ t('savePreset') }}
+              </button>
+            }
+          </fieldset>
+        </div>
+      </div>
+      <footer slDrawerFooter>
+        <button
+          slButton
+          type="button"
+          size="sm"
+          tone="secondary"
+          variant="ghost"
+          (click)="requestOpen(false, 'dismiss', $event)"
+        >
+          {{ t('cancel') }}
+        </button>
+        <button slButton type="button" size="sm" (click)="commitDrawer()">
+          {{ t('apply') }}
+        </button>
+      </footer>
+    </sl-drawer>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'slFilterBar', host: {
+                        'data-ui': 'filter-bar',
+                        'data-part': 'root',
+                        role: 'search',
+                        '[attr.aria-label]': "ariaLabel ?? t('bar')",
+                        '[attr.data-apply]': 'applyValue()',
+                        '[attr.data-size]': 'sizeValue()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-readonly]': 'readOnly() ? "" : null',
+                        '[attr.data-loading]': 'loading() ? "" : null',
+                        '[attr.data-dirty]': 'dirty() || presetDirty() ? "" : null',
+                        '[attr.data-open]': 'isOpen() ? "" : null',
+                        '[attr.data-sticky]': 'sticky() ? "" : null',
+                    }, styles: ["@layer slotted.components{[data-ui=filter-bar]{--_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-md, 8px));--_gap-sm: var(--slotted-control-gap-sm, 6px);--_height: var(--slotted-control-height-md, 34px);--_font-size: var(--slotted-control-font-size-md, 13px);--_pad: var(--slotted-control-padding-inline-md, 13px);--_seg-pad: var(--slotted-control-padding-inline-sm, 10px);--_icon: var(--slotted-control-icon-size-md, 16px);--_radius: var(--slotted-filter-bar-pill-radius, var(--slotted-radius-full, 9999px));--_control-radius: var(--slotted-control-radius, var(--slotted-radius-sm, 4px));--_border-width: var(--slotted-control-border-width, 1px);--_ink: var(--slotted-filter-bar-color, var(--slotted-text, CanvasText));--_muted: var(--slotted-filter-bar-color-muted, var(--slotted-text-muted, GrayText));--_edge: var( --slotted-filter-bar-pill-border, var(--slotted-control-border-color, ButtonBorder) );--_seam: var(--slotted-filter-bar-chip-seam, var(--slotted-border-subtle, ButtonBorder));--_surface: var(--slotted-filter-bar-surface, var(--slotted-surface, Canvas));--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_invalid: var(--slotted-tone-danger-border, GrayText);--_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid);--_duration: var(--slotted-control-transition-duration, var(--slotted-duration-short));--_easing: var(--slotted-control-transition-easing, var(--slotted-easing-standard));box-sizing:border-box;color:var(--_ink);font-family:var(--slotted-filter-bar-font-family, var(--slotted-font-family-sans, inherit));font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5);min-inline-size:0}[data-ui=filter-bar][data-part=root]{container-name:slotted-filter-bar;container-type:inline-size;display:block;inline-size:100%}[data-ui=filter-bar][data-part=rule]{display:grid;gap:var(--_gap);inline-size:var(--slotted-filter-bar-editor-size, 18rem);max-inline-size:100%}[data-ui=filter-bar][data-part=rule] [data-part=operand]{display:grid;gap:var(--_gap-sm);min-inline-size:0}[data-ui=filter-bar][data-part=rule][data-kind=boolean] [data-part=operand]:empty{display:none}[data-ui=filter-bar][data-part=rule]>[data-part=actions]{align-items:center;display:flex;gap:var(--_gap-sm);justify-content:flex-end}[data-ui=filter-bar]>[data-part=frame]{align-items:start;column-gap:var(--_gap);display:grid;grid-template-areas:\"search end count\" \"bar bar bar\";grid-template-columns:minmax(0,1fr) auto auto;row-gap:var(--_gap)}[data-ui=filter-bar]>[data-part=frame]>[data-part=search]{grid-area:search;max-inline-size:var(--slotted-filter-bar-search-max, 28rem);min-inline-size:0}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]{grid-area:bar}[data-ui=filter-bar]>[data-part=frame]>[data-part=end]{grid-area:end}[data-ui=filter-bar]>[data-part=frame]>[data-part=count]{grid-area:count;justify-self:end}[data-ui=filter-bar]>[data-part=frame]>[data-part=end]:empty{display:none}[data-ui=filter-bar][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_pad: var(--slotted-control-padding-inline-sm, 10px);--_seg-pad: var(--slotted-control-gap-md, 8px);--_icon: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-sm, 6px));--_gap-sm: var(--slotted-control-gap-sm, 4px)}[data-ui=filter-bar][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_pad: var(--slotted-control-padding-inline-lg, 16px);--_seg-pad: var(--slotted-control-padding-inline-md, 13px);--_icon: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-filter-bar-gap, var(--slotted-control-gap-lg, 8px))}[data-ui=filter-bar] [data-part=search]>[data-ui=text-field],[data-ui=filter-bar] [data-part=preset]>[data-ui=select],[data-ui=filter-bar] :is([data-part=field],[data-part=operator])>[data-ui=select]{inline-size:100%}[data-ui=filter-bar] [data-part=bar]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);min-inline-size:0}[data-ui=filter-bar] [data-part=end]{align-items:center;display:flex;gap:var(--_gap)}[data-ui=filter-bar]>[data-part=frame]>[data-part=count]{color:var(--_muted);font-variant-numeric:tabular-nums;margin:0;min-block-size:1lh;padding-block:max(0px,calc((var(--_height) - 1lh) / 2));white-space:nowrap}[data-ui=filter-bar] [data-part=pill]{align-items:center;appearance:none;background-color:transparent;block-size:var(--_height);border:var(--_border-width) dashed var(--_edge);border-radius:var(--_radius);box-sizing:border-box;color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_gap-sm);line-height:var(--slotted-control-line-height, 1);margin:0;padding-block:0;padding-inline:calc(var(--_pad) - var(--_gap-sm)) var(--_pad);transition:background-color var(--_duration) var(--_easing),border-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter);white-space:nowrap}[data-ui=filter-bar] [data-part=pill]>span:not([data-ui=icon]){min-inline-size:0;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate}[data-ui=filter-bar] [data-part=pill]>[data-ui=icon]{--slotted-icon-size: var(--_icon)}[data-ui=filter-bar] [data-part=pill][data-invalid]{border-color:var(--_invalid);box-shadow:var(--_invalid-edge)}[data-ui=filter-bar] [data-part=pill]:enabled:hover{background-color:var(--_hover);border-color:var(--slotted-border-strong, ButtonBorder);color:var(--_ink)}[data-ui=filter-bar] [data-part=pill]:enabled:active,[data-ui=filter-bar] [data-part=pill]:enabled[aria-expanded=true]{background-color:var(--_active);border-color:var(--slotted-border-strong, ButtonBorder);color:var(--_ink)}[data-ui=filter-bar] [data-part=pill]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=filter-bar] [data-part=chip]{align-items:stretch;background-color:var(--_surface);block-size:var(--_height);border:var(--_border-width) solid var(--_edge);border-radius:var(--_radius);box-shadow:var(--slotted-control-shadow, none);box-sizing:border-box;display:inline-flex;max-inline-size:100%;min-inline-size:0;transition:border-color var(--_duration) var(--_easing),opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=filter-bar] :is([data-part=chip],[data-part=pill]){opacity:0;translate:0 calc(-1 * var(--slotted-space-2, .25rem))}}[data-ui=filter-bar] [data-part=chip]>*{align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:inherit;display:inline-flex;flex:none;font:inherit;gap:var(--_gap-sm);line-height:var(--slotted-control-line-height, 1);margin:0;min-inline-size:0;padding-block:0;padding-inline:var(--_seg-pad);white-space:nowrap}[data-ui=filter-bar] [data-part=chip]>*+*{border-inline-start:var(--_border-width) solid var(--_seam)}[data-ui=filter-bar] [data-part=chip]>:first-child{border-end-start-radius:var(--_radius);border-start-start-radius:var(--_radius);padding-inline-start:var(--_pad)}[data-ui=filter-bar] [data-part=chip]>:last-child{border-end-end-radius:var(--_radius);border-start-end-radius:var(--_radius)}[data-ui=filter-bar] [data-part=chip] [data-ui=icon]{--slotted-icon-size: var(--_icon)}[data-ui=filter-bar] [data-part=chip-field]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=filter-bar] [data-part=chip-field]>[data-ui=icon]{color:var(--_muted)}[data-ui=filter-bar] [data-part=chip]>*>span:not([data-ui]),[data-ui=filter-bar] [data-part=chip-operator]{unicode-bidi:isolate}[data-ui=filter-bar] [data-part=chip-operator]{color:var(--_muted);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=filter-bar] [data-part=chip-value]{font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:0}[data-ui=filter-bar] [data-part=chip-value]>[data-value]{max-inline-size:var(--slotted-filter-bar-value-max, 12rem);min-inline-size:0;overflow:hidden;text-overflow:ellipsis}[data-ui=filter-bar] [data-part=chip-value]>[data-operator]{color:var(--_muted);display:none;font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=filter-bar] [data-part=chip-remove]{aspect-ratio:1;color:var(--_muted);justify-content:center;padding-inline:0}[data-ui=filter-bar] [data-part=chip]>:is(button,[role=button]){cursor:pointer;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=filter-bar] [data-part=chip]>:is(button,[role=button]):enabled:not([aria-disabled=true]):hover{background-color:var(--_hover);color:var(--_ink)}[data-ui=filter-bar] [data-part=chip]>:is(button,[role=button]):enabled:not([aria-disabled=true]):active,[data-ui=filter-bar] [data-part=chip]>:is(button,[role=button])[aria-expanded=true]{background-color:var(--_active);color:var(--_ink)}[data-ui=filter-bar] [data-part=chip]>:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=filter-bar] [data-part=chip][data-incomplete]{border-style:dashed;box-shadow:none}[data-ui=filter-bar] [data-part=chip][data-incomplete]>[data-part=chip-value]{color:var(--_muted);font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=filter-bar] [data-part=chip][data-invalid]{border-color:var(--_invalid);box-shadow:var(--_invalid-edge)}[data-ui=filter-bar] [data-part=chip][data-invalid]>[data-part=chip-field],[data-ui=filter-bar] [data-part=chip][data-invalid]>[data-part=chip-field]>[data-ui=icon]{color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=filter-bar] [data-part=chip][data-folded]{display:none;visibility:hidden}[data-ui=filter-bar] [data-part=bar][data-revealed] [data-part=chip][data-folded]{display:inline-flex;visibility:visible}[data-ui=filter-bar] [data-part=more]{align-items:center;appearance:none;background:none;block-size:var(--_height);border:0;border-radius:var(--_radius);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;font-weight:var(--slotted-font-weight-medium, 500);justify-content:center;margin:0;padding-inline:var(--_seg-pad);transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing);white-space:nowrap}[data-ui=filter-bar] [data-part=more]:enabled:hover{background-color:var(--_hover);color:var(--_ink)}[data-ui=filter-bar] [data-part=more]:enabled:active{background-color:var(--_active);color:var(--_ink)}[data-ui=filter-bar] [data-part=more]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=filter-bar] [data-part=bar] :is([data-part=clear],[data-part=reset]){--slotted-control-font-weight: var(--slotted-font-weight-medium, 500)}[data-ui=filter-bar] [data-part=summary]{display:none;visibility:hidden}[data-ui=filter-bar] [data-part=summary]>[data-part=label]>span{font-variant-numeric:tabular-nums}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>[data-part=actions]{align-items:center;display:flex;gap:var(--_gap-sm);margin-inline-start:auto}[data-ui=filter-bar][data-disabled]{--_ink: var(--slotted-disabled-foreground, GrayText);--_muted: var(--slotted-disabled-foreground, GrayText);--_edge: var(--slotted-disabled-border, GrayText);--_seam: var(--slotted-disabled-border, GrayText);--_surface: var(--slotted-disabled-background, Canvas)}[data-ui=filter-bar][data-disabled] :is([data-part=pill],[data-part=chip]){box-shadow:none}[data-ui=filter-bar][data-disabled] :is([data-part=pill],[data-part=chip]>*){cursor:not-allowed}[data-ui=filter-bar][data-readonly] [data-part=chip]>*{cursor:default}[data-ui=filter-bar][data-loading]>[data-part=frame]>[data-part=count]{align-items:center;display:inline-flex;gap:var(--_gap-sm)}[data-ui=filter-bar][data-sticky]{background-color:var(--_surface);inset-block-start:var(--slotted-page-sticky-top, 0px);padding-block:var(--slotted-space-3, .375rem);position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=filter-bar][data-part=builder]{--_join-col: var(--slotted-filter-bar-join-size, 3.5rem);--_group-surface: var( --slotted-filter-bar-group-surface, var(--slotted-surface-sunken, Canvas) );--_group-edge: var(--slotted-filter-bar-group-border, var(--slotted-border-subtle, GrayText));container-name:slotted-filter-bar-builder;container-type:inline-size;display:grid;gap:var(--slotted-space-5, .75rem)}[data-ui=filter-bar][data-part=builder] [data-part=group]{border:0;container-name:slotted-filter-bar-group;container-type:inline-size;display:grid;gap:var(--_gap);margin:0;min-inline-size:0;padding:0}[data-ui=filter-bar][data-part=builder] [data-part=group]:not([data-depth=\"0\"]){background-color:var(--_group-surface);border:var(--slotted-border-width-thin, 1px) solid var(--_group-edge);border-radius:var(--slotted-radius-md, 6px);padding:var(--slotted-space-5, .75rem)}[data-ui=filter-bar][data-part=builder] [data-part=group]:is([data-depth=\"2\"],[data-depth=\"4\"],[data-depth=\"6\"]){background-color:var(--_surface)}[data-ui=filter-bar][data-part=builder] [data-part=group]>legend{block-size:1px;clip-path:inset(50%);overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}[data-ui=filter-bar][data-part=builder] [data-part=join]{align-items:center;color:var(--_ink);display:flex;flex-wrap:wrap;font-weight:var(--slotted-font-weight-medium, 500);gap:var(--_gap-sm)}[data-ui=filter-bar][data-part=builder] [data-part=join]>[data-part=remove-group]{margin-inline-start:auto}[data-ui=filter-bar][data-part=builder] [data-part=rules]{align-items:start;column-gap:var(--_gap-sm);display:grid;grid-template-columns:var(--_join-col) minmax(0,1fr);min-inline-size:0;row-gap:var(--_gap)}[data-ui=filter-bar][data-part=builder] [data-part=conjunction]{color:var(--_muted);line-height:var(--_height);overflow:hidden;text-align:end;text-overflow:ellipsis;white-space:nowrap}[data-ui=filter-bar][data-part=builder] [data-part=rule]{align-items:center;display:grid;gap:var(--_gap-sm);grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr) var(--slotted-target-min, 24px);min-inline-size:0}[data-ui=filter-bar][data-part=builder] [data-part=rule]>*,[data-ui=filter-bar][data-part=builder] [data-part=rule] :is([data-part=operator],[data-part=operand]){min-inline-size:0}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"0\"] [data-part=operand]{display:none}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"0\"]{grid-template-columns:minmax(0,1fr) minmax(0,2.5fr) var(--slotted-target-min, 24px)}[data-ui=filter-bar][data-part=builder] [data-part=operand]{display:grid;gap:var(--_gap-sm);min-inline-size:0}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"2\"] [data-part=operand]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap-sm);padding-inline-start:calc(var(--_join-col) + var(--_gap-sm))}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]>:is([data-part=add-rule],[data-part=add-group],[data-part=clear],[data-part=save-preset]){--slotted-control-font-weight: var(--slotted-font-weight-medium, 500)}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]>[data-part=save-preset]{margin-inline-start:auto}@container slotted-filter-bar-group (max-width: 30rem){[data-ui=filter-bar][data-part=builder] [data-part=rule],[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"0\"]{grid-template-columns:minmax(0,1fr) var(--slotted-target-min, 24px)}[data-ui=filter-bar][data-part=builder] [data-part=rule]>[data-part=field]{grid-column:1}[data-ui=filter-bar][data-part=builder] [data-part=rule]>[data-part=remove]{grid-column:2;grid-row:1}[data-ui=filter-bar][data-part=builder] [data-part=rule] :is([data-part=operator],[data-part=operand]){grid-column:1 / -1}}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]{display:none;visibility:hidden}@container slotted-filter-bar-builder (max-width: 30rem){[data-ui=filter-bar][data-part=builder]{gap:var(--_gap)}[data-ui=filter-bar][data-part=builder] [data-part=rules]{grid-template-columns:minmax(0,1fr);row-gap:var(--_gap-sm)}[data-ui=filter-bar][data-part=builder] [data-part=conjunction]{font-size:var(--slotted-font-size-xs, 12px);line-height:var(--slotted-line-height-xs, 1.5);padding-inline-start:var(--_seg-pad);text-align:start}[data-ui=filter-bar][data-part=builder] [data-part=rules]>[data-part=conjunction]:first-child{display:none}[data-ui=filter-bar][data-part=builder] [data-part=group]:not([data-depth=\"0\"]),[data-ui=filter-bar][data-part=builder] [data-part=group]:is([data-depth=\"2\"],[data-depth=\"4\"],[data-depth=\"6\"]){background-color:transparent;border:0;border-inline-start:var(--slotted-border-width-medium, 2px) solid var(--_edge);border-radius:0;padding-block:0;padding-inline:var(--slotted-space-4, .5rem) 0}[data-ui=filter-bar][data-part=builder] [data-part=rule],[data-ui=filter-bar][data-part=builder] [data-part=rule][data-operands=\"0\"]{background-color:var(--_surface);border:var(--_border-width) solid var(--_edge);border-radius:var(--slotted-radius-md, 6px);box-shadow:var(--slotted-control-shadow, none);column-gap:0;grid-template-areas:\"summary remove\";grid-template-columns:minmax(0,1fr) var(--_height);row-gap:var(--_gap-sm);transition:border-color var(--_duration) var(--_easing)}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-expanded]{border-color:var(--slotted-border-strong, ButtonBorder);padding-block-end:var(--_seg-pad)}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-invalid]{border-color:var(--_invalid);box-shadow:var(--_invalid-edge)}@media(forced-colors:active){[data-ui=filter-bar][data-part=builder] [data-part=rule][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]{align-items:center;appearance:none;background:none;border:0;border-radius:calc(var(--slotted-radius-md, 6px) - var(--_border-width));color:var(--_ink);cursor:pointer;display:flex;font:inherit;gap:var(--_gap-sm);grid-area:summary;margin:0;min-block-size:var(--_height);min-inline-size:0;padding-block:max(var(--_gap-sm),calc((var(--_height) - 1lh) / 2));padding-inline:var(--_seg-pad) 0;text-align:start;transition:background-color var(--_duration) var(--_easing);visibility:visible}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]>[data-sentence]{flex:1 1 auto;min-inline-size:0}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary] [data-field]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary] [data-operator]{color:var(--_muted)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary] [data-value]{font-weight:var(--slotted-font-weight-medium, 500);min-inline-size:0;overflow-wrap:anywhere}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]>[data-ui=icon]{--slotted-icon-size: var(--_icon);color:var(--_muted);flex:none;margin-inline-start:auto;transition:rotate var(--_duration) var(--_easing)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary][aria-expanded=true]>[data-ui=icon]{rotate:180deg}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]:enabled:hover{background-color:var(--_hover)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]:enabled:active{background-color:var(--_active)}[data-ui=filter-bar][data-part=builder] [data-part=rule-summary]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=filter-bar][data-part=builder] [data-part=rule]>[data-part=remove]{align-self:center;grid-area:remove;grid-row:1;justify-self:center}[data-ui=filter-bar][data-part=builder] [data-part=rule]:not([data-expanded]) :is([data-part=field],[data-part=operator],[data-part=operand]){display:none;visibility:hidden}[data-ui=filter-bar][data-part=builder] [data-part=rule][data-expanded] :is([data-part=field],[data-part=operator],[data-part=operand]){grid-column:1 / -1;margin-inline:var(--_seg-pad);transition:opacity var(--slotted-duration-medium) var(--slotted-easing-enter),translate var(--slotted-duration-medium) var(--slotted-easing-enter)}@starting-style{[data-ui=filter-bar][data-part=builder] [data-part=rule][data-expanded] :is([data-part=field],[data-part=operator],[data-part=operand]){opacity:0;translate:0 calc(-1 * var(--slotted-space-2, .25rem))}}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]{padding-inline-start:0}[data-ui=filter-bar][data-part=builder] [data-part=group][data-depth=\"0\"]>[data-part=actions]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}[data-ui=filter-bar][data-part=builder] [data-part=group][data-depth=\"0\"]>[data-part=actions]>:is([data-part=add-rule],[data-part=add-group]){inline-size:100%}[data-ui=filter-bar][data-part=builder] [data-part=group]>[data-part=actions]>:is([data-part=clear],[data-part=save-preset]){margin-inline-start:0}}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]{align-items:center;appearance:none;background:none;block-size:var(--slotted-target-min, 24px);border:0;border-radius:var(--_control-radius);color:var(--_muted);cursor:pointer;display:inline-flex;font:inherit;inline-size:var(--slotted-target-min, 24px);justify-content:center;padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]>[data-ui=icon]{--slotted-icon-size: var(--_icon)}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]:enabled:hover{background-color:var(--_hover);color:var(--_ink)}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]:enabled:active{background-color:var(--_active);color:var(--_ink)}[data-ui=filter-bar] [data-part=rule]>[data-part=remove]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}@container slotted-filter-bar (max-width: 36rem){[data-ui=filter-bar]>[data-part=frame]{grid-template-areas:\"search\" \"bar\" \"count\";grid-template-columns:minmax(0,1fr)}[data-ui=filter-bar]>[data-part=frame]:has(>[data-part=end]:not(:empty)){grid-template-areas:\"search\" \"bar\" \"end\" \"count\"}[data-ui=filter-bar]>[data-part=frame]>[data-part=search]{max-inline-size:none}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>:is([data-part=summary],[data-part=pill]):focus-visible{outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]::-webkit-scrollbar{display:none}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>:is([data-part=summary],[data-part=chip],[data-part=pill]){flex:none}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>:is([data-part=more],[data-part=add],[data-part=clear],[data-part=actions]),[data-ui=filter-bar] [data-part=chip]>[data-part=chip-operator]{display:none;visibility:hidden}[data-ui=filter-bar]>[data-part=frame]>[data-part=bar]>[data-part=chip][data-folded]{display:inline-flex;visibility:visible}[data-ui=filter-bar] [data-part=chip-value]>[data-operator]{display:inline}[data-ui=filter-bar] [data-part=chip-value]>[data-value]{max-inline-size:var(--slotted-filter-bar-value-max-narrow, 9rem)}[data-ui=filter-bar] [data-part=summary]{display:inline-flex;visibility:visible}[data-ui=filter-bar]>[data-part=frame]>[data-part=count]{justify-self:start;padding-block:0}}@media(hover:none)and (pointer:coarse){[data-ui=filter-bar] [data-part=search] [data-ui=kbd]{display:none}}@media(pointer:coarse){[data-ui=filter-bar] :is([data-part=more],[data-part=rule]>[data-part=remove]){position:relative}[data-ui=filter-bar] :is([data-part=more],[data-part=rule]>[data-part=remove]):before{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2));position:absolute}}@media(forced-colors:active){[data-ui=filter-bar] [data-part=pill][data-invalid],[data-ui=filter-bar] [data-part=chip][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)))}[data-ui=filter-bar] [data-part=pill][data-invalid]:focus-visible{outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=filter-bar] [data-part=chip]>*+*{border-inline-start-color:GrayText}[data-ui=filter-bar] [data-part=chip]>[aria-expanded=true]{background-color:Highlight;color:HighlightText}}@media print{[data-ui=filter-bar][data-sticky]{position:static}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], defaultQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultQuery", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], preset: [{ type: i0.Input, args: [{ isSignal: true, alias: "preset", required: false }] }, { type: i0.Output, args: ["presetChange"] }], defaultPreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPreset", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], revealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealed", required: false }] }, { type: i0.Output, args: ["revealedChange"] }], defaultRevealed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultRevealed", required: false }] }], apply: [{ type: i0.Input, args: [{ isSignal: true, alias: "apply", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], queryDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryDelay", required: false }] }], chipLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipLimit", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], valueChangeRequest: [{ type: i0.Output, args: ["valueChangeRequest"] }], queryChangeRequest: [{ type: i0.Output, args: ["queryChangeRequest"] }], presetChangeRequest: [{ type: i0.Output, args: ["presetChangeRequest"] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], revealedChangeRequest: [{ type: i0.Output, args: ["revealedChangeRequest"] }], savePresetEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "savePresetEnabled", required: false }] }], savePreset: [{ type: i0.Output, args: ["savePreset"] }], searchInput: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], barElement: [{ type: i0.ViewChild, args: ['barRow', { isSignal: true }] }], operandTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SlFilterBarOperand), { isSignal: true }] }], endSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlFilterBarEnd), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FILTER_BAR_DEFAULTS_TOKEN, FILTER_BAR_DEFAULT_APPLY, FILTER_BAR_DEFAULT_CHIP_LIMIT, FILTER_BAR_DEFAULT_QUERY_DELAY, FILTER_BAR_DEFAULT_SIZE, SlFilterBar, SlFilterBarCondition, SlFilterBarEnd, SlFilterBarGroup, SlFilterBarOperand, SlFilterBarPart, SlFilterBarRule, SlFilterBarRuleEditor, injectFilterBarDefaults, provideFilterBarDefaults };
+//# sourceMappingURL=slotted-angular-filter-bar.mjs.map