@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/List.d.ts

@@ -3,11 +3,16 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import ListMode from "./types/ListMode.js";
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+import ListSelectionMode from "./types/ListSelectionMode.js";
 import ListGrowingMode from "./types/ListGrowingMode.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import ListItemBase from "./ListItemBase.js";
-import type { SelectionRequestEventDetail, PressEventDetail } from "./ListItem.js";
+import type { ListItemBasePressEventDetail } from "./ListItemBase.js";
+import DropIndicator from "./DropIndicator.js";
+import type { SelectionRequestEventDetail } from "./ListItem.js";
 import ListSeparators from "./types/ListSeparators.js";
+import ListItemGroup from "./ListItemGroup.js";
 type ListItemFocusEventDetail = {
     item: ListItemBase;
 };
@@ -21,6 +26,15 @@ type ListSelectionChangeEventDetail = {
 type ListItemDeleteEventDetail = {
     item: ListItemBase;
 };
+type ListMoveEventDetail = {
+    source: {
+        element: HTMLElement;
+    };
+    destination: {
+        element: HTMLElement;
+        placement: `${MovePlacement}`;
+    };
+};
 type ListItemCloseEventDetail = {
     item: ListItemBase;
 };
@@ -33,228 +47,175 @@ type ListItemClickEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-list</code> component allows displaying a list of items, advanced keyboard
+ * 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.
- * <br><br>
- * The <code>ui5-list</code> is a container for the available list items:
- * <ul>
- * <li><code>ui5-li</code></li>
- * <li><code>ui5-li-custom</code></li>
- * <li><code>ui5-li-groupheader</code></li>
- * </ul>
- * <br><br>
+ *
+ * The `ui5-list` is a container for the available list items:
+ *
+ * - `ui5-li`
+ * - `ui5-li-custom`
+ * - `ui5-li-group`
+ *
  * To benefit from the built-in selection mechanism, you can use the available
  * selection modes, such as
- * <code>SingleSelect</code>, <code>MultiSelect</code> and <code>Delete</code>.
- * <br><br>
- * Additionally, the <code>ui5-list</code> provides header, footer, and customization for the list item separators.
+ * `Single`, `Multiple` and `Delete`.
  *
- * <br><br>
- * <h3>Keyboard Handling</h3>
+ * Additionally, the `ui5-list` provides header, footer, and customization for the list item separators.
  *
- * <h4>Basic Navigation</h4>
- * The <code>ui5-list</code> provides advanced keyboard handling.
+ * ### Keyboard Handling
+ *
+ * #### Basic Navigation
+ * The `ui5-list` provides advanced keyboard handling.
  * When a list is focused the user can use the following keyboard
  * shortcuts in order to perform a navigation:
- * <br>
  *
- * <ul>
- * <li>[UP/DOWN] - Navigates up and down the items</li>
- * <li>[HOME] - Navigates to first item</li>
- * <li>[END] - Navigates to the last item</li>
- * </ul>
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Home] - Navigates to first item
+ * - [End] - Navigates to the last item
  *
  * The user can use the following keyboard shortcuts to perform actions (such as select, delete),
