Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-alert-dialog-preview',
	imports: [HlmAlertDialogImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog>
			<button hlmAlertDialogTrigger hlmBtn variant="outline">Show Dialog</button>
			<hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx">
				<hlm-alert-dialog-header>
					<h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
					<p hlmAlertDialogDescription>
						This action cannot be undone. This will permanently delete your account from our servers.
					</p>
				</hlm-alert-dialog-header>
				<hlm-alert-dialog-footer>
					<button hlmAlertDialogCancel>Cancel</button>
					<button hlmAlertDialogAction>Continue</button>
				</hlm-alert-dialog-footer>
			</hlm-alert-dialog-content>
		</hlm-alert-dialog>
	`,
})
export class AlertDialogPreview {}

Installation

ng g @spartan-ng/cli:ui alert-dialog

nx g @spartan-ng/cli:ui alert-dialog

import { DestroyRef, ElementRef, HostAttributeToken, Injector, PLATFORM_ID, effect, inject, makeEnvironmentProviders, runInInjectionContext, type EnvironmentProviders } from '@angular/core';
import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
import { clsx, type ClassValue } from 'clsx';
import { isPlatformBrowser } from '@angular/common';
import { provideSpartanHlm } from '@spartan-ng/helm/utils';
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;
}

/**
 * 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
 * 
 *
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideSpartanHlm(),
 *     // ... other providers
 *   ],
 * };
 * ```
 */
export function provideSpartanHlm(): EnvironmentProviders {
	return makeEnvironmentProviders([
		{
			provide: OVERLAY_DEFAULT_CONFIG,
			useValue: { usePopover: false },
		},
	]);
}

import { BRN_ALERT_DIALOG_DEFAULT_OPTIONS, BrnAlertDialog, BrnAlertDialogContent, BrnAlertDialogDescription, BrnAlertDialogOverlay, BrnAlertDialogTitle, BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
import { BrnDialog, BrnDialogClose, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { ChangeDetectionStrategy, Component, Directive, computed, effect, forwardRef, input, signal, untracked } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmAlertDialogAction]',
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-action', '[type]': 'type()' },
})
export class HlmAlertDialogAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: 'button[hlmAlertDialogCancel]',
	providers: [provideBrnButtonConfig({ variant: 'outline' })],
	hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
})
export class HlmAlertDialogCancel {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAlertDialogContent],hlm-alert-dialog-content',
	host: {
		'data-slot': 'alert-dialog-content',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmAlertDialogContent {
	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
	public readonly state = this._stateProvider?.state ?? signal('closed');

	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => '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 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content grid w-full outline-none');
	}
}

@Directive({
	selector: '[hlmAlertDialogDescription]',
	hostDirectives: [BrnAlertDialogDescription],
	host: { 'data-slot': 'alert-dialog-description' },
})
export class HlmAlertDialogDescription {
	constructor() {
		classes(() => 'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3');
	}
}

@Directive({
	selector: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
	host: { 'data-slot': 'alert-dialog-footer' },
})
export class HlmAlertDialogFooter {
	constructor() {
		classes(
			() =>
				'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
		);
	}
}

@Directive({
	selector: '[hlmAlertDialogHeader],hlm-alert-dialog-header',
	host: { 'data-slot': 'alert-dialog-header' },
})
export class HlmAlertDialogHeader {
	constructor() {
		classes(() => 'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]');
	}
}

@Directive({
	selector: '[hlmAlertDialogMedia],hlm-alert-dialog-media',
	host: { 'data-slot': 'alert-dialog-media' },
})
export class HlmAlertDialogMedia {
	constructor() {
		classes(() => "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(6)]");
	}
}

@Directive({
	selector: '[hlmAlertDialogOverlay],hlm-alert-dialog-overlay',
	hostDirectives: [BrnAlertDialogOverlay],
})
export class HlmAlertDialogOverlay {
	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });

	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() => 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', this.userClass()));

	constructor() {
		effect(() => {
			const classValue = this._computedClass();
			untracked(() => this._classSettable?.setClassToCustomElement(classValue));
		});
	}
}

@Directive({
	selector: '[hlmAlertDialogPortal]',
	hostDirectives: [{ directive: BrnAlertDialogContent, inputs: ['context', 'class'] }],
})
export class HlmAlertDialogPortal {}

@Directive({
	selector: '[hlmAlertDialogTitle]',
	hostDirectives: [BrnAlertDialogTitle],
	host: { 'data-slot': 'alert-dialog-title' },
})
export class HlmAlertDialogTitle {
	constructor() {
		classes(() => 'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2');
	}
}

@Directive({
	selector: 'button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]',
	hostDirectives: [
		{ directive: BrnAlertDialogTrigger, inputs: ['id', 'brnAlertDialogTriggerFor: hlmAlertDialogTriggerFor', 'type'] },
	],
	host: { 'data-slot': 'alert-dialog-trigger' },
})
export class HlmAlertDialogTrigger {}

