@salesforce/templates 66.11.1 → 66.12.0

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/skeleton/skeleton.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+/**
+ * Loading skeleton — a pulsing block sized by host `class` utilities (e.g.
+ * `class="h-4 w-32"`); it has no intrinsic size, so always set width/height.
+ * `aria-hidden`, so announce loading via the container's `aria-busy`.
+ */
+@Component({
+	selector: 'app-skeleton',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	templateUrl: './skeleton.html',
+	styleUrl: './skeleton.scss',
+	host: {
+		'data-slot': 'skeleton',
+		'aria-hidden': 'true',
+		class: 'bg-accent rounded-md',
+	},
+})
+export class SkeletonComponent {}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/components/ui/spinner/spinner.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatProgressSpinnerModule, ProgressSpinnerMode } from '@angular/material/progress-spinner';
+
+/**
+ * Thin wrapper over Material's `mat-progress-spinner`. Defaults to an
+ * indeterminate 24px spinner. `ariaLabel` names the `role="progressbar"`.
+ */
+@Component({
+	selector: 'app-spinner',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatProgressSpinnerModule],
+	template: `
+		<mat-progress-spinner
+			[mode]="mode()"
+			[diameter]="diameter()"
+			[value]="value()"
+			[attr.aria-label]="ariaLabel()"
+		/>
+	`,
+})
+export class SpinnerComponent {
+	readonly diameter = input<number>(24);
+	readonly mode = input<ProgressSpinnerMode>('indeterminate');
+
+	/** Progress value (0–100) used only when `mode` is `determinate`. */
+	readonly value = input<number>(0);
+
+	/** Accessible name announced by assistive tech. */
+	readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
+}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/agentforce/agentforce-embed.service.ts

