Sheet

Extends the Dialog component to display content that complements the main content of the screen.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmSheetImports } from '@spartan-ng/helm/sheet';

@Component({
	selector: 'spartan-sheet-preview',
	imports: [HlmSheetImports, HlmFieldImports, HlmButtonImports, HlmInputImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet side="right">
			<button id="edit-profile" hlmSheetTrigger hlmBtn variant="outline">Open</button>
			<hlm-sheet-content *hlmSheetPortal="let ctx">
				<hlm-sheet-header>
					<h3 hlmSheetTitle>Edit Profile</h3>
					<p hlmSheetDescription>Make changes to your profile here. Click save when you're done.</p>
				</hlm-sheet-header>
				<hlm-field-group class="px-4">
					<hlm-field>
						<label hlmFieldLabel for="name">Name</label>
						<input hlmInput id="name" value="Pedro Duarte" />
					</hlm-field>
					<hlm-field>
						<label hlmFieldLabel for="username">Username</label>
						<input hlmInput id="username" value="@peduarte" />
					</hlm-field>
				</hlm-field-group>
				<hlm-sheet-footer>
					<button hlmBtn type="submit">Save Changes</button>
					<button hlmSheetClose hlmBtn variant="outline">Close</button>
				</hlm-sheet-footer>
			</hlm-sheet-content>
		</hlm-sheet>
	`,
})
export class SheetPreview {}

Installation

ng g @spartan-ng/cli:ui sheet

nx g @spartan-ng/cli:ui sheet

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 { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { BrnSheet, BrnSheetClose, BrnSheetContent, BrnSheetDescription, BrnSheetOverlay, BrnSheetTitle, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { ChangeDetectionStrategy, Component, Directive, ElementRef, Renderer2, booleanAttribute, computed, effect, forwardRef, inject, input, signal, untracked } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { lucideX } from '@ng-icons/lucide';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmSheetClose]',
	hostDirectives: [BrnSheetClose],
	host: { 'data-slot': 'sheet-close' },
})
export class HlmSheetClose {}

@Component({
	selector: 'hlm-sheet-content',
	imports: [HlmButton, HlmSheetClose, NgIcon],
	providers: [provideIcons({ lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'sheet-content',
		'[attr.data-side]': '_sideProvider.side()',
		'[attr.data-state]': 'state()',
	},
	template: `
		<ng-content />

		@if (showCloseButton()) {
			<button hlmBtn variant="ghost" size="icon-sm" class="absolute end-3 top-3" hlmSheetClose>
				<span class="sr-only">Close</span>
				<ng-icon name="lucideX" />
			</button>
		}
	`,
})
export class HlmSheetContent {
	private readonly _stateProvider = injectExposesStateProvider({ host: true });
	protected readonly _sideProvider = injectExposedSideProvider({ host: true });
	public readonly state = this._stateProvider.state ?? signal('closed');
	private readonly _renderer = inject(Renderer2);
	private readonly _element = inject(ElementRef);

	public readonly showCloseButton = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	constructor() {
		classes(() => [
			'bg-popover text-popover-foreground fixed flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
			'data-open:animate-in data-closed:animate-out',
			'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
			'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
			'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
			'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
		]);
		effect(() => {
			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
		});
	}
}

@Directive({
	selector: '[hlmSheetDescription]',
	hostDirectives: [BrnSheetDescription],
	host: { 'data-slot': 'sheet-description' },
})
export class HlmSheetDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-sm');
	}
}

@Directive({
	selector: '[hlmSheetFooter],hlm-sheet-footer',
	host: { 'data-slot': 'sheet-footer' },
})
export class HlmSheetFooter {
	constructor() {
		classes(() => 'gap-2 p-4 mt-auto flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetHeader],hlm-sheet-header',
	host: { 'data-slot': 'sheet-header' },
})
export class HlmSheetHeader {
	constructor() {
		classes(() => 'gap-0.5 p-4 flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetOverlay],hlm-sheet-overlay',
	hostDirectives: [BrnSheetOverlay],
})
export class HlmSheetOverlay {
	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: '[hlmSheetPortal]',
	hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
})
export class HlmSheetPortal {}

@Directive({
	selector: '[hlmSheetTitle]',
	hostDirectives: [BrnSheetTitle],
	host: { 'data-slot': 'sheet-title' },
})
export class HlmSheetTitle {
	constructor() {
		classes(() => 'text-foreground text-base font-medium');
	}
}

@Directive({
	selector: 'button[hlmSheetTrigger]',
	hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
	host: { 'data-slot': 'sheet-trigger' },
})
export class HlmSheetTrigger {}

@Component({
	selector: 'hlm-sheet',
	exportAs: 'hlmSheet',
	imports: [HlmSheetOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => BrnSheet),
		},
		{
			provide: BrnSheet,
			useExisting: forwardRef(() => HlmSheet),
		},
		provideBrnDialogDefaultOptions({
			// add custom options here
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet-overlay />
		<ng-content />
	`,
})
export class HlmSheet extends BrnSheet {}

export const HlmSheetImports = [
	HlmSheet,
	HlmSheetClose,
	HlmSheetContent,
	HlmSheetDescription,
	HlmSheetFooter,
	HlmSheetHeader,
	HlmSheetOverlay,
	HlmSheetPortal,
	HlmSheetTitle,
	HlmSheetTrigger,
] as const;

import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { BrnSheet, BrnSheetClose, BrnSheetContent, BrnSheetDescription, BrnSheetOverlay, BrnSheetTitle, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { ChangeDetectionStrategy, Component, Directive, ElementRef, Renderer2, booleanAttribute, computed, effect, forwardRef, inject, input, signal, untracked } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { lucideX } from '@ng-icons/lucide';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmSheetClose]',
	hostDirectives: [BrnSheetClose],
	host: { 'data-slot': 'sheet-close' },
})
export class HlmSheetClose {}

