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

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/pages/not-found/not-found.component.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { NotFoundComponent } from './not-found.component';
+
+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/angularinternalapp/src/app/pages/not-found/not-found.component.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.component.html',
+})
+export class NotFoundComponent {}

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

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import type {
+	AgentforceErrorHandler,
+	AgentforceReadyHandler,
+} from "@salesforce/agentforce-conversation-client";
+
+/** Auth options resolved at embed time (frontdoor in dev, org URL in prod). */
+export interface ResolvedEmbedOptions {
+	salesforceOrigin?: string;
+	frontdoorUrl?: string;
+}
+
+export type StyleTokens = Record<string, string>;
+
+/** Ready/error callbacks re-exported for consumers binding the component. */
+export type { AgentforceErrorHandler, AgentforceReadyHandler };
+
+/**
+ * Inputs accepted by {@link AgentforceConversationClientComponent}. The Angular
+ * port of the React `AgentforceConversationClientProps`; each field maps to a
+ * component `input()` (with `agentId` required). Config is passed through to the
+ * embed client as-is.
+ */
+export interface AgentforceConversationClientProps {
+	/** Required in practice: id of the agent to load. */
+	agentId: string;
+	/** Display name for the agent shown in the chat header. */
+	agentLabel?: string;
+	/** If true, renders inline. If omitted/false, renders floating. */
+	inline?: boolean;
+	/** Show/hide chat header. Defaults to true for floating; can only be set for inline mode. */
+	headerEnabled?: boolean;
+	/** Show/hide agent icon in the header. */
+	showHeaderIcon?: boolean;
+	/** Inline width. */
+	width?: string | number;
+	/** Inline height. */
+	height?: string | number;
+	/** Theme overrides for the chat UI. */
+	styleTokens?: StyleTokens;
+	isFileBased?: boolean;
+	/** Optional. If not provided, resolved internally (e.g. from /__lo/frontdoor in dev, window.location.origin in prod). */
+	salesforceOrigin?: string;
+	/** Optional. If not provided, resolved internally in dev via /__lo/frontdoor. */
+	frontdoorUrl?: string;
+	/** Callback invoked when the Lightning Out application is ready. */
+	onReady?: AgentforceReadyHandler;
+	/** Callback invoked when a Lightning Out error occurs. */
+	onError?: AgentforceErrorHandler;
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/types/globals.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+interface SfdcEnv {
+	/** Salesforce org force.com URL (e.g., "https://myorg.lightning.force.com"). */
+	orgUrl?: string;
+}
+
+// eslint-disable-next-line no-var -- ambient global declaration
+declare var SFDC_ENV: SfdcEnv | undefined;

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/utils/async-data.ts

@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { effect, Injector, signal, type Signal } from '@angular/core';
+import { toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { from, of, switchMap } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
+
+/** Reactive async-data snapshot: current data, loading, and error. */
+export interface AsyncData<T> {
+	/** Latest successful result. Kept visible during a refetch. */
+	readonly data: Signal<T | null>;
+	/** True while a fetch for the current args is in flight. */
+	readonly loading: Signal<boolean>;
+	/** Error message from the most recent failed fetch, else null. */
+	readonly error: Signal<string | null>;
+}
+
+/**
+ * The Angular analogue of the React `useAsyncData` hook.
+ *
+ * Re-runs `fetcher(args)` whenever the `args` signal changes, using RxJS
+ * `switchMap` so an in-flight request is cancelled (ignored) when newer args
+ * arrive — the latest-wins guarantee, matching the React hook's cleanup flag.
+ *
+ * Behavioural parity notes:
+ * - `loading` flips true the instant args change and false when the matching
+ *   response resolves.
+ * - `data` retains the previous result while a refetch is in flight (avoids a
+ *   flash of empty state); it only resets to `null` on error.
+ * - Errors are surfaced as a message string and logged, mirroring the hook.
+ *
+ * Must be called within an injection context (component/service constructor or
+ * field initializer) unless an `injector` is supplied.
+ *
+ * @param argsSignal - Reactive inputs; a change triggers a refetch.
+ * @param fetcher    - Async function producing the result for the given args.
+ * @param injector   - Optional injector when called outside an injection context.
+ */
+export function createAsyncData<TArgs, T>(
+	argsSignal: Signal<TArgs>,
+	fetcher: (args: TArgs) => Promise<T>,
+	injector?: Injector,
+): AsyncData<T> {
+	const data = signal<T | null>(null);
+	const error = signal<string | null>(null);
+	// A fetch is pending from the moment args change until its response lands.
+	const pending = signal(true);
+
+	const args$ = toObservable(argsSignal, injector ? { injector } : undefined);
+
+	const result = toSignal(
+		args$.pipe(
+			// Mark loading + clear stale error synchronously as new args arrive.
+			tap(() => {
+				pending.set(true);
+				error.set(null);
+			}),
+			switchMap((args) =>
+				from(fetcher(args)).pipe(
+					map((value) => ({ value, err: null as string | null })),
+					catchError((err: unknown) => {
+						console.error(err);
+						return of({
+							value: null as T | null,
+							err: err instanceof Error ? err.message : 'An error occurred',
+						});
+					}),
+				),
+			),
+			tap((outcome) => {
+				if (outcome.err !== null) {
+					error.set(outcome.err);
+					data.set(null);
+				} else {
+					data.set(outcome.value);
+				}
+				pending.set(false);
+			}),
+		),
+		{ initialValue: null, ...(injector ? { injector } : {}) },
+	);
+
+	// Keep `result` subscribed so the pipeline runs even if no template reads it.
+	effect(
+		() => {
+			result();
+		},
+		injector ? { injector } : undefined,
+	);
+
+	return {
+		data: data.asReadonly(),
+		loading: pending.asReadonly(),
+		error: error.asReadonly(),
+	};
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>MyAngularApp</title>
+		<base href="/" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/x-icon" href="favicon.ico" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+	</head>
+	<body>
+		<app-root></app-root>
+	</body>
+</html>

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

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ *
+ * feature-angular-agentforce-conversation-client – ACC Conversation Client
+ */
+
+export { AgentforceConversationClientComponent } from "./app/features/agentforce/agentforce-conversation-client/agentforce-conversation-client.component";
+export { AgentforceEmbedService } from "./app/features/agentforce/agentforce-embed.service";
+export type {
+	AgentforceConversationClientProps,
+	ResolvedEmbedOptions,
+	StyleTokens,
+} from "./app/types/conversation";

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

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/styles.scss

@@ -0,0 +1,170 @@
+@import 'tailwindcss';
+
+@layer base {
+	html,
+	body {
+		@apply min-h-screen;
+	}
+
+	body {
+		@apply antialiased bg-white;
+	}
+}
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * shadcn design tokens, ported from the React base app's global.css so the
+ * shared object-search feature (bg-card, text-muted-foreground, border-border,
+ * rounded-* via --radius, etc.) renders identically in Angular. The React base
+ * also imports tw-animate-css and shadcn/tailwind.css (accordion keyframes +
+ * data-* variants) — omitted here as they are not installed for the Angular
+ * base and are not required for layout/color parity.
+ */
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+/*
+ * Angular Material colour re-skin — layered on top of the custom M3 theme
+ * defined in theme.scss. The theme owns density (compact control heights) and
+ * seeds the base `--mat-sys-*` system variables; here we remap the colour and
+ * shape system variables to our shadcn design tokens so every Material
+ * component adopts the shadcn look without touching component code. This block
+ * loads after theme.scss, so these values win.
+ *
+ * Control sizing is NOT set here — density handles heights, and any remaining
+ * form-field-specific styling lives in the component's own scoped CSS.
+ */
+:root {
+	--mat-sys-primary: var(--primary);
+	--mat-sys-on-primary: var(--primary-foreground);
+	--mat-sys-surface: var(--background);
+	--mat-sys-on-surface: var(--foreground);
+	--mat-sys-surface-variant: var(--muted);
+	--mat-sys-on-surface-variant: var(--muted-foreground);
+	--mat-sys-outline: var(--border);
+	--mat-sys-outline-variant: var(--border);
+	--mat-sys-error: var(--destructive);
+	--mat-sys-corner-small: var(--radius-sm);
+	--mat-sys-corner-medium: var(--radius-md);
+	--mat-sys-corner-large: var(--radius-lg);
+
+	// Card subtitle — Material defaults this to `--mat-sys-on-surface` (the same
+	// dark colour as the title). React renders the card description in muted
+	// grey (`text-muted-foreground`), so point the subtitle token there.
+	--mat-card-subtitle-text-color: var(--muted-foreground);
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/theme.scss

@@ -0,0 +1,39 @@
+// Copyright (c) 2026, Salesforce, Inc.,
+// All rights reserved.
+// For full license text, see the LICENSE.txt file
+
+// Angular Material M3 theme.
+// See https://material.angular.dev/guide/theming.
+//
+// This replaces the prebuilt azure-blue theme so we can set a negative
+// `density` — the standard, system-driven way to get the compact control
+// heights the React reference uses (no hardcoded pixel heights anywhere).
+//
+// Colour is intentionally NOT finalised here: the shadcn design tokens are
+// applied on top by remapping `--mat-sys-*` in styles.css, which loads after
+// this file. The palette below only seeds Material's base system variables.
+@use '@angular/material' as mat;
+
+html {
+	@include mat.theme(
+		(
+			color: (
+				theme-type: light,
+				primary: mat.$azure-palette,
+				tertiary: mat.$blue-palette,
+			),
+			// Font family reads Tailwind's system stack (`--font-sans`, the same
+			// default the React reference uses) instead of Material's Roboto, so
+			// Material components and Tailwind-styled text share one font. Tailwind
+			// is the single source of the family; the typescale sizes/weights stay
+			// Material's own.
+			typography: (
+					plain-family: var(--font-sans),
+					brand-family: var(--font-sans),
+				),
+			// Compact density (scale 0 to -5). Drives control heights via
+			// Material's own tokens instead of hardcoded px.
+			density: -2,
+		)
+	);
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/types/sf-globals.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Build-time constants injected via esbuild `define`. Substituted by
+ * @salesforce/angular-plugin-ui-bundle during build (see esbuild/api-version.mjs
+ * and angular.json plugins[]).
+ *
+ * Without substitution, `@salesforce/platform-sdk` and `@salesforce/ui-bundle`
+ * fall back to "65.0" — the published packages contain the literal token.
+ */
+declare const __SF_API_VERSION__: string;

package/dist/force-app/main/default/uiBundles/angularinternalapp/tsconfig.app.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/ui-bundle.json

@@ -0,0 +1,7 @@
+{
+  "outputDir": "dist",
+  "routing": {
+    "trailingSlash": "never",
+    "fallback": "index.html"
+  }
+}

package/dist/jest.config.js

@@ -0,0 +1,6 @@
+const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
+
+module.exports = {
+    ...jestConfig,
+    modulePathIgnorePatterns: ['<rootDir>/.localdevserver']
+};