@Component({
	selector: 'hlm-alert-dialog',
	exportAs: 'hlmAlertDialog',
	imports: [HlmAlertDialogOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => HlmAlertDialog),
		},
		provideBrnDialogDefaultOptions({
			...BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog-overlay />
		<ng-content />
	`,
})
export class HlmAlertDialog extends BrnAlertDialog {}

export const HlmAlertDialogImports = [
	HlmAlertDialog,
	HlmAlertDialogAction,
	HlmAlertDialogCancel,
	HlmAlertDialogContent,
	HlmAlertDialogDescription,
	HlmAlertDialogFooter,
	HlmAlertDialogHeader,
	HlmAlertDialogMedia,
	HlmAlertDialogOverlay,
	HlmAlertDialogPortal,
	HlmAlertDialogTitle,
	HlmAlertDialogTrigger,
] as const;

import { BRN_ALERT_DIALOG_DEFAULT_OPTIONS, BrnAlertDialog, BrnAlertDialogContent, BrnAlertDialogDescription, BrnAlertDialogOverlay, BrnAlertDialogTitle, BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
import { BrnDialog, BrnDialogClose, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { ChangeDetectionStrategy, Component, Directive, computed, effect, forwardRef, input, signal, untracked } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmAlertDialogAction]',
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-action', '[type]': 'type()' },
})
export class HlmAlertDialogAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: 'button[hlmAlertDialogCancel]',
	providers: [provideBrnButtonConfig({ variant: 'outline' })],
	hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
})
export class HlmAlertDialogCancel {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAlertDialogContent],hlm-alert-dialog-content',
	host: {
		'data-slot': 'alert-dialog-content',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmAlertDialogContent {
	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
	public readonly state = this._stateProvider?.state ?? signal('closed');

	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => '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 bg-popover text-popover-foreground ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg group/alert-dialog-content grid w-full outline-none');
	}
}

@Directive({
	selector: '[hlmAlertDialogDescription]',
	hostDirectives: [BrnAlertDialogDescription],
	host: { 'data-slot': 'alert-dialog-description' },
})
export class HlmAlertDialogDescription {
	constructor() {
		classes(() => 'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3');
	}
}

@Directive({
	selector: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
	host: { 'data-slot': 'alert-dialog-footer' },
})
export class HlmAlertDialogFooter {
	constructor() {
		classes(
			() =>
				'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
		);
	}
}

@Directive({
	selector: '[hlmAlertDialogHeader],hlm-alert-dialog-header',
	host: { 'data-slot': 'alert-dialog-header' },
})
export class HlmAlertDialogHeader {
	constructor() {
		classes(() => 'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]');
	}
}

@Directive({
	selector: '[hlmAlertDialogMedia],hlm-alert-dialog-media',
	host: { 'data-slot': 'alert-dialog-media' },
})
export class HlmAlertDialogMedia {
	constructor() {
		classes(() => "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(8)]");
	}
}

@Directive({
	selector: '[hlmAlertDialogOverlay],hlm-alert-dialog-overlay',
	hostDirectives: [BrnAlertDialogOverlay],
})
export class HlmAlertDialogOverlay {
	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });

	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() => 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', this.userClass()));

	constructor() {
		effect(() => {
			const classValue = this._computedClass();
			untracked(() => this._classSettable?.setClassToCustomElement(classValue));
		});
	}
}

@Directive({
	selector: '[hlmAlertDialogPortal]',
	hostDirectives: [{ directive: BrnAlertDialogContent, inputs: ['context', 'class'] }],
})
export class HlmAlertDialogPortal {}

@Directive({
	selector: '[hlmAlertDialogTitle]',
	hostDirectives: [BrnAlertDialogTitle],
	host: { 'data-slot': 'alert-dialog-title' },
})
export class HlmAlertDialogTitle {
	constructor() {
		classes(() => 'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2');
	}
}

@Directive({
	selector: 'button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]',
	hostDirectives: [
		{ directive: BrnAlertDialogTrigger, inputs: ['id', 'brnAlertDialogTriggerFor: hlmAlertDialogTriggerFor', 'type'] },
	],
	host: { 'data-slot': 'alert-dialog-trigger' },
})
export class HlmAlertDialogTrigger {}

@Component({
	selector: 'hlm-alert-dialog',
	exportAs: 'hlmAlertDialog',
	imports: [HlmAlertDialogOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => HlmAlertDialog),
		},
		provideBrnDialogDefaultOptions({
			...BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog-overlay />
		<ng-content />
	`,
})
export class HlmAlertDialog extends BrnAlertDialog {}

export const HlmAlertDialogImports = [
	HlmAlertDialog,
	HlmAlertDialogAction,
	HlmAlertDialogCancel,
	HlmAlertDialogContent,
	HlmAlertDialogDescription,
	HlmAlertDialogFooter,
	HlmAlertDialogHeader,
	HlmAlertDialogMedia,
	HlmAlertDialogOverlay,
	HlmAlertDialogPortal,
	HlmAlertDialogTitle,
	HlmAlertDialogTrigger,
] as const;

import { BRN_ALERT_DIALOG_DEFAULT_OPTIONS, BrnAlertDialog, BrnAlertDialogContent, BrnAlertDialogDescription, BrnAlertDialogOverlay, BrnAlertDialogTitle, BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
import { BrnDialog, BrnDialogClose, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { ChangeDetectionStrategy, Component, Directive, computed, effect, forwardRef, input, signal, untracked } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmAlertDialogAction]',
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-action', '[type]': 'type()' },
})
export class HlmAlertDialogAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: 'button[hlmAlertDialogCancel]',
	providers: [provideBrnButtonConfig({ variant: 'outline' })],
	hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
})
export class HlmAlertDialogCancel {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAlertDialogContent],hlm-alert-dialog-content',
	host: {
		'data-slot': 'alert-dialog-content',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmAlertDialogContent {
	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
	public readonly state = this._stateProvider?.state ?? signal('closed');

	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => '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 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-none p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content grid w-full outline-none');
	}
}

@Directive({
	selector: '[hlmAlertDialogDescription]',
	hostDirectives: [BrnAlertDialogDescription],
	host: { 'data-slot': 'alert-dialog-description' },
})
export class HlmAlertDialogDescription {
	constructor() {
		classes(() => 'text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3');
	}
}

