@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/constants.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Minimum trimmed keyword length before a search fires. The search backend
+ * rejects shorter terms, so the query is gated client-side.
+ */
+export const MIN_QUERY_LENGTH = 3;
+
+export const DEFAULT_PAGE_SIZE = 10;
+export const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50];
+
+/** Debounce for syncing search state to the URL. */
+export const URL_SYNC_DEBOUNCE_MS = 300;

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

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import type { SearchConfig } from "./types/search-config.types";
+
+/**
+ * Starter config for the shipped `/search` page: Accounts, Contacts and
+ * Opportunities in per-source mode. Edit it (or pass your own `SearchConfig`
+ * to `<app-search>`) to search other objects.
+ */
+export const defaultSearchConfig: SearchConfig = {
+	pagination: { mode: "per-source", pageSize: 10, pageSizeOptions: [5, 10, 20] },
+	sources: [
+		{
+			kind: "sobject",
+			key: "accounts",
+			objectName: "Account",
+			label: "Accounts",
+			labelSingular: "Account",
+			searchableFields: ["Name", "Phone", "Industry"],
+			displayFields: [
+				"Name",
+				"Industry",
+				"Type",
+				"Phone",
+				"AnnualRevenue",
+				{ name: "Owner", subfields: ["Name"] },
+			],
+			filterBy: [
+				{ field: "Industry", label: "Industry", type: "picklist" },
+				{ field: "Type", label: "Type", type: "picklist" },
+				{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
+			],
+			sortBy: [
+				{ field: "Name", label: "Name" },
+				{ field: "Industry", label: "Industry" },
+				{ field: "AnnualRevenue", label: "Annual Revenue" },
+				{ field: "CreatedDate", label: "Created Date" },
+			],
+		},
+		{
+			kind: "sobject",
+			key: "contacts",
+			objectName: "Contact",
+			label: "Contacts",
+			labelSingular: "Contact",
+			searchableFields: ["Name", "Email", "Phone"],
+			displayFields: ["Name", "Title", "Email", "Phone", { name: "Account", subfields: ["Name"] }],
+			sortBy: [
+				{ field: "Name", label: "Name" },
+				{ field: "CreatedDate", label: "Created Date" },
+			],
+		},
+		{
+			kind: "sobject",
+			key: "opportunities",
+			objectName: "Opportunity",
+			label: "Opportunities",
+			labelSingular: "Opportunity",
+			searchableFields: ["Name"],
+			displayFields: [
+				"Name",
+				"StageName",
+				"Amount",
+				"CloseDate",
+				{ name: "Account", subfields: ["Name"] },
+			],
+			filterBy: [
+				{ field: "StageName", label: "Stage", type: "picklist" },
+				{ field: "Amount", label: "Amount", type: "numeric" },
+				{ field: "CloseDate", label: "Close Date", type: "daterange" },
+			],
+			sortBy: [
+				{ field: "CloseDate", label: "Close Date" },
+				{ field: "Amount", label: "Amount" },
+				{ field: "Name", label: "Name" },
+			],
+			defaultSort: { field: "CloseDate", direction: "DESC" },
+		},
+	],
+};

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/directives/search-result-template/search-result-template.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Directive, inject, input, TemplateRef } from "@angular/core";
+import type { SourceConfig } from "../../types/search-config.types";
+
+/** Context handed to a result template. */
+export interface SearchResultContext {
+	/** The raw result node (`let-node`). */
+	$implicit: unknown;
+	/** The config of the source the node came from (`let-source="source"`). */
+	source: SourceConfig;
+}
+
+/**
+ * Replaces the default row for one source. Place it inside `<app-search>`:
+ *
+ * ```html
+ * <app-search [config]="config">
+ *   <ng-template appSearchResult="Property__c" let-node>
+ *     <app-property-card [property]="node" />
+ *   </ng-template>
+ * </app-search>
+ * ```
+ *
+ * The attribute value is the source `key`. The star form works too:
+ * `*appSearchResult="'Property__c'; let node"`. This is the Angular
+ * counterpart of React's `renderResult[sourceKey]`.
+ */
+@Directive({ selector: "ng-template[appSearchResult]" })
+export class SearchResultTemplateDirective {
+	/** The `key` of the source this template renders. */
+	readonly sourceKey = input.required<string>({ alias: "appSearchResult" });
+	readonly template = inject<TemplateRef<SearchResultContext>>(TemplateRef);
+
+	static ngTemplateContextGuard(
+		_dir: SearchResultTemplateDirective,
+		_ctx: unknown,
+	): _ctx is SearchResultContext {
+		return true;
+	}
+}

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

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

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

