@ui5/webcomponents 1.1.1 → 1.2.1

package/dist/DatePicker.js

@@ -19,6 +19,7 @@ import {
 import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import HasPopup from "./types/HasPopup.js";
 import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_DESCRIPTION, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
 import DateComponentBase from "./DateComponentBase.js";
 import Icon from "./Icon.js";
@@ -169,7 +170,7 @@ const metadata = {
 		/**
 		 * Defines the aria-label attribute for the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -180,7 +181,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -243,8 +244,8 @@ const metadata = {
 		 * @event
 		 * @allowPreventDefault
 		 * @public
-		 * @param {String} value The submitted value.
-		 * @param {Boolean} valid Indicator if the value is in correct format pattern and in valid range.
+		 * @param {string} value The submitted value.
+		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		change: {
 			details: {
@@ -263,8 +264,8 @@ const metadata = {
 		 * @event
 		 * @allowPreventDefault
 		 * @public
-		 * @param {String} value The submitted value.
-		 * @param {Boolean} valid Indicator if the value is in correct format pattern and in valid range.
+		 * @param {string} value The submitted value.
+		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		input: {
 			details: {
@@ -414,6 +415,7 @@ class DatePicker extends DateComponentBase {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
 
+		this.value = this.normalizeValue(this.value);
 		this.liveValue = this.value;
 	}
 
@@ -600,6 +602,7 @@ class DatePicker extends DateComponentBase {
 	/**
 	 * Checks if a value is valid against the current date format of the DatePicker.
 	 * @param {string} value A value to be tested against the current date format
+	 * @returns {boolean}
 	 * @public
 	 */
 	isValid(value = "") {
@@ -671,9 +674,8 @@ class DatePicker extends DateComponentBase {
 	get accInfo() {
 		return {
 			"ariaRoledescription": this.dateAriaDescription,
-			"ariaHasPopup": "true",
+			"ariaHasPopup": HasPopup.Grid,
 			"ariaAutoComplete": "none",
-			"role": "combobox",
 			"ariaControls": `${this._id}-responsive-popover`,
 			"ariaExpanded": this.isOpen(),
 			"ariaRequired": this.required,

package/dist/DateRangePicker.js

@@ -84,6 +84,11 @@ class DateRangePicker extends DatePicker {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
+	constructor() {
+		super();
+		this._prevDelimiter = null;
+	}
+
 	/**
 	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
 	 *
@@ -287,7 +292,7 @@ class DateRangePicker extends DatePicker {
 
 	_splitValueByDelimiter(value) {
 		const valuesArray = [];
-		const partsArray = value.split(this._effectiveDelimiter);
+		const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
 
 		valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
 		valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
@@ -330,6 +335,7 @@ class DateRangePicker extends DatePicker {
 	 * @private
 	 */
 	_buildValue(firstDateTimestamp, lastDateTimestamp) {
+		this._prevDelimiter = this._effectiveDelimiter;
 		if (firstDateTimestamp) {
 			const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);
 

package/dist/Dialog.js

@@ -151,6 +151,17 @@ const metadata = {
  * The <code>stretch</code> property can be used to stretch the
  * <code>ui5-dialog</code> on full screen.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-dialog</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Dialog";</code>
@@ -269,10 +280,18 @@ class Dialog extends Popup {
 		this._isRTL = this.effectiveDir === "rtl";
 		this.onPhone = isPhone();
 		this.onDesktop = isDesktop();
-		this._detachResizeHandlers();
 	}
 
 	onAfterRendering() {
+		if (!this.isOpen() && this.open) {
+			this.show();
+		} else if (this.isOpen() && !this.open) {
+			this.close();
+		}
+	}
+
+	onEnterDOM() {
+		super.onEnterDOM();
 		this._attachResizeHandlers();
 	}
 
@@ -281,15 +300,26 @@ class Dialog extends Popup {
 		this._detachResizeHandlers();
 	}
 
+	/**
+	 * @override
+	 */
+	_resize() {
+		super._resize();
+
+		if (this._resizeHandlersAttached) {
+			this._center();
+		}
+	}
+
 	_attachResizeHandlers() {
-		ResizeHandler.register(this, this._screenResizeHandler);
-		ResizeHandler.register(document.body, this._screenResizeHandler);
-		this._resizeHandlersAttached = true;
+		if (!this._resizeHandlersAttached) {
+			ResizeHandler.register(document.body, this._screenResizeHandler);
+			this._resizeHandlersAttached = true;
+		}
 	}
 
 	_detachResizeHandlers() {
 		if (this._resizeHandlersAttached) {
-			ResizeHandler.deregister(this, this._screenResizeHandler);
 			ResizeHandler.deregister(document.body, this._screenResizeHandler);
 			this._resizeHandlersAttached = false;
 		}

package/dist/FileUploader.js

@@ -15,6 +15,7 @@ import {
 
 import Input from "./Input.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 
 // Template
 import FileUploaderTemplate from "./generated/templates/FileUploaderTemplate.lit.js";
@@ -517,7 +518,7 @@ class FileUploader extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [Input, Popover];
+		return [Input, Popover, Icon];
 	}
 
 	static async onDefine() {

package/dist/Input.js

@@ -24,8 +24,13 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/not-editable.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 import InputType from "./types/InputType.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 // Templates
 import InputTemplate from "./generated/templates/InputTemplate.lit.js";
 import InputPopoverTemplate from "./generated/templates/InputPopoverTemplate.lit.js";
@@ -307,9 +312,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -320,7 +325,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the input.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -331,17 +336,37 @@ const metadata = {
 		},
 
 		/**
+		 * Defines whether the clear icon of the input will be shown.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.2.0
+		 */
+		showClearIcon: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the clear icon is visible.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
 		 * @private
+		 * @since 1.2.0
 		 */
-		focused: {
+		effectiveShowClearIcon: {
 			type: Boolean,
 		},
 
 		/**
-		 * Indicates whether the visual focus is on the value state header
 		 * @private
 		 */
-		_isValueStateFocused: {
+		focused: {
+			type: Boolean,
+		},
+
+		openOnMobile: {
 			type: Boolean,
 		},
 
@@ -349,6 +374,14 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Indicates whether the visual focus is on the value state header
+		 * @private
+		 */
+		_isValueStateFocused: {
+			type: Boolean,
+		},
+
 		_input: {
 			type: Object,
 		},
@@ -470,7 +503,6 @@ const metadata = {
  * <br>
  *
  * <ul>
- * <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Opens value help if available, same as clicking the value help icon. (Does not open suggestion list.)</li>
  * <li>[ESC] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.</li>
  * <li>[ENTER] or [RETURN] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.</li>
  * <li>[DOWN] - Focuses the next matching item in the suggestion list.</li>
@@ -558,6 +590,9 @@ class Input extends UI5Element {
 		// Indicates, if the user pressed the BACKSPACE key.
 		this._backspaceKeyDown = false;
 
+		// Indicates, if the user is typing. Gets reset once popup is closed
+		this.isTyping = false;
+
 		// all sementic events
 		this.EVENT_CHANGE = "change";
 		this.EVENT_INPUT = "input";
@@ -587,9 +622,18 @@ class Input extends UI5Element {
 			this.suggestionsTexts = this.Suggestions.defaultSlotProperties(this.highlightValue);
 		}
 
-		this.open = this.open && (!!this.suggestionItems.length || this._isPhone);
+		this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
 
 		const FormSupport = getFeature("FormSupport");
+		const hasItems = this.suggestionItems.length;
+		const hasValue = !!this.value;
+		const isFocused = this === document.activeElement;
+
+		if (this._isPhone) {
+			this.open = this.openOnMobile;
+		} else {
+			this.open = hasValue && hasItems && isFocused && this.isTyping;
+		}
 
 		if (FormSupport) {
 			FormSupport.syncNativeHiddenInput(this);
@@ -765,8 +809,6 @@ class Input extends UI5Element {
 			this._isValueStateFocused = false;
 			this.focused = true;
 		}
-
-		this.open = false;
 	}
 
 	async _onfocusin(event) {
@@ -783,6 +825,8 @@ class Input extends UI5Element {
 		const focusedOutToSuggestions = this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover);
 		const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
 
+		this._preventNextChange = this.effectiveShowClearIcon && this.shadowRoot.contains(event.relatedTarget);
+
 		// if focusout is triggered by pressing on suggestion item or value state message popover, skip invalidation, because re-rendering
 		// will happen before "itemPress" event, which will make item "active" state not visualized
 		if (focusedOutToSuggestions || focusedOutToValueStateMessage) {
@@ -796,13 +840,13 @@ class Input extends UI5Element {
 			return;
 		}
 
-		this.closePopover();
+		this.open = false;
 		this._clearPopoverFocusAndSelection();
 
 		this.previousValue = "";
 		this.lastConfirmedValue = "";
 		this.focused = false; // invalidating property
-		this.open = false;
+		this.isTyping = false;
 	}
 
 	_clearPopoverFocusAndSelection() {
@@ -820,7 +864,7 @@ class Input extends UI5Element {
 	_click(event) {
 		if (isPhone() && !this.readonly && this.Suggestions) {
 			this.blur();
-			this.open = true;
+			this.openOnMobile = true;
 		}
 	}
 
@@ -832,12 +876,27 @@ class Input extends UI5Element {
 	}
 
 	_handleChange() {
+		if (this._preventNextChange) {
+			this._preventNextChange = false;
+			return;
+		}
+
 		if (this._changeFiredValue !== this.value) {
 			this._changeFiredValue = this.value;
 			this.fireEvent(this.EVENT_CHANGE);
 		}
 	}
 
+	_clear() {
+		this.value = "";
+		this.fireEvent(this.EVENT_INPUT);
+		this._handleChange();
+
+		if (!this._isPhone) {
+			this.focus();
+		}
+	}
+
 	_scroll(event) {
 		const detail = event.detail;
 		this.fireEvent("suggestion-scroll", {
@@ -871,6 +930,10 @@ class Input extends UI5Element {
 
 			// Perform manual handling in case of floating number
 			// and if the user did not select the entire input value
+			if (this._selectedText.indexOf(",") > -1) {
+				this._selectedText = this._selectedText.replace(",", ".");
+			}
+
 			if (rgxFloat.test(this.value) && this._selectedText !== this.value) {
 				const newValue = this.removeFractionalPart(this.value);
 
@@ -906,11 +969,9 @@ class Input extends UI5Element {
 
 		if (this.Suggestions) {
 			this.Suggestions.updateSelectedItemPosition(null);
-
-			if (!this._isPhone) {
-				this.open = !!inputDomRef.value;
-			}
 		}
+
+		this.isTyping = true;
 	}
 
 	_handleResize() {
@@ -936,6 +997,10 @@ class Input extends UI5Element {
 			this.blur();
 			this.focused = false;
 		}
+
+		this.isTyping = false;
+		this.openOnMobile = false;
+		this.open = false;
 	}
 
 	/**
@@ -1003,6 +1068,9 @@ class Input extends UI5Element {
 		this.suggestionSelectionCanceled = false;
 
 		this.fireEvent(this.EVENT_SUGGESTION_ITEM_SELECT, { item });
+
+		this.isTyping = false;
+		this.openOnMobile = false;
 	}
 
 	previewSuggestion(item) {
@@ -1439,7 +1507,7 @@ class Input extends UI5Element {
 
 	/**
 	 * Removes the fractional part of floating-point number.
-	 * @param {String} value the numeric value of Input of type "Number"
+	 * @param {string} value the numeric value of Input of type "Number"
 	 */
 	removeFractionalPart(value) {
 		if (value.includes(".")) {
@@ -1455,7 +1523,7 @@ class Input extends UI5Element {
 	static get dependencies() {
 		const Suggestions = getFeature("InputSuggestions");
 
-		return [Popover].concat(Suggestions ? Suggestions.dependencies : []);
+		return [Popover, Icon].concat(Suggestions ? Suggestions.dependencies : []);
 	}
 
 	static async onDefine() {

package/dist/Interfaces.js

@@ -44,7 +44,7 @@ const ICalendarDate = "sap.ui.webcomponents.main.ICalendarDate";
 const IComboBoxItem = "sap.ui.webcomponents.main.IComboBoxItem";
 
 /**
- * Interface for components that may be used inside a <code>ui5-color-palette</code>
+ * 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

package/dist/Label.js

@@ -1,5 +1,6 @@
 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";
 
@@ -140,7 +141,12 @@ class Label extends UI5Element {
 	}
 
 	_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,7 +1,7 @@
 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 { getAriaLabelledByTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } 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";
@@ -102,17 +102,28 @@ const metadata = {
 			defaultValue: WrappingType.None,
 		},
 
+		/**
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.2.0
+		 */
+		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,
-			defaultValue: "",
 		},
 
 		/**
@@ -136,7 +147,7 @@ const metadata = {
 		 *			<ul>
 		 *				<li><code>true</code></li>
 		 *				<li><code>false</code></li>
-		 *			<ul>
+		 *			</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>
@@ -289,7 +300,7 @@ class Link extends UI5Element {
 	}
 
 	get ariaLabelText() {
-		return getAriaLabelledByTexts(this);
+		return getEffectiveAriaLabelText(this);
 	}
 
 	get hasLinkType() {

package/dist/List.js

@@ -208,7 +208,7 @@ const metadata = {
 		/**
 		 * Defines the accessible name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -220,7 +220,7 @@ const metadata = {
 		/**
 		 * Defines the IDs of the elements that label the input.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -234,7 +234,7 @@ const metadata = {
 		 * Defines the accessible role of the component.
 		 * <br><br>
 		 * @public
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue "list"
 		 * @since 1.0.0-rc.15
 		 */
@@ -379,7 +379,7 @@ const metadata = {
  * <br><br>
  * <h3>Keyboard Handling</h3>
  *
- * <h4>Basic Navigation</h4
+ * <h4>Basic Navigation</h4>
  * The <code>ui5-list</code> provides advanced keyboard handling.
  * When a list is focused the user can use the following keyboard
  * shortcuts in order to perform a navigation:
@@ -833,12 +833,7 @@ 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()) {
-			if (this.getFirstItem(x => x.selected && !x.disabled)) {
-				this.focusFirstSelectedItem();
-			} else {
-				this.focusFirstItem();
-			}
-
+			this.focusFirstItem();
 			event.stopImmediatePropagation();
 			return;
 		}
@@ -846,12 +841,7 @@ 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.getFirstItem(x => x.selected && !x.disabled)) {
-				this.focusFirstSelectedItem();
-			} else {
-				this.focusPreviouslyFocusedItem();
-			}
-
+			this.focusPreviouslyFocusedItem();
 			event.stopImmediatePropagation();
 		}
 

package/dist/ListItem.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
 		 *

package/dist/MessageStrip.js

@@ -249,14 +249,6 @@ class MessageStrip extends UI5Element {
 	get designClasses() {
 		return MessageStrip.designClassesMappings()[this.design];
 	}
-
-	get accInfo() {
-		return {
-			"button": {
-				"title": this._closeButtonText,
-			},
-		};
-	}
 }
 
 MessageStrip.define();