@ui5/webcomponents 0.0.0-dcd8e5389 → 0.0.0-ddc5fe31b

package/dist/List.d.ts

@@ -8,22 +8,28 @@ import ListGrowingMode from "./types/ListGrowingMode.js";
 import ListItemBase from "./ListItemBase.js";
 import type { SelectionRequestEventDetail, PressEventDetail } from "./ListItem.js";
 import ListSeparators from "./types/ListSeparators.js";
-type FocusEventDetail = {
+type ListItemFocusEventDetail = {
     item: ListItemBase;
 };
-type SelectionChangeEventDetail = {
+type ListSelectionChangeEventDetail = {
     selectedItems: Array<ListItemBase>;
     previouslySelectedItems: Array<ListItemBase>;
     selectionComponentPressed: boolean;
     targetItem: ListItemBase;
     key?: string;
 };
-type DeleteEventDetail = FocusEventDetail;
-type CloseEventDetail = {
+type ListItemDeleteEventDetail = {
+    item: ListItemBase;
+};
+type ListItemCloseEventDetail = {
+    item: ListItemBase;
+};
+type ListItemToggleEventDetail = {
+    item: ListItemBase;
+};
+type ListItemClickEventDetail = {
     item: ListItemBase;
 };
-type ToggleEventDetail = CloseEventDetail;
-type ClickEventDetail = CloseEventDetail;
 /**
  * @class
  *
@@ -84,11 +90,7 @@ type ClickEventDetail = CloseEventDetail;
  * <code>import "@ui5/webcomponents/dist/GroupHeaderListItem.js";</code> (for <code>ui5-li-groupheader</code>)
  *
  * @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 {
@@ -97,98 +99,60 @@ declare class List extends UI5Element {
      * <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 ""
+     * @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.
-     * <br><br>
-     * <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>SingleSelectBegin</code>,
-     * <code>SingleSelectEnd</code>, <code>MultiSelect</code>, and <code>Delete</code>.
      *
-     * @type {sap.ui.webc.main.types.ListMode}
-     * @name sap.ui.webc.main.List.prototype.mode
-     * @defaultvalue "None"
+     * @default "None"
      * @public
      */
-    mode: ListMode;
+    mode: `${ListMode}`;
     /**
      * 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.
-     * <br><br>
-     * <b>Notes:</b>
-     * <ul>
-     * <li>Avalaible options are <code>All</code>, <code>Inner</code>, and <code>None</code>.</li>
-     * <li>When set to <code>None</code>, none of the items are separated by horizontal lines.</li>
-     * <li>When set to <code>Inner</code>, the first item doesn't have a top separator and the last
-     * item doesn't have a bottom separator.</li>
-     * </ul>
      *
-     * @type {sap.ui.webc.main.types.ListSeparators}
-     * @name sap.ui.webc.main.List.prototype.separators
-     * @defaultvalue "All"
+     * @default "All"
      * @public
      */
-    separators: ListSeparators;
+    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>
-     *
-     * Available options:
-     * <br><br>
-     * <code>Button</code> - Shows a <code>More</code> button at the bottom of the list,
-     * pressing of which triggers the <code>load-more</code> event.
-     * <br>
-     * <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list;
-     * <br>
-     * <code>None</code> (default) - The growing is off.
-     * <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"
+     * @default "None"
      * @since 1.0.0-rc.13
      * @public
      */
-    growing: ListGrowingMode;
+    growing: `${ListGrowingMode}`;
     /**
      * Defines if the component would display a loading indicator over the list.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.List.prototype.busy
-     * @defaultvalue false
+     * @default false
      * @public
      * @since 1.0.0-rc.6
      */
@@ -196,18 +160,14 @@ declare class List extends UI5Element {
     /**
      * 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
+     * @default 1000
      * @public
      */
     busyDelay: 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
      */
@@ -215,9 +175,7 @@ declare class List extends UI5Element {
     /**
      * 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
      */
@@ -226,18 +184,14 @@ declare class List extends UI5Element {
      * 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
+     * @default undefined
      * @since 1.10.0
      */
     accessibleRoleDescription?: string;
@@ -256,9 +210,6 @@ declare class List extends UI5Element {
      * <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
      * @public
      */
     items: Array<ListItemBase>;
@@ -268,9 +219,6 @@ declare class List extends UI5Element {
      * <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
      * @public
      */
     header: Array<HTMLElement>;
@@ -331,6 +279,7 @@ declare class List extends UI5Element {
     getEnabledItems(): Array<ListItemBase>;
     getItems(): Array<ListItemBase>;
     getItemsForProcessing(): Array<ListItemBase>;
+    _revertSelection(previouslySelectedItems: Array<ListItemBase>): void;
     _onkeydown(e: KeyboardEvent): void;
     _onLoadMoreKeydown(e: KeyboardEvent): void;
     _onLoadMoreKeyup(e: KeyboardEvent): void;
@@ -343,10 +292,11 @@ declare class List extends UI5Element {
     _onfocusin(e: FocusEvent): void;
     isForwardElement(element: HTMLElement): boolean;
     isForwardAfterElement(element: HTMLElement): boolean;
+    onItemTabIndexChange(e: CustomEvent): void;
     onItemFocused(e: CustomEvent): void;
     onItemPress(e: CustomEvent<PressEventDetail>): void;
-    onItemClose(e: CustomEvent<CloseEventDetail>): void;
-    onItemToggle(e: CustomEvent<ToggleEventDetail>): void;
+    onItemClose(e: CustomEvent<ListItemCloseEventDetail>): void;
+    onItemToggle(e: CustomEvent<ListItemToggleEventDetail>): void;
     onForwardBefore(e: CustomEvent): void;
     onForwardAfter(e: CustomEvent): void;
     focusBeforeElement(): void;
@@ -377,4 +327,4 @@ declare class List extends UI5Element {
     getIntersectionObserver(): IntersectionObserver;
 }
 export default List;
-export type { ClickEventDetail, FocusEventDetail, DeleteEventDetail, CloseEventDetail, ToggleEventDetail, SelectionChangeEventDetail, };
+export type { ListItemClickEventDetail, ListItemFocusEventDetail, ListItemDeleteEventDetail, ListItemCloseEventDetail, ListItemToggleEventDetail, ListSelectionChangeEventDetail, };

package/dist/List.js

@@ -25,6 +25,7 @@ import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
 import ListMode from "./types/ListMode.js";
 import ListGrowingMode from "./types/ListGrowingMode.js";
+import "./ListItemBase.js";
 import ListSeparators from "./types/ListSeparators.js";
 import BusyIndicator from "./BusyIndicator.js";
 // Template
@@ -34,6 +35,8 @@ import listCss from "./generated/themes/List.css.js";
 import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 // Texts
 import { LOAD_MORE_TEXT, ARIA_LABEL_LIST_SELECTABLE, ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_DELETABLE, } from "./generated/i18n/i18n-defaults.js";
+import "./CheckBox.js";
+import "./RadioButton.js";
 const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms
 const PAGE_UP_DOWN_SIZE = 10;
 /**
@@ -96,11 +99,7 @@ const PAGE_UP_DOWN_SIZE = 10;
  * <code>import "@ui5/webcomponents/dist/GroupHeaderListItem.js";</code> (for <code>ui5-li-groupheader</code>)
  *
  * @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
  */
 let List = List_1 = class List extends UI5Element {
@@ -202,14 +201,16 @@ let List = List_1 = class List extends UI5Element {
         return getEffectiveAriaLabelText(this);
     }
     get ariaLabelModeText() {
-        if (this.isMultiSelect) {
-            return List_1.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
-        }
-        if (this.isSingleSelect) {
-            return List_1.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);
-        }
-        if (this.isDelete) {
-            return List_1.i18nBundle.getText(ARIA_LABEL_LIST_DELETABLE);
+        if (this.hasData) {
+            if (this.isMultiSelect) {
+                return List_1.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
+            }
+            if (this.isSingleSelect) {
+                return List_1.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);
+            }
+            if (this.isDelete) {
+                return List_1.i18nBundle.getText(ARIA_LABEL_LIST_DELETABLE);
+            }
         }
         return "";
     }
@@ -294,13 +295,16 @@ let List = List_1 = class List extends UI5Element {
             selectionChange = this[`handle${this.mode}`](e.detail.item, !!e.detail.selected);
         }
         if (selectionChange) {
-            this.fireEvent("selection-change", {
+            const changePrevented = !this.fireEvent("selection-change", {
                 selectedItems: this.getSelectedItems(),
                 previouslySelectedItems,
                 selectionComponentPressed: e.detail.selectionComponentPressed,
                 targetItem: e.detail.item,
                 key: e.detail.key,
-            });
+            }, true);
+            if (changePrevented) {
+                this._revertSelection(previouslySelectedItems);
+            }
         }
     }
     handleSingleSelect(item) {
@@ -343,6 +347,20 @@ let List = List_1 = class List extends UI5Element {
     getItemsForProcessing() {
         return this.getItems();
     }
+    _revertSelection(previouslySelectedItems) {
+        this.getItems().forEach((item) => {
+            const oldSelection = previouslySelectedItems.indexOf(item) !== -1;
+            const multiSelectCheckBox = item.shadowRoot.querySelector(".ui5-li-multisel-cb");
+            const singleSelectRadioButton = item.shadowRoot.querySelector(".ui5-li-singlesel-radiobtn");
+            item.selected = oldSelection;
+            if (multiSelectCheckBox) {
+                multiSelectCheckBox.checked = oldSelection;
+            }
+            else if (singleSelectRadioButton) {
+                singleSelectRadioButton.checked = oldSelection;
+            }
+        });
+    }
     _onkeydown(e) {
         if (isTabNext(e)) {
             this._handleTabNext(e);
@@ -459,6 +477,10 @@ let List = List_1 = class List extends UI5Element {
         const afterElement = this.getAfterElement();
         return afterElement && afterElement.id === elementId;
     }
+    onItemTabIndexChange(e) {
+        const target = e.target;
+        this._itemNavigation.setCurrentItem(target);
+    }
     onItemFocused(e) {
         const target = e.target;
         e.stopPropagation();
@@ -493,7 +515,11 @@ let List = List_1 = class List extends UI5Element {
     }
     // This is applicable to NotificationListItem
     onItemClose(e) {
-        this.fireEvent("item-close", { item: e.detail.item });
+        const target = e.target;
+        const shouldFireItemClose = target?.hasAttribute("ui5-li-notification") || target?.hasAttribute("ui5-li-notification-group");
+        if (shouldFireItemClose) {
+            this.fireEvent("item-close", { item: e.detail?.item });
+        }
     }
     onItemToggle(e) {
         this.fireEvent("item-toggle", { item: e.detail.item });
@@ -529,7 +555,7 @@ let List = List_1 = class List extends UI5Element {
         }
     }
     getGrowingButton() {
-        return this.shadowRoot.querySelector(`#${this._id}-growing-btn`);
+        return this.shadowRoot.querySelector(`[id="${this._id}-growing-btn"]`);
     }
     /**
      * Focuses the first list item and sets its tabindex to "0" via the ItemNavigation
@@ -598,13 +624,13 @@ let List = List_1 = class List extends UI5Element {
     }
     getAfterElement() {
         if (!this._afterElement) {
-            this._afterElement = this.shadowRoot.querySelector(`#${this._id}-after`);
+            this._afterElement = this.shadowRoot.querySelector(`[id="${this._id}-after"]`);
         }
         return this._afterElement;
     }
     getBeforeElement() {
         if (!this._beforeElement) {
-            this._beforeElement = this.shadowRoot.querySelector(`#${this._id}-before`);
+            this._beforeElement = this.shadowRoot.querySelector(`[id="${this._id}-before"]`);
         }
         return this._beforeElement;
     }
@@ -683,7 +709,6 @@ List = List_1 = __decorate([
      * Fired when an item is activated, unless the item's <code>type</code> property
      * is set to <code>Inactive</code>.
      *
-     * @event sap.ui.webc.main.List#item-click
      * @allowPreventDefault
      * @param {HTMLElement} item The clicked item.
      * @public
@@ -691,6 +716,9 @@ List = List_1 = __decorate([
     ,
     event("item-click", {
         detail: {
+            /**
+             * @public
+             */
             item: { type: HTMLElement },
         },
     })
@@ -700,7 +728,6 @@ List = List_1 = __decorate([
      * <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items),
      * not to be confused with <code>item-delete</code>.
      *
-     * @event sap.ui.webc.main.List#item-close
      * @param {HTMLElement} item the item about to be closed.
      * @public
      * @since 1.0.0-rc.8
@@ -708,6 +735,9 @@ List = List_1 = __decorate([
     ,
     event("item-close", {
         detail: {
+            /**
+             * @public
+             */
             item: { type: HTMLElement },
         },
     })
@@ -716,7 +746,6 @@ List = List_1 = __decorate([
      * <br><br>
      * <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items).
      *
-     * @event sap.ui.webc.main.List#item-toggle
      * @param {HTMLElement} item the toggled item.
      * @public
      * @since 1.0.0-rc.8
@@ -724,6 +753,9 @@ List = List_1 = __decorate([
     ,
     event("item-toggle", {
         detail: {
+            /**
+             * @public
+             */
             item: { type: HTMLElement },
         },
     })
@@ -733,13 +765,15 @@ List = List_1 = __decorate([
      * <b>Note:</b> A Delete button is displayed on each item,
      * when the component <code>mode</code> property is set to <code>Delete</code>.
      *
-     * @event sap.ui.webc.main.List#item-delete
      * @param {HTMLElement} item the deleted item.
      * @public
      */
     ,
     event("item-delete", {
         detail: {
+            /**
+             * @public
+             */
             item: { type: HTMLElement },
         },
     })
@@ -747,18 +781,36 @@ List = List_1 = __decorate([
      * Fired when selection is changed by user interaction
      * in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes.
      *
-     * @event sap.ui.webc.main.List#selection-change
-     * @param {Array} selectedItems An array of the selected items.
-     * @param {Array} previouslySelectedItems An array of the previously selected items.
+     * @allowPreventDefault
+     * @param {Array<ListItemBase>} selectedItems An array of the selected items.
+     * @param {Array<ListItemBase>} previouslySelectedItems An array of the previously selected items.
      * @public
      */
     ,
     event("selection-change", {
         detail: {
+            /**
+             * @public
+             */
             selectedItems: { type: Array },
+            /**
+             * @public
+             */
             previouslySelectedItems: { type: Array },
+            /**
+             * protected, holds the event target item
+             * @protected
+             */
             targetItem: { type: HTMLElement },
-            selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
+            /**
+             * protected, indicates if the user used the selection components to change the selection
+             * @protected
+             */
+            selectionComponentPressed: { type: Boolean },
+            /**
+             * @private
+             */
+            key: { type: String },
         },
     })
     /**
@@ -766,7 +818,6 @@ List = List_1 = __decorate([
      * <br><br>
      * <b>Note:</b> The event is fired when the <code>growing='Scroll'</code> property is enabled.
      *
-     * @event sap.ui.webc.main.List#load-more
      * @public
      * @since 1.0.0-rc.6
      */