Item

A versatile component that you can use to display any content.

Basic Item

A simple item with title and description.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBadgeCheck, lucideChevronRight } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-preview',
	imports: [HlmItemImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideBadgeCheck, lucideChevronRight })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-md flex-col gap-6',
	},
	template: `
		<hlm-item variant="outline">
			<hlm-item-content>
				<hlm-item-title>Basic Item</hlm-item-title>
				<p hlmItemDescription>A simple item with title and description.</p>
			</hlm-item-content>
			<hlm-item-actions>
				<button hlmBtn variant="outline" size="sm">Action</button>
			</hlm-item-actions>
		</hlm-item>
		<a hlmItem href="#" variant="outline" size="sm">
			<hlm-item-media>
				<ng-icon name="lucideBadgeCheck" class="text-[calc(var(--spacing)*5)]" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Your profile has been verified.</hlm-item-title>
			</hlm-item-content>
			<hlm-item-actions>
				<ng-icon name="lucideChevronRight" class="text-[calc(var(--spacing)*4)]" />
			</hlm-item-actions>
		</a>
	`,
})
export class ItemPreview {}

export const itemComposition = `
hlm-item-group
└── hlm-item
    ├── hlm-item-header
    ├── hlm-item-media
    ├── hlm-item-content
    │   ├── hlm-item-title
    │   └── hlm-item-description
    ├── hlm-item-actions
    └── hlm-item-footer
`;

Installation

ng g @spartan-ng/cli:ui item

nx g @spartan-ng/cli:ui item

import { DestroyRef, ElementRef, HostAttributeToken, Injector, PLATFORM_ID, effect, inject, runInInjectionContext } from '@angular/core';
import { clsx, type ClassValue } from 'clsx';
import { isPlatformBrowser } from '@angular/common';
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;
}

