@salesforce/templates 66.13.7 → 66.13.8

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog-content.ts

@@ -0,0 +1,74 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import type { ComponentType } from '@angular/cdk/portal';
+import { NgComponentOutlet } from '@angular/common';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	inject,
+	input,
+} from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideX } from '@ng-icons/lucide';
+import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
+import { HlmButton } from '@spartan-ng/styles/button';
+
+import { classes } from '@spartan-ng/styles/utils';
+import { HlmDialogClose } from './hlm-dialog-close';
+
+type HlmDialogContentContext = {
+	$component?: ComponentType<unknown>;
+	$dynamicComponentClass?: string;
+	$showCloseButton?: boolean;
+};
+
+@Component({
+	selector: 'hlm-dialog-content',
+	imports: [NgComponentOutlet, HlmButton, HlmDialogClose, NgIcon],
+	providers: [provideIcons({ lucideX })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'dialog-content',
+		'[attr.data-state]': 'state()',
+	},
+	template: `
+		@if (component) {
+			<ng-container [ngComponentOutlet]="component" />
+		} @else {
+			<ng-content />
+		}
+
+		@if (showCloseButton()) {
+			<button hlmBtn variant="ghost" size="icon-sm" class="absolute end-2 top-2" hlmDialogClose>
+				<span class="sr-only">close</span>
+				<ng-icon name="lucideX" />
+			</button>
+		}
+	`,
+})
+export class HlmDialogContent {
+	private readonly _dialogRef = inject(BrnDialogRef);
+	private readonly _dialogContext = injectBrnDialogContext<HlmDialogContentContext | null>({
+		optional: true,
+	});
+
+	public readonly showCloseButton = input<boolean, BooleanInput>(
+		this._dialogContext?.$showCloseButton ?? true,
+		{
+			transform: booleanAttribute,
+		},
+	);
+
+	public readonly state = computed(() => this._dialogRef?.state() ?? 'closed');
+
+	public readonly component = this._dialogContext?.$component;
+	private readonly _dynamicComponentClass = this._dialogContext?.$dynamicComponentClass;
+
+	constructor() {
+		classes(() => [
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm relative mx-auto w-full outline-none sm:mx-0',
+			this._dynamicComponentClass,
+		]);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog-description.ts

@@ -0,0 +1,17 @@
+import { Directive } from '@angular/core';
+import { BrnDialogDescription } from '@spartan-ng/brain/dialog';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDialogDescription]',
+	hostDirectives: [BrnDialogDescription],
+	host: { 'data-slot': 'dialog-description' },
+})
+export class HlmDialogDescription {
+	constructor() {
+		classes(
+			() =>
+				'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+		);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog-footer.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDialogFooter],hlm-dialog-footer',
+	host: { 'data-slot': 'dialog-footer' },
+})
+export class HlmDialogFooter {
+	constructor() {
+		classes(
+			() =>
+				'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+		);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog-header.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDialogHeader],hlm-dialog-header',
+	host: { 'data-slot': 'dialog-header' },
+})
+export class HlmDialogHeader {
+	constructor() {
+		classes(() => 'gap-2 flex flex-col');
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog-overlay.ts

@@ -0,0 +1,27 @@
+import { computed, Directive, effect, input, untracked } from '@angular/core';
+import { injectCustomClassSettable } from '@spartan-ng/brain/core';
+import { BrnDialogOverlay } from '@spartan-ng/brain/dialog';
+import { hlm } from '@spartan-ng/styles/utils';
+import type { ClassValue } from 'clsx';
+
+export const hlmDialogOverlayClass = hlm(
+	'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+);
+
+@Directive({
+	selector: '[hlmDialogOverlay],hlm-dialog-overlay',
+	hostDirectives: [BrnDialogOverlay],
+})
+export class HlmDialogOverlay {
+	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });
+
+	public readonly userClass = input<ClassValue>('', { alias: 'class' });
+	protected readonly _computedClass = computed(() => hlm(hlmDialogOverlayClass, this.userClass()));
+
+	constructor() {
+		effect(() => {
+			const newClass = this._computedClass();
+			untracked(() => this._classSettable?.setClassToCustomElement(newClass));
+		});
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog-portal.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { BrnDialogContent } from '@spartan-ng/brain/dialog';
+
+@Directive({
+	selector: '[hlmDialogPortal]',
+	hostDirectives: [{ directive: BrnDialogContent, inputs: ['context', 'class'] }],
+})
+export class HlmDialogPortal {}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog-title.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnDialogTitle } from '@spartan-ng/brain/dialog';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDialogTitle]',
+	hostDirectives: [BrnDialogTitle],
+	host: { 'data-slot': 'dialog-title' },
+})
+export class HlmDialogTitle {
+	constructor() {
+		classes(() => 'text-base leading-none font-medium');
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog-trigger.ts

@@ -0,0 +1,14 @@
+import { Directive } from '@angular/core';
+import { BrnDialogTrigger } from '@spartan-ng/brain/dialog';
+
+@Directive({
+	selector: 'button[hlmDialogTrigger],button[hlmDialogTriggerFor]',
+	hostDirectives: [
+		{
+			directive: BrnDialogTrigger,
+			inputs: ['id', 'brnDialogTriggerFor: hlmDialogTriggerFor', 'type'],
+		},
+	],
+	host: { 'data-slot': 'dialog-trigger' },
+})
+export class HlmDialogTrigger {}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog.service.ts

@@ -0,0 +1,46 @@
+import type { ComponentType } from '@angular/cdk/portal';
+import { inject, Injectable, type TemplateRef } from '@angular/core';
+import {
+	type BrnDialogOptions,
+	type BrnDialogRef,
+	BrnDialogService,
+	cssClassesToArray,
+} from '@spartan-ng/brain/dialog';
+import { HlmDialogContent } from './hlm-dialog-content';
+import { hlmDialogOverlayClass } from './hlm-dialog-overlay';
+
+export type HlmDialogOptions<DialogContext = unknown> = BrnDialogOptions & {
+	contentClass?: string;
+	showCloseButton?: boolean;
+	context?: DialogContext;
+};
+
+@Injectable({
+	providedIn: 'root',
+})
+export class HlmDialogService {
+	private readonly _brnDialogService = inject(BrnDialogService);
+
+	public open<TResult = unknown, TContext = unknown>(
+		component: ComponentType<unknown> | TemplateRef<unknown>,
+		options?: Partial<HlmDialogOptions<TContext>>,
+	): BrnDialogRef<TResult> {
+		const mergedOptions = {
+			...(options ?? {}),
+			backdropClass: cssClassesToArray(`${hlmDialogOverlayClass} ${options?.backdropClass ?? ''}`),
+			context: {
+				...(options?.context && typeof options.context === 'object' ? options.context : {}),
+				$component: component,
+				$dynamicComponentClass: options?.contentClass,
+				$showCloseButton: options?.showCloseButton,
+			},
+		};
+
+		return this._brnDialogService.open<unknown, TResult>(
+			HlmDialogContent,
+			undefined,
+			mergedOptions.context,
+			mergedOptions,
+		);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/hlm-dialog.ts

@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
+import { HlmDialogOverlay } from './hlm-dialog-overlay';
+
+@Component({
+	selector: 'hlm-dialog',
+	exportAs: 'hlmDialog',
+	imports: [HlmDialogOverlay],
+	providers: [
+		{
+			provide: BrnDialog,
+			useExisting: forwardRef(() => HlmDialog),
+		},
+		provideBrnDialogDefaultOptions({
+			// add custom options here
+		}),
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<hlm-dialog-overlay />
+		<ng-content />
+	`,
+})
+export class HlmDialog extends BrnDialog {}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dialog/index.ts

@@ -0,0 +1,35 @@
+import { HlmDialog } from './hlm-dialog';
+import { HlmDialogClose } from './hlm-dialog-close';
+import { HlmDialogContent } from './hlm-dialog-content';
+import { HlmDialogDescription } from './hlm-dialog-description';
+import { HlmDialogFooter } from './hlm-dialog-footer';
+import { HlmDialogHeader } from './hlm-dialog-header';
+import { HlmDialogOverlay } from './hlm-dialog-overlay';
+import { HlmDialogPortal } from './hlm-dialog-portal';
+import { HlmDialogTitle } from './hlm-dialog-title';
+import { HlmDialogTrigger } from './hlm-dialog-trigger';
+
+export * from './hlm-dialog';
+export * from './hlm-dialog-close';
+export * from './hlm-dialog-content';
+export * from './hlm-dialog-description';
+export * from './hlm-dialog-footer';
+export * from './hlm-dialog-header';
+export * from './hlm-dialog-overlay';
+export * from './hlm-dialog-portal';
+export * from './hlm-dialog-title';
+export * from './hlm-dialog-trigger';
+export * from './hlm-dialog.service';
+
+export const HlmDialogImports = [
+	HlmDialog,
+	HlmDialogContent,
+	HlmDialogDescription,
+	HlmDialogFooter,
+	HlmDialogHeader,
+	HlmDialogOverlay,
+	HlmDialogPortal,
+	HlmDialogTitle,
+	HlmDialogTrigger,
+	HlmDialogClose,
+] as const;

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-checkbox-indicator.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-dropdown-menu-checkbox-indicator',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideCheck })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'dropdown-menu-checkbox-item-indicator' },
+	template: ` <ng-icon name="lucideCheck" /> `,
+})
+export class HlmDropdownMenuCheckboxIndicator {
+	constructor() {
+		classes(
+			() =>
+				'absolute end-2 flex items-center justify-center [&_ng-icon]:text-[length:--spacing(4)] pointer-events-none opacity-0 group-data-checked/dropdown-menu-checkbox:opacity-100',
+		);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-checkbox.ts

@@ -0,0 +1,54 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemSelectable } from '@angular/cdk/menu';
+import { Directive, booleanAttribute, inject, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
+
+/** @internal. Use HlmDropdownMenuCheckbox instead. */
+@Directive({
+	selector: '[hlmDropdownMenuCheckboxCdk]',
+	providers: [
+		{ provide: CdkMenuItemCheckbox, useExisting: HlmDropdownMenuCheckboxCdk },
+		{ provide: CdkMenuItemSelectable, useExisting: HlmDropdownMenuCheckboxCdk },
+		{ provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+	],
+})
+export class HlmDropdownMenuCheckboxCdk extends CdkMenuItemCheckbox {
+	public readonly keepOpen = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
+	public override trigger(options?: { keepOpen: boolean }) {
+		super.trigger({ ...options, keepOpen: this.keepOpen() });
+	}
+}
+
+@Directive({
+	selector: '[hlmDropdownMenuCheckbox],[hlmDropdownMenuCheckboxItem]',
+	hostDirectives: [
+		{
+			directive: HlmDropdownMenuCheckboxCdk,
+			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked', 'keepOpen'],
+			outputs: ['cdkMenuItemTriggered: triggered'],
+		},
+		HlmDropdownMenuFocusOnHover,
+	],
+	host: {
+		'data-slot': 'dropdown-menu-checkbox-item',
+		'[attr.data-disabled]': '_cdkMenuItem.disabled ? "" : null',
+		'[attr.data-checked]': '_cdkMenuItem.checked ? "" : null',
+		'[attr.data-inset]': 'inset() ? "" : null',
+	},
+})
+export class HlmDropdownMenuCheckbox {
+	protected readonly _cdkMenuItem = inject(HlmDropdownMenuCheckboxCdk);
+
+	public readonly inset = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	constructor() {
+		classes(
+			() =>
+				"hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm data-inset:ps-8 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/dropdown-menu-checkbox relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+		);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-focus-on-hover.ts

@@ -0,0 +1,35 @@
+import { InputModalityDetector } from '@angular/cdk/a11y';
+import { CdkMenu, CdkMenuItem } from '@angular/cdk/menu';
+import { Directive, inject } from '@angular/core';
+
+/**
+ * @internal
+ * Moves DOM focus to the hovered menu item. CDK menus only move focus with the keyboard, so on a pointer
+ * the highlight would otherwise stay on the last keyboard-focused item (leaving two rows highlighted) and,
+ * when a submenu closes, focus would fall to <body>, the menu stack would report no focus, and the whole
+ * dropdown would collapse. Following the pointer with focus (Radix/shadcn behaviour) keeps a single
+ * highlight and keeps focus inside the menu stack. setActiveMenuItem also syncs the key manager so keyboard
+ * navigation continues from the hovered item.
+ *
+ * Applied as a host directive on every dropdown item type (item, checkbox, radio, sub-trigger).
+ */
+@Directive({
+	selector: '[hlmDropdownMenuFocusOnHover]',
+	host: {
+		'(mouseenter)': '_focusOnHover()',
+	},
+})
+export class HlmDropdownMenuFocusOnHover {
+	private readonly _cdkMenuItem = inject(CdkMenuItem, { self: true });
+	private readonly _parentMenu = inject(CdkMenu, { optional: true });
+	private readonly _inputModality = inject(InputModalityDetector);
+
+	protected _focusOnHover(): void {
+		// Only skip synthetic hovers from touch taps; every real hover (mouse, or keyboard-then-hover,
+		// which leaves the modality as 'keyboard') should move focus to keep a single highlight.
+		if (this._inputModality.mostRecentModality === 'touch' || this._cdkMenuItem.disabled) {
+			return;
+		}
+		this._parentMenu?.setActiveMenuItem(this._cdkMenuItem);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-group.ts

@@ -0,0 +1,14 @@
+import { CdkMenuGroup } from '@angular/cdk/menu';
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDropdownMenuGroup],hlm-dropdown-menu-group',
+	hostDirectives: [CdkMenuGroup],
+	host: { 'data-slot': 'dropdown-menu-group' },
+})
+export class HlmDropdownMenuGroup {
+	constructor() {
+		classes(() => 'block');
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-item-sub-indicator.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronRight } from '@ng-icons/lucide';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-dropdown-menu-item-sub-indicator',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<ng-icon name="lucideChevronRight" class="text-[length:--spacing(4)] rtl:rotate-180" />
+	`,
+})
+export class HlmDropdownMenuItemSubIndicator {
+	constructor() {
+		classes(() => 'ms-auto flex items-center justify-center');
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-item.ts

@@ -0,0 +1,42 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem } from '@angular/cdk/menu';
+import { booleanAttribute, Directive, HOST_TAG_NAME, inject, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
+
+@Directive({
+	selector: '[hlmDropdownMenuItem],hlm-dropdown-menu-item',
+	hostDirectives: [
+		{
+			directive: CdkMenuItem,
+			inputs: ['cdkMenuItemDisabled: disabled'],
+			outputs: ['cdkMenuItemTriggered: triggered'],
+		},
+		HlmDropdownMenuFocusOnHover,
+	],
+	host: {
+		'data-slot': 'dropdown-menu-item',
+		'[attr.disabled]': '_isButton && disabled() ? "" : null',
+		'[attr.data-disabled]': 'disabled() ? "" : null',
+		'[attr.data-variant]': 'variant()',
+		'[attr.data-inset]': 'inset() ? "" : null',
+	},
+})
+export class HlmDropdownMenuItem {
+	protected readonly _isButton = inject(HOST_TAG_NAME) === 'button';
+
+	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	public readonly variant = input<'default' | 'destructive'>('default');
+
+	public readonly inset = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	constructor() {
+		classes(
+			() =>
+				"hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-destructive/10 data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:hover:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive not-data-[variant=destructive]:hover:**:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:ps-8 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/dropdown-menu-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+		);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-label.ts

@@ -0,0 +1,20 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, Directive, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDropdownMenuLabel],hlm-dropdown-menu-label',
+	host: {
+		'data-slot': 'dropdown-menu-label',
+		'[attr.data-inset]': 'inset() ? "" : null',
+	},
+})
+export class HlmDropdownMenuLabel {
+	public readonly inset = input<boolean, BooleanInput>(false, {
+		transform: booleanAttribute,
+	});
+
+	constructor() {
+		classes(() => 'text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:ps-8 block');
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-radio-indicator.ts

@@ -0,0 +1,21 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Component({
+	selector: 'hlm-dropdown-menu-radio-indicator',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideCheck })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'dropdown-menu-radio-item-indicator' },
+	template: ` <ng-icon name="lucideCheck" /> `,
+})
+export class HlmDropdownMenuRadioIndicator {
+	constructor() {
+		classes(
+			() =>
+				'absolute end-2 flex items-center justify-center [&_ng-icon]:text-[length:--spacing(4)] pointer-events-none opacity-0 group-data-checked/dropdown-menu-radio:opacity-100',
+		);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-radio.ts

@@ -0,0 +1,49 @@
+import { type BooleanInput } from '@angular/cdk/coercion';
+import { CdkMenuItem, CdkMenuItemRadio, CdkMenuItemSelectable } from '@angular/cdk/menu';
+import { Directive, booleanAttribute, inject, input } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+import { HlmDropdownMenuFocusOnHover } from './hlm-dropdown-menu-focus-on-hover';
+
+/** @internal. Use HlmDropdownMenuRadio instead. */
+@Directive({
+	selector: '[hlmDropdownMenuRadioCdk]',
+	providers: [
+		{ provide: CdkMenuItemRadio, useExisting: HlmDropdownMenuRadioCdk },
+		{ provide: CdkMenuItemSelectable, useExisting: HlmDropdownMenuRadioCdk },
+		{ provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
+	],
+})
+export class HlmDropdownMenuRadioCdk extends CdkMenuItemRadio {
+	public readonly keepOpen = input<boolean, BooleanInput>(true, { transform: booleanAttribute });
+
+	public override trigger(options?: { keepOpen: boolean }) {
+		super.trigger({ ...options, keepOpen: this.keepOpen() });
+	}
+}
+
+@Directive({
+	selector: '[hlmDropdownMenuRadio]',
+	hostDirectives: [
+		{
+			directive: HlmDropdownMenuRadioCdk,
+			inputs: ['cdkMenuItemDisabled: disabled', 'cdkMenuItemChecked: checked', 'keepOpen'],
+			outputs: ['cdkMenuItemTriggered: triggered'],
+		},
+		HlmDropdownMenuFocusOnHover,
+	],
+	host: {
+		'data-slot': 'dropdown-menu-radio-item',
+		'[attr.data-disabled]': '_cdkMenuItem.disabled ? "" : null',
+		'[attr.data-checked]': '_cdkMenuItem.checked ? "" : null',
+	},
+})
+export class HlmDropdownMenuRadio {
+	protected readonly _cdkMenuItem = inject(HlmDropdownMenuRadioCdk);
+
+	constructor() {
+		classes(
+			() =>
+				"hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm data-inset:ps-8 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/dropdown-menu-radio relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0",
+		);
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-separator.ts

@@ -0,0 +1,12 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator',
+	host: { 'data-slot': 'dropdown-menu-separator' },
+})
+export class HlmDropdownMenuSeparator {
+	constructor() {
+		classes(() => 'bg-border -mx-1 my-1 h-px block');
+	}
+}

package/lib/templates/project/angularextapp/_p_/_m_/_w_/_a_/src/app/shared/dropdown-menu/hlm-dropdown-menu-shortcut.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { classes } from '@spartan-ng/styles/utils';
+
+@Directive({
+	selector: '[hlmDropdownMenuShortcut],hlm-dropdown-menu-shortcut',
+	host: { 'data-slot': 'dropdown-menu-shortcut' },
+})
+export class HlmDropdownMenuShortcut {
+	constructor() {
+		classes(
+			() =>
+				'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+		);
+	}
+}