@salesforce/ui-bundle-template-app-angular-template-b2e 11.30.0

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/agentforce/agentforce-embed.service.ts

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Injectable } from "@angular/core";
+import {
+	embedAgentforceClient,
+	type AgentforceClientConfig,
+} from "@salesforce/agentforce-conversation-client";
+import type {
+	AgentforceErrorHandler,
+	AgentforceReadyHandler,
+	ResolvedEmbedOptions,
+} from "../../types/conversation";
+
+/** Optional ready/error handlers forwarded to the embed client. */
+export interface AgentforceEmbedHandlers {
+	onReady?: AgentforceReadyHandler;
+	onError?: AgentforceErrorHandler;
+}
+
+const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host";
+const EXISTING_EMBED_SELECTOR = 'lightning-out-application[data-lo="acc"]';
+
+/**
+ * App-wide singleton that owns the one-time Lightning Out embed of the
+ * Agentforce Conversation Client. The Angular analogue of the React
+ * `window.__agentforceConversationClientSingleton`: because the service is
+ * `providedIn: 'root'`, a single instance is shared across the app, so its
+ * `initialized` / `initPromise` fields guarantee exactly one embed per app —
+ * regardless of how many client components mount.
+ *
+ * A valid Salesforce session is required for the given org; auth is resolved at
+ * embed time (frontdoor URL in dev via `/__lo/frontdoor`, `SFDC_ENV.orgUrl` in
+ * prod). Config is passed through to the embed client as-is.
+ */
+@Injectable({ providedIn: "root" })
+export class AgentforceEmbedService {
+	private initialized = false;
+	private initPromise?: Promise<void>;
+
+	/**
+	 * Embed the client once. Subsequent calls are no-ops while an embed is in
+	 * flight or already complete. `host` is the inline container element (when
+	 * rendering inline); when omitted the global floating host is used.
+	 */
+	embed(
+		config: AgentforceClientConfig,
+		overrides: ResolvedEmbedOptions,
+		host?: HTMLElement | null,
+		handlers?: AgentforceEmbedHandlers,
+	): void {
+		if (!config.agentId) {
+			throw new Error(
+				"AgentforceConversationClient requires agentId. " +
+					"Pass flat inputs only (agentId, agentLabel, inline, headerEnabled, showHeaderIcon, width, height, styleTokens).",
+			);
+		}
+
+		const inline = config.renderingConfig?.mode === "inline";
+		if (inline && !host) {
+			// Inline host not yet in the DOM — the component retries after render.
+			return;
+		}
+
+		if (this.initialized || this.initPromise) {
+			return;
+		}
+
+		const shouldFetchFrontdoor = window.location.hostname === "localhost";
+
+		if (shouldFetchFrontdoor) {
+			this.initPromise = fetch("/__lo/frontdoor")
+				.then(async (res) => {
+					if (!res.ok) {
+						console.error("frontdoor fetch failed");
+						return;
+					}
+					const { frontdoorUrl: resolvedFrontdoorUrl } = await res.json();
+					this.safeInitialize(
+						config,
+						{ ...overrides, frontdoorUrl: resolvedFrontdoorUrl },
+						host,
+						handlers,
+					);
+				})
+				.catch((err) => {
+					console.error("AgentforceConversationClient: failed to fetch frontdoor URL", err);
+				})
+				.finally(() => {
+					this.initPromise = undefined;
+				});
+		} else {
+			this.initPromise = Promise.resolve()
+				.then(() => {
+					this.safeInitialize(
+						config,
+						{ ...this.getDefaultEmbedOptions(), ...overrides },
+						host,
+						handlers,
+					);
+				})
+				.catch((err) => {
+					console.error("AgentforceConversationClient: failed to embed Agentforce client", err);
+				})
+				.finally(() => {
+					this.initPromise = undefined;
+				});
+		}
+	}
+
+	private safeInitialize(
+		config: AgentforceClientConfig,
+		options: ResolvedEmbedOptions,
+		host?: HTMLElement | null,
+		handlers?: AgentforceEmbedHandlers,
+	): void {
+		try {
+			this.initialize(config, options, host, handlers);
+		} catch (initErr) {
+			console.error("AgentforceConversationClient: initialization failed", initErr);
+			this.initialized = false;
+		}
+	}
+
+	private initialize(
+		config: AgentforceClientConfig,
+		options: ResolvedEmbedOptions,
+		host?: HTMLElement | null,
+		handlers?: AgentforceEmbedHandlers,
+	): void {
+		if (this.initialized) {
+			return;
+		}
+
+		const existingEmbed = document.querySelector(EXISTING_EMBED_SELECTOR);
+		if (existingEmbed) {
+			this.initialized = true;
+			return;
+		}
+
+		const inline = config.renderingConfig?.mode === "inline";
+		const container = inline ? host! : this.getOrCreateGlobalHost();
+
+		try {
+			embedAgentforceClient({
+				container,
+				salesforceOrigin: options.salesforceOrigin,
+				frontdoorUrl: options.frontdoorUrl,
+				agentforceClientConfig: config,
+				onReady: handlers?.onReady,
+				onError: handlers?.onError,
+			});
+			this.initialized = true;
+		} catch (err) {
+			// Strip a partially-created LO element so the next mount can retry.
+			const partialEmbed = document.querySelector(EXISTING_EMBED_SELECTOR);
+			partialEmbed?.remove();
+			console.error("AgentforceConversationClient: initialization failed", err);
+		}
+	}
+
+	private getOrCreateGlobalHost(): HTMLDivElement {
+		let host = document.getElementById(GLOBAL_HOST_ID) as HTMLDivElement | null;
+		if (!host) {
+			host = document.createElement("div");
+			host.id = GLOBAL_HOST_ID;
+			document.body.appendChild(host);
+		}
+		return host;
+	}
+
+	private getDefaultEmbedOptions(): ResolvedEmbedOptions {
+		return { salesforceOrigin: SFDC_ENV?.orgUrl };
+	}
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/active-filters/active-filters.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/active-filters/active-filters.component.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.component";
+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.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/date-filter/date-filter.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/date-filter/date-filter.component.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.component";
+import {
+	SelectComponent,
+	type AppSelectOption,
+} from "../../../../../components/ui/select/select.component";
+import { ObjectSearchStateService } from "../../../object-search-state.service";
+import type { FilterFieldConfig, FilterFieldType } from "../../../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+
+/**
+ * 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.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/date-range-filter/date-range-filter.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/date-range-filter/date-range-filter.component.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.component";
+import { ObjectSearchStateService } from "../../../object-search-state.service";
+import type { FilterFieldConfig, FilterFieldType } from "../../../utils/filter-utils";
+import { toDate, toDateString } from "../date-filter/date-filter.component";
+import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+
+/**
+ * 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.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/filter-field-wrapper/filter-field-wrapper.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/filter-field-wrapper/filter-field-wrapper.component.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/components/filters/ -> app/components/ui/).
+import { LabelComponent } from "../../../../../components/ui/label/label.component";
+
+/**
+ * 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.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/multi-select-filter/multi-select-filter.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/multi-select-filter/multi-select-filter.component.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.component";
+import { ObjectSearchStateService } from "../../../object-search-state.service";
+import type { FilterFieldConfig } from "../../../utils/filter-utils";
+import { FilterFieldWrapperComponent } from "../filter-field-wrapper/filter-field-wrapper.component";
+
+/**
+ * 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.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/object-search/components/filters/numeric-range-filter/numeric-range-filter.component.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>