@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/InputPopover.hbs

@@ -1,13 +1,14 @@
 {{#if showSuggestions}}
 	<ui5-responsive-popover
-		no-arrow
+		class="{{classes.popover}}"
+		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
 		horizontal-align="Left"
 		style="{{styles.suggestionsPopover}}"
 		@ui5-after-open="{{_afterOpenPopover}}"
 		@ui5-after-close="{{_afterClosePopover}}"
-		@scroll="{{_scroll}}"
+		@ui5-scroll="{{_scroll}}"
 	>
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header">
@@ -44,7 +45,8 @@
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.suggestionPopoverHeader}}>
+			<div slot="header" ?focused={{_isValueStateFocused}} class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.suggestionPopoverHeader}}>
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
@@ -68,11 +70,13 @@
 			_disable-initial-focus
 			prevent-focus-restore
 			no-padding
-			no-arrow
+			hide-arrow
 			class="ui5-valuestatemessage-popover"
 			placement-type="Bottom"
+			horizontal-align="Left"
 		>
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		</ui5-popover>
@@ -91,15 +95,15 @@
 {{#*inline "suggestionsList"}}
 	<ui5-list separators="{{suggestionSeparators}}">
 		{{#each suggestionsTexts}}
-			{{#if group}}
+			{{#if groupItem}}
 				<ui5-li-groupheader data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-groupheader>
 			{{else}}
 				<ui5-li-suggestion-item
 					image="{{this.image}}"
 					icon="{{this.icon}}"
-					info="{{this.info}}"
+					additional-text="{{this.additionalText}}"
 					type="{{this.type}}"
-					info-state="{{this.infoState}}"
+					additional-text-state="{{this.additionalTextState}}"
 					@ui5-_item-press="{{ fnOnSuggestionItemPress }}"
 					data-ui5-key="{{key}}"
 				>

package/src/Interfaces.js

@@ -0,0 +1,192 @@
+/**
+ * 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>
+ *
+ * @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 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,
+	IMultiComboBoxItem,
+	ISegmentedButtonItem,
+	ISelectOption,
+	ITab,
+	ITableCell,
+	ITableColumn,
+	ITableRow,
+	IToken,
+	ITreeItem,
+};

package/src/Label.hbs

@@ -4,7 +4,7 @@
 		@click={{_onclick}}
 		for="{{for}}"
 	>
-	<span class="ui5-label-text-wrapper">
+	<span class="{{classes.textWrapper}}">
 		<bdi id="{{_id}}-bdi">
 			<slot></slot>
 		</bdi>

package/src/Label.js

@@ -1,5 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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 +17,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 +30,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 +74,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 +98,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,6 +130,15 @@ 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 (elementToFocus) {

package/src/Link.hbs

@@ -1,13 +1,15 @@
 <a
 	class="ui5-link-root"
-	role="link"
+	role="{{effectiveAccRole}}"
 	href="{{parsedRef}}"
 	target="{{target}}"
 	rel="{{_rel}}"
 	tabindex="{{tabIndex}}"
 	?disabled="{{disabled}}"
-	aria-disabled="{{ariaDisabled}}"
+	aria-label="{{ariaLabelText}}"
+	aria-haspopup="{{ariaHaspopup}}"
 	@focusin={{_onfocusin}}
+	@focusout={{_onfocusout}}
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>

package/src/Link.js

@@ -1,7 +1,10 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getAriaLabelledByTexts } 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";
 
 // Template
 import LinkRederer from "./generated/templates/LinkTemplate.lit.js";
@@ -20,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
@@ -33,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.
 		 *
@@ -46,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
@@ -64,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>.
 		 *
@@ -78,28 +86,80 @@ 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,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the input
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
+		/**
+		 * Defines the aria-haspopup value of the component.
+		 *
+		 * @type String
+		 * @defaultvalue undefined
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		 ariaHaspopup: {
+			type: String,
+			defaultValue: undefined,
+		},
+
+		/**
+		 * Defines the accessibility role of the component.
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		 accessibleRole: {
+			type: String,
 		},
 
 		_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
@@ -112,11 +172,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: {},
 	},
@@ -141,14 +202,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>
@@ -166,7 +227,6 @@ class Link extends UI5Element {
 	constructor() {
 		super();
 		this._dummyAnchor = document.createElement("a");
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	static get metadata() {
@@ -204,11 +264,14 @@ 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 getAriaLabelledByTexts(this);
 	}
 
 	get hasLinkType() {
@@ -223,15 +286,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) {
@@ -240,14 +307,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);
+		}
 	}
 }