Attachment

Displays file and image attachments with media, metadata, upload state, and actions.

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

sales-dashboard.pdfUploading · 64%

message-renderer.tsxTypeScript · 12 KB

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideFileCode, lucideX } from '@ng-icons/lucide';
import { HlmAttachmentImports } from '@spartan-ng/helm/attachment';
import { HlmSpinner } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-attachment-preview',
	imports: [HlmAttachmentImports, HlmSpinner, NgIcon],
	providers: [provideIcons({ lucideFileCode, lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-sm flex-col gap-3 py-12',
	},
	template: `
		<div hlmAttachmentGroup>
			@for (image of _images; track image.name) {
				<div hlmAttachment orientation="vertical">
					<div hlmAttachmentMedia variant="image">
						<img [src]="image.src" [alt]="image.alt" />
					</div>
					<div hlmAttachmentContent>
						<span hlmAttachmentTitle>{{ image.name }}</span>
						<span hlmAttachmentDescription>{{ image.meta }}</span>
					</div>
				</div>
			}
		</div>

		<div hlmAttachment state="uploading" class="w-full">
			<div hlmAttachmentMedia>
				<hlm-spinner />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>sales-dashboard.pdf</span>
				<span hlmAttachmentDescription>Uploading · 64%</span>
			</div>
			<div hlmAttachmentActions>
				<button hlmAttachmentAction aria-label="Cancel upload">
					<ng-icon name="lucideX" />
				</button>
			</div>
		</div>

		<div hlmAttachment class="w-full">
			<div hlmAttachmentMedia>
				<ng-icon name="lucideFileCode" />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>message-renderer.tsx</span>
				<span hlmAttachmentDescription>TypeScript · 12 KB</span>
			</div>
			<div hlmAttachmentActions>
				<button hlmAttachmentAction aria-label="Remove message-renderer.tsx">
					<ng-icon name="lucideX" />
				</button>
			</div>
		</div>
	`,
})
export class AttachmentPreview {
	protected readonly _images = [
		{
			name: 'workspace.png',
			meta: 'PNG · 820 KB',
			src: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80',
			alt: 'Workspace',
		},
		{
			name: 'desk-reference.jpg',
			meta: 'JPG · 1.1 MB',
			src: 'https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80',
			alt: 'Desk',
		},
		{
			name: 'office-reference.jpg',
			meta: 'JPG · 940 KB',
			src: 'https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80',
			alt: 'Office',
		},
	];
}

Installation

ng g @spartan-ng/cli:ui attachment

nx g @spartan-ng/cli:ui attachment

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 { Directive, ElementRef, computed, inject, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

@Directive({
	selector: 'button[hlmAttachmentAction]',
	providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: {
		'data-slot': 'attachment-action',
		'[type]': 'type()',
	},
})
export class HlmAttachmentAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAttachmentActions],hlm-attachment-actions',
	host: { 'data-slot': 'attachment-actions' },
})
export class HlmAttachmentActions {
	constructor() {
		classes(
			() =>
				'shrink-0 items-center relative z-20 flex group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:end-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentContent],hlm-attachment-content',
	host: { 'data-slot': 'attachment-content' },
})
export class HlmAttachmentContent {
	constructor() {
		classes(() => 'min-w-0 flex-1 leading-tight max-w-full group-data-[orientation=vertical]/attachment:px-1');
	}
}

@Directive({
	selector: '[hlmAttachmentDescription],hlm-attachment-description',
	host: { 'data-slot': 'attachment-description' },
})
export class HlmAttachmentDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground mt-0.5 truncate text-xs group-data-[state=error]/attachment:text-destructive/80 block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentGroup],hlm-attachment-group',
	host: { 'data-slot': 'attachment-group' },
})
export class HlmAttachmentGroup {
	constructor() {
		classes(
			() =>
				'scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',
		);
	}
}

