@ui5/webcomponents 1.0.0-rc.7 → 1.0.1

package/dist/TreeListItem.js

@@ -0,0 +1,332 @@
+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/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";
+
+// Styles
+import treeListItemCss from "./generated/themes/TreeListItem.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-li-tree",
+	languageAware: true,
+	properties: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
+
+		/**
+		 * Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.
+		 *
+		 * @type {Integer}
+		 * @public
+		 * @defaultValue 1
+		 */
+		level: {
+			type: Integer,
+			defaultValue: 1,
+		},
+
+		/**
+		 * If set, an icon will be displayed before the text of the tree list item.
+		 *
+		 * @public
+		 * @type {String}
+		 * @defaultValue ""
+		 */
+		icon: {
+			type: String,
+		},
+
+		/**
+		 * Defines whether the tree list item should display an expand/collapse button.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		showToggleButton: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the tree list item will show a collapse or expand icon inside its toggle button.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		expanded: {
+			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
+		 *
+		 * @protected
+		 * @since 1.0.0-rc.8
+		 */
+		_toggleButtonEnd: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the item shows minimal details - only icon (no text or toggle button)
+		 *
+		 * @protected
+		 * @since 1.0.0-rc.8
+		 */
+		_minimal: {
+			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 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.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
+
+		/**
+		 * Fired when the user interacts with the expand/collapse button of the tree list item.
+		 * @event
+		 * @param {HTMLElement} item the toggled item.
+		 * @public
+		 */
+		toggle: {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
+		/**
+		 * Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node.
+		 *
+		 * @event sap.ui.webcomponents.main.TreeListItem#step-in
+		 * @param {HTMLElement} item the item on which right arrow was pressed.
+		 * @public
+		 */
+		"step-in": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
+		/**
+		 * Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node.
+		 *
+		 * @event sap.ui.webcomponents.main.TreeListItem#step-out
+		 * @param {HTMLElement} item the item on which left arrow was pressed.
+		 * @public
+		 */
+		"step-out": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-li-tree</code> represents a node in a tree structure, shown as a <code>ui5-list</code>.
+ * <br>
+ * <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
+ * @extends ListItem
+ * @tagname ui5-li-tree
+ * @public
+ * @since 1.0.0-rc.8
+ */
+class TreeListItem extends ListItem {
+	static get template() {
+		return TreeListItemTemplate;
+	}
+
+	static get styles() {
+		return [ListItem.styles, treeListItemCss];
+	}
+
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			...ListItem.dependencies,
+			Icon,
+		];
+	}
+
+	onBeforeRendering() {
+		this.actionable = false;
+	}
+
+	get classes() {
+		const allClasses = super.classes;
+		allClasses.main["ui5-li-root-tree"] = true;
+		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;
+	}
+
+	get hasParent() {
+		return this.level > 1;
+	}
+
+	get _toggleIconName() {
+		return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow";
+	}
+
+	get _showToggleButtonBeginning() {
+		return this.showToggleButton && !this._minimal && !this._toggleButtonEnd;
+	}
+
+	get _showToggleButtonEnd() {
+		return this.showToggleButton && !this._minimal && this._toggleButtonEnd;
+	}
+
+	get _showTitle() {
+		return this.textContent.length && !this._minimal;
+	}
+
+	get _accInfo() {
+		return {
+			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),
+		};
+	}
+
+	_toggleClick(event) {
+		event.stopPropagation();
+		this.fireEvent("toggle", { item: this });
+	}
+
+	_onkeydown(event) {
+		super._onkeydown(event);
+
+		if (this.showToggleButton && isRight(event)) {
+			if (!this.expanded) {
+				this.fireEvent("toggle", { item: this });
+			} else {
+				this.fireEvent("step-in", { item: this });
+			}
+		}
+
+		if (isLeft(event)) {
+			if (this.expanded) {
+				this.fireEvent("toggle", { item: this });
+			} else if (this.hasParent) {
+				this.fireEvent("step-out", { item: this });
+			}
+		}
+	}
+
+	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();
+
+export default TreeListItem;

