@ui5/webcomponents 0.0.0-6ef02a35f → 0.0.0-7e7d9ea6f

package/dist/Interfaces.js

@@ -44,7 +44,7 @@ const ICalendarDate = "sap.ui.webcomponents.main.ICalendarDate";
 const IComboBoxItem = "sap.ui.webcomponents.main.IComboBoxItem";
 
 /**
- * Interface for components that may be used inside a <code>ui5-color-palette</code>
+ * Interface for components that may be used inside a <code>ui5-color-palette</code> or <code>ui5-color-palette-popover</code>
  *
  * @name sap.ui.webcomponents.main.IColorPaletteItem
  * @interface
@@ -88,6 +88,15 @@ const IInputSuggestionItem = "sap.ui.webcomponents.main.IInputSuggestionItem";
  */
 const IListItem = "sap.ui.webcomponents.main.IListItem";
 
+/**
+ * Interface for components that may be slotted inside <code>ui5-menu</code> as items
+ *
+ * @name sap.ui.webcomponents.main.IMenuItem
+ * @interface
+ * @public
+ */
+const IMenuItem = "sap.ui.webcomponents.main.IMenuItem";
+
 /**
  * Interface for components that may be slotted inside a <code>ui5-multi-combobox</code> as items
  *
@@ -97,6 +106,15 @@ const IListItem = "sap.ui.webcomponents.main.IListItem";
  */
 const IMultiComboBoxItem = "sap.ui.webcomponents.main.IMultiComboBoxItem";
 