@Directive({
	selector: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
	host: { 'data-slot': 'alert-dialog-footer' },
})
export class HlmAlertDialogFooter {
	constructor() {
		classes(
			() =>
				'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
		);
	}
}

@Directive({
	selector: '[hlmAlertDialogHeader],hlm-alert-dialog-header',
	host: { 'data-slot': 'alert-dialog-header' },
})
export class HlmAlertDialogHeader {
	constructor() {
		classes(() => 'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]');
	}
}

@Directive({
	selector: '[hlmAlertDialogMedia],hlm-alert-dialog-media',
	host: { 'data-slot': 'alert-dialog-media' },
})
export class HlmAlertDialogMedia {
	constructor() {
		classes(() => "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(6)]");
	}
}

@Directive({
	selector: '[hlmAlertDialogOverlay],hlm-alert-dialog-overlay',
	hostDirectives: [BrnAlertDialogOverlay],
})
export class HlmAlertDialogOverlay {
	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });

	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() => 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', this.userClass()));

	constructor() {
		effect(() => {
			const classValue = this._computedClass();
			untracked(() => this._classSettable?.setClassToCustomElement(classValue));
		});
	}
}

@Directive({
	selector: '[hlmAlertDialogPortal]',
	hostDirectives: [{ directive: BrnAlertDialogContent, inputs: ['context', 'class'] }],
})
export class HlmAlertDialogPortal {}

@Directive({
	selector: '[hlmAlertDialogTitle]',
	hostDirectives: [BrnAlertDialogTitle],
	host: { 'data-slot': 'alert-dialog-title' },
})
export class HlmAlertDialogTitle {
	constructor() {
		classes(() => 'text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2');
	}
}

@Directive({
	selector: 'button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]',
	hostDirectives: [
		{ directive: BrnAlertDialogTrigger, inputs: ['id', 'brnAlertDialogTriggerFor: hlmAlertDialogTriggerFor', 'type'] },
	],
	host: { 'data-slot': 'alert-dialog-trigger' },
})
export class HlmAlertDialogTrigger {}

@Component({
	selector: 'hlm-alert-dialog',
	exportAs: 'hlmAlertDialog',
	imports: [HlmAlertDialogOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => HlmAlertDialog),
		},
		provideBrnDialogDefaultOptions({
			...BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog-overlay />
		<ng-content />
	`,
})
export class HlmAlertDialog extends BrnAlertDialog {}

export const HlmAlertDialogImports = [
	HlmAlertDialog,
	HlmAlertDialogAction,
	HlmAlertDialogCancel,
	HlmAlertDialogContent,
	HlmAlertDialogDescription,
	HlmAlertDialogFooter,
	HlmAlertDialogHeader,
	HlmAlertDialogMedia,
	HlmAlertDialogOverlay,
	HlmAlertDialogPortal,
	HlmAlertDialogTitle,
	HlmAlertDialogTrigger,
] as const;

import { BRN_ALERT_DIALOG_DEFAULT_OPTIONS, BrnAlertDialog, BrnAlertDialogContent, BrnAlertDialogDescription, BrnAlertDialogOverlay, BrnAlertDialogTitle, BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
import { BrnDialog, BrnDialogClose, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { ChangeDetectionStrategy, Component, Directive, computed, effect, forwardRef, input, signal, untracked } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmAlertDialogAction]',
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-action', '[type]': 'type()' },
})
export class HlmAlertDialogAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: 'button[hlmAlertDialogCancel]',
	providers: [provideBrnButtonConfig({ variant: 'outline' })],
	hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
})
export class HlmAlertDialogCancel {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAlertDialogContent],hlm-alert-dialog-content',
	host: {
		'data-slot': 'alert-dialog-content',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmAlertDialogContent {
	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
	public readonly state = this._stateProvider?.state ?? signal('closed');

	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => '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 bg-popover text-popover-foreground ring-foreground/5 gap-6 rounded-4xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content grid w-full outline-none');
	}
}

@Directive({
	selector: '[hlmAlertDialogDescription]',
	hostDirectives: [BrnAlertDialogDescription],
	host: { 'data-slot': 'alert-dialog-description' },
})
export class HlmAlertDialogDescription {
	constructor() {
		classes(() => 'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3');
	}
}

@Directive({
	selector: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
	host: { 'data-slot': 'alert-dialog-footer' },
})
export class HlmAlertDialogFooter {
	constructor() {
		classes(
			() =>
				'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
		);
	}
}

@Directive({
	selector: '[hlmAlertDialogHeader],hlm-alert-dialog-header',
	host: { 'data-slot': 'alert-dialog-header' },
})
export class HlmAlertDialogHeader {
	constructor() {
		classes(() => 'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]');
	}
}

@Directive({
	selector: '[hlmAlertDialogMedia],hlm-alert-dialog-media',
	host: { 'data-slot': 'alert-dialog-media' },
})
export class HlmAlertDialogMedia {
	constructor() {
		classes(() => "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(8)]");
	}
}

@Directive({
	selector: '[hlmAlertDialogOverlay],hlm-alert-dialog-overlay',
	hostDirectives: [BrnAlertDialogOverlay],
})
export class HlmAlertDialogOverlay {
	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });

	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() => hlm('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs', this.userClass()));

	constructor() {
		effect(() => {
			const classValue = this._computedClass();
			untracked(() => this._classSettable?.setClassToCustomElement(classValue));
		});
	}
}

@Directive({
	selector: '[hlmAlertDialogPortal]',
	hostDirectives: [{ directive: BrnAlertDialogContent, inputs: ['context', 'class'] }],
})
export class HlmAlertDialogPortal {}

@Directive({
	selector: '[hlmAlertDialogTitle]',
	hostDirectives: [BrnAlertDialogTitle],
	host: { 'data-slot': 'alert-dialog-title' },
})
export class HlmAlertDialogTitle {
	constructor() {
		classes(() => 'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2');
	}
}

@Directive({
	selector: 'button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]',
	hostDirectives: [
		{ directive: BrnAlertDialogTrigger, inputs: ['id', 'brnAlertDialogTriggerFor: hlmAlertDialogTriggerFor', 'type'] },
	],
	host: { 'data-slot': 'alert-dialog-trigger' },
})
export class HlmAlertDialogTrigger {}

@Component({
	selector: 'hlm-alert-dialog',
	exportAs: 'hlmAlertDialog',
	imports: [HlmAlertDialogOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => HlmAlertDialog),
		},
		provideBrnDialogDefaultOptions({
			...BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog-overlay />
		<ng-content />
	`,
})
export class HlmAlertDialog extends BrnAlertDialog {}

export const HlmAlertDialogImports = [
	HlmAlertDialog,
	HlmAlertDialogAction,
	HlmAlertDialogCancel,
	HlmAlertDialogContent,
	HlmAlertDialogDescription,
	HlmAlertDialogFooter,
	HlmAlertDialogHeader,
	HlmAlertDialogMedia,
	HlmAlertDialogOverlay,
	HlmAlertDialogPortal,
	HlmAlertDialogTitle,
	HlmAlertDialogTrigger,
] as const;

import { BRN_ALERT_DIALOG_DEFAULT_OPTIONS, BrnAlertDialog, BrnAlertDialogContent, BrnAlertDialogDescription, BrnAlertDialogOverlay, BrnAlertDialogTitle, BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
import { BrnDialog, BrnDialogClose, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { ChangeDetectionStrategy, Component, Directive, computed, effect, forwardRef, input, signal, untracked } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmAlertDialogAction]',
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-action', '[type]': 'type()' },
})
export class HlmAlertDialogAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: 'button[hlmAlertDialogCancel]',
	providers: [provideBrnButtonConfig({ variant: 'outline' })],
	hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
})
export class HlmAlertDialogCancel {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAlertDialogContent],hlm-alert-dialog-content',
	host: {
		'data-slot': 'alert-dialog-content',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmAlertDialogContent {
	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
	public readonly state = this._stateProvider?.state ?? signal('closed');

	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => '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 bg-popover text-popover-foreground ring-foreground/10 gap-3 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm group/alert-dialog-content grid w-full outline-none');
	}
}