package/dist/WheelSlider.js

@@ -4,9 +4,12 @@ import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isDown,
 	isUp,
-} from "@ui5/webcomponents-base/src/Keys.js";
-import "@ui5/webcomponents-icons/dist/icons/navigation-up-arrow.js";
-import "@ui5/webcomponents-icons/dist/icons/navigation-down-arrow.js";
+	isPageUp,
+	isPageDown,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
+import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import WheelSliderTemplate from "./generated/templates/WheelSliderTemplate.lit.js";
 import Button from "./Button.js";
@@ -21,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}
@@ -60,19 +63,20 @@ const metadata = {
 		 * Indicates if the wheelslider is expanded.
 		 * @type {boolean}
 		 * @defaultvalue false
-		 * @private
+		 * @public
 		 */
-		_expanded: {
+		expanded: {
 			type: Boolean,
 		},
 
 		_items: {
 			type: String,
 			multiple: true,
+			compareValues: true,
 		},
 
 		_itemsToShow: {
-			type: String,
+			type: Object,
 			multiple: true,
 		},
 
@@ -103,26 +107,29 @@ const metadata = {
 		/**
 		 *  Fires when new value is selected.
 		 */
-		valueSelect: {
-			value: {
-				type: String,
+		select: {
+			detail: {
+				value: {
+					type: String,
+				},
 			},
 		},
 	},
 };
 
+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
@@ -152,7 +159,6 @@ class WheelSlider extends UI5Element {
 	constructor() {
 		super();
 		this._currentElementIndex = 0;
-		this._itemCellHeight = 0;
 		this._itemsToShow = [];
 		this._scroller = new ScrollEnablement(this);
 		this._scroller.attachEvent("scroll", this._updateScrolling.bind(this));
@@ -161,7 +167,7 @@ class WheelSlider extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		if (!this._expanded && this.cyclic) {
+		if (!this.expanded && this.cyclic) {
 			const index = this._currentElementIndex % this._items.length;
 			this._currentElementIndex = (this._timesMultipliedOnCyclic() / 2) * this._items.length + index;
 		}
@@ -171,11 +177,10 @@ class WheelSlider extends UI5Element {
 		}
 
 		this._buildItemsToShow();
-		this._updateItemCellHeight();
 	}
 
-	static async onDefine() {
-		await Button.define();
+	static get dependencies() {
+		return [Button];
 	}
 
 	onAfterRendering() {
@@ -183,11 +188,11 @@ class WheelSlider extends UI5Element {
 			this._scroller.scrollContainer = this.shadowRoot.querySelector(`#${this._id}--wrapper`);
 		}
 
-		if (!this._expanded) {
+		if (!this.expanded) {
 			this._scroller.scrollTo(0, 0);
 		}
 
-		if (this._expanded) {
+		if (this.expanded) {
 			const elements = this.shadowRoot.querySelectorAll(".ui5-wheelslider-item");
 			for (let i = 0; i < elements.length; i++) {
 				if (elements[i].textContent === this.value) {
@@ -210,27 +215,30 @@ class WheelSlider extends UI5Element {
 	}
 
 	expandSlider() {
-		this._expanded = true;
+		this.expanded = true;
 		this.fireEvent("expand", {});
 	}
 
 	collapseSlider() {
-		this._expanded = false;
+		this.expanded = false;
 		this.fireEvent("collapse", {});
 	}
 
-	_updateItemCellHeight() {
+	get _itemCellHeight() {
+		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", "");
-
-			this._itemCellHeight = Number(onlyDigitsValue);
+			const onlyDigitsValue = itemHeightValue.replace("px", "");
+			return Number(onlyDigitsValue) || defaultSize;
 		}
+
+		return defaultSize;
 	}
 
 	_updateScrolling() {
-		const sizeOfOneElementInPixels = this._itemCellHeight * 16,
+		const cellSizeInPx = this._itemCellHeight,
 			scrollWhere = this._scroller.scrollContainer.scrollTop;
 		let offsetIndex;
 
@@ -238,9 +246,9 @@ class WheelSlider extends UI5Element {
 			return;
 		}
 
-		offsetIndex = Math.round(scrollWhere / sizeOfOneElementInPixels);
+		offsetIndex = Math.round(scrollWhere / cellSizeInPx);
 
-		if (this.value === this._itemsToShow[offsetIndex]) {
+		if (this.value === this._itemsToShow[offsetIndex].value) {
 			return;
 		}
 
@@ -251,12 +259,12 @@ class WheelSlider extends UI5Element {
 			}
 		}
 
-		this.value = this._itemsToShow[offsetIndex];
+		this.value = this._itemsToShow[offsetIndex].value;
 		this._currentElementIndex = offsetIndex;
 	}
 
 	_handleScrollTouchEnd() {
-		if (this._expanded) {
+		if (this.expanded) {
 			this._selectElementByIndex(this._currentElementIndex);
 		}
 	}
@@ -279,21 +287,18 @@ class WheelSlider extends UI5Element {
 	_selectElementByIndex(currentIndex) {
 		let index = currentIndex;
 		const itemsCount = this._itemsToShow.length;
-		const sizeOfCellInCompactInRem = 2;
-		const sizeOfCellInCozyInRem = 2.875;
-		const sizeOfCellInCompactInPixels = sizeOfCellInCompactInRem * 16;
-		const sizeOfCellInCozyInPixels = sizeOfCellInCozyInRem * 16;
-		const scrollBy = this.isCompact ? sizeOfCellInCompactInPixels * index : sizeOfCellInCozyInPixels * index;
+		const cellSizeInPx = this._itemCellHeight;
+		const scrollBy = cellSizeInPx * index;
 
 		if (this.cyclic) {
 			index = this._handleArrayBorderReached(index);
 		}
 
 		if (index < itemsCount && index > -1) {
-			this._scroller.scrollTo(0, scrollBy);
+			this._scroller.scrollTo(0, scrollBy, 5, 100); // sometimes the container isn't painted yet so retry 5 times (although it succeeds on the 1st)
 			this._currentElementIndex = index;
 			this.value = this._items[index - (this._getCurrentRepetition() * this._items.length)];
-			this.fireEvent("valueSelect", { value: this.value });
+			this.fireEvent("select", { value: this.value });
 		}
 	}
 
@@ -306,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) {
@@ -338,7 +350,7 @@ class WheelSlider extends UI5Element {
 		e.stopPropagation();
 		e.preventDefault();
 
-		if (e.timeStamp === this._prevWheelTimestamp || !this._expanded) {
+		if (e.timeStamp === this._prevWheelTimestamp || !this.expanded) {
 			return;
 		}
 
@@ -356,12 +368,12 @@ class WheelSlider extends UI5Element {
 			return;
 		}
 
-		if (this._expanded) {
+		if (this.expanded) {
 			this.value = e.target.textContent;
 			this._selectElement(e.target);
-			this.fireEvent("valueSelect", { value: this.value });
+			this.fireEvent("select", { value: this.value });
 		} else {
-			this._expanded = true;
+			this.expanded = true;
 		}
 	}
 
@@ -385,28 +397,36 @@ class WheelSlider extends UI5Element {
 		this._selectElementByIndex(nextElementIndex);
 	}
 
-	_onkeydown(е) {
-		if (!this._expanded) {
+	_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);
 		}
-	}
 
-	_onfocusin(e) {
-		e.preventDefault();
-		this.expandSlider();
+		if (isPageDown(e)) {
+			this._selectLimitCell(e, false);
+		}
+
+		if (isPageUp(e)) {
+			this._selectLimitCell(e, true);
+		}
 	}
 
-	_onfocusout(e) {
-		e.preventDefault();
-		this.collapseSlider();
+	_selectLimitCell(event, isMax) {
+		event.preventDefault();
+		const intexIncrease = this.cyclic ? this._items.length : 0;
+		if (isMax) {
+			this._selectElementByIndex(this._items.length - 1 + intexIncrease);
+		} else {
+			this._selectElementByIndex(intexIncrease);
+		}
 	}
 }