@salesforce/ui-bundle-template-app-angular-template-b2e 11.60.0 → 11.62.1

package/dist/force-app/main/default/uiBundles/angularintapp/src/app/components/ui/separator/separator.ts

@@ -3,54 +3,29 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
-import {
-	booleanAttribute,
-	ChangeDetectionStrategy,
-	Component,
-	computed,
-	input,
-} from '@angular/core';
-import { MatDivider } from '@angular/material/divider';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { hlmSeparatorClass } from '@spartan-ng/styles/separator';
+import { classes } from '@spartan-ng/styles/utils';
 
-/** Layout axis of the separator line. */
 export type AppSeparatorOrientation = 'horizontal' | 'vertical';
 
-const BASE_CLASSES = 'shrink-0';
-const ORIENTATION_CLASSES: Record<AppSeparatorOrientation, string> = {
-	horizontal: 'block w-full',
-	vertical: 'self-stretch',
-};
-
-/**
- * Divider built on Material's `mat-divider`. `decorative` (default) hides the
- * host from assistive tech (`role="none"`); when false it exposes
- * `role="separator"` + `aria-orientation`. The inner `mat-divider` is marked
- * `role="presentation"` so it never announces a duplicate separator.
- */
 @Component({
 	selector: 'app-separator',
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [MatDivider],
-	templateUrl: './separator.html',
-	styleUrl: './separator.scss',
+	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
 	host: {
 		'data-slot': 'separator',
-		'[attr.data-orientation]': 'orientation()',
-		'[attr.role]': "decorative() ? 'none' : 'separator'",
-		'[attr.aria-orientation]':
-			"decorative() ? null : (orientation() === 'vertical' ? 'vertical' : 'horizontal')",
-		'[class]': 'hostClass()',
 	},
+	template: '',
 })
 export class SeparatorComponent {
 	readonly orientation = input<AppSeparatorOrientation>('horizontal');
 	readonly decorative = input(true, { transform: booleanAttribute });
-	/** Adds Material's horizontal inset margin so the line doesn't run edge-to-edge. */
-	readonly inset = input(false, { transform: booleanAttribute });
 
-	protected readonly isVertical = computed(() => this.orientation() === 'vertical');
-
-	protected readonly hostClass = computed(
-		() => `${BASE_CLASSES} ${ORIENTATION_CLASSES[this.orientation()]}`,
-	);
+	constructor() {
+		classes(() => hlmSeparatorClass);
+	}
 }
+
+export const SeparatorImports = [SeparatorComponent] as const;

package/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/src/app/features/agentforce/conversation.html

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

package/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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/dist/force-app/main/default/uiBundles/angularintapp/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,
 	);

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

@@ -1,10 +1,7 @@
-<app-filter-field-wrapper
-	[label]="config().label"
-	[htmlFor]="inputId()"
-	[helpText]="config().helpText"
->
+<app-filter-field-wrapper [helpText]="config().helpText">
 	<app-input
 		type="text"
+		[label]="config().label"
 		[placeholder]="config().placeholder ?? 'Filter by ' + config().label.toLowerCase() + '...'"
 		[value]="localValue()"
 		(valueChange)="onValueChange($event)"

package/dist/force-app/main/default/uiBundles/angularintapp/src/app/features/object-search/filters/text-filter.ts

@@ -15,8 +15,6 @@ 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 { ObjectSearchStateService } from "../object-search-state.service";
 import { FILTER_DEBOUNCE_MS } from "../utils/debounce";
@@ -26,11 +24,8 @@ import { FilterFieldWrapperComponent } from "./filter-field-wrapper";
 /**
  * Text filter — free-text input that writes a `like %value%` clause via
  * {@link ObjectSearchStateService.setFilter}. Keystrokes update the local
- * signal immediately (for a responsive UI) and flush to shared state on a
- * {@link FILTER_DEBOUNCE_MS}ms trailing debounce (to avoid a query per key).
- *
- * Reads the current value from `state.filterFor(config.field)` so URL /
- * reset-all changes reflect back into the input.
+ * signal immediately and flush to shared state on a
+ * {@link FILTER_DEBOUNCE_MS}ms trailing debounce.
  */
 @Component({
 	selector: "app-text-filter",
@@ -42,16 +37,9 @@ export class TextFilterComponent {
 	private readonly state = inject(ObjectSearchStateService);
 	private readonly destroyRef = inject(DestroyRef);
 
-	/** Field config: `field`, `label`, `placeholder`, `helpText`, ... */
 	readonly config = input.required<FilterFieldConfig>();
 
-	/** Local (uncommitted) value that drives the input while the user is typing. */
 	protected readonly localValue = signal<string>("");
-
-	/** DOM id shared by the wrapper label and the underlying input. */
-	protected readonly inputId = signal<string>("");
-
-	/** Coalesces rapid keystrokes into one shared-state write. */
 	private readonly commit$ = new Subject<string>();
 
 	constructor() {
@@ -59,11 +47,9 @@ export class TextFilterComponent {
 			.pipe(debounceTime(FILTER_DEBOUNCE_MS), takeUntilDestroyed(this.destroyRef))
 			.subscribe((v) => this.commit(v));
 
-		// Sync the input with the shared state (URL restore, reset-all, ...).
-		// Mirrors the React "reset local when external changes" pattern.
+		// Sync the input with shared state (URL restore, reset-all, ...).
 		effect(() => {
 			const cfg = this.config();
-			this.inputId.set(`filter-${cfg.field}`);
 			const external = this.state.filterFor(cfg.field)?.value ?? "";
 			this.localValue.set(external);
 		});