@salesforce/templates 66.11.0 → 66.12.0

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

@@ -0,0 +1,74 @@
+import { Injectable } from '@angular/core';
+import { createDataSDK } from '@salesforce/platform-sdk';
+
+/**
+ * True when the operation's first definition is a `mutation`. Strips GraphQL
+ * comments first so a leading `# ...` line can't mask the keyword. Queries
+ * (named or anonymous `{ ... }` shorthand) and subscriptions fall through to
+ * query().
+ */
+function isMutation(operation: string): boolean {
+	return /^\s*mutation\b/.test(operation.replace(/#[^\n\r]*/g, ''));
+}
+
+/**
+ * The single data-access client for the app — a thin wrapper over
+ * `createDataSDK` that centralizes both of the SDK's surfaces:
+ *
+ * - `execute()` for GraphQL (routes mutations to `sdk.graphql.mutate` and
+ *   everything else to `sdk.graphql.query`, with centralized error handling).
+ *   Use with gql-tagged queries and generated operation types for type-safe
+ *   calls.
+ * - `fetch()` for REST (proxies `sdk.fetch`, returning the raw `Response` so
+ *   callers keep full control over response parsing / error shaping).
+ *
+ * Consumers inject this instead of calling `createDataSDK` directly, so the SDK
+ * bootstrap lives in exactly one place. Feature packages consume it via an
+ * `__inherit__data-client.service` stub (base wins at compose).
+ */
+@Injectable({ providedIn: 'root' })
+export class DataClient {
+	/**
+	 * Executes a GraphQL operation and returns its `data`, throwing on GraphQL
+	 * errors or a null payload.
+	 */
+	async execute<TData, TVariables = Record<string, unknown>>(
+		operation: string,
+		variables?: TVariables,
+	): Promise<TData> {
+		const data = await createDataSDK();
+		const result = isMutation(operation)
+			? await data.graphql!.mutate<TData, TVariables>({
+					mutation: operation,
+					variables,
+				})
+			: await data.graphql!.query<TData, TVariables>({
+					query: operation,
+					variables,
+				});
+
+		if (result.errors?.length) {
+			const msg = result.errors.map((e) => e.message).join('; ');
+			throw new Error(`GraphQL Error: ${msg}`);
+		}
+
+		if (result.data == null) {
+			throw new Error('GraphQL response data is null');
+		}
+
+		return result.data;
+	}
+
+	/**
+	 * Performs a REST request through the SDK's authenticated `fetch`, returning
+	 * the raw `Response`. Callers parse the body / shape errors themselves (e.g.
+	 * via `handleApiResponse`).
+	 *
+	 * @param input - The request URL (e.g. an Apex REST route).
+	 * @param init  - Standard `fetch` options (method, headers, body, …).
+	 */
+	async fetch(input: string, init?: RequestInit): Promise<Response> {
+		const sdk = await createDataSDK();
+		return sdk.fetch!(input, init);
+	}
+}

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

@@ -0,0 +1,126 @@
+/**
+ * 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 in this same folder (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";
+import { flattenGraphQLRecord } from "../features/authentication/utils/helpers";
+
+// ---------------------------------------------------------------------------
+// Hand-written GraphQL query/mutation strings + wire types. Codegen is PARKED
+// for the Angular port (same decision as object-search). The field selection,
+// query/mutation shape, and variable structure mirror the React
+// `userProfileApi.ts` byte-for-byte so behavior is identical.
+// ---------------------------------------------------------------------------
+
+const USER_PROFILE_FIELDS_FULL = `
+    Id
+    FirstName @optional { value }
+    LastName @optional { value }
+    Email @optional { value }
+    Phone @optional { value }
+    Street @optional { value }
+    City @optional { value }
+    State @optional { value }
+    PostalCode @optional { value }
+    Country @optional { value }`;
+
+const USER_CONTACT_FIELDS = `
+    Id
+    ContactId @optional { value }`;
+
+function getUserProfileQuery(fields: string): string {
+	return `
+    query GetUserProfile($userId: ID) {
+        uiapi {
+            query {
+                User(where: { Id: { eq: $userId } }) {
+                    edges {
+                        node {${fields}}
+                    }
+                }
+            }
+        }
+    }`;
+}
+
+function getUserProfileMutation(fields: string): string {
+	return `
+    mutation UpdateUserProfile($input: UserUpdateInput!) {
+      uiapi {
+        UserUpdate(input: $input) {
+          Record {${fields}}
+        }
+      }
+    }`;
+}
+
+/** Wire shape for the GetUserProfile query. */
+interface GetUserProfileData {
+	uiapi: {
+		query: {
+			User: { edges: Array<{ node: Record<string, unknown> } | null> | null } | null;
+		};
+	};
+}
+
+/** Wire shape for the UpdateUserProfile mutation. */
+interface UpdateUserProfileData {
+	uiapi: {
+		UserUpdate: { Record: Record<string, unknown> | null } | null;
+	};
+}
+
+/**
+ * Extensible user-profile fetching and updating via UI API GraphQL — the
+ * Angular port of the React `userProfileApi.ts` module.
+ *
+ * Uses the base app's `DataClient` (which centralizes GraphQL error handling
+ * and routes mutations vs queries), matching the object-search feature's
+ * data-access idiom. Responses are flattened via `flattenGraphQLRecord` for
+ * straightforward form binding.
+ */
+@Injectable({ providedIn: "root" })
+export class UserProfileService {
+	private readonly client = inject(DataClient);
+
+	/**
+	 * Fetches the user profile via GraphQL and returns a flattened record.
+	 * @param userId - The Salesforce User Id.
+	 * @param fields - GraphQL field selection (defaults to the full profile).
+	 */
+	async fetchUserProfile<T>(userId: string, fields: string = USER_PROFILE_FIELDS_FULL): Promise<T> {
+		const data = await this.client.execute<GetUserProfileData, { userId: string }>(
+			getUserProfileQuery(fields),
+			{ userId },
+		);
+		return flattenGraphQLRecord<T>(data.uiapi?.query?.User?.edges?.[0]?.node);
+	}
+
+	/**
+	 * Fetches the user's associated contact record ID via GraphQL and returns a
+	 * flattened record.
+	 * @param userId - The Salesforce User Id.
+	 */
+	async fetchUserContact<T>(userId: string): Promise<T> {
+		return this.fetchUserProfile<T>(userId, USER_CONTACT_FIELDS);
+	}
+
+	/**
+	 * Updates the user profile via GraphQL and returns the flattened updated record.
+	 * @param userId - The Salesforce User Id.
+	 * @param values - The field values to update.
+	 */
+	async updateUserProfile<T>(userId: string, values: Record<string, unknown>): Promise<T> {
+		const data = await this.client.execute<UpdateUserProfileData, { input: unknown }>(
+			getUserProfileMutation(USER_PROFILE_FIELDS_FULL),
+			{ input: { Id: userId, User: { ...values } } },
+		);
+		return flattenGraphQLRecord<T>(data.uiapi?.UserUpdate?.Record);
+	}
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideNativeDateAdapter } from '@angular/material/core';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+	providers: [
+		provideBrowserGlobalErrorListeners(),
+		provideRouter(routes),
+		provideAnimationsAsync(),
+		// Enables mat-datepicker (used by the object-search Date / DateRange
+		// filters) with the browser's native Date, avoiding a moment/luxon dep.
+		provideNativeDateAdapter(),
+	],
+};

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/app.html

@@ -0,0 +1 @@
+<router-outlet />

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/app.routes.ts

@@ -0,0 +1,77 @@
+import { Routes } from '@angular/router';
+import { NotFoundComponent } from './pages/not-found/not-found';
+import { authGuard } from "./features/authentication/auth/auth.guard";
+import { LoginPageComponent } from "./pages/login/login-page";
+import { RegisterPageComponent } from "./pages/register/register-page";
+import { ForgotPasswordPageComponent } from "./pages/forgot-password/forgot-password-page";
+import { ResetPasswordPageComponent } from "./pages/reset-password/reset-password-page";
+import { ProfilePageComponent } from "./pages/profile/profile-page";
+import { ChangePasswordPageComponent } from "./pages/change-password/change-password-page";
+import { AppLayoutComponent } from "./components/layout/app-layout/app-layout";
+import { HomePageComponent } from "./pages/home/home-page";
+import { AccountSearchPageComponent } from "./pages/account-search/account-search-page";
+import { AccountDetailPageComponent } from "./pages/account-detail/account-detail-page";
+
+export const routes: Routes = [
+  {
+    path: "",
+    component: AppLayoutComponent,
+    children: [
+      {
+        path: "",
+        component: HomePageComponent,
+        data: { showInNavigation: true, label: "Home" }
+      },
+      {
+        path: "login",
+        component: LoginPageComponent,
+        title: "Login | MyApp",
+        data: { showInNavigation: false, label: "Login" }
+      },
+      {
+        path: "register",
+        component: RegisterPageComponent,
+        title: "Create Account | MyApp",
+        data: { showInNavigation: false }
+      },
+      {
+        path: "forgot-password",
+        component: ForgotPasswordPageComponent,
+        title: "Recover Password | MyApp",
+        data: { showInNavigation: false }
+      },
+      {
+        path: "reset-password",
+        component: ResetPasswordPageComponent,
+        title: "Reset Password | MyApp",
+        data: { showInNavigation: false }
+      },
+      {
+        path: "profile",
+        component: ProfilePageComponent,
+        canActivate: [authGuard],
+        title: "My Profile | MyApp",
+        data: { showInNavigation: false, label: "Profile" }
+      },
+      {
+        path: "change-password",
+        component: ChangePasswordPageComponent,
+        canActivate: [authGuard],
+        title: "Change Password | MyApp",
+        data: { showInNavigation: false }
+      },
+      {
+        path: "accounts/:recordId",
+        component: AccountDetailPageComponent
+      },
+      {
+        path: "accounts",
+        component: AccountSearchPageComponent
+      },
+      {
+        path: '**',
+        component: NotFoundComponent
+      }
+    ]
+  }
+];

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/app.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { App } from './app';
+
+describe('App', () => {
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [App],
+			providers: [provideRouter([])],
+		}).compileComponents();
+	});
+
+	it('should create the app', () => {
+		const fixture = TestBed.createComponent(App);
+		const app = fixture.componentInstance;
+		expect(app).toBeTruthy();
+	});
+});

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/app.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 { RouterOutlet } from '@angular/router';
+
+@Component({
+	selector: 'app-root',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterOutlet],
+	templateUrl: './app.html',
+})
+export class App {}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/layout/app-layout/app-layout.html

