@ui5/webcomponents 0.0.0-cc312800a → 0.0.0-cf069fb29

package/dist/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,7 +111,7 @@ 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.
 		 *
@@ -117,7 +126,7 @@ const metadata = {
 		},
 
 		/**
-		 * 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.
@@ -149,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": {
@@ -166,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.
@@ -202,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
@@ -302,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);

package/dist/TreeItem.js

@@ -29,6 +29,27 @@ const metadata = {
 		expanded: {
 			type: Boolean,
 		},
+		/**
+		* Defines whether the selection of a tree node is displayed as partially selected.
+		* <br><br>
+		* <b>Note:</b> The indeterminate state can be set only programatically and can’t be achieved by user
+		* interaction, meaning that the resulting visual state depends on the values of the <code>indeterminate</code>
+		* and <code>selected</code> properties:
+		* <ul>
+		* <li> If a tree node has both <code>selected</code> and <code>indeterminate</code> set to <code>true</code>, it is displayed as partially selected.
+		* <li> If a tree node has <code>selected</code> set to <code>true</code> and <code>indeterminate</code> set to <code>false</code>, it is displayed as selected.
+		* <li> If a tree node has <code>selected</code> set to <code>false</code>, it is displayed as not selected regardless of the value of the <code>indeterminate</code> property.
+		* </ul>
+		* <br>
+		* <b>Note:</b> This property takes effect only when the <code>ui5-tree</code> is in <code>MultiSelect</code> mode.
+		* @type {boolean}
+		* @defaultvalue false
+		* @public
+		* @since 1.1.0
+		*/
+		indeterminate: {
+			type: Boolean,
+		},
 
 		/**
 		 * Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
@@ -69,34 +90,45 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>info</code>, displayed in the end of the tree item.
+		 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
 		 * @type {string}
 		 * @public
-		 * @since 1.0.0-rc.12
+		 * @since 1.0.0-rc.15
 		 */
