@salesforce/templates 66.13.7 → 66.13.8

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/skeleton/skeleton.ts

@@ -4,21 +4,17 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSkeleton } from '@spartan-ng/styles/skeleton';
 
-/**
- * Loading skeleton — a pulsing block sized by host `class` utilities (e.g.
- * `class="h-4 w-32"`); it has no intrinsic size, so always set width/height.
- * `aria-hidden`, so announce loading via the container's `aria-busy`.
- */
 @Component({
 	selector: 'app-skeleton',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	templateUrl: './skeleton.html',
-	styleUrl: './skeleton.scss',
+	hostDirectives: [HlmSkeleton],
 	host: {
-		'data-slot': 'skeleton',
 		'aria-hidden': 'true',
-		class: 'bg-accent rounded-md',
 	},
+	template: '<ng-content />',
 })
 export class SkeletonComponent {}
+
+export const SkeletonImports = [SkeletonComponent] as const;

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/spinner/spinner.ts

@@ -4,32 +4,25 @@
  * For full license text, see the LICENSE.txt file
  */
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { MatProgressSpinnerModule, ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { HlmSpinnerImports } from '@spartan-ng/styles/spinner';
+import { classes } from '@spartan-ng/styles/utils';
 
-/**
- * Thin wrapper over Material's `mat-progress-spinner`. Defaults to an
- * indeterminate 24px spinner. `ariaLabel` names the `role="progressbar"`.
- */
 @Component({
 	selector: 'app-spinner',
+	imports: [HlmSpinnerImports],
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MatProgressSpinnerModule],
-	template: `
-		<mat-progress-spinner
-			[mode]="mode()"
-			[diameter]="diameter()"
-			[value]="value()"
-			[attr.aria-label]="ariaLabel()"
-		/>
-	`,
+	host: {
+		role: 'status',
+		'[attr.aria-label]': 'ariaLabel()',
+	},
+	template: `<hlm-spinner />`,
 })
 export class SpinnerComponent {
-	readonly diameter = input<number>(24);
-	readonly mode = input<ProgressSpinnerMode>('indeterminate');
+	public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
 
-	/** Progress value (0–100) used only when `mode` is `determinate`. */
-	readonly value = input<number>(0);
-
-	/** Accessible name announced by assistive tech. */
-	readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+	constructor() {
+		classes(() => 'text-[length:--spacing(4)]');
+	}
 }
+
+export const SpinnerImports = [SpinnerComponent] as const;

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/agentforce/agentforce-embed.service.ts

@@ -8,6 +8,7 @@ import {
 	embedAgentforceClient,
 	type AgentforceClientConfig,
 } from "@salesforce/agentforce-conversation-client";
