@esri/calcite-components

/// <reference path="../../index.d.ts" /> import type { PublicLitElement as LitElement } from "@arcgis/lumina"; import type { Scale, FlipContext } from "../interfaces.js"; import type { IconName } from "../calcite-icon/interfaces.js"; /** * @cssproperty [--calcite-list-background-color-hover] - Specifies the component's background color when hovered. * @cssproperty [--calcite-list-background-color-press] - Specifies the component's background color when pressed. * @cssproperty [--calcite-list-background-color] - Specifies the component's background color. * @cssproperty [--calcite-list-border-color] - Specifies the component's border color. * @cssproperty [--calcite-list-content-text-color] - Specifies the content color. * @cssproperty [--calcite-list-description-text-color] - Specifies the `description` color. * @cssproperty [--calcite-list-icon-color] - Specifies the component's icon color. * @cssproperty [--calcite-list-label-text-color] - Specifies the `label` color. * @cssproperty [--calcite-list-selection-border-color] - Specifies the component's selection border color. * @slot - A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements. * @slot [actions-start] - A slot for adding actionable `calcite-action` elements before the content of the component. * @slot [content-start] - A slot for adding non-actionable elements before the component's `label` and `description`. * @slot [content] - A slot for adding non-actionable, centered content in place of the component's `label` and `description`. * @slot [content-end] - A slot for adding non-actionable elements after the component's `label` and `description`. * @slot [actions-end] - A slot for adding actionable `calcite-action` elements after the component's content. * @slot [content-bottom] - A slot for adding content below the component's `label` and `description`. */ export abstract class ListItem extends LitElement { /** * When `true`, displays a close button in the component. * * @default false */ accessor closable: boolean; /** * When `true`, hides the component. * * @default false */ accessor closed: boolean; /** Specifies a description for the component. Displays below the `label`. */ accessor description: string; /** * When `true`, interaction is prevented and the component is displayed with lower opacity. * * @default false */ accessor disabled: boolean; /** * When `true`, the item is not draggable. * * @default false */ accessor dragDisabled: boolean; /** * When `true`, expands the component and its contents. * * @default false */ accessor expanded: boolean; /** Specifies an icon to display at the end of the component. */ accessor iconEnd: IconName; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ accessor iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ accessor iconStart: IconName; /** Specifies an accessible label for the component, displays above the `description`. */ accessor label: string; /** Overrides individual strings used by the component. */ accessor messageOverrides: { close?: string; expand?: string; collapse?: string; }; /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */ accessor metadata: Record<string, unknown>; /** * When `true`, the item is open to show child components. * * @deprecated in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead. * @default false */ accessor open: boolean; /** * Specifies the size of the component. * * @default "m" * @internal */ accessor scale: Scale; /** * When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. * * @default false */ accessor selected: boolean; /** * When `true`, displays and positions the sort handle. * * @default false */ accessor sortHandleOpen: boolean; /** * When `true` and the component is `open`, disables top layer placement. * * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components. * * @default false * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer) */ accessor topLayerDisabled: boolean; /** * When `true`, the component's content displays as inactive. * * @default false */ accessor unavailable: boolean; /** The component's value. */ accessor value: any; /** * Sets focus on the component. * * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component. * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options) */ setFocus(options?: FocusOptions): Promise<void>; /** Fires when the close button is clicked. */ readonly calciteListItemClose: import("@arcgis/lumina").TargetedEvent<this, void>; /** Fires when the component's content area is collapsed. */ readonly calciteListItemCollapse: import("@arcgis/lumina").TargetedEvent<this, void>; /** Fires when the component's content area is expanded. */ readonly calciteListItemExpand: import("@arcgis/lumina").TargetedEvent<this, void>; /** Fires when the component is selected. */ readonly calciteListItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>; /** Fires when the sort handle is requested to be closed and before the closing transition begins. */ readonly calciteListItemSortHandleBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>; /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */ readonly calciteListItemSortHandleBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>; /** Fires when the sort handle is closed and animation is complete. */ readonly calciteListItemSortHandleClose: import("@arcgis/lumina").TargetedEvent<this, void>; /** Fires when the sort handle is open and animation is complete. */ readonly calciteListItemSortHandleOpen: import("@arcgis/lumina").TargetedEvent<this, void>; /** Fires when the open button is clicked. */ readonly calciteListItemToggle: import("@arcgis/lumina").TargetedEvent<this, void>; readonly "@eventTypes": { calciteListItemClose: ListItem["calciteListItemClose"]["detail"]; calciteListItemCollapse: ListItem["calciteListItemCollapse"]["detail"]; calciteListItemExpand: ListItem["calciteListItemExpand"]["detail"]; calciteListItemSelect: ListItem["calciteListItemSelect"]["detail"]; calciteListItemSortHandleBeforeClose: ListItem["calciteListItemSortHandleBeforeClose"]["detail"]; calciteListItemSortHandleBeforeOpen: ListItem["calciteListItemSortHandleBeforeOpen"]["detail"]; calciteListItemSortHandleClose: ListItem["calciteListItemSortHandleClose"]["detail"]; calciteListItemSortHandleOpen: ListItem["calciteListItemSortHandleOpen"]["detail"]; calciteListItemToggle: ListItem["calciteListItemToggle"]["detail"]; }; }