@salesforce/ui-bundle-template-feature-angular-search 0.0.0-stage → 12.14.0

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/global-search-box/global-search-box.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from "@angular/core";
+import { Router } from "@angular/router";
+import { ButtonComponent } from "../../../../components/ui/button/button";
+import { InputComponent } from "../../../../components/ui/input/input";
+import { MIN_QUERY_LENGTH } from "../../constants";
+import { GLOBAL_QUERY_KEY } from "../../utils/filter-utils";
+
+let nextId = 0;
+
+/**
+ * Launcher: an input + button that navigates to `/search?q=...` once the
+ * trimmed term reaches {@link MIN_QUERY_LENGTH}. The gate, route and query key
+ * are owned here, not by the caller.
+ */
+@Component({
+	selector: "app-global-search-box",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [InputComponent, ButtonComponent],
+	templateUrl: "./global-search-box.html",
+})
+export class GlobalSearchBoxComponent {
+	private readonly router = inject(Router);
+
+	readonly placeholder = input("Search…");
+	/** Accessible name of the input. */
+	readonly label = input("Search");
+	readonly submitLabel = input("Search");
+	/** `{min}` is replaced with {@link MIN_QUERY_LENGTH}. */
+	readonly minLengthHint = input("Enter at least {min} characters to search.");
+
+	protected readonly text = signal("");
+	protected readonly hintId = `global-search-hint-${nextId++}`;
+	protected readonly canSearch = computed(() => this.text().trim().length >= MIN_QUERY_LENGTH);
+	protected readonly hint = computed(() =>
+		this.minLengthHint().replace("{min}", String(MIN_QUERY_LENGTH)),
+	);
+
+	protected submit(event: Event): void {
+		event.preventDefault();
+		if (!this.canSearch()) return;
+		void this.router.navigate(["/search"], {
+			queryParams: { [GLOBAL_QUERY_KEY]: this.text().trim() },
+		});
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/results/default-result-row.html

@@ -0,0 +1,19 @@
+@if (href(); as link) {
+<a
+	[routerLink]="link"
+	class="block hover:bg-accent rounded-md px-3 -mx-3 py-1 transition-colors"
+	[attr.aria-label]="'View: ' + (title() ?? 'result')"
+>
+	<span class="font-medium">{{ title() ?? '—' }}</span>
+	@if (subtitle()) {
+	<p class="text-sm text-muted-foreground">{{ subtitle() }}</p>
+	}
+</a>
+} @else {
+<div class="px-3 -mx-3 py-1">
+	<span class="font-medium">{{ title() ?? '—' }}</span>
+	@if (subtitle()) {
+	<p class="text-sm text-muted-foreground">{{ subtitle() }}</p>
+	}
+</div>
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/results/default-result-row.ts

@@ -0,0 +1,91 @@
+/**
+ * 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 type { DisplayField, SourceConfig } from "../../types/search-config.types";
+import { fieldValue } from "../../utils/field-utils";
+
+const ROUTE_TOKEN = /:([A-Za-z_][A-Za-z0-9_]*)/g;
+
+function fieldName(f: DisplayField): string {
+	return typeof f === "string" ? f : f.name;
+}
+
+/** Resolves a single dot-path against a node, returning a string or null. */
+function readPath(node: unknown, path: string): string | null {
+	if (!node || typeof node !== "object") return null;
+	const parts = path.split(".");
+	let cursor: unknown = node;
+	for (let i = 0; i < parts.length - 1; i++) {
+		if (!cursor || typeof cursor !== "object") return null;
+		cursor = (cursor as Record<string, unknown>)[parts[i]];
+	}
+	const leaf = (cursor as Record<string, unknown> | null)?.[parts[parts.length - 1]];
+	if (leaf == null) return null;
+	if (typeof leaf === "object") {
+		return fieldValue(leaf as { value?: unknown; displayValue?: string | null });
+	}
+	return String(leaf);
+}
+
+/** Reads the user-facing string for a top-level display field. */
+function readDisplayField(node: unknown, field: DisplayField): string | null {
+	if (typeof field === "string") return readPath(node, field);
+	if ("raw" in field) return readPath(node, field.name);
+	// Relationship: prefer the first scalar subfield's display value.
+	const sub = field.subfields[0];
+	if (!sub) return null;
+	return readPath(node, `${field.name}.${fieldName(sub)}`);
+}
+
+/** Substitutes `:fieldName` tokens in `pattern` with node values (`:id` = the id field). */
+function resolveRoute(pattern: string, node: unknown, idField: string): string | null {
+	let failed = false;
+	const out = pattern.replace(ROUTE_TOKEN, (_, token: string) => {
+		const value = readPath(node, token === "id" ? idField : token);
+		if (value == null) {
+			failed = true;
+			return "";
+		}
+		return encodeURIComponent(value);
+	});
+	return failed ? null : out;
+}
+
+/**
+ * Default row used when no `appSearchResult` template is supplied for a source.
+ *
+ * Title is the first `displayFields` entry, the subtitle the rest joined with
+ * " · ". With a `routePattern` the row links to the resolved route.
+ */
+@Component({
+	selector: "app-default-result-row",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink],
+	templateUrl: "./default-result-row.html",
+})
+export class DefaultResultRowComponent {
+	readonly node = input.required<unknown>();
+	readonly source = input.required<SourceConfig>();
+
+	protected readonly title = computed(() => {
+		const first = this.source().displayFields[0];
+		return first ? readDisplayField(this.node(), first) : null;
+	});
+
+	protected readonly subtitle = computed(() =>
+		this.source()
+			.displayFields.slice(1)
+			.map((f) => readDisplayField(this.node(), f))
+			.filter((s): s is string => s != null && s !== "")
+			.join(" · "),
+	);
+
+	protected readonly href = computed(() => {
+		const pattern = this.source().routePattern;
+		return pattern ? resolveRoute(pattern, this.node(), this.source().idField ?? "Id") : null;
+	});
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/results/merged-search-results.html

@@ -0,0 +1,99 @@
+<div class="space-y-6">
+	<p class="sr-only" role="status" aria-live="polite">{{ liveMessage() }}</p>
+
+	@if (soleSource(); as sole) {
+	<div class="flex flex-col gap-4">
+		<app-filter-box [source]="sole.config" />
+		@if ((sole.config.sortBy?.length ?? 0) > 0 || sole.filters.length > 0) {
+		<div class="flex flex-wrap items-center gap-2">
+			@if ((sole.config.sortBy?.length ?? 0) > 0) {
+			<app-sort-control
+				[options]="sole.config.sortBy ?? []"
+				[sort]="sole.sort ?? undefined"
+				(sortChange)="onSort(sole, $event)"
+			/>
+			} @if (sole.filters.length > 0) {
+			<app-active-filters
+				[filters]="sole.filters"
+				[configs]="sole.config.filterBy ?? []"
+				(removeFilter)="state.removeFilter(sole.config.key, $event)"
+				(clearAll)="state.clearFilters(sole.config.key)"
+			/>
+			}
+		</div>
+		}
+	</div>
+	}
+
+	<!-- Page-level error: every in-scope source failed, or a whole-request failure. -->
+	@if (error(); as message) {
+	<app-alert
+		role="alert"
+		variant="destructive"
+		icon="error"
+		title="Search failed"
+		[description]="message"
+	/>
+	}
+
+	<!-- A source that failed while a sibling succeeded does not blank the shared grid. -->
+	@for (failed of failedSources(); track failed.config.key) {
+	<app-alert
+		role="alert"
+		variant="destructive"
+		icon="error"
+		[title]="'Failed to load ' + failed.config.label"
+		[description]="failed.error ?? ''"
+	/>
+	} @if (!loading() && !error() && page().totalCount > 0) {
+	<p class="text-sm text-muted-foreground">
+		{{ page().totalCount }} {{ page().totalCount === 1 ? 'result' : 'results' }}
+	</p>
+	}
+
+	<div #region tabindex="-1" class="outline-none" [attr.aria-busy]="loading()">
+		@if (loading()) {
+		<div [class]="gridClass()">
+			@for (n of skeletons(); track n) {
+			<app-skeleton class="block h-48 w-full rounded-lg" />
+			}
+		</div>
+		} @else if (!error()) { @if (state.isShortQuery()) {
+		<p class="py-12 text-center text-sm text-muted-foreground">{{ shortQueryMessage() }}</p>
+		} @else if (isEmpty()) {
+		<p class="py-12 text-center text-sm text-muted-foreground">{{ emptyText() }}</p>
+		} @else {
+		<ul role="list" [class]="gridClass()">
+			@for (item of items(); track key(item, $index)) {
+			<li class="flex flex-col gap-1.5">
+				@if (showBadges()) {
+				<span
+					class="w-fit rounded-full px-2.5 py-0.5 text-xs font-medium"
+					[class]="badgeColor(item.sourceKey)"
+				>
+					{{ item.source.labelSingular ?? item.source.label }}
+				</span>
+				}
+				<app-result-item
+					class="min-h-0 flex-1"
+					[node]="item.node"
+					[source]="item.source"
+					[templates]="templates()"
+				/>
+			</li>
+			}
+		</ul>
+		} }
+	</div>
+
+	@if (page().totalCount > 0) {
+	<app-paginator
+		[length]="page().totalCount"
+		[pageIndex]="page().pageIndex"
+		[pageSize]="page().pageSize"
+		[pageSizeOptions]="state.pagination().pageSizeOptions"
+		[disabled]="loading() || !!error()"
+		(page)="onPage($event)"
+	/>
+	}
+</div>

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/results/merged-search-results.ts

@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	ElementRef,
+	inject,
+	input,
+	viewChild,
+} from "@angular/core";
+import { AlertComponent } from "../../../../components/ui/alert/alert";
+import {
+	PaginatorComponent,
+	type PageEvent,
+} from "../../../../components/ui/paginator/paginator";
+import { SkeletonComponent } from "../../../../components/ui/skeleton/skeleton";
+import { ActiveFiltersComponent } from "../active-filters/active-filters";
+import { FilterBoxComponent } from "../filter-panel/filter-box";
+import { SortControlComponent } from "../sort-control/sort-control";
+import { SearchStateService } from "../../state/search-state.service";
+import type { SourceView } from "../../state/search-state.types";
+import { ALL_SCOPE } from "../../types/scope.types";
+import type { MergedResultItem } from "../../types/search-result.types";
+import type { SortState } from "../../types/sort.types";
+import { ResultItemComponent, type ResultTemplates } from "./result-item";
+
+/**
+ * Badge colors for the mixed grid. A source's color is its position among the
+ * in-scope sources, wrapped around the palette, so badges stay stable and
+ * distinct with no per-source configuration.
+ */
+const BADGE_PALETTE = [
+	"bg-blue-100 text-blue-700",
+	"bg-amber-100 text-amber-700",
+	"bg-purple-100 text-purple-700",
+	"bg-pink-100 text-pink-700",
+	"bg-emerald-100 text-emerald-700",
+	"bg-sky-100 text-sky-700",
+] as const;
+
+/**
+ * Single combined grid across every in-scope source, driven by one global pager
+ * over the cumulative result set (the layout for `pagination.mode: "merged"`).
+ *
+ * Top to bottom: the single-source filter chrome (only when the scope is
+ * narrowed to one source), a live results count, the grid, the global pager.
+ * With 2+ sources in scope each card gets a colored source badge.
+ */
+@Component({
+	selector: "app-merged-search-results",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		AlertComponent,
+		SkeletonComponent,
+		ActiveFiltersComponent,
+		FilterBoxComponent,
+		PaginatorComponent,
+		SortControlComponent,
+		ResultItemComponent,
+	],
+	templateUrl: "./merged-search-results.html",
+})
+export class MergedSearchResultsComponent {
+	protected readonly state = inject(SearchStateService);
+
+	readonly templates = input<ResultTemplates | undefined>(undefined);
+	/** Message shown when there are no results. */
+	readonly emptyMessage = input<string | undefined>(undefined);
+	readonly shortQueryMessage = input("Start your search…");
+	/** Classes on the grid container (default: responsive 1/2/3 columns). */
+	readonly gridClass = input("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3");
+
+	private readonly region = viewChild<ElementRef<HTMLElement>>("region");
+
+	protected readonly page = this.state.globalPagination;
+	protected readonly loading = this.state.loading;
+	protected readonly error = this.state.error;
+
+	/** Set when the scope is narrowed to one source: its chrome is shown. */
+	protected readonly soleSource = computed<SourceView | undefined>(() =>
+		this.state.scope() === ALL_SCOPE ? undefined : this.state.inScopeSources()[0],
+	);
+	protected readonly showBadges = computed(() => this.state.scope() === ALL_SCOPE);
+
+	private readonly badgeColors = computed(() => {
+		const colors: Record<string, string> = {};
+		this.state.inScopeSources().forEach((v, i) => {
+			colors[v.config.key] = BADGE_PALETTE[i % BADGE_PALETTE.length];
+		});
+		return colors;
+	});
+
+	protected readonly items = computed(() =>
+		this.state.mergedResults().flatMap((item) => {
+			const view = this.state.sources()[item.sourceKey];
+			return view ? [{ ...item, source: view.config }] : [];
+		}),
+	);
+
+	protected readonly failedSources = computed(() =>
+		this.error() ? [] : this.state.inScopeSources().filter((v) => !!v.error),
+	);
+	protected readonly skeletons = computed(() =>
+		Array.from({ length: Math.min(this.page().pageSize, 6) }, (_, i) => i),
+	);
+	protected readonly isEmpty = computed(() => this.items().length === 0);
+	protected readonly emptyText = computed(() => this.emptyMessage() ?? "No results found.");
+
+	protected readonly liveMessage = computed(() => {
+		const total = this.page().totalCount;
+		if (this.loading()) return "Searching…";
+		if (this.error()) return "Search failed.";
+		if (this.state.isShortQuery()) return this.shortQueryMessage();
+		if (this.isEmpty()) return this.emptyText();
+		return `${total} result${total === 1 ? "" : "s"}`;
+	});
+
+	protected badgeColor(sourceKey: string): string {
+		return this.badgeColors()[sourceKey] ?? BADGE_PALETTE[0];
+	}
+
+	protected key(item: MergedResultItem, index: number): string {
+		const id =
+			item.node && typeof item.node === "object" ? (item.node as { Id?: unknown }).Id : undefined;
+		return typeof id === "string" ? `${item.sourceKey}:${id}` : `${item.sourceKey}:${index}`;
+	}
+
+	protected onSort(view: SourceView, sort: SortState | undefined): void {
+		this.state.setSort(view.config.key, sort ?? null);
+	}
+
+	protected onPage(event: PageEvent): void {
+		if (event.pageSize !== this.page().pageSize) {
+			this.state.setPageSize(event.pageSize);
+		} else {
+			this.state.goToPage(event.pageIndex);
+		}
+		// Land screen-reader users on the new page.
+		this.region()?.nativeElement.focus();
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/results/result-item.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { NgTemplateOutlet } from "@angular/common";
+import {
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	input,
+	type TemplateRef,
+} from "@angular/core";
+import type { SearchResultContext } from "../../directives/search-result-template/search-result-template";
+import type { SourceConfig } from "../../types/search-config.types";
+import { DefaultResultRowComponent } from "./default-result-row";
+
+/** Source key -> the `appSearchResult` template that renders its nodes. */
+export type ResultTemplates = ReadonlyMap<string, TemplateRef<SearchResultContext>>;
+
+/** One result node: the source's `appSearchResult` template, else the default row. */
+@Component({
+	selector: "app-result-item",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgTemplateOutlet, DefaultResultRowComponent],
+	template: `
+		@if (template(); as tpl) {
+			<ng-container *ngTemplateOutlet="tpl; context: { $implicit: node(), source: source() }" />
+		} @else {
+			<app-default-result-row [node]="node()" [source]="source()" />
+		}
+	`,
+})
+export class ResultItemComponent {
+	readonly node = input.required<unknown>();
+	readonly source = input.required<SourceConfig>();
+	readonly templates = input<ResultTemplates | undefined>(undefined);
+
+	protected readonly template = computed(() => this.templates()?.get(this.source().key));
+}
+
+/** Stable `@for` key for a node: its id when present, else its position. */
+export function nodeKey(
+	node: unknown,
+	idField: string | undefined,
+	fallback: number,
+): string | number {
+	if (node && typeof node === "object") {
+		const id = (node as Record<string, unknown>)[idField ?? "Id"];
+		if (typeof id === "string" || typeof id === "number") return id;
+	}
+	return fallback;
+}

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

@@ -0,0 +1,10 @@
+<div class="space-y-10">
+	@for (view of state.inScopeSources(); track view.config.key) {
+	<app-source-section
+		[source]="view.config"
+		[templates]="templates()"
+		[hideFilterChrome]="filtersHidden()"
+		[emptyMessage]="emptyMessages()[view.config.key]"
+	/>
+	}
+</div>

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/results/search-results.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { SearchStateService } from "../../state/search-state.service";
+import { ALL_SCOPE } from "../../types/scope.types";
+import type { ResultTemplates } from "./result-item";
+import { SourceSectionComponent } from "./source-section";
+
+/**
+ * One {@link SourceSectionComponent} per in-scope source, in config order.
+ *
+ * Filter chrome (box, sort, chips) is hidden under the "All" scope: per-source
+ * controls would be unreachable with every source on screen. Selections stay in
+ * state, so narrowing the scope brings them back unchanged.
+ */
+@Component({
+	selector: "app-search-results",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [SourceSectionComponent],
+	templateUrl: "./search-results.html",
+})
+export class SearchResultsComponent {
+	protected readonly state = inject(SearchStateService);
+
+	readonly templates = input<ResultTemplates | undefined>(undefined);
+	/** Per source key: message shown when that source has no results. */
+	readonly emptyMessages = input<Readonly<Record<string, string>>>({});
+
+	protected readonly filtersHidden = computed(() => this.state.scope() === ALL_SCOPE);
+}

package/dist/force-app/main/default/uiBundles/feature-angular-search/src/app/features/search/components/results/source-section.html

@@ -0,0 +1,84 @@
+@if (view(); as v) {
+<section class="flex flex-col gap-6">
+	<p class="sr-only" role="status" aria-live="polite">{{ liveMessage() }}</p>
+
+	@if (showFilters()) {
+	<app-filter-box [source]="source()" />
+	}
+
+	<div class="min-w-0">
+		<header class="flex flex-wrap items-baseline gap-3 mb-3">
+			<h2 class="text-lg font-semibold">{{ source().label }}</h2>
+		</header>
+
+		@if (showSort() || showChips()) {
+		<div class="flex flex-wrap items-center gap-2 mb-3">
+			@if (showSort()) {
+			<app-sort-control
+				[options]="source().sortBy ?? []"
+				[sort]="v.sort ?? undefined"
+				(sortChange)="onSort($event)"
+			/>
+			} @if (showChips()) {
+			<app-active-filters
+				[filters]="v.filters"
+				[configs]="source().filterBy ?? []"
+				(removeFilter)="state.removeFilter(source().key, $event)"
+				(clearAll)="state.clearFilters(source().key)"
+			/>
+			}
+		</div>
+		} @if (!loading() && !error() && hasTotal()) {
+		<p class="text-sm text-muted-foreground mb-3">
+			{{ totalCount() }} {{ totalCount() === 1 ? 'result' : 'results' }}
+		</p>
+		}
+
+		<div #region tabindex="-1" class="min-h-32 outline-none" [attr.aria-busy]="loading()">
+			@if (loading()) {
+			<div class="space-y-2">
+				@for (row of skeletonRows(); track row) {
+				<app-skeleton class="block h-12 w-full" />
+				}
+			</div>
+			} @if (error(); as message) {
+			<app-alert
+				role="alert"
+				variant="destructive"
+				icon="error"
+				[title]="'Failed to load ' + source().label"
+				[description]="message"
+			/>
+			} @if (showResults()) {
+			<ul class="divide-y" role="list">
+				@for (node of nodes(); track key(node, $index)) {
+				<li class="py-3">
+					<app-result-item [node]="node" [source]="source()" [templates]="templates()" />
+				</li>
+				}
+			</ul>
+			} @if (showEmpty()) {
+			<div class="flex flex-col items-center justify-center py-10 text-center">
+				<app-icon
+					[name]="state.isShortQuery() ? 'search' : 'noResults'"
+					size="2.5rem"
+					class="text-muted-foreground mb-3"
+				/>
+				<p class="text-sm text-muted-foreground">
+					{{ state.isShortQuery() ? shortQueryMessage() : emptyText() }}
+				</p>
+			</div>
+			}
+		</div>
+
+		<app-paginator
+			[length]="pagerLength()"
+			[pageIndex]="v.pageIndex"
+			[pageSize]="v.pageSize"
+			[pageSizeOptions]="state.pagination().pageSizeOptions"
+			[disabled]="loading() || !!error()"
+			(page)="onPage($event)"
+		/>
+	</div>
+</section>
+}