@ui5/webcomponents 0.0.0-6cb3eb0db → 0.0.0-701b14e36

package/src/ListItem.hbs

@@ -1,7 +1,7 @@
 <li
+	part="native-li"
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
-	dir="{{effectiveDir}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keyup="{{_onkeyup}}"
@@ -15,12 +15,12 @@
 	aria-expanded="{{_accInfo.ariaExpanded}}"
 	title="{{title}}"
 	aria-level="{{_accInfo.ariaLevel}}"
+	aria-haspopup="{{_accInfo.ariaHaspopup}}"
 	aria-posinset="{{_accInfo.posinset}}"
 	aria-setsize="{{_accInfo.setsize}}"
 	aria-describedby="{{_id}}-invisibleText-describedby"
 	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
 	aria-disabled="{{ariaDisabled}}"
-	style="list-style-type: none;"
 >
 		{{> listItemPreContent}}
 
@@ -75,6 +75,7 @@
 	{{#if modeMultiSelect}}
 		<ui5-checkbox
 				?disabled="{{isInactive}}"
+				?indeterminate={{indeterminate}}
 				tabindex="-1"
 				id="{{_id}}-multiSelectionElement"
 				class="ui5-li-multisel-cb"
@@ -94,7 +95,7 @@
 				icon="decline"
 				?disabled="{{disableDeleteButton}}"
 				@click="{{onDelete}}"
-				title="{{deleteText}}"
+				tooltip="{{deleteText}}"
 			></ui5-button>
 		</div>
 	{{/if}}

package/src/ListItem.js

@@ -1,7 +1,7 @@
 import { isSpace, isEnter, isDelete } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/edit.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemType from "./types/ListItemType.js";
 import ListMode from "./types/ListMode.js";
 import ListItemBase from "./ListItemBase.js";
@@ -77,7 +77,7 @@ const metadata = {
 		 * Used to define the role of the list item.
 		 *
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue "listitem"
 		 * @since 1.0.0-rc.9
 		 *
@@ -87,10 +87,29 @@ const metadata = {
 			defaultValue: "listitem",
 		},
 
+		/**
+		 * Used to define the role of the list item.
+		 *
+		 * @private
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.3.0
+		 *
+		 */
+		accessibleRole: {
+			type: String,
+		},
+
 		_mode: {
 			type: ListMode,
 			defaultValue: ListMode.None,
 		},
+
+		_ariaHasPopup: {
+			type: String,
+			noAttribute: true,
+		},
+
 	},
 	events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
 		/**
@@ -149,7 +168,14 @@ class ListItem extends ListItemBase {
 			}
 		};
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		const handleTouchStartEvent = event => {
+			this._onmousedown(event);
+		};
+
+		this._ontouchstart = {
+			handleEvent: handleTouchStartEvent,
+			passive: true,
+		};
 	}
 
 	onBeforeRendering(...params) {
@@ -214,10 +240,6 @@ class ListItem extends ListItemBase {
 		this.deactivate();
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	_ontouchend(event) {
 		this._onmouseup(event);
 	}
@@ -344,31 +366,30 @@ class ListItem extends ListItemBase {
 		// The text is added to aria-describedby because as part of the aria-labelledby
 		// the whole content of the item is readout when the aria-labelledby value is changed.
 		if (this.ariaSelected !== undefined) {
-			ariaSelectedText = this.ariaSelected ? this.i18nBundle.getText(LIST_ITEM_SELECTED) : this.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+			ariaSelectedText = this.ariaSelected ? ListItem.i18nBundle.getText(LIST_ITEM_SELECTED) : ListItem.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
 		}
 
 		return ariaSelectedText;
 	}
 
 	get deleteText() {
-		return this.i18nBundle.getText(DELETE);
+		return ListItem.i18nBundle.getText(DELETE);
 	}
 
 	get _accInfo() {
 		return {
-			role: this.role,
+			role: this.accessibleRole || this.role,
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
-			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
-			ariaLabelRadioButton: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
+			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
+			ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
 			ariaSelectedText: this.ariaSelectedText,
+			ariaHaspopup: this._ariaHasPopup || undefined,
 		};
 	}
 
 	static async onDefine() {
-		await Promise.all([
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
+		ListItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/ListItemBase.js

@@ -89,7 +89,7 @@ class ListItemBase extends UI5Element {
 	}
 
 	_onfocusin(event) {
-		if (event.isMarked === "button" || event.isMarked === "link") {
+		if (event.target !== this.getFocusDomRef()) {
 			return;
 		}
 
@@ -117,7 +117,9 @@ class ListItemBase extends UI5Element {
 		const target = event.target;
 
 		if (this.shouldForwardTabAfter(target)) {
-			this.fireEvent("_forward-after", { item: target });
+			if (!this.fireEvent("_forward-after", { item: target }, true)) {
+				event.preventDefault();
+			}
 		}
 	}
 

package/src/Menu.hbs

@@ -0,0 +1,100 @@
+<ui5-responsive-popover
+	id="{{_id}}-menu-rp"
+	class="ui5-menu-rp"
+	horizontal-align="Left"
+	placement-type={{placementType}}
+	vertical-align={{verticalAlign}}
+	hide-arrow
+	allow-target-overlap
+	?sub-menu={{_isSubMenu}}
+	@before-close={{_beforePopoverClose}}
+>
+{{#if isPhone}}
+	<div
+		slot="header"
+		class="ui5-menu-dialog-header"
+	>
+	{{#if isSubMenuOpened}}
+		<ui5-button
+			icon="nav-back"
+			class="ui5-menu-back-button"
+			design="Transparent"
+			aria-label="{{labelBack}}"
+			@click={{_navigateBack}}
+		>
+		</ui5-button>
+	{{/if}}
+		<div
+			class="ui5-menu-dialog-title"
+		>
+			<div>
+				{{menuHeaderTextPhone}}
+			</div>
+		</div>
+		<ui5-button
+			icon="decline"
+			design="Transparent"
+			aria-label="{{labelClose}}"
+			@click={{close}}
+		>
+		</ui5-button>
+	</div>
+{{/if}}
+	<div
+		id="{{_id}}-menu-main"
+	>
+	{{#if _currentItems.length}}
+		<ui5-list
+			id="{{_id}}-menu-list"
+			mode="None"
+			separators="None"
+			accessible-role="menu"
+			@ui5-item-click={{_itemClick}}
+		>
+		{{#each _currentItems}}
+			<ui5-li
+				.associatedItem="{{this.item}}"
+				class="ui5-menu-item"
+				id="{{../_id}}-menu-item-{{@index}}"
+				icon="{{this.item.icon}}"
+				accessible-role="menuitem"
+				._ariaHasPopup={{this.ariaHasPopup}}
+				?disabled={{this.item.disabled}}
+				?starts-section={{this.item.startsSection}}
+				?selected={{this.item.subMenuOpened}}
+				?is-phone={{../isPhone}}
+				@mouseover={{../_itemMouseOver}}
+				@mouseout={{../_itemMouseOut}}
+				@keydown={{../_itemKeyDown}}
+			>
+				{{#if this.item.hasDummyIcon}}
+					<div
+						class="ui5-menu-item-dummy-icon"
+					>
+					</div>
+				{{/if}}
+				{{this.item.text}}
+				{{#if this.item.hasChildren}}
+					<ui5-icon
+						part="icon"
+						name="slim-arrow-right"
+						class="ui5-menu-item-icon-end"
+					>
+					</ui5-icon>
+				{{else if this.item._siblingsWithChildren}}
+					<div
+						class="ui5-menu-item-no-icon-end"
+					>
+					</div>
+				{{/if}}
+			</ui5-li>
+		{{/each}}
+		</ui5-list>
+	{{/if}}
+	</div>
+</ui5-responsive-popover>
+
+<div
+	class="ui5-menu-submenus"
+>
+</div>