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

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/pages/account-detail/account-detail-page.ts

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { map } from "rxjs/operators";
+import { AlertComponent } from "../../components/ui/alert/alert";
+import { IconComponent } from "../../components/ui/icon/icon";
+import { ButtonComponent } from "../../components/ui/button/button";
+import { CardComponent, CardContentComponent } from "../../components/ui/card/card";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
+import { SeparatorComponent } from "../../components/ui/separator/separator";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
+import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
+import { createAsyncData } from "../../utils/async-data";
+import {
+	fieldValue,
+	getAddressFieldLines,
+	formatDateTimeField,
+} from "../../features/object-search/utils/field-utils";
+import { AccountSearchService } from "../../api/account/account-search.service";
+
+const DATE_TIME_OPTIONS: Intl.DateTimeFormatOptions = {
+	dateStyle: "medium",
+	timeStyle: "short",
+};
+
+interface Field {
+	label: string;
+	value: string | null;
+	/** `true` renders the value as a `tel:` link (Phone / Fax). */
+	telephone?: boolean;
+}
+
+@Component({
+	selector: "app-account-detail-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		AlertComponent,
+		IconComponent,
+		ButtonComponent,
+		CardComponent,
+		CardContentComponent,
+		CollapsibleComponent,
+		SeparatorComponent,
+		SkeletonComponent,
+		ObjectBreadcrumbComponent,
+	],
+	templateUrl: "./account-detail-page.html",
+})
+export class AccountDetailPageComponent {
+	private readonly service = inject(AccountSearchService);
+	private readonly route = inject(ActivatedRoute);
+	private readonly router = inject(Router);
+
+	// Reactive param so a client-side nav between two detail routes refetches.
+	private readonly recordId = toSignal(
+		this.route.paramMap.pipe(map((p) => p.get("recordId") ?? "")),
+		{ initialValue: this.route.snapshot.paramMap.get("recordId") ?? "" },
+	);
+
+	private readonly result = createAsyncData(this.recordId, (id) =>
+		this.service.getAccountDetail(id),
+	);
+
+	protected readonly account = this.result.data;
+	protected readonly loading = this.result.loading;
+	protected readonly error = this.result.error;
+	protected readonly notFound = computed(() => !this.loading() && !this.error() && !this.account());
+
+	protected readonly additionalOpen = signal<boolean>(true);
+	protected readonly addressOpen = signal<boolean>(true);
+	protected readonly systemOpen = signal<boolean>(true);
+
+	protected readonly skeletonRows = [0, 1, 2];
+
+	// -- Breadcrumb leaf label -------------------------------------------------
+	protected readonly recordName = computed<string | undefined>(() => {
+		const a = this.account();
+		if (a) return fieldValue(a.Name) ?? "";
+		if (this.error()) return "Error";
+		if (this.loading()) return undefined;
+		return "Not Found";
+	});
+
+	// -- Header ----------------------------------------------------------------
+	protected readonly title = computed(() => fieldValue(this.account()?.Name ?? null) ?? "");
+
+	// -- Top field rows --------------------------------------------------------
+	protected readonly topRows = computed<Field[][]>(() => {
+		const a = this.account();
+		if (!a) return [];
+		return [
+			[
+				{ label: "Account Owner", value: fieldValue(a.Owner?.Name) },
+				{ label: "Phone", value: fieldValue(a.Phone), telephone: true },
+			],
+			[
+				{ label: "Account Name", value: fieldValue(a.Name) },
+				{ label: "Fax", value: fieldValue(a.Fax), telephone: true },
+			],
+			[
+				{ label: "Parent Account", value: fieldValue(a.Parent?.Name) },
+				{ label: "Website", value: fieldValue(a.Website) },
+			],
+		];
+	});
+
+	// -- Additional Information ------------------------------------------------
+	protected readonly additionalRows = computed<Field[][]>(() => {
+		const a = this.account();
+		if (!a) return [];
+		return [
+			[
+				{ label: "Type", value: fieldValue(a.Type) },
+				{ label: "Employees", value: fieldValue(a.NumberOfEmployees) },
+			],
+			[
+				{ label: "Industry", value: fieldValue(a.Industry) },
+				{ label: "Annual Revenue", value: fieldValue(a.AnnualRevenue) },
+			],
+		];
+	});
+	protected readonly description = computed(() => fieldValue(this.account()?.Description ?? null));
+
+	// -- Address Information ---------------------------------------------------
+	protected readonly billingAddress = computed<string[] | null>(() => {
+		const a = this.account();
+		if (!a) return null;
+		return getAddressFieldLines({
+			street: fieldValue(a.BillingStreet),
+			city: fieldValue(a.BillingCity),
+			state: fieldValue(a.BillingState),
+			postalCode: fieldValue(a.BillingPostalCode),
+			country: fieldValue(a.BillingCountry),
+		});
+	});
+	protected readonly shippingAddress = computed<string[] | null>(() => {
+		const a = this.account();
+		if (!a) return null;
+		return getAddressFieldLines({
+			street: fieldValue(a.ShippingStreet),
+			city: fieldValue(a.ShippingCity),
+			state: fieldValue(a.ShippingState),
+			postalCode: fieldValue(a.ShippingPostalCode),
+			country: fieldValue(a.ShippingCountry),
+		});
+	});
+
+	// -- System Information ----------------------------------------------------
+	protected readonly createdBy = computed(() =>
+		this.joinNameAndDate(this.account()?.CreatedBy?.Name, this.account()?.CreatedDate),
+	);
+	protected readonly lastModifiedBy = computed(() =>
+		this.joinNameAndDate(this.account()?.LastModifiedBy?.Name, this.account()?.LastModifiedDate),
+	);
+
+	private joinNameAndDate(
+		name: { value?: unknown; displayValue?: string | null } | null | undefined,
+		date: { value?: unknown; displayValue?: string | null } | null | undefined,
+	): string | null {
+		const formatted = formatDateTimeField(fieldValue(date ?? null), undefined, DATE_TIME_OPTIONS);
+		return [fieldValue(name ?? null), formatted].filter(Boolean).join(" ") || null;
+	}
+
+	protected goBack(): void {
+		void this.router.navigate(["/accounts"]);
+	}
+
+	protected reload(): void {
+		window.location.reload();
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/pages/account-search/account-search-page.html

@@ -0,0 +1,93 @@
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+	<app-object-breadcrumb listPath="/accounts" listLabel="Accounts" />
+
+	<h1 class="text-2xl font-bold mb-4">Search Accounts</h1>
+
+	<div class="flex flex-col lg:flex-row gap-6">
+		<aside class="w-full lg:w-80 shrink-0">
+			<app-collapsible title="Filters" [(open)]="filtersOpen">
+				<div class="space-y-1">
+					<app-search-filter [config]="searchConfig" />
+					<app-text-filter [config]="nameConfig" />
+					<app-select-filter [config]="industryConfig()" />
+					<app-multi-select-filter [config]="typeConfig()" />
+					<app-numeric-range-filter [config]="revenueConfig" />
+					<app-date-filter [config]="createdConfig" filterType="datetime" />
+					<app-date-range-filter [config]="lastModifiedConfig" filterType="datetimerange" />
+				</div>
+			</app-collapsible>
+		</aside>
+
+		<div class="flex-1 min-w-0">
+			<div class="flex flex-wrap items-center gap-2 mb-4">
+				<app-sort-control [sortFields]="sortConfigs" />
+				<app-active-filters />
+			</div>
+
+			<div class="min-h-132" [attr.aria-busy]="loading()">
+				@if (loading()) {
+				<app-skeleton class="h-5 w-30 mb-3" />
+				<div class="divide-y">
+					@for (row of skeletonRows(); track row) {
+					<div class="flex items-center justify-between py-3">
+						<div class="space-y-2">
+							<app-skeleton class="h-5 w-40" />
+							<app-skeleton class="h-4 w-28" />
+						</div>
+						<div class="space-y-2 flex flex-col items-end">
+							<app-skeleton class="h-4 w-24" />
+							<app-skeleton class="h-4 w-20" />
+						</div>
+					</div>
+					}
+				</div>
+				} @else if (error()) {
+				<p class="text-sm text-muted-foreground mb-3">0 accounts found</p>
+				<app-alert
+					variant="destructive"
+					icon="error"
+					title="Failed to load accounts"
+					description="Something went wrong while loading accounts. Please try again later."
+				/>
+				} @else if (nodes().length > 0) {
+				<p class="text-sm text-muted-foreground mb-3">{{ resultCountLabel() }}</p>
+				<ul class="divide-y">
+					@for (node of nodes(); track node.Id) {
+					<li>
+						<a
+							[routerLink]="['/accounts', node.Id]"
+							class="flex items-center justify-between py-3 px-3 -mx-3 rounded-md transition-colors hover:bg-accent"
+						>
+							<div>
+								<span class="font-medium">{{ name(node) }}</span>
+								<p class="text-sm text-muted-foreground">{{ secondaryLine(node) }}</p>
+							</div>
+							<div class="text-right text-sm">
+								<p>{{ phone(node) }}</p>
+								<p class="text-muted-foreground">{{ ownerName(node) }}</p>
+							</div>
+						</a>
+					</li>
+					}
+				</ul>
+				} @else {
+				<div class="flex flex-col items-center justify-center py-16 text-center">
+					<app-icon name="noResults" size="3rem" class="text-muted-foreground mb-4" />
+					<h2 class="text-lg font-semibold mb-1">No accounts found</h2>
+					<p class="text-sm text-muted-foreground">
+						Try adjusting your filters or search criteria.
+					</p>
+				</div>
+				}
+			</div>
+
+			<app-pagination-controls
+				[totalCount]="totalCount()"
+				[hasNextPage]="hasNextPage()"
+				[endCursor]="endCursor()"
+				[pageSizeOptions]="pageSizeOptions"
+				[disabled]="controlsDisabled()"
+			/>
+		</div>
+	</div>
+</div>

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/pages/account-search/account-search-page.ts

@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { AlertComponent } from "../../components/ui/alert/alert";
+import { IconComponent } from "../../components/ui/icon/icon";
+import { CollapsibleComponent } from "../../components/ui/collapsible/collapsible";
+import { SkeletonComponent } from "../../components/ui/skeleton/skeleton";
+import { ObjectBreadcrumbComponent } from "../../features/object-search/breadcrumb/breadcrumb";
+import { SortControlComponent } from "../../features/object-search/sort-control/sort-control";
+import { ActiveFiltersComponent } from "../../features/object-search/filters/active-filters";
+import { PaginationControlsComponent } from "../../features/object-search/pagination/pagination";
+import { SearchFilterComponent } from "../../features/object-search/filters/search-filter";
+import { TextFilterComponent } from "../../features/object-search/filters/text-filter";
+import { SelectFilterComponent } from "../../features/object-search/filters/select-filter";
+import { MultiSelectFilterComponent } from "../../features/object-search/filters/multi-select-filter";
+import { NumericRangeFilterComponent } from "../../features/object-search/filters/numeric-range-filter";
+import { DateFilterComponent } from "../../features/object-search/filters/date-filter";
+import { DateRangeFilterComponent } from "../../features/object-search/filters/date-range-filter";
+import {
+	ObjectSearchStateService,
+	type PaginationConfig,
+} from "../../features/object-search/object-search-state.service";
+import { createAsyncData } from "../../utils/async-data";
+import { fieldValue } from "../../features/object-search/utils/field-utils";
+import type { FilterFieldConfig } from "../../features/object-search/utils/filter-utils";
+import type { SortFieldConfig } from "../../features/object-search/utils/sort-utils";
+import {
+	AccountSearchService,
+	type AccountSearchNode,
+	type AccountSearchOptions,
+} from "../../api/account/account-search.service";
+
+const PAGINATION_CONFIG: PaginationConfig = {
+	defaultPageSize: 7,
+	validPageSizes: [7, 14, 28, 42],
+};
+
+// Single source of truth for URL (de)serialization and GraphQL `where`
+// building. Picklist options for Industry / Type are filled in at runtime
+// (see the component's computed configs) from the distinct-value queries.
+const FILTER_CONFIGS: FilterFieldConfig[] = [
+	{
+		field: "search",
+		label: "Search",
+		type: "search",
+		searchFields: ["Name", "Phone", "Industry"],
+		placeholder: "Search by name, phone, or industry...",
+	},
+	{ field: "Name", label: "Account Name", type: "text", placeholder: "Search by name..." },
+	{ field: "Industry", label: "Industry", type: "picklist" },
+	{ field: "Type", label: "Type", type: "multipicklist" },
+	{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
+	{ field: "CreatedDate", label: "Created Date", type: "datetime", disableFuture: true },
+	{
+		field: "LastModifiedDate",
+		label: "Last Modified Date",
+		type: "datetimerange",
+		disableFuture: true,
+	},
+];
+
+const ACCOUNT_SORT_CONFIGS: SortFieldConfig[] = [
+	{ field: "Name", label: "Name" },
+	{ field: "AnnualRevenue", label: "Annual Revenue" },
+	{ field: "Industry", label: "Industry" },
+	{ field: "CreatedDate", label: "Created Date" },
+];
+
+// State lives in a page-scoped ObjectSearchStateService (provided here, NOT
+// in root) so each search page owns its own filters / sort / cursor stack;
+// the filter components projected into the sidebar inject that same instance.
+@Component({
+	selector: "app-account-search-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	providers: [ObjectSearchStateService],
+	imports: [
+		RouterLink,
+		AlertComponent,
+		IconComponent,
+		CollapsibleComponent,
+		SkeletonComponent,
+		ObjectBreadcrumbComponent,
+		SortControlComponent,
+		ActiveFiltersComponent,
+		PaginationControlsComponent,
+		SearchFilterComponent,
+		TextFilterComponent,
+		SelectFilterComponent,
+		MultiSelectFilterComponent,
+		NumericRangeFilterComponent,
+		DateFilterComponent,
+		DateRangeFilterComponent,
+	],
+	templateUrl: "./account-search-page.html",
+})
+export class AccountSearchPageComponent {
+	private readonly service = inject(AccountSearchService);
+	private readonly state = inject(ObjectSearchStateService);
+
+	protected readonly sortConfigs = ACCOUNT_SORT_CONFIGS;
+	protected readonly pageSizeOptions = PAGINATION_CONFIG.validPageSizes;
+
+	protected readonly filtersOpen = signal<boolean>(true);
+
+	private readonly query = this.state.init<
+		AccountSearchOptions["where"],
+		AccountSearchOptions["orderBy"]
+	>(FILTER_CONFIGS, PAGINATION_CONFIG);
+
+	protected readonly pageSize = this.state.pageSize;
+	protected readonly hasPreviousPage = this.state.hasPreviousPage;
+
+	// -- Distinct-value option loads (Industry / Type filters) -----------------
+	private readonly industries = createAsyncData(signal(0), () =>
+		this.service.fetchDistinctIndustries(),
+	);
+	private readonly types = createAsyncData(signal(0), () => this.service.fetchDistinctTypes());
+
+	// -- Per-filter configs (options merged in for the picklist filters) -------
+	protected readonly searchConfig = FILTER_CONFIGS[0];
+	protected readonly nameConfig = FILTER_CONFIGS[1];
+	protected readonly revenueConfig = FILTER_CONFIGS[4];
+	protected readonly createdConfig = FILTER_CONFIGS[5];
+	protected readonly lastModifiedConfig = FILTER_CONFIGS[6];
+	protected readonly industryConfig = computed<FilterFieldConfig>(() => ({
+		...FILTER_CONFIGS[2],
+		options: this.industries.data() ?? [],
+	}));
+	protected readonly typeConfig = computed<FilterFieldConfig>(() => ({
+		...FILTER_CONFIGS[3],
+		options: this.types.data() ?? [],
+	}));
+
+	// -- Search results --------------------------------------------------------
+	private readonly searchArgs = computed(() => ({
+		where: this.query.where(),
+		orderBy: this.query.orderBy(),
+		first: this.state.pageSize(),
+		after: this.state.afterCursor(),
+	}));
+	private readonly result = createAsyncData(this.searchArgs, (args) =>
+		this.service.searchAccounts(args),
+	);
+
+	protected readonly loading = this.result.loading;
+	protected readonly error = this.result.error;
+
+	private readonly pageInfo = computed(() => this.result.data()?.pageInfo);
+	protected readonly totalCount = computed(() => this.result.data()?.totalCount);
+	protected readonly hasNextPage = computed(() => this.pageInfo()?.hasNextPage ?? false);
+	protected readonly endCursor = computed(() => this.pageInfo()?.endCursor ?? undefined);
+
+	protected readonly nodes = computed<AccountSearchNode[]>(() => {
+		const edges = this.result.data()?.edges ?? [];
+		const out: AccountSearchNode[] = [];
+		for (const edge of edges) {
+			if (edge?.node) out.push(edge.node);
+		}
+		return out;
+	});
+
+	protected readonly controlsDisabled = computed(() => this.loading() || !!this.error());
+
+	protected readonly skeletonRows = computed(() =>
+		Array.from({ length: this.pageSize() }, (_, i) => i),
+	);
+
+	protected readonly resultCountLabel = computed(() => {
+		const total = this.totalCount();
+		const shown = this.nodes().length;
+		if (total != null && (this.hasNextPage() || this.hasPreviousPage())) {
+			return `${total} account${total !== 1 ? "s" : ""} found`;
+		}
+		return `Showing ${shown} account${shown !== 1 ? "s" : ""}`;
+	});
+
+	protected name(node: AccountSearchNode): string {
+		return fieldValue(node.Name) ?? "—";
+	}
+
+	protected secondaryLine(node: AccountSearchNode): string {
+		return [fieldValue(node.Industry), fieldValue(node.Type)].filter(Boolean).join(" · ") || "—";
+	}
+
+	protected phone(node: AccountSearchNode): string {
+		return fieldValue(node.Phone) ?? "";
+	}
+
+	protected ownerName(node: AccountSearchNode): string {
+		return fieldValue(node.Owner?.Name) ?? "";
+	}
+}

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

@@ -0,0 +1,17 @@
+<main class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="flex items-center gap-6 mb-6">
+		<h1 class="text-2xl font-bold">Account Search</h1>
+		<app-button appearance="outlined" size="sm" (clicked)="browseAll()"
+			>Browse All Accounts</app-button
+		>
+	</div>
+	<form class="flex gap-2 items-end" (submit)="onSubmit($event)">
+		<app-search-bar
+			class="flex-1"
+			placeholder="Search by name, phone, or industry..."
+			ariaLabel="Search accounts"
+			[(value)]="term"
+		/>
+		<app-button type="submit" [disabled]="!canSearch()">Search</app-button>
+	</form>
+</main>

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/pages/home/home.spec.ts

@@ -0,0 +1,25 @@
+import { TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { HomeComponent } from "./home";
+
+describe("HomeComponent", () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [HomeComponent],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it("should create the component", () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it("should render main landmark", async () => {
+		const fixture = TestBed.createComponent(HomeComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector("main")).toBeTruthy();
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/pages/home/home.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from "@angular/core";
+import { Router } from "@angular/router";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/{button,input}/..., three levels
+// up from this page folder (app/pages/home/ -> app/components/ui/).
+import { ButtonComponent } from "../../components/ui/button/button";
+import { SearchBarComponent } from "../../features/object-search/search-bar/search-bar";
+
+/**
+ * Account-search landing page. Mirrors the React `Home` page: a single search
+ * box plus a "Browse All Accounts" shortcut. Submitting navigates to the
+ * `accounts` list, carrying the typed term as the `q` query param so the search
+ * page's {@link ObjectSearchStateService} seeds the multi-field search filter.
+ *
+ * Named `HomeComponent` (selector `app-home`) so it overwrites the base app's
+ * placeholder home at compose, leaving the composed app with a single `home`
+ * component.
+ *
+ * Uses the presentational `app-search-bar` (icon + input) with its own local
+ * `term` signal and submit-to-navigate flow — Home has no shared search state;
+ * it just seeds `?q=` and routes into the search page.
+ */
+@Component({
+	selector: "app-home",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent, SearchBarComponent],
+	templateUrl: "./home.html",
+})
+export class HomeComponent {
+	private readonly router = inject(Router);
+
+	/** Minimum characters required before a search can be submitted. */
+	private static readonly MIN_SEARCH_LENGTH = 3;
+
+	/** Bound to the search input; forwarded as `?q=` on submit. */
+	protected readonly term = signal<string>("");
+
+	/** True once the trimmed term meets the minimum length — gates the Search button. */
+	protected readonly canSearch = computed(
+		() => this.term().trim().length >= HomeComponent.MIN_SEARCH_LENGTH,
+	);
+
+	/**
+	 * Navigate to the search page, seeding the search term. No-op unless the
+	 * trimmed term meets the minimum length (covers both the button click and the
+	 * Enter/submit path).
+	 */
+	protected onSubmit(event: Event): void {
+		event.preventDefault();
+		if (!this.canSearch()) return;
+		this.browseAll(this.term().trim());
+	}
+
+	/** Go to the accounts list, optionally with a seeded search term. */
+	protected browseAll(q?: string): void {
+		void this.router.navigate(["/accounts"], {
+			queryParams: q ? { q } : {},
+		});
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/pages/not-found/not-found.html

@@ -0,0 +1,12 @@
+<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+	<div class="text-center">
+		<h1 class="text-4xl font-bold text-gray-900 mb-4">404</h1>
+		<p class="text-lg text-gray-600 mb-8">Page not found</p>
+		<a
+			routerLink="/"
+			class="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+		>
+			Go to Home
+		</a>
+	</div>
+</main>

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/pages/not-found/not-found.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { NotFoundComponent } from './not-found';
+
+describe('NotFoundComponent', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [NotFoundComponent],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it('should create the component', () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		const component = fixture.componentInstance;
+		expect(component).toBeTruthy();
+	});
+
+	it('should render main landmark', async () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector('main')).toBeTruthy();
+	});
+
+	it('should have a link to home', async () => {
+		const fixture = TestBed.createComponent(NotFoundComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		const link = compiled.querySelector('a');
+		expect(link?.getAttribute('href')).toBe('/');
+	});
+});

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/pages/not-found/not-found.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+	selector: 'app-not-found',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink],
+	templateUrl: './not-found.html',
+})
+export class NotFoundComponent {}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/alert/hlm-alert-action.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertAction]',
+	host: {
+		'data-slot': 'alert-action',
+	},
+})
+export class HlmAlertAction {
+	constructor() {
+		classes(() => 'absolute end-2 top-2');
+	}
+}

package/dist/force-app/main/default/uiBundles/feature-angular-object-search/src/app/shared/alert/hlm-alert-description.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmAlertDescription]',
+	host: {
+		'data-slot': 'alert-description',
+	},
+})
+export class HlmAlertDescription {
+	constructor() {
+		classes(
+			() =>
+				'text-sm text-balance md:text-pretty group-has-[>ng-icon]/alert:col-start-2 [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+		);
+	}
+}