- * when the <code>mode</code> property is in use:
- * <ul>
- * <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li>
- * <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</code></li>
- * </ul>
+ * when the `selectionMode` property is in use:
+ *
+ * - [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection
+ * - [Delete] - Delete an item if `selectionMode` property is `Delete`
  *
- * <h4>Fast Navigation</h4>
- * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
  * In order to use this functionality, you need to import the following module:
- * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
- * <br><br>
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
  *
- * <h3>ES6 Module Import</h3>
+ * ### ES6 Module Import
  *
- * <code>import "@ui5/webcomponents/dist/List.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/StandardListItem.js";</code> (for <code>ui5-li</code>)
- * <br>
- * <code>import "@ui5/webcomponents/dist/CustomListItem.js";</code> (for <code>ui5-li-custom</code>)
- * <br>
- * <code>import "@ui5/webcomponents/dist/GroupHeaderListItem.js";</code> (for <code>ui5-li-groupheader</code>)
+ * `import "@ui5/webcomponents/dist/List.js";`
  *
+ * `import "@ui5/webcomponents/dist/StandardListItem.js";` (for `ui5-li`)
+ *
+ * `import "@ui5/webcomponents/dist/CustomListItem.js";` (for `ui5-li-custom`)
+ *
+ * `import "@ui5/webcomponents/dist/ListItemGroup.js";` (for `ui5-li-group`)
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.List
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-list
- * @appenddocs sap.ui.webc.main.StandardListItem sap.ui.webc.main.CustomListItem sap.ui.webc.main.GroupHeaderListItem
+ * @extends UI5Element
  * @public
  */
 declare class List extends UI5Element {
     /**
      * Defines the component header text.
-     * <br><br>
-     * <b>Note:</b> If <code>header</code> is set this property is ignored.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.List.prototype.headerText
-     * @defaultvalue ""
+     * **Note:** If `header` is set this property is ignored.
+     * @default ""
      * @public
      */
     headerText: string;
     /**
      * Defines the footer text.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.List.prototype.footerText
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     footerText: string;
     /**
      * Determines whether the component is indented.
-     *
-     * @type {boolean}
-     * @name sap.ui.webc.main.List.prototype.indent
-     * @defaultvalue false
+     * @default false
      * @public
      */
     indent: boolean;
     /**
-     * Defines the mode of the component.
-     *
-     * @type {sap.ui.webc.main.types.ListMode}
-     * @name sap.ui.webc.main.List.prototype.mode
-     * @defaultvalue "None"
+     * Defines the selection mode of the component.
+     * @default "None"
      * @public
      */
-    mode: `${ListMode}`;
+    selectionMode: `${ListSelectionMode}`;
     /**
      * Defines the text that is displayed when the component contains no items.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.List.prototype.noDataText
-     * @defaultvalue ""
+     * @default ""
      * @public
      */
     noDataText: string;
     /**
      * Defines the item separator style that is used.
-     *
-     * @type {sap.ui.webc.main.types.ListSeparators}
-     * @name sap.ui.webc.main.List.prototype.separators
-     * @defaultvalue "All"
+     * @default "All"
      * @public
      */
     separators: `${ListSeparators}`;
     /**
-     * Defines whether the component will have growing capability either by pressing a <code>More</code> button,
-     * or via user scroll. In both cases <code>load-more</code> event is fired.
-     * <br><br>
-     * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
-     * on IE the component will fallback to <code>growing="Button"</code>.
-     * @type {sap.ui.webc.main.types.ListGrowingMode}
-     * @name sap.ui.webc.main.List.prototype.growing
-     * @defaultvalue "None"
+     * Defines whether the component will have growing capability either by pressing a `More` button,
+     * or via user scroll. In both cases `load-more` event is fired.
+     *
+     * **Restrictions:** `growing="Scroll"` is not supported for Internet Explorer,
+     * on IE the component will fallback to `growing="Button"`.
+     * @default "None"
      * @since 1.0.0-rc.13
      * @public
      */
     growing: `${ListGrowingMode}`;
     /**
-     * Defines if the component would display a loading indicator over the list.
+     * Defines the text that will be displayed inside the growing button.
+     *
+     * **Note:** If not specified a built-in text will be displayed.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.List.prototype.busy
-     * @defaultvalue false
+     * **Note:** This property takes effect if the `growing` property is set to the `Button`.
+     * @default ""
+     * @since 1.24
+     * @public
+     */
+    growingButtonText: string;
+    /**
+     * Defines if the component would display a loading indicator over the list.
+     * @default false
      * @public
      * @since 1.0.0-rc.6
      */
-    busy: boolean;
+    loading: boolean;
     /**
-     * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
-     *
-     * @type {sap.ui.webc.base.types.Integer}
-     * @name sap.ui.webc.main.List.prototype.busyDelay
-     * @defaultValue 1000
+     * Defines the delay in milliseconds, after which the loading indicator will show up for this component.
+     * @default 1000
      * @public
      */
-    busyDelay: number;
+    loadingDelay: number;
     /**
      * Defines the accessible name of the component.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.List.prototype.accessibleName
-     * @defaultvalue ""
+     * @default ""
      * @public
      * @since 1.0.0-rc.15
      */
     accessibleName: string;
     /**
      * Defines the IDs of the elements that label the input.
-     *
-     * @type {string}
-     * @name sap.ui.webc.main.List.prototype.accessibleNameRef
-     * @defaultvalue ""
+     * @default ""
      * @public
      * @since 1.0.0-rc.15
      */
     accessibleNameRef: string;
     /**
      * Defines the accessible role of the component.
-     * <br><br>
      * @public
-     * @type {string}
-     * @name sap.ui.webc.main.List.prototype.accessibleRole
-     * @defaultvalue "list"
+     * @default "List"
      * @since 1.0.0-rc.15
      */
-    accessibleRole: string;
-    /**
-     * Defines the description for the accessible role of the component.
-     * @protected
-     * @type {string}
-     * @name sap.ui.webc.main.List.prototype.accessibleRoleDescription
-     * @defaultvalue undefined
-     * @since 1.10.0
-     */
-    accessibleRoleDescription?: string;
+    accessibleRole: `${ListAccessibleRole}`;
     /**
      * Defines if the entire list is in view port.
      * @private
      */
     _inViewport: boolean;
     /**
-     * Defines the active state of the <code>More</code> button.
+     * Defines the active state of the `More` button.
      * @private
      */
     _loadMoreActive: boolean;
     /**
      * Defines the items of the component.
-     * <br><br>
-     * <b>Note:</b> Use <code>ui5-li</code>, <code>ui5-li-custom</code>, and <code>ui5-li-groupheader</code> for the intended design.
      *
-     * @type {sap.ui.webc.main.IListItem[]}
-     * @name sap.ui.webc.main.List.prototype.default
-     * @slot items
+     * **Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.
      * @public
      */
-    items: Array<ListItemBase>;
+    items: Array<ListItemBase | ListItemGroup>;
     /**
      * Defines the component header.
-     * <br><br>
-     * <b>Note:</b> When <code>header</code> is set, the
-     * <code>headerText</code> property is ignored.
      *
-     * @type {HTMLElement[]}
-     * @name sap.ui.webc.main.List.prototype.header
-     * @slot
+     * **Note:** When `header` is set, the
+     * `headerText` property is ignored.
      * @public
      */
     header: Array<HTMLElement>;
@@ -270,21 +231,36 @@ declare class List extends UI5Element {
     _itemNavigation: ItemNavigation;
     _beforeElement?: HTMLElement | null;
     _afterElement?: HTMLElement | null;
+    onItemFocusedBound: (e: CustomEvent) => void;
+    onForwardAfterBound: (e: CustomEvent) => void;
+    onForwardBeforeBound: (e: CustomEvent) => void;
+    onItemTabIndexChangeBound: (e: CustomEvent) => void;
     static onDefine(): Promise<void>;
     constructor();
+    /**
+     * Returns an array containing the list item instances without the groups in a flat structure.
+     * @default []
+     * @since 2.0.0
+     * @public
+     */
+    get listItems(): ListItemBase[];
+    onEnterDOM(): void;
     onExitDOM(): void;
     onBeforeRendering(): void;
     onAfterRendering(): void;
+    attachGroupHeaderEvents(): void;
+    detachGroupHeaderEvents(): void;
     attachForResize(): void;
     get shouldRenderH1(): string | false;
     get headerID(): string;
     get modeLabelID(): string;
     get listEndDOM(): Element | null;
+    get dropIndicatorDOM(): DropIndicator | null;
     get hasData(): boolean;
     get showNoDataText(): string | false;
     get isDelete(): boolean;
     get isSingleSelect(): boolean;
-    get isMultiSelect(): boolean;
+    get isMultiple(): boolean;
     get ariaLabelledBy(): string | undefined;
     get ariaLabelTxt(): string | undefined;
     get ariaLabelModeText(): string;
@@ -292,23 +268,24 @@ declare class List extends UI5Element {
     get growsOnScroll(): boolean;
     get growsWithButton(): boolean;
     get _growingButtonText(): string;
-    get busyIndPosition(): "absolute" | "sticky";
+    get loadingIndPosition(): "absolute" | "sticky";
     get styles(): {
-        busyInd: {
+        loadingInd: {
             position: string;
         };
     };
+    get listAccessibleRole(): string;
     get classes(): ClassMap;
     prepareListItems(): void;
     observeListEnd(): Promise<void>;
     unobserveListEnd(): void;
     onInteresection(entries: Array<IntersectionObserverEntry>): void;
     onSelectionRequested(e: CustomEvent<SelectionRequestEventDetail>): void;
-    handleSingleSelect(item: ListItemBase): boolean;
-    handleSingleSelectBegin(item: ListItemBase): boolean;
-    handleSingleSelectEnd(item: ListItemBase): boolean;
-    handleSingleSelectAuto(item: ListItemBase): boolean;
-    handleMultiSelect(item: ListItemBase, selected: boolean): boolean;
+    handleSingle(item: ListItemBase): boolean;
+    handleSingleStart(item: ListItemBase): boolean;
+    handleSingleEnd(item: ListItemBase): boolean;
+    handleSingleAuto(item: ListItemBase): boolean;
+    handleMultiple(item: ListItemBase, selected: boolean): boolean;
     handleDelete(item: ListItemBase): boolean;
     deselectSelectedItems(): void;
     getSelectedItems(): Array<ListItemBase>;
@@ -326,11 +303,15 @@ declare class List extends UI5Element {
     loadMore(): void;
     _handleTabNext(e: KeyboardEvent): void;
     _onfocusin(e: FocusEvent): void;
+    _ondragenter(e: DragEvent): void;
+    _ondragleave(e: DragEvent): void;
+    _ondragover(e: DragEvent): void;
+    _ondrop(e: DragEvent): void;
     isForwardElement(element: HTMLElement): boolean;
     isForwardAfterElement(element: HTMLElement): boolean;
     onItemTabIndexChange(e: CustomEvent): void;
     onItemFocused(e: CustomEvent): void;
-    onItemPress(e: CustomEvent<PressEventDetail>): void;
+    onItemPress(e: CustomEvent<ListItemBasePressEventDetail>): void;
     onItemClose(e: CustomEvent<ListItemCloseEventDetail>): void;
     onItemToggle(e: CustomEvent<ListItemToggleEventDetail>): void;
     onForwardBefore(e: CustomEvent): void;
@@ -363,4 +344,4 @@ declare class List extends UI5Element {
     getIntersectionObserver(): IntersectionObserver;
 }
 export default List;
-export type { ListItemClickEventDetail, ListItemFocusEventDetail, ListItemDeleteEventDetail, ListItemCloseEventDetail, ListItemToggleEventDetail, ListSelectionChangeEventDetail, };
+export type { ListItemClickEventDetail, ListItemFocusEventDetail, ListItemDeleteEventDetail, ListItemCloseEventDetail, ListItemToggleEventDetail, ListSelectionChangeEventDetail, ListMoveEventDetail, };