@salesforce/ui-bundle-template-app-angular-template-b2x 11.60.0 → 11.62.1

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/utils/hlm.ts

@@ -0,0 +1,313 @@
+import { isPlatformBrowser } from '@angular/common';
+import {
+	DestroyRef,
+	effect,
+	ElementRef,
+	HostAttributeToken,
+	inject,
+	Injector,
+	PLATFORM_ID,
+	runInInjectionContext,
+} from '@angular/core';
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function hlm(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// Global map to track class managers per element
+const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
+// Global mutation observer for all elements
+let globalObserver: MutationObserver | null = null;
+const observedElements = new Set<HTMLElement>();
+
+interface ElementClassManager {
+	element: HTMLElement;
+	sources: Map<number, { classes: Set<string>; order: number }>;
+	baseClasses: Set<string>;
+	isUpdating: boolean;
+	nextOrder: number;
+	hasInitialized: boolean;
+	restoreRafId: number | null;
+	/** Transitions are suppressed until the first effect writes correct classes */
+	transitionsSuppressed: boolean;
+	/** Original inline transition value to restore after suppression (empty string = none was set) */
+	previousTransition: string;
+	/** Original inline transition priority to preserve !important when restoring */
+	previousTransitionPriority: string;
+}
+
+let sourceCounter = 0;
+
+/**
+ * This function dynamically adds and removes classes for a given element without requiring
+ * the a class binding (e.g. `[class]="..."`) which may interfere with other class bindings.
+ *
+ * 1. This will merge the existing classes on the element with the new classes.
+ * 2. It will also remove any classes that were previously added by this function but are no longer present in the new classes.
+ * 3. Multiple calls to this function on the same element will be merged efficiently.
+ */
+export function classes(computed: () => ClassValue[] | string, options: ClassesOptions = {}) {
+	runInInjectionContext(options.injector ?? inject(Injector), () => {
+		const elementRef = options.elementRef ?? inject(ElementRef);
+		const platformId = inject(PLATFORM_ID);
+		const destroyRef = inject(DestroyRef);
+		const baseClasses = inject(new HostAttributeToken('class'), { optional: true });
+
+		const element = elementRef.nativeElement;
+
+		// Create unique identifier for this source
+		const sourceId = sourceCounter++;
+
+		// Get or create the class manager for this element
+		let manager = elementClassManagers.get(element);
+
+		if (!manager) {
+			// Initialize base classes from variation (host attribute 'class')
+			const initialBaseClasses = new Set<string>();
+
+			if (baseClasses) {
+				toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
+			}
+
+			manager = {
+				element,
+				sources: new Map(),
+				baseClasses: initialBaseClasses,
+				isUpdating: false,
+				nextOrder: 0,
+				hasInitialized: false,
+				restoreRafId: null,
+				transitionsSuppressed: false,
+				previousTransition: '',
+				previousTransitionPriority: '',
+			};
+			elementClassManagers.set(element, manager);
+
+			// Setup global observer if needed and register this element
+			setupGlobalObserver(platformId);
+			observedElements.add(element);
+
+			// Suppress transitions until the first effect writes correct classes and
+			// the browser has painted them. This prevents CSS transition animations
+			// during hydration when classes change from SSR state to client state.
+			if (isPlatformBrowser(platformId)) {
+				manager.previousTransition = element.style.getPropertyValue('transition');
+				manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
+				element.style.setProperty('transition', 'none', 'important');
+				manager.transitionsSuppressed = true;
+			}
+		}
+
+		// Assign order once at registration time
+		const sourceOrder = manager.nextOrder++;
+
+		function updateClasses(): void {
+			// Get the new classes from the computed function
+			const newClasses = toClassList(computed());
+
+			// Update this source's classes, keeping the original order
+			manager!.sources.set(sourceId, {
+				classes: new Set(newClasses),
+				order: sourceOrder,
+			});
+
+			// Update the element
+			updateElement(manager!);
+
+			// Re-enable transitions after the first effect writes correct classes.
+			// Deferred to next animation frame so the browser paints the class change
+			// with transitions disabled first, then re-enables them.
+			if (manager!.transitionsSuppressed) {
+				manager!.transitionsSuppressed = false;
+				manager!.restoreRafId = requestAnimationFrame(() => {
+					manager!.restoreRafId = null;
+					restoreTransitionSuppression(manager!);
+				});
+			}
+		}
+
+		// Register cleanup with DestroyRef
+		destroyRef.onDestroy(() => {
+			if (manager!.restoreRafId !== null) {
+				cancelAnimationFrame(manager!.restoreRafId);
+				manager!.restoreRafId = null;
+			}
+
+			if (manager!.transitionsSuppressed) {
+				manager!.transitionsSuppressed = false;
+				restoreTransitionSuppression(manager!);
+			}
+
+			// Remove this source from the manager
+			manager!.sources.delete(sourceId);
+
+			// If no more sources, clean up the manager
+			if (manager!.sources.size === 0) {
+				cleanupManager(element);
+			} else {
+				// Update element without this source's classes
+				updateElement(manager!);
+			}
+		});
+
+		/**
+		 * We need this effect to track changes to the computed classes. Ideally, we would use
+		 * afterRenderEffect here, but that doesn't run in SSR contexts, so we use a standard
+		 * effect which works in both browser and SSR.
+		 */
+		effect(updateClasses);
+	});
+}
+
+function restoreTransitionSuppression(manager: ElementClassManager): void {
+	const prev = manager.previousTransition;
+	if (prev) {
+		manager.element.style.setProperty(
+			'transition',
+			prev,
+			manager.previousTransitionPriority || undefined,
+		);
+	} else {
+		manager.element.style.removeProperty('transition');
+	}
+}
+
+// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+function setupGlobalObserver(platformId: Object): void {
+	if (isPlatformBrowser(platformId) && !globalObserver) {
+		// Create single global observer that watches the entire document
+		globalObserver = new MutationObserver((mutations) => {
+			for (const mutation of mutations) {
+				if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+					const element = mutation.target as HTMLElement;
+					const manager = elementClassManagers.get(element);
+
+					// Only process elements we're managing
+					if (manager && observedElements.has(element)) {
+						if (manager.isUpdating) continue; // Ignore changes we're making
+
+						// Update base classes to include any externally added classes
+						const currentClasses = toClassList(element.className);
+						const allSourceClasses = new Set<string>();
+
+						// Collect all classes from all sources
+						for (const source of manager.sources.values()) {
+							for (const className of source.classes) {
+								allSourceClasses.add(className);
+							}
+						}
+
+						// Any classes not from sources become new base classes
+						manager.baseClasses.clear();
+
+						for (const className of currentClasses) {
+							if (!allSourceClasses.has(className)) {
+								manager.baseClasses.add(className);
+							}
+						}
+
+						updateElement(manager);
+					}
+				}
+			}
+		});
+
+		// Start observing the entire document for class attribute changes
+		globalObserver.observe(document, {
+			attributes: true,
+			attributeFilter: ['class'],
+			subtree: true, // Watch all descendants
+		});
+	}
+}
+
+function updateElement(manager: ElementClassManager): void {
+	if (manager.isUpdating) return; // Prevent recursive updates
+
+	manager.isUpdating = true;
+
+	// Handle initialization: capture base classes after first source registration
+	if (!manager.hasInitialized && manager.sources.size > 0) {
+		// Get current classes on element (may include SSR classes)
+		const currentClasses = toClassList(manager.element.className);
+
+		// Get all classes that will be applied by sources
+		const allSourceClasses = new Set<string>();
+		for (const source of manager.sources.values()) {
+			source.classes.forEach((className) => allSourceClasses.add(className));
+		}
+
+		// Only consider classes as "base" if they're not produced by any source
+		// This prevents SSR-rendered classes from being preserved as base classes
+		currentClasses.forEach((className) => {
+			if (!allSourceClasses.has(className)) {
+				manager.baseClasses.add(className);
+			}
+		});
+
+		manager.hasInitialized = true;
+	}
+
+	// Get classes from all sources, sorted by registration order (later takes precedence)
+	const sortedSources = Array.from(manager.sources.entries()).sort(
+		([, a], [, b]) => a.order - b.order,
+	);
+
+	const allSourceClasses: string[] = [];
+	for (const [, source] of sortedSources) {
+		allSourceClasses.push(...source.classes);
+	}
+
+	// Combine base classes with all source classes, ensuring base classes take precedence
+	const classesToApply =
+		allSourceClasses.length > 0 || manager.baseClasses.size > 0
+			? hlm([...allSourceClasses, ...manager.baseClasses])
+			: '';
+
+	// Apply the classes to the element
+	if (manager.element.className !== classesToApply) {
+		manager.element.className = classesToApply;
+	}
+
+	manager.isUpdating = false;
+}
+
+function cleanupManager(element: HTMLElement): void {
+	// Remove from global tracking
+	observedElements.delete(element);
+	elementClassManagers.delete(element);
+
+	// If no more elements being tracked, cleanup global observer
+	if (observedElements.size === 0 && globalObserver) {
+		globalObserver.disconnect();
+		globalObserver = null;
+	}
+}
+
+interface ClassesOptions {
+	elementRef?: ElementRef<HTMLElement>;
+	injector?: Injector;
+}
+
+// Cache for parsed class lists to avoid repeated string operations
+const classListCache = new Map<string, string[]>();
+
+function toClassList(className: string | ClassValue[]): string[] {
+	// For simple string inputs, use cache to avoid repeated parsing
+	if (typeof className === 'string' && classListCache.has(className)) {
+		return classListCache.get(className)!;
+	}
+
+	const result = clsx(className)
+		.split(' ')
+		.filter((c) => c.length > 0);
+
+	// Cache string results, but limit cache size to prevent memory growth
+	if (typeof className === 'string' && classListCache.size < 1000) {
+		classListCache.set(className, result);
+	}
+
+	return result;
+}

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './hlm';
+export * from './provide-spartan-hlm';

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/shared/utils/provide-spartan-hlm.ts

