@salesforce/templates 66.11.1 → 66.13.0

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "base-angular-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "dev": "sf-angular-serve",
+    "dev:design": "sf-angular-serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "lint": "ng lint",
+    "build:e2e": "ng build && node scripts/rewrite-e2e-assets.mjs",
+    "e2e": "playwright test"
+  },
+  "dependencies": {
+    "@angular/animations": "^21.2.0",
+    "@angular/cdk": "^21.2.0",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/material": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@salesforce/angular-plugin-ui-bundle": "^11.4.4",
+    "@salesforce/platform-sdk": "^11.4.4",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular-builders/custom-esbuild": "^21.0.0",
+    "@angular-eslint/builder": "^21.0.0",
+    "@angular/build": "^21.2.11",
+    "@angular/cli": "^21.2.11",
+    "@angular/compiler-cli": "^21.2.0",
+    "@eslint/js": "^9.0.0",
+    "@playwright/test": "^1.49.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "angular-eslint": "^21.0.0",
+    "eslint": "^9.0.0",
+    "jsdom": "^28.0.0",
+    "postcss": "^8.5.0",
+    "serve": "^14.2.5",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.9.2",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^4.1.0"
+  },
+  "overrides": {
+    "undici": "^7.28.0"
+  }
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const E2E_PORT = 5176;
+
+export default defineConfig({
+	testDir: './e2e',
+	fullyParallel: true,
+	forbidOnly: !!process.env.CI,
+	retries: process.env.CI ? 2 : 0,
+	workers: process.env.CI ? 1 : undefined,
+	reporter: 'html',
+	use: {
+		baseURL: `http://localhost:${E2E_PORT}`,
+		trace: 'on-first-retry',
+	},
+	projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+	webServer: {
+		// Serve built dist/ with a static server so e2e works in CI without an SF org
+		// (ng serve runs the SF plugin/proxy middleware and can fail without an org).
+		command: `npx serve dist -l ${E2E_PORT}`,
+		url: `http://localhost:${E2E_PORT}`,
+		reuseExistingServer: !process.env.CI,
+		timeout: process.env.CI ? 120_000 : 60_000,
+	},
+});

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/scripts/rewrite-e2e-assets.mjs

