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

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

@@ -0,0 +1,10 @@
+<mat-paginator
+	[length]="length()"
+	[pageIndex]="pageIndex()"
+	[pageSize]="pageSize()"
+	[pageSizeOptions]="pageSizeOptions()"
+	[hidePageSize]="hidePageSize()"
+	[showFirstLastButtons]="showFirstLastButtons()"
+	[disabled]="disabled()"
+	(page)="page.emit($event)"
+/>

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { MatPaginator, type PageEvent } from '@angular/material/paginator';
+
+/**
+ * Thin wrapper over Material's `mat-paginator`. Presentation only — the host
+ * decides what each page change means by listening to `(page)`.
+ */
+@Component({
+	selector: 'app-paginator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatPaginator],
+	templateUrl: './paginator.component.html',
+})
+export class PaginatorComponent {
+	/** Total item count; Material derives the page count as `ceil(length / pageSize)`. */
+	readonly length = input<number>(0);
+	/** Zero-based index of the current page. */
+	readonly pageIndex = input<number>(0);
+	/** Items shown per page. */
+	readonly pageSize = input<number>(10);
+	/** Selectable page sizes; omit/empty to hide the size selector. */
+	readonly pageSizeOptions = input<readonly number[]>([]);
+	/** Disable navigation buttons and the size select (e.g. while loading). */
+	readonly disabled = input(false, { transform: booleanAttribute });
+	/** Hide the "Items per page" selector. */
+	readonly hidePageSize = input(false, { transform: booleanAttribute });
+	/** Show the first / last page jump buttons. */
+	readonly showFirstLastButtons = input(false, { transform: booleanAttribute });
+
+	/** Emitted when the user changes page or page size. */
+	readonly page = output<PageEvent>();
+}

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

@@ -0,0 +1,41 @@
+<span
+	cdkOverlayOrigin
+	#origin="cdkOverlayOrigin"
+	role="button"
+	tabindex="0"
+	[attr.aria-expanded]="open()"
+	(click)="toggle()"
+	(keydown.enter)="toggle()"
+	(keydown.space)="$event.preventDefault(); toggle()"
+>
+	<ng-content select="[trigger]" />
+</span>
+
+<ng-template
+	cdkConnectedOverlay
+	[cdkConnectedOverlayOrigin]="origin"
+	[cdkConnectedOverlayOpen]="open()"
+	[cdkConnectedOverlayHasBackdrop]="true"
+	cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+	[cdkConnectedOverlayOffsetY]="sideOffset()"
+	[cdkConnectedOverlayPositions]="[
+		{
+			originX: align(),
+			originY: 'bottom',
+			overlayX: align(),
+			overlayY: 'top',
+		},
+		{
+			originX: align(),
+			originY: 'top',
+			overlayX: align(),
+			overlayY: 'bottom',
+		},
+	]"
+	(backdropClick)="close()"
+	(detach)="close()"
+>
+	<div class="bg-white text-sm rounded-lg shadow-md ring-1 ring-black/10 outline-none">
+		<ng-content />
+	</div>
+</ng-template>

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

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+
+/**
+ * Popover backed by CDK Overlay. Slots: `[trigger]` (anchor, toggles the
+ * popover) and default (body). `open` is a two-way model; a backdrop click
+ * closes it.
+ */
+@Component({
+	selector: 'app-popover',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [CdkConnectedOverlay, CdkOverlayOrigin],
+	templateUrl: './popover.component.html',
+})
+export class PopoverComponent {
+	/**
+	 * Two-way bindable open state. Supports `[(open)]`, a plain `[open]`
+	 * input, or listening to the auto-generated `(openChange)` event.
+	 */
+	readonly open = model<boolean>(false);
+
+	/** Panel alignment relative to the trigger. Defaults to below-start. */
+	readonly align = input<'start' | 'center' | 'end'>('start');
+
+	/** Vertical gap between the trigger and the panel, in px. */
+	readonly sideOffset = input<number>(4);
+
+	toggle(): void {
+		this.open.set(!this.open());
+	}
+
+	close(): void {
+		this.open.set(false);
+	}
+}

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