+import { createAccEmbedder } from "@salesforce/agentforce-conversation-client/ui-bundle";
 import type {
 	AgentforceErrorHandler,
 	AgentforceReadyHandler,
@@ -20,30 +21,27 @@ export interface AgentforceEmbedHandlers {
 	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.
+ * Agentforce Conversation Client. Because the service is `providedIn: 'root'`,
+ * a single instance is shared across the app; it delegates to the shared,
+ * framework-agnostic `@salesforce/agentforce-conversation-client/ui-bundle`
+ * embedder, which owns the embed
+ * orchestration (window singleton, global host, dev frontdoor fetch, `SFDC_ENV`
+ * default, and partial-embed cleanup) that used to be duplicated here and in the
+ * React feature.
  *
- * 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.
+ * A valid Salesforce session is required for the given org. Config is passed
+ * through to the embed client as-is.
  */
 @Injectable({ providedIn: "root" })
 export class AgentforceEmbedService {
-	private initialized = false;
-	private initPromise?: Promise<void>;
+	private readonly embedder = createAccEmbedder<AgentforceClientConfig>(embedAgentforceClient);
 
 	/**
 	 * 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.
+	 * rendering inline); when omitted the shared floating host is used.
 	 */
 	embed(
 		config: AgentforceClientConfig,
@@ -51,132 +49,6 @@ export class AgentforceEmbedService {
 		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(), ...this.stripUndefined(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 };
-	}
-
-	/** Remove keys with undefined/null values so they don't override defaults when spread. */
-	private stripUndefined(opts: ResolvedEmbedOptions): ResolvedEmbedOptions {
-		return Object.fromEntries(Object.entries(opts).filter(([, v]) => v != null));
+		this.embedder.embedAcc(config, overrides, host, handlers);
 	}
 }

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/agentforce/conversation.html

@@ -1,3 +1,3 @@
-@if (isInline()) {
+@if (inline()) {
 <div #host></div>
 }

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/agentforce/conversation.ts

@@ -97,9 +97,6 @@ export class AgentforceConversationClientComponent {
 		};
 	});
 
-	/** Whether the chat should render inline (drives the host `<div>`). */
-	protected readonly isInline = computed(() => this.config().renderingConfig?.mode === "inline");
-
 	constructor() {
 		// Embed after the view (and any inline host `<div>`) exists in the DOM —
 		// the analogue of the React `useEffect`. The service guards against

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

@@ -6,18 +6,8 @@
 		<li class="inline-flex items-center gap-1.5">
 			<a [routerLink]="'/'" class="hover:text-foreground transition-colors">{{ homeLabel() }}</a>
 		</li>
-		<li aria-hidden="true" class="[&>svg]:size-3.5">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<polyline points="9 18 15 12 9 6" />
-			</svg>
+		<li aria-hidden="true">
+			<app-icon name="chevronRight" size="14px" class="flex" />
 		</li>
 		} @if (isDetailView()) {
 		<li class="inline-flex items-center gap-1.5">
@@ -25,18 +15,8 @@
 				>{{ listLabel() }}</a
 			>
 		</li>
-		<li aria-hidden="true" class="[&>svg]:size-3.5">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<polyline points="9 18 15 12 9 6" />
-			</svg>
+		<li aria-hidden="true">
+			<app-icon name="chevronRight" size="14px" class="flex" />
 		</li>
 		<li class="inline-flex items-center gap-1.5">
 			@if (loading() && !recordName()) {

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

@@ -5,36 +5,23 @@
  */
 import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
 import { RouterLink } from "@angular/router";
+import { IconComponent } from "../../../components/ui/icon/icon";
 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`.
- */
+/** Object-search breadcrumb — Home > Records list > (optional) Record name. */
 @Component({
 	selector: "app-object-breadcrumb",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [RouterLink, SkeletonComponent],
+	imports: [RouterLink, IconComponent, 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/angularintapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/date-filter.ts

@@ -85,7 +85,7 @@ export class DateFilterComponent {
 		if (date) this.emit(op, date);
 	}
 
-	protected onDateChange(date: Date | null): void {
+	protected onDateChange(date: Date | null | undefined): void {
 		const cfg = this.config();
 		if (!date) {
 			this.state.removeFilter(cfg.field);

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

@@ -1,6 +1,7 @@
-<app-filter-field-wrapper [label]="config().label" [helpText]="config().helpText">
+<app-filter-field-wrapper [helpText]="config().helpText">
 	<app-date-range-picker
 		class="w-full"
+		[label]="config().label"
 		startPlaceholder="Start"
 		endPlaceholder="End"
 		[readonly]="true"

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

@@ -4,8 +4,6 @@
  * 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,
@@ -16,13 +14,8 @@ 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.
+ * Date range filter — a two-ended range picker. Emits a `daterange` (or
+ * `datetimerange`) filter with `min` / `max` as `YYYY-MM-DD` strings.
  */
 @Component({
 	selector: "app-date-range-filter",
@@ -33,17 +26,15 @@ import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 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)),
-	);
+	protected readonly range = computed<DateRange<Date>>(() => ({
+		start: toDate(this.active()?.min),
+		end: toDate(this.active()?.max),
+	}));
 
 	/** Cap the picker at today when the field can't hold a future date. */
 	protected readonly maxDate = computed<Date | null>(() =>

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

@@ -1,5 +1,7 @@
 <div class="space-y-1">
+	@if (label()) {
 	<app-label [for]="htmlFor()">{{ label() }}</app-label>
+	}
 	<ng-content />
 	<div class="min-h-4">
 		@if (error(); as err) {

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

@@ -4,20 +4,9 @@
  * 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/).
+// Post-compose, this lands 3 levels up at app/components/ui/label/__inherit__label.
 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,
@@ -25,12 +14,8 @@ import { LabelComponent } from "../../../components/ui/label/label";
 	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 label = input<string>("");
 	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/angularintapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/multi-select-filter.html

@@ -1,6 +1,7 @@
-<app-filter-field-wrapper [label]="config().label" [helpText]="config().helpText">
+<app-filter-field-wrapper [helpText]="config().helpText">
 	<app-select
 		multiple
+		[label]="config().label"
 		[size]="size()"
 		[options]="config().options ?? []"
 		[placeholder]="placeholder()"

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

@@ -16,11 +16,6 @@ import {
 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";
@@ -30,34 +25,21 @@ 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.
+ * in `buildSingleFilter`). A trailing debounce commits the pair, skipping
+ * writes when the range is inverted or out of `boundMin` / `boundMax`.
  */
 @Component({
 	selector: "app-numeric-range-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [
-		InputComponent,
-		FilterFieldWrapperComponent,
-		FormsModule,
-		MatFormFieldModule,
-		MatInputModule,
-	],
+	imports: [InputComponent, FilterFieldWrapperComponent],
 	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>("");

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

@@ -1,6 +1,6 @@
-<app-filter-field-wrapper [label]="config().label" [htmlFor]="inputId()">
-	<app-input
-		type="search"
+<app-filter-field-wrapper [label]="config().label" [htmlFor]="fieldId()">
+	<app-search-bar
+		[inputId]="fieldId()"
 		[placeholder]="config().placeholder ?? 'Search...'"
 		[value]="localValue()"
 		(valueChange)="onValueChange($event)"

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

@@ -6,6 +6,7 @@
 import {
 	ChangeDetectionStrategy,
 	Component,
+	computed,
 	DestroyRef,
 	effect,
 	inject,
@@ -15,37 +16,33 @@ import {
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { Subject } from "rxjs";
 import { debounceTime } from "rxjs/operators";
-// 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 { SearchBarComponent } from "../search-bar/search-bar";
 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";
 
 /**
- * Multi-field search filter — a debounced input whose value is applied via
- * `like %value%` across every field named in `config.searchFields` (combined
- * with a top-level `or`, see {@link buildFilter}).
- *
- * Shape mirrors {@link TextFilterComponent} but emits a `type: 'search'`
- * {@link ActiveFilterValue} so `filter-utils` picks the multi-field path.
+ * Multi-field search filter — a debounced input applied via `like %value%`
+ * across every field named in `config.searchFields` (combined with a
+ * top-level `or`, see {@link buildFilter}).
  */
 @Component({
 	selector: "app-search-filter",
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [InputComponent, FilterFieldWrapperComponent],
+	imports: [SearchBarComponent, FilterFieldWrapperComponent],
 	templateUrl: "./search-filter.html",
 })
 export class SearchFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);
 	private readonly destroyRef = inject(DestroyRef);
 
-	/** Field config: `field`, `label`, `placeholder`, `searchFields`, ... */
 	readonly config = input.required<FilterFieldConfig>();
 
+	// Ties the wrapper's <label for> to the search input.
+	protected readonly fieldId = computed(() => `filter-${this.config().field}`);
+
 	protected readonly localValue = signal<string>("");
-	protected readonly inputId = signal<string>("");
 	private readonly commit$ = new Subject<string>();
 
 	constructor() {
@@ -55,7 +52,6 @@ export class SearchFilterComponent {
 
 		effect(() => {
 			const cfg = this.config();
-			this.inputId.set(`filter-${cfg.field}`);
 			const external = this.state.filterFor(cfg.field)?.value ?? "";
 			this.localValue.set(external);
 		});

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

@@ -1,9 +1,6 @@
-<app-filter-field-wrapper
-	[label]="config().label"
-	[htmlFor]="inputId()"
-	[helpText]="config().helpText"
->
+<app-filter-field-wrapper [helpText]="config().helpText">
 	<app-select
+		[label]="config().label"
 		[placeholder]="'Select ' + config().label.toLowerCase()"
 		[options]="options()"
 		[value]="currentValue()"

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

@@ -4,8 +4,6 @@
  * 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/select/..., three levels up.
 import {
 	SelectComponent,
 	type AppSelectOption,
@@ -14,13 +12,7 @@ import { ObjectSearchStateService } from "../object-search-state.service";
 import type { FilterFieldConfig } from "../utils/filter-utils";
 import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 
-/**
- * Single-value picklist filter — a select rendered from `config.options` with
- * a leading "All" entry (empty value) that clears the filter.
- *
- * Emits a `type: 'picklist'` filter which `buildSingleFilter` maps to
- * `{ [field]: { eq: value } }`.
- */
+// A leading "All" entry (empty value) clears the filter.
 const ALL_VALUE = "";
 
 @Component({
@@ -32,19 +24,13 @@ const ALL_VALUE = "";
 export class SelectFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);
 
-	/** Field config: `field`, `label`, `options`, `helpText`, ... */
 	readonly config = input.required<FilterFieldConfig>();
 
-	/** DOM id shared by the wrapper label and the underlying control. */
-	protected readonly inputId = computed(() => `filter-${this.config().field}`);
-
-	/** Options rendered in the select, with an "All" (clear) sentinel prepended. */
 	protected readonly options = computed<readonly AppSelectOption[]>(() => [
 		{ value: ALL_VALUE, label: "All" },
 		...(this.config().options ?? []),
 	]);
 
-	/** Current selection, reading through to shared state so URL changes reflect. */
 	protected readonly currentValue = computed(
 		() => this.state.filterFor(this.config().field)?.value ?? ALL_VALUE,
 	);