@ui5/webcomponents 1.2.6 → 1.4.0

package/src/Input.js

@@ -1,7 +1,12 @@
 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 { isIE, isPhone, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+	isIE,
+	isPhone,
+	isSafari,
+	isAndroid,
+} from "@ui5/webcomponents-base/dist/Device.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import {
@@ -22,6 +27,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/not-editable.js";
 import "@ui5/webcomponents-icons/dist/error.js";
@@ -34,6 +40,7 @@ import Icon from "./Icon.js";
 // Templates
 import InputTemplate from "./generated/templates/InputTemplate.lit.js";
 import InputPopoverTemplate from "./generated/templates/InputPopoverTemplate.lit.js";
+import * as Filters from "./Filters.js";
 
 import {
 	VALUE_STATE_SUCCESS,
@@ -211,6 +218,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the value will be autcompleted to match an item
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.4.0
+		 */
+		noTypeahead: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines the HTML type of the component.
 		 * Available options are: <code>Text</code>, <code>Email</code>,
@@ -302,7 +321,8 @@ const metadata = {
 
 		/**
 		 * Sets the maximum number of characters available in the input field.
-		 *
+		 * <br><br>
+		 * <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored.
 		 * @type {Integer}
 		 * @since 1.0.0-rc.5
 		 * @public
@@ -374,6 +394,14 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Determines whether to manually show the suggestions popover
+		 * @private
+		 */
+		_forceOpen: {
+			type: Boolean,
+		},
+
 		/**
 		 * Indicates whether the visual focus is on the value state header
 		 * @private
@@ -587,6 +615,9 @@ class Input extends UI5Element {
 		// The last value confirmed by the user with "ENTER"
 		this.lastConfirmedValue = "";
 
+		// The value that the user is typed in the input
+		this.valueBeforeAutoComplete = "";
+
 		// Indicates, if the user pressed the BACKSPACE key.
 		this._backspaceKeyDown = false;
 
@@ -624,26 +655,47 @@ class Input extends UI5Element {
 
 		this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
 
-		const FormSupport = getFeature("FormSupport");
+		this.FormSupport = getFeature("FormSupport");
 		const hasItems = this.suggestionItems.length;
 		const hasValue = !!this.value;
-		const isFocused = this === document.activeElement;
+		const isFocused = this.shadowRoot.querySelector("input") === getActiveElement();
 
 		if (this._isPhone) {
 			this.open = this.openOnMobile;
+		} else if (this._forceOpen) {
+			this.open = true;
 		} else {
 			this.open = hasValue && hasItems && isFocused && this.isTyping;
 		}
 
-		if (FormSupport) {
-			FormSupport.syncNativeHiddenInput(this);
+		if (this.FormSupport) {
+			this.FormSupport.syncNativeHiddenInput(this);
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
+
+		const value = this.value;
+		const innerInput = this.getInputDOMRefSync();
+
+		if (!innerInput || !value) {
+			return;
+		}
+
+		const autoCompletedChars = innerInput.selectionEnd - innerInput.selectionStart;
+
+		// Typehead causes issues on Android devices, so we disable it for now
+		// If there is already a selection the autocomplete has already been performed
+		if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars && !this._isKeyNavigation) {
+			const item = this._getFirstMatchingItem(value);
+
+			// Keep the original typed in text intact
+			this.valueBeforeAutoComplete += value.slice(this.valueBeforeAutoComplete.length, value.length);
+			this._handleTypeAhead(item, value);
+		}
 	}
 
 	async onAfterRendering() {
-		if (this.Suggestions) {
+		if (this.Suggestions && this.showSuggestions) {
 			this.Suggestions.toggle(this.open, {
 				preventFocusRestore: true,
 			});
@@ -659,6 +711,9 @@ class Input extends UI5Element {
 	}
 
 	_onkeydown(event) {
+		this._isKeyNavigation = true;
+		this._shouldAutocomplete = !this.noTypeahead && !(isBackSpace(event) || isDelete(event) || isEscape(event));
+
 		if (isUp(event)) {
 			return this._handleUp(event);
 		}
@@ -709,6 +764,7 @@ class Input extends UI5Element {
 		}
 
 		this._keyDown = true;
+		this._isKeyNavigation = false;
 	}
 
 	_onkeyup(event) {
@@ -749,9 +805,29 @@ class Input extends UI5Element {
 	_handleEnter(event) {
 		const itemPressed = !!(this.Suggestions && this.Suggestions.onEnter(event));
 
+		// Check for autocompleted item
+		const matchingItem = this.suggestionItems.find(item => {
+			return (item.text && item.text === this.value) || (item.textContent === this.value);
+		});
+
+		if (matchingItem) {
+			const itemText = matchingItem.text ? matchingItem.text : matchingItem.textContent;
+
+			this.getInputDOMRefSync().setSelectionRange(itemText.length, itemText.length);
+			if (!itemPressed) {
+				this.selectSuggestion(matchingItem, true);
+				this.open = false;
+			}
+		}
+
 		if (!itemPressed) {
 			this.fireEventByAction(this.ACTION_ENTER);
 			this.lastConfirmedValue = this.value;
+
+			if (this.FormSupport) {
+				this.FormSupport.triggerFormSubmit(this);
+			}
+
 			return;
 		}
 
@@ -789,6 +865,8 @@ class Input extends UI5Element {
 	_handleEscape() {
 		const hasSuggestions = this.showSuggestions && !!this.Suggestions;
 		const isOpen = hasSuggestions && this.open;
+		const innerInput = this.getInputDOMRefSync();
+		const isAutoCompleted = innerInput.selectionEnd - innerInput.selectionStart > 0;
 
 		if (!isOpen) {
 			this.value = this.lastConfirmedValue ? this.lastConfirmedValue : this.previousValue;
@@ -797,12 +875,18 @@ class Input extends UI5Element {
 
 		if (hasSuggestions && isOpen && this.Suggestions._isItemOnTarget()) {
 			// Restore the value.
-			this.value = this.valueBeforeItemPreview;
+			this.value = this.valueBeforeAutoComplete || this.valueBeforeItemPreview;
 
 			// Mark that the selection has been canceled, so the popover can close
 			// and not reopen, due to receiving focus.
 			this.suggestionSelectionCanceled = true;
 			this.focused = true;
+
+			return;
+		}
+
+		if (isAutoCompleted) {
+			this.value = this.valueBeforeAutoComplete;
 		}
 
 		if (this._isValueStateFocused) {
@@ -814,9 +898,11 @@ class Input extends UI5Element {
 	async _onfocusin(event) {
 		await this.getInputDOMRef();
 
+		this.valueBeforeAutoComplete = "";
 		this.focused = true; // invalidating property
 		this.previousValue = this.value;
 		this.valueBeforeItemPreview = this.value;
+		this._shouldAutocomplete = false;
 
 		this._inputIconFocused = event.target && event.target === this.querySelector("[ui5-icon]");
 	}
@@ -847,6 +933,7 @@ class Input extends UI5Element {
 		this.lastConfirmedValue = "";
 		this.focused = false; // invalidating property
 		this.isTyping = false;
+		this._forceOpen = false;
 	}
 
 	_clearPopoverFocusAndSelection() {
@@ -974,6 +1061,38 @@ class Input extends UI5Element {
 		this.isTyping = true;
 	}
 
+	_startsWithMatchingItems(str) {
+		const textProp = this.suggestionItems[0].text ? "text" : "textContent";
+		return Filters.StartsWith(str, this.suggestionItems, textProp);
+	}
+
+	_getFirstMatchingItem(current) {
+		if (!this.suggestionItems.length) {
+			return;
+		}
+
+		const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.groupItem);
+
+		if (matchingItems.length) {
+			return matchingItems[0];
+		}
+	}
+
+	_handleTypeAhead(item, filterValue) {
+		if (!item) {
+			return;
+		}
+
+		const value = item.text ? item.text : item.textContent || "";
+		const innerInput = this.getInputDOMRefSync();
+
+		filterValue = filterValue || "";
+		this.value = value;
+
+		innerInput.value = value;
+		innerInput.setSelectionRange(filterValue.length, value.length);
+	}
+
 	_handleResize() {
 		this._inputWidth = this.offsetWidth;
 	}
@@ -1001,6 +1120,7 @@ class Input extends UI5Element {
 		this.isTyping = false;
 		this.openOnMobile = false;
 		this.open = false;
+		this._forceOpen = false;
 	}
 
 	/**
@@ -1031,6 +1151,19 @@ class Input extends UI5Element {
 		return staticAreaItem && staticAreaItem.querySelector("[ui5-popover]");
 	}
 
+	/**
+	 * Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open.
+	 * @since 1.3.0
+	 * @public
+	 */
+	openPicker() {
+		if (!this.suggestionItems.length || this.disabled || this.readonly) {
+			return;
+		}
+
+		this._forceOpen = true;
+	}
+
 	enableSuggestions() {
 		if (this.Suggestions) {
 			return;
@@ -1071,6 +1204,7 @@ class Input extends UI5Element {
 
 		this.isTyping = false;
 		this.openOnMobile = false;
+		this._forceOpen = false;
 	}
 
 	previewSuggestion(item) {
@@ -1086,8 +1220,12 @@ class Input extends UI5Element {
 	 */
 	updateValueOnPreview(item) {
 		const noPreview = item.type === "Inactive" || item.group;
+		const innerInput = this.getInputDOMRefSync();
 		const itemValue = noPreview ? this.valueBeforeItemPreview : (item.effectiveTitle || item.textContent);
+
 		this.value = itemValue;
+		innerInput.value = itemValue;
+		innerInput.setSelectionRange(this.valueBeforeAutoComplete.length, this.value.length);
 	}
 
 	/**

package/src/InputPopover.hbs

@@ -36,7 +36,8 @@
 				</div>
 			</div>
 			{{#if hasValueStateMessage}}
-				<div class="row {{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
+				<div class="{{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}

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,6 +1,5 @@
 <label
 		class="ui5-label-root"
-		dir="{{effectiveDir}}"
 		@click={{_onclick}}
 		for="{{for}}"
 	>
@@ -9,5 +8,5 @@
 			<slot></slot>
 		</bdi>
 	</span>
-	<span class="ui5-label-required-colon"></span>
+	<span aria-hidden="true" class="ui5-label-required-colon"></span>
 </label>

package/src/Link.js

@@ -345,10 +345,10 @@ class Link extends UI5Element {
 
 	_onkeydown(event) {
 		if (isEnter(event)) {
+			event.preventDefault();
 			const executeEvent = this.fireEvent("click", null, true);
 
 			if (executeEvent) {
-				event.preventDefault();
 				this.href && window.open(this.href, this.target);
 			}
 		} else if (isSpace(event)) {

package/src/List.hbs

@@ -74,6 +74,7 @@
 		<div
 			tabindex="0"
 			role="button"
+			id="{{_id}}-growing-btn" 
 			aria-labelledby="{{_id}}-growingButton-text"
 			?active="{{_loadMoreActive}}"
 			@click="{{_onLoadMoreClick}}"

package/src/List.js

@@ -5,7 +5,12 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation
 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 { isTabNext, isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isTabNext,
+	isSpace,
+	isEnter,
+	isTabPrevious,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 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";
@@ -22,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 {
@@ -279,7 +285,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
@@ -296,7 +302,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.
@@ -436,7 +442,7 @@ class List extends UI5Element {
 	}
 
 	static get styles() {
-		return listCss;
+		return [browserScrollbarCSS, listCss];
 	}
 
 	static async onDefine() {
@@ -759,9 +765,17 @@ class List extends UI5Element {
 		}
 
 		if (isTabNext(event)) {
-			this.setPreviouslyFocusedItem(event.target);
 			this.focusAfterElement();
 		}
+
+		if (isTabPrevious(event)) {
+			if (this.getPreviouslyFocusedItem()) {
+				this.focusPreviouslyFocusedItem();
+			} else {
+				this.focusFirstItem();
+			}
+			event.preventDefault();
+		}
 	}
 
 	_onLoadMoreKeyup(event) {
@@ -824,8 +838,9 @@ class List extends UI5Element {
 	}
 
 	_onfocusin(event) {
+		const target = this.getNormalizedTarget(event.target);
 		// If the focusin event does not origin from one of the 'triggers' - ignore it.
-		if (!this.isForwardElement(this.getNormalizedTarget(event.target))) {
+		if (!this.isForwardElement(target)) {
 			event.stopImmediatePropagation();
 			return;
 		}
@@ -833,7 +848,11 @@ class List extends UI5Element {
 		// The focus arrives in the List for the first time.
 		// If there is selected item - focus it or focus the first item.
 		if (!this.getPreviouslyFocusedItem()) {
-			this.focusFirstItem();
+			if (this.growsWithButton && this.isForwardAfterElement(target)) {
+				this.focusGrowingButton();
+			} else {
+				this.focusFirstItem();
+			}
 			event.stopImmediatePropagation();
 			return;
 		}
@@ -841,6 +860,12 @@ class List extends UI5Element {
 		// The focus returns to the List,
 		// focus the first selected item or the previously focused element.
 		if (!this.getForwardingFocus()) {
+			if (this.growsWithButton && this.isForwardAfterElement(target)) {
+				this.focusGrowingButton();
+				event.stopImmediatePropagation();
+				return;
+			}
+
 			this.focusPreviouslyFocusedItem();
 			event.stopImmediatePropagation();
 		}
@@ -850,13 +875,19 @@ class List extends UI5Element {
 
 	isForwardElement(node) {
 		const nodeId = node.id;
-		const afterElement = this.getAfterElement();
 		const beforeElement = this.getBeforeElement();
 
 		if (this._id === nodeId || (beforeElement && beforeElement.id === nodeId)) {
 			return true;
 		}
 
+		return this.isForwardAfterElement(node);
+	}
+
+	isForwardAfterElement(node) {
+		const nodeId = node.id;
+		const afterElement = this.getAfterElement();
+
 		return afterElement && afterElement.id === nodeId;
 	}
 
@@ -920,6 +951,9 @@ class List extends UI5Element {
 
 		if (!this.growsWithButton) {
 			this.focusAfterElement();
+		} else {
+			this.focusGrowingButton();
+			event.preventDefault();
 		}
 	}
 
@@ -933,6 +967,22 @@ class List extends UI5Element {
 		this.getAfterElement().focus();
 	}
 
+	focusGrowingButton() {
+		const growingBtn = this.getGrowingButton();
+
+		if (growingBtn) {
+			growingBtn.focus();
+		}
+	}
+
+	getGrowingButton() {
+		return this.shadowRoot.querySelector(`#${this._id}-growing-btn`);
+	}
+
+	/**
+	 * Focuses the first list item and sets its tabindex to "0" via the ItemNavigation
+	 * @protected
+	 */
 	focusFirstItem() {
 		// only enabled items are focusable
 		const firstItem = this.getFirstItem(x => !x.disabled);

package/src/ListItem.hbs

@@ -2,7 +2,6 @@
 	part="native-li"
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
-	dir="{{effectiveDir}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keyup="{{_onkeyup}}"
@@ -16,6 +15,7 @@
 	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"

package/src/ListItem.js

@@ -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 */ {
 		/**
@@ -148,6 +167,15 @@ class ListItem extends ListItemBase {
 				this.active = false;
 			}
 		};
+
+		const handleTouchStartEvent = event => {
+			this._onmousedown(event);
+		};
+
+		this._ontouchstart = {
+			handleEvent: handleTouchStartEvent,
+			passive: true,
+		};
 	}
 
 	onBeforeRendering(...params) {
@@ -212,10 +240,6 @@ class ListItem extends ListItemBase {
 		this.deactivate();
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	_ontouchend(event) {
 		this._onmouseup(event);
 	}
@@ -354,12 +378,13 @@ class ListItem extends ListItemBase {
 
 	get _accInfo() {
 		return {
-			role: this.role,
+			role: this.accessibleRole || this.role,
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
 			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,
 		};
 	}
 

package/src/ListItemBase.js

@@ -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();
+			}
 		}
 	}