@salesforce/templates 66.11.1 → 66.12.0

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/breadcrumb/breadcrumb.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { SkeletonComponent } from "../../../components/ui/skeleton/skeleton";
+
+/**
+ * Object-search breadcrumb — Home > Records list > (optional) Record name.
+ *
+ * Mirrors the React `ObjectBreadcrumb`. Renders the list-only crumb by default
+ * and switches to the detail-view crumb (with record name + skeleton fallback)
+ * as soon as `loading` or `recordName` is set. Uses Angular `routerLink` where
+ * the React version uses `react-router`'s `Link`.
+ */
+@Component({
+	selector: "app-object-breadcrumb",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink, SkeletonComponent],
+	templateUrl: "./breadcrumb.html",
+})
+export class ObjectBreadcrumbComponent {
+	/** Router path for the object list view (e.g. `/accounts`). */
+	readonly listPath = input.required<string>();
+	/** Label for the list crumb (e.g. `Accounts`). */
+	readonly listLabel = input.required<string>();
+	/** Record name for the detail-view leaf crumb; omit for list-only view. */
+	readonly recordName = input<string | undefined>(undefined);
+	/** Show a skeleton in the leaf crumb while the record is loading. */
+	readonly loading = input<boolean>(false);
+	/** Prepend a Home crumb (default `true`). */
+	readonly includeHome = input<boolean>(true);
+	/** Label for the Home crumb (default `Home`). */
+	readonly homeLabel = input<string>("Home");
+
+	/** `true` when the crumb should render list + record leaves. */
+	protected readonly isDetailView = computed(() => this.loading() || !!this.recordName());
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/active-filters.html

@@ -0,0 +1,23 @@
+@if (chips().length > 0) {
+<div class="flex flex-wrap gap-2">
+	@for (chip of chips(); track chip.field) {
+	<app-button
+		appearance="outlined"
+		size="sm"
+		iconEnd="close"
+		[ariaLabel]="'Remove filter ' + chip.label"
+		(clicked)="onRemove(chip.field)"
+	>
+		{{ chip.label }}
+	</app-button>
+	}
+	<app-button
+		appearance="destructive"
+		size="sm"
+		ariaLabel="Clear all filters"
+		(clicked)="onClearAll()"
+	>
+		Clear all
+	</app-button>
+</div>
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/active-filters.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject } from "@angular/core";
+import { ButtonComponent } from "../../../components/ui/button/button";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { ActiveFilterValue } from "../utils/filter-utils";
+
+/**
+ * Format the display label for one active filter chip. Mirrors the React
+ * `formatFilterLabel`; a switch over the filter's declared `type`.
+ */
+function formatFilterLabel(filter: ActiveFilterValue): string {
+	const { label, type, value, min, max } = filter;
+	switch (type) {
+		case "search":
+			return `Search: ${value}`;
+		case "text":
+		case "picklist":
+			return `${label}: ${value}`;
+		case "multipicklist": {
+			const values = value ? value.split(",") : [];
+			if (values.length <= 2) return `${label}: ${values.join(", ")}`;
+			return `${label}: ${values.length} selected`;
+		}
+		case "boolean":
+			return `${label}: ${value === "true" ? "Yes" : "No"}`;
+		case "numeric": {
+			if (min && max) return `${label}: ${min} - ${max}`;
+			if (min) return `${label}: >= ${min}`;
+			return `${label}: <= ${max}`;
+		}
+		case "date":
+		case "datetime":
+		case "daterange":
+		case "datetimerange": {
+			if (min && max) return `${label}: ${min} to ${max}`;
+			if (min) return `${label}: from ${min}`;
+			return `${label}: until ${max}`;
+		}
+		default:
+			return label;
+	}
+}
+
+/**
+ * Removable-chip strip for the currently active filters.
+ *
+ * Reads `filters()` from {@link ObjectSearchStateService}; clicking a chip
+ * removes that filter, and the `Clear all` chip clears everything via
+ * `resetAll()`. Mirrors the React `ActiveFilters` component.
+ */
+@Component({
+	selector: "app-active-filters",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent],
+	templateUrl: "./active-filters.html",
+})
+export class ActiveFiltersComponent {
+	private readonly state = inject(ObjectSearchStateService);
+
+	/** Active filters signal from the state service. */
+	protected readonly filters = this.state.filters;
+	/** Display strings paired with the underlying field for chip actions. */
+	protected readonly chips = computed(() =>
+		this.filters().map((f) => ({ field: f.field, label: formatFilterLabel(f) })),
+	);
+
+	protected onRemove(field: string): void {
+		this.state.removeFilter(field);
+	}
+
+	protected onClearAll(): void {
+		this.state.resetAll();
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/date-filter.html

@@ -0,0 +1,18 @@
+<app-filter-field-wrapper [label]="config().label" [helpText]="config().helpText">
+	<div class="flex gap-2">
+		<app-select
+			class="flex-1"
+			[options]="operatorOptions"
+			[value]="operator()"
+			(valueChange)="onOperatorChange($event)"
+		/>
+		<app-date-picker
+			class="flex-1"
+			placeholder="Pick a date"
+			[readonly]="true"
+			[max]="maxDate()"
+			[value]="currentDate()"
+			(valueChange)="onDateChange($event)"
+		/>
+	</div>
+</app-filter-field-wrapper>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/date-filter.ts

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/{date-picker,select}/..., four
+// levels up.
+import { DatePickerComponent } from "../../../components/ui/date-picker/date-picker";
+import {
+	SelectComponent,
+	type AppSelectOption,
+} from "../../../components/ui/select/select";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig, FilterFieldType } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/**
+ * Single-date filter — operator select ("After" / "Before") plus a date
+ * picker. Emits a filter whose `value` is the operator (`'gt'` or `'lt'`) and
+ * whose date is placed in `min` (for `gt`) or `max` (for `lt`), matching the
+ * React reference and the `date` / `datetime` branch of `buildSingleFilter`.
+ *
+ * The `filterType` input toggles the emitted `type` between `'date'` and
+ * `'datetime'` (the latter adds start/end-of-day promotion in the filter
+ * builder).
+ */
+type DateOperator = "gt" | "lt";
+
+const OPERATOR_OPTIONS: readonly AppSelectOption[] = [
+	{ value: "gt", label: "After" },
+	{ value: "lt", label: "Before" },
+];
+
+@Component({
+	selector: "app-date-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [DatePickerComponent, SelectComponent, FilterFieldWrapperComponent],
+	templateUrl: "./date-filter.html",
+})
+export class DateFilterComponent {
+	private readonly state = inject(ObjectSearchStateService);
+
+	/** Field config: `field`, `label`, `helpText`, ... */
+	readonly config = input.required<FilterFieldConfig>();
+	/** Underlying filter type — `'date'` (default) or `'datetime'`. */
+	readonly filterType = input<FilterFieldType>("date");
+
+	protected readonly operatorOptions = OPERATOR_OPTIONS;
+
+	/** Active filter (if any) — the single source of truth for both fields. */
+	private readonly active = computed(() => this.state.filterFor(this.config().field));
+
+	/** Cap the picker at today when the field can't hold a future date. */
+	protected readonly maxDate = computed<Date | null>(() =>
+		this.config().disableFuture ? new Date() : null,
+	);
+
+	/**
+	 * Selected operator. Defaults to `'gt'` when no filter is active, mirroring
+	 * the React initial state (`min` present -> `gt`, else `lt`, but with no
+	 * active filter React ended up on `lt`; we prefer `'gt'` as the safer
+	 * "After a date" default when nothing is selected).
+	 */
+	protected readonly operator = computed<DateOperator>(() => {
+		const a = this.active();
+		if (a?.value === "gt" || a?.value === "lt") return a.value;
+		if (a?.min) return "gt";
+		if (a?.max) return "lt";
+		return "gt";
+	});
+
+	/** Date picker value — parsed from either `min` (gt) or `max` (lt). */
+	protected readonly currentDate = computed<Date | null>(() => {
+		const a = this.active();
+		return toDate(a?.min ?? a?.max);
+	});
+
+	protected onOperatorChange(v: string): void {
+		const op = v === "lt" ? "lt" : "gt";
+		const date = this.currentDate();
+		// Only re-emit if we already had a date; otherwise wait until the user
+		// picks one (matches React `emitChange` gate on `currentDate`).
+		if (date) this.emit(op, date);
+	}
+
+	protected onDateChange(date: Date | null): void {
+		const cfg = this.config();
+		if (!date) {
+			this.state.removeFilter(cfg.field);
+		} else {
+			this.emit(this.operator(), date);
+		}
+	}
+
+	private emit(op: DateOperator, date: Date): void {
+		const cfg = this.config();
+		const dateStr = toDateString(date);
+		const isMin = op === "gt";
+		this.state.setFilter(cfg.field, {
+			field: cfg.field,
+			label: cfg.label,
+			type: this.filterType(),
+			value: op,
+			min: isMin ? dateStr : undefined,
+			max: isMin ? undefined : dateStr,
+		});
+	}
+}
+
+/** Parses `YYYY-MM-DD` (or any ISO date) into a `Date`, or `null` on failure. */
+export function toDate(value: string | undefined): Date | null {
+	if (!value) return null;
+	// Interpret bare YYYY-MM-DD as a local-time date so the picker doesn't
+	// display "yesterday" in negative UTC offsets.
+	const parts = value.split("T")[0].split("-");
+	if (parts.length === 3) {
+		const [y, m, d] = parts.map((p) => Number(p));
+		const dt = new Date(y, m - 1, d);
+		return isNaN(dt.getTime()) ? null : dt;
+	}
+	const dt = new Date(value);
+	return isNaN(dt.getTime()) ? null : dt;
+}
+
+/** Formats a `Date` as `YYYY-MM-DD` in local time. */
+export function toDateString(date: Date | null | undefined): string {
+	if (!date || isNaN(date.getTime())) return "";
+	const y = date.getFullYear();
+	// Guard against partially-typed years (e.g. `202` instead of `2026`), which
+	// would serialize to an invalid `202-07-09` and be rejected by the API.
+	if (y < 1000 || y > 9999) return "";
+	const m = String(date.getMonth() + 1).padStart(2, "0");
+	const d = String(date.getDate()).padStart(2, "0");
+	return `${y}-${m}-${d}`;
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/date-range-filter.html

@@ -0,0 +1,11 @@
+<app-filter-field-wrapper [label]="config().label" [helpText]="config().helpText">
+	<app-date-range-picker
+		class="w-full"
+		startPlaceholder="Start"
+		endPlaceholder="End"
+		[readonly]="true"
+		[max]="maxDate()"
+		[value]="range()"
+		(valueChange)="onRangeChange($event)"
+	/>
+</app-filter-field-wrapper>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/date-range-filter.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+// Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
+// it lands at uiBundles/<target>/src/app/components/ui/date-range-picker/..., three levels up.
+import {
+	DateRange,
+	DateRangePickerComponent,
+} from "../../../components/ui/date-range-picker/date-range-picker";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig, FilterFieldType } from "../utils/filter-utils";
+import { toDate, toDateString } from "./date-filter";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/**
+ * Date range filter — a single two-ended range picker. Emits a `daterange`
+ * (or `datetimerange`) filter with `min` / `max` as `YYYY-MM-DD` strings; the
+ * filter builder wires each end into a `gte` / `lte` clause.
+ *
+ * Thin bridge over the base `app-date-range-picker` (Material's
+ * `mat-date-range-picker`): it maps the picker's `DateRange<Date>` value to and
+ * from the `min` / `max` string split the filter state stores.
+ */
+@Component({
+	selector: "app-date-range-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [DateRangePickerComponent, FilterFieldWrapperComponent],
+	templateUrl: "./date-range-filter.html",
+})
+export class DateRangeFilterComponent {
+	private readonly state = inject(ObjectSearchStateService);
+
+	/** Field config: `field`, `label`, `helpText`, ... */
+	readonly config = input.required<FilterFieldConfig>();
+	/** Underlying filter type — `'daterange'` (default) or `'datetimerange'`. */
+	readonly filterType = input<FilterFieldType>("daterange");
+
+	private readonly active = computed(() => this.state.filterFor(this.config().field));
+
+	/** The active filter's `min` / `max` strings surfaced as a picker range. */
+	protected readonly range = computed<DateRange<Date>>(
+		() => new DateRange(toDate(this.active()?.min), toDate(this.active()?.max)),
+	);
+
+	/** Cap the picker at today when the field can't hold a future date. */
+	protected readonly maxDate = computed<Date | null>(() =>
+		this.config().disableFuture ? new Date() : null,
+	);
+
+	protected onRangeChange(range: DateRange<Date> | null): void {
+		const cfg = this.config();
+		const from = range?.start ?? null;
+		const to = range?.end ?? null;
+		if (!from && !to) {
+			this.state.removeFilter(cfg.field);
+			return;
+		}
+		this.state.setFilter(cfg.field, {
+			field: cfg.field,
+			label: cfg.label,
+			type: this.filterType(),
+			min: toDateString(from),
+			max: toDateString(to),
+		});
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/filter-field-wrapper.html

@@ -0,0 +1,11 @@
+<div class="space-y-1">
+	<app-label [for]="htmlFor()">{{ label() }}</app-label>
+	<ng-content />
+	<div class="min-h-4">
+		@if (error(); as err) {
+		<p class="text-xs text-red-600" role="alert">{{ err }}</p>
+		} @else if (helpText(); as help) {
+		<p class="text-xs text-gray-500">{{ help }}</p>
+		}
+	</div>
+</div>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/filter-field-wrapper.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+// Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
+// it lands at uiBundles/<target>/src/app/components/ui/label/..., three levels up from this
+// filter folder (app/object-search/filters/ -> app/components/ui/).
+import { LabelComponent } from "../../../components/ui/label/label";
+
+/**
+ * Standard label + control + help/error scaffold shared by every filter
+ * component (the Angular analogue of the React `FilterFieldWrapper`).
+ *
+ * The control itself is content-projected so each filter can supply the
+ * primitive that fits its data type (input, select, popover, date picker, ...)
+ * while the wrapper keeps the layout, label, and error/help affordances
+ * consistent across the search page.
+ */
+@Component({
+	selector: "app-filter-field-wrapper",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [LabelComponent],
+	templateUrl: "./filter-field-wrapper.html",
+})
+export class FilterFieldWrapperComponent {
+	/** Visible field label rendered above the control. */
+	readonly label = input.required<string>();
+	/** Optional `for` attribute forwarded to the underlying `<label>`. */
+	readonly htmlFor = input<string | null>(null);
+	/** Advisory copy rendered below the control when there is no error. */
+	readonly helpText = input<string | undefined>(undefined);
+	/** Validation message; when set, replaces the help text. */
+	readonly error = input<string | undefined>(undefined);
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/multi-select-filter.html

@@ -0,0 +1,10 @@
+<app-filter-field-wrapper [label]="config().label" [helpText]="config().helpText">
+	<app-select
+		multiple
+		[size]="size()"
+		[options]="config().options ?? []"
+		[placeholder]="placeholder()"
+		[values]="selected()"
+		(valuesChange)="onSelectionChange($event)"
+	/>
+</app-filter-field-wrapper>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/multi-select-filter.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+import type { AppFieldSize } from "../../../components/ui/field-size";
+import { SelectComponent } from "../../../components/ui/select/select";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/**
+ * Multi-select picklist filter. All presentation (checkbox options, trigger
+ * summary, height) lives in `app-select multiple`; this component only bridges
+ * the UI's `string[]` selection to the object-search state, serializing it into
+ * the comma-joined string the `type: 'multipicklist'` contract expects
+ * (`buildSingleFilter` maps that to `{ eq }` for one value, `{ in: [...] }` for
+ * many).
+ */
+@Component({
+	selector: "app-multi-select-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [SelectComponent, FilterFieldWrapperComponent],
+	templateUrl: "./multi-select-filter.html",
+})
+export class MultiSelectFilterComponent {
+	private readonly state = inject(ObjectSearchStateService);
+
+	/** Field config: `field`, `label`, `options`, `helpText`, ... */
+	readonly config = input.required<FilterFieldConfig>();
+
+	/** Field height: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+	readonly size = input<AppFieldSize>("default");
+
+	/** Currently selected option values (parsed back from the comma-joined string). */
+	protected readonly selected = computed<string[]>(() => {
+		const raw = this.state.filterFor(this.config().field)?.value;
+		return raw ? raw.split(",") : [];
+	});
+
+	/** Placeholder shown on the trigger when nothing is selected. */
+	protected readonly placeholder = computed(() => `Select ${this.config().label.toLowerCase()}`);
+
+	protected onSelectionChange(next: readonly string[]): void {
+		const cfg = this.config();
+		if (next.length === 0) {
+			this.state.removeFilter(cfg.field);
+		} else {
+			this.state.setFilter(cfg.field, {
+				field: cfg.field,
+				label: cfg.label,
+				type: "multipicklist",
+				value: next.join(","),
+			});
+		}
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/numeric-range-filter.html

@@ -0,0 +1,22 @@
+<app-filter-field-wrapper
+	[label]="config().label"
+	[helpText]="config().helpText"
+	[error]="errorMessage()"
+>
+	<div class="flex gap-2">
+		<app-input
+			class="flex-1"
+			type="number"
+			placeholder="Min"
+			[value]="localMin()"
+			(valueChange)="onMinChange($event)"
+		/>
+		<app-input
+			class="flex-1"
+			type="number"
+			placeholder="Max"
+			[value]="localMax()"
+			(valueChange)="onMaxChange($event)"
+		/>
+	</div>
+</app-filter-field-wrapper>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/numeric-range-filter.ts

@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	DestroyRef,
+	computed,
+	effect,
+	inject,
+	input,
+	signal,
+} from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { Subject } from "rxjs";
+import { debounceTime } from "rxjs/operators";
+import { MatInputModule } from "@angular/material/input";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { FormsModule } from "@angular/forms";
+// Base-app UI wrapper, inherited (not recreated) by this feature. Post-compose
+// it lands at uiBundles/<target>/src/app/components/ui/input/..., three levels up.
+import { InputComponent } from "../../../components/ui/input/input";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
+import type { FilterFieldConfig } from "../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/**
+ * Numeric range filter — paired `min` / `max` inputs whose committed values are
+ * written as strings on a `type: 'numeric'` filter (numeric coercion happens
+ * in `buildSingleFilter`).
+ *
+ * Local signals drive the inputs immediately; a trailing debounce commits the
+ * pair, but only when the range is self-consistent (`min <= max`) and within
+ * `boundMin` / `boundMax` if provided — an inverted or out-of-bounds pair
+ * shows the same inline error the React reference renders and skips the write.
+ */
+@Component({
+	selector: "app-numeric-range-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		InputComponent,
+		FilterFieldWrapperComponent,
+		FormsModule,
+		MatFormFieldModule,
+		MatInputModule,
+	],
+	templateUrl: "./numeric-range-filter.html",
+})
+export class NumericRangeFilterComponent {
+	private readonly state = inject(ObjectSearchStateService);
+	private readonly destroyRef = inject(DestroyRef);
+
+	/** Field config: `field`, `label`, `helpText`, ... */
+	readonly config = input.required<FilterFieldConfig>();
+	/** Optional lower bound accepted by the field (used for validation only). */
+	readonly boundMin = input<number | undefined>(undefined);
+	/** Optional upper bound accepted by the field (used for validation only). */
+	readonly boundMax = input<number | undefined>(undefined);
+
+	protected readonly localMin = signal<string>("");
+	protected readonly localMax = signal<string>("");
+
+	private readonly commit$ = new Subject<{ min: string; max: string }>();
+
+	constructor() {
+		this.commit$
+			.pipe(debounceTime(FILTER_DEBOUNCE_MS), takeUntilDestroyed(this.destroyRef))
+			.subscribe(({ min, max }) => this.commit(min, max));
+
+		// Sync local inputs from shared state (URL restore / reset-all).
+		effect(() => {
+			const cfg = this.config();
+			const active = this.state.filterFor(cfg.field);
+			this.localMin.set(active?.min ?? "");
+			this.localMax.set(active?.max ?? "");
+		});
+	}
+
+	protected readonly minOutOfBounds = computed(() => this.isOutOfBounds(this.localMin()));
+	protected readonly maxOutOfBounds = computed(() => this.isOutOfBounds(this.localMax()));
+	protected readonly isRangeInverted = computed(() => {
+		const lo = this.localMin();
+		const hi = this.localMax();
+		return lo !== "" && hi !== "" && Number(lo) > Number(hi);
+	});
+	protected readonly hasError = computed(
+		() => this.minOutOfBounds() || this.maxOutOfBounds() || this.isRangeInverted(),
+	);
+
+	protected readonly errorMessage = computed<string | undefined>(() => {
+		if (this.isRangeInverted()) return "Min must not exceed max";
+		if (!this.minOutOfBounds() && !this.maxOutOfBounds()) return undefined;
+		const lo = this.boundMin();
+		const hi = this.boundMax();
+		if (lo != null && hi != null) return `Value must be between ${lo}–${hi}`;
+		if (lo != null) return `Value must be ${lo} or more`;
+		if (hi != null) return `Value must be ${hi} or less`;
+		return undefined;
+	});
+
+	protected onMinChange(v: string): void {
+		this.localMin.set(v);
+		this.commit$.next({ min: v, max: this.localMax() });
+	}
+
+	protected onMaxChange(v: string): void {
+		this.localMax.set(v);
+		this.commit$.next({ min: this.localMin(), max: v });
+	}
+
+	private isOutOfBounds(v: string): boolean {
+		if (v === "") return false;
+		const n = Number(v);
+		const lo = this.boundMin();
+		const hi = this.boundMax();
+		return (lo != null && n < lo) || (hi != null && n > hi);
+	}
+
+	private commit(min: string, max: string): void {
+		const cfg = this.config();
+		if (!min && !max) {
+			this.state.removeFilter(cfg.field);
+			return;
+		}
+		const minNum = min !== "" ? Number(min) : null;
+		const maxNum = max !== "" ? Number(max) : null;
+		// Skip writes that would produce an inverted or out-of-bounds clause;
+		// the UI keeps the input contents so the user can correct in place.
+		if (minNum != null && maxNum != null && minNum > maxNum) return;
+		const lo = this.boundMin();
+		const hi = this.boundMax();
+		if (minNum != null && ((lo != null && minNum < lo) || (hi != null && minNum > hi))) return;
+		if (maxNum != null && ((lo != null && maxNum < lo) || (hi != null && maxNum > hi))) return;
+
+		this.state.setFilter(cfg.field, {
+			field: cfg.field,
+			label: cfg.label,
+			type: "numeric",
+			min,
+			max,
+		});
+	}
+}