@conectate/ct-list/ct-list-item.d.ts

Wrapper from LitElement

import "@conectate/ct-icon";
import type { icon } from "@conectate/ct-icon/icon-list.js";
import { CtLit } from "@conectate/ct-lit";
/**
 * A customizable list item component that can display icons, text, and additional content.
 *
 * This component can be used standalone or within menu/list structures and provides
 * a flexible layout with slots for prefix, main content, and suffix elements.
 * It can act as a button or as a link depending on the properties provided.
 *
 * Features:
 * - Display text with optional icons
 * - Can act as a navigation link when href/link is provided
 * - Auto-closes parent menus when clicked (configurable)
 * - Customizable appearance with CSS variables
 * - Responsive hover and active states
 *
 * @element ct-list-item
 *
 * @slot prefix - Content placed before the main content (left side in LTR layouts)
 * @slot - Default slot for main content
 * @slot suffix - Content placed after the main content (right side in LTR layouts)
 *
 * @cssprop --ct-list-item--white-space - Controls text wrapping (default: nowrap)
 * @cssprop --ct-icon-size - Size of the icon displayed (default: 21px)
 * @cssprop --color-outline - Color of the bottom border (default: transparent)
 * @cssprop --color-primary - Color used for outline when focused
 *
 * @example
 * ```html
 * <!-- Basic usage with text -->
 * <ct-list-item text="Settings"></ct-list-item>
 *
 * <!-- With icon -->
 * <ct-list-item icon="settings" text="Settings"></ct-list-item>
 *
 * <!-- As a link -->
 * <ct-list-item icon="home" text="Home" href="/home"></ct-list-item>
 *
 * <!-- With custom content -->
 * <ct-list-item>
 *   <span slot="prefix">🔔</span>
 *   Custom content here
 *   <span slot="suffix">3</span>
 * </ct-list-item>
 * ```
 */
export declare class CtListItem extends CtLit {
    static styles: import("lit").CSSResult[];
    /**
     * Custom SVG content for the icon (alternative to using the icon property)
     */
    svg: string;
    /**
     * Material icon name to display
     * @see https://fonts.google.com/icons
     */
    icon?: icon | (string & {});
    /**
     * Text content to display in the list item
     */
    text: string;
    /**
     * URL the item should navigate to when clicked
     * @deprecated use href instead
     */
    link?: string;
    /**
     * URL the item should navigate to when clicked
     */
    href?: string;
    /**
     * Target attribute for the link
     * Controls how the link opens (same window, new tab, etc.)
     */
    target?: "_self" | "_top" | "_blank";
    /**
     * When true, clicking this item won't close parent menus
     * Useful for items that trigger actions that should keep the menu open
     */
    keepOpen: boolean;
    /**
     * When true, hides the bottom border
     * Typically used for the last item or for custom styling
     */
    hideoutline: boolean;
    /**
     * When true, hides the bottom border
     * Typically used for the last item or for custom styling
     */
    role: "button" | "menuitem";
    /**
     * Renders the list item as either a button or a link based on properties
     * @returns Rendered template
     */
    render(): import("lit").TemplateResult;
    /**
     * Closes the parent menu when this item is clicked
     * Respects the keepOpen property
     * @param e Click event
     */
    closeMenu(e: MouseEvent): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "ct-list-item": CtListItem;
    }
}