@@ -0,0 +1,53 @@
+<nav class="bg-white border-b border-gray-200">
+	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex justify-between items-center h-16">
+			<a routerLink="/" class="text-xl font-semibold text-gray-900"> Angular App </a>
+			<div class="flex items-center gap-2">
+				<app-auth-menu />
+				<button
+					(click)="toggleMenu()"
+					class="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+					aria-label="Toggle menu"
+					[attr.aria-expanded]="isOpen()"
+				>
+					<div class="w-6 h-6 flex flex-col justify-center space-y-1.5">
+						<span
+							class="block h-0.5 w-6 bg-current transition-all"
+							[class.rotate-45]="isOpen()"
+							[class.translate-y-2]="isOpen()"
+						></span>
+						<span
+							class="block h-0.5 w-6 bg-current transition-all"
+							[class.opacity-0]="isOpen()"
+						></span>
+						<span
+							class="block h-0.5 w-6 bg-current transition-all"
+							[class.-rotate-45]="isOpen()"
+							[class.-translate-y-2]="isOpen()"
+						></span>
+					</div>
+				</button>
+			</div>
+		</div>
+		@if (isOpen()) {
+		<div class="pb-4">
+			<ul class="flex flex-col space-y-2 list-none">
+				@for (item of navigationItems(); track item.path) {
+				<li>
+					<a
+						[routerLink]="item.path"
+						routerLinkActive="bg-blue-100 text-blue-700"
+						[routerLinkActiveOptions]="{ exact: true }"
+						(click)="closeMenu()"
+						class="block px-3 py-2 rounded-md text-sm font-medium transition-colors text-gray-700 hover:bg-gray-100"
+					>
+						{{ item.label }}
+					</a>
+				</li>
+				}
+			</ul>
+		</div>
+		}
+	</div>
+</nav>
+<router-outlet />

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/layout/app-layout/app-layout.spec.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Component } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { AppLayoutComponent } from "./app-layout";
+import { AuthMenuComponent } from "../../../features/authentication/menu/auth-menu/auth-menu";
+
+// Stub the auth-menu so this layout test stays hermetic: the real
+// `app-auth-menu` boots AuthService.checkAuth() (network + Cache API) on render,
+// which is out of scope here and unavailable in the unit-test environment.
+@Component({ selector: "app-auth-menu", template: "" })
+class StubAuthMenuComponent {}
+
+describe("AppLayoutComponent", () => {
+	beforeEach(async () => {
+		TestBed.configureTestingModule({
+			imports: [AppLayoutComponent],
+			providers: [
+				provideRouter([
+					{
+						path: "",
+						children: [
+							{
+								path: "accounts",
+								component: AppLayoutComponent,
+								data: { showInNavigation: true, label: "Accounts" },
+							},
+						],
+					},
+				]),
+			],
+		});
+		TestBed.overrideComponent(AppLayoutComponent, {
+			remove: { imports: [AuthMenuComponent] },
+			add: { imports: [StubAuthMenuComponent] },
+		});
+		await TestBed.compileComponents();
+	});
+
+	it("should create the component", () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		expect(fixture.componentInstance).toBeTruthy();
+	});
+
+	it("should toggle menu", () => {
+		const component = TestBed.createComponent(AppLayoutComponent).componentInstance;
+		expect(component.isOpen()).toBe(false);
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(true);
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(false);
+	});
+
+	it("should close menu", () => {
+		const component = TestBed.createComponent(AppLayoutComponent).componentInstance;
+		component.toggleMenu();
+		expect(component.isOpen()).toBe(true);
+		component.closeMenu();
+		expect(component.isOpen()).toBe(false);
+	});
+
+	it("should derive navigation items from the router config", () => {
+		const component = TestBed.createComponent(AppLayoutComponent).componentInstance;
+		const items = component.navigationItems();
+		expect(items.some((i) => i.path === "/accounts" && i.label === "Accounts")).toBe(true);
+	});
+
+	it("should render nav element", async () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		await fixture.whenStable();
+		const compiled = fixture.nativeElement as HTMLElement;
+		expect(compiled.querySelector("nav")).toBeTruthy();
+	});
+
+	it("should set aria-expanded on toggle button", async () => {
+		const fixture = TestBed.createComponent(AppLayoutComponent);
+		await fixture.whenStable();
+		const button = (fixture.nativeElement as HTMLElement).querySelector("button");
+		expect(button?.getAttribute("aria-expanded")).toBe("false");
+
+		fixture.componentInstance.toggleMenu();
+		fixture.detectChanges();
+		expect(button?.getAttribute("aria-expanded")).toBe("true");
+	});
+});

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/layout/app-layout/app-layout.ts