import { BrnSeparator } from '@spartan-ng/brain/separator';
import { Directive, InjectionToken, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';
import { hlmSeparatorClass } from '@spartan-ng/helm/separator';

@Directive({
	selector: '[hlmItemActions],hlm-item-actions',
	host: { 'data-slot': 'item-actions' },
})
export class HlmItemActions {
	constructor() {
		classes(() => 'gap-2 flex items-center');
	}
}

@Directive({
	selector: '[hlmItemContent],hlm-item-content',
	host: { 'data-slot': 'item-content' },
})
export class HlmItemContent {
	constructor() {
		classes(() => 'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
	}
}

@Directive({
	selector: '[hlmItemDescription],hlm-item-description',
	host: { 'data-slot': 'item-description' },
})
export class HlmItemDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground text-start text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmItemFooter],hlm-item-footer',
	host: { 'data-slot': 'item-footer' },
})
export class HlmItemFooter {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

@Directive({
	selector: '[hlmItemGroup],hlm-item-group',
	host: { 'data-slot': 'item-group' },
})
export class HlmItemGroup {
	constructor() {
		classes(() => 'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col');
	}
}

@Directive({
	selector: '[hlmItemHeader],hlm-item-header',
	host: { 'data-slot': 'item-header' },
})
export class HlmItemHeader {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

const itemMediaVariants = cva(
	'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: '[&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
				image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);
export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;

@Directive({
	selector: '[hlmItemMedia],hlm-item-media',
	host: {
		'data-slot': 'item-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmItemMedia {
	private readonly _config = injectHlmItemMediaConfig();
	public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);

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

@Directive({
	selector: '[hlmItemSeparator],hlm-item-separator',
	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
	host: { 'data-slot': 'item-separator' },
})
export class HlmItemSeparator {
	constructor() {
		classes(() => [hlmSeparatorClass, 'my-2']);
	}
}

@Directive({
	selector: '[hlmItemTitle],hlm-item-title',
	host: { 'data-slot': 'item-title' },
})
export class HlmItemTitle {
	constructor() {
		classes(() => 'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center');
	}
}

export interface HlmItemConfig {
	variant: ItemVariants['variant'];
	size: ItemVariants['size'];
}

const defaultConfig: HlmItemConfig = {
	variant: 'default',
	size: 'default',
};

const HlmItemConfigToken = new InjectionToken<HlmItemConfig>('HlmItemConfig');

export function provideHlmItemConfig(config: Partial<HlmItemConfig>): ValueProvider {
	return { provide: HlmItemConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmItemConfig(): HlmItemConfig {
	return inject(HlmItemConfigToken, { optional: true }) ?? defaultConfig;
}

export interface HlmItemMediaConfig {
	variant: ItemMediaVariants['variant'];
}

const defaultMediaConfig: HlmItemMediaConfig = {
	variant: 'default',
};

const HlmItemMediaConfigToken = new InjectionToken<HlmItemMediaConfig>('HlmItemMediaConfig');

export function provideHlmItemMediaConfig(config: Partial<HlmItemMediaConfig>): ValueProvider {
	return { provide: HlmItemMediaConfigToken, useValue: { ...defaultMediaConfig, ...config } };
}

export function injectHlmItemMediaConfig(): HlmItemMediaConfig {
	return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
}

const itemVariants = cva(
	'[a]:hover:bg-muted rounded-md border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
	{
		variants: {
			variant: {
				default: 'border-transparent',
				outline: 'border-border',
				muted: 'bg-muted/50 border-transparent',
			},
			size: {
				default: 'gap-3.5 px-4 py-3.5',
				sm: 'gap-2.5 px-3 py-2.5',
				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
);

export type ItemVariants = VariantProps<typeof itemVariants>;

@Directive({
	selector: '[hlmItem],hlm-item',
	host: {
		'data-slot': 'item',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmItem {
	private readonly _config = injectHlmItemConfig();
	public readonly variant = input<ItemVariants['variant']>(this._config.variant);
	public readonly size = input<ItemVariants['size']>(this._config.size);

	constructor() {
		classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
	}
}

export const HlmItemImports = [
	HlmItem,
	HlmItemActions,
	HlmItemContent,
	HlmItemDescription,
	HlmItemFooter,
	HlmItemGroup,
	HlmItemHeader,
	HlmItemMedia,
	HlmItemSeparator,
	HlmItemTitle,
] as const;

import { BrnSeparator } from '@spartan-ng/brain/separator';
import { Directive, InjectionToken, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';
import { hlmSeparatorClass } from '@spartan-ng/helm/separator';

@Directive({
	selector: '[hlmItemActions],hlm-item-actions',
	host: { 'data-slot': 'item-actions' },
})
export class HlmItemActions {
	constructor() {
		classes(() => 'gap-2 flex items-center');
	}
}

@Directive({
	selector: '[hlmItemContent],hlm-item-content',
	host: { 'data-slot': 'item-content' },
})
export class HlmItemContent {
	constructor() {
		classes(() => 'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
	}
}

@Directive({
	selector: '[hlmItemDescription],hlm-item-description',
	host: { 'data-slot': 'item-description' },
})
export class HlmItemDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground text-start text-xs/relaxed group-data-[size=xs]/item:text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmItemFooter],hlm-item-footer',
	host: { 'data-slot': 'item-footer' },
})
export class HlmItemFooter {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

@Directive({
	selector: '[hlmItemGroup],hlm-item-group',
	host: { 'data-slot': 'item-group' },
})
export class HlmItemGroup {
	constructor() {
		classes(() => 'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col');
	}
}

@Directive({
	selector: '[hlmItemHeader],hlm-item-header',
	host: { 'data-slot': 'item-header' },
})
export class HlmItemHeader {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

const itemMediaVariants = cva(
	'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: '[&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
				image: 'size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);
export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;

@Directive({
	selector: '[hlmItemMedia],hlm-item-media',
	host: {
		'data-slot': 'item-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmItemMedia {
	private readonly _config = injectHlmItemMediaConfig();
	public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);

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

@Directive({
	selector: '[hlmItemSeparator],hlm-item-separator',
	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
	host: { 'data-slot': 'item-separator' },
})
export class HlmItemSeparator {
	constructor() {
		classes(() => [hlmSeparatorClass, 'my-2']);
	}
}

@Directive({
	selector: '[hlmItemTitle],hlm-item-title',
	host: { 'data-slot': 'item-title' },
})
export class HlmItemTitle {
	constructor() {
		classes(() => 'gap-2 text-xs font-medium underline-offset-4 line-clamp-1 flex w-fit items-center');
	}
}

export interface HlmItemConfig {
	variant: ItemVariants['variant'];
	size: ItemVariants['size'];
}

const defaultConfig: HlmItemConfig = {
	variant: 'default',
	size: 'default',
};

const HlmItemConfigToken = new InjectionToken<HlmItemConfig>('HlmItemConfig');

export function provideHlmItemConfig(config: Partial<HlmItemConfig>): ValueProvider {
	return { provide: HlmItemConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmItemConfig(): HlmItemConfig {
	return inject(HlmItemConfigToken, { optional: true }) ?? defaultConfig;
}

export interface HlmItemMediaConfig {
	variant: ItemMediaVariants['variant'];
}

const defaultMediaConfig: HlmItemMediaConfig = {
	variant: 'default',
};

const HlmItemMediaConfigToken = new InjectionToken<HlmItemMediaConfig>('HlmItemMediaConfig');

export function provideHlmItemMediaConfig(config: Partial<HlmItemMediaConfig>): ValueProvider {
	return { provide: HlmItemMediaConfigToken, useValue: { ...defaultMediaConfig, ...config } };
}

export function injectHlmItemMediaConfig(): HlmItemMediaConfig {
	return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
}

const itemVariants = cva(
	'[a]:hover:bg-muted rounded-none border text-xs group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
	{
		variants: {
			variant: {
				default: 'border-transparent',
				outline: 'border-border',
				muted: 'bg-muted/50 border-transparent',
			},
			size: {
				default: 'gap-2.5 px-3 py-2.5',
				sm: 'gap-2.5 px-3 py-2.5',
				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
);

export type ItemVariants = VariantProps<typeof itemVariants>;

@Directive({
	selector: '[hlmItem],hlm-item',
	host: {
		'data-slot': 'item',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmItem {
	private readonly _config = injectHlmItemConfig();
	public readonly variant = input<ItemVariants['variant']>(this._config.variant);
	public readonly size = input<ItemVariants['size']>(this._config.size);

	constructor() {
		classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
	}
}

export const HlmItemImports = [
	HlmItem,
	HlmItemActions,
	HlmItemContent,
	HlmItemDescription,
	HlmItemFooter,
	HlmItemGroup,
	HlmItemHeader,
	HlmItemMedia,
	HlmItemSeparator,
	HlmItemTitle,
] as const;

import { BrnSeparator } from '@spartan-ng/brain/separator';
import { Directive, InjectionToken, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';
import { hlmSeparatorClass } from '@spartan-ng/helm/separator';

@Directive({
	selector: '[hlmItemActions],hlm-item-actions',
	host: { 'data-slot': 'item-actions' },
})
export class HlmItemActions {
	constructor() {
		classes(() => 'gap-2 flex items-center');
	}
}

@Directive({
	selector: '[hlmItemContent],hlm-item-content',
	host: { 'data-slot': 'item-content' },
})
export class HlmItemContent {
	constructor() {
		classes(() => 'gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
	}
}

@Directive({
	selector: '[hlmItemDescription],hlm-item-description',
	host: { 'data-slot': 'item-description' },
})
export class HlmItemDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground text-start text-sm [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmItemFooter],hlm-item-footer',
	host: { 'data-slot': 'item-footer' },
})
export class HlmItemFooter {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

@Directive({
	selector: '[hlmItemGroup],hlm-item-group',
	host: { 'data-slot': 'item-group' },
})
export class HlmItemGroup {
	constructor() {
		classes(() => 'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col');
	}
}

@Directive({
	selector: '[hlmItemHeader],hlm-item-header',
	host: { 'data-slot': 'item-header' },
})
export class HlmItemHeader {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

const itemMediaVariants = cva(
	'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: '[&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
				image: 'size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_img]:size-full [&_img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);
export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;

@Directive({
	selector: '[hlmItemMedia],hlm-item-media',
	host: {
		'data-slot': 'item-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmItemMedia {
	private readonly _config = injectHlmItemMediaConfig();
	public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);

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

@Directive({
	selector: '[hlmItemSeparator],hlm-item-separator',
	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
	host: { 'data-slot': 'item-separator' },
})
export class HlmItemSeparator {
	constructor() {
		classes(() => [hlmSeparatorClass, 'my-2']);
	}
}

@Directive({
	selector: '[hlmItemTitle],hlm-item-title',
	host: { 'data-slot': 'item-title' },
})
export class HlmItemTitle {
	constructor() {
		classes(() => 'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center');
	}
}

export interface HlmItemConfig {
	variant: ItemVariants['variant'];
	size: ItemVariants['size'];
}

const defaultConfig: HlmItemConfig = {
	variant: 'default',
	size: 'default',
};

const HlmItemConfigToken = new InjectionToken<HlmItemConfig>('HlmItemConfig');

export function provideHlmItemConfig(config: Partial<HlmItemConfig>): ValueProvider {
	return { provide: HlmItemConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmItemConfig(): HlmItemConfig {
	return inject(HlmItemConfigToken, { optional: true }) ?? defaultConfig;
}

export interface HlmItemMediaConfig {
	variant: ItemMediaVariants['variant'];
}

const defaultMediaConfig: HlmItemMediaConfig = {
	variant: 'default',
};

const HlmItemMediaConfigToken = new InjectionToken<HlmItemMediaConfig>('HlmItemMediaConfig');

export function provideHlmItemMediaConfig(config: Partial<HlmItemMediaConfig>): ValueProvider {
	return { provide: HlmItemMediaConfigToken, useValue: { ...defaultMediaConfig, ...config } };
}

export function injectHlmItemMediaConfig(): HlmItemMediaConfig {
	return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
}

const itemVariants = cva(
	'[a]:hover:bg-muted rounded-2xl border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
	{
		variants: {
			variant: {
				default: 'border-transparent',
				outline: 'border-border',
				muted: 'bg-muted/50 border-transparent',
			},
			size: {
				default: 'gap-3.5 px-4 py-3.5',
				sm: 'gap-3.5 px-3.5 py-3',
				xs: 'gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
);

export type ItemVariants = VariantProps<typeof itemVariants>;

@Directive({
	selector: '[hlmItem],hlm-item',
	host: {
		'data-slot': 'item',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmItem {
	private readonly _config = injectHlmItemConfig();
	public readonly variant = input<ItemVariants['variant']>(this._config.variant);
	public readonly size = input<ItemVariants['size']>(this._config.size);

	constructor() {
		classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
	}
}

export const HlmItemImports = [
	HlmItem,
	HlmItemActions,
	HlmItemContent,
	HlmItemDescription,
	HlmItemFooter,
	HlmItemGroup,
	HlmItemHeader,
	HlmItemMedia,
	HlmItemSeparator,
	HlmItemTitle,
] as const;

import { BrnSeparator } from '@spartan-ng/brain/separator';
import { Directive, InjectionToken, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';
import { hlmSeparatorClass } from '@spartan-ng/helm/separator';

@Directive({
	selector: '[hlmItemActions],hlm-item-actions',
	host: { 'data-slot': 'item-actions' },
})
export class HlmItemActions {
	constructor() {
		classes(() => 'gap-2 flex items-center');
	}
}

@Directive({
	selector: '[hlmItemContent],hlm-item-content',
	host: { 'data-slot': 'item-content' },
})
export class HlmItemContent {
	constructor() {
		classes(() => 'gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
	}
}

@Directive({
	selector: '[hlmItemDescription],hlm-item-description',
	host: { 'data-slot': 'item-description' },
})
export class HlmItemDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground text-start text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmItemFooter],hlm-item-footer',
	host: { 'data-slot': 'item-footer' },
})
export class HlmItemFooter {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

@Directive({
	selector: '[hlmItemGroup],hlm-item-group',
	host: { 'data-slot': 'item-group' },
})
export class HlmItemGroup {
	constructor() {
		classes(() => 'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col');
	}
}

@Directive({
	selector: '[hlmItemHeader],hlm-item-header',
	host: { 'data-slot': 'item-header' },
})
export class HlmItemHeader {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

const itemMediaVariants = cva(
	'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: '[&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
				image: 'size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);
export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;

@Directive({
	selector: '[hlmItemMedia],hlm-item-media',
	host: {
		'data-slot': 'item-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmItemMedia {
	private readonly _config = injectHlmItemMediaConfig();
	public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);

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

@Directive({
	selector: '[hlmItemSeparator],hlm-item-separator',
	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
	host: { 'data-slot': 'item-separator' },
})
export class HlmItemSeparator {
	constructor() {
		classes(() => [hlmSeparatorClass, 'my-2']);
	}
}

@Directive({
	selector: '[hlmItemTitle],hlm-item-title',
	host: { 'data-slot': 'item-title' },
})
export class HlmItemTitle {
	constructor() {
		classes(() => 'gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center');
	}
}

export interface HlmItemConfig {
	variant: ItemVariants['variant'];
	size: ItemVariants['size'];
}

const defaultConfig: HlmItemConfig = {
	variant: 'default',
	size: 'default',
};

const HlmItemConfigToken = new InjectionToken<HlmItemConfig>('HlmItemConfig');

export function provideHlmItemConfig(config: Partial<HlmItemConfig>): ValueProvider {
	return { provide: HlmItemConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmItemConfig(): HlmItemConfig {
	return inject(HlmItemConfigToken, { optional: true }) ?? defaultConfig;
}

export interface HlmItemMediaConfig {
	variant: ItemMediaVariants['variant'];
}

const defaultMediaConfig: HlmItemMediaConfig = {
	variant: 'default',
};

const HlmItemMediaConfigToken = new InjectionToken<HlmItemMediaConfig>('HlmItemMediaConfig');

export function provideHlmItemMediaConfig(config: Partial<HlmItemMediaConfig>): ValueProvider {
	return { provide: HlmItemMediaConfigToken, useValue: { ...defaultMediaConfig, ...config } };
}

export function injectHlmItemMediaConfig(): HlmItemMediaConfig {
	return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
}

const itemVariants = cva(
	'[a]:hover:bg-muted rounded-md border text-xs/relaxed group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
	{
		variants: {
			variant: {
				default: 'border-transparent',
				outline: 'border-border',
				muted: 'bg-muted/50 border-transparent',
			},
			size: {
				default: 'gap-2.5 px-3 py-2.5',
				sm: 'gap-2.5 px-3 py-2.5',
				xs: 'gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
);

export type ItemVariants = VariantProps<typeof itemVariants>;

@Directive({
	selector: '[hlmItem],hlm-item',
	host: {
		'data-slot': 'item',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmItem {
	private readonly _config = injectHlmItemConfig();
	public readonly variant = input<ItemVariants['variant']>(this._config.variant);
	public readonly size = input<ItemVariants['size']>(this._config.size);

	constructor() {
		classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
	}
}

export const HlmItemImports = [
	HlmItem,
	HlmItemActions,
	HlmItemContent,
	HlmItemDescription,
	HlmItemFooter,
	HlmItemGroup,
	HlmItemHeader,
	HlmItemMedia,
	HlmItemSeparator,
	HlmItemTitle,
] as const;

import { BrnSeparator } from '@spartan-ng/brain/separator';
import { Directive, InjectionToken, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';
import { hlmSeparatorClass } from '@spartan-ng/helm/separator';

@Directive({
	selector: '[hlmItemActions],hlm-item-actions',
	host: { 'data-slot': 'item-actions' },
})
export class HlmItemActions {
	constructor() {
		classes(() => 'gap-2 flex items-center');
	}
}

@Directive({
	selector: '[hlmItemContent],hlm-item-content',
	host: { 'data-slot': 'item-content' },
})
export class HlmItemContent {
	constructor() {
		classes(() => 'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
	}
}

@Directive({
	selector: '[hlmItemDescription],hlm-item-description',
	host: { 'data-slot': 'item-description' },
})
export class HlmItemDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground text-start text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmItemFooter],hlm-item-footer',
	host: { 'data-slot': 'item-footer' },
})
export class HlmItemFooter {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

@Directive({
	selector: '[hlmItemGroup],hlm-item-group',
	host: { 'data-slot': 'item-group' },
})
export class HlmItemGroup {
	constructor() {
		classes(() => 'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col');
	}
}

@Directive({
	selector: '[hlmItemHeader],hlm-item-header',
	host: { 'data-slot': 'item-header' },
})
export class HlmItemHeader {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

const itemMediaVariants = cva(
	'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: '[&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
				image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);
export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;

@Directive({
	selector: '[hlmItemMedia],hlm-item-media',
	host: {
		'data-slot': 'item-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmItemMedia {
	private readonly _config = injectHlmItemMediaConfig();
	public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);

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

@Directive({
	selector: '[hlmItemSeparator],hlm-item-separator',
	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
	host: { 'data-slot': 'item-separator' },
})
export class HlmItemSeparator {
	constructor() {
		classes(() => [hlmSeparatorClass, 'my-2']);
	}
}

@Directive({
	selector: '[hlmItemTitle],hlm-item-title',
	host: { 'data-slot': 'item-title' },
})
export class HlmItemTitle {
	constructor() {
		classes(() => 'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center');
	}
}

export interface HlmItemConfig {
	variant: ItemVariants['variant'];
	size: ItemVariants['size'];
}

const defaultConfig: HlmItemConfig = {
	variant: 'default',
	size: 'default',
};

const HlmItemConfigToken = new InjectionToken<HlmItemConfig>('HlmItemConfig');

export function provideHlmItemConfig(config: Partial<HlmItemConfig>): ValueProvider {
	return { provide: HlmItemConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmItemConfig(): HlmItemConfig {
	return inject(HlmItemConfigToken, { optional: true }) ?? defaultConfig;
}

export interface HlmItemMediaConfig {
	variant: ItemMediaVariants['variant'];
}

const defaultMediaConfig: HlmItemMediaConfig = {
	variant: 'default',
};

const HlmItemMediaConfigToken = new InjectionToken<HlmItemMediaConfig>('HlmItemMediaConfig');

export function provideHlmItemMediaConfig(config: Partial<HlmItemMediaConfig>): ValueProvider {
	return { provide: HlmItemMediaConfigToken, useValue: { ...defaultMediaConfig, ...config } };
}

export function injectHlmItemMediaConfig(): HlmItemMediaConfig {
	return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
}

const itemVariants = cva(
	'[a]:hover:bg-muted rounded-lg border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
	{
		variants: {
			variant: {
				default: 'border-transparent',
				outline: 'border-border',
				muted: 'bg-muted/50 border-transparent',
			},
			size: {
				default: 'gap-2.5 px-3 py-2.5',
				sm: 'gap-2.5 px-3 py-2.5',
				xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
);

export type ItemVariants = VariantProps<typeof itemVariants>;

@Directive({
	selector: '[hlmItem],hlm-item',
	host: {
		'data-slot': 'item',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmItem {
	private readonly _config = injectHlmItemConfig();
	public readonly variant = input<ItemVariants['variant']>(this._config.variant);
	public readonly size = input<ItemVariants['size']>(this._config.size);

	constructor() {
		classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
	}
}

export const HlmItemImports = [
	HlmItem,
	HlmItemActions,
	HlmItemContent,
	HlmItemDescription,
	HlmItemFooter,
	HlmItemGroup,
	HlmItemHeader,
	HlmItemMedia,
	HlmItemSeparator,
	HlmItemTitle,
] as const;

import { BrnSeparator } from '@spartan-ng/brain/separator';
import { Directive, InjectionToken, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { cva, type VariantProps } from 'class-variance-authority';
import { hlmSeparatorClass } from '@spartan-ng/helm/separator';

@Directive({
	selector: '[hlmItemActions],hlm-item-actions',
	host: { 'data-slot': 'item-actions' },
})
export class HlmItemActions {
	constructor() {
		classes(() => 'gap-2 flex items-center');
	}
}

@Directive({
	selector: '[hlmItemContent],hlm-item-content',
	host: { 'data-slot': 'item-content' },
})
export class HlmItemContent {
	constructor() {
		classes(() => 'gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
	}
}

@Directive({
	selector: '[hlmItemDescription],hlm-item-description',
	host: { 'data-slot': 'item-description' },
})
export class HlmItemDescription {
	constructor() {
		classes(
			() =>
				'text-muted-foreground text-start text-sm [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
		);
	}
}

@Directive({
	selector: '[hlmItemFooter],hlm-item-footer',
	host: { 'data-slot': 'item-footer' },
})
export class HlmItemFooter {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

@Directive({
	selector: '[hlmItemGroup],hlm-item-group',
	host: { 'data-slot': 'item-group' },
})
export class HlmItemGroup {
	constructor() {
		classes(() => 'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col');
	}
}

@Directive({
	selector: '[hlmItemHeader],hlm-item-header',
	host: { 'data-slot': 'item-header' },
})
export class HlmItemHeader {
	constructor() {
		classes(() => 'gap-2 flex basis-full items-center justify-between');
	}
}

const itemMediaVariants = cva(
	'gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
	{
		variants: {
			variant: {
				default: 'bg-transparent',
				icon: '[&_ng-icon:not([class*=\'text-\'])]:text-[calc(var(--spacing)*4)]',
				image: 'size-10 overflow-hidden rounded-xl group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-lg [&_img]:size-full [&_img]:object-cover',
			},
		},
		defaultVariants: {
			variant: 'default',
		},
	},
);
export type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;

@Directive({
	selector: '[hlmItemMedia],hlm-item-media',
	host: {
		'data-slot': 'item-media',
		'[attr.data-variant]': 'variant()',
	},
})
export class HlmItemMedia {
	private readonly _config = injectHlmItemMediaConfig();
	public readonly variant = input<ItemMediaVariants['variant']>(this._config.variant);

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

@Directive({
	selector: '[hlmItemSeparator],hlm-item-separator',
	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
	host: { 'data-slot': 'item-separator' },
})
export class HlmItemSeparator {
	constructor() {
		classes(() => [hlmSeparatorClass, 'my-2']);
	}
}

@Directive({
	selector: '[hlmItemTitle],hlm-item-title',
	host: { 'data-slot': 'item-title' },
})
export class HlmItemTitle {
	constructor() {
		classes(() => 'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center');
	}
}

export interface HlmItemConfig {
	variant: ItemVariants['variant'];
	size: ItemVariants['size'];
}

const defaultConfig: HlmItemConfig = {
	variant: 'default',
	size: 'default',
};

const HlmItemConfigToken = new InjectionToken<HlmItemConfig>('HlmItemConfig');

export function provideHlmItemConfig(config: Partial<HlmItemConfig>): ValueProvider {
	return { provide: HlmItemConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmItemConfig(): HlmItemConfig {
	return inject(HlmItemConfigToken, { optional: true }) ?? defaultConfig;
}

export interface HlmItemMediaConfig {
	variant: ItemMediaVariants['variant'];
}

const defaultMediaConfig: HlmItemMediaConfig = {
	variant: 'default',
};

const HlmItemMediaConfigToken = new InjectionToken<HlmItemMediaConfig>('HlmItemMediaConfig');

export function provideHlmItemMediaConfig(config: Partial<HlmItemMediaConfig>): ValueProvider {
	return { provide: HlmItemMediaConfigToken, useValue: { ...defaultMediaConfig, ...config } };
}

export function injectHlmItemMediaConfig(): HlmItemMediaConfig {
	return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
}

const itemVariants = cva(
	'[a]:hover:bg-muted rounded-2xl border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
	{
		variants: {
			variant: {
				default: 'border-transparent',
				outline: 'border-border',
				muted: 'bg-muted/50 border-transparent',
			},
			size: {
				default: 'gap-3.5 px-4 py-3.5',
				sm: 'gap-3.5 px-3.5 py-3',
				xs: 'gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0',
			},
		},
		defaultVariants: {
			variant: 'default',
			size: 'default',
		},
	},
);

export type ItemVariants = VariantProps<typeof itemVariants>;

@Directive({
	selector: '[hlmItem],hlm-item',
	host: {
		'data-slot': 'item',
		'[attr.data-variant]': 'variant()',
		'[attr.data-size]': 'size()',
	},
})
export class HlmItem {
	private readonly _config = injectHlmItemConfig();
	public readonly variant = input<ItemVariants['variant']>(this._config.variant);
	public readonly size = input<ItemVariants['size']>(this._config.size);

	constructor() {
		classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
	}
}

export const HlmItemImports = [
	HlmItem,
	HlmItemActions,
	HlmItemContent,
	HlmItemDescription,
	HlmItemFooter,
	HlmItemGroup,
	HlmItemHeader,
	HlmItemMedia,
	HlmItemSeparator,
	HlmItemTitle,
] as const;

Usage

import { HlmItemImports } from '@spartan-ng/helm/item';

<hlm-item>
  <hlm-item-media variant="icon">
    <ng-icon name="lucideBadgeCheck" />
  </hlm-item-media>
  <hlm-item-content>
    <hlm-item-title>Title</hlm-item-title>
    <hlm-item-description>Description</hlm-item-description>
  </hlm-item-content>
  <hlm-item-actions>
    <button hlmBtn>Action</button>
  </hlm-item-actions>
</hlm-item>

Composition

Use the following composition to build an Item:

hlm-item-group
└── hlm-item
    ├── hlm-item-header
    ├── hlm-item-media
    ├── hlm-item-content
    │   ├── hlm-item-title
    │   └── hlm-item-description
    ├── hlm-item-actions
    └── hlm-item-footer

Item vs Field

Use hlmField if you need to display a form input such as a checkbox, input, radio, or select. If you only need to display content such as a title, description, and actions, use hlmItem .

Examples

Variants

Use the variant prop to change the visual style of the item.

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideInbox } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-variants-preview',
	imports: [HlmItemImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideInbox })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-md flex-col gap-6',
	},
	template: `
		<hlm-item>
			<hlm-item-media variant="icon">
				<ng-icon name="lucideInbox" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Default Variant</hlm-item-title>
				<p hlmItemDescription>Transparent background with no border.</p>
			</hlm-item-content>
		</hlm-item>
		<hlm-item variant="outline">
			<hlm-item-media variant="icon">
				<ng-icon name="lucideInbox" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Outline Variant</hlm-item-title>
				<p hlmItemDescription>Outlined style with a visible border.</p>
			</hlm-item-content>
		</hlm-item>
		<hlm-item variant="muted">
			<hlm-item-media variant="icon">
				<ng-icon name="lucideInbox" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Muted Variant</hlm-item-title>
				<p hlmItemDescription>Muted background for secondary content.</p>
			</hlm-item-content>
		</hlm-item>
	`,
})
export class ItemVariantsPreview {}

Size

Use the size prop to change the size of the item. Available sizes are default , sm , and xs .

Default Size

The standard size for most use cases.

Small Size

A compact size for dense layouts.

Extra Small Size

The most compact size available.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideInbox } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-size-preview',
	imports: [HlmItemImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideInbox })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-md flex-col gap-6',
	},
	template: `
		<hlm-item variant="outline">
			<hlm-item-media variant="icon">
				<ng-icon name="lucideInbox" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Default Size</hlm-item-title>
				<p hlmItemDescription>The standard size for most use cases.</p>
			</hlm-item-content>
		</hlm-item>
		<hlm-item variant="outline" size="sm">
			<hlm-item-media variant="icon">
				<ng-icon name="lucideInbox" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Small Size</hlm-item-title>
				<p hlmItemDescription>A compact size for dense layouts.</p>
			</hlm-item-content>
		</hlm-item>
		<hlm-item variant="outline" size="xs">
			<hlm-item-media variant="icon">
				<ng-icon name="lucideInbox" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Extra Small Size</hlm-item-title>
				<p hlmItemDescription>The most compact size available.</p>
			</hlm-item-content>
		</hlm-item>
	`,
})
export class ItemSizePreview {}

Icon

Use hlm-item-media with variant="icon" to display an icon.

Security Alert

New login detected from unknown device.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideShieldAlert } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-icon-preview',
	imports: [HlmItemImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideShieldAlert })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-lg flex-col gap-6',
	},
	template: `
		<hlm-item variant="outline">
			<hlm-item-media variant="icon">
				<ng-icon name="lucideShieldAlert" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Security Alert</hlm-item-title>
				<p hlmItemDescription>New login detected from unknown device.</p>
			</hlm-item-content>
			<hlm-item-actions>
				<button hlmBtn size="sm" variant="outline">Review</button>
			</hlm-item-actions>
		</hlm-item>
	`,
})
export class ItemIconPreview {}

Avatar

Evil Rabbit

Last seen 5 months ago

No Team Members

Invite your team to collaborate on this project.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-avatar-preview',
	imports: [HlmItemImports, HlmButtonImports, HlmAvatarImports, NgIcon],
	providers: [provideIcons({ lucidePlus })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-lg flex-col gap-6',
	},
	template: `
		<hlm-item variant="outline">
			<hlm-item-media>
				<hlm-avatar class="size-10">
					<img hlmAvatarImage src="https://github.com/evilrabbit.png" alt="Evil Rabbit" />
					<span hlmAvatarFallback>ER</span>
				</hlm-avatar>
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>Evil Rabbit</hlm-item-title>
				<p hlmItemDescription>Last seen 5 months ago</p>
			</hlm-item-content>
			<hlm-item-actions>
				<button hlmBtn size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
					<ng-icon name="lucidePlus" />
				</button>
			</hlm-item-actions>
		</hlm-item>

		<hlm-item variant="outline">
			<hlm-item-media>
				<div
					class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
				>
					<hlm-avatar class="hidden sm:flex">
						<img hlmAvatarImage src="https://github.com/spartan-ng.png" alt="@spartan-ng" />
						<span hlmAvatarFallback>CN</span>
					</hlm-avatar>
					<hlm-avatar class="hidden sm:flex">
						<img hlmAvatarImage src="https://github.com/maxleiter.png" alt="@maxleiter" />
						<span hlmAvatarFallback>LR</span>
					</hlm-avatar>
					<hlm-avatar>
						<img hlmAvatarImage src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
						<span hlmAvatarFallback>ER</span>
					</hlm-avatar>
				</div>
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>No Team Members</hlm-item-title>
				<p hlmItemDescription>Invite your team to collaborate on this project.</p>
			</hlm-item-content>
			<hlm-item-actions>
				<button hlmBtn size="sm" variant="outline">Invite</button>
			</hlm-item-actions>
		</hlm-item>
	`,
})
export class ItemAvatarPreview {}

Image

Use hlm-item-media with variant="image" to display an image.

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain - Binary Beats

Cyber Symphony

3:30

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-image-preview',
	imports: [HlmItemImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-md flex-col gap-6',
	},
	template: `
		<hlm-item-group>
			@for (song of _songs; track song.title) {
				<a hlmItem variant="outline" role="listitem" href="#">
					<hlm-item-media variant="image">
						<img
							[src]="'https://avatar.vercel.sh/' + song.title"
							[alt]="song.title"
							width="32"
							height="32"
							class="object-cover grayscale"
						/>
					</hlm-item-media>

					<hlm-item-content>
						<hlm-item-title class="line-clamp-1">
							{{ song.title }} -
							<span class="text-muted-foreground">{{ song.album }}</span>
						</hlm-item-title>
						<p hlmItemDescription>{{ song.artist }}</p>
					</hlm-item-content>

					<hlm-item-content class="flex-none text-center">
						<p hlmItemDescription>{{ song.duration }}</p>
					</hlm-item-content>
				</a>
			}
		</hlm-item-group>
	`,
})
export class ItemImagePreview {
	protected readonly _songs = [
		{
			title: 'Midnight City Lights',
			artist: 'Neon Dreams',
			album: 'Electric Nights',
			duration: '3:45',
		},
		{
			title: 'Coffee Shop Conversations',
			artist: 'The Morning Brew',
			album: 'Urban Stories',
			duration: '4:05',
		},
		{
			title: 'Digital Rain',
			artist: 'Cyber Symphony',
			album: 'Binary Beats',
			duration: '3:30',
		},
	];
}

Group

spartan-ng

spartan@ng.com

maxleiter

maxleiter@vercel.com

evilrabbit

evilrabbit@vercel.com

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-group-preview',
	imports: [HlmItemImports, HlmAvatarImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucidePlus })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-md flex-col gap-6',
	},
	template: `
		<hlm-item-group>
			@for (person of _people; track person.username; let last = $last) {
				<hlm-item variant="outline">
					<hlm-item-media>
						<hlm-avatar>
							<img hlmAvatarImage [src]="person.avatar" [alt]="person.username" class="grayscale" />
							<span hlmAvatarFallback>{{ person.username.charAt(0).toUpperCase() }}</span>
						</hlm-avatar>
					</hlm-item-media>

					<hlm-item-content class="gap-1">
						<hlm-item-title>{{ person.username }}</hlm-item-title>
						<p hlmItemDescription>{{ person.email }}</p>
					</hlm-item-content>

					<hlm-item-actions>
						<button hlmBtn variant="ghost" size="icon" class="rounded-full">
							<ng-icon name="lucidePlus" />
						</button>
					</hlm-item-actions>
				</hlm-item>
			}
		</hlm-item-group>
	`,
})
export class ItemGroupPreview {
	protected readonly _people = [
		{
			username: 'spartan-ng',
			avatar: 'https://github.com/spartan-ng.png',
			email: 'spartan@ng.com',
		},
		{
			username: 'maxleiter',
			avatar: 'https://github.com/maxleiter.png',
			email: 'maxleiter@vercel.com',
		},
		{
			username: 'evilrabbit',
			avatar: 'https://github.com/evilrabbit.png',
			email: 'evilrabbit@vercel.com',
		},
	];
}
``;

Header

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open Source model for everyone.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-header-preview',
	imports: [HlmItemImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-xl flex-col gap-6',
	},
	template: `
		<hlm-item-group class="grid grid-cols-3 gap-4">
			@for (model of _models; track model.name) {
				<hlm-item variant="outline">
					<hlm-item-header>
						<img
							[src]="model.image"
							[alt]="model.name"
							width="128"
							height="128"
							class="aspect-square w-full rounded-sm object-cover"
						/>
					</hlm-item-header>
					<hlm-item-content>
						<hlm-item-title>{{ model.name }}</hlm-item-title>
						<p hlmItemDescription>{{ model.description }}</p>
					</hlm-item-content>
				</hlm-item>
			}
		</hlm-item-group>
	`,
})
export class ItemHeaderPreview {
	protected readonly _models = [
		{
			name: 'v0-1.5-sm',
			description: 'Everyday tasks and UI generation.',
			image: 'https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop',
		},
		{
			name: 'v0-1.5-lg',
			description: 'Advanced thinking or reasoning.',
			image: 'https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop',
		},
		{
			name: 'v0-2.0-mini',
			description: 'Open Source model for everyone.',
			image: 'https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop',
		},
	];
}

Link

To render an item as a link, use a anchor element. The hover and focus states will be applied to the anchor element.

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronRight, lucideExternalLink } from '@ng-icons/lucide';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-link-preview',
	imports: [HlmItemImports, NgIcon, RouterLink],
	providers: [provideIcons({ lucideChevronRight, lucideExternalLink })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-md flex-col gap-6',
	},
	template: `
		<a hlmItem routerLink=".">
			<hlm-item-content>
				<hlm-item-title>Visit our documentation</hlm-item-title>
				<p hlmItemDescription>Learn how to get started with our components.</p>
			</hlm-item-content>
			<hlm-item-actions>
				<ng-icon name="lucideChevronRight" class="text-[calc(var(--spacing)*4)]" />
			</hlm-item-actions>
		</a>
		<a hlmItem variant="outline" href="#" target="_blank" rel="noopener noreferrer">
			<hlm-item-content>
				<hlm-item-title>External resource</hlm-item-title>
				<p hlmItemDescription>Opens in a new tab with security attributes.</p>
			</hlm-item-content>
			<hlm-item-actions>
				<ng-icon name="lucideExternalLink" class="text-[calc(var(--spacing)*4)]" />
			</hlm-item-actions>
		</a>
	`,
})
export class ItemLinkPreview {}

Dropdown

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideChevronDown } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
import { HlmItemImports } from '@spartan-ng/helm/item';

@Component({
	selector: 'spartan-item-dropdown-preview',
	imports: [HlmItemImports, HlmButtonImports, HlmAvatarImports, NgIcon, HlmDropdownMenuImports],
	providers: [provideIcons({ lucideChevronDown })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex min-h-64 w-full max-w-md flex-col items-center gap-6',
	},
	template: `
		<button hlmBtn variant="outline" [hlmDropdownMenuTrigger]="people" align="end">
			Select
			<ng-icon name="lucideChevronDown" />
		</button>

		<ng-template #people>
			<hlm-dropdown-menu class="w-48">
				@for (person of _people; track person.email) {
					<hlm-dropdown-menu-item class="p-0">
						<hlm-item size="xs" class="w-full p-2">
							<hlm-item-media>
								<hlm-avatar class="size-6.5">
									<img hlmAvatarImage [src]="person.avatar" [alt]="person.username" class="grayscale" />
									<span hlmAvatarFallback>
										{{ person.username.charAt(0).toUpperCase() }}
									</span>
								</hlm-avatar>
							</hlm-item-media>
							<hlm-item-content class="gap-0">
								<hlm-item-title>{{ person.username }}</hlm-item-title>
								<p hlmItemDescription class="leading-none">{{ person.email }}</p>
							</hlm-item-content>
						</hlm-item>
					</hlm-dropdown-menu-item>
				}
			</hlm-dropdown-menu>
		</ng-template>
	`,
})
export class ItemDropdownPreview {
	protected readonly _people = [
		{
			username: 'spartan-ng',
			avatar: 'https://github.com/spartan-ng.png',
			email: 'spartan@ng.com',
		},
		{
			username: 'maxleiter',
			avatar: 'https://github.com/maxleiter.png',
			email: 'maxleiter@vercel.com',
		},
		{
			username: 'evilrabbit',
			avatar: 'https://github.com/evilrabbit.png',
			email: 'evilrabbit@vercel.com',
		},
	];
}

RTL

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

عنصر أساسي

عنصر بسيط يحتوي على عنوان ووصف.

تم التحقق من ملفك الشخصي.

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

@Component({
	selector: 'spartan-item-rtl-preview',
	imports: [HlmItemImports, HlmButtonImports, NgIcon],
	providers: [provideIcons({ lucideBadgeCheck, lucideChevronRight })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	host: {
		class: 'flex w-full max-w-md flex-col gap-6',
		'[dir]': '_dir()',
	},
	template: `
		<hlm-item variant="outline">
			<hlm-item-content>
				<hlm-item-title>{{ _t()['basicItem'] }}</hlm-item-title>
				<p hlmItemDescription>{{ _t()['basicItemDesc'] }}</p>
			</hlm-item-content>
			<hlm-item-actions>
				<button hlmBtn variant="outline" size="sm">{{ _t()['action'] }}</button>
			</hlm-item-actions>
		</hlm-item>
		<a hlmItem href="#" variant="outline" size="sm">
			<hlm-item-media>
				<ng-icon name="lucideBadgeCheck" class="text-[calc(var(--spacing)*5)]" />
			</hlm-item-media>
			<hlm-item-content>
				<hlm-item-title>{{ _t()['verifiedTitle'] }}</hlm-item-title>
			</hlm-item-content>
			<hlm-item-actions>
				<ng-icon name="lucideChevronRight" class="text-[calc(var(--spacing)*4)]" />
			</hlm-item-actions>
		</a>
	`,
})
export class ItemRtlPreview {
	private readonly _language = inject(TranslateService).language;

	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				basicItem: 'Basic Item',
				basicItemDesc: 'A simple item with title and description.',
				action: 'Action',
				verifiedTitle: 'Your profile has been verified.',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				basicItem: 'عنصر أساسي',
				basicItemDesc: 'عنصر بسيط يحتوي على عنوان ووصف.',
				action: 'إجراء',
				verifiedTitle: 'تم التحقق من ملفك الشخصي.',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				basicItem: 'פריט בסיסי',
				basicItemDesc: 'פריט פשוט עם כותרת ותיאור.',
				action: 'פעולה',
				verifiedTitle: 'הפרופיל שלך אומת.',
			},
		},
	};

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

Helm API

HlmItemActions

Selector: [hlmItemActions],hlm-item-actions

HlmItemContent

Selector: [hlmItemContent],hlm-item-content

HlmItemDescription

Selector: [hlmItemDescription],hlm-item-description

HlmItemFooter

Selector: [hlmItemFooter],hlm-item-footer

HlmItemGroup

Selector: [hlmItemGroup],hlm-item-group

HlmItemHeader

Selector: [hlmItemHeader],hlm-item-header

HlmItemMedia

Selector: [hlmItemMedia],hlm-item-media

Inputs

Prop	Type	Default	Description
variant	ItemMediaVariants['variant']	this._config.variant	-

HlmItemSeparator

Selector: [hlmItemSeparator],hlm-item-separator

HlmItemTitle

Selector: [hlmItemTitle],hlm-item-title

HlmItem

Selector: [hlmItem],hlm-item

Inputs

Prop	Type	Default	Description
variant	ItemVariants['variant']	this._config.variant	-
size	ItemVariants['size']	this._config.size	-

Kbd

Input

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.

Item

Installation

1 Copy utils if needed

2 Copy and paste the following code into your project.

Usage

Composition

Item vs Field

Examples

Variants

Size

Icon

Avatar

Image

Group

Header

Link

Dropdown

RTL

Helm API

HlmItemActions

HlmItemContent

HlmItemDescription

HlmItemFooter

HlmItemGroup

HlmItemHeader

HlmItemMedia

Inputs

HlmItemSeparator

HlmItemTitle

HlmItem

Inputs