@@ -0,0 +1,24 @@
+<mat-form-field
+	class="w-full"
+	[class]="'size-' + size()"
+	[appearance]="appearance()"
+	subscriptSizing="dynamic"
+>
+	@if (label()) {
+		<mat-label>{{ label() }}</mat-label>
+	}
+	<mat-select
+		[multiple]="multiple()"
+		[placeholder]="placeholder()"
+		[disabled]="disabled()"
+		[ngModel]="selection()"
+		(ngModelChange)="onSelectionChange($event)"
+	>
+		@if (multiple()) {
+			<mat-select-trigger>{{ multiTriggerLabel() }}</mat-select-trigger>
+		}
+		@for (option of options(); track option.value) {
+			<mat-option [value]="option.value">{{ option.label }}</mat-option>
+		}
+	</mat-select>
+</mat-form-field>

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

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+@use '../field-size' as field-size;
+
+/*
+ * Form-field-specific structural styling. Height comes from the `size` input
+ * (see field-size.scss); colour comes from the --mat-sys-* remap (styles.css).
+ * Here we only: give the outline our design-token radius, emit the size
+ * classes, and collapse the empty hint/error subscript row.
+ */
+@include field-size.sizes;
+
+:host {
+	display: block;
+	/*
+	 * Allow the host to shrink below the mat-form-field's intrinsic width when
+	 * used as a flex item (e.g. the operator select beside a date picker in a
+	 * date filter row). Without this, the default `min-width: auto` on a flex
+	 * item keeps each field at its content width and the row overflows.
+	 */
+	min-width: 0;
+}
+
+.mat-mdc-form-field {
+	--mdc-outlined-text-field-container-shape: var(--radius-md);
+	font-size: 0.875rem; /* text-sm, matches the React inputs */
+}
+
+.mat-mdc-form-field-subscript-wrapper {
+	display: none;
+}

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

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	input,
+	model,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule, type MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import type { AppFieldSize } from '../field-size';
+
+/** Shape of an option rendered in the dropdown. */
+export interface AppSelectOption {
+	value: string;
+	label: string;
+}
+
+/** Thin wrapper over Material's `mat-form-field` + `mat-select`. */
+@Component({
+	selector: 'app-select',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [FormsModule, MatFormFieldModule, MatSelectModule],
+	templateUrl: './select.component.html',
+	styleUrl: './select.component.scss',
+})
+export class SelectComponent {
+	/** Two-way bindable single-select value. Ignored when `multiple` is set. */
+	readonly value = model<string>('');
+
+	/** Two-way bindable multi-select values. Used only when `multiple` is `true`. */
+	readonly values = model<readonly string[]>([]);
+
+	/** Render checkbox options and allow more than one selection. */
+	readonly multiple = input(false, { transform: booleanAttribute });
+
+	readonly options = input<readonly AppSelectOption[]>([]);
+	readonly placeholder = input<string>('');
+	readonly label = input<string>('');
+	readonly disabled = input<boolean>(false);
+	readonly appearance = input<MatFormFieldAppearance>('outline');
+	/** Field height: `sm` = 24px, `default` = 32px, `lg` = 40px. */
+	readonly size = input<AppFieldSize>('default');
+
+	/** Value handed to `mat-select`: the `values` array when `multiple`, else `value`. */
+	protected readonly selection = computed(() => (this.multiple() ? this.values() : this.value()));
+
+	/** Multi-select trigger summary: the sole option's label, else "N selected". */
+	protected readonly multiTriggerLabel = computed(() => {
+		const selected = this.values();
+		if (selected.length === 1) {
+			const only = selected[0];
+			return this.options().find((o) => o.value === only)?.label ?? only;
+		}
+		return `${selected.length} selected`;
+	});
+
+	/** Single change handler — routes to the right model based on `multiple`. */
+	protected onSelectionChange(next: string | string[]): void {
+		if (this.multiple()) {
+			this.values.set((next as string[]) ?? []);
+		} else {
+			this.value.set((next as string) ?? '');
+		}
+	}
+}

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

