@salesforce/ui-bundle-template-app-angular-template-b2e 11.30.0

package/dist/force-app/main/default/uiBundles/angularinternalapp/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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/app.html

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

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/app.routes.ts

@@ -0,0 +1,31 @@
+import { Routes } from '@angular/router';
+import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
+import { NotFoundComponent } from './pages/not-found/not-found.component';
+import { HomePageComponent } from "./pages/home/home-page.component";
+import { AccountSearchPageComponent } from "./pages/account-search/account-search-page.component";
+import { AccountDetailPageComponent } from "./pages/account-detail/account-detail-page.component";
+export const routes: Routes = [
+  {
+    path: "",
+    component: AppLayoutComponent,
+    children: [
+      {
+        path: "",
+        component: HomePageComponent,
+        data: { showInNavigation: true, label: "Home" }
+      },
+      {
+        path: "accounts/:recordId",
+        component: AccountDetailPageComponent
+      },
+      {
+        path: "accounts",
+        component: AccountSearchPageComponent
+      },
+      {
+        path: '**',
+        component: NotFoundComponent
+      }
+    ]
+  }
+];

package/dist/force-app/main/default/uiBundles/angularinternalapp/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/dist/force-app/main/default/uiBundles/angularinternalapp/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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/layout/app-layout/app-layout.component.html

@@ -0,0 +1,52 @@
+<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>
+			<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"
+				aria-controls="app-layout-nav-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>
+		@if (isOpen()) {
+			<div id="app-layout-nav-menu" 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 />
+<app-agentforce-conversation-client agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/layout/app-layout/app-layout.component.spec.ts

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Component, input } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { AppLayoutComponent } from "./app-layout.component";
+import { AgentforceConversationClientComponent } from "../../../features/agentforce/agentforce-conversation-client/agentforce-conversation-client.component";
+
+// Stub the Agentforce client to keep this layout test hermetic (the real one
+// embeds Lightning Out on render).
+@Component({ selector: "app-agentforce-conversation-client", template: "" })
+class StubAgentforceConversationClientComponent {
+	readonly agentId = input.required<string>();
+}
+
+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: [AgentforceConversationClientComponent] },
+			add: { imports: [StubAgentforceConversationClientComponent] },
+		});
+		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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/layout/app-layout/app-layout.component.ts

@@ -0,0 +1,67 @@
+/**
+ * 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 { AgentforceConversationClientComponent } from "../../../features/agentforce/agentforce-conversation-client/agentforce-conversation-client.component";
+
+interface NavItem {
+	path: string;
+	label: string;
+}
+
+/**
+ * App-owned layout — overrides the base `app-layout` at compose (app copy wins).
+ * Angular analogue of the React internal app's `appLayout.tsx`: renders the
+ * floating Agentforce client after the outlet, and derives nav from the merged
+ * router config (routes with `data.showInNavigation`).
+ */
+@Component({
+	selector: "app-layout",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterOutlet, RouterLink, RouterLinkActive, AgentforceConversationClientComponent],
+	templateUrl: "./app-layout.component.html",
+})
+export class AppLayoutComponent {
+	private readonly router = inject(Router);
+
+	readonly isOpen = signal(false);
+
+	/** Routes flagged `data.showInNavigation` with a label, flattened. */
+	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/dist/force-app/main/default/uiBundles/angularinternalapp/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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/ui/alert/alert.component.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" />

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/ui/alert/alert.component.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 { MatIconModule } from '@angular/material/icon';
+
+/** Visual variant. */
+export type AppAlertVariant = 'default' | 'destructive';
+
+const BASE_CLASSES =
+	'relative w-full grid grid-cols-[auto_1fr] items-start gap-x-2 gap-y-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-[app-alert-action]:pr-18';
+const VARIANT_CLASSES: Record<AppAlertVariant, string> = {
+	default: 'bg-card text-card-foreground',
+	destructive: 'bg-card text-destructive',
+};
+
+/** Alert banner. Optional trailing control via the `app-alert-action` slot. */
+@Component({
+	selector: 'app-alert',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatIconModule],
+	templateUrl: './alert.component.html',
+	host: {
+		'data-slot': 'alert',
+		role: 'alert',
+		'[class]': 'hostClass()',
+	},
+})
+export class AlertComponent {
+	readonly variant = input<AppAlertVariant>('default');
+	readonly title = input<string>('');
+	readonly description = input<string>('');
+	/** Material icon ligature name, e.g. `info`, `error`, `warning`. */
+	readonly icon = input<string>('');
+
+	protected readonly hostClass = computed(
+		() => `${BASE_CLASSES} ${VARIANT_CLASSES[this.variant()]}`,
+	);
+}
+
+/** Trailing action slot for `app-alert`, pinned to the top-right. */
+@Component({
+	selector: 'app-alert-action',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: '<ng-content />',
+	host: {
+		'data-slot': 'alert-action',
+		class: 'absolute top-2 right-2',
+	},
+})
+export class AlertActionComponent {}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/ui/button/button.component.html

