@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/dist/MultiInput.js

@@ -15,6 +15,7 @@ import styles from "./generated/themes/MultiInput.css.js";
 import Token from "./Token.js";
 import Tokenizer from "./Tokenizer.js";
 import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/value-help.js";
 
 /**
  * @public
@@ -42,7 +43,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
 		/**
 		 * Defines the component tokens.
 		 *
@@ -54,7 +55,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
 		/**
 		 * Fired when the value help icon is pressed
 		 * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
@@ -98,7 +99,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MultiInput
- * @extends Input
+ * @extends sap.ui.webcomponents.main.Input
  * @tagname ui5-multi-input
  * @appenddocs Token
  * @since 1.0.0-rc.9
@@ -142,6 +143,15 @@ class MultiInput extends Input {
 		const focusedToken = event.detail.ref;
 		const selectedTokens = this.tokens.filter(token => token.selected);
 
+		if (this._readonly) {
+			return;
+		}
+
+		if (focusedToken) {
+			this.fireEvent("token-delete", { token: focusedToken });
+			return;
+		}
+
 		if (selectedTokens.indexOf(focusedToken) === -1) {
 			selectedTokens.push(focusedToken);
 		}
@@ -175,6 +185,8 @@ class MultiInput extends Input {
 
 	innerFocusIn() {
 		this.expandedTokenizer = true;
+		this.focused = true;
+		this.tokenizer.scrollToEnd();
 	}
 
 	_onkeydown(event) {
@@ -218,8 +230,6 @@ class MultiInput extends Input {
 			}
 		}
 
-		this.tokenizer._handleItemNavigation(event, tokens);
-
 		if (isCtrl && ["c", "x"].includes(event.key.toLowerCase())) {
 			event.preventDefault();
 
@@ -274,6 +284,9 @@ class MultiInput extends Input {
 
 		if (!insideDOM && !insideShadowDom) {
 			this.expandedTokenizer = false;
+
+			// we need to reset tabindex setting by tokenizer
+			this.tokenizer._itemNav._currentIndex = -1;
 		}
 	}
 

package/dist/Option.js

@@ -6,7 +6,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 const metadata = {
 	tag: "ui5-option",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.Option.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Option.prototype */ {
 
 		/**
 		 * Defines the selected state of the component.
@@ -21,7 +21,7 @@ const metadata = {
 		/**
 		 * Defines whether the component is in disabled state.
 		 * <br><br>
-		 * <b>Note:</b> A disabled component is noninteractive.
+		 * <b>Note:</b> A disabled component is hidden.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -47,7 +47,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @public
@@ -68,6 +68,16 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Defines the additional text displayed at the end of the option element.
+		 * @type {string}
+		 * @public
+		 * @since 1.3.0
+		 */
+		 additionalText: {
+			type: String,
+		},
+
 		/**
 		 * Defines the focused state of the component.
 		 * @type {boolean}

package/dist/Panel.js

@@ -42,7 +42,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the content of the component.
+		 * Defines the content of the component.
 		 * The content is visible only when the component is expanded.
 		 *
 		 * @type {Node[]}
@@ -105,11 +105,11 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria role of the component.
+		 * Sets the accessible ARIA role of the component.
 		 * Depending on the usage, you can change the role from the default <code>Form</code>
 		 * to <code>Region</code> or <code>Complementary</code>.
 		 *
-		 * @type {PanelAccessibleRole}
+		 * @type {sap.ui.webcomponents.main.types.PanelAccessibleRole}
 		 * @defaultvalue "Form"
 		 * @public
 		 */
@@ -123,7 +123,7 @@ const metadata = {
 		 * set by the <code>headerText</code>.
 		 * <br><br>
 		 * Available options are: <code>"H6"</code> to <code>"H1"</code>.
-		 * @type {TitleLevel}
+		 * @type {sap.ui.webcomponents.main.types.TitleLevel}
 		 * @defaultvalue "H2"
 		 * @public
 		*/
@@ -133,7 +133,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -235,6 +235,7 @@ const metadata = {
  * <br>
  * The <code>ui5-panel</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>header - Used to style the wrapper of the header</li>
  * <li>content - Used to style the wrapper of the content</li>
  * </ul>
  *
@@ -321,7 +322,7 @@ class Panel extends UI5Element {
 		}
 
 		if (isEnter(event)) {
-			this._toggleOpen();
+			event.preventDefault();
 		}
 
 		if (isSpace(event)) {
@@ -334,6 +335,10 @@ class Panel extends UI5Element {
 			return;
 		}
 
+		if (isEnter(event)) {
+			this._toggleOpen();
+		}
+
 		if (isSpace(event)) {
 			this._toggleOpen();
 		}
@@ -358,13 +363,9 @@ class Panel extends UI5Element {
 
 		[].forEach.call(elements, oElement => {
 			if (this.collapsed) {
-				animations.push(slideUp({
-					element: oElement,
-				}).promise());
+				animations.push(slideUp(oElement).promise());
 			} else {
-				animations.push(slideDown({
-					element: oElement,
-				}).promise());
+				animations.push(slideDown(oElement).promise());
 			}
 		});
 
@@ -421,7 +422,11 @@ class Panel extends UI5Element {
 	}
 
 	get ariaLabelledbyReference() {
-		return (this.nonFocusableButton && this.headerText) ? `${this._id}-header-title` : undefined;
+		return (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;
+	}
+
+	get fixedPanelAriaLabelledbyReference() {
+		return this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;
 	}
 
 	get header() {
@@ -436,10 +441,22 @@ class Panel extends UI5Element {
 		return (this.header.length || this.fixed) ? "-1" : "0";
 	}
 
+	get headingWrapperAriaLevel() {
+		return !this._hasHeader ? this.headerAriaLevel : undefined;
+	}
+
+	get headingWrapperRole() {
+		return !this._hasHeader ? "heading" : undefined;
+	}
+
 	get nonFixedInternalHeader() {
 		return !this._hasHeader && !this.fixed;
 	}
 
+	get hasHeaderOrHeaderText() {
+		return this._hasHeader || this.headerText;
+	}
+
 	get nonFocusableButton() {
 		return !this.header.length;
 	}

package/dist/Popover.js

@@ -1,5 +1,6 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
+import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import Popup from "./Popup.js";
@@ -47,7 +48,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverPlacementType}
+		 * @type {sap.ui.webcomponents.main.types.PopoverPlacementType}
 		 * @defaultvalue "Right"
 		 * @public
 		 */
@@ -67,7 +68,7 @@ const metadata = {
 		 * <li><code>Stretch</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverHorizontalAlign}
+		 * @type {sap.ui.webcomponents.main.types.PopoverHorizontalAlign}
 		 * @defaultvalue "Center"
 		 * @public
 		 */
@@ -87,7 +88,7 @@ const metadata = {
 		 * <li><code>Stretch</code></li>
 		 * </ul>
 		 *
-		 * @type {PopoverVerticalAlign}
+		 * @type {sap.ui.webcomponents.main.types.PopoverVerticalAlign}
 		 * @defaultvalue "Center"
 		 * @public
 		 */
@@ -145,14 +146,14 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the opener id of the element that the popover is shown at
+		 * Defines the ID or DOM Reference of the element that the popover is shown at
 		 * @public
-		 * @type {String}
+		 * @type {sap.ui.webcomponents.base.types.DOMReference}
 		 * @defaultvalue ""
 		 * @since 1.2.0
 		 */
 		opener: {
-			type: String,
+			type: DOMReference,
 		},
 
 		/**
@@ -277,7 +278,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Popover
- * @extends Popup
+ * @extends sap.ui.webcomponents.main.Popup
  * @tagname ui5-popover
  * @since 1.0.0-rc.6
  * @public
@@ -305,7 +306,7 @@ class Popover extends Popup {
 
 	onAfterRendering() {
 		if (!this.isOpen() && this.open) {
-			const opener = document.getElementById(this.opener);
+			const opener = this.opener instanceof HTMLElement ? this.opener : this.getRootNode().getElementById(this.opener);
 			if (!opener) {
 				console.warn("Valid opener id is required."); // eslint-disable-line
 				return;
@@ -508,10 +509,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");
 	}
@@ -782,7 +779,11 @@ class Popover extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return this._ariaLabel ? undefined : "ui5-popup-header";
+		if (!this._ariaLabel && this._displayHeader) {
+			return "ui5-popup-header";
+		}
+
+		return undefined;
 	}
 
 	get _ariaModal() { // Required by Popup.js

package/dist/Popup.js

@@ -4,8 +4,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
-import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEnter, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
@@ -23,7 +24,7 @@ import globalStyles from "./generated/themes/PopupGlobal.css.js";
  */
 const metadata = {
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 
 		/**
 		 * Defines the content of the Popup.
@@ -36,7 +37,7 @@ const metadata = {
 			propertyName: "content",
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 		/**
 		 * Defines the ID of the HTML Element, which will get the initial focus.
 		 *
@@ -114,7 +115,7 @@ const metadata = {
 		 * @type {string}
 		 * @private
 		 */
-		 mediaRange: {
+		mediaRange: {
 			type: String,
 		},
 
@@ -129,7 +130,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 
 		/**
 		 * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. <b>This event does not bubble.</b>
@@ -322,7 +323,11 @@ class Popup extends UI5Element {
 	}
 
 	_onkeydown(e) {
-		if (e.target === this._root && isTabPrevious(e)) {
+		const isTabOutAttempt = e.target === this._root && isTabPrevious(e);
+		// if the popup is closed, focus is already moved, so Enter keydown may result in click on the newly focused element
+		const isEnterOnClosedPopupChild = isEnter(e) && !this.isOpen();
+
+		if (isTabOutAttempt || isEnterOnClosedPopupChild) {
 			e.preventDefault();
 		}
 	}
@@ -446,6 +451,7 @@ class Popup extends UI5Element {
 
 		this._zIndex = getNextZIndex();
 		this.style.zIndex = this._zIndex;
+
 		this._focusedElementBeforeOpen = getFocusedElement();
 
 		this._show();
@@ -591,6 +597,14 @@ class Popup extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get _role() {
+		return "dialog";
+	}
+
+	get contentDOM() {
+		return this.shadowRoot.querySelector(".ui5-popup-content");
+	}
+
 	get styles() {
 		return {
 			root: {},
@@ -605,6 +619,7 @@ class Popup extends UI5Element {
 		return {
 			root: {
 				"ui5-popup-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
 			},
 			content: {
 				"ui5-popup-content": true,

package/dist/ProgressIndicator.js

@@ -48,7 +48,7 @@ const metadata = {
 		 *
 		 * <b>Note:</b>
 		 * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @public
 		 */
@@ -83,7 +83,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -117,7 +117,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ProgressIndicator
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-progress-indicator
  * @public
  * @since 1.0.0-rc.8

package/dist/RadioButton.js

@@ -39,7 +39,6 @@ let activeRadio = null;
  */
 const metadata = {
 	tag: "ui5-radio-button",
-	altTag: "ui5-radiobutton",
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 
@@ -70,6 +69,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the component is required.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.9.0
+		 */
+		required: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines whether the component is checked or not.
 		 * <br><br>
@@ -79,6 +90,8 @@ const metadata = {
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -109,7 +122,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -172,7 +185,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -182,12 +195,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.16
+		 * @public
+		 * @since 1.6.0
 		 */
 		accessibleName: {
 			type: String,
@@ -323,12 +336,20 @@ class RadioButton extends UI5Element {
 		this._enableFormSupport();
 	}
 
-	syncGroup() {
+	onExitDOM() {
+		this.syncGroup(true);
+	}
+
+	syncGroup(forceRemove) {
 		const oldGroup = this._name;
 		const currentGroup = this.name;
 		const oldChecked = this._checked;
 		const currentChecked = this.checked;
 
+		if (forceRemove) {
+			RadioButtonGroup.removeFromGroup(this, oldGroup);
+		}
+
 		if (currentGroup !== oldGroup) {
 			if (oldGroup) {
 				// remove the control from the previous group
@@ -355,8 +376,9 @@ class RadioButton extends UI5Element {
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-				nativeInput.disabled = element.disabled || !element.checked;
-				nativeInput.value = element.checked ? element.value : "";
+				nativeInput.value = element.value;
+				nativeInput.type = "radio";
+				nativeInput.checked = element.checked;
 			});
 		} else if (this.value) {
 			console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
@@ -400,11 +422,13 @@ class RadioButton extends UI5Element {
 			return this.toggle();
 		}
 
-		if (isDown(event) || isRight(event)) {
+		const isRTL = this.effectiveDir === "rtl";
+
+		if (isDown(event) || (!isRTL && isRight(event)) || (isRTL && isLeft(event))) {
 			this._handleDown(event);
 		}
 
-		if (isUp(event) || isLeft(event)) {
+		if (isUp(event) || (!isRTL && isLeft(event)) || (isRTL && isRight(event))) {
 			this._handleUp(event);
 		}
 	}
@@ -467,10 +491,6 @@ class RadioButton extends UI5Element {
 		};
 	}
 
-	get ariaReadonly() {
-		return this.readonly ? "true" : undefined;
-	}
-
 	get ariaDisabled() {
 		return this.disabled ? "true" : undefined;
 	}