@@ -0,0 +1,81 @@
+/**
+ * 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, RouterLink, RouterLinkActive, RouterOutlet, type Route } from "@angular/router";
+import { AuthMenuComponent } from "../../../features/authentication/menu/auth-menu/auth-menu";
+
+interface NavItem {
+	path: string;
+	label: string;
+}
+
+/**
+ * App-owned layout — overrides the base `app-layout` at compose (the app package
+ * ships its own copy, so patches-cli's "app wins" rule selects this one over the
+ * base-angular-app version). This is the Angular analogue of the React external
+ * app's own `appLayout.tsx`: the layout belongs to the PROJECT, not the base app
+ * or a feature. The auth feature's `AuthAppLayout` wrapper renders `<app-layout />`
+ * (via its `__inherit__app-layout` stub), which resolves to this component.
+ *
+ * Adds two things over the base layout:
+ *   - `<app-auth-menu />` in the header (the auth feature's account dropdown),
+ *     the parallel of the React app rendering `<AuthMenu />`.
+ *   - Dynamic navigation derived from the router config at runtime — the Angular
+ *     analogue of React's `getAllRoutes()` reading route `handle` metadata. Post
+ *     compose the router config IS the merged base + feature routes, so nav items
+ *     surface automatically for any route whose `data.showInNavigation` is true.
+ */
+@Component({
+	selector: "app-layout",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterOutlet, RouterLink, RouterLinkActive, AuthMenuComponent],
+	templateUrl: "./app-layout.html",
+})
+export class AppLayoutComponent {
+	private readonly router = inject(Router);
+
+	readonly isOpen = signal(false);
+
+	/**
+	 * Flatten the router config and keep routes explicitly marked for navigation
+	 * (`data.showInNavigation === true` with a `data.label`). Mirrors the React
+	 * `getAllRoutes().filter(r => r.handle?.showInNavigation)` selection.
+	 */
+	readonly navigationItems = computed<NavItem[]>(() =>
+		this.collectNavItems(this.router.config, ""),
+	);
+
+	private collectNavItems(routes: Route[], parentPath: string): NavItem[] {
+		const items: NavItem[] = [];
+		for (const route of routes) {
+			const segment = route.path ?? "";
+			const fullPath =
+				segment === ""
+					? parentPath || "/"
+					: parentPath === "/" || parentPath === ""
+						? `/${segment}`
+						: `${parentPath}/${segment}`;
+
+			const data = route.data as { showInNavigation?: boolean; label?: string } | undefined;
+			if (data?.showInNavigation === true && data.label) {
+				items.push({ path: fullPath, label: data.label });
+			}
+
+			if (route.children?.length) {
+				items.push(...this.collectNavItems(route.children, fullPath));
+			}
+		}
+		return items;
+	}
+
+	toggleMenu(): void {
+		this.isOpen.update((v) => !v);
+	}
+
+	closeMenu(): void {
+		this.isOpen.set(false);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/_field-size.scss

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/*
+ * Shared height scale for the form-field wrappers (app-input, app-select,
+ * app-date-picker): sm = 24px, default = 32px, lg = 40px.
+ *
+ * Material's density scale only reaches 36px at its -5 floor, so these compact
+ * heights can't come from `mat.form-field-density`. Instead we set the two M3
+ * tokens that drive the height directly:
+ *   --mat-form-field-container-height          -> `.mat-mdc-form-field-flex` min-height
+ *   --mat-form-field-container-vertical-padding -> infix padding-top / -bottom
+ *
+ * These are CSS custom properties, so setting them on the wrapper's own
+ * `mat-form-field` (an in-view element that matches under emulated
+ * encapsulation) is enough — they INHERIT down to Material's internal flex /
+ * infix elements. No `::ng-deep` and no global classes needed. This mirrors how
+ * `app-button` sizes work (it sets `--mat-button-*-container-height` tokens).
+ */
+@mixin apply($height, $vertical-padding) {
+	--mat-form-field-container-height: #{$height};
+	--mat-form-field-container-vertical-padding: #{$vertical-padding};
+}
+
+/*
+ * Emit the three size classes. Consumers opt in via `size` on the wrapper,
+ * which renders `size-sm | size-default | size-lg` on the mat-form-field.
+ */
+@mixin sizes {
+	.size-sm {
+		@include apply(1.5rem, 0.25rem); // 24px, 4px
+	}
+	.size-default {
+		@include apply(2rem, 0.5rem); // 32px, 8px
+	}
+	.size-lg {
+		@include apply(2.5rem, 0.75rem); // 40px, 12px
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/alert/alert.html

@@ -0,0 +1,31 @@
+@if (icon()) {
+	<mat-icon class="row-span-2 translate-y-0.5 !size-4 !text-base leading-4" aria-hidden="true">{{
+		icon()
+	}}</mat-icon>
+}
+
+@if (title()) {
+	<div data-slot="alert-title" class="col-start-2 font-medium">{{ title() }}</div>
+}
+@if (description()) {
+	<div
+		data-slot="alert-description"
+		class="col-start-2 text-sm"
+		[class.text-muted-foreground]="variant() === 'default'"
+		[class.text-destructive]="variant() === 'destructive'"
+	>
+		{{ description() }}
+	</div>
+}
+
+<!--
+	Default slot for callers that project body content (e.g. app-status-alert
+	composing a message with a link) instead of the `description` input. Sits in
+	the second grid column to align with the icon. Inert when only inputs are used.
+-->
+<div class="col-start-2 text-sm">
+	<ng-content />
+</div>
+
+<!-- Optional caller-owned trailing control, pinned top-right. -->
+<ng-content select="app-alert-action" />