const attachmentMediaVariants = cva(
	"bg-muted text-foreground w-10 rounded-lg group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[orientation=vertical]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(6)] group-data-[size=xs]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
	{
		variants: {
			variant: {
				icon: 'bg-muted',
				image: 'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'icon',
		},
	},
);

export type AttachmentMediaVariants = VariantProps<typeof attachmentMediaVariants>;

@Directive({
	selector: '[hlmAttachmentMedia],hlm-attachment-media',
	host: {
		'data-slot': 'attachment-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmAttachmentMedia {
	public readonly variant = input<AttachmentMediaVariants['variant']>('icon');

	constructor() {
		classes(() => attachmentMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmAttachmentTitle],hlm-attachment-title',
	host: { 'data-slot': 'attachment-title' },
})
export class HlmAttachmentTitle {
	constructor() {
		classes(
			() =>
				'truncate text-sm font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: 'button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]',
	host: {
		'data-slot': 'attachment-trigger',
		'[attr.type]': '_hostType()',
	},
})
export class HlmAttachmentTrigger {
	private readonly _elementRef = inject(ElementRef<HTMLElement>);

	public readonly type = input<'button' | 'submit' | 'reset' | null>('button');

	protected readonly _hostType = computed(() =>
		this._elementRef.nativeElement.localName === 'button' ? this.type() : null,
	);

	constructor() {
		classes(() => 'absolute inset-0 z-10 outline-none');
	}
}

const attachmentVariants = cva(
	'bg-card text-card-foreground rounded-xl border group/attachment focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap transition-colors focus-within:ring-1 data-[state=idle]:border-dashed',
	{
		variants: {
			size: {
				default:
					'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
				sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
				xs: 'rounded-lg gap-1.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
			},
			orientation: {
				horizontal: 'min-w-40 items-center',
				vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',
			},
		},
		defaultVariants: {
			size: 'default',
			orientation: 'horizontal',
		},
	},
);

export type AttachmentVariants = VariantProps<typeof attachmentVariants>;
export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';

@Directive({
	selector: '[hlmAttachment],hlm-attachment',
	host: {
		'data-slot': 'attachment',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
		'[attr.data-orientation]': 'orientation()',
	},
})
export class HlmAttachment {
	public readonly state = input<AttachmentState>('done');
	public readonly size = input<AttachmentVariants['size']>('default');
	public readonly orientation = input<AttachmentVariants['orientation']>('horizontal');

	constructor() {
		classes(() => attachmentVariants({ size: this.size(), orientation: this.orientation() }));
	}
}

export const HlmAttachmentImports = [
	HlmAttachment,
	HlmAttachmentAction,
	HlmAttachmentActions,
	HlmAttachmentContent,
	HlmAttachmentDescription,
	HlmAttachmentGroup,
	HlmAttachmentMedia,
	HlmAttachmentTitle,
	HlmAttachmentTrigger,
] as const;

import { Directive, ElementRef, computed, inject, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

@Directive({
	selector: 'button[hlmAttachmentAction]',
	providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: {
		'data-slot': 'attachment-action',
		'[type]': 'type()',
	},
})
export class HlmAttachmentAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAttachmentActions],hlm-attachment-actions',
	host: { 'data-slot': 'attachment-actions' },
})
export class HlmAttachmentActions {
	constructor() {
		classes(
			() =>
				'shrink-0 items-center relative z-20 flex group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:end-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentContent],hlm-attachment-content',
	host: { 'data-slot': 'attachment-content' },
})
export class HlmAttachmentContent {
	constructor() {
		classes(() => 'min-w-0 flex-1 leading-normal max-w-full group-data-[orientation=vertical]/attachment:px-1');
	}
}

@Directive({
	selector: '[hlmAttachmentDescription],hlm-attachment-description',
	host: { 'data-slot': 'attachment-description' },
})
export class HlmAttachmentDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground mt-0.5 truncate text-xs group-data-[state=error]/attachment:text-destructive/80 block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentGroup],hlm-attachment-group',
	host: { 'data-slot': 'attachment-group' },
})
export class HlmAttachmentGroup {
	constructor() {
		classes(
			() =>
				'scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',
		);
	}
}

const attachmentMediaVariants = cva(
	"bg-muted text-foreground w-10 rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[orientation=vertical]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(6)] group-data-[size=xs]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
	{
		variants: {
			variant: {
				icon: 'bg-muted',
				image: 'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'icon',
		},
	},
);

export type AttachmentMediaVariants = VariantProps<typeof attachmentMediaVariants>;

@Directive({
	selector: '[hlmAttachmentMedia],hlm-attachment-media',
	host: {
		'data-slot': 'attachment-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmAttachmentMedia {
	public readonly variant = input<AttachmentMediaVariants['variant']>('icon');

	constructor() {
		classes(() => attachmentMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmAttachmentTitle],hlm-attachment-title',
	host: { 'data-slot': 'attachment-title' },
})
export class HlmAttachmentTitle {
	constructor() {
		classes(
			() =>
				'truncate text-sm font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: 'button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]',
	host: {
		'data-slot': 'attachment-trigger',
		'[attr.type]': '_hostType()',
	},
})
export class HlmAttachmentTrigger {
	private readonly _elementRef = inject(ElementRef<HTMLElement>);

	public readonly type = input<'button' | 'submit' | 'reset' | null>('button');

	protected readonly _hostType = computed(() =>
		this._elementRef.nativeElement.localName === 'button' ? this.type() : null,
	);

	constructor() {
		classes(() => 'absolute inset-0 z-10 outline-none');
	}
}

const attachmentVariants = cva(
	'bg-card text-card-foreground rounded-xl border shadow-xs group/attachment focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap transition-colors focus-within:ring-1 data-[state=idle]:border-dashed',
	{
		variants: {
			size: {
				default:
					'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
				sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
				xs: 'rounded-md gap-1.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
			},
			orientation: {
				horizontal: 'min-w-40 items-center',
				vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',
			},
		},
		defaultVariants: {
			size: 'default',
			orientation: 'horizontal',
		},
	},
);

export type AttachmentVariants = VariantProps<typeof attachmentVariants>;
export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';

@Directive({
	selector: '[hlmAttachment],hlm-attachment',
	host: {
		'data-slot': 'attachment',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
		'[attr.data-orientation]': 'orientation()',
	},
})
export class HlmAttachment {
	public readonly state = input<AttachmentState>('done');
	public readonly size = input<AttachmentVariants['size']>('default');
	public readonly orientation = input<AttachmentVariants['orientation']>('horizontal');

	constructor() {
		classes(() => attachmentVariants({ size: this.size(), orientation: this.orientation() }));
	}
}

export const HlmAttachmentImports = [
	HlmAttachment,
	HlmAttachmentAction,
	HlmAttachmentActions,
	HlmAttachmentContent,
	HlmAttachmentDescription,
	HlmAttachmentGroup,
	HlmAttachmentMedia,
	HlmAttachmentTitle,
	HlmAttachmentTrigger,
] as const;

import { Directive, ElementRef, computed, inject, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

@Directive({
	selector: 'button[hlmAttachmentAction]',
	providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: {
		'data-slot': 'attachment-action',
		'[type]': 'type()',
	},
})
export class HlmAttachmentAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAttachmentActions],hlm-attachment-actions',
	host: { 'data-slot': 'attachment-actions' },
})
export class HlmAttachmentActions {
	constructor() {
		classes(
			() =>
				'shrink-0 items-center relative z-20 flex group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:end-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentContent],hlm-attachment-content',
	host: { 'data-slot': 'attachment-content' },
})
export class HlmAttachmentContent {
	constructor() {
		classes(() => 'min-w-0 flex-1 leading-tight max-w-full group-data-[orientation=vertical]/attachment:px-1');
	}
}

@Directive({
	selector: '[hlmAttachmentDescription],hlm-attachment-description',
	host: { 'data-slot': 'attachment-description' },
})
export class HlmAttachmentDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground mt-0.5 truncate text-xs/relaxed group-data-[state=error]/attachment:text-destructive/80 block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentGroup],hlm-attachment-group',
	host: { 'data-slot': 'attachment-group' },
})
export class HlmAttachmentGroup {
	constructor() {
		classes(
			() =>
				'scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',
		);
	}
}

