@ui5/webcomponents 0.0.0-e0658a650 → 0.0.0-e55c2cec6

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,7 +11,7 @@ import toggleBtnCss from "./generated/themes/ToggleButton.css.js";
  */
 const metadata = {
 	tag: "ui5-toggle-button",
-	properties: /** @lends sap.ui.webcomponents.main.ToggleButton.prototype */ {
+	properties: /** @lends sap.ui.webc.main.ToggleButton.prototype */ {
 		/**
 		 * Determines whether the component is displayed as pressed.
 		 *
@@ -45,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

@@ -1,4 +1,4 @@
-<ui5-list
+<ui5-tree-list
     .mode="{{mode}}"
     .headerText="{{headerText}}"
     .footerText="{{footerText}}"
@@ -9,50 +9,14 @@
     @ui5-item-click="{{_onListItemClick}}"
     @ui5-item-delete="{{_onListItemDelete}}"
     @ui5-selection-change="{{_onListSelectionChange}}"
+    @ui5-toggle="{{_onListItemToggle}}"
+    @ui5-step-in="{{_onListItemStepIn}}"
+    @ui5-step-out="{{_onListItemStepOut}}"
+    @mouseover="{{_onListItemMouseOver}}"
+    @mouseout="{{_onListItemMouseOut}}"
     class="ui5-tree-root"
 >
     <slot name="header" slot="header"></slot>
-    {{#each _listItems}}
-        <ui5-li-tree
-            .type="{{this.treeItem.type}}"
-            level="{{this.level}}"
-            icon="{{this.treeItem.icon}}"
-            ?indeterminate="{{this.treeItem.indeterminate}}"
-            additional-text="{{this.treeItem.additionalText}}"
-            additional-text-state="{{this.treeItem.additionalTextState}}"
-            title="{{this.treeItem.title}}"
-            accessible-name="{{this.treeItem.accessibleName}}"
-            ?_toggle-button-end="{{ ../_toggleButtonEnd}}"
-            ?_minimal="{{../_minimal}}"
-            .treeItem="{{this.treeItem}}"
-            .expanded="{{this.treeItem.expanded}}"
-            .selected="{{this.treeItem.selected}}"
-            .showToggleButton="{{this.treeItem.requiresToggleButton}}"
-            ._posinset="{{this.posinset}}"
-            ._setsize="{{this.size}}"
-            @ui5-toggle="{{../_onListItemToggle}}"
-            @ui5-step-in="{{../_onListItemStepIn}}"
-            @ui5-step-out="{{../_onListItemStepOut}}"
-            @mouseover="{{../_onListItemMouseOver}}"
-            @mouseout="{{../_onListItemMouseOut}}"
-            .accessibleRoleDescription="{{this.treeItem.accessibleRoleDescription}}"
-            .ariaHaspopup="{{this.treeItem.ariaHaspopup}}"
-            exportparts="icon, toggle-icon"
-            .navigated='{{this.treeItem.navigated}}'
-        >
-        {{#if typeNavigation}}
-			<ui5-icon name ="slim-arrow-right"></ui5-icon>
-		{{/if}}
 
-        {{#if navigated}}
-			<div class="ui5-li-navigated"></div>
-		{{/if}}
-
-            {{> treeListItemContent}}
-        </ui5-li-tree>
-    {{/each}}
-</ui5-list>
-
-{{#*inline "treeListItemContent"}}
-	{{this.treeItem.text}}
-{{/inline}}
+    <slot></slot>
+</ui5-tree-list>

package/src/Tree.js

@@ -2,8 +2,8 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import TreeItem from "./TreeItem.js";
-import List from "./List.js";
-import TreeListItem from "./TreeListItem.js";
+import TreeItemCustom from "./TreeItemCustom.js";
+import TreeList from "./TreeList.js";
 import ListMode from "./types/ListMode.js";
 
 // Template
@@ -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: {
@@ -148,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
 		 */
@@ -179,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.
@@ -187,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
@@ -200,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
@@ -213,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
@@ -227,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
@@ -244,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
 		 */
@@ -258,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.
@@ -320,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
@@ -346,15 +346,14 @@ class Tree extends UI5Element {
 
 	static get dependencies() {
 		return [
-			List,
-			TreeListItem,
+			TreeList,
 			TreeItem,
+			TreeItemCustom,
 		];
 	}
 
 	onBeforeRendering() {
-		this._listItems = [];
-		buildTree(this, 1, this._listItems);
+		this._prepareTreeItems();
 	}
 
 	get list() {
@@ -370,28 +369,25 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemStepIn(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		if (treeItem.items.length > 0) {
 			const firstChild = treeItem.items[0];
-			const firstChildListItem = this.list.getSlottedNodes("items").find(li => li.treeItem === firstChild);
+			const firstChildListItem = this._getListItemForTreeItem(firstChild);
 			firstChildListItem && this.list.focusItem(firstChildListItem);
 		}
 	}
 
 	_onListItemStepOut(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		if (treeItem.parentElement !== this) {
 			const parent = treeItem.parentElement;
-			const parentListItem = this.list.getSlottedNodes("items").find(li => li.treeItem === parent);
+			const parentListItem = this._getListItemForTreeItem(parent);
 			parentListItem && this.list.focusItem(parentListItem);
 		}
 	}
 
 	_onListItemToggle(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		const defaultPrevented = !this.fireEvent("item-toggle", { item: treeItem }, true);
 		if (!defaultPrevented) {
 			treeItem.toggle();
@@ -399,8 +395,7 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemClick(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 
 		if (!this.fireEvent("item-click", { item: treeItem }, true)) {
 			event.preventDefault();
@@ -408,27 +403,30 @@ class Tree extends UI5Element {
 	}
 
 	_onListItemDelete(event) {
-		const listItem = event.detail.item;
-		const treeItem = listItem.treeItem;
+		const treeItem = event.detail.item;
 		this.fireEvent("item-delete", { item: treeItem });
 	}
 
 	_onListItemMouseOver(event) {
-		const treeItem = event.target.treeItem;
+		const target = event.target;
 
-		this.fireEvent("item-mouseover", { item: treeItem });
+		if (target.isTreeItem) {
+			this.fireEvent("item-mouseover", { item: target });
+		}
 	}
 
 	_onListItemMouseOut(event) {
-		const treeItem = event.target.treeItem;
+		const target = event.target;
 
-		this.fireEvent("item-mouseout", { item: treeItem });
+		if (target.isTreeItem) {
+			this.fireEvent("item-mouseout", { item: target });
+		}
 	}
 
 	_onListSelectionChange(event) {
-		const previouslySelectedItems = event.detail.previouslySelectedItems.map(item => item.treeItem);
-		const selectedItems = event.detail.selectedItems.map(item => item.treeItem);
-		const targetItem = event.detail.targetItem.treeItem;
+		const previouslySelectedItems = event.detail.previouslySelectedItems;
+		const selectedItems = event.detail.selectedItems;
+		const targetItem = event.detail.targetItem;
 
 		previouslySelectedItems.forEach(item => {
 			item.selected = false;
@@ -444,6 +442,21 @@ class Tree extends UI5Element {
 		});
 	}
 
+	_prepareTreeItems() {
+		// set level to tree items
+		this.walk((item, level, index) => {
+			const parent = item.parentNode;
+			const ariaSetSize = (parent && parent.children.length) || this.items.length;
+
+			item.setAttribute("level", level);
+
+			item._toggleButtonEnd = this._toggleButtonEnd;
+			item._minimal = this._minimal;
+			item._setsize = ariaSetSize;
+			item._posinset = index + 1;
+		});
+	}
+
 	/**
 	 * Returns the corresponding list item for a given tree item
 	 *
@@ -451,14 +464,33 @@ class Tree extends UI5Element {
 	 * @protected
 	 */
 	_getListItemForTreeItem(item) {
-		return this.list.items.find(listItem => listItem.treeItem === item);
+		return this.getItems().find(listItem => listItem === item);
+	}
+
+	/**
+	 * Returns the a flat array of all tree items
+	 * @protected
+	 * @returns {Array}
+	 */
+	getItems() {
+		return this.list.getItems();
+	}
+
+	/**
+	 * Focus a tree item by its index in the flat array of all tree items
+	 * @protected
+	 * @param index
+	 */
+	focusItemByIndex(index) {
+		const item = this.getItems()[index];
+		item && this.list.focusItem(item);
 	}
 
 	/**
 	 * Perform Depth-First-Search walk on the tree and run a callback on each node
 	 *
 	 * @public
-	 * @param {function} callback function to execute on each node of the tree with 2 arguments: the node and the level
+	 * @param {function} callback function to execute on each node of the tree with 3 arguments: the node, the level and the index
 	 */
 	walk(callback) {
 		walkTree(this, 1, callback);
@@ -466,30 +498,14 @@ class Tree extends UI5Element {
 }
 
 const walkTree = (el, level, callback) => {
-	el.items.forEach(item => {
-		callback(item, level);
+	el.items.forEach((item, index) => {
+		callback(item, level, index);
 		if (item.items.length > 0) {
 			walkTree(item, level + 1, callback);
 		}
 	});
 };
 
-const buildTree = (el, level, result) => {
-	el.items.forEach((item, index) => {
-		const listItem = {
-			treeItem: item,
-			size: el.items.length,
-			posinset: index + 1,
-			level,
-		};
-
-		result.push(listItem);
-		if (item.expanded && item.items.length > 0) {
-			buildTree(item, level + 1, result);
-		}
-	});
-};
-
 Tree.define();
 
 export default Tree;

package/src/TreeItem.hbs

@@ -0,0 +1,13 @@
+{{>include "./TreeItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div class="ui5-li-tree-text-wrapper">
+		{{#if _showTitle}}
+			<div part="title" class="ui5-li-title">{{text}}</div>
+		{{/if}}
+
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	</div>
+{{/inline}}