@Component({
	selector: 'hlm-sheet-content',
	imports: [HlmButton, HlmSheetClose, NgIcon],
	providers: [provideIcons({ lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'sheet-content',
		'[attr.data-side]': '_sideProvider.side()',
		'[attr.data-state]': 'state()',
	},
	template: `
		<ng-content />

		@if (showCloseButton()) {
			<button hlmBtn variant="ghost" size="icon-sm" class="absolute end-4 top-4" hlmSheetClose>
				<span class="sr-only">Close</span>
				<ng-icon name="lucideX" />
			</button>
		}
	`,
})
export class HlmSheetContent {
	private readonly _stateProvider = injectExposesStateProvider({ host: true });
	protected readonly _sideProvider = injectExposedSideProvider({ host: true });
	public readonly state = this._stateProvider.state ?? signal('closed');
	private readonly _renderer = inject(Renderer2);
	private readonly _element = inject(ElementRef);

	public readonly showCloseButton = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	constructor() {
		classes(() => [
			'bg-popover text-popover-foreground fixed flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
			'data-open:animate-in data-closed:animate-out',
			'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
			'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
			'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
			'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
		]);
		effect(() => {
			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
		});
	}
}

@Directive({
	selector: '[hlmSheetDescription]',
	hostDirectives: [BrnSheetDescription],
	host: { 'data-slot': 'sheet-description' },
})
export class HlmSheetDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-sm');
	}
}

