import { PropertyValueMap } from 'lit'; import { Alignment, BackgroundShade, LinkTarget, ListItemStatus, ListItemVariant } from '../../common/types'; import { DdsElement } from '../../internal/dds-hu-element'; /** * `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 { 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 | Map): void; private readonly getIcon; render(): import('lit-html').TemplateResult; }