@salesforce/ui-bundle-template-feature-angular-object-search 12.5.4

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/paginator/paginator.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+	output,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import {
+	lucideChevronFirst,
+	lucideChevronLast,
+	lucideChevronLeft,
+	lucideChevronRight,
+} from '@ng-icons/lucide';
+import { HlmPaginationImports } from '@spartan-ng/styles/pagination';
+import type { PageEvent } from './types';
+
+export type { PageEvent } from './types';
+
+@Component({
+	selector: 'app-paginator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmPaginationImports, NgIcon],
+	providers: [
+		provideIcons({ lucideChevronFirst, lucideChevronLast, lucideChevronLeft, lucideChevronRight }),
+	],
+	host: { class: 'flex items-center justify-end gap-4 text-sm' },
+	templateUrl: './paginator.html',
+})
+export class PaginatorComponent {
+	readonly length = input<number>(0);
+	readonly pageIndex = model<number>(0);
+	readonly pageSize = model<number>(10);
+	readonly pageSizeOptions = input<readonly number[]>([]);
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly hidePageSize = input(false, { transform: booleanAttribute });
+	readonly showFirstLastButtons = input(false, { transform: booleanAttribute });
+	readonly page = output<PageEvent>();
+
+	private static _uid = 0;
+	// Unique so the label→select association survives multiple paginators on a page.
+	protected readonly pageSizeLabelId = `app-paginator-page-size-${PaginatorComponent._uid++}`;
+
+	protected readonly lastPage = computed(() =>
+		Math.max(0, Math.ceil(this.length() / this.pageSize()) - 1),
+	);
+
+	protected readonly clampedPageIndex = computed(() =>
+		Math.max(0, Math.min(this.pageIndex(), this.lastPage())),
+	);
+
+	protected readonly rangeLabel = computed(() => {
+		const len = this.length();
+		if (len === 0) return '0 of 0';
+		const idx = this.clampedPageIndex();
+		const start = idx * this.pageSize() + 1;
+		const end = Math.min((idx + 1) * this.pageSize(), len);
+		return `${start} – ${end} of ${len}`;
+	});
+
+	protected goToPage(index: number): void {
+		const previousPageIndex = this.pageIndex();
+		this.pageIndex.set(index);
+		this.page.emit({
+			pageIndex: index,
+			previousPageIndex,
+			pageSize: this.pageSize(),
+			length: this.length(),
+		});
+	}
+
+	protected onPageSizeChange(event: Event): void {
+		const newSize = Number((event.target as HTMLSelectElement).value);
+		const previousPageIndex = this.pageIndex();
+		this.pageSize.set(newSize);
+		this.pageIndex.set(0);
+		this.page.emit({
+			pageIndex: 0,
+			previousPageIndex,
+			pageSize: newSize,
+			length: this.length(),
+		});
+	}
+}
+
+export const PaginatorImports = [PaginatorComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/paginator/types.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Payload emitted by PaginatorComponent's `(page)` output. */
+export interface PageEvent {
+	pageIndex: number;
+	previousPageIndex: number;
+	pageSize: number;
+	length: number;
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/popover/popover.html

@@ -0,0 +1,13 @@
+<hlm-popover
+	[align]="align()"
+	[sideOffset]="sideOffset()"
+	[state]="open() ? 'open' : 'closed'"
+	(stateChanged)="onStateChanged($event)"
+>
+	<button hlmPopoverTrigger type="button" [class]="triggerClass()" [attr.aria-label]="ariaLabel()">
+		<ng-content select="[trigger]" />
+	</button>
+	<div hlmPopoverContent *hlmPopoverPortal>
+		<ng-content />
+	</div>
+</hlm-popover>

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/popover/popover.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { HlmPopoverImports } from '@spartan-ng/styles/popover';
+
+@Component({
+	selector: 'app-popover',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmPopoverImports],
+	templateUrl: './popover.html',
+})
+export class PopoverComponent {
+	readonly open = model<boolean>(false);
+	readonly align = input<'start' | 'center' | 'end'>('start');
+	readonly sideOffset = input<number>(4);
+	// The wrapper owns the single real trigger `<button>` (so callers project
+	// plain content, never a nested button); these style/label it.
+	readonly triggerClass = input<string>('');
+	readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+
+	toggle(): void {
+		this.open.set(!this.open());
+	}
+
+	close(): void {
+		this.open.set(false);
+	}
+
+	protected onStateChanged(state: 'open' | 'closed'): void {
+		this.open.set(state === 'open');
+	}
+}
+
+export const PopoverImports = [PopoverComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/select/select.html

@@ -0,0 +1,36 @@
+@if (label()) {
+	<label hlmLabel [for]="labelId" class="mb-1.5 block">{{ label() }}</label>
+}
+@if (!multiple()) {
+	<hlm-select
+		[value]="value()"
+		(valueChange)="onSingleChange($event)"
+		[disabled]="disabled()"
+		[itemToString]="itemToString"
+	>
+		<hlm-select-trigger [buttonId]="labelId" [size]="size()" [class]="triggerClasses()">
+			<hlm-select-value [placeholder]="placeholder()" />
+		</hlm-select-trigger>
+		<hlm-select-content *hlmSelectPortal>
+			@for (option of options(); track option.value) {
+				<hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+			}
+		</hlm-select-content>
+	</hlm-select>
+} @else {
+	<hlm-select-multiple
+		[value]="$any(values())"
+		(valueChange)="onMultiChange($event)"
+		[disabled]="disabled()"
+		[itemToString]="itemToString"
+	>
+		<hlm-select-trigger [buttonId]="labelId" [size]="size()" [class]="triggerClasses()">
+			<hlm-select-value [placeholder]="placeholder()" />
+		</hlm-select-trigger>
+		<hlm-select-content *hlmSelectPortal>
+			@for (option of options(); track option.value) {
+				<hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
+			}
+		</hlm-select-content>
+	</hlm-select-multiple>
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/select/select.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	booleanAttribute,
+	computed,
+	input,
+	model,
+} from '@angular/core';
+import { HlmSelectImports } from '@spartan-ng/styles/select';
+import { HlmLabelImports } from '@spartan-ng/styles/label';
+import type { AppFieldSize } from '../field-size';
+import type { AppFieldAppearance } from '../field-appearance';
+
+export interface AppSelectOption {
+	value: string;
+	label: string;
+}
+
+@Component({
+	selector: 'app-select',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [HlmSelectImports, HlmLabelImports],
+	host: { class: 'block min-w-0' },
+	templateUrl: './select.html',
+})
+export class SelectComponent {
+	readonly value = model<string>('');
+	readonly values = model<readonly string[]>([]);
+	readonly multiple = input(false, { transform: booleanAttribute });
+	readonly options = input<readonly AppSelectOption[]>([]);
+	readonly placeholder = input<string>('');
+	readonly label = input<string>('');
+	readonly disabled = input(false, { transform: booleanAttribute });
+	readonly appearance = input<AppFieldAppearance>('outline');
+	readonly size = input<AppFieldSize>('default');
+
+	private static _uid = 0;
+	protected readonly labelId = `app-select-${SelectComponent._uid++}`;
+
+	protected readonly itemToString = (value: string): string => {
+		return this.options().find((o) => o.value === value)?.label ?? value;
+	};
+
+	protected readonly triggerClasses = computed(() => {
+		if (this.appearance() === 'fill') return 'border-transparent bg-muted';
+		return '';
+	});
+
+	protected onSingleChange(event: string | null | undefined): void {
+		this.value.set(event ?? '');
+	}
+
+	protected onMultiChange(event: string[] | readonly string[] | null | undefined): void {
+		this.values.set(event ?? []);
+	}
+}
+
+export const SelectImports = [SelectComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/separator/separator.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+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';
+
+export type AppSeparatorOrientation = 'horizontal' | 'vertical';
+
+@Component({
+	selector: 'app-separator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+	host: {
+		'data-slot': 'separator',
+	},
+	template: '',
+})
+export class SeparatorComponent {
+	readonly orientation = input<AppSeparatorOrientation>('horizontal');
+	readonly decorative = input(true, { transform: booleanAttribute });
+
+	constructor() {
+		classes(() => hlmSeparatorClass);
+	}
+}
+
+export const SeparatorImports = [SeparatorComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/skeleton/skeleton.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { HlmSkeleton } from '@spartan-ng/styles/skeleton';
+
+@Component({
+	selector: 'app-skeleton',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [HlmSkeleton],
+	host: {
+		'aria-hidden': 'true',
+	},
+	template: '<ng-content />',
+})
+export class SkeletonComponent {}
+
+export const SkeletonImports = [SkeletonComponent] as const;

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/components/ui/spinner/spinner.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { HlmSpinnerImports } from '@spartan-ng/styles/spinner';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'app-spinner',
+	imports: [HlmSpinnerImports],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		role: 'status',
+		'[attr.aria-label]': 'ariaLabel()',
+	},
+	template: `<hlm-spinner />`,
+})
+export class SpinnerComponent {
+	public 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/feature-angular-object-search/src/app/features/object-search/api/object-search.service.ts

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Injectable, inject } from "@angular/core";
+import { DataClient } from "../../../api/data-client.service";
+
+/** Search args */
+export interface ObjectSearchOptions<TWhere, TOrderBy> {
+	where?: TWhere;
+	orderBy?: TOrderBy;
+	first?: number;
+	after?: string;
+}
+
+/** Picklist option shape shared with filter components. */
+export type PicklistOption = { value: string; label: string };
+
+/**
+ * Generic object-search data service
+ *
+ * Provides reusable, object-agnostic methods for:
+ * - Searching objects via GraphQL `uiapi.query.<ObjectName>`
+ * - Fetching distinct picklist values via `uiapi.aggregate.<ObjectName>`
+ *
+ * Domain-specific services (e.g. `AccountSearchService`) delegate here with
+ * typed parameters rather than reimplementing the query/extraction logic.
+ */
+@Injectable({ providedIn: "root" })
+export class ObjectSearchService {
+	private readonly client = inject(DataClient);
+
+	/**
+	 * Executes a GraphQL search query and extracts the result for the given
+	 * object name from the standard `uiapi.query.<ObjectName>` response shape.
+	 */
+	async searchObjects<TResult, TQuery, TVariables>(
+		query: string,
+		objectName: string,
+		options: ObjectSearchOptions<unknown, unknown> = {},
+	): Promise<TResult> {
+		const { where, orderBy, first = 20, after } = options;
+		const data = await this.client.execute<TQuery, TVariables>(query, {
+			first,
+			after,
+			where,
+			orderBy,
+		} as TVariables);
+
+		const uiapi = (data as Record<string, unknown>)?.["uiapi"] as
+			| Record<string, unknown>
+			| undefined;
+		const queryResult = (uiapi?.["query"] as Record<string, unknown> | undefined)?.[objectName] as
+			| TResult
+			| undefined;
+
+		if (!queryResult) {
+			throw new Error(`No ${objectName} data returned`);
+		}
+		return queryResult;
+	}
+
+	/**
+	 * Executes a GraphQL aggregate/groupBy query and extracts picklist options
+	 * from the standard `uiapi.aggregate.<ObjectName>` response shape.
+	 */
+	async fetchDistinctValues<TQuery>(
+		query: string,
+		objectName: string,
+		fieldName: string,
+	): Promise<PicklistOption[]> {
+		const data = await this.client.execute<TQuery>(query);
+
+		const uiapi = (data as Record<string, unknown>)?.["uiapi"] as
+			| Record<string, unknown>
+			| undefined;
+		const aggregate = (uiapi?.["aggregate"] as Record<string, unknown> | undefined)?.[
+			objectName
+		] as { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> } | undefined;
+
+		const edges = aggregate?.edges ?? [];
+		return edges
+			.map((edge) => {
+				const field = edge?.node?.aggregate?.[fieldName] as
+					| { value?: string | null; displayValue?: string | null; label?: string | null }
+					| undefined;
+				const value = field?.value;
+				if (!value) return null;
+				return { value, label: field.label ?? field.displayValue ?? value };
+			})
+			.filter((opt): opt is PicklistOption => opt !== null);
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/features/object-search/breadcrumb/breadcrumb.html

@@ -0,0 +1,34 @@
+<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">
+			<app-icon name="chevronRight" size="14px" class="flex" />
+		</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">
+			<app-icon name="chevronRight" size="14px" class="flex" />
+		</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/feature-angular-object-search/src/app/features/object-search/breadcrumb/breadcrumb.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 { IconComponent } from "../../../components/ui/icon/icon";
+import { SkeletonComponent } from "../../../components/ui/skeleton/skeleton";
+
+/** Object-search breadcrumb — Home > Records list > (optional) Record name. */
+@Component({
+	selector: "app-object-breadcrumb",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink, IconComponent, SkeletonComponent],
+	templateUrl: "./breadcrumb.html",
+})
+export class ObjectBreadcrumbComponent {
+	readonly listPath = input.required<string>();
+	readonly listLabel = input.required<string>();
+	readonly recordName = input<string | undefined>(undefined);
+	readonly loading = input<boolean>(false);
+	readonly includeHome = input<boolean>(true);
+	readonly homeLabel = input<string>("Home");
+
+	protected readonly isDetailView = computed(() => this.loading() || !!this.recordName());
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/features/object-search/filters/active-filters.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/feature-angular-object-search/src/app/features/object-search/filters/active-filters.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";
+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.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/feature-angular-object-search/src/app/features/object-search/filters/date-filter.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>