@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/dist/Interfaces.js

@@ -7,6 +7,15 @@
  */
 const IAvatar = "sap.ui.webcomponents.main.IAvatar";
 
+/**
+ * Interface for components that may be slotted inside <code>ui5-breadcrumbs</code> as options
+ *
+ * @name sap.ui.webcomponents.main.IBreadcrumbsItem
+ * @interface
+ * @public
+ */
+const IBreadcrumbsItem = "sap.ui.webcomponents.main.IBreadcrumbsItem";
+
 /**
  * Interface for components that may be used as a button inside numerous higher-order components
  *
@@ -35,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 +97,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
  *
@@ -153,6 +171,7 @@ const ITreeItem = "sap.ui.webcomponents.main.ITreeItem";
 
 export {
 	IAvatar,
+	IBreadcrumbsItem,
 	IButton,
 	ICalendarDate,
 	IColorPaletteItem,
@@ -162,6 +181,7 @@ export {
 	IInputSuggestionItem,
 	IListItem,
 	IMultiComboBoxItem,
+	ISegmentedButtonItem,
 	ISelectOption,
 	ITab,
 	ITableCell,

package/dist/Label.js

@@ -1,5 +1,8 @@
 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";
 
 // Template
 import LabelTemplate from "./generated/templates/LabelTemplate.lit.js";
@@ -15,7 +18,7 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.main.Label.prototype */  {
 
 		/**
-		 * Defines whether an asterisk character is added to the <code>ui5-label</code> text.
+		 * Defines whether an asterisk character is added to the component text.
 		 * <br><br>
 		 * <b>Note:</b> Usually indicates that user input is required.
 		 *
@@ -28,20 +31,24 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-label</code> should wrap, when there is not enough space.
-		 * <br><br>
-		 * <b>Note:</b> By default the text would truncate.
+		 * Defines how the text of a component will be displayed when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
 		 */
-		wrap: {
-			type: Boolean,
+		 wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		/**
-		 * Defines whether semi-colon is added to the <code>ui5-label</code> text.
+		 * Defines whether colon is added to the component text.
 		 * <br><br>
 		 * <b>Note:</b> Usually used in forms.
 		 * @type {boolean}
@@ -68,7 +75,7 @@ const metadata = {
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Label.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-label</code>.
+		 * Defines the text of the component.
 		 * <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[]}
@@ -92,7 +99,7 @@ const metadata = {
  * It informs the user about what data is displayed or expected in the value holder.
  * <br><br>
  * The <code>ui5-label</code> appearance can be influenced by properties,
- * such as <code>required</code> and <code>wrap</code>.
+ * such as <code>required</code> and <code>wrappingType</code>.
  * The appearance of the Label can be configured in a limited way by using the design property.
  * For a broader choice of designs, you can use custom styles.
  *
@@ -124,8 +131,22 @@ class Label extends UI5Element {
 		return labelCss;
 	}
 
+	get classes() {
+		return {
+			textWrapper: {
+				"ui5-label-text-wrapper": true,
+				"ui5-label-text-wrapper-safari": isSafari(),
+			},
+		};
+	}
+
 	_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,10 @@
 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 { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import LinkDesign from "./types/LinkDesign.js";
+import WrappingType from "./types/WrappingType.js";
 
 // Template
 import LinkRederer from "./generated/templates/LinkTemplate.lit.js";
@@ -21,9 +23,9 @@ const metadata = {
 	properties: /** @lends  sap.ui.webcomponents.main.Link.prototype */  {
 
 		/**
-		 * Defines whether the <code>ui5-link</code> is disabled.
+		 * Defines whether the component is disabled.
 		 * <br><br>
-		 * <b>Note:</b> When disabled, the <code>ui5-link</code> cannot be triggered by the user.
+		 * <b>Note:</b> When disabled, the click event cannot be triggered by the user.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -34,7 +36,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-link</code> href.
+		 * Defines the component href.
 		 * <br><br>
 		 * <b>Note:</b> Standard hyperlink behavior is supported.
 		 *
@@ -47,7 +49,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-link</code> target.
+		 * Defines the component target.
 		 * <br><br>
 		 * <b>Notes:</b>
 		 *
@@ -70,7 +72,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-link</code> design.
+		 * Defines the component design.
 		 * <br><br>
 		 * <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>.
 		 *
@@ -84,52 +86,108 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-link</code> text should wrap
-		 * when there is no sufficient space.
-		 * <br><br>
-		 * <b>Note:</b> The text is truncated by default.
+		 * Defines how the text of a component will be displayed when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
 		 */
-		wrap: {
-			type: Boolean,
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		/**
-		 * Defines the aria-label attribute for the link.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
-		 * @since 1.0.0-rc.10
-		 * @private
+		 * @type {string}
 		 * @defaultvalue ""
+		 * @public
+		 * @since 1.2.0
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 		},
 
 		/**
 		 * Receives id(or many ids) of the elements that label the input
 		 *
-		 * @type {String}
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		accessibleNameRef: {
+			type: String,
+		},
+
+		/**
+		 * Defines the ARIA role of the component.
 		 * @defaultvalue ""
 		 * @private
-		 * @since 1.0.0-rc.10
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		 accessibleRole: {
 			type: String,
-			defaultValue: "",
+		},
+
+		/**
+		 * 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,
 		},
+
+		_tabIndex: {
+			type: String,
+			noAttribute: true,
+		},
+
+		/**
+		 * Indicates if the element is on focus.
+		 * @private
+		 */
+		 focused: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Link.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-link</code>.
+		 * Defines the text of the component.
 		 * <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[]}
@@ -143,7 +201,7 @@ const metadata = {
 	events: /** @lends sap.ui.webcomponents.main.Link.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-link</code> is triggered either with a mouse/tap
+		 * Fired when the component is triggered either with a mouse/tap
 		 * or by using the Enter key.
 		 *
 		 * @event
@@ -174,13 +232,13 @@ const metadata = {
  * by using the <code>design</code> property.
  * <br><br>
  * If the <code>href</code> property is set, the link behaves as the HTML
- * anchor tag (<code>&lt;a>&lt;a/></code>) and opens the specified URL in the given target frame (<code>target</code> property).
+ * anchor tag (<code>&lt;a&gt;&lt;a&#47;&gt;</code>) and opens the specified URL in the given target frame (<code>target</code> property).
  * To specify where the linked content is opened, you can use the <code>target</code> property.
  *
  * <h3>Responsive behavior</h3>
  *
  * If there is not enough space, the text of the <code>ui5-link</code> becomes truncated.
- * If the <code>wrap</code> property is set to <code>true</code>, the text is displayed
+ * If the <code>wrappingType</code> property is set to <code>"Normal"</code>, the text is displayed
  * on several lines instead of being truncated.
  *
  * <h3>ES6 Module Import</h3>
@@ -198,7 +256,6 @@ class Link extends UI5Element {
 	constructor() {
 		super();
 		this._dummyAnchor = document.createElement("a");
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -218,11 +275,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() {
@@ -236,6 +293,9 @@ class Link extends UI5Element {
 	}
 
 	get tabIndex() {
+		if (this._tabIndex) {
+			return this._tabIndex;
+		}
 		return (this.disabled || !this.textContent.length) ? "-1" : "0";
 	}
 
@@ -255,15 +315,19 @@ class Link extends UI5Element {
 	}
 
 	get linkTypeText() {
-		return this.i18nBundle.getText(Link.typeTextMappings()[this.design]);
+		return Link.i18nBundle.getText(Link.typeTextMappings()[this.design]);
 	}
 
 	get parsedRef() {
 		return (this.href && this.href.length > 0) ? this.href : undefined;
 	}
 
+	get effectiveAccRole() {
+		return this.accessibleRole || "link";
+	}
+
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Link.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	_onclick(event) {
@@ -272,14 +336,40 @@ class Link extends UI5Element {
 
 	_onfocusin(event) {
 		event.isMarked = "link";
+		this.focused = true;
+	}
+
+	_onfocusout(event) {
+		this.focused = false;
 	}
 
 	_onkeydown(event) {
+		if (isEnter(event)) {
+			const executeEvent = this.fireEvent("click", null, true);
+
+			if (executeEvent) {
+				event.preventDefault();
+				this.href && window.open(this.href, this.target);
+			}
+		} else if (isSpace(event)) {
+			event.preventDefault();
+		}
+
 		event.isMarked = "link";
 	}
 
 	_onkeyup(event) {
-		event.isMarked = "link";
+		if (!isSpace(event)) {
+			event.isMarked = "link";
+			return;
+		}
+
+		event.preventDefault();
+
+		const executeEvent = this.fireEvent("click", null, true);
+		if (executeEvent) {
+			this.href && window.open(this.href, this.target);
+		}
 	}
 }