@Directive({
	selector: '[hlmAlertDialogDescription]',
	hostDirectives: [BrnAlertDialogDescription],
	host: { 'data-slot': 'alert-dialog-description' },
})
export class HlmAlertDialogDescription {
	constructor() {
		classes(() => 'text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3');
	}
}

@Directive({
	selector: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
	host: { 'data-slot': 'alert-dialog-footer' },
})
export class HlmAlertDialogFooter {
	constructor() {
		classes(
			() =>
				'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
		);
	}
}

@Directive({
	selector: '[hlmAlertDialogHeader],hlm-alert-dialog-header',
	host: { 'data-slot': 'alert-dialog-header' },
})
export class HlmAlertDialogHeader {
	constructor() {
		classes(() => 'grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]');
	}
}

@Directive({
	selector: '[hlmAlertDialogMedia],hlm-alert-dialog-media',
	host: { 'data-slot': 'alert-dialog-media' },
})
export class HlmAlertDialogMedia {
	constructor() {
		classes(() => "bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]");
	}
}

@Directive({
	selector: '[hlmAlertDialogOverlay],hlm-alert-dialog-overlay',
	hostDirectives: [BrnAlertDialogOverlay],
})
export class HlmAlertDialogOverlay {
	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });

	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() => hlm('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs', this.userClass()));

	constructor() {
		effect(() => {
			const classValue = this._computedClass();
			untracked(() => this._classSettable?.setClassToCustomElement(classValue));
		});
	}
}

@Directive({
	selector: '[hlmAlertDialogPortal]',
	hostDirectives: [{ directive: BrnAlertDialogContent, inputs: ['context', 'class'] }],
})
export class HlmAlertDialogPortal {}

@Directive({
	selector: '[hlmAlertDialogTitle]',
	hostDirectives: [BrnAlertDialogTitle],
	host: { 'data-slot': 'alert-dialog-title' },
})
export class HlmAlertDialogTitle {
	constructor() {
		classes(() => 'text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2');
	}
}

@Directive({
	selector: 'button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]',
	hostDirectives: [
		{ directive: BrnAlertDialogTrigger, inputs: ['id', 'brnAlertDialogTriggerFor: hlmAlertDialogTriggerFor', 'type'] },
	],
	host: { 'data-slot': 'alert-dialog-trigger' },
})
export class HlmAlertDialogTrigger {}

