@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ec448881d

package/dist/Interfaces.js

@@ -0,0 +1,202 @@
+/**
+ * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as <code>ui5-avatar-group</code>
+ *
+ * @name sap.ui.webcomponents.main.IAvatar
+ * @interface
+ * @public
+ */
+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
+ *
+ * @name sap.ui.webcomponents.main.IButton
+ * @interface
+ * @public
+ */
+const IButton = "sap.ui.webcomponents.main.IButton";
+
+/**
+ * Interface for components that may be used as dates inside <code>ui5-calendar</code>
+ *
+ * @name sap.ui.webcomponents.main.ICalendarDate
+ * @interface
+ * @public
+ */
+const ICalendarDate = "sap.ui.webcomponents.main.ICalendarDate";
+
+/**
+ * Interface for components that may be slotted inside a <code>ui5-combobox</code>
+ *
+ * @name sap.ui.webcomponents.main.IComboBoxItem
+ * @interface
+ * @public
+ */
+const IComboBoxItem = "sap.ui.webcomponents.main.IComboBoxItem";
+
+/**
+ * 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
+ * @public
+ */
+const IColorPaletteItem = "sap.ui.webcomponents.main.IColorPaletteItem";
+
+/**
+ * Interface for components that represent an icon, usable in numerous higher-order components
+ *
+ * @name sap.ui.webcomponents.main.IIcon
+ * @interface
+ * @public
+ */
+const IIcon = "sap.ui.webcomponents.main.IIcon";
+
+/**
+ * Interface for components that represent an input, usable in numerous higher-order components
+ *
+ * @name sap.ui.webcomponents.main.IInput
+ * @interface
+ * @public
+ */
+const IInput = "sap.ui.webcomponents.main.IInput";
+
+/**
+ * Interface for components that represent a suggestion item, usable in <code>ui5-input</code>
+ *
+ * @name sap.ui.webcomponents.main.IInputSuggestionItem
+ * @interface
+ * @public
+ */
+const IInputSuggestionItem = "sap.ui.webcomponents.main.IInputSuggestionItem";
+
+/**
+ * Interface for components that may be slotted inside a <code>ui5-list</code> as items
+ *
+ * @name sap.ui.webcomponents.main.IListItem
+ * @interface
+ * @public
+ */
+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
+ *
+ * @name sap.ui.webcomponents.main.IMultiComboBoxItem
+ * @interface
+ * @public
+ */
+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
+ *
+ * @name sap.ui.webcomponents.main.ISelectOption
+ * @interface
+ * @public
+ */
+const ISelectOption = "sap.ui.webcomponents.main.ISelectOption";
+
+/**
+ * Interface for components that may be slotted inside <code>ui5-tabcontainer</code>
+ *
+ * @name sap.ui.webcomponents.main.ITab
+ * @interface
+ * @public
+ */
+const ITab = "sap.ui.webcomponents.main.ITab";
+
+/**
+ * Interface for components that may be slotted inside a <code>ui5-table</code> as rows
+ *
+ * @name sap.ui.webcomponents.main.ITableRow
+ * @interface
+ * @public
+ */
+const ITableRow = "sap.ui.webcomponents.main.ITableRow";
+
+/**
+ * Interface for components that may be slotted inside a <code>ui5-table</code> as columns
+ *
+ * @name sap.ui.webcomponents.main.ITableColumn
+ * @interface
+ * @public
+ */
+const ITableColumn = "sap.ui.webcomponents.main.ITableColumn";
+
+/**
+ * Interface for components that may be slotted inside a <code>ui5-table-row</code> as cells
+ *
+ * @name sap.ui.webcomponents.main.ITableCell
+ * @interface
+ * @public
+ */
+const ITableCell = "sap.ui.webcomponents.main.ITableCell";
+
+/**
+ * Interface for components that represent a token and are usable in components such as <code>ui5-multi-input</code>
+ *
+ * @name sap.ui.webcomponents.main.IToken
+ * @interface
+ * @public
+ */
+const IToken = "sap.ui.webcomponents.main.IToken";
+
+/**
+ * Interface for tree items for the purpose of <code>ui5-tree</code>
+ *
+ * @name sap.ui.webcomponents.main.ITreeItem
+ * @interface
+ * @public
+ */
+const ITreeItem = "sap.ui.webcomponents.main.ITreeItem";
+
+export {
+	IAvatar,
+	IBreadcrumbsItem,
+	IButton,
+	ICalendarDate,
+	IColorPaletteItem,
+	IComboBoxItem,
+	IIcon,
+	IInput,
+	IInputSuggestionItem,
+	IListItem,
+	IMenuItem,
+	IMultiComboBoxItem,
+	ISegmentedButtonItem,
+	ISelectOption,
+	ITab,
+	ITableCell,
+	ITableColumn,
+	ITableRow,
+	IToken,
+	ITreeItem,
+};

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,8 +75,8 @@ const metadata = {
 	},
 	slots: /** @lends sap.ui.webcomponents.main.Label.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-label</code>.
-		 * <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * 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[]}
 		 * @slot
@@ -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,9 +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";
@@ -22,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
@@ -35,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.
 		 *
@@ -48,15 +49,20 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the <code>ui5-link</code> target.
+		 * Defines the component target.
 		 * <br><br>
 		 * <b>Notes:</b>
+		 *
 		 * <ul>
-		 * <li>Available options are the standard values: <code>_self</code>, <code>_top</code>,
-		 * <code>_blank</code>, <code>_parent</code>, and <code>_search</code>.</li>
-		 * <li>This property must only be used when the <code>href</code> property is set.</li>
+		 * <li><code>_self</code></li>
+		 * <li><code>_top</code></li>
+		 * <li><code>_blank</code></li>
+		 * <li><code>_parent</code></li>
+		 * <li><code>_search</code></li>
 		 * </ul>
 		 *
+		 * <b>This property must only be used when the <code>href</code> property is set.</b>
+		 *
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -66,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>.
 		 *
@@ -80,53 +86,109 @@ 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>.
-		 * <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * 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[]}
 		 * @slot
@@ -139,11 +201,12 @@ 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
 		 * @public
+		 * @native
 		 */
 		click: {},
 	},
@@ -168,14 +231,14 @@ const metadata = {
  * <code>Subtle</code> or the more important ones as <code>Emphasized</code>,
  * by using the <code>design</code> property.
  * <br><br>
- * If the <code>href</code> property is set, the link behaves as the basic HTML
- * anchor tag (<code><a></code>) and opens the specified URL in the given target frame (<code>target</code> property).
+ * If the <code>href</code> property is set, the link behaves as the HTML
+ * 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>
@@ -193,7 +256,6 @@ class Link extends UI5Element {
 	constructor() {
 		super();
 		this._dummyAnchor = document.createElement("a");
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -213,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() {
@@ -231,13 +293,12 @@ class Link extends UI5Element {
 	}
 
 	get tabIndex() {
+		if (this._tabIndex) {
+			return this._tabIndex;
+		}
 		return (this.disabled || !this.textContent.length) ? "-1" : "0";
 	}
 
-	get ariaDisabled() {
-		return this.disabled ? "true" : undefined;
-	}
-
 	get ariaLabelText() {
 		return getEffectiveAriaLabelText(this);
 	}
@@ -254,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) {
@@ -271,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)) {
+			event.preventDefault();
+			const executeEvent = this.fireEvent("click", null, true);
+
+			if (executeEvent) {
+				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);
+		}
 	}
 }