const attachmentMediaVariants = cva(
	"bg-muted text-foreground w-10 rounded-none group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[orientation=vertical]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(6)] group-data-[size=xs]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
	{
		variants: {
			variant: {
				icon: 'bg-muted',
				image: 'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'icon',
		},
	},
);

export type AttachmentMediaVariants = VariantProps<typeof attachmentMediaVariants>;

@Directive({
	selector: '[hlmAttachmentMedia],hlm-attachment-media',
	host: {
		'data-slot': 'attachment-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmAttachmentMedia {
	public readonly variant = input<AttachmentMediaVariants['variant']>('icon');

	constructor() {
		classes(() => attachmentMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmAttachmentTitle],hlm-attachment-title',
	host: { 'data-slot': 'attachment-title' },
})
export class HlmAttachmentTitle {
	constructor() {
		classes(
			() =>
				'truncate text-xs font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: 'button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]',
	host: {
		'data-slot': 'attachment-trigger',
		'[attr.type]': '_hostType()',
	},
})
export class HlmAttachmentTrigger {
	private readonly _elementRef = inject(ElementRef<HTMLElement>);

	public readonly type = input<'button' | 'submit' | 'reset' | null>('button');

	protected readonly _hostType = computed(() =>
		this._elementRef.nativeElement.localName === 'button' ? this.type() : null,
	);

	constructor() {
		classes(() => 'absolute inset-0 z-10 outline-none');
	}
}

const attachmentVariants = cva(
	'bg-card text-card-foreground rounded-none border group/attachment focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap transition-colors focus-within:ring-1 data-[state=idle]:border-dashed',
	{
		variants: {
			size: {
				default:
					'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
				sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
				xs: 'rounded-none gap-1.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
			},
			orientation: {
				horizontal: 'min-w-40 items-center',
				vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',
			},
		},
		defaultVariants: {
			size: 'default',
			orientation: 'horizontal',
		},
	},
);

export type AttachmentVariants = VariantProps<typeof attachmentVariants>;
export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';

@Directive({
	selector: '[hlmAttachment],hlm-attachment',
	host: {
		'data-slot': 'attachment',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
		'[attr.data-orientation]': 'orientation()',
	},
})
export class HlmAttachment {
	public readonly state = input<AttachmentState>('done');
	public readonly size = input<AttachmentVariants['size']>('default');
	public readonly orientation = input<AttachmentVariants['orientation']>('horizontal');

	constructor() {
		classes(() => attachmentVariants({ size: this.size(), orientation: this.orientation() }));
	}
}

export const HlmAttachmentImports = [
	HlmAttachment,
	HlmAttachmentAction,
	HlmAttachmentActions,
	HlmAttachmentContent,
	HlmAttachmentDescription,
	HlmAttachmentGroup,
	HlmAttachmentMedia,
	HlmAttachmentTitle,
	HlmAttachmentTrigger,
] as const;

import { Directive, ElementRef, computed, inject, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

@Directive({
	selector: 'button[hlmAttachmentAction]',
	providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: {
		'data-slot': 'attachment-action',
		'[type]': 'type()',
	},
})
export class HlmAttachmentAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAttachmentActions],hlm-attachment-actions',
	host: { 'data-slot': 'attachment-actions' },
})
export class HlmAttachmentActions {
	constructor() {
		classes(
			() =>
				'shrink-0 items-center relative z-20 flex group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:end-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentContent],hlm-attachment-content',
	host: { 'data-slot': 'attachment-content' },
})
export class HlmAttachmentContent {
	constructor() {
		classes(() => 'min-w-0 flex-1 leading-snug max-w-full group-data-[orientation=vertical]/attachment:px-1');
	}
}

@Directive({
	selector: '[hlmAttachmentDescription],hlm-attachment-description',
	host: { 'data-slot': 'attachment-description' },
})
export class HlmAttachmentDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground mt-0.5 truncate text-xs group-data-[state=error]/attachment:text-destructive/80 block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentGroup],hlm-attachment-group',
	host: { 'data-slot': 'attachment-group' },
})
export class HlmAttachmentGroup {
	constructor() {
		classes(
			() =>
				'scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',
		);
	}
}