@@ -0,0 +1,34 @@
+import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
+import { type EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+
+/**
+ * Provides default configuration for Spartan Helm components.
+ *
+ * This utility configures the Angular CDK overlay to disable the `usePopover`
+ * behavior introduced in Angular 21, which causes CDK overlay-based components
+ * (sheets, dialogs, tooltips, etc.) to render above `position: fixed` elements
+ * like `<hlm-toaster>`.
+ *
+ * @returns {EnvironmentProviders} Environment providers to be added to the application config.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * import { provideSpartanHlm } from '@spartan-ng/styles/utils';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSpartanHlm(),
+ *     // ... other providers
+ *   ],
+ * };
+ * ```
+ */
+export function provideSpartanHlm(): EnvironmentProviders {
+	return makeEnvironmentProviders([
+		{
+			provide: OVERLAY_DEFAULT_CONFIG,
+			useValue: { usePopover: false },
+		},
+	]);
+}

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

@@ -6,7 +6,6 @@
 		<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>

package/dist/force-app/main/default/uiBundles/angularextapp/src/{styles.scss → styles.css}

@@ -1,4 +1,8 @@
-@import 'tailwindcss';
+@layer theme, base, components, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import 'tailwindcss/utilities.css';
+@import '@spartan-ng/brain/hlm-tailwind-preset.css';
 
 @layer base {
 	html,
@@ -14,12 +18,8 @@
 @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.
+ * shadcn design tokens — identical to the React base app's global.css.
+ * Spartan/UI helm components read these CSS variables directly.
  */
 @theme inline {
 	--color-background: var(--background);
@@ -137,34 +137,3 @@
 		@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/angularextapp/tsconfig.json

@@ -13,7 +13,10 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "ES2022",
-    "module": "preserve"
+    "module": "preserve",
+    "paths": {
+      "@spartan-ng/styles/*": ["./src/app/shared/*/index.ts"]
+    }
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "11.60.0",
+  "version": "11.62.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-      "version": "11.60.0",
+      "version": "11.62.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "fast-xml-parser": "^5.9.3",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-base-sfdx-project",
-  "version": "11.60.0",
+  "version": "11.62.1",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/ui-bundle-template-app-angular-template-b2x",
-  "version": "11.60.0",
+  "version": "11.62.1",
   "description": "Salesforce Angular external app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",

package/dist/force-app/main/default/uiBundles/angularextapp/src/app/components/ui/_field-size.scss

@@ -1,42 +0,0 @@
-/**
- * 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/angularextapp/src/app/components/ui/button/button.scss

@@ -1,112 +0,0 @@
-/**
- * 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/angularextapp/src/app/components/ui/card/card.scss

@@ -1,34 +0,0 @@
-/**
- * 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/dist/force-app/main/default/uiBundles/angularextapp/src/app/components/ui/date-picker/date-picker.scss

@@ -1,36 +0,0 @@
-/**
- * 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;
-}