-		info: {
+		additionalText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the state of the <code>info</code>.
+		 * 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.12
+		 * @since 1.0.0-rc.15
 		 */
-		infoState: {
+		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 {sap.ui.webcomponents.main.ITreeItem[]}
 		 * @slot items
@@ -123,7 +155,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

package/dist/TreeListItem.js

@@ -1,7 +1,8 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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/navigation-right-arrow.js";
@@ -10,7 +11,6 @@ import {
 	TREE_ITEM_ARIA_LABEL,
 	TREE_ITEM_EXPAND_NODE,
 	TREE_ITEM_COLLAPSE_NODE,
-	LIST_ITEM_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -73,25 +73,33 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>info</code>, displayed in the end of the tree item.
+		 * @private
+		 * @since 1.1.0
+		 */
+		indeterminate: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the <code>additionalText</code>, displayed in the end of the tree item.
 		 * @type {string}
 		 * @public
-		 * @since 1.0.0-rc.12
+		 * @since 1.0.0-rc.15
 		 */
-		info: {
+		additionalText: {
 			type: String,
 		},
 
 		/**
-		 * Defines the state of the <code>info</code>.
+		 * 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.12
+		 * @since 1.0.0-rc.15
 		 */
-		infoState: {
+		additionalTextState: {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
@@ -139,7 +147,7 @@ const metadata = {
 	},
 	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> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
@@ -200,6 +208,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
@@ -228,12 +247,6 @@ class TreeListItem extends ListItem {
 		];
 	}
 
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	onBeforeRendering() {
 		this.actionable = false;
 	}
@@ -244,6 +257,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;
 	}
@@ -275,7 +296,8 @@ class TreeListItem extends ListItem {
 			ariaLevel: this.level,
 			posinset: this._posinset,
 			setsize: this._setsize,
-			listItemAriaLabel: this.ariaLabelText,
+			ariaSelectedText: this.ariaSelectedText,
+			listItemAriaLabel: TreeListItem.i18nBundle.getText(TREE_ITEM_ARIA_LABEL),
 		};
 	}
 
@@ -304,22 +326,12 @@ class TreeListItem extends ListItem {
 		}
 	}
 
-	get ariaLabelText() {
-		let text = this.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
-
-		if (this.selected) {
-			text += ` ${this.i18nBundle.getText(LIST_ITEM_SELECTED)}`;
-		}
-
-		return text;
-	}
-
 	get iconAccessibleName() {
-		return this.expanded ? this.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : this.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
+		return this.expanded ? TreeListItem.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : TreeListItem.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		TreeListItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/WheelSlider.js

@@ -24,9 +24,9 @@ const metadata = {
 	tag: "ui5-wheelslider",
 	properties: /** @lends sap.ui.webcomponents.main.WheelSlider.prototype */ {
 		/**
-		 * Defines whether the <code>ui5-wheelslider</code> is disabled
+		 * Defines whether the component is disabled
 		 * (default is set to <code>false</code>).
-		 * A disabled <code>ui5-wheelslider</code> can't be pressed or
+		 * A disabled component can't be pressed or
 		 * focused, and it is not in the tab chain.
 		 *
 		 * @type {boolean}
@@ -76,7 +76,7 @@ const metadata = {
 		},
 
 		_itemsToShow: {
-			type: String,
+			type: Object,
 			multiple: true,
 		},
 
@@ -117,21 +117,19 @@ const metadata = {
 	},
 };
 
-const CELL_SIZE_COMPACT = 2;
-const CELL_SIZE_COZY = 2.875;
+const CELL_SIZE_COMPACT = 32;
+const CELL_SIZE_COZY = 46;
 
 /**
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- *
  * <h3>Usage</h3>
  *
- * For the <code>ui5-wheelslider</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/WheelSlider.js";</code>
+ * <code>import "@ui5/webcomponents/dist/WheelSlider.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -227,12 +225,12 @@ class WheelSlider extends UI5Element {
 	}
 
 	get _itemCellHeight() {
-		const defaultSize = getEffectiveContentDensity(this) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
+		const defaultSize = getEffectiveContentDensity(document.body) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
 
 		if (this.shadowRoot.querySelectorAll(".ui5-wheelslider-item").length) {
 			const itemComputedStyle = getComputedStyle(this.shadowRoot.querySelector(".ui5-wheelslider-item"));
 			const itemHeightValue = itemComputedStyle.getPropertyValue("--_ui5_wheelslider_item_height");
-			const onlyDigitsValue = itemHeightValue.replace("rem", "");
+			const onlyDigitsValue = itemHeightValue.replace("px", "");
 			return Number(onlyDigitsValue) || defaultSize;
 		}
 
@@ -240,7 +238,7 @@ class WheelSlider extends UI5Element {
 	}
 
 	_updateScrolling() {
-		const cellSizeInPx = this._itemCellHeight * 16,
+		const cellSizeInPx = this._itemCellHeight,
 			scrollWhere = this._scroller.scrollContainer.scrollTop;
 		let offsetIndex;
 
@@ -250,7 +248,7 @@ class WheelSlider extends UI5Element {
 
 		offsetIndex = Math.round(scrollWhere / cellSizeInPx);
 
-		if (this.value === this._itemsToShow[offsetIndex]) {
+		if (this.value === this._itemsToShow[offsetIndex].value) {
 			return;
 		}
 
@@ -261,7 +259,7 @@ class WheelSlider extends UI5Element {
 			}
 		}
 
-		this.value = this._itemsToShow[offsetIndex];
+		this.value = this._itemsToShow[offsetIndex].value;
 		this._currentElementIndex = offsetIndex;
 	}
 
@@ -289,7 +287,7 @@ class WheelSlider extends UI5Element {
 	_selectElementByIndex(currentIndex) {
 		let index = currentIndex;
 		const itemsCount = this._itemsToShow.length;
-		const cellSizeInPx = this._itemCellHeight * 16;
+		const cellSizeInPx = this._itemCellHeight;
 		const scrollBy = cellSizeInPx * index;
 
 		if (this.cyclic) {
@@ -313,14 +311,21 @@ class WheelSlider extends UI5Element {
 	}
 
 	_buildItemsToShow() {
-		this._itemsToShow = this._items;
+		let itemsToShow = this._items;
 		if (this.cyclic) {
-			if (this._itemsToShow.length < this._items.length * this._timesMultipliedOnCyclic()) {
+			if (itemsToShow.length < this._items.length * this._timesMultipliedOnCyclic()) {
 				for (let i = 0; i < this._timesMultipliedOnCyclic(); i++) {
-					this._itemsToShow = this._itemsToShow.concat(this._items);
+					itemsToShow = itemsToShow.concat(this._items);
 				}
 			}
 		}
+
+		this._itemsToShow = itemsToShow.map(value => {
+			return {
+				value,
+				"selected": (value === this.value),
+			};
+		});
 	}
 
 	_handleArrayBorderReached(currentIndex) {
@@ -392,25 +397,25 @@ class WheelSlider extends UI5Element {
 		this._selectElementByIndex(nextElementIndex);
 	}
 
-	_onkeydown(е) {
+	_onkeydown(e) {
 		if (!this.expanded) {
 			return;
 		}
 
-		if (isUp(е)) {
-			this._onArrowUp(е);
+		if (isUp(e)) {
+			this._onArrowUp(e);
 		}
 
-		if (isDown(е)) {
-			this._onArrowDown(е);
+		if (isDown(e)) {
+			this._onArrowDown(e);
 		}
 
-		if (isPageDown(е)) {
-			this._selectLimitCell(е, false);
+		if (isPageDown(e)) {
+			this._selectLimitCell(e, false);
 		}
 
-		if (isPageUp(е)) {
-			this._selectLimitCell(е, true);
+		if (isPageUp(e)) {
+			this._selectLimitCell(e, true);
 		}
 	}
 

package/dist/YearPicker.js

@@ -105,6 +105,7 @@ class YearPicker extends CalendarPart {
 		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }, getLocale());
 
 		this._calculateFirstYear();
+		this._lastYear = this._firstYear + PAGE_SIZE - 1;
 
 		const calendarDate = this._calendarDate; // store the value of the expensive getter
 		const minDate = this._minDate; // store the value of the expensive getter