@salesforce/templates 66.11.1 → 66.12.0

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/features/object-search/utils/sort-utils.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+// NOTE: The React reference imports `ResultOrder` / `NullOrder` from generated
+// GraphQL types (graphql-operations-types.ts). Codegen is parked for the
+// Angular port, so the enum string values are inlined here. When codegen lands,
+// swap these constants for the generated enums.
+/** GraphQL `ResultOrder` values. */
+const RESULT_ORDER = { asc: "ASC", desc: "DESC" } as const;
+/** GraphQL `NullOrder` values. */
+const NULL_ORDER = { first: "FIRST", last: "LAST" } as const;
+
+export interface SortFieldConfig<TFieldName extends string = string> {
+	field: TFieldName;
+	label: string;
+}
+
+export interface SortState<TFieldName extends string = string> {
+	field: TFieldName;
+	direction: "ASC" | "DESC";
+}
+
+/**
+ * Converts a {@link SortState} into a GraphQL order-by object.
+ *
+ * @typeParam TOrderBy - The GraphQL order-by input type (e.g. `Account_OrderBy`).
+ * @param sort - The current sort state from the UI, or `null` if no sort is applied.
+ * @returns An order-by object for the query's `orderBy` variable, or `undefined`
+ *          when no sort is active (defers to the API's default ordering).
+ *
+ * @example
+ * buildOrderBy({ field: 'Name', direction: 'ASC' })
+ * // => { Name: { order: 'ASC', nulls: 'LAST' } }
+ */
+export function buildOrderBy<TOrderBy>(sort: SortState | null): TOrderBy | undefined {
+	if (!sort) return undefined;
+	return {
+		[sort.field]: {
+			order: sort.direction === "ASC" ? RESULT_ORDER.asc : RESULT_ORDER.desc,
+			nulls: NULL_ORDER.last,
+		},
+	} as TOrderBy;
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/account-detail/account-detail-page.html

@@ -0,0 +1,164 @@
+<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6" [attr.aria-busy]="loading()">
+	<app-object-breadcrumb
+		listPath="/accounts"
+		listLabel="Accounts"
+		[loading]="loading()"
+		[recordName]="recordName()"
+	/>
+
+	@if (loading()) {
+	<!-- Loading state -->
+	<app-skeleton class="h-8 w-56 mb-4" />
+	<app-card>
+		<app-card-content class="space-y-8">
+			<div class="space-y-4">
+				@for (row of skeletonRows; track row) {
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<app-skeleton class="h-4 w-24 mb-1.5" />
+						<app-skeleton class="h-5 w-40" />
+					</div>
+					<div>
+						<app-skeleton class="h-4 w-24 mb-1.5" />
+						<app-skeleton class="h-5 w-40" />
+					</div>
+				</div>
+				}
+			</div>
+			<app-separator />
+			<div class="space-y-4">
+				<app-skeleton class="h-7 w-48 py-2" />
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<app-skeleton class="h-12 w-full" />
+					<app-skeleton class="h-12 w-full" />
+				</div>
+			</div>
+		</app-card-content>
+	</app-card>
+	} @else if (error()) {
+	<!-- Error state -->
+	<app-alert
+		variant="destructive"
+		icon="error"
+		title="Failed to load account"
+		description="Something went wrong while loading this account. Please try again later."
+	/>
+	<div class="mt-4 flex gap-3">
+		<app-button appearance="outlined" (clicked)="goBack()">← Back</app-button>
+		<app-button appearance="outlined" (clicked)="reload()">Retry</app-button>
+	</div>
+	} @else if (notFound()) {
+	<!-- Not found state -->
+	<app-card>
+		<app-card-content class="flex flex-col items-center justify-center py-16 text-center">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-12 text-muted-foreground mb-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 17h.01" />
+				<path d="M10.1 9a2.4 2.4 0 0 1 3.9 1.9c0 1.5-2 2-2 3" />
+				<path d="M14.5 4.5 20 10l-2 2" />
+				<path d="M4 4h9l7 7v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" />
+			</svg>
+			<h2 class="text-lg font-semibold mb-1">Account not found</h2>
+			<p class="text-sm text-muted-foreground mb-6">
+				The account you're looking for doesn't exist or may have been deleted.
+			</p>
+			<app-button appearance="outlined" (clicked)="goBack()">← Go back</app-button>
+		</app-card-content>
+	</app-card>
+	} @else if (account()) {
+	<!-- Content -->
+	<h1 class="text-2xl font-bold mb-4">Account: {{ title() }}</h1>
+
+	<app-card>
+		<app-card-content class="space-y-8">
+			<!-- Top section -->
+			<div class="space-y-4">
+				@for (row of topRows(); track $index) {
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					@for (field of row; track field.label) {
+					<div>
+						<dt class="text-sm text-muted-foreground">{{ field.label }}</dt>
+						<dd class="mt-0.5">
+							@if (field.value && field.telephone) {
+							<a [href]="'tel:' + field.value" class="underline">{{ field.value }}</a>
+							} @else { {{ field.value ?? "—" }} }
+						</dd>
+					</div>
+					}
+				</div>
+				}
+			</div>
+
+			<app-separator />
+
+			<!-- Additional Information -->
+			<app-collapsible title="Additional Information" [(open)]="additionalOpen">
+				<div class="space-y-4">
+					@for (row of additionalRows(); track $index) {
+					<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+						@for (field of row; track field.label) {
+						<div>
+							<dt class="text-sm text-muted-foreground">{{ field.label }}</dt>
+							<dd class="mt-0.5">{{ field.value ?? "—" }}</dd>
+						</div>
+						}
+					</div>
+					}
+					<div>
+						<dt class="text-sm text-muted-foreground">Description</dt>
+						<dd class="mt-0.5">{{ description() ?? "—" }}</dd>
+					</div>
+				</div>
+			</app-collapsible>
+			<div class="space-y-4"></div>
+			<app-separator />
+
+			<!-- Address Information -->
+			<app-collapsible title="Address Information" [(open)]="addressOpen">
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<dt class="text-sm text-muted-foreground">Billing Address</dt>
+						<dd class="mt-0.5">
+							@if (billingAddress()) { @for (line of billingAddress(); track $index) {
+							<div>{{ line }}</div>
+							} } @else { — }
+						</dd>
+					</div>
+					<div>
+						<dt class="text-sm text-muted-foreground">Shipping Address</dt>
+						<dd class="mt-0.5">
+							@if (shippingAddress()) { @for (line of shippingAddress(); track $index) {
+							<div>{{ line }}</div>
+							} } @else { — }
+						</dd>
+					</div>
+				</div>
+			</app-collapsible>
+			<div class="space-y-4"></div>
+			<app-separator />
+			<!-- System Information -->
+			<app-collapsible title="System Information" [(open)]="systemOpen">
+				<div class="grid grid-cols-2 gap-x-8 gap-y-4">
+					<div>
+						<dt class="text-sm text-muted-foreground">Created By</dt>
+						<dd class="mt-0.5">{{ createdBy() ?? "—" }}</dd>
+					</div>
+					<div>
+						<dt class="text-sm text-muted-foreground">Last Modified By</dt>
+						<dd class="mt-0.5">{{ lastModifiedBy() ?? "—" }}</dd>
+					</div>
+				</div>
+			</app-collapsible>
+		</app-card-content>
+	</app-card>
+	}
+</div>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/account-detail/account-detail-page.scss

@@ -0,0 +1,7 @@
+:host ::ng-deep .mat-expansion-panel {
+	box-shadow: none !important;
+}
+
+:host ::ng-deep .mat-expansion-panel-header:hover {
+	background-color: transparent !important;
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/account-detail/account-detail-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 { ActivatedRoute, Router } from "@angular/router";
+import { toSignal } from "@angular/core/rxjs-interop";
+import { map } from "rxjs/operators";
+// Base-app UI wrappers, inherited (not recreated) by this feature. Post-compose
+// they land at uiBundles/<target>/src/app/components/ui/..., three levels up from this
+// page folder (app/features/account-search/ -> app/components/ui/).
+import { AlertComponent } from "../../components/ui/alert/alert";
+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";
+// Object-search feature building blocks (Waves 1-2), two levels up.
+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";
+
+/** `Intl` options for the created / last-modified timestamps (matches React). */
+const DATE_TIME_OPTIONS: Intl.DateTimeFormatOptions = {
+	dateStyle: "medium",
+	timeStyle: "short",
+};
+
+/** A `{ label, value }` pair rendered in a field grid. */
+interface Field {
+	label: string;
+	value: string | null;
+	/** `true` renders the value as a `tel:` link (Phone / Fax). */
+	telephone?: boolean;
+}
+
+/**
+ * Account detail page. The Angular analogue of the React
+ * `AccountObjectDetailPage`: a breadcrumb plus a card of collapsible sections
+ * (top fields, Additional / Address / System information), with loading,
+ * error, and not-found states.
+ *
+ * The record id comes from the `:recordId` route param (reactively, so a
+ * client-side nav between two detail routes refetches). Data flows through
+ * {@link createAsyncData} for latest-wins fetching.
+ */
+@Component({
+	selector: "app-account-detail-page",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [
+		AlertComponent,
+		ButtonComponent,
+		CardComponent,
+		CardContentComponent,
+		CollapsibleComponent,
+		SeparatorComponent,
+		SkeletonComponent,
+		ObjectBreadcrumbComponent,
+	],
+	templateUrl: "./account-detail-page.html",
+	styleUrl: "./account-detail-page.scss",
+})
+export class AccountDetailPageComponent {
+	private readonly service = inject(AccountSearchService);
+	private readonly route = inject(ActivatedRoute);
+	private readonly router = inject(Router);
+
+	/** Reactive `:recordId` param — drives (and re-drives) the fetch. */
+	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;
+	/** True once a resolved fetch returned no record (distinct from loading). */
+	protected readonly notFound = computed(() => !this.loading() && !this.error() && !this.account());
+
+	/** Per-section collapsible open state (all default open, matching React). */
+	protected readonly additionalOpen = signal<boolean>(true);
+	protected readonly addressOpen = signal<boolean>(true);
+	protected readonly systemOpen = signal<boolean>(true);
+
+	/** Placeholder rows for skeleton field grids. */
+	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;
+	}
+
+	/** Navigate back to the previous view (mirrors the React `navigate(-1)`). */
+	protected goBack(): void {
+		void this.router.navigate(["/accounts"]);
+	}
+
+	/** Full page reload retry, matching the React "Retry" affordance. */
+	protected reload(): void {
+		window.location.reload();
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/pages/account-search/account-search-page.html

@@ -0,0 +1,111 @@
+<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">
+		<!-- Sidebar — Filter Panel -->
+		<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>
+
+		<!-- Main area — Sort + Results -->
+		<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">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-12 text-muted-foreground mb-4"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						aria-hidden="true"
+					>
+						<path d="m13.5 8.5-5 5" />
+						<path d="m8.5 8.5 5 5" />
+						<circle cx="11" cy="11" r="8" />
+						<path d="m21 21-4.3-4.3" />
+					</svg>
+					<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>
+
+			<!-- Pagination — always visible, disabled while loading or on error -->
+			<app-pagination-controls
+				[totalCount]="totalCount()"
+				[hasNextPage]="hasNextPage()"
+				[endCursor]="endCursor()"
+				[pageSizeOptions]="pageSizeOptions"
+				[disabled]="controlsDisabled()"
+			/>
+		</div>
+	</div>
+</div>