@ui5/webcomponents 1.2.2 → 1.3.0

package/dist/Popover.js

@@ -15,7 +15,7 @@ import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import PopoverCss from "./generated/themes/Popover.css.js";
 
-const arrowSize = 8;
+const ARROW_SIZE = 8;
 
 /**
  * @public
@@ -303,10 +303,6 @@ class Popover extends Popup {
 		return 10; // px
 	}
 
-	static get ARROW_MARGIN() {
-		return 6; // px
-	}
-
 	onAfterRendering() {
 		if (!this.isOpen() && this.open) {
 			const opener = document.getElementById(this.opener);
@@ -390,6 +386,13 @@ class Popover extends Popup {
 			&& openerRect.right === 0;
 	}
 
+	isOpenerOutsideViewport(openerRect) {
+		return openerRect.bottom < 0
+			|| openerRect.top > window.innerHeight
+			|| openerRect.right < 0
+			|| openerRect.left > window.innerWidth;
+	}
+
 	/**
 	 * @override
 	 */
@@ -429,7 +432,7 @@ class Popover extends Popup {
 
 		const stretching = this.horizontalAlign === PopoverHorizontalAlign.Stretch;
 
-		if (this._preventRepositionAndClose) {
+		if (this._preventRepositionAndClose || this.isOpenerOutsideViewport(this._openerRect)) {
 			return this.close();
 		}
 
@@ -456,12 +459,8 @@ class Popover extends Popup {
 			top = Math.max(top, this._top);
 		}
 
-		const isVertical = this.actualPlacementType === PopoverPlacementType.Top || this.actualPlacementType === PopoverPlacementType.Bottom;
-		const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
-		const arrow = this._clampArrowPlacement(placement.arrow, isVertical, this._top, this._left, popoverSize, borderRadius);
-
-		this.arrowTranslateX = arrow.x;
-		this.arrowTranslateY = arrow.y;
+		this.arrowTranslateX = placement.arrow.x;
+		this.arrowTranslateY = placement.arrow.y;
 
 		top = this._adjustForIOSKeyboard(top);
 
@@ -476,59 +475,6 @@ class Popover extends Popup {
 		}
 	}
 
-	/**
-	 * Restricts the arrow's coordinates within the bounds of the popover.
-	 * @private
-	 * @param {{x: number, y: number}} arrow arrow's coordinates
-	 * @param {boolean} isVertical if the popover is placed vertically relative to the opener
-	 * @param {number} top popover's top
-	 * @param {number} left popover's left
-	 * @param {{width: number, height: number}} popoverSize popover's width and height
-	 * @param {number} borderRadius value of the border-radius property
-	 * @returns {{x: number, y: number}} Arrow's coordinates
-	 */
-	_clampArrowPlacement({ x, y }, isVertical, top, left, { width, height }, borderRadius) {
-		const maxY = this._getArrowRange(height, borderRadius);
-		const maxX = this._getArrowRange(width, borderRadius);
-
-		if (isVertical) {
-			const popoverOnLeftBorderOffset = Popover.VIEWPORT_MARGIN - left;
-			const popoverOnRightBorderOffset = left + width + Popover.VIEWPORT_MARGIN - document.documentElement.clientWidth;
-
-			if (popoverOnLeftBorderOffset > 0) {
-				x = Math.max(x - popoverOnLeftBorderOffset, -maxX);
-			} else if (popoverOnRightBorderOffset > 0) {
-				x = Math.min(x + popoverOnRightBorderOffset, maxX);
-			}
-		}
-
-		if (!isVertical) {
-			const popoverOnTopBorderOffset = Popover.VIEWPORT_MARGIN - top;
-			const popoverOnBottomBorderOffset = top + height + Popover.VIEWPORT_MARGIN - document.documentElement.clientHeight;
-			if (popoverOnTopBorderOffset > 0) {
-				y = Math.max(y - popoverOnTopBorderOffset, -maxY);
-			} else if (popoverOnBottomBorderOffset > 0) {
-				y = Math.min(y + popoverOnBottomBorderOffset, maxY);
-			}
-		}
-
-		return {
-			x: Math.round(x),
-			y: Math.round(y),
-		};
-	}
-
-	/**
-	 * Returns the allowed range for the popover arrow based on its dimension.
-	 * @private
-	 * @param {number} dimension the height or width of the popover
-	 * @param {number} borderRadius border radius of the popover
-	 * @returns {number}
-	 */
-	_getArrowRange(dimension, borderRadius) {
-		return Math.floor((dimension / 2) - (borderRadius + Popover.ARROW_MARGIN));
-	}
-
 	/**
 	 * Adjust the desired top position to compensate for shift of the screen
 	 * caused by opened keyboard on iOS which affects all elements with position:fixed.
@@ -562,10 +508,6 @@ class Popover extends Popup {
 		return { width, height };
 	}
 
-	get contentDOM() {
-		return this.shadowRoot.querySelector(".ui5-popup-content");
-	}
-
 	get arrowDOM() {
 		return this.shadowRoot.querySelector(".ui5-popover-arrow");
 	}
@@ -598,7 +540,7 @@ class Popover extends Popup {
 			popoverSize.height = targetRect.height;
 		}
 
-		const arrowOffset = this.hideArrow ? 0 : arrowSize;
+		const arrowOffset = this.hideArrow ? 0 : ARROW_SIZE;
 
 		// calc popover positions
 		switch (placementType) {
@@ -666,7 +608,8 @@ class Popover extends Popup {
 			this._top = Math.round(top);
 		}
 
-		const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical);
+		const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
+		const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical, borderRadius);
 
 		return {
 			arrow: arrowPos,
@@ -680,33 +623,50 @@ class Popover extends Popup {
 	 * Calculates the position for the arrow.
 	 * @private
 	 * @param targetRect BoundingClientRect of the target element
-	 * @param popoverSize Width and height of the popover
+	 * @param {{width: number, height: number}} popoverSize Width and height of the popover
 	 * @param left Left offset of the popover
 	 * @param top Top offset of the popover
-	 * @param isVertical if the popover is positioned vertically to the target element
+	 * @param isVertical If the popover is positioned vertically to the target element
+	 * @param {number} borderRadius Value of the border-radius property
 	 * @returns {{x: number, y: number}} Arrow's coordinates
 	 */
-	getArrowPosition(targetRect, popoverSize, left, top, isVertical) {
+	getArrowPosition(targetRect, { width, height }, left, top, isVertical, borderRadius) {
 		let arrowXCentered = this.horizontalAlign === PopoverHorizontalAlign.Center || this.horizontalAlign === PopoverHorizontalAlign.Stretch;
 
 		if (this.horizontalAlign === PopoverHorizontalAlign.Right && left <= targetRect.left) {
 			arrowXCentered = true;
 		}
 
-		if (this.horizontalAlign === PopoverHorizontalAlign.Left && left + popoverSize.width >= targetRect.left + targetRect.width) {
+		if (this.horizontalAlign === PopoverHorizontalAlign.Left && left + width >= targetRect.left + targetRect.width) {
 			arrowXCentered = true;
 		}
 
 		let arrowTranslateX = 0;
 		if (isVertical && arrowXCentered) {
-			arrowTranslateX = targetRect.left + targetRect.width / 2 - left - popoverSize.width / 2;
+			arrowTranslateX = targetRect.left + targetRect.width / 2 - left - width / 2;
 		}
 
 		let arrowTranslateY = 0;
 		if (!isVertical) {
-			arrowTranslateY = targetRect.top + targetRect.height / 2 - top - popoverSize.height / 2;
+			arrowTranslateY = targetRect.top + targetRect.height / 2 - top - height / 2;
 		}
 
+		// Restricts the arrow's translate value along each dimension,
+		// so that the arrow does not clip over the popover's rounded borders.
+		const safeRangeForArrowY = height / 2 - borderRadius - ARROW_SIZE / 2;
+		arrowTranslateY = clamp(
+			arrowTranslateY,
+			-safeRangeForArrowY,
+			safeRangeForArrowY,
+		);
+
+		const safeRangeForArrowX = width / 2 - borderRadius - ARROW_SIZE / 2;
+		arrowTranslateX = clamp(
+			arrowTranslateX,
+			-safeRangeForArrowX,
+			safeRangeForArrowX,
+		);
+
 		return {
 			x: Math.round(arrowTranslateX),
 			y: Math.round(arrowTranslateY),

package/dist/Popup.js

@@ -591,6 +591,10 @@ class Popup extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get contentDOM() {
+		return this.shadowRoot.querySelector(".ui5-popup-content");
+	}
+
 	get styles() {
 		return {
 			root: {},

package/dist/RadioButton.js

@@ -21,7 +21,12 @@ import WrappingType from "./types/WrappingType.js";
 import RadioButtonTemplate from "./generated/templates/RadioButtonTemplate.lit.js";
 
 // i18n
-import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-defaults.js";
+import {
+	VALUE_STATE_ERROR,
+	VALUE_STATE_WARNING,
+	VALUE_STATE_SUCCESS,
+	VALUE_STATE_INFORMATION,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import radioButtonCss from "./generated/themes/RadioButton.css.js";
@@ -100,6 +105,8 @@ const metadata = {
 		 * <li><code>None</code></li>
 		 * <li><code>Error</code></li>
 		 * <li><code>Warning</code></li>
+		 * <li><code>Success</code></li>
+		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
 		 * @type {ValueState}
@@ -446,6 +453,8 @@ class RadioButton extends UI5Element {
 		return {
 			"Error": RadioButton.i18nBundle.getText(VALUE_STATE_ERROR),
 			"Warning": RadioButton.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 

package/dist/ResponsivePopover.js

@@ -167,6 +167,10 @@ class ResponsivePopover extends Popover {
 		return this.shadowRoot.querySelector("[ui5-dialog]");
 	}
 
+	get contentDOM() {
+		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}

package/dist/Select.js

@@ -408,6 +408,7 @@ class Select extends UI5Element {
 				value: opt.value,
 				textContent: opt.textContent,
 				title: opt.title,
+				additionalText: opt.additionalText,
 				id: opt._id,
 				stableDomRef: opt.stableDomRef,
 			};
@@ -636,6 +637,7 @@ class Select extends UI5Element {
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
 		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+		this.focused = false;
 	}
 
 	_afterOpen() {
@@ -644,6 +646,7 @@ class Select extends UI5Element {
 
 	_afterClose() {
 		this.opened = false;
+		this.focused = true;
 		this._iconPressed = false;
 		this._listWidth = 0;
 

package/dist/SliderBase.js

@@ -159,6 +159,13 @@ class SliderBase extends UI5Element {
 			max: null,
 			labelInterval: null,
 		};
+
+		this._ontouchstart = {
+			handleEvent(event) {
+				this._onmousedown(event);
+			},
+			passive: true,
+		};
 	}
 
 	static get metadata() {
@@ -255,10 +262,6 @@ class SliderBase extends UI5Element {
 		}
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	/** Shows the tooltip(s) if the <code>showTooltip</code> property is set to true
 	 *
 	 * @private

package/dist/SplitButton.js

@@ -302,6 +302,19 @@ class SplitButton extends UI5Element {
 		SplitButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
+	constructor() {
+		super();
+
+		this._textButtonPress = {
+			handleEvent(event) {
+				this._textButtonActive = true;
+				this.focused = false;
+				this._setTabIndexValue();
+			},
+			passive: true,
+		};
+	}
+
 	onBeforeRendering() {
 		this._textButtonIcon = this.textButton && this.activeIcon !== "" && (this._textButtonActive) && !this._shiftOrEscapePressed ? this.activeIcon : this.icon;
 		if (this.disabled) {
@@ -383,12 +396,6 @@ class SplitButton extends UI5Element {
 		this._setTabIndexValue();
 	}
 
-	_textButtonPress() {
-		this._textButtonActive = true;
-		this.focused = false;
-		this._setTabIndexValue();
-	}
-
 	_setTabIndexValue() {
 		const textButton = this.textButton,
 			arrowButton = this.arrowButton,

package/dist/Tab.js

@@ -4,6 +4,7 @@ import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTempla
 import SemanticColor from "./types/SemanticColor.js";
 import TabContainer from "./TabContainer.js";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
 import CustomListItem from "./CustomListItem.js";
 
 // Templates
@@ -21,16 +22,42 @@ import overflowCss from "./generated/themes/TabInOverflow.css.js";
  */
 const metadata = {
 	tag: "ui5-tab",
+	managedSlots: true,
+	languageAware: true,
 	slots: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
 
 		/**
-		 * Defines the tab content.
+		 * Holds the content associated with this tab.
+		 *
 		 * @type {Node[]}
-		 * @slot
 		 * @public
+		 * @slot
 		 */
 		"default": {
 			type: Node,
+			propertyName: "content",
+			invalidateOnChildChange: {
+				properties: true,
+				slots: false,
+			},
+		},
+
+		/**
+		 * Defines hierarchies with nested sub tabs.
+		 * <br><br>
+		 * <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.
+		 *
+		 * @type {sap.ui.webcomponents.main.ITab[]}
+		 * @public
+		 * @slot subTabs
+		 */
+		subTabs: {
+			type: HTMLElement,
+			individualSlots: true,
+			invalidateOnChildChange: {
+				properties: true,
+				slots: false,
+			},
 		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
@@ -122,6 +149,14 @@ const metadata = {
 		_selected: {
 			type: Boolean,
 		},
+
+		_realTab: {
+			type: Object,
+		},
+
+		_isTopLevelTab: {
+			type: Boolean,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
 	},
@@ -169,6 +204,7 @@ class Tab extends UI5Element {
 	static get dependencies() {
 		return [
 			Icon,
+			Button,
 			CustomListItem,
 		];
 	}
@@ -199,6 +235,31 @@ class Tab extends UI5Element {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 
+	get requiresExpandButton() {
+		return this.subTabs.length > 0 && this._isTopLevelTab && this._hasOwnContent;
+	}
+
+	get isSingleClickArea() {
+		return this.subTabs.length > 0 && this._isTopLevelTab && !this._hasOwnContent;
+	}
+
+	get isOnSelectedTabPath() {
+		return this._realTab === this || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
+	}
+
+	get _effectiveSlotName() {
+		return this.isOnSelectedTabPath ? this._individualSlot : "disabled-slot";
+	}
+
+	get _defaultSlotName() {
+		return this._realTab === this ? "" : "disabled-slot";
+	}
+
+	get _hasOwnContent() {
+		return this.content.some(node => (node.nodeType !== Node.COMMENT_NODE
+				&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0)));
+	}
+
 	/**
 	 * Returns the DOM reference of the tab that is placed in the header.
 	 * <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method.
@@ -238,13 +299,18 @@ class Tab extends UI5Element {
 	}
 
 	get effectiveSelected() {
-		return this.selected || this._selected;
+		const subItemSelected = this.tabs.some(elem => elem.effectiveSelected);
+		return this.selected || this._selected || subItemSelected;
 	}
 
 	get effectiveHidden() {
 		return !this.effectiveSelected;
 	}
 
+	get tabs() {
+		return this.subTabs.filter(tab => !tab.isSeparator);
+	}
+
 	get ariaLabelledBy() {
 		const labels = [];
 
@@ -298,6 +364,10 @@ class Tab extends UI5Element {
 			classes.push(`ui5-tab-strip-item--${this.design.toLowerCase()}`);
 		}
 
+		if (this.isSingleClickArea) {
+			classes.push(`ui5-tab-strip-item--singleClickArea`);
+		}
+
 		return classes.join(" ");
 	}
 
@@ -322,11 +392,15 @@ class Tab extends UI5Element {
 			classes.push("ui5-tab-overflow-item--disabled");
 		}
 
+		if (this.selected) {
+			classes.push("ui5-tab-overflow-item--selectedSubTab");
+		}
+
 		return classes.join(" ");
 	}
 
 	get overflowState() {
-		return this.disabled ? "Inactive" : "Active";
+		return (this.disabled || this.isSingleClickArea) ? "Inactive" : "Active";
 	}
 }