@salesforce/templates 66.11.1 → 66.12.0

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" />

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/alert/alert.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.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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/button/button.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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/button/button.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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/button/button.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.html',
+	styleUrl: './button.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/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/card/card.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;
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/card/card.ts

@@ -0,0 +1,110 @@
+/**
+ * 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 {
+	MatCard,
+	MatCardActions,
+	MatCardContent,
+	MatCardHeader,
+	MatCardSubtitle,
+	MatCardTitle,
+} from '@angular/material/card';
+
+/** Card container density. */
+export type AppCardSize = 'default' | 'sm';
+
+/**
+ * Thin wrapper over `mat-card`. Preserves the `app-card` / `app-card-*` slot API
+ * while Material drives the visual. `size="sm"` maps to a compact-padding class.
+ */
+@Component({
+	selector: 'app-card',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatCard],
+	template:
+		'<mat-card appearance="outlined" [class]="classes()" [class.app-card-sm]="size() === \'sm\'"><ng-content /></mat-card>',
+	styleUrl: './card.scss',
+})
+export class CardComponent {
+	readonly size = input<AppCardSize>('default');
+	/** Extra classes forwarded to the inner `mat-card` (host `class` lands here). */
+	readonly classes = input<string>('', { alias: 'class' });
+}
+
+/**
+ * Header slot — wraps `mat-card-header` and recreates its title/subtitle stack
+ * so the slots project by element selector (Material's static
+ * `[mat-card-title]` projection can't see the runtime attribute across this
+ * boundary, and would otherwise render title + subtitle side by side).
+ */
+@Component({
+	selector: 'app-card-header',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatCardHeader],
+	template: `<mat-card-header [class]="classes()">
+		<ng-content select="[mat-card-avatar]" />
+		<div class="app-card-header-text">
+			<ng-content select="app-card-title" />
+			<ng-content select="app-card-description" />
+		</div>
+		<ng-content />
+	</mat-card-header>`,
+	styles: '.app-card-header-text { display: flex; flex-direction: column; gap: 0.25rem; }',
+})
+export class CardHeaderComponent {
+	/** Extra classes forwarded to the inner `mat-card-header`. */
+	readonly classes = input<string>('', { alias: 'class' });
+}
+
+/** Title slot — Material's `MatCardTitle` styling. */
+@Component({
+	selector: 'app-card-title',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [MatCardTitle],
+	template: '<ng-content />',
+})
+export class CardTitleComponent {}
+
+/** Description slot — Material's `mat-card-subtitle` styling. */
+@Component({
+	selector: 'app-card-description',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [MatCardSubtitle],
+	template: '<ng-content />',
+})
+export class CardDescriptionComponent {}
+
+/** Action slot — pinned to the trailing edge of `app-card-header`. */
+@Component({
+	selector: 'app-card-action',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { style: 'margin-inline-start: auto; align-self: flex-start;' },
+	template: '<ng-content />',
+})
+export class CardActionComponent {}
+
+/** Body slot — Material's `mat-card-content`. */
+@Component({
+	selector: 'app-card-content',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [MatCardContent],
+	template: '<ng-content />',
+})
+export class CardContentComponent {}
+
+/**
+ * Footer slot — Material's `mat-card-actions` (a flex-row action bar).
+ * Material ships no inter-button spacing, so `:host` (the actions element)
+ * sets a `gap`.
+ */
+@Component({
+	selector: 'app-card-footer',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [MatCardActions],
+	styles: ':host { gap: 0.5rem; }',
+	template: '<ng-content />',
+})
+export class CardFooterComponent {}

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

@@ -0,0 +1,10 @@
+<mat-expansion-panel [expanded]="open()" (expandedChange)="open.set($event)">
+	<mat-expansion-panel-header>
+		@if (title()) {
+			<mat-panel-title>{{ title() }}</mat-panel-title>
+		} @else {
+			<ng-content select="[collapsibleHeader]" />
+		}
+	</mat-expansion-panel-header>
+	<ng-content />
+</mat-expansion-panel>

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/components/ui/collapsible/collapsible.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+/**
+ * Thin wrapper over Material's `mat-expansion-panel`. Two-way bindable `open`
+ * and a `title`; body via `<ng-content>`. For custom header content, omit
+ * `title` and project `[collapsibleHeader]`.
+ */
+@Component({
+	selector: 'app-collapsible',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [MatExpansionModule],
+	templateUrl: './collapsible.html',
+})
+export class CollapsibleComponent {
+	/** Two-way bindable expanded state. Supports `[(open)]`. */
+	readonly open = model<boolean>(false);
+
+	/** Header title text. Omit and project `[collapsibleHeader]` for custom content. */
+	readonly title = input<string>('');
+}

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

@@ -0,0 +1,25 @@
+<mat-form-field
+	class="w-full"
+	[class]="'size-' + size()"
+	[appearance]="appearance()"
+	subscriptSizing="dynamic"
+>
+	@if (label()) {
+		<mat-label>{{ label() }}</mat-label>
+	}
+	<input
+		matInput
+		[matDatepicker]="picker"
+		[min]="min()"
+		[max]="max()"
+		[placeholder]="placeholder()"
+		[disabled]="disabled()"
+		[readonly]="readonly()"
+		[(ngModel)]="value"
+		(click)="readonly() && picker.open()"
+		(keydown.enter)="readonly() && picker.open()"
+		(keydown.space)="readonly() && picker.open()"
+	/>
+	<mat-datepicker-toggle matIconSuffix [for]="picker" />
+	<mat-datepicker #picker />
+</mat-form-field>

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

@@ -0,0 +1,36 @@
+/**
+ * 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. two side-by-side pickers in a date-range filter,
+	 * or a picker beside an operator select). Without this, the default
+	 * `min-width: auto` on a flex item keeps each field at its content width and
+	 * the row overflows its container.
+	 */
+	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;
+}