@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { Injectable } from "@angular/core";
+import {
+	embedAgentforceClient,
+	type AgentforceClientConfig,
+} from "@salesforce/agentforce-conversation-client";
+import type {
+	AgentforceErrorHandler,
+	AgentforceReadyHandler,
+	ResolvedEmbedOptions,
+} from "../../types/conversation";
+
+/** Optional ready/error handlers forwarded to the embed client. */
+export interface AgentforceEmbedHandlers {
+	onReady?: AgentforceReadyHandler;
+	onError?: AgentforceErrorHandler;
+}
+
+const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host";
+const EXISTING_EMBED_SELECTOR = 'lightning-out-application[data-lo="acc"]';
+
+/**
+ * App-wide singleton that owns the one-time Lightning Out embed of the
+ * Agentforce Conversation Client. The Angular analogue of the React
+ * `window.__agentforceConversationClientSingleton`: because the service is
+ * `providedIn: 'root'`, a single instance is shared across the app, so its
+ * `initialized` / `initPromise` fields guarantee exactly one embed per app —
+ * regardless of how many client components mount.
+ *
+ * A valid Salesforce session is required for the given org; auth is resolved at
+ * embed time (frontdoor URL in dev via `/__lo/frontdoor`, `SFDC_ENV.orgUrl` in
+ * prod). Config is passed through to the embed client as-is.
+ */
+@Injectable({ providedIn: "root" })
+export class AgentforceEmbedService {
+	private initialized = false;
+	private initPromise?: Promise<void>;
+
+	/**
+	 * Embed the client once. Subsequent calls are no-ops while an embed is in
+	 * flight or already complete. `host` is the inline container element (when
+	 * rendering inline); when omitted the global floating host is used.
+	 */
+	embed(
+		config: AgentforceClientConfig,
+		overrides: ResolvedEmbedOptions,
+		host?: HTMLElement | null,
+		handlers?: AgentforceEmbedHandlers,
+	): void {
+		if (!config.agentId) {
+			throw new Error(
+				"AgentforceConversationClient requires agentId. " +
+					"Pass flat inputs only (agentId, agentLabel, inline, headerEnabled, showHeaderIcon, width, height, styleTokens).",
+			);
+		}
+
+		const inline = config.renderingConfig?.mode === "inline";
+		if (inline && !host) {
+			// Inline host not yet in the DOM — the component retries after render.
+			return;
+		}
+
+		if (this.initialized || this.initPromise) {
+			return;
+		}
+
+		const shouldFetchFrontdoor = window.location.hostname === "localhost";
+
+		if (shouldFetchFrontdoor) {
+			this.initPromise = fetch("/__lo/frontdoor")
+				.then(async (res) => {
+					if (!res.ok) {
+						console.error("frontdoor fetch failed");
+						return;
+					}
+					const { frontdoorUrl: resolvedFrontdoorUrl } = await res.json();
+					this.safeInitialize(
+						config,
+						{ ...overrides, frontdoorUrl: resolvedFrontdoorUrl },
+						host,
+						handlers,
+					);
+				})
+				.catch((err) => {
+					console.error("AgentforceConversationClient: failed to fetch frontdoor URL", err);
+				})
+				.finally(() => {
+					this.initPromise = undefined;
+				});
+		} else {
+			this.initPromise = Promise.resolve()
+				.then(() => {
+					this.safeInitialize(
+						config,
+						{ ...this.getDefaultEmbedOptions(), ...overrides },
+						host,
+						handlers,
+					);
+				})
+				.catch((err) => {
+					console.error("AgentforceConversationClient: failed to embed Agentforce client", err);
+				})
+				.finally(() => {
+					this.initPromise = undefined;
+				});
+		}
+	}
+
+	private safeInitialize(
+		config: AgentforceClientConfig,
+		options: ResolvedEmbedOptions,
+		host?: HTMLElement | null,
+		handlers?: AgentforceEmbedHandlers,
+	): void {
+		try {
+			this.initialize(config, options, host, handlers);
+		} catch (initErr) {
+			console.error("AgentforceConversationClient: initialization failed", initErr);
+			this.initialized = false;
+		}
+	}
+
+	private initialize(
+		config: AgentforceClientConfig,
+		options: ResolvedEmbedOptions,
+		host?: HTMLElement | null,
+		handlers?: AgentforceEmbedHandlers,
+	): void {
+		if (this.initialized) {
+			return;
+		}
+
+		const existingEmbed = document.querySelector(EXISTING_EMBED_SELECTOR);
+		if (existingEmbed) {
+			this.initialized = true;
+			return;
+		}
+
+		const inline = config.renderingConfig?.mode === "inline";
+		const container = inline ? host! : this.getOrCreateGlobalHost();
+
+		try {
+			embedAgentforceClient({
+				container,
+				salesforceOrigin: options.salesforceOrigin,
+				frontdoorUrl: options.frontdoorUrl,
+				agentforceClientConfig: config,
+				onReady: handlers?.onReady,
+				onError: handlers?.onError,
+			});
+			this.initialized = true;
+		} catch (err) {
+			// Strip a partially-created LO element so the next mount can retry.
+			const partialEmbed = document.querySelector(EXISTING_EMBED_SELECTOR);
+			partialEmbed?.remove();
+			console.error("AgentforceConversationClient: initialization failed", err);
+		}
+	}
+
+	private getOrCreateGlobalHost(): HTMLDivElement {
+		let host = document.getElementById(GLOBAL_HOST_ID) as HTMLDivElement | null;
+		if (!host) {
+			host = document.createElement("div");
+			host.id = GLOBAL_HOST_ID;
+			document.body.appendChild(host);
+		}
+		return host;
+	}
+
+	private getDefaultEmbedOptions(): ResolvedEmbedOptions {
+		return { salesforceOrigin: SFDC_ENV?.orgUrl };
+	}
+}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/agentforce/conversation.html