@@ -0,0 +1,18 @@
+<button
+	[matButton]="matAppearance()"
+	[class]="buttonClass()"
+	[class.destructive]="isDestructive()"
+	[type]="type()"
+	[disabled]="disabled()"
+	[attr.aria-label]="ariaLabel()"
+	[attr.aria-expanded]="ariaExpanded()"
+	(click)="clicked.emit($event)"
+>
+	@if (icon()) {
+		<mat-icon aria-hidden="true">{{ icon() }}</mat-icon>
+	}
+	<ng-content />
+	@if (iconEnd()) {
+		<mat-icon aria-hidden="true" iconPositionEnd>{{ iconEnd() }}</mat-icon>
+	}
+</button>

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/ui/button/button.component.scss

@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+@use '@angular/material' as mat;
+
+// Compact density themes — Material's canonical heights (36 / 32 / 28px).
+$-lg: mat.define-theme(
+	(
+		density: (
+			scale: -1,
+		),
+	)
+);
+$-md: mat.define-theme(
+	(
+		density: (
+			scale: -2,
+		),
+	)
+);
+$-sm: mat.define-theme(
+	(
+		density: (
+			scale: -3,
+		),
+	)
+);
+
+@mixin -height($h) {
+	--mat-button-filled-container-height: #{$h};
+	--mat-button-outlined-container-height: #{$h};
+	--mat-button-text-container-height: #{$h};
+	--mat-button-tonal-container-height: #{$h};
+	--mat-button-protected-container-height: #{$h};
+}
+
+@mixin -label-size($s) {
+	--mat-button-filled-label-text-size: #{$s};
+	--mat-button-outlined-label-text-size: #{$s};
+	--mat-button-text-label-text-size: #{$s};
+	--mat-button-tonal-label-text-size: #{$s};
+	--mat-button-protected-label-text-size: #{$s};
+}
+
+:host {
+	display: inline-flex;
+}
+
+.mat-mdc-button-base {
+	width: 100%;
+	font-weight: 500;
+	--mat-button-filled-container-shape: var(--radius-md);
+	--mat-button-outlined-container-shape: var(--radius-md);
+	--mat-button-text-container-shape: var(--radius-md);
+	--mat-button-tonal-container-shape: var(--radius-md);
+	--mat-button-protected-container-shape: var(--radius-md);
+}
+
+// Heights via Material's density scale; 24px (xs) sits below the button
+// density floor (-3 = 28px), so it sets the height token directly.
+.size-default,
+.size-icon {
+	@include mat.button-density($-md);
+}
+.size-sm,
+.size-icon-sm {
+	@include mat.button-density($-sm);
+}
+.size-lg,
+.size-icon-lg {
+	@include mat.button-density($-lg);
+}
+.size-xs,
+.size-icon-xs {
+	@include -height(1.5rem);
+}
+
+// Font-size isn't a density concern, so it stays a label token.
+.size-default,
+.size-lg {
+	@include -label-size(0.875rem);
+}
+.size-sm {
+	@include -label-size(0.8rem);
+}
+.size-xs {
+	@include -label-size(0.75rem);
+}
+
+// Icon-only: square, no min-width or horizontal padding. Material's leading-icon
+// margins assume a text label, so zero them to keep the icon centred.
+.size-icon,
+.size-icon-xs,
+.size-icon-sm,
+.size-icon-lg {
+	width: auto;
+	min-width: 0;
+	padding: 0;
+	aspect-ratio: 1;
+
+	.mat-icon {
+		margin: 0;
+	}
+}
+
+// Destructive: subtle red tint + red text, matching React's bg-destructive/10.
+.destructive {
+	--mat-button-filled-container-color: color-mix(in oklch, var(--destructive) 10%, transparent);
+	--mat-button-filled-label-text-color: var(--destructive);
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/ui/button/button.component.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { MatButtonModule, type MatButtonAppearance } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+/** Material's appearances plus `destructive`, which Material doesn't provide. */
+export type AppButtonAppearance = MatButtonAppearance | 'destructive';
+
+/** Button size variants. */
+export type AppButtonSize =
+	| 'default'
+	| 'xs'
+	| 'sm'
+	| 'lg'
+	| 'icon'
+	| 'icon-xs'
+	| 'icon-sm'
+	| 'icon-lg';
+
+/**
+ * Thin wrapper over `matButton`. Adds a `destructive` appearance and a `size`
+ * scale Material lacks; inputs drive the inner button (a host class/aria attr
+ * would land on `<app-button>`, not the real `<button>`).
+ */
+@Component({
+	selector: 'app-button',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatButtonModule, MatIconModule],
+	templateUrl: './button.component.html',
+	styleUrl: './button.component.scss',
+})
+export class ButtonComponent {
+	readonly appearance = input<AppButtonAppearance>('filled');
+	readonly size = input<AppButtonSize>('default');
+	readonly type = input<'button' | 'submit' | 'reset'>('button');
+	readonly disabled = input<boolean>(false);
+	readonly ariaLabel = input<string>();
+	readonly ariaExpanded = input<boolean>();
+	/** Extra classes for the inner button — `class` on the host forwards here. */
+	readonly classes = input<string>('', { alias: 'class' });
+	/** Leading / trailing Material icon ligature names, e.g. `search`. */
+	readonly icon = input<string>('');
+	readonly iconEnd = input<string>('');
+	readonly clicked = output<MouseEvent>();
+
+	/** `destructive` renders as a filled button carrying the destructive class. */
+	protected readonly matAppearance = computed<MatButtonAppearance>(() =>
+		this.appearance() === 'destructive' ? 'filled' : (this.appearance() as MatButtonAppearance),
+	);
+	protected readonly isDestructive = computed(() => this.appearance() === 'destructive');
+	/** Size class merged with any caller-supplied classes, applied to the button. */
+	protected readonly buttonClass = computed(() => `size-${this.size()} ${this.classes()}`.trim());
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/ui/card/card.component.scss

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+// `size="sm"` — compact padding. Material hardcodes the card's 16px padding
+// (there is no padding design token to override), so the compact size tightens
+// the real Material padding classes. `::ng-deep` is required because the slot
+// content (`mat-card-header/content/actions`) is projected — it lives in the
+// consumer's view, not this wrapper's — so a plain scoped selector can't reach
+// it. The rules are anchored under `.app-card-sm`, a class only this component
+// applies, so the deep selector stays contained to compact cards.
+.app-card-sm {
+	::ng-deep .mat-mdc-card-header {
+		padding: 0.75rem 0.75rem 0;
+	}
+
+	::ng-deep .mat-mdc-card-content {
+		padding: 0 0.75rem;
+
+		&:first-child {
+			padding-top: 0.75rem;
+		}
+
+		&:last-child {
+			padding-bottom: 0.75rem;
+		}
+	}
+
+	::ng-deep .mat-mdc-card-actions {
+		padding: 0.75rem;
+	}
+}