import * as i0 from '@angular/core';
import { TemplateRef, InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
import { AvatarSize, AvatarColor } from 'ngx-com/components/avatar';
import { IconSize } from 'ngx-com/components/icon';
import { VariantProps } from 'class-variance-authority';
/**
* Marker directive for projecting custom leading content into a com-item.
*
* When this directive is present, it completely replaces the default
* leading visual (which would otherwise be a com-avatar with an icon).
* Use this for custom avatars (with images or initials), bare icons,
* custom images, or any other leading visual.
*
* @tokens none
*
* @example Custom avatar with image
* ```html
*
*
*
*
*
* ```
*
* @example Avatar stack
* ```html
*
*
*
*
*
*
*
*
* ```
*/
declare class ComItemLeading {
readonly templateRef: TemplateRef;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Marker directive for projecting custom title content into a com-item.
*
* When this directive is present, it replaces the `title` input with
* rich projected content. Use this when the title needs formatting,
* links, or other custom markup.
*
* @tokens none
*
* @example Title with link
* ```html
*
*
* API Documentation
*
*
* ```
*/
declare class ComItemTitle {
readonly templateRef: TemplateRef;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Marker directive for projecting inline suffix content after the title.
*
* Content appears on the same line as the title, immediately after it.
* Use this for badges, tags, status indicators, or other inline metadata.
*
* @tokens none
*
* @example Badge suffix
* ```html
*
*
*
* Bluetooth
*
*
*
* ```
*/
declare class ComItemSuffix {
readonly templateRef: TemplateRef;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Marker directive for projecting custom description content into a com-item.
*
* When this directive is present, it replaces the `description` input
* with rich projected content. Use this when the description needs
* formatting, code snippets, or other custom markup.
*
* @tokens none
*
* @example Description with code
* ```html
*
*
* sk-abc...xyz
* · Created 3 days ago
*
*
* ```
*/
declare class ComItemDescription {
readonly templateRef: TemplateRef;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/**
* Marker directive for projecting trailing content into a com-item.
*
* Content appears at the far right edge of the item. Use this for
* action buttons, navigation chevrons, toggles, timestamps, or
* any other trailing content.
*
* @tokens none
*
* @example Trailing chevron
* ```html
*
*
*
*
*
* ```
*
* @example Trailing action button
* ```html
*
*
*
*
*
* ```
*/
declare class ComItemTrailing {
readonly templateRef: TemplateRef;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵdir: i0.ɵɵDirectiveDeclaration;
}
/** Item size variants. */
type ItemSize = 'sm' | 'md' | 'lg';
/** Item density variants. */
type ItemDensity = 'compact' | 'default' | 'comfortable';
/**
* CVA variants for the item container (host element).
*
* @tokens `--color-primary-subtle`, `--color-muted`, `--color-muted-hover`, `--color-ring`, `--color-disabled-foreground`
*/
declare const itemVariants: (props?: {
size?: ItemSize;
density?: ItemDensity;
interactive?: boolean;
active?: boolean;
disabled?: boolean;
}) => string;
/** Title classes keyed by item size. */
declare const ITEM_TITLE_CLASSES: Record;
/** Description classes keyed by item size. */
declare const ITEM_DESCRIPTION_CLASSES: Record;
/** Avatar size mapping keyed by item size. */
declare const ITEM_AVATAR_SIZES: Record;
/** Icon size mapping keyed by item size (for icon inside avatar). */
declare const ITEM_ICON_SIZES: Record;
type ItemVariants = VariantProps;
/**
* Item component — a universal compound display element that shows a leading
* visual alongside a title, an optional description, and optional trailing content.
*
* Works in all these contexts:
* - List rows (device lists, settings menus, search results)
* - Page/section headers
* - Dropdown menu items
* - Table cells
* - Card headers
* - Nav items
*
* **Anatomy:**
* ```
* ┌─────────────────────────────────────────────────────────┐
* │ ┌───────┐ │
* │ │com- │ Title text · [inline suffix] [TRAILING] │
* │ │avatar │ Description text (secondary) │
* │ └───────┘ │
* └─────────────────────────────────────────────────────────┘
* ```
*
* Five content zones:
* 1. **Leading visual** — optional. Default: `com-avatar` with `shape="rounded"` + `variant="soft"`.
* Override via `comItemLeading` directive.
* 2. **Title** — primary text. Required (via input or projection).
* 3. **Inline suffix** — same line as title, after it. For badges, tags, status dots.
* 4. **Description** — secondary text below title. Optional.
* 5. **Trailing** — far-right aligned. Actions, chevrons, timestamps.
*
* @tokens `--color-primary-subtle`, `--color-muted`, `--color-muted-foreground`,
* `--color-foreground`, `--color-ring`
*
* @example Simplest — text only, no icon
* ```html
*
* ```
*
* @example Icon + title + description (most common)
* ```html
*
* ```
*
* @example Icon with different color
* ```html
*
*
* ```
*
* @example Page header with badge suffix (size lg)
* ```html
*
*
*
* Bluetooth
*
*
*
* ```
*
* @example Custom leading — user avatar with image
* ```html
*
*
*
*
*
* ```
*
* @example Interactive list item with trailing chevron
* ```html
*
*
*
*
*
* ```
*
* @example Compact density — dropdown menu
* ```html
* @for (option of options; track option.value) {
*
* }
* ```
*
* @example Rich description via projection
* ```html
*
*
* sk-abc...xyz
* · Created 3 days ago
*
*
*
*
*
* ```
*
* @example Disabled
* ```html
*
* ```
*/
declare class ComItem {
/** Primary text. Required unless using comItemTitle directive. */
readonly title: InputSignal;
/** Secondary text below the title. */
readonly description: InputSignal;
/** Lucide icon name — renders inside a com-avatar container. */
readonly icon: InputSignal;
/** Color variant passed to the leading com-avatar. */
readonly iconColor: InputSignal;
/** Size variant affecting typography and spacing. */
readonly size: InputSignal;
/** Density variant affecting vertical padding. */
readonly density: InputSignal;
/** Enables hover/active/focus states. */
readonly interactive: InputSignalWithTransform;
/** Shows selected/active highlight. */
readonly active: InputSignalWithTransform;
/** Dims and disables pointer events. */
readonly disabled: InputSignalWithTransform;
/** Truncates title and description text. */
readonly truncate: InputSignalWithTransform;
protected readonly leadingDirective: Signal;
protected readonly titleDirective: Signal;
protected readonly suffixDirective: Signal;
protected readonly descriptionDirective: Signal;
protected readonly trailingDirective: Signal;
/** Resolved icon color (handles 'auto' → 'primary' for items since there's no name). */
protected readonly resolvedIconColor: Signal;
/** Avatar size mapped from item size. */
protected readonly avatarSize: Signal;
/** Icon size mapped from item size. */
protected readonly iconSize: Signal;
/** Title typography classes based on size. */
protected readonly titleClasses: Signal;
/** Description typography classes based on size. */
protected readonly descriptionClasses: Signal;
/** Host element classes from CVA. */
protected readonly hostClasses: Signal;
protected onKeyboardActivate(event: Event): void;
static ɵfac: i0.ɵɵFactoryDeclaration;
static ɵcmp: i0.ɵɵComponentDeclaration;
}
export { ComItem, ComItemDescription, ComItemLeading, ComItemSuffix, ComItemTitle, ComItemTrailing, ITEM_AVATAR_SIZES, ITEM_DESCRIPTION_CLASSES, ITEM_ICON_SIZES, ITEM_TITLE_CLASSES, itemVariants };
export type { ItemDensity, ItemSize, ItemVariants };