@@ -0,0 +1,30 @@
+/**
+ * Prepares dist/ for e2e: root-relative asset paths + SPA fallback for serve.
+ *
+ * angular.json sets deployUrl: "./", so the built index.html references
+ * scripts/styles with a relative "./" prefix (e.g. ./main-HASH.js). When the
+ * SPA fallback serves index.html for a deep route like /non-existent-route,
+ * those "./" paths resolve against the wrong base and 404, so the app never
+ * boots. Rewrite them to root-relative "/" paths.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+// angular.json outputPath: { base: "dist", browser: "" } -> files land in dist/
+const distDir = join(__dirname, '..', 'dist');
+
+// Rewrite index.html so asset paths are root-relative (./main-x.js -> /main-x.js)
+const indexPath = join(distDir, 'index.html');
+let html = readFileSync(indexPath, 'utf8');
+html = html.replace(/(src|href)="\.\//g, '$1="/');
+writeFileSync(indexPath, html);
+
+// SPA fallback so /non-existent-route etc. serve index.html
+writeFileSync(
+	join(distDir, 'serve.json'),
+	JSON.stringify({
+		rewrites: [{ source: '**', destination: '/index.html' }],
+	}),
+);

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/api/account/account-search.service.ts

@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Injectable, inject } from "@angular/core";
+// DataClient is provided by the base-angular-app. Consumed via the
+// `__inherit__` stub one level up (app/api/account/ -> app/api/); post-compose
+// patches-cli strips the prefix so it resolves to the seeded base file at
+// app/api/data-client.service.ts.
+import { DataClient } from "../data-client.service";
+// Query constants are owned by this feature (sibling files) so object-search
+// is self-contained — no external GraphQL dependency.
+import { SEARCH_ACCOUNTS } from "./searchAccounts";
+import { GET_ACCOUNT_DETAIL } from "./getAccountDetail";
+import { DISTINCT_ACCOUNT_INDUSTRIES } from "./distinctAccountIndustries";
+import { DISTINCT_ACCOUNT_TYPES } from "./distinctAccountTypes";
+
+// ---------------------------------------------------------------------------
+// Local response shape types. Codegen is PARKED for the Angular port; when it
+// lands, replace these hand-written interfaces with the generated ones from
+// graphql-operations-types (see the React reference for the equivalent).
+// ---------------------------------------------------------------------------
+
+/** A Salesforce GraphQL scalar field: `{ value, displayValue }`. */
+export interface UiScalarField<T = unknown> {
+	value?: T | null;
+	displayValue?: string | null;
+}
+
+/** An Account node with the fields the search + detail queries request. */
+export interface AccountNode {
+	Id: string;
+	Name?: UiScalarField<string> | null;
+	Industry?: UiScalarField<string> | null;
+	Type?: UiScalarField<string> | null;
+	Phone?: UiScalarField<string> | null;
+	Owner?: { Name?: UiScalarField<string> | null } | null;
+	AnnualRevenue?: UiScalarField<number> | null;
+	// Detail-only fields (undefined in list responses).
+	Fax?: UiScalarField<string> | null;
+	Parent?: { Name?: UiScalarField<string> | null } | null;
+	Website?: UiScalarField<string> | null;
+	NumberOfEmployees?: UiScalarField<number> | null;
+	Description?: UiScalarField<string> | null;
+	BillingStreet?: UiScalarField<string> | null;
+	BillingCity?: UiScalarField<string> | null;
+	BillingState?: UiScalarField<string> | null;
+	BillingPostalCode?: UiScalarField<string> | null;
+	BillingCountry?: UiScalarField<string> | null;
+	ShippingStreet?: UiScalarField<string> | null;
+	ShippingCity?: UiScalarField<string> | null;
+	ShippingState?: UiScalarField<string> | null;
+	ShippingPostalCode?: UiScalarField<string> | null;
+	ShippingCountry?: UiScalarField<string> | null;
+	CreatedBy?: { Name?: UiScalarField<string> | null } | null;
+	CreatedDate?: UiScalarField<string> | null;
+	LastModifiedBy?: { Name?: UiScalarField<string> | null } | null;
+	LastModifiedDate?: UiScalarField<string> | null;
+}
+
+/** GraphQL page-info block returned by the connection response. */
+export interface AccountPageInfo {
+	hasNextPage?: boolean;
+	hasPreviousPage?: boolean;
+	endCursor?: string | null;
+	startCursor?: string | null;
+}
+
+/** The `uiapi.query.Account` connection returned by the search query. */
+export interface AccountSearchResult {
+	edges: Array<{ node: AccountNode } | null> | null;
+	pageInfo: AccountPageInfo;
+	totalCount?: number;
+}
+
+/** Wire shape for the `search` query. */
+interface SearchAccountsData {
+	uiapi: { query: { Account: AccountSearchResult | null } };
+}
+
+/** Wire shape for the `getAccountDetail` query. */
+interface GetAccountDetailData {
+	uiapi: {
+		query: {
+			Account: { edges: Array<{ node: AccountNode } | null> | null } | null;
+		};
+	};
+}
+
+/** Wire shape for the distinct-value aggregate queries. */
+interface DistinctAccountData {
+	uiapi: {
+		aggregate: {
+			Account: {
+				edges: Array<{
+					node: {
+						aggregate?: Record<
+							string,
+							{
+								value?: string | null;
+								displayValue?: string | null;
+								label?: string | null;
+							} | null
+						> | null;
+					};
+				} | null> | null;
+			} | null;
+		};
+	};
+}
+
+/** Picklist option shape shared with filter components. */
+export interface PicklistOption {
+	value: string;
+	label: string;
+}
+
+/** Search args mirroring the React `AccountSearchOptions`. */
+export interface AccountSearchArgs {
+	where?: unknown;
+	orderBy?: unknown;
+	first?: number;
+	after?: string;
+}
+
+/**
+ * Angular account-search data service.
+ *
+ * Wraps the base-app's `DataClient` with typed methods per feature query
+ * (search, detail, and the two distinct-value aggregates that populate the
+ * Industry / Type filter options). Provided in root; the service is stateless
+ * (all state lives in `ObjectSearchStateService` per-page).
+ *
+ * Mirrors the React `accountSearchService` module — the shape of the returned
+ * data is identical so the templates can be a straight JSX-to-Angular port.
+ */
+@Injectable({ providedIn: "root" })
+export class AccountSearchService {
+	private readonly client = inject(DataClient);
+
+	/** Runs the search query and returns the `Account` connection. */
+	async searchAccounts(args: AccountSearchArgs = {}): Promise<AccountSearchResult> {
+		const { where, orderBy, first = 20, after } = args;
+		const data = await this.client.execute<SearchAccountsData, AccountSearchArgs>(SEARCH_ACCOUNTS, {
+			where,
+			orderBy,
+			first,
+			after,
+		});
+		const account = data.uiapi.query.Account;
+		if (!account) {
+			throw new Error("No Account data returned");
+		}
+		return account;
+	}
+
+	/** Fetches a single Account by Id; returns `null` if not found. */
+	async getAccountDetail(id: string): Promise<AccountNode | null> {
+		const data = await this.client.execute<GetAccountDetailData, { id: string }>(
+			GET_ACCOUNT_DETAIL,
+			{ id },
+		);
+		return data.uiapi.query.Account?.edges?.[0]?.node ?? null;
+	}
+
+	/** Distinct `Industry` values for the picklist filter. */
+	async fetchDistinctIndustries(): Promise<PicklistOption[]> {
+		return this.fetchDistinctValues("Industry", DISTINCT_ACCOUNT_INDUSTRIES);
+	}
+
+	/** Distinct `Type` values for the multipicklist filter. */
+	async fetchDistinctTypes(): Promise<PicklistOption[]> {
+		return this.fetchDistinctValues("Type", DISTINCT_ACCOUNT_TYPES);
+	}
+
+	/**
+	 * Shared distinct-value shape parser. Mirrors the React
+	 * `fetchDistinctValues` in `objectSearchService.ts`: pulls
+	 * `uiapi.aggregate.Account.edges[].node.aggregate[fieldName]` and derives a
+	 * `{ value, label }` option, preferring `label` -> `displayValue` -> `value`
+	 * as the display string.
+	 */
+	private async fetchDistinctValues(fieldName: string, query: string): Promise<PicklistOption[]> {
+		const data = await this.client.execute<DistinctAccountData>(query);
+		const edges = data.uiapi.aggregate.Account?.edges ?? [];
+		const options: PicklistOption[] = [];
+		for (const edge of edges) {
+			const field = edge?.node.aggregate?.[fieldName];
+			const value = field?.value;
+			if (!value) continue;
+			options.push({ value, label: field.label ?? field.displayValue ?? value });
+		}
+		return options;
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/api/account/distinctAccountIndustries.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export const DISTINCT_ACCOUNT_INDUSTRIES = /* GraphQL */ `
+	query DistinctAccountIndustries {
+		uiapi {
+			aggregate {
+				Account(groupBy: { Industry: { group: true } }) {
+					edges {
+						node {
+							aggregate @optional {
+								Industry @optional {
+									value
+									displayValue
+									label
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/api/account/distinctAccountTypes.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export const DISTINCT_ACCOUNT_TYPES = /* GraphQL */ `
+	query DistinctAccountTypes {
+		uiapi {
+			aggregate {
+				Account(groupBy: { Type: { group: true } }) {
+					edges {
+						node {
+							aggregate @optional {
+								Type @optional {
+									value
+									displayValue
+									label
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/api/account/getAccountDetail.ts

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export const GET_ACCOUNT_DETAIL = /* GraphQL */ `
+	query GetAccountDetail($id: ID!) {
+		uiapi {
+			query {
+				Account(where: { Id: { eq: $id } }) {
+					edges {
+						node {
+							Id
+							Name @optional {
+								value
+								displayValue
+							}
+							Owner @optional {
+								Name @optional {
+									value
+									displayValue
+								}
+							}
+							Phone @optional {
+								value
+								displayValue
+							}
+							Fax @optional {
+								value
+								displayValue
+							}
+							Parent @optional {
+								Name @optional {
+									value
+									displayValue
+								}
+							}
+							Website @optional {
+								value
+								displayValue
+							}
+							Type @optional {
+								value
+								displayValue
+							}
+							NumberOfEmployees @optional {
+								value
+								displayValue
+							}
+							Industry @optional {
+								value
+								displayValue
+							}
+							AnnualRevenue @optional {
+								value
+								displayValue
+							}
+							Description @optional {
+								value
+								displayValue
+							}
+							BillingStreet @optional {
+								value
+								displayValue
+							}
+							BillingCity @optional {
+								value
+								displayValue
+							}
+							BillingState @optional {
+								value
+								displayValue
+							}
+							BillingPostalCode @optional {
+								value
+								displayValue
+							}
+							BillingCountry @optional {
+								value
+								displayValue
+							}
+							ShippingStreet @optional {
+								value
+								displayValue
+							}
+							ShippingCity @optional {
+								value
+								displayValue
+							}
+							ShippingState @optional {
+								value
+								displayValue
+							}
+							ShippingPostalCode @optional {
+								value
+								displayValue
+							}
+							ShippingCountry @optional {
+								value
+								displayValue
+							}
+							CreatedBy @optional {
+								Name @optional {
+									value
+									displayValue
+								}
+							}
+							CreatedDate @optional {
+								value
+								displayValue
+							}
+							LastModifiedBy @optional {
+								Name @optional {
+									value
+									displayValue
+								}
+							}
+							LastModifiedDate @optional {
+								value
+								displayValue
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/api/account/searchAccounts.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export const SEARCH_ACCOUNTS = /* GraphQL */ `
+	query SearchAccounts(
+		$first: Int
+		$after: String
+		$where: Account_Filter
+		$orderBy: Account_OrderBy
+	) {
+		uiapi {
+			query {
+				Account(first: $first, after: $after, where: $where, orderBy: $orderBy) {
+					edges {
+						node {
+							Id
+							Name @optional {
+								value
+								displayValue
+							}
+							Industry @optional {
+								value
+								displayValue
+							}
+							Type @optional {
+								value
+								displayValue
+							}
+							Phone @optional {
+								value
+								displayValue
+							}
+							Owner @optional {
+								Name @optional {
+									value
+									displayValue
+								}
+							}
+							AnnualRevenue @optional {
+								value
+								displayValue
+							}
+						}
+					}
+					pageInfo {
+						hasNextPage
+						hasPreviousPage
+						endCursor
+						startCursor
+					}
+					totalCount
+				}
+			}
+		}
+	}
+`;