@ui5/webcomponents 1.9.3 → 1.10.0

package/src/Toast.js

@@ -19,7 +19,7 @@ const MAX_DURATION = 1000;
  */
 const metadata = {
 	tag: "ui5-toast",
-	properties: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Toast.prototype */ {
 
 		/**
 		 * Defines the duration in milliseconds for which component
@@ -28,7 +28,7 @@ const metadata = {
 		 * <b>Note:</b> The minimum supported value is <code>500</code> ms
 		 * and even if a lower value is set, the duration would remain <code>500</code> ms.
 		 *
-		 * @type {sap.ui.webcomponents.base.types.Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultvalue 3000
 		 * @public
 		 */
@@ -53,7 +53,7 @@ const metadata = {
 		 * <li><code>BottomEnd</code></li>
 		 * </ul>
 		 *
-		 * @type {sap.ui.webcomponents.main.types.ToastPlacement}
+		 * @type {sap.ui.webc.main.types.ToastPlacement}
 		 * @defaultvalue "BottomCenter"
 		 * @public
 		 */
@@ -89,7 +89,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.Toast.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Toast.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 * <br><br>
@@ -136,8 +136,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Toast
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Toast
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-toast
  * @public
  * @since 1.0.0-rc.6

package/src/ToggleButton.js

@@ -11,8 +11,7 @@ import toggleBtnCss from "./generated/themes/ToggleButton.css.js";
  */
 const metadata = {
 	tag: "ui5-toggle-button",
-	altTag: "ui5-togglebutton",
-	properties: /** @lends sap.ui.webcomponents.main.ToggleButton.prototype */ {
+	properties: /** @lends sap.ui.webc.main.ToggleButton.prototype */ {
 		/**
 		 * Determines whether the component is displayed as pressed.
 		 *
@@ -46,8 +45,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ToggleButton
- * @extends sap.ui.webcomponents.main.Button
+ * @alias sap.ui.webc.main.ToggleButton
+ * @extends sap.ui.webc.main.Button
  * @tagname ui5-toggle-button
  * @public
  */

package/src/Token.hbs

@@ -13,6 +13,7 @@
 	{{#unless readonly}}
 		<div
 			class="ui5-token--icon"
+			@mousedown="{{_mousedown}}"
 			@click="{{_delete}}"
 		>
 			{{#if closeIcon.length}}

package/src/Token.js

@@ -25,7 +25,7 @@ const metadata = {
 	tag: "ui5-token",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Token.prototype */ {
 
 		/**
 		 * Defines the text of the token.
@@ -70,6 +70,15 @@ const metadata = {
 		 */
 		focused: { type: Boolean },
 
+		/**
+		 * Defines whether the token is being deleted
+		 * This flag is used in the ui5-multi-combobox
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		 toBeDeleted: { type: Boolean },
+
 		/**
 		 * Defines the tabIndex of the component.
 		 * @type {string}
@@ -78,13 +87,13 @@ const metadata = {
 		_tabIndex: { type: String, defaultValue: "-1", noAttribute: true },
 	},
 
-	slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Token.prototype */ {
 
 		/**
 		 * Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used.
 		 * Accepts <code>ui5-icon</code>.
 		 *
-		 * @type {sap.ui.webcomponents.main.IIcon}
+		 * @type {sap.ui.webc.main.IIcon}
 		 * @slot
 		 * @public
 		 * @since 1.0.0-rc.9
@@ -94,7 +103,7 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
+	events: /** @lends sap.ui.webc.main.Token.prototype */ {
 
 		/**
 		 * Fired when the backspace, delete or close icon of the token is pressed
@@ -133,11 +142,11 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/Token.js";</code>
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Token
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Token
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-token
  * @since 1.0.0-rc.9
- * @implements sap.ui.webcomponents.main.IToken
+ * @implements sap.ui.webc.main.IToken
  * @public
  */
 class Token extends UI5Element {
@@ -170,6 +179,10 @@ class Token extends UI5Element {
 		this.focused = !this.focused;
 	}
 
+	_mousedown(event) {
+		this.toBeDeleted = true;
+	}
+
 	 _delete() {
 		this.fireEvent("delete");
 	 }
@@ -194,6 +207,10 @@ class Token extends UI5Element {
 		}
 	}
 
+	onBeforeRendering() {
+		this.toBeDeleted = false;
+	}
+
 	get tokenDeletableText() {
 		return Token.i18nBundle.getText(TOKEN_ARIA_DELETABLE);
 	}

package/src/Tokenizer.js

@@ -64,7 +64,7 @@ const metadata = {
 	tag: "ui5-tokenizer",
 	languageAware: true,
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		"default": {
 			propertyName: "tokens",
 			type: HTMLElement,
@@ -75,7 +75,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		showMore: { type: Boolean },
 
 		disabled: { type: Boolean },
@@ -96,7 +96,7 @@ const metadata = {
 		/**
 		 * Indicates the value state of the related input component.
 		 *
-		 * @type {sap.ui.webcomponents.base.types.ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @private
 		 */
@@ -107,7 +107,7 @@ const metadata = {
 
 		_nMoreCount: { type: Integer },
 	},
-	events: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
+	events: /** @lends sap.ui.webc.main.Tokenizer.prototype */ {
 		"token-delete": {
 			detail: {
 				ref: { type: HTMLElement },
@@ -131,8 +131,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Tokenizer
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Tokenizer
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-tokenizer
  * @usestextcontent
  * @private
@@ -448,8 +448,12 @@ class Tokenizer extends UI5Element {
 	}
 
 	_onmousedown(event) {
-		this._itemNav.setCurrentItem(event.target);
-		this._scrollToToken(event.target);
+		if (event.target.hasAttribute("ui5-token")) {
+			if (!event.target.toBeDeleted) {
+				this._itemNav.setCurrentItem(event.target);
+				this._scrollToToken(event.target);
+			}
+		}
 	}
 
 	_toggleTokenSelection(tokens) {

package/src/Tree.hbs

@@ -5,6 +5,7 @@
     .noDataText="{{noDataText}}"
     .accessibleRole="{{_role}}"
     .accessibleName="{{_label}}"
+	.accessibleRoleDescription="{{accessibleRoleDescription}}"
     @ui5-item-click="{{_onListItemClick}}"
     @ui5-item-delete="{{_onListItemDelete}}"
     @ui5-selection-change="{{_onListSelectionChange}}"
@@ -18,4 +19,4 @@
     <slot name="header" slot="header"></slot>
 
     <slot></slot>
-</ui5-tree-list>
+</ui5-tree-list>

package/src/Tree.js

@@ -17,7 +17,7 @@ import TreeCss from "./generated/themes/Tree.css.js";
  */
 const metadata = {
 	tag: "ui5-tree",
-	properties: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
+	properties: /** @lends sap.ui.webc.main.Tree.prototype */ {
 		/**
 		 * Defines the mode of the component. Since the tree uses a <code>ui5-list</code> to display its structure,
 		 * the tree modes are exactly the same as the list modes, and are all applicable.
@@ -35,7 +35,7 @@ const metadata = {
 		 * </ul>
 		 *
 		 * @public
-		 * @type {sap.ui.webcomponents.main.types.ListMode}
+		 * @type {sap.ui.webc.main.types.ListMode}
 		 * @defaultValue "None"
 		 */
 		mode: {
@@ -103,6 +103,20 @@ const metadata = {
 			defaultValue: "",
 		},
 
+		/**
+		 * Defines the description for the accessible role of the component.
+		 * @protected
+		 * @type {string}
+		 * @defaultvalue undefined
+		 * @since 1.10.0
+		 */
+
+		 accessibleRoleDescription: {
+			type: String,
+			defaultValue: undefined,
+			noAttribute: true,
+		},
+
 		/**
 		 * An array, containing a flat structure of list items to render
 		 *
@@ -134,14 +148,14 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
+	slots: /** @lends sap.ui.webc.main.Tree.prototype */ {
 
 		/**
 		 * Defines the items of the component. Tree items may have other tree items as children.
 		 * <br><br>
 		 * <b>Note:</b> Use <code>ui5-tree-item</code> for the intended design.
 		 *
-		 * @type {sap.ui.webcomponents.main.ITreeItem[]}
+		 * @type {sap.ui.webc.main.ITreeItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -165,7 +179,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
+	events: /** @lends sap.ui.webc.main.Tree.prototype */ {
 
 		/**
 		 * Fired when a tree item is expanded or collapsed.
@@ -173,7 +187,7 @@ const metadata = {
 		 * This may be handy for example if you want to dynamically load tree items upon the user expanding a node.
 		 * Even if you prevented the event's default behavior, you can always manually call <code>toggle()</code> on a tree item.
 		 *
-		 * @event sap.ui.webcomponents.main.Tree#item-toggle
+		 * @event sap.ui.webc.main.Tree#item-toggle
 		 * @param {HTMLElement} item the toggled item.
 		 * @allowPreventDefault
 		 * @public
@@ -186,7 +200,7 @@ const metadata = {
 
 		/**
 		 * Fired when the mouse cursor enters the tree item borders.
-		 * @event sap.ui.webcomponents.main.Tree#item-mouseover
+		 * @event sap.ui.webc.main.Tree#item-mouseover
 		 * @param {HTMLElement} item the hovered item.
 		 * @since 1.0.0-rc.16
 		 * @public
@@ -199,7 +213,7 @@ const metadata = {
 
 		/**
 		 * Fired when the mouse cursor leaves the tree item borders.
-		 * @event sap.ui.webcomponents.main.Tree#item-mouseout
+		 * @event sap.ui.webc.main.Tree#item-mouseout
 		 * @param {HTMLElement} item the hovered item.
 		 * @since 1.0.0-rc.16
 		 * @public
@@ -213,7 +227,7 @@ const metadata = {
 		/**
 		 * Fired when a tree item is activated.
 		 *
-		 * @event sap.ui.webcomponents.main.Tree#item-click
+		 * @event sap.ui.webc.main.Tree#item-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} item The clicked item.
 		 * @public
@@ -230,7 +244,7 @@ const metadata = {
 		 * <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.webcomponents.main.Tree#item-delete
+		 * @event sap.ui.webc.main.Tree#item-delete
 		 * @param {HTMLElement} item the deleted item.
 		 * @public
 		 */
@@ -244,7 +258,7 @@ const metadata = {
 		 * 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.webcomponents.main.Tree#selection-change
+		 * @event sap.ui.webc.main.Tree#selection-change
 		 * @param {Array} selectedItems An array of the selected items.
 		 * @param {Array} previouslySelectedItems An array of the previously selected items.
 		 * @param {HTMLElement} targetItem The item triggering the event.
@@ -306,8 +320,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Tree
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.main.Tree
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-tree
  * @appenddocs TreeItem
  * @public
@@ -347,7 +361,7 @@ class Tree extends UI5Element {
 	}
 
 	get _role() {
-		return "tree";
+		return this._minimal ? "menubar" : "tree";
 	}
 
 	get _label() {

package/src/TreeItem.js

@@ -11,7 +11,7 @@ import treeItemCss from "./generated/themes/TreeItem.css.js";
  */
 const metadata = {
 	tag: "ui5-tree-item",
-	properties: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TreeItem.prototype */ {
 
 		/**
 		 * Defines the text of the tree item.
@@ -38,7 +38,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
-		 * @type {sap.ui.webcomponents.base.types.ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -74,11 +74,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TreeItem
- * @extends sap.ui.webcomponents.main.TreeItemBase
+ * @alias sap.ui.webc.main.TreeItem
+ * @extends sap.ui.webc.main.TreeItemBase
  * @tagname ui5-tree-item
  * @public
- * @implements sap.ui.webcomponents.main.ITreeItem
+ * @implements sap.ui.webc.main.ITreeItem
  * @since 1.0.0-rc.8
  */
 class TreeItem extends TreeItemBase {

package/src/TreeItemBase.js

@@ -26,12 +26,12 @@ import HasPopup from "./types/HasPopup.js";
 const metadata = {
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.TreeItemBase.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TreeItemBase.prototype */ {
 
 		/**
 		 * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.
 		 *
-		 * @type {sap.ui.webcomponents.base.types.Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @protected
 		 * @defaultValue 1
 		 */
@@ -114,7 +114,7 @@ const metadata = {
 		 * Defines the state of the <code>additionalText</code>.
 		 * <br>
 		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
-		 * @type {sap.ui.webcomponents.base.types.ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -203,7 +203,7 @@ const metadata = {
 
 		/**
 		 * Defines the availability and type of interactive popup element that can be triggered by the component on which the property is set.
-		 * @type {sap.ui.webcomponents.main.types.HasPopup}
+		 * @type {sap.ui.webc.main.types.HasPopup}
 		 * @since 1.10.0
 		 * @private
 		 */
@@ -212,14 +212,14 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.TreeItemBase.prototype */ {
+	slots: /** @lends sap.ui.webc.main.TreeItemBase.prototype */ {
 		/**
 		 * Defines the items of the component.
 		 * <br />
 		 * <br />
 		 * <b>Note:</b> Use <code>ui5-tree-item</code> or <code>ui5-tree-item-custom</code>
 		 *
-		 * @type {sap.ui.webcomponents.main.ITreeItem}
+		 * @type {sap.ui.webc.main.ITreeItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -228,7 +228,7 @@ const metadata = {
 			propertyName: "items",
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.TreeItemBase.prototype */ {
+	events: /** @lends sap.ui.webc.main.TreeItemBase.prototype */ {
 
 		/**
 		 * Fired when the user interacts with the expand/collapse button of the tree list item.
@@ -245,7 +245,7 @@ const metadata = {
 		/**
 		 * Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node.
 		 *
-		 * @event sap.ui.webcomponents.main.TreeItemBase#step-in
+		 * @event sap.ui.webc.main.TreeItemBase#step-in
 		 * @param {HTMLElement} item the item on which right arrow was pressed.
 		 * @protected
 		 */
@@ -258,7 +258,7 @@ const metadata = {
 		/**
 		 * Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node.
 		 *
-		 * @event sap.ui.webcomponents.main.TreeItemBase#step-out
+		 * @event sap.ui.webc.main.TreeItemBase#step-out
 		 * @param {HTMLElement} item the item on which left arrow was pressed.
 		 * @protected
 		 */
@@ -277,8 +277,8 @@ const metadata = {
  * @abstract
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TreeItemBase
- * @extends sap.ui.webcomponents.main.ListItem
+ * @alias sap.ui.webc.main.TreeItemBase
+ * @extends sap.ui.webc.main.ListItem
  * @public
  */
 class TreeItemBase extends ListItem {
@@ -377,8 +377,7 @@ class TreeItemBase extends ListItem {
 	/**
 	 * Used to duck-type TreeItem elements without using instanceof
 	 * @returns {boolean}
-	 * @type { boolean }
-	 * @public
+	 * @protected
 	 */
 	get isTreeItem() {
 		return true;

package/src/TreeItemCustom.js

@@ -11,7 +11,7 @@ import treeItemCustomCss from "./generated/themes/TreeItem.css.js";
  */
 const metadata = {
 	tag: "ui5-tree-item-custom",
-	properties: /** @lends sap.ui.webcomponents.main.TreeItemCustom.prototype */ {
+	properties: /** @lends sap.ui.webc.main.TreeItemCustom.prototype */ {
 		/**
 		 * Defines whether the tree list item should display the selection element.
 		 *
@@ -23,7 +23,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.main.TreeItemCustom.prototype */ {
+	slots: /** @lends sap.ui.webc.main.TreeItemCustom.prototype */ {
 		/**
 		 * Defines the content of the <code>ui5-tree-item</code>.
 		 *
@@ -62,11 +62,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.TreeItemCustom
- * @extends sap.ui.webcomponents.main.TreeItemBase
+ * @alias sap.ui.webc.main.TreeItemCustom
+ * @extends sap.ui.webc.main.TreeItemBase
  * @tagname ui5-tree-item-custom
  * @public
- * @implements sap.ui.webcomponents.main.ITreeItem
+ * @implements sap.ui.webc.main.ITreeItem
  * @since 1.0.0-rc.8
  */
 class TreeItemCustom extends TreeItemBase {

package/src/TreeList.js

@@ -12,14 +12,18 @@ class TreeList extends List {
 	/*
 	 * @override
 	 */
-	getItems() {
+	getItems(includeCollapsed = false) {
 		const slottedItems = this.getSlottedNodes("items");
 		const flatItems = [];
 
-		flattenTree(slottedItems, flatItems);
+		flattenTree(slottedItems, flatItems, includeCollapsed);
 
 		return flatItems;
 	}
+
+	getItemsForProcessing() {
+		return this.getItems(true);
+	}
 }
 
 /*
@@ -27,12 +31,13 @@ class TreeList extends List {
  *
  * @param {Array} treeItems
  * @param {Array} result
+ * @param {Boolean} includeCollapsed
  */
-const flattenTree = (items, result) => {
+const flattenTree = (items, result, includeCollapsed) => {
 	items.forEach(item => {
 		result.push(item);
 
-		if (item.expanded && item.items) {
+		if ((item.expanded || includeCollapsed) && item.items) {
 			flattenTree(item.items, result);
 		}
 	});