@@ -0,0 +1 @@
+<mat-divider role="presentation" [vertical]="isVertical()" [inset]="inset()" />

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

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/*
+ * Material's `mat-divider` draws a full-height border for the vertical variant,
+ * so its element must fill the host. The host itself carries `self-stretch`
+ * (see component `hostClass`) to take the flex row's height; here we make the
+ * inner divider fill that height. Horizontal needs nothing extra — the divider
+ * is already `display:block; width:100%`.
+ */
+:host {
+	// A vertical divider is a zero-width line; keep it out of flex growth math.
+	&[data-orientation='vertical'] {
+		display: flex;
+	}
+}
+
+.mat-divider-vertical {
+	height: 100%;
+}

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

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	input,
+} from '@angular/core';
+import { MatDivider } from '@angular/material/divider';
+
+/** Layout axis of the separator line. */
+export type AppSeparatorOrientation = 'horizontal' | 'vertical';
+
+const BASE_CLASSES = 'shrink-0';
+const ORIENTATION_CLASSES: Record<AppSeparatorOrientation, string> = {
+	horizontal: 'block w-full',
+	vertical: 'self-stretch',
+};
+
+/**
+ * Divider built on Material's `mat-divider`. `decorative` (default) hides the
+ * host from assistive tech (`role="none"`); when false it exposes
+ * `role="separator"` + `aria-orientation`. The inner `mat-divider` is marked
+ * `role="presentation"` so it never announces a duplicate separator.
+ */
+@Component({
+	selector: 'app-separator',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatDivider],
+	templateUrl: './separator.component.html',
+	styleUrl: './separator.component.scss',
+	host: {
+		'data-slot': 'separator',
+		'[attr.data-orientation]': 'orientation()',
+		'[attr.role]': "decorative() ? 'none' : 'separator'",
+		'[attr.aria-orientation]':
+			"decorative() ? null : (orientation() === 'vertical' ? 'vertical' : 'horizontal')",
+		'[class]': 'hostClass()',
+	},
+})
+export class SeparatorComponent {
+	readonly orientation = input<AppSeparatorOrientation>('horizontal');
+	readonly decorative = input(true, { transform: booleanAttribute });
+	/** Adds Material's horizontal inset margin so the line doesn't run edge-to-edge. */
+	readonly inset = input(false, { transform: booleanAttribute });
+
+	protected readonly isVertical = computed(() => this.orientation() === 'vertical');
+
+	protected readonly hostClass = computed(
+		() => `${BASE_CLASSES} ${ORIENTATION_CLASSES[this.orientation()]}`,
+	);
+}

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

@@ -0,0 +1 @@
+<ng-content />

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

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/*
+ * The skeleton is a block by default so call sites only need to supply a width
+ * and height (`h-4 w-32`) — no `block` utility to repeat. The pulse lives here
+ * (rather than Tailwind's `animate-pulse`) so it can be switched off for users
+ * who ask for reduced motion.
+ */
+:host {
+	display: block;
+	animation: app-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes app-skeleton-pulse {
+	50% {
+		opacity: 0.5;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:host {
+		animation: none;
+	}
+}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/ui/skeleton/skeleton.component.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.component.html',
+	styleUrl: './skeleton.component.scss',
+	host: {
+		'data-slot': 'skeleton',
+		'aria-hidden': 'true',
+		class: 'bg-accent rounded-md',
+	},
+})
+export class SkeletonComponent {}

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/components/ui/spinner/spinner.component.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/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/agentforce/agentforce-conversation-client/agentforce-conversation-client.component.html

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

package/dist/force-app/main/default/uiBundles/angularinternalapp/src/app/features/agentforce/agentforce-conversation-client/agentforce-conversation-client.component.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: "./agentforce-conversation-client.component.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() },
+			);
+		});
+	}
+}