const attachmentMediaVariants = cva(
	"bg-muted text-foreground w-10 rounded-xl group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[orientation=vertical]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(6)] group-data-[size=xs]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
	{
		variants: {
			variant: {
				icon: 'bg-muted',
				image: 'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'icon',
		},
	},
);

export type AttachmentMediaVariants = VariantProps<typeof attachmentMediaVariants>;

@Directive({
	selector: '[hlmAttachmentMedia],hlm-attachment-media',
	host: {
		'data-slot': 'attachment-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmAttachmentMedia {
	public readonly variant = input<AttachmentMediaVariants['variant']>('icon');

	constructor() {
		classes(() => attachmentMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmAttachmentTitle],hlm-attachment-title',
	host: { 'data-slot': 'attachment-title' },
})
export class HlmAttachmentTitle {
	constructor() {
		classes(
			() =>
				'truncate text-sm font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: 'button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]',
	host: {
		'data-slot': 'attachment-trigger',
		'[attr.type]': '_hostType()',
	},
})
export class HlmAttachmentTrigger {
	private readonly _elementRef = inject(ElementRef<HTMLElement>);

	public readonly type = input<'button' | 'submit' | 'reset' | null>('button');

	protected readonly _hostType = computed(() =>
		this._elementRef.nativeElement.localName === 'button' ? this.type() : null,
	);

	constructor() {
		classes(() => 'absolute inset-0 z-10 outline-none');
	}
}

const attachmentVariants = cva(
	'bg-card text-card-foreground rounded-2xl border group/attachment focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap transition-colors focus-within:ring-1 data-[state=idle]:border-dashed',
	{
		variants: {
			size: {
				default:
					'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
				sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
				xs: 'rounded-xl gap-1.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
			},
			orientation: {
				horizontal: 'min-w-40 items-center',
				vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',
			},
		},
		defaultVariants: {
			size: 'default',
			orientation: 'horizontal',
		},
	},
);

export type AttachmentVariants = VariantProps<typeof attachmentVariants>;
export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';

@Directive({
	selector: '[hlmAttachment],hlm-attachment',
	host: {
		'data-slot': 'attachment',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
		'[attr.data-orientation]': 'orientation()',
	},
})
export class HlmAttachment {
	public readonly state = input<AttachmentState>('done');
	public readonly size = input<AttachmentVariants['size']>('default');
	public readonly orientation = input<AttachmentVariants['orientation']>('horizontal');

	constructor() {
		classes(() => attachmentVariants({ size: this.size(), orientation: this.orientation() }));
	}
}

export const HlmAttachmentImports = [
	HlmAttachment,
	HlmAttachmentAction,
	HlmAttachmentActions,
	HlmAttachmentContent,
	HlmAttachmentDescription,
	HlmAttachmentGroup,
	HlmAttachmentMedia,
	HlmAttachmentTitle,
	HlmAttachmentTrigger,
] as const;

import { Directive, ElementRef, computed, inject, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

@Directive({
	selector: 'button[hlmAttachmentAction]',
	providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: {
		'data-slot': 'attachment-action',
		'[type]': 'type()',
	},
})
export class HlmAttachmentAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAttachmentActions],hlm-attachment-actions',
	host: { 'data-slot': 'attachment-actions' },
})
export class HlmAttachmentActions {
	constructor() {
		classes(
			() =>
				'shrink-0 items-center relative z-20 flex group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:end-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentContent],hlm-attachment-content',
	host: { 'data-slot': 'attachment-content' },
})
export class HlmAttachmentContent {
	constructor() {
		classes(() => 'min-w-0 flex-1 leading-tight max-w-full group-data-[orientation=vertical]/attachment:px-1');
	}
}

@Directive({
	selector: '[hlmAttachmentDescription],hlm-attachment-description',
	host: { 'data-slot': 'attachment-description' },
})
export class HlmAttachmentDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground mt-0.5 truncate text-[0.625rem] group-data-[state=error]/attachment:text-destructive/80 block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentGroup],hlm-attachment-group',
	host: { 'data-slot': 'attachment-group' },
})
export class HlmAttachmentGroup {
	constructor() {
		classes(
			() =>
				'scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',
		);
	}
}