@Directive({
	selector: '[hlmSheetFooter],hlm-sheet-footer',
	host: { 'data-slot': 'sheet-footer' },
})
export class HlmSheetFooter {
	constructor() {
		classes(() => 'gap-2 p-4 mt-auto flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetHeader],hlm-sheet-header',
	host: { 'data-slot': 'sheet-header' },
})
export class HlmSheetHeader {
	constructor() {
		classes(() => 'gap-1.5 p-4 flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetOverlay],hlm-sheet-overlay',
	hostDirectives: [BrnSheetOverlay],
})
export class HlmSheetOverlay {
	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: '[hlmSheetPortal]',
	hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
})
export class HlmSheetPortal {}

@Directive({
	selector: '[hlmSheetTitle]',
	hostDirectives: [BrnSheetTitle],
	host: { 'data-slot': 'sheet-title' },
})
export class HlmSheetTitle {
	constructor() {
		classes(() => 'text-foreground font-medium');
	}
}

@Directive({
	selector: 'button[hlmSheetTrigger]',
	hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
	host: { 'data-slot': 'sheet-trigger' },
})
export class HlmSheetTrigger {}

@Component({
	selector: 'hlm-sheet',
	exportAs: 'hlmSheet',
	imports: [HlmSheetOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => BrnSheet),
		},
		{
			provide: BrnSheet,
			useExisting: forwardRef(() => HlmSheet),
		},
		provideBrnDialogDefaultOptions({
			// add custom options here
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet-overlay />
		<ng-content />
	`,
})
export class HlmSheet extends BrnSheet {}

export const HlmSheetImports = [
	HlmSheet,
	HlmSheetClose,
	HlmSheetContent,
	HlmSheetDescription,
	HlmSheetFooter,
	HlmSheetHeader,
	HlmSheetOverlay,
	HlmSheetPortal,
	HlmSheetTitle,
	HlmSheetTrigger,
] as const;

import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { BrnSheet, BrnSheetClose, BrnSheetContent, BrnSheetDescription, BrnSheetOverlay, BrnSheetTitle, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { ChangeDetectionStrategy, Component, Directive, ElementRef, Renderer2, booleanAttribute, computed, effect, forwardRef, inject, input, signal, untracked } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { lucideX } from '@ng-icons/lucide';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmSheetClose]',
	hostDirectives: [BrnSheetClose],
	host: { 'data-slot': 'sheet-close' },
})
export class HlmSheetClose {}

@Component({
	selector: 'hlm-sheet-content',
	imports: [HlmButton, HlmSheetClose, NgIcon],
	providers: [provideIcons({ lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'sheet-content',
		'[attr.data-side]': '_sideProvider.side()',
		'[attr.data-state]': 'state()',
	},
	template: `
		<ng-content />

		@if (showCloseButton()) {
			<button hlmBtn variant="ghost" size="icon-sm" class="absolute end-3 top-3" hlmSheetClose>
				<span class="sr-only">Close</span>
				<ng-icon name="lucideX" />
			</button>
		}
	`,
})
export class HlmSheetContent {
	private readonly _stateProvider = injectExposesStateProvider({ host: true });
	protected readonly _sideProvider = injectExposedSideProvider({ host: true });
	public readonly state = this._stateProvider.state ?? signal('closed');
	private readonly _renderer = inject(Renderer2);
	private readonly _element = inject(ElementRef);

	public readonly showCloseButton = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	constructor() {
		classes(() => [
			'bg-popover text-popover-foreground fixed flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
			'data-open:animate-in data-closed:animate-out',
			'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
			'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
			'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
			'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
		]);
		effect(() => {
			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
		});
	}
}

@Directive({
	selector: '[hlmSheetDescription]',
	hostDirectives: [BrnSheetDescription],
	host: { 'data-slot': 'sheet-description' },
})
export class HlmSheetDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-xs/relaxed');
	}
}

@Directive({
	selector: '[hlmSheetFooter],hlm-sheet-footer',
	host: { 'data-slot': 'sheet-footer' },
})
export class HlmSheetFooter {
	constructor() {
		classes(() => 'gap-2 p-4 mt-auto flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetHeader],hlm-sheet-header',
	host: { 'data-slot': 'sheet-header' },
})
export class HlmSheetHeader {
	constructor() {
		classes(() => 'gap-0.5 p-4 flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetOverlay],hlm-sheet-overlay',
	hostDirectives: [BrnSheetOverlay],
})
export class HlmSheetOverlay {
	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 text-xs/relaxed duration-100 supports-backdrop-filter:backdrop-blur-xs', this.userClass()));

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

@Directive({
	selector: '[hlmSheetPortal]',
	hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
})
export class HlmSheetPortal {}

@Directive({
	selector: '[hlmSheetTitle]',
	hostDirectives: [BrnSheetTitle],
	host: { 'data-slot': 'sheet-title' },
})
export class HlmSheetTitle {
	constructor() {
		classes(() => 'text-foreground text-sm font-medium');
	}
}

@Directive({
	selector: 'button[hlmSheetTrigger]',
	hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
	host: { 'data-slot': 'sheet-trigger' },
})
export class HlmSheetTrigger {}

@Component({
	selector: 'hlm-sheet',
	exportAs: 'hlmSheet',
	imports: [HlmSheetOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => BrnSheet),
		},
		{
			provide: BrnSheet,
			useExisting: forwardRef(() => HlmSheet),
		},
		provideBrnDialogDefaultOptions({
			// add custom options here
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet-overlay />
		<ng-content />
	`,
})
export class HlmSheet extends BrnSheet {}

export const HlmSheetImports = [
	HlmSheet,
	HlmSheetClose,
	HlmSheetContent,
	HlmSheetDescription,
	HlmSheetFooter,
	HlmSheetHeader,
	HlmSheetOverlay,
	HlmSheetPortal,
	HlmSheetTitle,
	HlmSheetTrigger,
] as const;

import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { BrnSheet, BrnSheetClose, BrnSheetContent, BrnSheetDescription, BrnSheetOverlay, BrnSheetTitle, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { ChangeDetectionStrategy, Component, Directive, ElementRef, Renderer2, booleanAttribute, computed, effect, forwardRef, inject, input, signal, untracked } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { lucideX } from '@ng-icons/lucide';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmSheetClose]',
	hostDirectives: [BrnSheetClose],
	host: { 'data-slot': 'sheet-close' },
})
export class HlmSheetClose {}

@Component({
	selector: 'hlm-sheet-content',
	imports: [HlmButton, HlmSheetClose, NgIcon],
	providers: [provideIcons({ lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'sheet-content',
		'[attr.data-side]': '_sideProvider.side()',
		'[attr.data-state]': 'state()',
	},
	template: `
		<ng-content />

		@if (showCloseButton()) {
			<button hlmBtn variant="ghost" size="icon-sm" class="absolute end-4 top-4" hlmSheetClose>
				<span class="sr-only">Close</span>
				<ng-icon name="lucideX" />
			</button>
		}
	`,
})
export class HlmSheetContent {
	private readonly _stateProvider = injectExposesStateProvider({ host: true });
	protected readonly _sideProvider = injectExposedSideProvider({ host: true });
	public readonly state = this._stateProvider.state ?? signal('closed');
	private readonly _renderer = inject(Renderer2);
	private readonly _element = inject(ElementRef);

	public readonly showCloseButton = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	constructor() {
		classes(() => [
			'bg-popover text-popover-foreground fixed flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
			'data-open:animate-in data-closed:animate-out',
			'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
			'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
			'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
			'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
		]);
		effect(() => {
			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
		});
	}
}

@Directive({
	selector: '[hlmSheetDescription]',
	hostDirectives: [BrnSheetDescription],
	host: { 'data-slot': 'sheet-description' },
})
export class HlmSheetDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-sm');
	}
}