@Component({
	selector: 'hlm-alert-dialog',
	exportAs: 'hlmAlertDialog',
	imports: [HlmAlertDialogOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => HlmAlertDialog),
		},
		provideBrnDialogDefaultOptions({
			...BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog-overlay />
		<ng-content />
	`,
})
export class HlmAlertDialog extends BrnAlertDialog {}

export const HlmAlertDialogImports = [
	HlmAlertDialog,
	HlmAlertDialogAction,
	HlmAlertDialogCancel,
	HlmAlertDialogContent,
	HlmAlertDialogDescription,
	HlmAlertDialogFooter,
	HlmAlertDialogHeader,
	HlmAlertDialogMedia,
	HlmAlertDialogOverlay,
	HlmAlertDialogPortal,
	HlmAlertDialogTitle,
	HlmAlertDialogTrigger,
] as const;

import { BRN_ALERT_DIALOG_DEFAULT_OPTIONS, BrnAlertDialog, BrnAlertDialogContent, BrnAlertDialogDescription, BrnAlertDialogOverlay, BrnAlertDialogTitle, BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
import { BrnDialog, BrnDialogClose, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { ChangeDetectionStrategy, Component, Directive, computed, effect, forwardRef, input, signal, untracked } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmAlertDialogAction]',
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-action', '[type]': 'type()' },
})
export class HlmAlertDialogAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: 'button[hlmAlertDialogCancel]',
	providers: [provideBrnButtonConfig({ variant: 'outline' })],
	hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
	host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
})
export class HlmAlertDialogCancel {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAlertDialogContent],hlm-alert-dialog-content',
	host: {
		'data-slot': 'alert-dialog-content',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmAlertDialogContent {
	private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
	public readonly state = this._stateProvider?.state ?? signal('closed');

	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => '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 bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 gap-6 rounded-4xl p-6 shadow-xl ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content grid w-full outline-none');
	}
}

@Directive({
	selector: '[hlmAlertDialogDescription]',
	hostDirectives: [BrnAlertDialogDescription],
	host: { 'data-slot': 'alert-dialog-description' },
})
export class HlmAlertDialogDescription {
	constructor() {
		classes(() => 'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3');
	}
}

@Directive({
	selector: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
	host: { 'data-slot': 'alert-dialog-footer' },
})
export class HlmAlertDialogFooter {
	constructor() {
		classes(
			() =>
				'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
		);
	}
}

@Directive({
	selector: '[hlmAlertDialogHeader],hlm-alert-dialog-header',
	host: { 'data-slot': 'alert-dialog-header' },
})
export class HlmAlertDialogHeader {
	constructor() {
		classes(() => 'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-start sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]');
	}
}

@Directive({
	selector: '[hlmAlertDialogMedia],hlm-alert-dialog-media',
	host: { 'data-slot': 'alert-dialog-media' },
})
export class HlmAlertDialogMedia {
	constructor() {
		classes(() => "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(8)]");
	}
}

@Directive({
	selector: '[hlmAlertDialogOverlay],hlm-alert-dialog-overlay',
	hostDirectives: [BrnAlertDialogOverlay],
})
export class HlmAlertDialogOverlay {
	private readonly _classSettable = injectCustomClassSettable({ optional: true, host: true });

	public readonly userClass = input<ClassValue>('', { alias: 'class' });
	protected readonly _computedClass = computed(() => hlm('data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm', this.userClass()));

	constructor() {
		effect(() => {
			const classValue = this._computedClass();
			untracked(() => this._classSettable?.setClassToCustomElement(classValue));
		});
	}
}

@Directive({
	selector: '[hlmAlertDialogPortal]',
	hostDirectives: [{ directive: BrnAlertDialogContent, inputs: ['context', 'class'] }],
})
export class HlmAlertDialogPortal {}

@Directive({
	selector: '[hlmAlertDialogTitle]',
	hostDirectives: [BrnAlertDialogTitle],
	host: { 'data-slot': 'alert-dialog-title' },
})
export class HlmAlertDialogTitle {
	constructor() {
		classes(() => 'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2');
	}
}

@Directive({
	selector: 'button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]',
	hostDirectives: [
		{ directive: BrnAlertDialogTrigger, inputs: ['id', 'brnAlertDialogTriggerFor: hlmAlertDialogTriggerFor', 'type'] },
	],
	host: { 'data-slot': 'alert-dialog-trigger' },
})
export class HlmAlertDialogTrigger {}

@Component({
	selector: 'hlm-alert-dialog',
	exportAs: 'hlmAlertDialog',
	imports: [HlmAlertDialogOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => HlmAlertDialog),
		},
		provideBrnDialogDefaultOptions({
			...BRN_ALERT_DIALOG_DEFAULT_OPTIONS,
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog-overlay />
		<ng-content />
	`,
})
export class HlmAlertDialog extends BrnAlertDialog {}

export const HlmAlertDialogImports = [
	HlmAlertDialog,
	HlmAlertDialogAction,
	HlmAlertDialogCancel,
	HlmAlertDialogContent,
	HlmAlertDialogDescription,
	HlmAlertDialogFooter,
	HlmAlertDialogHeader,
	HlmAlertDialogMedia,
	HlmAlertDialogOverlay,
	HlmAlertDialogPortal,
	HlmAlertDialogTitle,
	HlmAlertDialogTrigger,
] as const;

Usage

import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';

<hlm-alert-dialog>
  <button hlmAlertDialogTrigger hlmBtn variant="outline">Show Dialog</button>
  <hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx">
    <hlm-alert-dialog-header>
      <h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
      <p hlmAlertDialogDescription>This action cannot be undone. This will permanently delete your account from our servers.</p>
    </hlm-alert-dialog-header>
    <hlm-alert-dialog-footer>
      <button hlmAlertDialogCancel>Cancel</button>
      <button hlmAlertDialogAction>Continue</button>
    </hlm-alert-dialog-footer>
  </hlm-alert-dialog-content>
</hlm-alert-dialog>

Examples

Small

Use the size="sm" prop to make the alert dialog smaller.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-alert-dialog-small',
	imports: [HlmAlertDialogImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog>
			<button hlmAlertDialogTrigger hlmBtn variant="outline">Show Dialog</button>
			<hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx" size="sm">
				<hlm-alert-dialog-header>
					<h2 hlmAlertDialogTitle>Allow accessory to connect?</h2>
					<p hlmAlertDialogDescription>Do you want to allow the USB accessory to connect to this device?</p>
				</hlm-alert-dialog-header>
				<hlm-alert-dialog-footer>
					<button hlmAlertDialogCancel>Don't allow</button>
					<button hlmAlertDialogAction>Allow</button>
				</hlm-alert-dialog-footer>
			</hlm-alert-dialog-content>
		</hlm-alert-dialog>
	`,
})
export class AlertDialogSmall {}

Media

Use the hlm-alert-dialog-media component to add a media element such as an icon or image to the alert dialog.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCircleFadingPlus } from '@ng-icons/lucide';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-alert-dialog-media',
	imports: [HlmAlertDialogImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideCircleFadingPlus })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog>
			<button hlmAlertDialogTrigger hlmBtn variant="outline">Share Project</button>
			<hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx">
				<hlm-alert-dialog-header>
					<hlm-alert-dialog-media>
						<ng-icon name="lucideCircleFadingPlus" />
					</hlm-alert-dialog-media>
					<h2 hlmAlertDialogTitle>Share this project?</h2>
					<p hlmAlertDialogDescription>Anyone with the link will be able to view and edit this project.</p>
				</hlm-alert-dialog-header>
				<hlm-alert-dialog-footer>
					<button hlmAlertDialogCancel>Cancel</button>
					<button hlmAlertDialogAction>Share</button>
				</hlm-alert-dialog-footer>
			</hlm-alert-dialog-content>
		</hlm-alert-dialog>
	`,
})
export class AlertDialogMedia {}

