@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/src/Interfaces.js

@@ -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
  *
@@ -180,6 +189,7 @@ export {
 	IInput,
 	IInputSuggestionItem,
 	IListItem,
+	IMenuItem,
 	IMultiComboBoxItem,
 	ISegmentedButtonItem,
 	ISelectOption,

package/src/Label.hbs

@@ -1,13 +1,11 @@
 <label
 		class="ui5-label-root"
-		dir="{{effectiveDir}}"
 		@click={{_onclick}}
-		for="{{for}}"
 	>
 	<span class="{{classes.textWrapper}}">
 		<bdi id="{{_id}}-bdi">
 			<slot></slot>
 		</bdi>
 	</span>
-	<span class="ui5-label-required-colon"></span>
+	<span aria-hidden="true" class="ui5-label-required-colon"></span>
 </label>

package/src/Label.js

@@ -1,6 +1,5 @@
 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";
 
@@ -20,7 +19,9 @@ const metadata = {
 		/**
 		 * Defines whether an asterisk character is added to the component text.
 		 * <br><br>
-		 * <b>Note:</b> Usually indicates that user input is required.
+		 * <b>Note:</b> Usually indicates that user input (bound with the <code>for</code> property) is required.
+		 * In that case the <code>required</> property of
+		 * the corresponding input should also be set.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -38,7 +39,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
 		 */
@@ -145,8 +146,7 @@ class Label extends UI5Element {
 			return;
 		}
 
-		const ownerNode = findNodeOwner(this);
-		const elementToFocus = ownerNode.querySelector(`#${this.for}`);
+		const elementToFocus = this.getRootNode().querySelector(`#${this.for}`);
 		if (elementToFocus) {
 			elementToFocus.focus();
 		}

package/src/Label2.ts

@@ -0,0 +1,161 @@
+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";
+
+// Styles
+import labelCss from "./generated/themes/Label.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-label",
+	properties: /** @lends sap.ui.webcomponents.main.Label.prototype */  {
+
+		/**
+		 * Defines whether an asterisk character is added to the component text.
+		 * <br><br>
+		 * <b>Note:</b> Usually indicates that user input (bound with the <code>for</code> property) is required.
+		 * In that case the <code>required</> property of
+		 * the corresponding input should also be set.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		required: {
+			type: Boolean,
+		},
+
+		/**
+		 * 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 {sap.ui.webcomponents.main.types.WrappingType}
+		 * @defaultvalue "None"
+		 * @public
+		 */
+		 wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
+		},
+
+		/**
+		 * Defines whether colon is added to the component text.
+		 * <br><br>
+		 * <b>Note:</b> Usually used in forms.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+
+		showColon: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the labeled input by providing its ID.
+		 * <br><br>
+		 * <b>Note:</b> Can be used with both <code>ui5-input</code> and native input.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		"for": {
+			type: String,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Label.prototype */ {
+		/**
+		 * 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
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-label</code> is a component used to represent a label,
+ * providing valuable information to the user.
+ * Usually it is placed next to a value holder, such as a text field.
+ * 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>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.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Label";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Label
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-label
+ * @public
+ */
+class Label extends UI5Element {
+	for?: string;
+
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return LabelTemplate;
+	}
+
+	static get styles() {
+		return labelCss;
+	}
+
+	get classes() {
+		return {
+			textWrapper: {
+				"ui5-label-text-wrapper": true,
+				"ui5-label-text-wrapper-safari": isSafari(),
+			},
+		};
+	}
+
+	_onclick() {
+		if (!this.for) {
+			return;
+		}
+
+		const elementToFocus = (this.getRootNode() as HTMLElement).querySelector(`#${this.for}`) as HTMLElement;
+		if (elementToFocus) {
+			elementToFocus.focus();
+		}
+	}
+}
+
+Label.define();
+
+export default Label;

package/src/Link.js

@@ -20,7 +20,7 @@ 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.
@@ -76,7 +76,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>.
 		 *
-		 * @type {LinkDesign}
+		 * @type {sap.ui.webcomponents.main.types.LinkDesign}
 		 * @defaultvalue "Default"
 		 * @public
 		 */
@@ -93,7 +93,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
 		 */
@@ -103,7 +103,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -128,12 +128,17 @@ const metadata = {
 
 		/**
 		 * Defines the ARIA role of the component.
-		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.15
+		 *
+		 * <b>Note:</b> Use the "button" role in cases when navigation is not expected to occur and the href property is not defined.
+		 *
+		 * @type {string}
+		 * @defaultvalue "link"
+		 * @public
+		 * @since 1.9.0
 		 */
-		 accessibleRole: {
+		accessibleRole: {
 			type: String,
+			defaultValue: "link",
 		},
 
 		/**
@@ -206,9 +211,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 },
+			},
+		},
 	},
 };
 
@@ -323,7 +339,7 @@ class Link extends UI5Element {
 	}
 
 	get effectiveAccRole() {
-		return this.accessibleRole || "link";
+		return this.accessibleRole.toLowerCase();
 	}
 
 	static async onDefine() {
@@ -331,7 +347,26 @@ class Link extends UI5Element {
 	}
 
 	_onclick(event) {
+		const {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		} = event;
+
+		event.stopImmediatePropagation();
 		event.isMarked = "link";
+
+		const executeEvent = this.fireEvent("click", {
+			altKey,
+			ctrlKey,
+			metaKey,
+			shiftKey,
+		}, true);
+
+		if (!executeEvent) {
+			event.preventDefault();
+		}
 	}
 
 	_onfocusin(event) {
@@ -344,13 +379,8 @@ 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);
-			}
+		if (isEnter(event) && !this.href) {
+			this._onclick(event);
 		} else if (isSpace(event)) {
 			event.preventDefault();
 		}
@@ -364,11 +394,13 @@ 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);
+			customEvent.stopImmediatePropagation();
+			this.getDomRef().dispatchEvent(customEvent);
 		}
 	}
 }

package/src/List.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-list-root"
+	class="{{classes.root}}"
 	@focusin="{{_onfocusin}}"
 	@keydown="{{_onkeydown}}"
 >
@@ -15,7 +15,7 @@
 		{{/if}}
 
 		{{#if hasData}}
-			<div id="{{_id}}-before" tabindex="0" class="ui5-list-focusarea"></div>
+			<div id="{{_id}}-before" tabindex="0" role="none" class="ui5-list-focusarea"></div>
 		{{/if}}
 
 		<span id="{{_id}}-modeLabel" class="ui5-hidden-text">{{ariaLabelModeText}}</span>
@@ -25,6 +25,7 @@
 			role="{{accessibleRole}}"
 			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
+			aria-roledescription="{{accessibleRoleDescription}}"
 		>
 			<slot></slot>
 
@@ -48,7 +49,7 @@
 		{{/if}}
 
 		{{#if hasData}}
-			<div id="{{_id}}-after" tabindex="0" class="ui5-list-focusarea"></div>
+			<div id="{{_id}}-after" tabindex="0" role="none" class="ui5-list-focusarea"></div>
 		{{/if}}
 
 		<span tabindex="-1" aria-hidden="true" class="ui5-list-end-marker"></span>

package/src/List.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { getLastTabbableElement } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import {
@@ -14,6 +13,7 @@ import {
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
@@ -27,6 +27,7 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 
 // Styles
 import listCss from "./generated/themes/List.css.js";
+import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 
 // Texts
 import {
@@ -76,7 +77,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
 		 * Defines the component header text.
@@ -119,7 +120,7 @@ const metadata = {
 		 * <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>SingleSelectBegin</code>,
 		 * <code>SingleSelectEnd</code>, <code>MultiSelect</code>, and <code>Delete</code>.
 		 *
-		 * @type {ListMode}
+		 * @type {sap.ui.webcomponents.main.types.ListMode}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -150,7 +151,7 @@ const metadata = {
 		 * item doesn't have a bottom separator.</li>
 		 * </ul>
 		 *
-		 * @type {ListSeparators}
+		 * @type {sap.ui.webcomponents.main.types.ListSeparators}
 		 * @defaultvalue "All"
 		 * @public
 		 */
@@ -176,7 +177,7 @@ const metadata = {
 		 *
 		 * <b>Restrictions:</b> <code>growing="Scroll"</code> is not supported for Internet Explorer,
 		 * on IE the component will fallback to <code>growing="Button"</code>.
-		 * @type {ListGrowingMode}
+		 * @type {sap.ui.webcomponents.main.types.ListGrowingMode}
 		 * @defaultvalue "None"
 		 * @since 1.0.0-rc.13
 		 * @public
@@ -201,7 +202,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -248,6 +249,19 @@ const metadata = {
 			defaultValue: "list",
 		},
 
+		/**
+		 * Defines the description for the accessible role of the component.
+		 * @protected
+		 * @type {string}
+		 * @defaultvalue undefined
+		 * @since 1.10.0
+		 */
+		 accessibleRoleDescription: {
+			type: String,
+			defaultValue: undefined,
+			noAttribute: true,
+		},
+
 		/**
 		 * Defines if the entire list is in view port.
 		 * @private
@@ -264,7 +278,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.List.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.List.prototype */ {
 
 		/**
 		 * Fired when an item is activated, unless the item's <code>type</code> property
@@ -284,7 +298,7 @@ const metadata = {
 		/**
 		 * Fired when the <code>Close</code> button of any item is clicked
 		 * <br><br>
-		 * <b>Note:</b> This event is applicable to <code>ui5-li-notification</code> items only,
+		 * <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items),
 		 * not to be confused with <code>item-delete</code>.
 		 *
 		 * @event sap.ui.webcomponents.main.List#item-close
@@ -301,7 +315,7 @@ const metadata = {
 		/**
 		 * Fired when the <code>Toggle</code> button of any item is clicked.
 		 * <br><br>
-		 * <b>Note:</b> This event is applicable to <code>ui5-li-notification-group</code> items only.
+		 * <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items).
 		 *
 		 * @event sap.ui.webcomponents.main.List#item-toggle
 		 * @param {HTMLElement} item the toggled item.
@@ -343,6 +357,7 @@ const metadata = {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				targetItem: { type: HTMLElement }, // protected, holds the event target item
 				selectionComponentPressed: { type: Boolean }, // protected, indicates if the user used the selection components to change the selection
 			},
 		},
@@ -422,7 +437,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.List
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-list
  * @appenddocs StandardListItem CustomListItem GroupHeaderListItem
  * @public
@@ -441,7 +456,7 @@ class List extends UI5Element {
 	}
 
 	static get styles() {
-		return listCss;
+		return [browserScrollbarCSS, listCss];
 	}
 
 	static async onDefine() {
@@ -597,15 +612,10 @@ class List extends UI5Element {
 	}
 
 	get growsOnScroll() {
-		return this.growing === ListGrowingMode.Scroll && !isIE();
+		return this.growing === ListGrowingMode.Scroll;
 	}
 
 	get growsWithButton() {
-		if (isIE()) {
-			// On IE fallback to "More" button, even if growing of type "Scroll" is set.
-			return this.grows;
-		}
-
 		return this.growing === ListGrowingMode.Button;
 	}
 
@@ -614,7 +624,7 @@ class List extends UI5Element {
 	}
 
 	get busyIndPosition() {
-		if (isIE() || !this.grows) {
+		if (!this.grows) {
 			return "absolute";
 		}
 
@@ -629,6 +639,15 @@ class List extends UI5Element {
 		};
 	}
 
+	get classes() {
+		return {
+			root: {
+				"ui5-list-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
+			},
+		};
+	}
+
 	initItemNavigation() {
 		this._itemNavigation = new ItemNavigation(this, {
 			skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items
@@ -697,6 +716,7 @@ class List extends UI5Element {
 				selectedItems: this.getSelectedItems(),
 				previouslySelectedItems,
 				selectionComponentPressed: event.detail.selectionComponentPressed,
+				targetItem: event.detail.item,
 				key: event.detail.key,
 			});
 		}
@@ -893,6 +913,8 @@ class List extends UI5Element {
 	onItemFocused(event) {
 		const target = event.target;
 
+		event.stopPropagation();
+
 		this._itemNavigation.setCurrentItem(target);
 		this.fireEvent("item-focused", { item: target });
 
@@ -942,7 +964,7 @@ class List extends UI5Element {
 	onForwardBefore(event) {
 		this.setPreviouslyFocusedItem(event.target);
 		this.focusBeforeElement();
-		event.stopImmediatePropagation();
+		event.stopPropagation();
 	}
 
 	onForwardAfter(event) {
@@ -954,6 +976,8 @@ class List extends UI5Element {
 			this.focusGrowingButton();
 			event.preventDefault();
 		}
+
+		event.stopPropagation();
 	}
 
 	focusBeforeElement() {

package/src/ListItem.hbs

@@ -2,7 +2,6 @@
 	part="native-li"
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
-	dir="{{effectiveDir}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keyup="{{_onkeyup}}"
@@ -18,10 +17,13 @@
 	aria-level="{{_accInfo.ariaLevel}}"
 	aria-haspopup="{{_accInfo.ariaHaspopup}}"
 	aria-posinset="{{_accInfo.posinset}}"
+	aria-roledescription="{{accessibleRoleDescription}}"
 	aria-setsize="{{_accInfo.setsize}}"
 	aria-describedby="{{_id}}-invisibleText-describedby"
-	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
+	aria-labelledby="{{_accessibleNameRef}}"
 	aria-disabled="{{ariaDisabled}}"
+	aria-selected="{{_accInfo.ariaSelected}}"
+	aria-checked="{{_accInfo.ariaChecked}}"
 >
 		{{> listItemPreContent}}
 
@@ -46,6 +48,15 @@
 			</div>
 		{{/if}}
 
+		{{#if typeNavigation}}
+			<ui5-icon name ="slim-arrow-right"></ui5-icon>
+		{{/if}}
+
+		{{#if navigated}}
+			<div class="ui5-li-navigated"></div>
+		{{/if}}
+
+
 		{{#if placeSelectionElementAfter}}
 			{{> selectionElement}}
 		{{/if}}
@@ -81,13 +92,16 @@
 				id="{{_id}}-multiSelectionElement"
 				class="ui5-li-multisel-cb"
 				?checked="{{selected}}"
-				aria-label="{{_accInfo.ariaLabel}}"
+				accessible-name="{{_accInfo.ariaLabel}}"
 				@click="{{onMultiSelectionComponentPress}}">
 		</ui5-checkbox>
 	{{/if}}
 
 	{{#if renderDeleteButton}}
 		<div class="ui5-li-deletebtn">
+			{{#if hasDeleteButtonSlot}}
+				<slot name="deleteButton"></slot>
+			{{else}}
 			<ui5-button
 				tabindex="-1"
 				data-sap-no-tab-ref
@@ -98,6 +112,7 @@
 				@click="{{onDelete}}"
 				tooltip="{{deleteText}}"
 			></ui5-button>
+			{{/if}}
 		</div>
 	{{/if}}