Class List

packages/main/src/List.ts:186–1645

* @class * * ### Overview * * The `ui5-list` component allows displaying a list of items, advanced keyboard * handling support for navigating between items, and predefined modes to improve the development efficiency. * * The `ui5-list` is a container for the available list items: * * - `ui5

 * @csspart growing-button-inner - Used to style the button inner element
 */
@customElement({
	tag: "ui5-list",
	fastNavigation: true,
	renderer: jsxRenderer,
	template: ListTemplate,
	styles: [
		listCss,
	],
})
/**
 * Fired when an item is activated, unless the item's `type` property
 * is set to `Inactive`.
 *
 * **Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,
 * associated with non-default `selectionMode` values, or if any other **interactive** component
 * (such as a button or input) within the list item is directly clicked.
 * @param {HTMLElement} item The clicked item.
 * @public
 */
@event("item-click", {
	bubbles: true,
	cancelable: true,
})

/**
 * Fired when the `Close` button of any item is clicked
 *
 * **Note:** This event is only applicable to list items that can be closed (such as notification list items),
 * not to be confused with `item-delete`.
 * @param {HTMLElement} item the item about to be closed.
 * @public
 * @since 1.0.0-rc.8
 */
@event("item-close", {
	bubbles: true,
})

/**
 * Fired when the `Toggle` button of any item is clicked.
 *
 * **Note:** This event is only applicable to list items that can be toggled (such as notification group list items).
 * @param {HTMLElement} item the toggled item.
 * @public
 * @since 1.0.0-rc.8
 */
@event("item-toggle", {
	bubbles: true,
})

/**
 * Fired when the Delete button of any item is pressed.
 *
 * **Note:** A Delete button is displayed on each item,
 * when the component `selectionMode` property is set to `Delete`.
 * @param {HTMLElement} item the deleted item.
 * @public
 */
@event("item-delete", {