@salesforce/ui-bundle-template-base-angular-app 11.59.2 → 11.62.0

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/select/src/lib/hlm-select-scroll-up.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronUp } from '@ng-icons/lucide';
+import { BrnSelectScrollUp } from '@spartan-ng/brain/select';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-select-scroll-up',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideChevronUp })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [BrnSelectScrollUp],
+	template: ` <ng-icon name="lucideChevronUp" /> `,
+})
+export class HlmSelectScrollUp {
+	constructor() {
+		classes(
+			() =>
+				"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] sticky top-0 w-full data-hidden:hidden",
+		);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/select/src/lib/hlm-select-separator.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnSelectSeparator } from '@spartan-ng/brain/select';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmSelectSeparator],hlm-select-separator',
+	hostDirectives: [{ directive: BrnSelectSeparator, inputs: ['orientation'] }],
+	host: { 'data-slot': 'select-separator' },
+})
+export class HlmSelectSeparator {
+	constructor() {
+		classes(() => 'bg-border -mx-1 my-1 h-px pointer-events-none');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/select/src/lib/hlm-select-trigger.ts

@@ -0,0 +1,59 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	input,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronDown } from '@ng-icons/lucide';
+import { BrnFieldControlDescribedBy } from '@spartan-ng/brain/field';
+import { BrnSelectTrigger } from '@spartan-ng/brain/select';
+import { hlm } from '@spartan-ng/styles/utils';
+import type { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-select-trigger',
+	imports: [NgIcon, BrnSelectTrigger, BrnFieldControlDescribedBy],
+	providers: [provideIcons({ lucideChevronDown })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'block' },
+	template: `
+		<button
+			brnSelectTrigger
+			brnFieldControlDescribedBy
+			[forceInvalid]="forceInvalid()"
+			[id]="buttonId()"
+			[class]="_computedClass()"
+			[attr.data-size]="size()"
+			data-slot="select-trigger"
+		>
+			<ng-content />
+			<ng-icon
+				name="lucideChevronDown"
+				class="text-muted-foreground text-[length:--spacing(4)] ms-auto"
+			/>
+		</button>
+	`,
+})
+export class HlmSelectTrigger {
+	private static _id = 0;
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() =>
+		hlm(
+			'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-8 data-[size=sm]:h-6 data-[size=sm]:text-xs data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=lg]:h-10 *:data-[slot=select-value]:gap-1.5 flex w-full items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
+			this.userClass(),
+		),
+	);
+
+	public readonly buttonId = input<string>(`hlm-select-trigger-${HlmSelectTrigger._id++}`);
+
+	public readonly size = input<'default' | 'sm' | 'lg'>('default');
+
+	/** Whether to force the trigger into an invalid state. */
+	public readonly forceInvalid = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/select/src/lib/hlm-select-value-template.ts

@@ -0,0 +1,5 @@
+import { Directive } from '@angular/core';
+import { BrnSelectValueTemplate } from '@spartan-ng/brain/select';
+
+@Directive({ selector: '[hlmSelectValueTemplate]', hostDirectives: [BrnSelectValueTemplate] })
+export class HlmSelectValueTemplate {}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/select/src/lib/hlm-select-value.ts