@@ -0,0 +1,3 @@
+@if (isInline()) {
+<div #host></div>
+}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/agentforce/conversation.ts

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	afterNextRender,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	ElementRef,
+	inject,
+	input,
+	viewChild,
+} from "@angular/core";
+import type { AgentforceClientConfig } from "@salesforce/agentforce-conversation-client";
+import type {
+	AgentforceErrorHandler,
+	AgentforceReadyHandler,
+	StyleTokens,
+} from "../../types/conversation";
+import { AgentforceEmbedService } from "./agentforce-embed.service";
+
+/**
+ * Angular component that embeds the Agentforce Conversation Client (copilot /
+ * agent UI) via Lightning Out. The faithful port of the React
+ * `AgentforceConversationClient`: flat inputs are normalized into an
+ * `AgentforceClientConfig` (a `computed()`, the analogue of the React `useMemo`)
+ * and handed to {@link AgentforceEmbedService}, which owns the one-time embed
+ * (the analogue of the React window-singleton).
+ *
+ * Rendering mode follows `inline`: inline embeds render into this component's
+ * own `<div #host>`, floating embeds attach to a shared body-level host and this
+ * component renders nothing. Requires a valid Salesforce session for the org;
+ * config is passed through to the embed client as-is.
+ */
+@Component({
+	selector: "app-agentforce-conversation-client",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	templateUrl: "./conversation.html",
+})
+export class AgentforceConversationClientComponent {
+	private readonly embedService = inject(AgentforceEmbedService);
+
+	/** Required: id of the agent to load. */
+	readonly agentId = input.required<string>();
+	/** Display name for the agent shown in the chat header. */
+	readonly agentLabel = input<string>();
+	/** If true, renders inline. If omitted/false, renders floating. */
+	readonly inline = input<boolean>(false);
+	/** Show/hide chat header. Defaults to true for floating; can only be set for inline mode. */
+	readonly headerEnabled = input<boolean>();
+	/** Show/hide agent icon in the header. */
+	readonly showHeaderIcon = input<boolean>();
+	/** Inline width. */
+	readonly width = input<string | number>();
+	/** Inline height. */
+	readonly height = input<string | number>();
+	/** Theme overrides for the chat UI. */
+	readonly styleTokens = input<StyleTokens>();
+	readonly isFileBased = input<boolean>();
+	/** Optional. Resolved internally when omitted (frontdoor in dev, org URL in prod). */
+	readonly salesforceOrigin = input<string>();
+	/** Optional. Resolved internally in dev via /__lo/frontdoor when omitted. */
+	readonly frontdoorUrl = input<string>();
+	/** Callback invoked when the Lightning Out application is ready. */
+	readonly onReady = input<AgentforceReadyHandler>();
+	/** Callback invoked when a Lightning Out error occurs. */
+	readonly onError = input<AgentforceErrorHandler>();
+
+	/** Inline render target — present only when `inline()` is true. */
+	private readonly host = viewChild<ElementRef<HTMLDivElement>>("host");
+
+	/**
+	 * Normalized embed config built from the flat inputs. Mirrors the React
+	 * `useMemo`: undefined inputs are omitted so client defaults apply, and the
+	 * `renderingConfig.mode` derives from `inline`. `showAvatar` and `channel`
+	 * are fixed to match the React feature.
+	 */
+	protected readonly config = computed<AgentforceClientConfig>(() => {
+		const renderingConfig: NonNullable<AgentforceClientConfig["renderingConfig"]> = {
+			mode: this.inline() ? "inline" : "floating",
+			...(this.headerEnabled() !== undefined && { headerEnabled: this.headerEnabled() }),
+			...(this.showHeaderIcon() !== undefined && { showHeaderIcon: this.showHeaderIcon() }),
+			showAvatar: false,
+			...(this.width() !== undefined && { width: this.width() }),
+			...(this.height() !== undefined && { height: this.height() }),
+		};
+
+		return {
+			agentId: this.agentId(),
+			...(this.agentLabel() !== undefined && { agentLabel: this.agentLabel() }),
+			...(this.styleTokens() !== undefined && { styleTokens: this.styleTokens() }),
+			...(this.isFileBased() !== undefined && { isFileBased: this.isFileBased() }),
+			renderingConfig,
+			channel: "Vibes",
+		};
+	});
+
+	/** Whether the chat should render inline (drives the host `<div>`). */
+	protected readonly isInline = computed(() => this.config().renderingConfig?.mode === "inline");
+
+	constructor() {
+		// Embed after the view (and any inline host `<div>`) exists in the DOM —
+		// the analogue of the React `useEffect`. The service guards against
+		// double-embedding, so running once after render is sufficient.
+		afterNextRender(() => {
+			this.embedService.embed(
+				this.config(),
+				{
+					salesforceOrigin: this.salesforceOrigin(),
+					frontdoorUrl: this.frontdoorUrl(),
+				},
+				this.host()?.nativeElement ?? null,
+				{ onReady: this.onReady(), onError: this.onError() },
+			);
+		});
+	}
+}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/object-search/breadcrumb/breadcrumb.html