Small with Media

Use the size="sm" prop to make the alert dialog smaller and the hlm-alert-dialog-media component to add a media element such as an icon or image to the alert dialog.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBluetooth } from '@ng-icons/lucide';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-alert-dialog-small-media',
	imports: [HlmAlertDialogImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideBluetooth })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog>
			<button hlmAlertDialogTrigger hlmBtn variant="outline">Show Dialog</button>
			<hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx" size="sm">
				<hlm-alert-dialog-header>
					<hlm-alert-dialog-media>
						<ng-icon name="lucideBluetooth" />
					</hlm-alert-dialog-media>
					<h2 hlmAlertDialogTitle>Allow accessory to connect?</h2>
					<p hlmAlertDialogDescription>Do you want to allow the USB accessory to connect to this device?</p>
				</hlm-alert-dialog-header>
				<hlm-alert-dialog-footer>
					<button hlmAlertDialogCancel>Don't allow</button>
					<button hlmAlertDialogAction>Allow</button>
				</hlm-alert-dialog-footer>
			</hlm-alert-dialog-content>
		</hlm-alert-dialog>
	`,
})
export class AlertDialogSmallMedia {}

Destructive

Use hlmAlertDialogAction with the variant="destructive" prop to indicate a destructive action.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideTrash2 } from '@ng-icons/lucide';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-alert-dialog-destructive',
	imports: [HlmAlertDialogImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideTrash2 })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-alert-dialog>
			<button hlmAlertDialogTrigger hlmBtn variant="destructive">Delete Chat</button>
			<hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx" size="sm">
				<hlm-alert-dialog-header>
					<hlm-alert-dialog-media
						class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"
					>
						<ng-icon name="lucideTrash2" />
					</hlm-alert-dialog-media>
					<h2 hlmAlertDialogTitle>Delete chat?</h2>
					<p hlmAlertDialogDescription>
						This will permanently delete this chat conversation. View
						<a href="#">Settings</a>
						to delete any memories saved during this chat.
					</p>
				</hlm-alert-dialog-header>
				<hlm-alert-dialog-footer>
					<button hlmAlertDialogCancel>Cancel</button>
					<button hlmAlertDialogAction variant="destructive">Delete</button>
				</hlm-alert-dialog-footer>
			</hlm-alert-dialog-content>
		</hlm-alert-dialog>
	`,
})
export class AlertDialogDestructive {}

Use hlmAlertDialogTriggerFor on a menu item to open an alert dialog from a dropdown menu.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';

