@salesforce/ui-bundle-template-feature-angular-search 0.0.0-stage → 12.14.0

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/filter-field-wrapper.spec.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { TestBed } from "@angular/core/testing";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+describe("FilterFieldWrapperComponent", () => {
+	function create(inputs: Record<string, unknown>) {
+		const fixture = TestBed.createComponent(FilterFieldWrapperComponent);
+		for (const [k, v] of Object.entries(inputs)) fixture.componentRef.setInput(k, v);
+		fixture.detectChanges();
+		return fixture.nativeElement as HTMLElement;
+	}
+
+	it("renders help text", () => {
+		expect(create({ label: "Name", helpText: "Help" }).textContent).toContain("Help");
+	});
+
+	it("renders error as an alert with the given id and hides help text", () => {
+		const el = create({ label: "Name", helpText: "Help", error: "Bad", errorId: "e1" });
+		const alert = el.querySelector("[role=alert]");
+		expect(alert?.textContent).toContain("Bad");
+		expect(alert?.id).toBe("e1");
+		expect(el.textContent).not.toContain("Help");
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/filter-field-wrapper.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { LabelComponent } from "../../../components/ui/label/label";
+
+/** Label + control + help/error text chrome shared by every filter input. */
+@Component({
+	selector: "app-filter-field-wrapper",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [LabelComponent],
+	templateUrl: "./filter-field-wrapper.html",
+})
+export class FilterFieldWrapperComponent {
+	readonly label = input<string>("");
+	/** Id of the control the label points at. */
+	readonly htmlFor = input<string | null>(null);
+	readonly helpText = input<string | undefined>(undefined);
+	readonly error = input<string | undefined>(undefined);
+	/** Id for the error paragraph, so controls can reference it via aria-describedby. */
+	readonly errorId = input<string | null>(null);
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/filter-types.spec.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { toDate, toDateString, uniqueFilterId } from "./filter-types";
+
+describe("filter-types", () => {
+	it("round-trips local dates without timezone drift", () => {
+		const d = toDate("2026-03-05");
+		expect(d?.getFullYear()).toBe(2026);
+		expect(d?.getMonth()).toBe(2);
+		expect(d?.getDate()).toBe(5);
+		expect(toDateString(d)).toBe("2026-03-05");
+	});
+
+	it("returns null / empty for invalid input", () => {
+		expect(toDate(undefined)).toBeNull();
+		expect(toDate("nope")).toBeNull();
+		expect(toDateString(null)).toBe("");
+		expect(toDateString(new Date(202, 0, 1))).toBe("");
+	});
+
+	it("generates unique ids", () => {
+		expect(uniqueFilterId("x")).not.toBe(uniqueFilterId("x"));
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/filter-types.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Value contract shared by the state-agnostic filter inputs in this folder.
+ * Each input receives the current `FilterValue` (or `undefined` when inactive)
+ * and emits the next one, `undefined` meaning "clear this filter". The
+ * integrator (SearchStateService / DefaultFilterPanel) maps this to/from the
+ * canonical search filter type.
+ */
+export interface FilterValue {
+	/** Scalar value: text, picklist, comma-joined multipicklist, "true"/"false". */
+	value?: string;
+	/** Lower bound (numeric / date range), as a string. */
+	min?: string;
+	/** Upper bound (numeric / date range), as a string. */
+	max?: string;
+}
+
+export interface FilterOption {
+	value: string;
+	label: string;
+}
+
+/**
+ * Which comparison chrome date filters show: `range` = Between only,
+ * `comparison` = After/Before, `both` = all three.
+ */
+export type DateFilterMode = "range" | "comparison" | "both";
+
+/** Trailing debounce for free-typing inputs (text, numeric). */
+export const FILTER_DEBOUNCE_MS = 300;
+
+let nextId = 0;
+/** Unique DOM id for label/control association. */
+export function uniqueFilterId(prefix: string): string {
+	return `${prefix}-${nextId++}`;
+}
+
+/** Parses `YYYY-MM-DD` (or any ISO date) as a local-time `Date`, or `null`. */
+export function toDate(value: string | undefined): Date | null {
+	if (!value) return null;
+	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 local `YYYY-MM-DD`; `""` for invalid/partially typed years. */
+export function toDateString(date: Date | null | undefined): string {
+	if (!date || isNaN(date.getTime())) return "";
+	const y = date.getFullYear();
+	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/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/multi-select-filter.html

@@ -0,0 +1,11 @@
+<app-filter-field-wrapper [label]="label()" [htmlFor]="selectId" [helpText]="helpText()">
+	<app-select
+		multiple
+		[label]="label()"
+		[size]="size()"
+		[options]="options()"
+		[placeholder]="placeholder()"
+		[values]="selected()"
+		(valuesChange)="onChange($event)"
+	/>
+</app-filter-field-wrapper>

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/multi-select-filter.spec.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { SelectComponent } from "../../../components/ui/select/select";
+import { MultiSelectFilterComponent } from "./multi-select-filter";
+import type { FilterValue } from "./filter-types";
+
+describe("MultiSelectFilterComponent", () => {
+	function setup() {
+		const fixture = TestBed.createComponent(MultiSelectFilterComponent);
+		fixture.componentRef.setInput("label", "Industry");
+		fixture.componentRef.setInput("options", [
+			{ value: "a", label: "A" },
+			{ value: "b", label: "B" },
+		]);
+		const emitted: (FilterValue | undefined)[] = [];
+		fixture.componentInstance.valueChange.subscribe((v) => emitted.push(v));
+		fixture.detectChanges();
+		const select = fixture.debugElement.query(By.directive(SelectComponent))
+			.componentInstance as SelectComponent;
+		return { fixture, select, emitted };
+	}
+
+	it("parses the comma-joined value into the selection", () => {
+		const { fixture, select } = setup();
+		fixture.componentRef.setInput("value", { value: "a,b" });
+		fixture.detectChanges();
+		expect(select.values()).toEqual(["a", "b"]);
+	});
+
+	it("joins selections and clears when empty", () => {
+		const { fixture, select, emitted } = setup();
+		select.values.set(["a", "b"]);
+		select.values.set([]);
+		fixture.detectChanges();
+		expect(emitted).toEqual([{ value: "a,b" }, undefined]);
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/multi-select-filter.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import type { AppFieldSize } from "../../../components/ui/field-size";
+import { SelectComponent } from "../../../components/ui/select/select";
+import { uniqueFilterId, type FilterOption, type FilterValue } from "./filter-types";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/**
+ * Multi-select picklist filter. Presentation lives in `app-select multiple`;
+ * this bridges its `string[]` to the comma-joined `value` contract.
+ */
+@Component({
+	selector: "app-multi-select-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [SelectComponent, FilterFieldWrapperComponent],
+	templateUrl: "./multi-select-filter.html",
+})
+export class MultiSelectFilterComponent {
+	readonly label = input.required<string>();
+	readonly options = input<readonly FilterOption[]>([]);
+	readonly value = input<FilterValue | undefined>(undefined);
+	readonly helpText = input<string | undefined>(undefined);
+	readonly size = input<AppFieldSize>("default");
+	readonly valueChange = output<FilterValue | undefined>();
+
+	protected readonly selectId = uniqueFilterId("filter-multiselect");
+
+	protected readonly selected = computed<string[]>(() => {
+		const raw = this.value()?.value;
+		return raw ? raw.split(",").filter(Boolean) : [];
+	});
+
+	protected readonly placeholder = computed(() => `Select ${this.label().toLowerCase()}`);
+
+	protected onChange(next: readonly string[]): void {
+		this.valueChange.emit(next.length ? { value: next.join(",") } : undefined);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/numeric-range-filter.html

@@ -0,0 +1,32 @@
+<app-filter-field-wrapper
+	[label]="label()"
+	[helpText]="helpText()"
+	[error]="errorMessage()"
+	[errorId]="errorId"
+>
+	<div class="flex items-center gap-2" role="group" [attr.aria-label]="label()">
+		<app-input
+			class="flex-1"
+			type="number"
+			placeholder="Min"
+			[id]="baseId + '-min'"
+			[ariaLabel]="label() + ' minimum'"
+			[ariaDescribedby]="hasError() ? errorId : ''"
+			[error]="minOutOfBounds() || inverted()"
+			[value]="draftMin()"
+			(valueChange)="onMin($event)"
+		/>
+		<span class="text-sm text-muted-foreground" aria-hidden="true">–</span>
+		<app-input
+			class="flex-1"
+			type="number"
+			placeholder="Max"
+			[id]="baseId + '-max'"
+			[ariaLabel]="label() + ' maximum'"
+			[ariaDescribedby]="hasError() ? errorId : ''"
+			[error]="maxOutOfBounds() || inverted()"
+			[value]="draftMax()"
+			(valueChange)="onMax($event)"
+		/>
+	</div>
+</app-filter-field-wrapper>

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/numeric-range-filter.spec.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { afterEach, beforeEach, vi } from "vitest";
+import { InputComponent } from "../../../components/ui/input/input";
+import { NumericRangeFilterComponent } from "./numeric-range-filter";
+import { FILTER_DEBOUNCE_MS, type FilterValue } from "./filter-types";
+
+describe("NumericRangeFilterComponent", () => {
+	beforeEach(() => vi.useFakeTimers());
+	afterEach(() => vi.useRealTimers());
+
+	function setup(inputs: Record<string, unknown> = {}) {
+		const fixture = TestBed.createComponent(NumericRangeFilterComponent);
+		fixture.componentRef.setInput("label", "Revenue");
+		for (const [k, v] of Object.entries(inputs)) fixture.componentRef.setInput(k, v);
+		const emitted: (FilterValue | undefined)[] = [];
+		fixture.componentInstance.valueChange.subscribe((v) => emitted.push(v));
+		fixture.detectChanges();
+		const [min, max] = fixture.debugElement
+			.queryAll(By.directive(InputComponent))
+			.map((d) => d.componentInstance as InputComponent);
+		return { fixture, min, max, emitted };
+	}
+
+	const flush = (f: { detectChanges(): void }) => {
+		f.detectChanges();
+		vi.advanceTimersByTime(FILTER_DEBOUNCE_MS);
+	};
+
+	it("emits a valid range after the debounce", () => {
+		const { fixture, min, max, emitted } = setup();
+		min.value.set("1");
+		max.value.set("5");
+		flush(fixture);
+		expect(emitted).toEqual([{ min: "1", max: "5" }]);
+	});
+
+	it("emits a single bound with the other undefined", () => {
+		const { fixture, min, emitted } = setup();
+		min.value.set("3");
+		flush(fixture);
+		expect(emitted).toEqual([{ min: "3", max: undefined }]);
+	});
+
+	it("does not emit an inverted range and shows an alert", () => {
+		const { fixture, min, max, emitted } = setup();
+		min.value.set("9");
+		max.value.set("2");
+		flush(fixture);
+		fixture.detectChanges();
+		expect(emitted).toEqual([]);
+		expect(fixture.nativeElement.querySelector("[role=alert]").textContent).toContain(
+			"Min must not exceed max",
+		);
+	});
+
+	it("does not emit out-of-bounds values", () => {
+		const { fixture, max, emitted } = setup({ min: 0, max: 10 });
+		max.value.set("11");
+		flush(fixture);
+		expect(emitted).toEqual([]);
+	});
+
+	it("emits undefined when both are cleared", () => {
+		const { fixture, min, emitted } = setup({ value: { min: "1" } });
+		min.value.set("");
+		flush(fixture);
+		expect(emitted).toEqual([undefined]);
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/numeric-range-filter.ts

@@ -0,0 +1,117 @@
+/**
+ * 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,
+	output,
+	signal,
+	untracked,
+} from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { Subject } from "rxjs";
+import { debounceTime } from "rxjs/operators";
+import { InputComponent } from "../../../components/ui/input/input";
+import { FILTER_DEBOUNCE_MS, uniqueFilterId, type FilterValue } from "./filter-types";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/**
+ * Paired min/max number inputs. Emits `{ min, max }` (strings) on a trailing
+ * debounce; inverted or out-of-bounds ranges show an error and are not emitted.
+ */
+@Component({
+	selector: "app-numeric-range-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [InputComponent, FilterFieldWrapperComponent],
+	templateUrl: "./numeric-range-filter.html",
+})
+export class NumericRangeFilterComponent {
+	private readonly destroyRef = inject(DestroyRef);
+
+	readonly label = input.required<string>();
+	readonly value = input<FilterValue | undefined>(undefined);
+	/** Lowest / highest value the field accepts. */
+	readonly min = input<number | undefined>(undefined);
+	readonly max = input<number | undefined>(undefined);
+	readonly helpText = input<string | undefined>(undefined);
+	readonly valueChange = output<FilterValue | undefined>();
+
+	protected readonly baseId = uniqueFilterId("filter-numeric");
+	protected readonly errorId = `${this.baseId}-error`;
+	protected readonly draftMin = signal("");
+	protected readonly draftMax = signal("");
+	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));
+
+		effect(() => {
+			const v = this.value();
+			const lo = v?.min ?? "";
+			const hi = v?.max ?? "";
+			untracked(() => {
+				if (lo !== this.draftMin()) this.draftMin.set(lo);
+				if (hi !== this.draftMax()) this.draftMax.set(hi);
+			});
+		});
+	}
+
+	private isOutOfBounds(v: string): boolean {
+		if (v === "") return false;
+		const n = Number(v);
+		const lo = this.min();
+		const hi = this.max();
+		return (lo != null && n < lo) || (hi != null && n > hi);
+	}
+
+	protected readonly minOutOfBounds = computed(() => this.isOutOfBounds(this.draftMin()));
+	protected readonly maxOutOfBounds = computed(() => this.isOutOfBounds(this.draftMax()));
+	protected readonly inverted = computed(() => {
+		const lo = this.draftMin();
+		const hi = this.draftMax();
+		return lo !== "" && hi !== "" && Number(lo) > Number(hi);
+	});
+	protected readonly hasError = computed(
+		() => this.minOutOfBounds() || this.maxOutOfBounds() || this.inverted(),
+	);
+
+	protected readonly errorMessage = computed<string | undefined>(() => {
+		if (this.inverted()) return "Min must not exceed max";
+		if (!this.minOutOfBounds() && !this.maxOutOfBounds()) return undefined;
+		const lo = this.min();
+		const hi = this.max();
+		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 onMin(v: string): void {
+		this.draftMin.set(v);
+		this.commit$.next({ min: v, max: this.draftMax() });
+	}
+
+	protected onMax(v: string): void {
+		this.draftMax.set(v);
+		this.commit$.next({ min: this.draftMin(), max: v });
+	}
+
+	private commit(min: string, max: string): void {
+		if (!min && !max) {
+			this.valueChange.emit(undefined);
+			return;
+		}
+		if (this.isOutOfBounds(min) || this.isOutOfBounds(max)) return;
+		if (min !== "" && max !== "" && Number(min) > Number(max)) return;
+		this.valueChange.emit({ min: min || undefined, max: max || undefined });
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/select-filter.html

@@ -0,0 +1,8 @@
+<app-filter-field-wrapper [label]="label()" [htmlFor]="selectId" [helpText]="helpText()">
+	<app-select
+		[label]="label()"
+		[options]="allOptions()"
+		[value]="current()"
+		(valueChange)="onChange($event)"
+	/>
+</app-filter-field-wrapper>

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/select-filter.spec.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { SelectComponent } from "../../../components/ui/select/select";
+import { SelectFilterComponent } from "./select-filter";
+import type { FilterValue } from "./filter-types";
+
+describe("SelectFilterComponent", () => {
+	function setup() {
+		const fixture = TestBed.createComponent(SelectFilterComponent);
+		fixture.componentRef.setInput("label", "Type");
+		fixture.componentRef.setInput("options", [{ value: "a", label: "A" }]);
+		const emitted: (FilterValue | undefined)[] = [];
+		fixture.componentInstance.valueChange.subscribe((v) => emitted.push(v));
+		fixture.detectChanges();
+		const select = fixture.debugElement.query(By.directive(SelectComponent))
+			.componentInstance as SelectComponent;
+		return { fixture, select, emitted };
+	}
+
+	it("prepends an All option", () => {
+		expect(setup().select.options()[0]).toEqual({ value: "", label: "All" });
+	});
+
+	it("emits the chosen value, and undefined for All", () => {
+		const { fixture, select, emitted } = setup();
+		select.value.set("a");
+		select.value.set("");
+		fixture.detectChanges();
+		expect(emitted).toEqual([{ value: "a" }, undefined]);
+	});
+
+	it("reflects the bound value", () => {
+		const { fixture, select } = setup();
+		fixture.componentRef.setInput("value", { value: "a" });
+		fixture.detectChanges();
+		expect(select.value()).toBe("a");
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/select-filter.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, output } from "@angular/core";
+import {
+	SelectComponent,
+	type AppSelectOption,
+} from "../../../components/ui/select/select";
+import { uniqueFilterId, type FilterOption, type FilterValue } from "./filter-types";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/** Single-select picklist filter with a leading "All" entry that clears it. */
+@Component({
+	selector: "app-select-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [SelectComponent, FilterFieldWrapperComponent],
+	templateUrl: "./select-filter.html",
+})
+export class SelectFilterComponent {
+	readonly label = input.required<string>();
+	readonly options = input<readonly FilterOption[]>([]);
+	readonly value = input<FilterValue | undefined>(undefined);
+	readonly helpText = input<string | undefined>(undefined);
+	readonly valueChange = output<FilterValue | undefined>();
+
+	protected readonly selectId = uniqueFilterId("filter-select");
+
+	protected readonly allOptions = computed<readonly AppSelectOption[]>(() => [
+		{ value: "", label: "All" },
+		...this.options(),
+	]);
+
+	protected readonly current = computed(() => this.value()?.value ?? "");
+
+	protected onChange(v: string): void {
+		this.valueChange.emit(v ? { value: v } : undefined);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/text-filter.html

@@ -0,0 +1,9 @@
+<app-filter-field-wrapper [label]="label()" [htmlFor]="inputId" [helpText]="helpText()">
+	<app-input
+		type="text"
+		[id]="inputId"
+		[placeholder]="placeholderText()"
+		[value]="draft()"
+		(valueChange)="onInput($event)"
+	/>
+</app-filter-field-wrapper>

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/text-filter.spec.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { afterEach, beforeEach, vi } from "vitest";
+import { InputComponent } from "../../../components/ui/input/input";
+import { TextFilterComponent } from "./text-filter";
+import { FILTER_DEBOUNCE_MS, type FilterValue } from "./filter-types";
+
+describe("TextFilterComponent", () => {
+	beforeEach(() => vi.useFakeTimers());
+	afterEach(() => vi.useRealTimers());
+
+	function setup() {
+		const fixture = TestBed.createComponent(TextFilterComponent);
+		fixture.componentRef.setInput("label", "Name");
+		const emitted: (FilterValue | undefined)[] = [];
+		fixture.componentInstance.valueChange.subscribe((v) => emitted.push(v));
+		fixture.detectChanges();
+		const input = fixture.debugElement.query(By.directive(InputComponent))
+			.componentInstance as InputComponent;
+		return { fixture, input, emitted };
+	}
+
+	it("debounces typing and emits the value", () => {
+		const { fixture, input, emitted } = setup();
+		input.value.set("a");
+		input.value.set("ac");
+		fixture.detectChanges();
+		vi.advanceTimersByTime(FILTER_DEBOUNCE_MS - 1);
+		expect(emitted).toEqual([]);
+		vi.advanceTimersByTime(1);
+		expect(emitted).toEqual([{ value: "ac" }]);
+	});
+
+	it("emits undefined when cleared", () => {
+		const { fixture, input, emitted } = setup();
+		input.value.set("x");
+		input.value.set("");
+		fixture.detectChanges();
+		vi.advanceTimersByTime(FILTER_DEBOUNCE_MS);
+		expect(emitted).toEqual([undefined]);
+	});
+
+	it("syncs the draft from the bound value", () => {
+		const { fixture, input } = setup();
+		fixture.componentRef.setInput("value", { value: "ext" });
+		fixture.detectChanges();
+		expect(input.value()).toBe("ext");
+	});
+});