@@ -0,0 +1,54 @@
+<nav aria-label="Breadcrumb" class="mb-3">
+	<ol
+		class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5"
+	>
+		@if (includeHome()) {
+		<li class="inline-flex items-center gap-1.5">
+			<a [routerLink]="'/'" class="hover:text-foreground transition-colors">{{ homeLabel() }}</a>
+		</li>
+		<li aria-hidden="true" class="[&>svg]:size-3.5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<polyline points="9 18 15 12 9 6" />
+			</svg>
+		</li>
+		} @if (isDetailView()) {
+		<li class="inline-flex items-center gap-1.5">
+			<a [routerLink]="listPath()" class="hover:text-foreground transition-colors"
+				>{{ listLabel() }}</a
+			>
+		</li>
+		<li aria-hidden="true" class="[&>svg]:size-3.5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<polyline points="9 18 15 12 9 6" />
+			</svg>
+		</li>
+		<li class="inline-flex items-center gap-1.5">
+			@if (loading() && !recordName()) {
+			<app-skeleton class="h-4 w-32" />
+			} @else {
+			<span class="text-foreground font-normal" aria-current="page">{{ recordName() }}</span>
+			}
+		</li>
+		} @else {
+		<li class="inline-flex items-center gap-1.5">
+			<span class="text-foreground font-normal" aria-current="page">{{ listLabel() }}</span>
+		</li>
+		}
+	</ol>
+</nav>

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/object-search/breadcrumb/breadcrumb.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 { RouterLink } from "@angular/router";
+import { SkeletonComponent } from "../../../components/ui/skeleton/skeleton";
+
+/**
+ * Object-search breadcrumb — Home > Records list > (optional) Record name.
+ *
+ * Mirrors the React `ObjectBreadcrumb`. Renders the list-only crumb by default
+ * and switches to the detail-view crumb (with record name + skeleton fallback)
+ * as soon as `loading` or `recordName` is set. Uses Angular `routerLink` where
+ * the React version uses `react-router`'s `Link`.
+ */
+@Component({
+	selector: "app-object-breadcrumb",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [RouterLink, SkeletonComponent],
+	templateUrl: "./breadcrumb.html",
+})
+export class ObjectBreadcrumbComponent {
+	/** Router path for the object list view (e.g. `/accounts`). */
+	readonly listPath = input.required<string>();
+	/** Label for the list crumb (e.g. `Accounts`). */
+	readonly listLabel = input.required<string>();
+	/** Record name for the detail-view leaf crumb; omit for list-only view. */
+	readonly recordName = input<string | undefined>(undefined);
+	/** Show a skeleton in the leaf crumb while the record is loading. */
+	readonly loading = input<boolean>(false);
+	/** Prepend a Home crumb (default `true`). */
+	readonly includeHome = input<boolean>(true);
+	/** Label for the Home crumb (default `Home`). */
+	readonly homeLabel = input<string>("Home");
+
+	/** `true` when the crumb should render list + record leaves. */
+	protected readonly isDetailView = computed(() => this.loading() || !!this.recordName());
+}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/active-filters.html