@Component({
	selector: 'spartan-alert-dialog-dropdown',
	imports: [HlmAlertDialogImports, HlmButtonImports, HlmDropdownMenuImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<button hlmBtn variant="outline" [hlmDropdownMenuTrigger]="menu">Open Menu</button>

		<ng-template #menu>
			<hlm-dropdown-menu>
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>Edit</button>
					<button hlmDropdownMenuItem>Share</button>
				</hlm-dropdown-menu-group>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem variant="destructive" [hlmAlertDialogTriggerFor]="deleteDialog">Delete</button>
			</hlm-dropdown-menu>
		</ng-template>

		<hlm-alert-dialog #deleteDialog="hlmAlertDialog">
			<hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx">
				<hlm-alert-dialog-header>
					<h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
					<p hlmAlertDialogDescription>This action cannot be undone. This will permanently delete this item.</p>
				</hlm-alert-dialog-header>
				<hlm-alert-dialog-footer>
					<button hlmAlertDialogCancel>Cancel</button>
					<button hlmAlertDialogAction variant="destructive">Delete</button>
				</hlm-alert-dialog-footer>
			</hlm-alert-dialog-content>
		</hlm-alert-dialog>
	`,
})
export class AlertDialogDropdown {}

RTL

To enable RTL support in spartan-ng, see the RTL configuration guide.

import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBluetooth } from '@ng-icons/lucide';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButtonImports } from '@spartan-ng/helm/button';

@Component({
	selector: 'spartan-alert-dialog-rtl',
	imports: [HlmAlertDialogImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideBluetooth })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex gap-4" [dir]="_dir()">
			<hlm-alert-dialog>
				<button hlmAlertDialogTrigger hlmBtn variant="outline">{{ _t()['showDialog'] }}</button>
				<hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx" [dir]="_dir()">
					<hlm-alert-dialog-header>
						<h2 hlmAlertDialogTitle>{{ _t()['title'] }}</h2>
						<p hlmAlertDialogDescription>
							{{ _t()['description'] }}
						</p>
					</hlm-alert-dialog-header>
					<hlm-alert-dialog-footer>
						<button hlmAlertDialogCancel>{{ _t()['cancel'] }}</button>
						<button hlmAlertDialogAction>{{ _t()['continue'] }}</button>
					</hlm-alert-dialog-footer>
				</hlm-alert-dialog-content>
			</hlm-alert-dialog>
			<hlm-alert-dialog>
				<button hlmAlertDialogTrigger hlmBtn variant="outline">{{ _t()['showDialogSm'] }}</button>
				<hlm-alert-dialog-content *hlmAlertDialogPortal="let ctx" size="sm" [dir]="_dir()">
					<hlm-alert-dialog-header>
						<hlm-alert-dialog-media>
							<ng-icon name="lucideBluetooth" />
						</hlm-alert-dialog-media>
						<h2 hlmAlertDialogTitle>{{ _t()['smallTitle'] }}</h2>
						<p hlmAlertDialogDescription>
							{{ _t()['smallDescription'] }}
						</p>
					</hlm-alert-dialog-header>
					<hlm-alert-dialog-footer>
						<button hlmAlertDialogCancel>{{ _t()['dontAllow'] }}</button>
						<button hlmAlertDialogAction>{{ _t()['allow'] }}</button>
					</hlm-alert-dialog-footer>
				</hlm-alert-dialog-content>
			</hlm-alert-dialog>
		</div>
	`,
})
export class AlertDialogRtl {
	private readonly _language = inject(TranslateService).language;

	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				showDialog: 'Show Dialog',
				showDialogSm: 'Show Dialog (sm)',
				title: 'Are you absolutely sure?',
				description: 'This action cannot be undone. This will permanently delete your account from our servers.',
				cancel: 'Cancel',
				continue: 'Continue',
				smallTitle: 'Allow accessory to connect?',
				smallDescription: 'Do you want to allow the USB accessory to connect to this device?',
				dontAllow: "Don't allow",
				allow: 'Allow',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				showDialog: 'إظهار الحوار',
				showDialogSm: 'إظهار الحوار (صغير)',
				title: 'هل أنت متأكد تمامًا؟',
				description: 'لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.',
				cancel: 'إلغاء',
				continue: 'متابعة',
				smallTitle: 'السماح للملحق بالاتصال؟',
				smallDescription: 'هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟',
				dontAllow: 'عدم السماح',
				allow: 'السماح',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				showDialog: 'הצג דיאלוג',
				showDialogSm: 'הצג דיאלוג (קטן)',
				title: 'האם אתה בטוח לחלוטין?',
				description: 'פעולה זו לא ניתנת לביטול. זה ימחק לצמיתות את החשבון שלך מהשרתים שלנו.',
				cancel: 'ביטול',
				continue: 'המשך',
				smallTitle: 'לאפשר להתקן להתחבר?',
				smallDescription: 'האם אתה רוצה לאפשר להתקן USB להתחבר למכשיר זה?',
				dontAllow: 'אל תאפשר',
				allow: 'אפשר',
			},
		},
	};

	private readonly _translation = computed(() => this._translations[this._language()]);
	protected readonly _t = computed(() => this._translation().values);
	protected readonly _dir = computed(() => this._translation().dir);
}

Brain API

BrnAlertDialogContent

Selector: [brnAlertDialogContent]

Inputs

Prop	Type	Default	Description
class	string \| null \| undefined	undefined	-
context	T \| undefined	undefined	-

BrnAlertDialogDescription

Selector: [brnAlertDialogDescription]

BrnAlertDialogOverlay

Selector: [brnAlertDialogOverlay],brn-alert-dialog-overlay

Inputs

Prop	Type	Default	Description
class	string \| null \| undefined	undefined	-

BrnAlertDialogTitle

Selector: [brnAlertDialogTitle]

BrnAlertDialogTrigger

Selector: button[brnAlertDialogTrigger],button[brnAlertDialogTriggerFor]

Inputs

Prop	Type	Default	Description
brnAlertDialogTriggerFor	BrnAlertDialog \| undefined	-	-
id	string	`brn-dialog-trigger-${++triggerIdSequence}`	-
type	'button' \| 'submit' \| 'reset'	'button'	-
brnDialogTriggerFor	BrnDialog \| undefined	undefined	-

BrnAlertDialog

Selector: [brnAlertDialog],brn-alert-dialog

ExportAs: brnAlertDialog

Inputs

Prop	Type	Default	Description
id	string	`brn-dialog-${++dialogIdSequence}`	-
state	BrnDialogState \| null	null	-
role	BrnDialogOptions['role']	this._defaultOptions.role	-
hasBackdrop	boolean	this._defaultOptions.hasBackdrop	-
positionStrategy	BrnDialogOptions['positionStrategy']	this._defaultOptions.positionStrategy	-
scrollStrategy	BrnDialogOptions['scrollStrategy'] \| 'close' \| 'reposition' \| null	this._defaultOptions.scrollStrategy	-
restoreFocus	BrnDialogOptions['restoreFocus']	this._defaultOptions.restoreFocus	-
closeOnOutsidePointerEvents	boolean	this._defaultOptions.closeOnOutsidePointerEvents	-
attachTo	BrnDialogOptions['attachTo']	this._defaultOptions.attachTo	-
attachPositions	BrnDialogOptions['attachPositions']	this._defaultOptions.attachPositions	-
autoFocus	BrnDialogOptions['autoFocus']	this._defaultOptions.autoFocus	-
disableClose	boolean	this._defaultOptions.disableClose	-
aria-describedby	BrnDialogOptions['ariaDescribedBy']	this._defaultOptions.ariaDescribedBy	-
aria-labelledby	BrnDialogOptions['ariaLabelledBy']	this._defaultOptions.ariaLabelledBy	-
aria-label	BrnDialogOptions['ariaLabel']	this._defaultOptions.ariaLabel	-
aria-modal	boolean	this._defaultOptions.ariaModal	-

