@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/Tree.js

@@ -18,11 +18,20 @@ const metadata = {
 	tag: "ui5-tree",
 	properties: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
 		/**
-		 * Defines the mode of the <code>ui5-tree</code>. Since the tree uses a <code>ui5-list</code> to display its structure,
+		 * 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.
+		 *
 		 * <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>.
+		 * <b>Note:</b>
+		 *
+		 * <ul>
+		 * <li><code>None</code></li>
+		 * <li><code>SingleSelect</code></li>
+		 * <li><code>SingleSelectBegin</code></li>
+		 * <li><code>SingleSelectEnd</code></li>
+		 * <li><code>MultiSelect</code></li>
+		 * <li><code>Delete</code></li>
+		 * </ul>
 		 *
 		 * @public
 		 * @type {ListMode}
@@ -34,7 +43,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the text that is displayed when the <code>ui5-tree</code> contains no items.
+		 * Defines the text that is displayed when the component contains no items.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -45,7 +54,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-tree</code> header text.
+		 * Defines the component header text.
 		 * <br><br>
 		 * <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.
 		 *
@@ -58,7 +67,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-tree</code> footer text.
+		 * Defines the component footer text.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -102,21 +111,22 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.Tree.prototype */ {
 
 		/**
-		 * Defines the items of the <code>ui5-tree</code>. Tree items may have other tree items as children.
+		 * 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 {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.main.ITreeItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
 			type: HTMLElement,
 			propertyName: "items",
+			invalidateOnChildChange: true,
 		},
 
 		/**
-		 * Defines the <code>ui5-tree</code> header.
+		 * Defines the component header.
 		 * <br><br>
 		 * <b>Note:</b> When the <code>header</code> slot is set, the
 		 * <code>headerText</code> property is ignored.
@@ -139,6 +149,7 @@ const metadata = {
 		 *
 		 * @event sap.ui.webcomponents.main.Tree#item-toggle
 		 * @param {HTMLElement} item the toggled item.
+		 * @allowPreventDefault
 		 * @public
 		 */
 		"item-toggle": {
@@ -147,11 +158,37 @@ const metadata = {
 			},
 		},
 
+		/**
+		 * Fired when the mouse cursor enters the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseover
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseover": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
+		/**
+		 * Fired when the mouse cursor leaves the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseout
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseout": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
 		/**
 		 * Fired when a tree item is activated.
 		 *
 		 * @event sap.ui.webcomponents.main.Tree#item-click
-		 * @param {HTMLElement} item the clicked item.
+		 * @param {HTMLElement} item The clicked item.
 		 * @public
 		 */
 		"item-click": {
@@ -164,7 +201,7 @@ const metadata = {
 		 * Fired when the Delete button of any tree item is pressed.
 		 * <br><br>
 		 * <b>Note:</b> A Delete button is displayed on each item,
-		 * when the <code>ui5-tree</code> <code>mode</code> property is set to <code>Delete</code>.
+		 * when the component <code>mode</code> property is set to <code>Delete</code>.
 		 *
 		 * @event sap.ui.webcomponents.main.Tree#item-delete
 		 * @param {HTMLElement} item the deleted item.
@@ -200,17 +237,43 @@ const metadata = {
  * <h3 class="comment-api-title">Overview</h3>
  * The <code>ui5-tree</code> component provides a tree structure for displaying data in a hierarchy.
  *
+ * <h3>Usage</h3>
+ *
+ * <h4>When to use:</h4>
+ * <ul>
+ * <li>To display hierarchically structured items.</li>
+ * <li>To select one or more items out of a set of hierarchically structured items.</li>
+ * </ul>
+ *
+ * <h4>When not to use:</h4>
+ * <ul>
+ * <li>To display items not hierarchically strcutured. In this case, use the List component.</li>
+ * <li>To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.</li>
+ * <li>The hierarchy turns out to have only two levels. In this case, use List with group items.</li>
+ * </ul>
+ *
  * <h3>Keyboard Handling</h3>
- * <code>ui5-tree</code> provides advanced keyboard handling. You can use the up/down arrow keys to navigate to the previous/next item in the list,
- * representing the tree, regardless of nesting, but also the left/right arrow keys to drill down and go up the tree. If you press the right arrow
- * on a tree node, it will expand, if not expanded. If you press the right arrow key once more, the first child of this node will be selected.
- * If you press the left arrow on a tree node, it will collapse, if expanded. If you press the left arrow key once more, the parent node of this
- * tree node will be selected.
+ *
+ * The <code>ui5-tree</code> provides advanced keyboard handling.
+ * The user can use the following keyboard shortcuts in order to navigate trough the tree:
+ * <ul>
+ * <li>[UP/DOWN] - Navigates up and down the tree items that are currently visible.</li>
+ * <li>[RIGHT] - Drills down the tree by expanding the tree nodes.</li>
+ * <li>[LEFT] - Goes up the tree and collapses the tree nodes.</li>
+ * </ul>
+ * <br>
+ *
+ * The user can use the following keyboard shortcuts to perform selection,
+ * when the <code>mode</code> property is in use:
+ * <ul>
+ * <li>[SPACE] - Selects the currently focused item upon keyup.</li>
+ * <li>[ENTER]  - Selects the currently focused item upon keydown.</li>
+ * </ul>
  *
  * <h3>ES6 Module Import</h3>
- * <code>import @ui5/webcomponents/dist/Tree.js";</code>
+ * <code>import "@ui5/webcomponents/dist/Tree.js";</code>
  * <br>
- * <code>import @ui5/webcomponents/dist/TreeItem.js";</code> (for its respective item element)
+ * <code>import "@ui5/webcomponents/dist/TreeItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -238,17 +301,12 @@ class Tree extends UI5Element {
 		return TreeTemplate;
 	}
 
-	static async onDefine() {
-		await Promise.all([
-			List.define(),
-			TreeListItem.define(),
-			TreeItem.define(),
-		]);
-	}
-
-	constructor() {
-		super();
-		this._observer = new MutationObserver(this.onTreeStructureChange.bind(this));
+	static get dependencies() {
+		return [
+			List,
+			TreeListItem,
+			TreeItem,
+		];
 	}
 
 	onBeforeRendering() {
@@ -256,22 +314,6 @@ class Tree extends UI5Element {
 		buildTree(this, 1, this._listItems);
 	}
 
-	onEnterDOM() {
-		this._observer.observe(this, { attributes: true, childList: true, subtree: true });
-	}
-
-	onExitDOM() {
-		this._observer.disconnect();
-	}
-
-	onTreeStructureChange() {
-		// setTimeout is needed for IE11 so that it does not interfere with ItemNavigation.js and its await on RenderScheduler.
-		// Otherwise this invalidation happens too soon and the ItemNavigation is blocked on waiting the tree to finish
-		setTimeout(() => {
-			this._listItems = []; // trigger onBeforeRendering by modifying the tracked property and force tree re-build
-		}, 0);
-	}
-
 	get list() {
 		return this.getDomRef();
 	}
@@ -321,6 +363,18 @@ class Tree extends UI5Element {
 		this.fireEvent("item-delete", { item: treeItem });
 	}
 
+	_onListItemMouseOver(event) {
+		const treeItem = event.target.treeItem;
+
+		this.fireEvent("item-mouseover", { item: treeItem });
+	}
+
+	_onListItemMouseOut(event) {
+		const treeItem = event.target.treeItem;
+
+		this.fireEvent("item-mouseout", { item: treeItem });
+	}
+
 	_onListSelectionChange(event) {
 		const previouslySelectedItems = event.detail.previouslySelectedItems.map(item => item.treeItem);
 		const selectedItems = event.detail.selectedItems.map(item => item.treeItem);
@@ -369,9 +423,11 @@ const walkTree = (el, level, callback) => {
 };
 
 const buildTree = (el, level, result) => {
-	el.items.forEach(item => {
+	el.items.forEach((item, index) => {
 		const listItem = {
 			treeItem: item,
+			size: el.items.length,
+			posinset: index + 1,
 			level,
 		};
 

package/src/TreeItem.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
 /**
  * @public
@@ -66,18 +67,56 @@ const metadata = {
 		icon: {
 			type: String,
 		},
+
+		/**
+		 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
+		 * @type {string}
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		additionalText: {
+			type: String,
+		},
+
+		/**
+		 * 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>"Erorr"</code>.
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		additionalTextState: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
+
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		title: {
+			type: String,
+		},
 	},
+	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.main.TreeItem.prototype */ {
 
 		/**
-		 * Defines the items of this <code>ui5-tree-item</code>.
+		 * Defines the items of this component.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.main.ITreeItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
+			propertyName: "items",
 			type: HTMLElement,
+			invalidateOnChildChange: true,
 		},
 	},
 };
@@ -95,7 +134,7 @@ const metadata = {
  * <code>ui5-tree-item</code> directly in your apps. The <code>ui5-li-tree</code> list item is internal for the list, and not intended for public use.
  *
  * <h3>ES6 Module Import</h3>
- * <code>import @ui5/webcomponents/dist/TreeItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/TreeItem.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -103,6 +142,7 @@ const metadata = {
  * @extends UI5Element
  * @tagname ui5-tree-item
  * @public
+ * @implements sap.ui.webcomponents.main.ITreeItem
  * @since 1.0.0-rc.8
  */
 class TreeItem extends UI5Element {
@@ -110,17 +150,12 @@ class TreeItem extends UI5Element {
 		return metadata;
 	}
 
-	get items() {
-		return [...this.children];
-	}
-
 	get requiresToggleButton() {
 		return this.hasChildren || this.items.length > 0;
 	}
 
 	/**
 	 * Call this method to manually switch the <code>expanded</code> state of a tree item.
-	 *
 	 * @public
 	 */
 	toggle() {

package/src/TreeListItem.hbs

@@ -1,11 +1,16 @@
 {{>include "./ListItem.hbs"}}
 
 {{#*inline "listItemPreContent"}}
-	<div class="ui5-li-tree-toggle-box" style="padding-left: {{effectiveLevel}}rem; padding-left: calc(var(--_ui5-tree-indent-step) * {{effectiveLevel}});">
+	<div
+		class="ui5-li-tree-toggle-box"
+		style="{{styles.preContent}}"
+	>
 		{{#if _showToggleButtonBeginning}}
 			<ui5-icon
 				class="ui5-li-tree-toggle-icon"
 				name="{{_toggleIconName}}"
+				show-tooltip
+				accessible-name="{{iconAccessibleName}}"
 				@click="{{_toggleClick}}"
 			></ui5-icon>
 		{{/if}}
@@ -13,9 +18,15 @@
 {{/inline}}
 
 {{#*inline "listItemContent"}}
-	{{#if _showTitle}}
-		<div part="title" class="ui5-li-title"><slot></slot></div>
-	{{/if}}
+	<div class="ui5-li-tree-text-wrapper">
+		{{#if _showTitle}}
+			<div part="title" class="ui5-li-title"><slot></slot></div>
+		{{/if}}
+
+		{{#if additionalText}}
+			<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+		{{/if}}
+	</div>
 {{/inline}}
 
 {{#*inline "imageBegin"}}{{/inline}}

package/src/TreeListItem.js

@@ -1,9 +1,17 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
-import "@ui5/webcomponents-icons/dist/icons/navigation-right-arrow.js";
-import "@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import {
+	TREE_ITEM_ARIA_LABEL,
+	TREE_ITEM_EXPAND_NODE,
+	TREE_ITEM_COLLAPSE_NODE,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Template
 import TreeListItemTemplate from "./generated/templates/TreeListItemTemplate.lit.js";
@@ -16,6 +24,7 @@ import treeListItemCss from "./generated/themes/TreeListItem.css.js";
  */
 const metadata = {
 	tag: "ui5-li-tree",
+	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
 
 		/**
@@ -63,6 +72,30 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
+		 * @type {string}
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		additionalText: {
+			type: String,
+		},
+
+		/**
+		 * 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>"Erorr"</code>.
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		additionalTextState: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
+
 		/**
 		 * Defines whether the toggle button is shown at the end, rather than at the beginning of the item
 		 *
@@ -83,12 +116,32 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * @private
+		 * @since 1.0.0-rc.11
+		 */
+		_setsize: {
+			type: Integer,
+			defaultValue: 1,
+			noAttribute: true,
+		},
+
+		/**
+		 * @private
+		 * @since 1.0.0-rc.11
+		 */
+		_posinset: {
+			type: Integer,
+			defaultValue: 1,
+			noAttribute: true,
+		},
+
 	},
 	slots: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-li-tree</code>.
+		 * Defines the text of the component.
 		 * <br><br>
-		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
 		 * @slot
@@ -147,6 +200,17 @@ const metadata = {
  * <i>Note:</i> Do not use <code>ui5-li-tree</code> directly in your apps. Use <code>ui5-tree-item</code> instead, as it can be nested inside a <code>ui5-tree</code>.
  * On the other hand, <code>ui5-li-tree</code> can only be slotted inside a <code>ui5-list</code>, being a list item. It may be useful if you want to build a custom tree component, for example.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-li-tree</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title - Used to style the title of the tree list item</li>
+ * <li>additionalText - Used to style the additionalText of the tree list item</li>
+ * <li>icon - Used to style the icon of the tree list item</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.TreeListItem
@@ -161,15 +225,18 @@ class TreeListItem extends ListItem {
 	}
 
 	static get styles() {
-		return [...ListItem.styles, treeListItemCss];
+		return [ListItem.styles, treeListItemCss];
 	}
 
 	static get metadata() {
 		return metadata;
 	}
 
-	static async onDefine() {
-		await Icon.define();
+	static get dependencies() {
+		return [
+			...ListItem.dependencies,
+			Icon,
+		];
 	}
 
 	onBeforeRendering() {
@@ -182,6 +249,14 @@ class TreeListItem extends ListItem {
 		return allClasses;
 	}
 
+	get styles() {
+		return {
+			preContent: {
+				"padding-left": isIE() ? `${this.effectiveLevel}rem` : `calc(var(--_ui5-tree-indent-step) * ${this.effectiveLevel})`,
+			},
+		};
+	}
+
 	get effectiveLevel() {
 		return this.level - 1;
 	}
@@ -211,6 +286,10 @@ class TreeListItem extends ListItem {
 			role: "treeitem",
 			ariaExpanded: this.showToggleButton ? this.expanded : undefined,
 			ariaLevel: this.level,
+			posinset: this._posinset,
+			setsize: this._setsize,
+			ariaSelectedText: this.ariaSelectedText,
+			listItemAriaLabel: TreeListItem.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
 		};
 	}
 
@@ -238,6 +317,14 @@ class TreeListItem extends ListItem {
 			}
 		}
 	}
+
+	get iconAccessibleName() {
+		return this.expanded ? TreeListItem.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeListItem.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
+	}
+
+	static async onDefine() {
+		TreeListItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 }
 
 TreeListItem.define();

package/src/WheelSlider.hbs

@@ -3,13 +3,10 @@
 	?disabled= "{{disabled}}"
 	value = "{{value}}"
 	label = "{{label}}"
-	?expanded= "{{_expanded}}"
 	@click = {{_onclick}}
 	@keydown={{_onkeydown}}
 	class = "{{classes.root}}"
 	data-sap-focus-ref
-	@focusin="{{_onfocusin}}"
-	@focusout="{{_onfocusout}}"
 	tabindex="0"
 	@wheel="{{_handleWheel}}"
 >
@@ -19,18 +16,28 @@
 		<ui5-button class="ui5-wheelslider-arrow" icon="navigation-up-arrow" @click={{_onArrowUp}} tabindex="-1"></ui5-button>
 	</div>
 	<div id="{{this._id}}--inner" class="ui5-wheelslider-inner">
-	<div id="{{this._id}}--selection-frame" class="ui5-wheelslider-selection-frame">
-		</div>
+	<div id="{{this._id}}--selection-frame" class="ui5-wheelslider-selection-frame"></div>
 		<div id="{{this._id}}--wrapper" class="ui5-wheelslider-wrapper">
-			{{#if _expanded}}
-				<ul id="{{this._id}}--items-list">
+			{{#if expanded}}
+				<ul id="{{this._id}}--items-list" role="listbox" aria-label="{{label}}">
 					{{#each _itemsToShow}}
-						<li class="ui5-wheelslider-item" data-item-index="{{@index}}" style="list-style-type: none;">{{this}}</li>
+						<li class="ui5-wheelslider-item"
+							data-item-index="{{@index}}"
+							role="option"
+							aria-selected="{{this.selected}}"
+						>
+							{{this.value}}
+						</li>
 					{{/each}}
 				</ul>
 			{{else}}
-				<ul id="{{this._id}}--items-list">
-					<li class="ui5-wheelslider-item" style="list-style-type: none;">{{value}}</li>
+				<ul id="{{this._id}}--items-list" role="listbox" aria-label="{{label}}">
+					<li class="ui5-wheelslider-item"
+						role="option"
+						aria-selected="true"
+					>
+						{{value}}
+					</li>
 				</ul>
 			{{/if}}
 		</div>