dap-design-system/dist/components/list-item/list-item.component.d.ts

Official design system for the DÁP (dap.gov.hu)

import { PropertyValueMap } from 'lit';
import { Alignment, BackgroundShade, LinkTarget, ListItemStatus, ListItemVariant } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSCard } from '../card/card.component';
import { default as DapDSCardContent } from '../card/card-content.component';
import { default as DapDSIcon } from '../icon/icon.component';
/**
 * `dap-ds-list-item` is a custom banner component.
 * @element dap-ds-list-item
 * @summary A list
 * @title - List item
 *
 * @slot - The content of the list item.
 * @slot icon - The icon of the list item.
 * @slot title - The title of the list item.
 * @slot actions - The actions of the list item.
 *
 * @csspart base - The main list item container.
 * @csspart icon - The icon of the list item.
 * @csspart title - The title of the list item.
 * @csspart description - The description of the list item.
 * @csspart container - The container of the list item.
 * @csspart list-item-base - The base list item container.
 * @csspart icon-container - The container of the icon.
 * @csspart title-container - The container of the title.
 * @csspart description-container - The container of the description.
 * @csspart actions-container - The container of the actions.
 * @csspart iteractive-indicator-container - The container of the interactive indicator.
 *
 * @cssproperty --dds-list-item-gap - Gap between list item elements (default: var(--dds-spacing-200))
 * @cssproperty --dds-list-item-content-gap - Gap between content elements (default: var(--dds-spacing-200))
 * @cssproperty --dds-list-item-horizontal-gap - Gap for horizontal alignment (default: var(--dds-spacing-300))
 * @cssproperty --dds-list-item-vertical-gap - Gap for vertical alignment (default: var(--dds-spacing-200))
 * @cssproperty --dds-list-item-icon-size - Size of the icon (default: var(--dds-spacing-600))
 * @cssproperty --dds-list-item-number-size - Size of the number icon (default: 20px)
 * @cssproperty --dds-list-item-actions-gap - Gap between action elements (default: var(--dds-spacing-400))
 * @cssproperty --dds-list-item-actions-padding - Padding for the actions container (default: var(--dds-spacing-100))
 *
 * @cssproperty --dds-list-item-background-base - Background color for base shade (default: var(--dds-background-neutral-base))
 * @cssproperty --dds-list-item-background-subtle - Background color for subtle shade (default: var(--dds-background-neutral-subtle))
 * @cssproperty --dds-list-item-background-medium - Background color for medium shade (default: var(--dds-background-neutral-medium))
 * @cssproperty --dds-list-item-background-strong - Background color for strong shade (default: var(--dds-background-neutral-strong))
 *
 * @cssproperty --dds-list-item-icon-brand - Color for brand icon (default: var(--dds-icon-brand-subtle))
 * @cssproperty --dds-list-item-icon-neutral - Color for neutral icon (default: var(--dds-icon-neutral-base))
 * @cssproperty --dds-list-item-icon-positive - Color for positive icon (default: var(--dds-icon-positive-subtle))
 * @cssproperty --dds-list-item-icon-negative - Color for negative icon (default: var(--dds-icon-negative-subtle))
 *
 * @cssproperty --dds-list-item-title-color - Title text color (default: var(--dds-text-neutral-strong))
 * @cssproperty --dds-list-item-description-color - Description text color (default: var(--dds-text-neutral-base))
 * @cssproperty --dds-list-item-number-text-color - Number text color (default: var(--dds-text-neutral-inverted))
 *
 */
export default class DapDSListItem extends DdsElement {
    static tagName: string;
    static dependencies: {
        'dap-ds-icon': typeof DapDSIcon;
        'dap-ds-card': typeof DapDSCard;
        'dap-ds-card-content': typeof DapDSCardContent;
    };
    private readonly actionSlot;
    private readonly actionContainer;
    /**
     * The variant of the list item.
     * @type {'info' | 'pass' | 'fail' | 'notapplicable' | 'empty' | 'number'}
     */
    variant: ListItemVariant;
    /**
     * The background strongness of the list item.
     * @type {'none' | 'subtle' | 'base' | 'medium' | 'strong'}
     */
    shade: BackgroundShade;
    /**
     * The status of the list item.
     * @type {'transparent' | 'brand' | 'neutral' | 'positive' | 'negative'}
     */
    status: ListItemStatus;
    /**
     * The alignment of the list item.
     * @type {'horizontal' | 'vertical'}
     */
    alignment: Alignment;
    /**
     * The title of the list item.
     */
    title: string;
    /**
     * The icon of the list item. This is an icon name from the built in icons.
     */
    icon: string;
    /**
     * The number of the list item. Only used when variant is 'number'.
     */
    number: number;
    /**
     * Whether the list item is interactive. Generates an anchor tag.
     */
    interactive: boolean;
    /** The link target of the list item when interactive.
     * @type { '_blank' | '_self' | '_parent' | '_top' }
     */
    target: LinkTarget;
    /** The href of the list item when interactive */
    href: string;
    /** The rel of the list item when interactive */
    rel: string;
    /**
     * Whether the list item has an icon.
     */
    noIcon: boolean;
    /**
     * Whether the list item has no padding.
     */
    noPadding: boolean;
    /**
     * The render as type of the list item, only applicable when interactive.
     * @type {'a' | 'button'}
     */
    renderAs: 'a' | 'button';
    static readonly styles: import('lit').CSSResult;
    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    private readonly getIcon;
    render(): import('lit-html').TemplateResult;
}