+/**
+ * Interface for components that may be slotted inside <code>ui5-segmented-button</code> as items
+ *
+ * @name sap.ui.webcomponents.main.ISegmentedButtonItem
+ * @interface
+ * @public
+ */
+const ISegmentedButtonItem = "sap.ui.webcomponents.main.ISegmentedButtonItem";
+
 /**
  * Interface for components that may be slotted inside <code>ui5-select</code> as options
  *
@@ -171,7 +189,9 @@ export {
 	IInput,
 	IInputSuggestionItem,
 	IListItem,
+	IMenuItem,
 	IMultiComboBoxItem,
+	ISegmentedButtonItem,
 	ISelectOption,
 	ITab,
 	ITableCell,

package/dist/Label.js

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import findNodeOwner from "@ui5/webcomponents-base/dist/util/findNodeOwner.js";
 import { isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import WrappingType from "./types/WrappingType.js";
 
@@ -47,7 +48,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether semi-colon is added to the component text.
+		 * Defines whether colon is added to the component text.
 		 * <br><br>
 		 * <b>Note:</b> Usually used in forms.
 		 * @type {boolean}
@@ -140,7 +141,12 @@ class Label extends UI5Element {
 	}
 
 	_onclick() {
-		const elementToFocus = document.getElementById(this.for);
+		if (!this.for) {
+			return;
+		}
+
+		const ownerNode = findNodeOwner(this);
+		const elementToFocus = ownerNode.querySelector(`#${this.for}`);
 		if (elementToFocus) {
 			elementToFocus.focus();
 		}

package/dist/Link.js

@@ -1,8 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getAriaLabelledByTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import LinkDesign from "./types/LinkDesign.js";
 import WrappingType from "./types/WrappingType.js";
 
@@ -20,12 +20,12 @@ import linkCss from "./generated/themes/Link.css.js";
 const metadata = {
 	tag: "ui5-link",
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.Link.prototype */  {
+	properties: /** @lends sap.ui.webcomponents.main.Link.prototype */  {
 
 		/**
 		 * Defines whether the component is disabled.
 		 * <br><br>
-		 * <b>Note:</b> When disabled, the component cannot be triggered by the user.
+		 * <b>Note:</b> When disabled, the click event cannot be triggered by the user.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -103,33 +103,31 @@ const metadata = {
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the input
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
-		 * @since 1.0.0-rc.15
+		 * @since 1.2.0
 		 */
-		accessibleNameRef: {
+		accessibleName: {
 			type: String,
-			defaultValue: "",
 		},
 
 		/**
-		 * Defines the aria-haspopup value of the component.
+		 * Receives id(or many ids) of the elements that label the input
 		 *
-		 * @type String
-		 * @defaultvalue undefined
-		 * @private
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
 		 * @since 1.0.0-rc.15
 		 */
-		 ariaHaspopup: {
+		accessibleNameRef: {
 			type: String,
-			defaultValue: undefined,
 		},
 
 		/**
-		 * Defines the accessibility role of the component.
+		 * Defines the ARIA role of the component.
 		 * @defaultvalue ""
 		 * @private
 		 * @since 1.0.0-rc.15
@@ -138,6 +136,37 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * An object of strings that defines several additional accessibility attribute values
+		 * for customization depending on the use case.
+		 *
+		 * It supports the following fields:
+		 *
+		 * <ul>
+		 * 		<li><code>expanded</code>: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
+		 *			<ul>
+		 *				<li><code>true</code></li>
+		 *				<li><code>false</code></li>
+		 *			</ul>
+		 * 		</li>
+		 * 		<li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values:
+		 * 			<ul>
+		 *				<li><code>Dialog</code></li>
+		 *				<li><code>Grid</code></li>
+		 *				<li><code>ListBox</code></li>
+		 *				<li><code>Menu</code></li>
+		 *				<li><code>Tree</code></li>
+		 * 			</ul>
+		 * 		</li>
+		 * </ul>
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibilityAttributes: {
+			type: Object,
+		},
+
 		_rel: {
 			type: String,
 			noAttribute: true,
@@ -177,9 +206,20 @@ const metadata = {
 		 *
 		 * @event
 		 * @public
-		 * @native
+		 * @allowPreventDefault
+		 * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+		 * @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+		 * @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+		 * @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
 		 */
-		click: {},
+		click: {
+			detail: {
+				altKey: { type: Boolean	},
+				ctrlKey: { type: Boolean },
+				metaKey: { type: Boolean },
+				shiftKey: { type: Boolean },
+			},
+		},
 	},
 };
 
@@ -227,7 +267,6 @@ class Link extends UI5Element {
 	constructor() {
 		super();
 		this._dummyAnchor = document.createElement("a");
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -247,11 +286,11 @@ class Link extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		const needsNoReferrer = this.target === "_blank"
+		const needsNoReferrer = this.target !== "_self"
 			&& this.href
 			&& this._isCrossOrigin();
 
-		this._rel = needsNoReferrer ? "noreferrer" : undefined;
+		this._rel = needsNoReferrer ? "noreferrer noopener" : undefined;
 	}
 
 	_isCrossOrigin() {
@@ -272,7 +311,7 @@ class Link extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return getAriaLabelledByTexts(this);
+		return getEffectiveAriaLabelText(this);
 	}
 
 	get hasLinkType() {
@@ -287,7 +326,7 @@ class Link extends UI5Element {
 	}
 
 	get linkTypeText() {
-		return this.i18nBundle.getText(Link.typeTextMappings()[this.design]);
+		return Link.i18nBundle.getText(Link.typeTextMappings()[this.design]);
 	}
 
 	get parsedRef() {
@@ -299,11 +338,29 @@ class Link extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Link.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	_onclick(event) {
+		const {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		} = event;
+
 		event.isMarked = "link";
+
+		const executeEvent = this.fireEvent("click", {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		}, true);
+
+		if (!executeEvent) {
+			event.preventDefault();
+		}
 	}
 
 	_onfocusin(event) {
@@ -317,12 +374,7 @@ class Link extends UI5Element {
 
 	_onkeydown(event) {
 		if (isEnter(event)) {
-			const executeEvent = this.fireEvent("click", null, true);
-
-			if (executeEvent) {
-				event.preventDefault();
-				this.href && window.open(this.href, this.target);
-			}
+			this._onclick(event);
 		} else if (isSpace(event)) {
 			event.preventDefault();
 		}
@@ -336,11 +388,12 @@ class Link extends UI5Element {
 			return;
 		}
 
-		event.preventDefault();
+		this._onclick(event);
+
+		if (this.href && !event.defaultPrevented) {
+			const customEvent = new MouseEvent("click");
 
-		const executeEvent = this.fireEvent("click", null, true);
-		if (executeEvent) {
-			this.href && window.open(this.href, this.target);
+			this.getDomRef().dispatchEvent(customEvent);
 		}
 	}
 }