Outputs

Prop	Type	Default	Description
closed	TResult	-	-
stateChanged	BrnDialogState	-	-

Helm API

HlmAlertDialogAction

Selector: button[hlmAlertDialogAction]

Inputs

Prop	Type	Default	Description
type	'button' \| 'submit' \| 'reset'	'button'	-
variant	ButtonVariants['variant']	this._config.variant	-
size	ButtonVariants['size']	this._config.size	-

HlmAlertDialogCancel

Selector: button[hlmAlertDialogCancel]

Inputs

Prop	Type	Default	Description
type	'button' \| 'submit' \| 'reset'	'button'	-
variant	ButtonVariants['variant']	this._config.variant	-
size	ButtonVariants['size']	this._config.size	-

HlmAlertDialogContent

Selector: [hlmAlertDialogContent],hlm-alert-dialog-content

Inputs

Prop	Type	Default	Description
size	'sm' \| 'default'	'default'	-

HlmAlertDialogDescription

Selector: [hlmAlertDialogDescription]

HlmAlertDialogFooter

Selector: [hlmAlertDialogFooter],hlm-alert-dialog-footer

HlmAlertDialogHeader

Selector: [hlmAlertDialogHeader],hlm-alert-dialog-header

HlmAlertDialogMedia

Selector: [hlmAlertDialogMedia],hlm-alert-dialog-media

HlmAlertDialogOverlay

Selector: [hlmAlertDialogOverlay],hlm-alert-dialog-overlay

Inputs

Prop	Type	Default	Description
class	ClassValue	''	-

HlmAlertDialogPortal

Selector: [hlmAlertDialogPortal]

Inputs

Prop	Type	Default	Description
context	T \| undefined	undefined	-
class	string \| null \| undefined	undefined	-

HlmAlertDialogTitle

Selector: [hlmAlertDialogTitle]

HlmAlertDialogTrigger

Selector: button[hlmAlertDialogTrigger],button[hlmAlertDialogTriggerFor]

Inputs

Prop	Type	Default	Description
id	string	`brn-dialog-trigger-${++triggerIdSequence}`	-
hlmAlertDialogTriggerFor	BrnAlertDialog \| undefined	-	-
type	'button' \| 'submit' \| 'reset'	'button'	-

HlmAlertDialog

Selector: hlm-alert-dialog

ExportAs: hlmAlertDialog

Inputs

Prop	Type	Default	Description
id	string	`brn-dialog-${++dialogIdSequence}`	-
state	BrnDialogState \| null	null	-
role	BrnDialogOptions['role']	this._defaultOptions.role	-
hasBackdrop	boolean	this._defaultOptions.hasBackdrop	-
positionStrategy	BrnDialogOptions['positionStrategy']	this._defaultOptions.positionStrategy	-
scrollStrategy	BrnDialogOptions['scrollStrategy'] \| 'close' \| 'reposition' \| null	this._defaultOptions.scrollStrategy	-
restoreFocus	BrnDialogOptions['restoreFocus']	this._defaultOptions.restoreFocus	-
closeOnOutsidePointerEvents	boolean	this._defaultOptions.closeOnOutsidePointerEvents	-
attachTo	BrnDialogOptions['attachTo']	this._defaultOptions.attachTo	-
attachPositions	BrnDialogOptions['attachPositions']	this._defaultOptions.attachPositions	-
autoFocus	BrnDialogOptions['autoFocus']	this._defaultOptions.autoFocus	-
disableClose	boolean	this._defaultOptions.disableClose	-
aria-describedby	BrnDialogOptions['ariaDescribedBy']	this._defaultOptions.ariaDescribedBy	-
aria-labelledby	BrnDialogOptions['ariaLabelledBy']	this._defaultOptions.ariaLabelledBy	-
aria-label	BrnDialogOptions['ariaLabel']	this._defaultOptions.ariaLabel	-
aria-modal	boolean	this._defaultOptions.ariaModal	-

Outputs

Prop	Type	Default	Description
closed	TResult	-	-
stateChanged	BrnDialogState	-	-

Aspect Ratio

Alert

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Alert Dialog

Installation

1 Copy utils if needed

2 Copy and paste the following code into your project.

Usage

Examples

Small

Media

Small with Media

Destructive

Dropdown Menu

RTL

Brain API

BrnAlertDialogContent

Inputs

BrnAlertDialogDescription

BrnAlertDialogOverlay

Inputs

BrnAlertDialogTitle

BrnAlertDialogTrigger

Inputs

BrnAlertDialog

Inputs

Outputs

Helm API

HlmAlertDialogAction

Inputs

HlmAlertDialogCancel

Inputs

HlmAlertDialogContent

Inputs

HlmAlertDialogDescription

HlmAlertDialogFooter

HlmAlertDialogHeader

HlmAlertDialogMedia

HlmAlertDialogOverlay

Inputs

HlmAlertDialogPortal

Inputs

HlmAlertDialogTitle

HlmAlertDialogTrigger

Inputs

HlmAlertDialog

Inputs

Outputs