@@ -0,0 +1,23 @@
+@if (chips().length > 0) {
+<div class="flex flex-wrap gap-2">
+	@for (chip of chips(); track chip.field) {
+	<app-button
+		appearance="outlined"
+		size="sm"
+		iconEnd="close"
+		[ariaLabel]="'Remove filter ' + chip.label"
+		(clicked)="onRemove(chip.field)"
+	>
+		{{ chip.label }}
+	</app-button>
+	}
+	<app-button
+		appearance="destructive"
+		size="sm"
+		ariaLabel="Clear all filters"
+		(clicked)="onClearAll()"
+	>
+		Clear all
+	</app-button>
+</div>
+}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/active-filters.ts

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, computed, inject } from "@angular/core";
+import { ButtonComponent } from "../../../components/ui/button/button";
+import { ObjectSearchStateService } from "../object-search-state.service";
+import type { ActiveFilterValue } from "../utils/filter-utils";
+
+/**
+ * Format the display label for one active filter chip. Mirrors the React
+ * `formatFilterLabel`; a switch over the filter's declared `type`.
+ */
+function formatFilterLabel(filter: ActiveFilterValue): string {
+	const { label, type, value, min, max } = filter;
+	switch (type) {
+		case "search":
+			return `Search: ${value}`;
+		case "text":
+		case "picklist":
+			return `${label}: ${value}`;
+		case "multipicklist": {
+			const values = value ? value.split(",") : [];
+			if (values.length <= 2) return `${label}: ${values.join(", ")}`;
+			return `${label}: ${values.length} selected`;
+		}
+		case "boolean":
+			return `${label}: ${value === "true" ? "Yes" : "No"}`;
+		case "numeric": {
+			if (min && max) return `${label}: ${min} - ${max}`;
+			if (min) return `${label}: >= ${min}`;
+			return `${label}: <= ${max}`;
+		}
+		case "date":
+		case "datetime":
+		case "daterange":
+		case "datetimerange": {
+			if (min && max) return `${label}: ${min} to ${max}`;
+			if (min) return `${label}: from ${min}`;
+			return `${label}: until ${max}`;
+		}
+		default:
+			return label;
+	}
+}
+
+/**
+ * Removable-chip strip for the currently active filters.
+ *
+ * Reads `filters()` from {@link ObjectSearchStateService}; clicking a chip
+ * removes that filter, and the `Clear all` chip clears everything via
+ * `resetAll()`. Mirrors the React `ActiveFilters` component.
+ */
+@Component({
+	selector: "app-active-filters",
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [ButtonComponent],
+	templateUrl: "./active-filters.html",
+})
+export class ActiveFiltersComponent {
+	private readonly state = inject(ObjectSearchStateService);
+
+	/** Active filters signal from the state service. */
+	protected readonly filters = this.state.filters;
+	/** Display strings paired with the underlying field for chip actions. */
+	protected readonly chips = computed(() =>
+		this.filters().map((f) => ({ field: f.field, label: formatFilterLabel(f) })),
+	);
+
+	protected onRemove(field: string): void {
+		this.state.removeFilter(field);
+	}
+
+	protected onClearAll(): void {
+		this.state.resetAll();
+	}
+}

package/lib/templates/project/angularintapp/_p_/_m_/_w_/_a_/src/app/features/object-search/filters/date-filter.html

@@ -0,0 +1,18 @@
+<app-filter-field-wrapper [label]="config().label" [helpText]="config().helpText">
+	<div class="flex gap-2">
+		<app-select
+			class="flex-1"
+			[options]="operatorOptions"
+			[value]="operator()"
+			(valueChange)="onOperatorChange($event)"
+		/>
+		<app-date-picker
+			class="flex-1"
+			placeholder="Pick a date"
+			[readonly]="true"
+			[max]="maxDate()"
+			[value]="currentDate()"
+			(valueChange)="onDateChange($event)"
+		/>
+	</div>
+</app-filter-field-wrapper>