const attachmentMediaVariants = cva(
	"bg-muted text-foreground w-8 rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[orientation=vertical]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(6)] group-data-[size=xs]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
	{
		variants: {
			variant: {
				icon: 'bg-muted',
				image: 'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'icon',
		},
	},
);

export type AttachmentMediaVariants = VariantProps<typeof attachmentMediaVariants>;

@Directive({
	selector: '[hlmAttachmentMedia],hlm-attachment-media',
	host: {
		'data-slot': 'attachment-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmAttachmentMedia {
	public readonly variant = input<AttachmentMediaVariants['variant']>('icon');

	constructor() {
		classes(() => attachmentMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmAttachmentTitle],hlm-attachment-title',
	host: { 'data-slot': 'attachment-title' },
})
export class HlmAttachmentTitle {
	constructor() {
		classes(
			() =>
				'truncate text-xs/relaxed font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: 'button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]',
	host: {
		'data-slot': 'attachment-trigger',
		'[attr.type]': '_hostType()',
	},
})
export class HlmAttachmentTrigger {
	private readonly _elementRef = inject(ElementRef<HTMLElement>);

	public readonly type = input<'button' | 'submit' | 'reset' | null>('button');

	protected readonly _hostType = computed(() =>
		this._elementRef.nativeElement.localName === 'button' ? this.type() : null,
	);

	constructor() {
		classes(() => 'absolute inset-0 z-10 outline-none');
	}
}

const attachmentVariants = cva(
	'bg-card text-card-foreground rounded-lg border group/attachment focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap transition-colors focus-within:ring-1 data-[state=idle]:border-dashed',
	{
		variants: {
			size: {
				default:
					'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
				sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
				xs: 'rounded-md gap-1.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
			},
			orientation: {
				horizontal: 'min-w-40 items-center',
				vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',
			},
		},
		defaultVariants: {
			size: 'default',
			orientation: 'horizontal',
		},
	},
);

export type AttachmentVariants = VariantProps<typeof attachmentVariants>;
export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';

@Directive({
	selector: '[hlmAttachment],hlm-attachment',
	host: {
		'data-slot': 'attachment',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
		'[attr.data-orientation]': 'orientation()',
	},
})
export class HlmAttachment {
	public readonly state = input<AttachmentState>('done');
	public readonly size = input<AttachmentVariants['size']>('default');
	public readonly orientation = input<AttachmentVariants['orientation']>('horizontal');

	constructor() {
		classes(() => attachmentVariants({ size: this.size(), orientation: this.orientation() }));
	}
}

export const HlmAttachmentImports = [
	HlmAttachment,
	HlmAttachmentAction,
	HlmAttachmentActions,
	HlmAttachmentContent,
	HlmAttachmentDescription,
	HlmAttachmentGroup,
	HlmAttachmentMedia,
	HlmAttachmentTitle,
	HlmAttachmentTrigger,
] as const;

import { Directive, ElementRef, computed, inject, input } from '@angular/core';
import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';

@Directive({
	selector: 'button[hlmAttachmentAction]',
	providers: [provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
	host: {
		'data-slot': 'attachment-action',
		'[type]': 'type()',
	},
})
export class HlmAttachmentAction {
	public readonly type = input<'button' | 'submit' | 'reset'>('button');
}

@Directive({
	selector: '[hlmAttachmentActions],hlm-attachment-actions',
	host: { 'data-slot': 'attachment-actions' },
})
export class HlmAttachmentActions {
	constructor() {
		classes(
			() =>
				'shrink-0 items-center relative z-20 flex group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:end-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentContent],hlm-attachment-content',
	host: { 'data-slot': 'attachment-content' },
})
export class HlmAttachmentContent {
	constructor() {
		classes(() => 'min-w-0 flex-1 leading-snug max-w-full group-data-[orientation=vertical]/attachment:px-1');
	}
}

@Directive({
	selector: '[hlmAttachmentDescription],hlm-attachment-description',
	host: { 'data-slot': 'attachment-description' },
})
export class HlmAttachmentDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground mt-0.5 truncate text-xs group-data-[state=error]/attachment:text-destructive/80 block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: '[hlmAttachmentGroup],hlm-attachment-group',
	host: { 'data-slot': 'attachment-group' },
})
export class HlmAttachmentGroup {
	constructor() {
		classes(
			() =>
				'scroll-fade-x no-scrollbar flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start',
		);
	}
}

const attachmentMediaVariants = cva(
	"bg-muted text-foreground w-10 rounded-2xl group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive relative flex aspect-square shrink-0 items-center justify-center overflow-hidden group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[orientation=vertical]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(6)] group-data-[size=xs]/attachment:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)]",
	{
		variants: {
			variant: {
				icon: 'bg-muted',
				image: 'opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'icon',
		},
	},
);

export type AttachmentMediaVariants = VariantProps<typeof attachmentMediaVariants>;

@Directive({
	selector: '[hlmAttachmentMedia],hlm-attachment-media',
	host: {
		'data-slot': 'attachment-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmAttachmentMedia {
	public readonly variant = input<AttachmentMediaVariants['variant']>('icon');

	constructor() {
		classes(() => attachmentMediaVariants({ variant: this.variant() }));
	}
}

@Directive({
	selector: '[hlmAttachmentTitle],hlm-attachment-title',
	host: { 'data-slot': 'attachment-title' },
})
export class HlmAttachmentTitle {
	constructor() {
		classes(
			() =>
				'truncate text-sm font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block max-w-full min-w-0',
		);
	}
}

@Directive({
	selector: 'button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]',
	host: {
		'data-slot': 'attachment-trigger',
		'[attr.type]': '_hostType()',
	},
})
export class HlmAttachmentTrigger {
	private readonly _elementRef = inject(ElementRef<HTMLElement>);

	public readonly type = input<'button' | 'submit' | 'reset' | null>('button');

	protected readonly _hostType = computed(() =>
		this._elementRef.nativeElement.localName === 'button' ? this.type() : null,
	);

	constructor() {
		classes(() => 'absolute inset-0 z-10 outline-none');
	}
}

const attachmentVariants = cva(
	'bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 rounded-4xl border shadow-md ring-1 group/attachment focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap transition-colors focus-within:ring-1 data-[state=idle]:border-dashed',
	{
		variants: {
			size: {
				default:
					'gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2',
				sm: 'gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5',
				xs: 'rounded-2xl gap-1.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1',
			},
			orientation: {
				horizontal: 'min-w-40 items-center',
				vertical: 'w-24 flex-col has-data-[slot=attachment-content]:w-30',
			},
		},
		defaultVariants: {
			size: 'default',
			orientation: 'horizontal',
		},
	},
);

export type AttachmentVariants = VariantProps<typeof attachmentVariants>;
export type AttachmentState = 'idle' | 'uploading' | 'processing' | 'error' | 'done';

@Directive({
	selector: '[hlmAttachment],hlm-attachment',
	host: {
		'data-slot': 'attachment',
		'[attr.data-state]': 'state()',
		'[attr.data-size]': 'size()',
		'[attr.data-orientation]': 'orientation()',
	},
})
export class HlmAttachment {
	public readonly state = input<AttachmentState>('done');
	public readonly size = input<AttachmentVariants['size']>('default');
	public readonly orientation = input<AttachmentVariants['orientation']>('horizontal');

	constructor() {
		classes(() => attachmentVariants({ size: this.size(), orientation: this.orientation() }));
	}
}

export const HlmAttachmentImports = [
	HlmAttachment,
	HlmAttachmentAction,
	HlmAttachmentActions,
	HlmAttachmentContent,
	HlmAttachmentDescription,
	HlmAttachmentGroup,
	HlmAttachmentMedia,
	HlmAttachmentTitle,
	HlmAttachmentTrigger,
] as const;

Usage

import { HlmAttachmentImports } from '@spartan-ng/helm/attachment';

<div hlmAttachment>
  <div hlmAttachmentMedia>
    <ng-icon name="lucideFileCode" />
  </div>
  <div hlmAttachmentContent>
    <span hlmAttachmentTitle>report.pdf</span>
    <span hlmAttachmentDescription>PDF · 1.2 MB</span>
  </div>
</div>

Compose attachments inside a message bubble or as a standalone file card.

Examples

Image

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideX } from '@ng-icons/lucide';
import { HlmAttachmentImports } from '@spartan-ng/helm/attachment';

@Component({
	selector: 'spartan-attachment-image-preview',
	imports: [HlmAttachmentImports, NgIcon],
	providers: [provideIcons({ lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'block w-full min-w-0',
	},
	template: `
		<div class="mx-auto w-full max-w-sm py-12">
			<div hlmAttachmentGroup class="w-full">
				@for (image of _images; track image.name) {
					<div hlmAttachment orientation="vertical">
						<div hlmAttachmentMedia variant="image">
							<img [src]="image.src" [alt]="image.alt" />
						</div>
						<div hlmAttachmentContent>
							<span hlmAttachmentTitle>{{ image.name }}</span>
							<span hlmAttachmentDescription>{{ image.meta }}</span>
						</div>
						<div hlmAttachmentActions>
							<button hlmAttachmentAction [attr.aria-label]="'Remove ' + image.name">
								<ng-icon name="lucideX" />
							</button>
						</div>
						<a
							hlmAttachmentTrigger
							[type]="null"
							[href]="image.src"
							target="_blank"
							rel="noreferrer"
							[attr.aria-label]="'Open ' + image.name"
						></a>
					</div>
				}
			</div>
		</div>
	`,
})
export class AttachmentImagePreview {
	protected readonly _images = [
		{
			name: 'workspace.png',
			meta: 'PNG · 820 KB',
			src: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80',
			alt: 'Workspace',
		},
		{
			name: 'desk-reference.jpg',
			meta: 'JPG · 1.1 MB',
			src: 'https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80',
			alt: 'Desk',
		},
		{
			name: 'office-reference.jpg',
			meta: 'JPG · 940 KB',
			src: 'https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80',
			alt: 'Office',
		},
	];
}

States

selected-file.pdfReady to upload

design-system.zipUploading · 64%

market-research.pdfProcessing document

financial-model.xlsxUpload failed. Try again.

uploaded-report.pdfUploaded · 1.8 MB

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
	lucideCheck,
	lucideClock,
	lucideFileText,
	lucideFileWarning,
	lucideRefreshCw,
	lucideX,
} from '@ng-icons/lucide';
import { HlmAttachmentImports } from '@spartan-ng/helm/attachment';
import { HlmSpinner } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-attachment-states-preview',
	imports: [HlmAttachmentImports, HlmSpinner, NgIcon],
	providers: [provideIcons({ lucideClock, lucideFileText, lucideFileWarning, lucideRefreshCw, lucideX, lucideCheck })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-sm flex-col gap-2 py-12',
	},
	template: `
		<div hlmAttachment state="idle" class="w-full">
			<div hlmAttachmentMedia>
				<ng-icon name="lucideClock" />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>selected-file.pdf</span>
				<span hlmAttachmentDescription>Ready to upload</span>
			</div>
			<div hlmAttachmentActions>
				<button hlmAttachmentAction aria-label="Remove selected-file.pdf">
					<ng-icon name="lucideX" />
				</button>
			</div>
		</div>

		<div hlmAttachment state="uploading" class="w-full">
			<div hlmAttachmentMedia>
				<hlm-spinner />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>design-system.zip</span>
				<span hlmAttachmentDescription>Uploading · 64%</span>
			</div>
			<div hlmAttachmentActions>
				<button hlmAttachmentAction aria-label="Cancel upload">
					<ng-icon name="lucideX" />
				</button>
			</div>
		</div>

		<div hlmAttachment state="processing" class="w-full">
			<div hlmAttachmentMedia>
				<ng-icon name="lucideFileText" />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>market-research.pdf</span>
				<span hlmAttachmentDescription>Processing document</span>
			</div>
			<div hlmAttachmentActions>
				<button hlmAttachmentAction aria-label="Remove market-research.pdf">
					<ng-icon name="lucideX" />
				</button>
			</div>
		</div>

		<div hlmAttachment state="error" class="w-full">
			<div hlmAttachmentMedia>
				<ng-icon name="lucideFileWarning" />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>financial-model.xlsx</span>
				<span hlmAttachmentDescription>Upload failed. Try again.</span>
			</div>
			<div hlmAttachmentActions>
				<button hlmAttachmentAction aria-label="Retry upload">
					<ng-icon name="lucideRefreshCw" />
				</button>
				<button hlmAttachmentAction aria-label="Remove financial-model.xlsx">
					<ng-icon name="lucideX" />
				</button>
			</div>
		</div>

		<div hlmAttachment state="done" class="w-full">
			<div hlmAttachmentMedia>
				<ng-icon name="lucideCheck" />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>uploaded-report.pdf</span>
				<span hlmAttachmentDescription>Uploaded · 1.8 MB</span>
			</div>
			<div hlmAttachmentActions>
				<button hlmAttachmentAction aria-label="Remove uploaded-report.pdf">
					<ng-icon name="lucideX" />
				</button>
			</div>
		</div>
	`,
})
export class AttachmentStatesPreview {}

Sizes

Default attachmentPDF · 2.4 MB

Small attachmentPDF · 2.4 MB

Extra small attachment

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideFileText } from '@ng-icons/lucide';
import { HlmAttachmentImports } from '@spartan-ng/helm/attachment';

@Component({
	selector: 'spartan-attachment-sizes-preview',
	imports: [HlmAttachmentImports, NgIcon],
	providers: [provideIcons({ lucideFileText })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-sm flex-col gap-3 py-12',
	},
	template: `
		<div hlmAttachment size="default" class="w-full">
			<div hlmAttachmentMedia>
				<ng-icon name="lucideFileText" />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>Default attachment</span>
				<span hlmAttachmentDescription>PDF · 2.4 MB</span>
			</div>
		</div>
		<div hlmAttachment size="sm" class="w-full">
			<div hlmAttachmentMedia>
				<ng-icon name="lucideFileText" />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>Small attachment</span>
				<span hlmAttachmentDescription>PDF · 2.4 MB</span>
			</div>
		</div>
		<div hlmAttachment size="xs" class="w-full">
			<div hlmAttachmentMedia>
				<ng-icon name="lucideFileText" />
			</div>
			<div hlmAttachmentContent>
				<span hlmAttachmentTitle>Extra small attachment</span>
			</div>
		</div>
	`,
})
export class AttachmentSizesPreview {}

Group

briefing-notes.pdfPDF · 1.4 MB

workspace.pngPNG · 820 KB

customers.csvCSV · 18 KB

renderer.tsxTSX · 12 KB

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideFileCode, lucideFileText, lucideTable, lucideX } from '@ng-icons/lucide';
import { HlmAttachmentImports } from '@spartan-ng/helm/attachment';

@Component({
	selector: 'spartan-attachment-group-preview',
	imports: [HlmAttachmentImports, NgIcon],
	providers: [provideIcons({ lucideFileText, lucideTable, lucideFileCode, lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'block w-full min-w-0',
	},
	template: `
		<div class="mx-auto w-full max-w-sm py-12">
			<div hlmAttachmentGroup class="w-full">
				@for (item of _items; track item.name) {
					<div hlmAttachment class="w-64">
						@if (item.src) {
							<div hlmAttachmentMedia variant="image">
								<img [src]="item.src" [alt]="item.name" />
							</div>
						} @else if (item.icon) {
							<div hlmAttachmentMedia>
								<ng-icon [name]="item.icon" />
							</div>
						}
						<div hlmAttachmentContent>
							<span hlmAttachmentTitle>{{ item.name }}</span>
							<span hlmAttachmentDescription>{{ item.meta }}</span>
						</div>
						<div hlmAttachmentActions>
							<button hlmAttachmentAction [attr.aria-label]="'Remove ' + item.name">
								<ng-icon name="lucideX" />
							</button>
						</div>
					</div>
				}
			</div>
		</div>
	`,
})
export class AttachmentGroupPreview {
	protected readonly _items = [
		{ name: 'briefing-notes.pdf', meta: 'PDF · 1.4 MB', icon: 'lucideFileText' as const },
		{
			name: 'workspace.png',
			meta: 'PNG · 820 KB',
			src: 'https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80',
		},
		{ name: 'customers.csv', meta: 'CSV · 18 KB', icon: 'lucideTable' as const },
		{ name: 'renderer.tsx', meta: 'TSX · 12 KB', icon: 'lucideFileCode' as const },
	];
}

Trigger

Use hlmAttachmentTrigger to make the whole card open a dialog or link while keeping actions independently clickable.

research-summary.pdfOpen preview dialog

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCopy, lucideFileSearch, lucideX } from '@ng-icons/lucide';
import { HlmAttachmentImports } from '@spartan-ng/helm/attachment';
import { HlmDialogImports } from '@spartan-ng/helm/dialog';

@Component({
	selector: 'spartan-attachment-trigger-preview',
	imports: [HlmAttachmentImports, HlmDialogImports, NgIcon],
	providers: [provideIcons({ lucideFileSearch, lucideCopy, lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'w-full max-w-sm py-12',
	},
	template: `
		<hlm-dialog>
			<div hlmAttachment class="w-full">
				<div hlmAttachmentMedia>
					<ng-icon name="lucideFileSearch" />
				</div>
				<div hlmAttachmentContent>
					<span hlmAttachmentTitle>research-summary.pdf</span>
					<span hlmAttachmentDescription>Open preview dialog</span>
				</div>
				<div hlmAttachmentActions>
					<button hlmAttachmentAction aria-label="Copy link">
						<ng-icon name="lucideCopy" />
					</button>
					<button hlmAttachmentAction aria-label="Remove research-summary.pdf">
						<ng-icon name="lucideX" />
					</button>
				</div>
				<button hlmAttachmentTrigger hlmDialogTrigger aria-label="Preview research-summary.pdf"></button>
			</div>
			<hlm-dialog-content *hlmDialogPortal="let ctx" class="sm:max-w-md">
				<hlm-dialog-header>
					<h3 hlmDialogTitle>research-summary.pdf</h3>
					<p hlmDialogDescription>
						The attachment trigger fills the card and opens the dialog, while the actions stay independently clickable
						above it.
					</p>
				</hlm-dialog-header>
			</hlm-dialog-content>
		</hlm-dialog>
	`,
})
export class AttachmentTriggerPreview {}

RTL

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

message-renderer.tsxTypeScript · 12 كيلوبايت

workspace.pngPNG · 820 كيلوبايت

import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideFileCode, lucideX } from '@ng-icons/lucide';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmAttachmentImports } from '@spartan-ng/helm/attachment';

@Component({
	selector: 'spartan-attachment-rtl-preview',
	imports: [HlmAttachmentImports, NgIcon],
	providers: [provideIcons({ lucideFileCode, lucideX })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'theme-blue bg-surface dark:bg-background flex w-full max-w-sm flex-col gap-3',
	},
	template: `
		<div class="flex w-full flex-col gap-3" [dir]="_dir()">
			<div hlmAttachment class="w-full">
				<div hlmAttachmentMedia>
					<ng-icon name="lucideFileCode" />
				</div>
				<div hlmAttachmentContent>
					<span hlmAttachmentTitle>{{ _t()['title'] }}</span>
					<span hlmAttachmentDescription>{{ _t()['description'] }}</span>
				</div>
				<div hlmAttachmentActions>
					<button hlmAttachmentAction [attr.aria-label]="_t()['remove']">
						<ng-icon name="lucideX" />
					</button>
				</div>
			</div>

			<div hlmAttachment orientation="vertical">
				<div hlmAttachmentMedia variant="image">
					<img
						src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80"
						[alt]="_t()['imageAlt']"
					/>
				</div>
				<div hlmAttachmentContent>
					<span hlmAttachmentTitle>{{ _t()['imageTitle'] }}</span>
					<span hlmAttachmentDescription>{{ _t()['imageMeta'] }}</span>
				</div>
				<div hlmAttachmentActions>
					<button hlmAttachmentAction [attr.aria-label]="_t()['remove']">
						<ng-icon name="lucideX" />
					</button>
				</div>
			</div>
		</div>
	`,
})
export class AttachmentRtlPreview {
	private readonly _language = inject(TranslateService).language;

	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				title: 'message-renderer.tsx',
				description: 'TypeScript · 12 KB',
				remove: 'Remove attachment',
				imageTitle: 'workspace.png',
				imageMeta: 'PNG · 820 KB',
				imageAlt: 'Workspace',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				title: 'message-renderer.tsx',
				description: 'TypeScript · 12 كيلوبايت',
				remove: 'إزالة المرفق',
				imageTitle: 'workspace.png',
				imageMeta: 'PNG · 820 كيلوبايت',
				imageAlt: 'مساحة العمل',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				title: 'message-renderer.tsx',
				description: 'TypeScript · 12 ק״ב',
				remove: 'הסר קובץ מצורף',
				imageTitle: 'workspace.png',
				imageMeta: 'PNG · 820 ק״ב',
				imageAlt: 'סביבת עבודה',
			},
		},
	};

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

Helm API

HlmAttachmentAction

Selector: button[hlmAttachmentAction]

Inputs

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

HlmAttachmentActions

Selector: [hlmAttachmentActions],hlm-attachment-actions

HlmAttachmentContent

Selector: [hlmAttachmentContent],hlm-attachment-content

HlmAttachmentDescription

Selector: [hlmAttachmentDescription],hlm-attachment-description

HlmAttachmentGroup

Selector: [hlmAttachmentGroup],hlm-attachment-group

HlmAttachmentMedia

Selector: [hlmAttachmentMedia],hlm-attachment-media

Inputs

Prop	Type	Default	Description
variant	AttachmentMediaVariants['variant']	'icon'	-

HlmAttachmentTitle

Selector: [hlmAttachmentTitle],hlm-attachment-title

HlmAttachmentTrigger

Selector: button[hlmAttachmentTrigger],a[hlmAttachmentTrigger]

Inputs

Prop	Type	Default	Description
type	'button' \| 'submit' \| 'reset' \| null	'button'	-

HlmAttachment

Selector: [hlmAttachment],hlm-attachment

Inputs

Prop	Type	Default	Description
state	AttachmentState	'done'	-
size	AttachmentVariants['size']	'default'	-
orientation	AttachmentVariants['orientation']	'horizontal'	-

Autocomplete

Aspect Ratio

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Attachment

Installation

1 Copy utils if needed

2 Copy and paste the following code into your project.

Usage

Examples

Image

States

Sizes

Group

Trigger

RTL

Helm API

HlmAttachmentAction

Inputs

HlmAttachmentActions

HlmAttachmentContent

HlmAttachmentDescription

HlmAttachmentGroup

HlmAttachmentMedia

Inputs

HlmAttachmentTitle

HlmAttachmentTrigger

Inputs

HlmAttachment

Inputs