@@ -0,0 +1,18 @@
+import { Directive, inject } from '@angular/core';
+import { BrnSelectValue } from '@spartan-ng/brain/select';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmSelectValue],hlm-select-value',
+	hostDirectives: [{ directive: BrnSelectValue, inputs: ['placeholder'] }],
+	host: { '[attr.data-slot]': '!_hidden() ? "select-value" : null' },
+})
+export class HlmSelectValue {
+	private readonly _brnSelectValue = inject(BrnSelectValue);
+
+	protected readonly _hidden = this._brnSelectValue.hidden;
+
+	constructor() {
+		classes(() => 'data-hidden:hidden');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/select/src/lib/hlm-select-values-content.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({ selector: '[hlmSelectValuesContent],hlm-select-values-content' })
+export class HlmSelectValuesContent {
+	constructor() {
+		classes(() => 'gap-2 flex');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/select/src/lib/hlm-select-values.ts

@@ -0,0 +1,5 @@
+import { Directive } from '@angular/core';
+import { BrnSelectValues } from '@spartan-ng/brain/select';
+
+@Directive({ selector: '[hlmSelectValues]', hostDirectives: [BrnSelectValues] })
+export class HlmSelectValues {}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/select/src/lib/hlm-select.ts

@@ -0,0 +1,37 @@
+import { Directive } from '@angular/core';
+import {
+	BrnPopover,
+	provideBrnPopoverConfig,
+	provideBrnPopoverDefaultOptions,
+} from '@spartan-ng/brain/popover';
+import { BrnSelect } from '@spartan-ng/brain/select';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmSelect],hlm-select',
+	providers: [
+		provideBrnPopoverConfig({
+			align: 'start',
+			sideOffset: 6,
+		}),
+		provideBrnPopoverDefaultOptions({ role: null }),
+	],
+	hostDirectives: [
+		{
+			directive: BrnSelect,
+			inputs: ['disabled', 'value', 'isItemEqualToValue', 'itemToString'],
+			outputs: ['valueChange'],
+		},
+		{
+			directive: BrnPopover,
+			inputs: ['align', 'closeOnOutsidePointerEvents', 'sideOffset', 'state', 'offsetX'],
+			outputs: ['stateChanged', 'closed'],
+		},
+	],
+	host: { 'data-slot': 'select' },
+})
+export class HlmSelect {
+	constructor() {
+		classes(() => 'block');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/separator/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmSeparator } from './lib/hlm-separator';
+
+export * from './lib/hlm-separator';
+
+export const HlmSeparatorImports = [HlmSeparator] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/separator/src/lib/hlm-separator.ts

@@ -0,0 +1,19 @@
+import { Directive } from '@angular/core';
+import { BrnSeparator } from '@spartan-ng/brain/separator';
+import { classes } from '@spartan-ng/styles/utils';
+
+export const hlmSeparatorClass =
+	'inline-flex shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch';
+
+@Directive({
+	selector: '[hlmSeparator],hlm-separator',
+	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+	host: {
+		'data-slot': 'separator',
+	},
+})
+export class HlmSeparator {
+	constructor() {
+		classes(() => hlmSeparatorClass);
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/skeleton/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmSkeleton } from './lib/hlm-skeleton';
+
+export * from './lib/hlm-skeleton';
+
+export const HlmSkeletonImports = [HlmSkeleton] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/skeleton/src/lib/hlm-skeleton.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmSkeleton],hlm-skeleton',
+	host: {
+		'data-slot': 'skeleton',
+	},
+})
+export class HlmSkeleton {
+	constructor() {
+		classes(() => 'bg-accent rounded-md block motion-safe:animate-pulse');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/spinner/src/index.ts

@@ -0,0 +1,5 @@
+import { HlmSpinner } from './lib/hlm-spinner';
+
+export * from './lib/hlm-spinner';
+
+export const HlmSpinnerImports = [HlmSpinner] as const;

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/spinner/src/lib/hlm-spinner.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core';
+import { lucideLoader2 } from '@ng-icons/lucide';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-spinner',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideLoader2 }), provideNgIconsConfig({ size: '1em' })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'spinner',
+	},
+	template: ` <ng-icon [name]="icon()" /> `,
+})
+export class HlmSpinner {
+	/**
+	 * The name of the icon to be used as the spinner.
+	 * Use provideIcons({ ... }) to register custom icons.
+	 */
+	public readonly icon = input<string>('lucideLoader2');
+
+	constructor() {
+		classes(() => 'inline-flex motion-safe:animate-spin');
+	}
+}

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/utils/src/index.ts

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

package/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/utils/src/lib/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/src/force-app/main/default/uiBundles/base-angular-app/src/app/shared/spartan/utils/src/lib/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/src/force-app/main/default/uiBundles/base-angular-app/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>