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

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/object-breadcrumb/object-breadcrumb.component.html

@@ -0,0 +1,55 @@
+<nav aria-label="Breadcrumb" class="mb-3">
+	<ol
+		class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"
+	>
+		@if (includeHome()) {
+			<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>
+		}
+		@if (isDetailView()) {
+			<li class="inline-flex items-center gap-1.5">
+				<a [routerLink]="listPath()" class="hover:text-foreground transition-colors">{{
+					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>
+			<li class="inline-flex items-center gap-1.5">
+				@if (loading() && !recordName()) {
+					<app-skeleton class="h-4 w-32" />
+				} @else {
+					<span class="text-foreground font-normal" aria-current="page">{{ recordName() }}</span>
+				}
+			</li>
+		} @else {
+			<li class="inline-flex items-center gap-1.5">
+				<span class="text-foreground font-normal" aria-current="page">{{ listLabel() }}</span>
+			</li>
+		}
+	</ol>
+</nav>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/object-breadcrumb/object-breadcrumb.component.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { SkeletonComponent } from "../../../../components/ui/skeleton/skeleton.component";
+
+/**
+ * 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`.
+ */
+@Component({
+	selector: "app-object-breadcrumb",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink, SkeletonComponent],
+	templateUrl: "./object-breadcrumb.component.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/angularexternalapp/src/app/features/object-search/components/pagination-controls/pagination-controls.component.html

@@ -0,0 +1,8 @@
+<app-paginator
+	[length]="totalCount() ?? 0"
+	[pageIndex]="pageIndex()"
+	[pageSize]="pageSize()"
+	[pageSizeOptions]="pageSizeOptions()"
+	[disabled]="disabled()"
+	(page)="onPage($event)"
+/>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/pagination-controls/pagination-controls.component.ts

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, inject, input } from "@angular/core";
+import type { PageEvent } from "@angular/material/paginator";
+import { PaginatorComponent } from "../../../../components/ui/paginator/paginator.component";
+import { ObjectSearchStateService } from "../../object-search-state.service";
+
+/**
+ * Cursor-pagination bridge. Feeds the shared cursor state into the presentational
+ * {@link PaginatorComponent} (`app-paginator`) and translates its offset-style
+ * `(page)` event back into the cursor walk the state service understands.
+ *
+ * State comes from the shared {@link ObjectSearchStateService} (`pageIndex`,
+ * `pageSize`); the hosting page supplies the cursor-derived inputs
+ * (`totalCount`, `hasNextPage`, `endCursor`) after each fetch. A next-page step
+ * needs the current `endCursor`; a previous step and page-size changes are
+ * handled entirely by the state service's cursor stack.
+ */
+@Component({
+	selector: "app-pagination-controls",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [PaginatorComponent],
+	templateUrl: "./pagination-controls.component.html",
+})
+export class PaginationControlsComponent {
+	/** Total row count from the latest fetch; drives the paginator's range label. */
+	readonly totalCount = input<number | undefined>(undefined);
+	/** Whether the API reports another page after the current one. */
+	readonly hasNextPage = input<boolean>(false);
+	/** `endCursor` from the latest page-info; forwarded to `goToNextPage`. */
+	readonly endCursor = input<string | undefined>(undefined);
+	/** Allowed page-size choices. */
+	readonly pageSizeOptions = input.required<readonly number[]>();
+	/** Disable navigation and the size select (e.g. while loading). */
+	readonly disabled = input<boolean>(false);
+
+	private readonly state = inject(ObjectSearchStateService);
+	protected readonly pageIndex = this.state.pageIndex;
+	protected readonly pageSize = this.state.pageSize;
+
+	/**
+	 * Route Material's offset-style page event onto the cursor model: a page-size
+	 * change resets pagination; a forward step walks the `endCursor`; a backward
+	 * step pops the cursor stack.
+	 */
+	protected onPage(event: PageEvent): void {
+		if (event.pageSize !== this.pageSize()) {
+			this.state.setPageSize(event.pageSize);
+			return;
+		}
+		if (event.pageIndex > this.pageIndex()) {
+			const cursor = this.endCursor();
+			if (cursor && this.hasNextPage()) this.state.goToNextPage(cursor);
+		} else if (event.pageIndex < this.pageIndex()) {
+			this.state.goToPreviousPage();
+		}
+	}
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/search-bar/search-bar.component.html

@@ -0,0 +1,59 @@
+<div class="flex items-center gap-2 w-full">
+	<div class="relative flex-1">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-10"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"
+		>
+			<circle cx="11" cy="11" r="8" />
+			<path d="m21 21-4.3-4.3" />
+		</svg>
+		<app-input
+			class="pl-9 block"
+			type="text"
+			[placeholder]="searchConfig().placeholder ?? ''"
+			[label]="searchConfig().label"
+			[(value)]="term"
+		/>
+	</div>
+	<app-popover [(open)]="popoverOpen" align="end">
+		<app-button
+			trigger
+			appearance="outlined"
+			[attr.aria-expanded]="popoverOpen()"
+			aria-label="Toggle filters"
+			class="gap-2"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d="M3 6h18M7 12h10M10 18h4" />
+			</svg>
+			<span>Filters</span>
+			@if (nonSearchFilterCount() > 0) {
+				<span
+					class="inline-flex items-center justify-center h-5 min-w-5 rounded-full bg-primary text-primary-foreground text-xs px-1"
+				>
+					{{ nonSearchFilterCount() }}
+				</span>
+			}
+		</app-button>
+		<div class="p-3 min-w-72 max-w-96 space-y-3">
+			<ng-content select="[filters]" />
+		</div>
+	</app-popover>
+</div>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/search-bar/search-bar.component.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	DestroyRef,
+	inject,
+	input,
+	type OnInit,
+	signal,
+} from "@angular/core";
+import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
+import { debounceTime } from "rxjs/operators";
+import { ButtonComponent } from "../../../../components/ui/button/button.component";
+import { InputComponent } from "../../../../components/ui/input/input.component";
+import { PopoverComponent } from "../../../../components/ui/popover/popover.component";
+import { ObjectSearchStateService } from "../../object-search-state.service";
+import type { FilterFieldConfig } from "../../utils/filter-utils";
+
+/** How long to wait after the last keystroke before writing to state. */
+const SEARCH_DEBOUNCE_MS = 300;
+
+/**
+ * Search-bar header for an object-search page: a debounced text input bound to
+ * the `search` filter, plus an optional filter popover that content-projects
+ * the sibling filter components (owned by the filters wave).
+ *
+ * Mirrors the React `SearchBar`, with the composed additions from the ground-
+ * truth example page (filter panel toggle). Filter components are NOT imported
+ * here — the hosting page projects them via the `[filters]` slot so the
+ * feature can pick which filters it renders.
+ *
+ * ## Usage
+ * ```html
+ * <app-search-bar [searchConfig]="searchCfg" [filterConfigs]="filterCfgs">
+ *   <div filters>
+ *     <app-text-filter .../>
+ *     <app-select-filter .../>
+ *   </div>
+ * </app-search-bar>
+ * ```
+ */
+@Component({
+	selector: "app-search-bar",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent, InputComponent, PopoverComponent],
+	templateUrl: "./search-bar.component.html",
+})
+export class SearchBarComponent implements OnInit {
+	/** Config for the multi-field search filter (its label, placeholder, etc.). */
+	readonly searchConfig = input.required<FilterFieldConfig>();
+	/**
+	 * Configs for the filters projected into the popover. Not consumed directly
+	 * here — surfaced so the hosting page and this component agree on which
+	 * filters exist, and reserved for a future filter-count badge.
+	 */
+	readonly filterConfigs = input<FilterFieldConfig[]>([]);
+
+	private readonly state = inject(ObjectSearchStateService);
+	private readonly destroyRef = inject(DestroyRef);
+
+	/** Local, debounced mirror of the search filter's `value`. */
+	protected readonly term = signal<string>("");
+	protected readonly popoverOpen = signal<boolean>(false);
+
+	/** Count of currently active filters minus the search itself (for the badge). */
+	protected readonly nonSearchFilterCount = computed(
+		() => this.state.filters().filter((f) => f.type !== "search").length,
+	);
+
+	constructor() {
+		// Required inputs are not yet resolved in the constructor, so the search
+		// config is read lazily inside the subscription (which emits after init).
+		toObservable(this.term)
+			.pipe(debounceTime(SEARCH_DEBOUNCE_MS), takeUntilDestroyed(this.destroyRef))
+			.subscribe((value) => {
+				const cfg = this.searchConfig();
+				if (value) {
+					this.state.setFilter(cfg.field, {
+						field: cfg.field,
+						label: cfg.label,
+						type: cfg.type,
+						value,
+					});
+				} else {
+					this.state.removeFilter(cfg.field);
+				}
+			});
+	}
+
+	ngOnInit(): void {
+		// Seed the local term from any existing search filter (deep-link support).
+		// Done here (not the constructor) so the required `searchConfig` input is
+		// resolved before it is read.
+		const existing = this.state.filterFor(this.searchConfig().field);
+		if (existing?.value) {
+			this.term.set(existing.value);
+		}
+	}
+
+	protected togglePopover(): void {
+		this.popoverOpen.set(!this.popoverOpen());
+	}
+}

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/sort-control/sort-control.component.html

@@ -0,0 +1,50 @@
+<div class="flex items-center gap-2">
+	<span class="text-sm text-muted-foreground whitespace-nowrap">{{ label() }}</span>
+	<app-select
+		class="w-[160px]"
+		[options]="options()"
+		[value]="selectedValue()"
+		(valueChange)="onFieldChange($event)"
+		placeholder="Default"
+	/>
+	@if (sort(); as active) {
+		<app-button
+			appearance="text"
+			size="icon-sm"
+			[attr.aria-label]="'Sort ' + (active.direction === 'ASC' ? 'descending' : 'ascending')"
+			(clicked)="toggleDirection()"
+		>
+			@if (active.direction === "ASC") {
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="m5 12 7-7 7 7" />
+					<path d="M12 19V5" />
+				</svg>
+			} @else {
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M12 5v14" />
+					<path d="m19 12-7 7-7-7" />
+				</svg>
+			}
+		</app-button>
+	}
+</div>

package/dist/force-app/main/default/uiBundles/angularexternalapp/src/app/features/object-search/components/sort-control/sort-control.component.ts

@@ -0,0 +1,72 @@
+/**
+ * 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 { ButtonComponent } from "../../../../components/ui/button/button.component";
+import {
+	SelectComponent,
+	type AppSelectOption,
+} from "../../../../components/ui/select/select.component";
+import { ObjectSearchStateService } from "../../object-search-state.service";
+import type { SortFieldConfig, SortState } from "../../utils/sort-utils";
+
+/** Sentinel value used in the select to represent "no sort". */
+const NONE_VALUE = "__none__";
+
+/**
+ * Sort field + direction toggle. Mirrors the React `SortControl`.
+ *
+ * Reads `sort()` from the {@link ObjectSearchStateService} and drives changes
+ * via `setSort`. Choosing a field applies ASC by default; the direction button
+ * flips ASC/DESC and only appears while a sort is active. Selecting `Default`
+ * clears the sort (`setSort(null)`).
+ */
+@Component({
+	selector: "app-sort-control",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent, SelectComponent],
+	templateUrl: "./sort-control.component.html",
+})
+export class SortControlComponent {
+	/** Sortable fields to expose in the select. */
+	readonly sortFields = input.required<SortFieldConfig[]>();
+	/** Override for the leading label (default `Sort by`). */
+	readonly label = input<string>("Sort by");
+
+	private readonly state = inject(ObjectSearchStateService);
+	/** Current sort state from the shared state service. */
+	protected readonly sort = this.state.sort;
+
+	/** Select options — the `Default` sentinel plus one per sortable field. */
+	protected readonly options = computed<AppSelectOption[]>(() => [
+		{ value: NONE_VALUE, label: "Default" },
+		...this.sortFields().map((c) => ({ value: c.field, label: c.label })),
+	]);
+
+	/** Value shown in the select — either the current field or the sentinel. */
+	protected readonly selectedValue = computed(() => this.sort()?.field ?? NONE_VALUE);
+
+	protected onFieldChange(field: string): void {
+		if (field === NONE_VALUE) {
+			this.state.setSort(null);
+			return;
+		}
+		const current = this.sort();
+		const next: SortState = {
+			field,
+			direction: current?.direction ?? "ASC",
+		};
+		this.state.setSort(next);
+	}
+
+	protected toggleDirection(): void {
+		const current = this.sort();
+		if (!current) return;
+		this.state.setSort({
+			field: current.field,
+			direction: current.direction === "ASC" ? "DESC" : "ASC",
+		});
+	}
+}