@@ -0,0 +1,41 @@
+/**
+ * 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 { BooleanFilterComponent } from "./boolean-filter";
+import type { FilterValue } from "./filter-types";
+
+describe("BooleanFilterComponent", () => {
+	function setup() {
+		const fixture = TestBed.createComponent(BooleanFilterComponent);
+		fixture.componentRef.setInput("label", "Active");
+		fixture.componentRef.setInput("trueLabel", "On");
+		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("offers Any / true / false with custom labels", () => {
+		expect(setup().select.options()).toEqual([
+			{ value: "", label: "Any" },
+			{ value: "true", label: "On" },
+			{ value: "false", label: "No" },
+		]);
+	});
+
+	it("emits true/false and clears on Any", () => {
+		const { fixture, select, emitted } = setup();
+		select.value.set("true");
+		select.value.set("false");
+		select.value.set("");
+		fixture.detectChanges();
+		expect(emitted).toEqual([{ value: "true" }, { value: "false" }, undefined]);
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/boolean-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 {
+	SelectComponent,
+	type AppSelectOption,
+} from "../../../components/ui/select/select";
+import { uniqueFilterId, type FilterValue } from "./filter-types";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/** Tri-state boolean filter: Any (clears) / true / false. Emits `value: "true" | "false"`. */
+@Component({
+	selector: "app-boolean-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [SelectComponent, FilterFieldWrapperComponent],
+	templateUrl: "./boolean-filter.html",
+})
+export class BooleanFilterComponent {
+	readonly label = input.required<string>();
+	readonly value = input<FilterValue | undefined>(undefined);
+	readonly trueLabel = input("Yes");
+	readonly falseLabel = input("No");
+	readonly helpText = input<string | undefined>(undefined);
+	readonly valueChange = output<FilterValue | undefined>();
+
+	protected readonly selectId = uniqueFilterId("filter-boolean");
+
+	protected readonly options = computed<readonly AppSelectOption[]>(() => [
+		{ value: "", label: "Any" },
+		{ value: "true", label: this.trueLabel() },
+		{ value: "false", label: this.falseLabel() },
+	]);
+
+	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/date-filter.html

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

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

@@ -0,0 +1,56 @@
+/**
+ * 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 { DatePickerComponent } from "../../../components/ui/date-picker/date-picker";
+import { SelectComponent } from "../../../components/ui/select/select";
+import { DateFilterComponent } from "./date-filter";
+import type { FilterValue } from "./filter-types";
+
+describe("DateFilterComponent", () => {
+	function setup(value?: FilterValue) {
+		const fixture = TestBed.createComponent(DateFilterComponent);
+		fixture.componentRef.setInput("label", "Created");
+		if (value) fixture.componentRef.setInput("value", value);
+		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;
+		const picker = fixture.debugElement.query(By.directive(DatePickerComponent))
+			.componentInstance as DatePickerComponent;
+		return { fixture, select, picker, emitted };
+	}
+
+	it("defaults to After and emits min", () => {
+		const { fixture, select, picker, emitted } = setup();
+		expect(select.value()).toBe("gt");
+		picker.value.set(new Date(2026, 0, 2));
+		fixture.detectChanges();
+		expect(emitted).toEqual([{ value: "gt", min: "2026-01-02" }]);
+	});
+
+	it("moves the date to max when switching to Before", () => {
+		const { fixture, select, emitted } = setup({ value: "gt", min: "2026-01-02" });
+		select.value.set("lt");
+		fixture.detectChanges();
+		expect(emitted).toEqual([{ value: "lt", max: "2026-01-02" }]);
+	});
+
+	it("does not emit on operator change without a date", () => {
+		const { fixture, select, emitted } = setup();
+		select.value.set("lt");
+		fixture.detectChanges();
+		expect(emitted).toEqual([]);
+	});
+
+	it("emits undefined when the date is cleared", () => {
+		const { fixture, picker, emitted } = setup({ value: "gt", min: "2026-01-02" });
+		picker.value.set(null);
+		fixture.detectChanges();
+		expect(emitted).toEqual([undefined]);
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/filters/date-filter.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, input, output } from "@angular/core";
+import { DatePickerComponent } from "../../../components/ui/date-picker/date-picker";
+import {
+	SelectComponent,
+	type AppSelectOption,
+} from "../../../components/ui/select/select";
+import { toDate, toDateString, uniqueFilterId, type FilterValue } from "./filter-types";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+type DateOperator = "gt" | "lt";
+
+const OPERATOR_OPTIONS: readonly AppSelectOption[] = [
+	{ value: "gt", label: "After" },
+	{ value: "lt", label: "Before" },
+];
+
+/**
+ * Single-date filter: an After/Before operator plus a date picker. Emits
+ * `{ value: "gt", min }` or `{ value: "lt", max }` with `YYYY-MM-DD` dates.
+ * Used for both date and datetime fields; the caller decides the field type.
+ */
+@Component({
+	selector: "app-date-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [DatePickerComponent, SelectComponent, FilterFieldWrapperComponent],
+	templateUrl: "./date-filter.html",
+})
+export class DateFilterComponent {
+	readonly label = input.required<string>();
+	readonly value = input<FilterValue | undefined>(undefined);
+	readonly helpText = input<string | undefined>(undefined);
+	/** Cap the picker at today. */
+	readonly disableFuture = input(false);
+	readonly valueChange = output<FilterValue | undefined>();
+
+	protected readonly pickerId = uniqueFilterId("filter-date");
+	protected readonly operatorOptions = OPERATOR_OPTIONS;
+
+	protected readonly maxDate = computed<Date | null>(() =>
+		this.disableFuture() ? new Date() : null,
+	);
+
+	protected readonly operator = computed<DateOperator>(() => {
+		const v = this.value();
+		if (v?.value === "gt" || v?.value === "lt") return v.value;
+		if (v?.max && !v.min) return "lt";
+		return "gt";
+	});
+
+	protected readonly currentDate = computed<Date | null>(() => {
+		const v = this.value();
+		return toDate(v?.min ?? v?.max);
+	});
+
+	protected onOperatorChange(v: string): void {
+		const date = this.currentDate();
+		// Wait for a date before emitting.
+		if (date) this.emit(v === "lt" ? "lt" : "gt", date);
+	}
+
+	protected onDateChange(date: Date | null | undefined): void {
+		if (!date || !toDateString(date)) {
+			this.valueChange.emit(undefined);
+			return;
+		}
+		this.emit(this.operator(), date);
+	}
+
+	private emit(op: DateOperator, date: Date): void {
+		const str = toDateString(date);
+		this.valueChange.emit(op === "gt" ? { value: op, min: str } : { value: op, max: str });
+	}
+}

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

@@ -0,0 +1,43 @@
+<app-filter-field-wrapper [label]="label()" [htmlFor]="controlId" [helpText]="helpText()">
+	<div class="flex flex-col gap-2">
+		@if (showSelector()) {
+		<app-select
+			[label]="label() + ' comparison'"
+			[options]="operatorOptions()"
+			[value]="operator()"
+			(valueChange)="onOperatorChange($event)"
+		/>
+		} @switch (operator()) { @case ('between') {
+		<app-date-range-picker
+			class="w-full"
+			[label]="label()"
+			startPlaceholder="Start"
+			endPlaceholder="End"
+			[readonly]="true"
+			[max]="maxDate()"
+			[value]="range()"
+			(valueChange)="onRangeChange($event)"
+		/>
+		} @case ('after') {
+		<app-date-picker
+			class="w-full"
+			[label]="label() + ' after'"
+			placeholder="Pick a date"
+			[readonly]="true"
+			[max]="maxDate()"
+			[value]="minDate()"
+			(valueChange)="onAfterChange($event)"
+		/>
+		} @case ('before') {
+		<app-date-picker
+			class="w-full"
+			[label]="label() + ' before'"
+			placeholder="Pick a date"
+			[readonly]="true"
+			[max]="maxDate()"
+			[value]="maxValue()"
+			(valueChange)="onBeforeChange($event)"
+		/>
+		} }
+	</div>
+</app-filter-field-wrapper>

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

@@ -0,0 +1,70 @@
+/**
+ * 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 { DatePickerComponent } from "../../../components/ui/date-picker/date-picker";
+import { DateRangePickerComponent } from "../../../components/ui/date-range-picker/date-range-picker";
+import { SelectComponent } from "../../../components/ui/select/select";
+import { DateRangeFilterComponent } from "./date-range-filter";
+import type { DateFilterMode, FilterValue } from "./filter-types";
+
+describe("DateRangeFilterComponent", () => {
+	function setup(mode: DateFilterMode, value?: FilterValue) {
+		const fixture = TestBed.createComponent(DateRangeFilterComponent);
+		fixture.componentRef.setInput("label", "Closed");
+		fixture.componentRef.setInput("mode", mode);
+		if (value) fixture.componentRef.setInput("value", value);
+		const emitted: (FilterValue | undefined)[] = [];
+		fixture.componentInstance.valueChange.subscribe((v) => emitted.push(v));
+		fixture.detectChanges();
+		const get = <T>(type: new (...a: never[]) => T) =>
+			fixture.debugElement.query(By.directive(type))?.componentInstance as T | undefined;
+		return { fixture, get, emitted };
+	}
+
+	it("range mode shows only the range picker, no selector", () => {
+		const { get } = setup("range");
+		expect(get(SelectComponent)).toBeUndefined();
+		expect(get(DateRangePickerComponent)).toBeDefined();
+	});
+
+	it("range mode emits both bounds", () => {
+		const { fixture, get, emitted } = setup("range");
+		get(DateRangePickerComponent)!.value.set({
+			start: new Date(2026, 0, 1),
+			end: new Date(2026, 0, 31),
+		});
+		fixture.detectChanges();
+		expect(emitted).toEqual([{ min: "2026-01-01", max: "2026-01-31" }]);
+	});
+
+	it("comparison mode defaults to After and emits only min", () => {
+		const { fixture, get, emitted } = setup("comparison");
+		expect(
+			get(SelectComponent)!
+				.options()
+				.map((o) => o.label),
+		).toEqual(["After", "Before"]);
+		get(DatePickerComponent)!.value.set(new Date(2026, 4, 6));
+		fixture.detectChanges();
+		expect(emitted).toEqual([{ min: "2026-05-06", max: undefined }]);
+	});
+
+	it("restores the Before operator from a max-only value and keeps only max on switch", () => {
+		const { fixture, get, emitted } = setup("both", { max: "2026-02-01" });
+		expect(get(SelectComponent)!.value()).toBe("before");
+		get(SelectComponent)!.value.set("between");
+		fixture.detectChanges();
+		expect(emitted).toEqual([{ min: undefined, max: "2026-02-01" }]);
+	});
+
+	it("emits undefined when cleared", () => {
+		const { fixture, get, emitted } = setup("comparison", { min: "2026-01-01" });
+		get(DatePickerComponent)!.value.set(null);
+		fixture.detectChanges();
+		expect(emitted).toEqual([undefined]);
+	});
+});

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

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from "@angular/core";
+import { DatePickerComponent } from "../../../components/ui/date-picker/date-picker";
+import {
+	DateRange,
+	DateRangePickerComponent,
+} from "../../../components/ui/date-range-picker/date-range-picker";
+import {
+	SelectComponent,
+	type AppSelectOption,
+} from "../../../components/ui/select/select";
+import {
+	toDate,
+	toDateString,
+	uniqueFilterId,
+	type DateFilterMode,
+	type FilterValue,
+} from "./filter-types";
+import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
+
+/**
+ * after -> only `min` (gte), before -> only `max` (lte), between -> both.
+ */
+type DateOperator = "between" | "after" | "before";
+
+const OPERATOR_LABELS: Record<DateOperator, string> = {
+	between: "Between",
+	after: "After",
+	before: "Before",
+};
+
+const MODE_OPERATORS: Record<DateFilterMode, readonly DateOperator[]> = {
+	range: ["between"],
+	comparison: ["after", "before"],
+	both: ["between", "after", "before"],
+};
+
+function operatorFor(v: FilterValue | undefined): DateOperator {
+	if (v?.max && !v.min) return "before";
+	if (v?.min && !v.max) return "after";
+	return "between";
+}
+
+/**
+ * Date constraint whose chrome follows `mode` (see {@link DateFilterMode}).
+ * Emits `{ min?, max? }` as `YYYY-MM-DD`. Used for both date and datetime
+ * fields; the caller decides the field type.
+ */
+@Component({
+	selector: "app-date-range-filter",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		DatePickerComponent,
+		DateRangePickerComponent,
+		SelectComponent,
+		FilterFieldWrapperComponent,
+	],
+	templateUrl: "./date-range-filter.html",
+})
+export class DateRangeFilterComponent {
+	readonly label = input.required<string>();
+	readonly value = input<FilterValue | undefined>(undefined);
+	readonly mode = input<DateFilterMode>("comparison");
+	readonly helpText = input<string | undefined>(undefined);
+	/** Cap the pickers at today. */
+	readonly disableFuture = input(false);
+	readonly valueChange = output<FilterValue | undefined>();
+
+	protected readonly controlId = uniqueFilterId("filter-daterange");
+
+	protected readonly operators = computed(() => MODE_OPERATORS[this.mode()]);
+	protected readonly operatorOptions = computed<readonly AppSelectOption[]>(() =>
+		this.operators().map((op) => ({ value: op, label: OPERATOR_LABELS[op] })),
+	);
+	protected readonly showSelector = computed(() => this.operators().length > 1);
+
+	// Operator is local state: it must survive the moment no date is entered
+	// (which clears the value). `null` means "derive from the bound value".
+	private readonly chosen = signal<DateOperator | null>(null);
+	protected readonly operator = computed<DateOperator>(() => {
+		const ops = this.operators();
+		const op = this.chosen() ?? operatorFor(this.value());
+		return ops.includes(op) ? op : ops[0];
+	});
+
+	protected readonly maxDate = computed<Date | null>(() =>
+		this.disableFuture() ? new Date() : null,
+	);
+	protected readonly minDate = computed(() => toDate(this.value()?.min));
+	protected readonly maxValue = computed(() => toDate(this.value()?.max));
+	protected readonly range = computed<DateRange<Date>>(() => ({
+		start: this.minDate(),
+		end: this.maxValue(),
+	}));
+
+	protected onOperatorChange(v: string): void {
+		const next = v as DateOperator;
+		this.chosen.set(next);
+		const cur = this.value();
+		// Keep only the bound(s) the new operator uses.
+		if (next === "after") this.emit(cur?.min, undefined);
+		else if (next === "before") this.emit(undefined, cur?.max);
+		else this.emit(cur?.min, cur?.max);
+	}
+
+	protected onRangeChange(range: DateRange<Date> | null): void {
+		this.emit(toDateString(range?.start) || undefined, toDateString(range?.end) || undefined);
+	}
+
+	protected onAfterChange(date: Date | null | undefined): void {
+		this.emit(toDateString(date) || undefined, undefined);
+	}
+
+	protected onBeforeChange(date: Date | null | undefined): void {
+		this.emit(undefined, toDateString(date) || undefined);
+	}
+
+	private emit(min: string | undefined, max: string | undefined): void {
+		this.valueChange.emit(min || max ? { min, max } : undefined);
+	}
+}

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

@@ -0,0 +1,16 @@
+<!-- The wrapper owns the one visible label; projected base controls keep theirs for a11y but sr-only. -->
+<div
+	class="space-y-1 [&_app-select_label]:sr-only [&_app-date-picker_label]:sr-only [&_app-date-range-picker_label]:sr-only"
+>
+	@if (label()) {
+	<app-label [for]="htmlFor()">{{ label() }}</app-label>
+	}
+	<ng-content />
+	<div class="min-h-4">
+		@if (error(); as err) {
+		<p [id]="errorId()" class="text-xs text-destructive" role="alert">{{ err }}</p>
+		} @else if (helpText(); as help) {
+		<p class="text-xs text-muted-foreground">{{ help }}</p>
+		}
+	</div>
+</div>