@Directive({
	selector: '[hlmSheetFooter],hlm-sheet-footer',
	host: { 'data-slot': 'sheet-footer' },
})
export class HlmSheetFooter {
	constructor() {
		classes(() => 'gap-2 p-6 mt-auto flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetHeader],hlm-sheet-header',
	host: { 'data-slot': 'sheet-header' },
})
export class HlmSheetHeader {
	constructor() {
		classes(() => 'gap-1.5 p-6 flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetOverlay],hlm-sheet-overlay',
	hostDirectives: [BrnSheetOverlay],
})
export class HlmSheetOverlay {
	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: '[hlmSheetPortal]',
	hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
})
export class HlmSheetPortal {}

@Directive({
	selector: '[hlmSheetTitle]',
	hostDirectives: [BrnSheetTitle],
	host: { 'data-slot': 'sheet-title' },
})
export class HlmSheetTitle {
	constructor() {
		classes(() => 'text-foreground text-base font-medium');
	}
}

@Directive({
	selector: 'button[hlmSheetTrigger]',
	hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
	host: { 'data-slot': 'sheet-trigger' },
})
export class HlmSheetTrigger {}

@Component({
	selector: 'hlm-sheet',
	exportAs: 'hlmSheet',
	imports: [HlmSheetOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => BrnSheet),
		},
		{
			provide: BrnSheet,
			useExisting: forwardRef(() => HlmSheet),
		},
		provideBrnDialogDefaultOptions({
			// add custom options here
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet-overlay />
		<ng-content />
	`,
})
export class HlmSheet extends BrnSheet {}

export const HlmSheetImports = [
	HlmSheet,
	HlmSheetClose,
	HlmSheetContent,
	HlmSheetDescription,
	HlmSheetFooter,
	HlmSheetHeader,
	HlmSheetOverlay,
	HlmSheetPortal,
	HlmSheetTitle,
	HlmSheetTrigger,
] as const;

import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { BrnSheet, BrnSheetClose, BrnSheetContent, BrnSheetDescription, BrnSheetOverlay, BrnSheetTitle, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { ChangeDetectionStrategy, Component, Directive, ElementRef, Renderer2, booleanAttribute, computed, effect, forwardRef, inject, input, signal, untracked } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { lucideX } from '@ng-icons/lucide';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmSheetClose]',
	hostDirectives: [BrnSheetClose],
	host: { 'data-slot': 'sheet-close' },
})
export class HlmSheetClose {}

@Component({
	selector: 'hlm-sheet-content',
	imports: [HlmButton, HlmSheetClose, NgIcon],
	providers: [provideIcons({ lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'sheet-content',
		'[attr.data-side]': '_sideProvider.side()',
		'[attr.data-state]': 'state()',
	},
	template: `
		<ng-content />

		@if (showCloseButton()) {
			<button hlmBtn variant="ghost" size="icon-sm" class="absolute end-4 top-4" hlmSheetClose>
				<span class="sr-only">Close</span>
				<ng-icon name="lucideX" />
			</button>
		}
	`,
})
export class HlmSheetContent {
	private readonly _stateProvider = injectExposesStateProvider({ host: true });
	protected readonly _sideProvider = injectExposedSideProvider({ host: true });
	public readonly state = this._stateProvider.state ?? signal('closed');
	private readonly _renderer = inject(Renderer2);
	private readonly _element = inject(ElementRef);

	public readonly showCloseButton = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	constructor() {
		classes(() => [
			'bg-popover text-popover-foreground fixed flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
			'data-open:animate-in data-closed:animate-out',
			'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
			'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
			'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
			'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
		]);
		effect(() => {
			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
		});
	}
}

@Directive({
	selector: '[hlmSheetDescription]',
	hostDirectives: [BrnSheetDescription],
	host: { 'data-slot': 'sheet-description' },
})
export class HlmSheetDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-xs/relaxed');
	}
}

@Directive({
	selector: '[hlmSheetFooter],hlm-sheet-footer',
	host: { 'data-slot': 'sheet-footer' },
})
export class HlmSheetFooter {
	constructor() {
		classes(() => 'gap-2 p-6 mt-auto flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetHeader],hlm-sheet-header',
	host: { 'data-slot': 'sheet-header' },
})
export class HlmSheetHeader {
	constructor() {
		classes(() => 'gap-1.5 p-6 flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetOverlay],hlm-sheet-overlay',
	hostDirectives: [BrnSheetOverlay],
})
export class HlmSheetOverlay {
	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: '[hlmSheetPortal]',
	hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
})
export class HlmSheetPortal {}

@Directive({
	selector: '[hlmSheetTitle]',
	hostDirectives: [BrnSheetTitle],
	host: { 'data-slot': 'sheet-title' },
})
export class HlmSheetTitle {
	constructor() {
		classes(() => 'text-foreground text-sm font-medium');
	}
}

@Directive({
	selector: 'button[hlmSheetTrigger]',
	hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
	host: { 'data-slot': 'sheet-trigger' },
})
export class HlmSheetTrigger {}

@Component({
	selector: 'hlm-sheet',
	exportAs: 'hlmSheet',
	imports: [HlmSheetOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => BrnSheet),
		},
		{
			provide: BrnSheet,
			useExisting: forwardRef(() => HlmSheet),
		},
		provideBrnDialogDefaultOptions({
			// add custom options here
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet-overlay />
		<ng-content />
	`,
})
export class HlmSheet extends BrnSheet {}

export const HlmSheetImports = [
	HlmSheet,
	HlmSheetClose,
	HlmSheetContent,
	HlmSheetDescription,
	HlmSheetFooter,
	HlmSheetHeader,
	HlmSheetOverlay,
	HlmSheetPortal,
	HlmSheetTitle,
	HlmSheetTrigger,
] as const;

import { BrnDialog, provideBrnDialogDefaultOptions } from '@spartan-ng/brain/dialog';
import { BrnSheet, BrnSheetClose, BrnSheetContent, BrnSheetDescription, BrnSheetOverlay, BrnSheetTitle, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { ChangeDetectionStrategy, Component, Directive, ElementRef, Renderer2, booleanAttribute, computed, effect, forwardRef, inject, input, signal, untracked } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { classes, hlm } from '@spartan-ng/helm/utils';
import { injectCustomClassSettable, injectExposedSideProvider, injectExposesStateProvider } from '@spartan-ng/brain/core';
import { lucideX } from '@ng-icons/lucide';
import { type BooleanInput } from '@angular/cdk/coercion';
import { type ClassValue } from 'clsx';

@Directive({
	selector: 'button[hlmSheetClose]',
	hostDirectives: [BrnSheetClose],
	host: { 'data-slot': 'sheet-close' },
})
export class HlmSheetClose {}

@Component({
	selector: 'hlm-sheet-content',
	imports: [HlmButton, HlmSheetClose, NgIcon],
	providers: [provideIcons({ lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		'data-slot': 'sheet-content',
		'[attr.data-side]': '_sideProvider.side()',
		'[attr.data-state]': 'state()',
	},
	template: `
		<ng-content />

		@if (showCloseButton()) {
			<button hlmBtn variant="ghost" size="icon-sm" class="bg-secondary absolute end-4 top-4" hlmSheetClose>
				<span class="sr-only">Close</span>
				<ng-icon name="lucideX" />
			</button>
		}
	`,
})
export class HlmSheetContent {
	private readonly _stateProvider = injectExposesStateProvider({ host: true });
	protected readonly _sideProvider = injectExposedSideProvider({ host: true });
	public readonly state = this._stateProvider.state ?? signal('closed');
	private readonly _renderer = inject(Renderer2);
	private readonly _element = inject(ElementRef);

	public readonly showCloseButton = input<boolean, BooleanInput>(true, { transform: booleanAttribute });

	constructor() {
		classes(() => [
			'bg-popover text-popover-foreground fixed flex flex-col bg-clip-padding text-sm shadow-xl transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
			'data-open:animate-in data-closed:animate-out',
			'data-[side=top]:data-closed:slide-out-to-top data-[side=top]:data-open:slide-in-from-top',
			'data-[side=bottom]:data-closed:slide-out-to-bottom data-[side=bottom]:data-open:slide-in-from-bottom',
			'data-[side=left]:data-closed:slide-out-to-left data-[side=left]:data-open:slide-in-from-left',
			'data-[side=right]:data-closed:slide-out-to-right data-[side=right]:data-open:slide-in-from-right',
		]);
		effect(() => {
			this._renderer.setAttribute(this._element.nativeElement, 'data-state', this.state());
		});
	}
}

@Directive({
	selector: '[hlmSheetDescription]',
	hostDirectives: [BrnSheetDescription],
	host: { 'data-slot': 'sheet-description' },
})
export class HlmSheetDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-sm');
	}
}

@Directive({
	selector: '[hlmSheetFooter],hlm-sheet-footer',
	host: { 'data-slot': 'sheet-footer' },
})
export class HlmSheetFooter {
	constructor() {
		classes(() => 'gap-2 p-6 mt-auto flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetHeader],hlm-sheet-header',
	host: { 'data-slot': 'sheet-header' },
})
export class HlmSheetHeader {
	constructor() {
		classes(() => 'gap-1.5 p-6 flex flex-col');
	}
}

@Directive({
	selector: '[hlmSheetOverlay],hlm-sheet-overlay',
	hostDirectives: [BrnSheetOverlay],
})
export class HlmSheetOverlay {
	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: '[hlmSheetPortal]',
	hostDirectives: [{ directive: BrnSheetContent, inputs: ['context', 'class'] }],
})
export class HlmSheetPortal {}

@Directive({
	selector: '[hlmSheetTitle]',
	hostDirectives: [BrnSheetTitle],
	host: { 'data-slot': 'sheet-title' },
})
export class HlmSheetTitle {
	constructor() {
		classes(() => 'text-foreground text-base font-medium');
	}
}

@Directive({
	selector: 'button[hlmSheetTrigger]',
	hostDirectives: [{ directive: BrnSheetTrigger, inputs: ['id', 'side', 'type'] }],
	host: { 'data-slot': 'sheet-trigger' },
})
export class HlmSheetTrigger {}

@Component({
	selector: 'hlm-sheet',
	exportAs: 'hlmSheet',
	imports: [HlmSheetOverlay],
	providers: [
		{
			provide: BrnDialog,
			useExisting: forwardRef(() => BrnSheet),
		},
		{
			provide: BrnSheet,
			useExisting: forwardRef(() => HlmSheet),
		},
		provideBrnDialogDefaultOptions({
			// add custom options here
		}),
	],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet-overlay />
		<ng-content />
	`,
})
export class HlmSheet extends BrnSheet {}

export const HlmSheetImports = [
	HlmSheet,
	HlmSheetClose,
	HlmSheetContent,
	HlmSheetDescription,
	HlmSheetFooter,
	HlmSheetHeader,
	HlmSheetOverlay,
	HlmSheetPortal,
	HlmSheetTitle,
	HlmSheetTrigger,
] as const;

Usage

import { HlmSheetImports } from '@spartan-ng/helm/sheet';

<hlm-sheet>
  <button hlmSheetTrigger hlmBtn variant="outline">Open</button>
  <hlm-sheet-content *hlmSheetPortal="let ctx">
    <hlm-sheet-header>
      <h3 hlmSheetTitle>Are you absolutely sure?</h3>
      <p hlmSheetDescription>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
    </hlm-sheet-header>
  </hlm-sheet-content>
</hlm-sheet>

Examples

Side

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmSheetImports } from '@spartan-ng/helm/sheet';

@Component({
	selector: 'spartan-sheet-side-preview',
	imports: [HlmSheetImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet>
			<div class="flex flex-wrap gap-2">
				<button id="top" hlmSheetTrigger side="top" hlmBtn variant="outline">Top</button>
				<button id="right" hlmSheetTrigger side="right" hlmBtn variant="outline">Right</button>
				<button id="bottom" hlmSheetTrigger side="bottom" hlmBtn variant="outline">Bottom</button>
				<button id="left" hlmSheetTrigger side="left" hlmBtn variant="outline">Left</button>
			</div>
			<hlm-sheet-content *hlmSheetPortal="let ctx" class="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]">
				<hlm-sheet-header>
					<h3 hlmSheetTitle>Edit profile</h3>
					<p hlmSheetDescription>Make changes to your profile here. Click save when you're done.</p>
				</hlm-sheet-header>
				<div class="no-scrollbar overflow-y-auto px-4">
					@for (item of _items; track item) {
						<p class="mb-4 leading-normal">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
							dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
							ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
							fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
							mollit anim id est laborum.
						</p>
					}
				</div>
				<hlm-sheet-footer>
					<button hlmBtn>Save changes</button>
					<button hlmBtn variant="outline" hlmSheetClose>Cancel</button>
				</hlm-sheet-footer>
			</hlm-sheet-content>
		</hlm-sheet>
	`,
})
export class SheetSidePreview {
	protected readonly _items = Array.from({ length: 10 }, (_, i) => i + 1);
}

No Close

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmSheetImports } from '@spartan-ng/helm/sheet';

@Component({
	selector: 'spartan-sheet-no-close',
	imports: [HlmSheetImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet side="right">
			<button variant="outline" hlmSheetTrigger hlmBtn>Open</button>
			<hlm-sheet-content *hlmSheetPortal="let ctx" [showCloseButton]="false">
				<hlm-sheet-header>
					<h3 hlmSheetTitle>No Close Button</h3>
					<p hlmSheetDescription>
						This sheet doesn't have a close button in the top-right corner. Click outside to close.
					</p>
				</hlm-sheet-header>
			</hlm-sheet-content>
		</hlm-sheet>
	`,
})
export class SheetNoClose {}

Size

You can adjust the size of the sheet by adding CSS classes to hlm-sheet-content .

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmSheetImports } from '@spartan-ng/helm/sheet';

@Component({
	selector: 'spartan-sheet-size-preview',
	imports: [HlmSheetImports, HlmFieldImports, HlmButtonImports, HlmInputImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet side="right">
			<button id="edit-profile" variant="outline" hlmSheetTrigger hlmBtn>Open</button>
			<hlm-sheet-content *hlmSheetPortal="let ctx" class="w-[400px] sm:w-[540px] sm:max-w-none">
				<hlm-sheet-header>
					<h3 hlmSheetTitle>Edit Profile</h3>
					<p hlmSheetDescription>Make changes to your profile here. Click save when you're done.</p>
				</hlm-sheet-header>
				<hlm-field-group class="px-4">
					<hlm-field>
						<label hlmFieldLabel for="name">Name</label>
						<input hlmInput id="name" value="Pedro Duarte" />
					</hlm-field>
					<hlm-field>
						<label hlmFieldLabel for="username">Username</label>
						<input hlmInput id="username" value="@peduarte" />
					</hlm-field>
				</hlm-field-group>
				<hlm-sheet-footer>
					<button hlmBtn type="submit">Save Changes</button>
				</hlm-sheet-footer>
			</hlm-sheet-content>
		</hlm-sheet>
	`,
})
export class SheetSizePreview {}

Close Sheet

import { ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { BrnSheet } from '@spartan-ng/brain/sheet';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmSheetImports } from '@spartan-ng/helm/sheet';

@Component({
	selector: 'spartan-sheet-close-preview',
	imports: [HlmSheetImports, HlmButtonImports, HlmLabelImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet #sheetRef side="right">
			<button id="edit-profile" variant="outline" hlmSheetTrigger hlmBtn>Open</button>
			<hlm-sheet-content *hlmSheetPortal="let ctx">
				<hlm-sheet-header>
					<h3 hlmSheetTitle>Sheet</h3>
				</hlm-sheet-header>
				<div class="grid flex-1 auto-rows-min gap-6 px-4">
					<div class="grid gap-3">
						<label hlmLabel>Close sheet by directive</label>
						<button hlmBtn hlmSheetClose>Close</button>
					</div>
					<div class="grid gap-3">
						<label hlmLabel>Close sheet by reference</label>
						<button hlmBtn (click)="sheetRef.close({})">Close</button>
					</div>
					<div class="grid gap-3">
						<label hlmLabel>Close sheet by viewChild reference</label>
						<button hlmBtn (click)="closeSheet()">Close</button>
					</div>
				</div>
			</hlm-sheet-content>
		</hlm-sheet>
	`,
})
export class SheetClosePreview {
	public readonly viewChildSheetRef = viewChild(BrnSheet);

	closeSheet() {
		this.viewChildSheetRef()?.close({});
	}
}

Open From Dropdown

Declare the hlm-sheet outside of the dropdown's ng-template and open it from a menu item with sheet.open() . Nesting the sheet inside the template destroys it when the dropdown closes, which breaks the open animation.

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

@Component({
	selector: 'spartan-sheet-from-dropdown-preview',
	imports: [HlmSheetImports, HlmDropdownMenuImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<button hlmBtn variant="outline" [hlmDropdownMenuTrigger]="menu">Options</button>

		<!-- Keep the sheet outside the dropdown's ng-template so closing the menu does not destroy it. -->
		<hlm-sheet #sheet="hlmSheet" side="right">
			<hlm-sheet-content *hlmSheetPortal="let ctx">
				<hlm-sheet-header>
					<h3 hlmSheetTitle>Edit Profile</h3>
					<p hlmSheetDescription>Make changes to your profile here. Click save when you're done.</p>
				</hlm-sheet-header>
				<hlm-sheet-footer>
					<button hlmBtn type="submit">Save Changes</button>
					<button hlmSheetClose hlmBtn variant="outline">Close</button>
				</hlm-sheet-footer>
			</hlm-sheet-content>
		</hlm-sheet>

		<ng-template #menu>
			<hlm-dropdown-menu class="w-40">
				<button hlmDropdownMenuItem (click)="sheet.open()">Edit Profile</button>
				<button hlmDropdownMenuItem>Duplicate</button>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem>Delete</button>
			</hlm-dropdown-menu>
		</ng-template>
	`,
})
export class SheetFromDropdownPreview {}

RTL

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

import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmFieldImports } from '@spartan-ng/helm/field';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmSheetImports } from '@spartan-ng/helm/sheet';

@Component({
	selector: 'spartan-sheet-rtl',
	imports: [HlmSheetImports, HlmFieldImports, HlmButtonImports, HlmInputImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-sheet [side]="_dir() === 'rtl' ? 'left' : 'right'" [dir]="_dir()">
			<button hlmSheetTrigger hlmBtn variant="outline">{{ _t()['open'] }}</button>
			<hlm-sheet-content *hlmSheetPortal="let ctx" [dir]="_dir()">
				<hlm-sheet-header>
					<h3 hlmSheetTitle>{{ _t()['editProfile'] }}</h3>
					<p hlmSheetDescription>{{ _t()['description'] }}</p>
				</hlm-sheet-header>
				<hlm-field-group class="px-4">
					<hlm-field>
						<label hlmFieldLabel for="name-rtl">{{ _t()['name'] }}</label>
						<input hlmInput id="name-rtl" value="Pedro Duarte" />
					</hlm-field>
					<hlm-field>
						<label hlmFieldLabel for="username-rtl">{{ _t()['username'] }}</label>
						<input hlmInput id="username-rtl" value="peduarte" />
					</hlm-field>
				</hlm-field-group>
				<hlm-sheet-footer>
					<button hlmBtn type="submit">{{ _t()['save'] }}</button>
					<button hlmSheetClose hlmBtn variant="outline">{{ _t()['close'] }}</button>
				</hlm-sheet-footer>
			</hlm-sheet-content>
		</hlm-sheet>
	`,
})
export class SheetRtl {
	private readonly _language = inject(TranslateService).language;

	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				open: 'Open',
				editProfile: 'Edit profile',
				description: "Make changes to your profile here. Click save when you're done.",
				name: 'Name',
				username: 'Username',
				save: 'Save changes',
				close: 'Close',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				open: 'فتح',
				editProfile: 'تعديل الملف الشخصي',
				description: 'قم بإجراء تغييرات على ملفك الشخصي هنا. انقر حفظ عند الانتهاء.',
				name: 'الاسم',
				username: 'اسم المستخدم',
				save: 'حفظ التغييرات',
				close: 'إغلاق',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				open: 'פתח',
				editProfile: 'עריכת פרופיל',
				description: 'בצע שינויים בפרופיל שלך כאן. לחץ שמור כשתסיים.',
				name: 'שם',
				username: 'שם משתמש',
				save: 'שמור שינויים',
				close: 'סגור',
			},
		},
	};

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

Brain API

BrnSheetClose

Selector: button[brnSheetClose]

BrnSheetContent

Selector: [brnSheetContent]

Inputs

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

BrnSheetDescription

Selector: [brnSheetDescription]

BrnSheetOverlay

Selector: [brnSheetOverlay],brn-sheet-overlay

Inputs

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

BrnSheetTitle

Selector: [brnSheetTitle]

BrnSheetTrigger

Selector: button[brnSheetTrigger]

Inputs

Prop	Type	Default	Description
side	'top' \| 'bottom' \| 'left' \| 'right' \| undefined	undefined	Override the side from where the sheet appears for this trigger.
id	string	`brn-dialog-trigger-${++triggerIdSequence}`	-
type	'button' \| 'submit' \| 'reset'	'button'	-
brnDialogTriggerFor	BrnDialog \| undefined	undefined	-

BrnSheet

Selector: [brnSheet],brn-sheet

ExportAs: brnSheet

Inputs

Prop	Type	Default	Description
side	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Specifies the side of the screen where the sheet will appear.
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

HlmSheetClose

Selector: button[hlmSheetClose]

HlmSheetContent

Selector: hlm-sheet-content

Inputs

Prop	Type	Default	Description
showCloseButton	boolean	true	-

HlmSheetDescription

Selector: [hlmSheetDescription]

HlmSheetFooter

Selector: [hlmSheetFooter],hlm-sheet-footer

HlmSheetHeader

Selector: [hlmSheetHeader],hlm-sheet-header

HlmSheetOverlay

Selector: [hlmSheetOverlay],hlm-sheet-overlay

Inputs

Prop	Type	Default	Description
class	ClassValue	''	-

HlmSheetPortal

Selector: [hlmSheetPortal]

Inputs

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

HlmSheetTitle

Selector: [hlmSheetTitle]

HlmSheetTrigger

Selector: button[hlmSheetTrigger]

Inputs

Prop	Type	Default	Description
id	string	`brn-dialog-trigger-${++triggerIdSequence}`	-
side	'top' \| 'bottom' \| 'left' \| 'right' \| undefined	undefined	Override the side from where the sheet appears for this trigger.
type	'button' \| 'submit' \| 'reset'	'button'	-

HlmSheet

Selector: hlm-sheet

ExportAs: hlmSheet

Inputs

Prop	Type	Default	Description
side	'top' \| 'bottom' \| 'left' \| 'right'	'top'	Specifies the side of the screen where the sheet will appear.
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	-	-

Sidebar

Separator

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Sheet

Installation

1 Copy utils if needed

2 Copy and paste the following code into your project.

Usage

Examples

Side

No Close

Size

Close Sheet

Open From Dropdown

RTL

Brain API

BrnSheetClose

BrnSheetContent

Inputs

BrnSheetDescription

BrnSheetOverlay

Inputs

BrnSheetTitle

BrnSheetTrigger

Inputs

BrnSheet

Inputs

Outputs

Helm API

HlmSheetClose

HlmSheetContent

Inputs

HlmSheetDescription

HlmSheetFooter

HlmSheetHeader

HlmSheetOverlay

Inputs

HlmSheetPortal

Inputs

HlmSheetTitle

HlmSheetTrigger

Inputs

HlmSheet

Inputs

Outputs