@ui5/webcomponents 1.1.1 → 1.2.1

package/src/ColorPaletteItem.js

@@ -43,7 +43,7 @@ const metadata = {
 		/**
 		 * Defines the index of the item inside of the ColorPalette.
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		index: {
 			type: String,
@@ -52,7 +52,7 @@ const metadata = {
 		/**
 		 * Defines if the ColorPalette is on phone mode.
 		 * @private
-		 * @type {Boolean}
+		 * @type {boolean}
 		 */
 		phone: {
 			type: Boolean,

package/src/ColorPalettePopover.hbs

@@ -12,7 +12,7 @@
 		<ui5-color-palette
 			?show-more-colors="{{this.showMoreColors}}"
 			?show-recent-colors="{{this.showRecentColors}}"
-			?show-default-color="{{this.defaultColor}}"
+			?show-default-color="{{this.showDefaultColor}}"
 			default-color="{{this.defaultColor}}"
 			popup-mode
 			@ui5-item-click="{{onSelectedColor}}"

package/src/ColorPalettePopover.js

@@ -68,8 +68,8 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
 		/**
 		 * Defines the content of the component.
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.main.IColorPaletteItem[]}
+		 * @slot colors
 		 * @public
 		 */
 		"default": {
@@ -84,7 +84,7 @@ const metadata = {
 		 *
 		 * @event sap.ui.webcomponents.main.ColorPalettePopover#item-click
 		 * @public
-		 * @param {String} color the selected color
+		 * @param {string} color the selected color
 		 */
 		"item-click": {
 			details: {

package/src/ColorPicker.hbs

@@ -46,6 +46,7 @@
             <ui5-input
                 class="ui5-color-picker-hex-input"
                 value="{{hex}}"
+                @keydown="{{_onkeydown}}"
                 @ui5-change="{{_handleHEXChange}}"
                 value-state="{{hexInputErrorState}}"
             ></ui5-input>

package/src/ColorPicker.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
@@ -41,7 +42,7 @@ const metadata = {
 		/**
 		 * Defines the HEX code of the currently selected color
 		 * *Note*: If Alpha(transperancy) is set it is not included in this property. Use <code>color</code> property.
-		 * @type {String}
+		 * @type {string}
 		 * @private
 		 */
 		hex: {
@@ -52,7 +53,7 @@ const metadata = {
 
 		/**
 		 * Defines the current main color which is selected via the hue slider and is shown in the main color square.
-		 * @type {String}
+		 * @type {string}
 		 * @private
 		 */
 		_mainColor: {
@@ -87,6 +88,20 @@ const metadata = {
 			defaultValue: 0,
 		},
 
+		/**
+		 * @private
+		 */
+		_isSelectedColorChanged: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		 _isHueValueChanged: {
+			type: Boolean,
+		},
+
 		/**
 		 * @private
 		 */
@@ -326,6 +341,8 @@ class ColorPicker extends UI5Element {
 		this.selectedHue = event.target.value;
 		this._hue = this.selectedHue;
 		this._setMainColor(this._hue);
+		// Idication that changes to the hue value triggered as a result of user pressing over the hue slider.
+		this._isHueValueChanged = true;
 
 		const tempColor = this._calculateColorFromCoordinates(this._selectedCoordinates.x + 6.5, this._selectedCoordinates.y + 6.5);
 
@@ -343,6 +360,10 @@ class ColorPicker extends UI5Element {
 			newValue = `${newValue[0]}${newValue[0]}${newValue[1]}${newValue[1]}${newValue[2]}${newValue[2]}`;
 		}
 
+		if (newValue === this.hex) {
+			return;
+		}
+
 		this.hex = newValue;
 		if (newValue.length !== 6 || !hexRegex.test(newValue)) {
 			this._wrongHEX = true;
@@ -425,17 +446,26 @@ class ColorPicker extends UI5Element {
 			y: y - 6.5, // Center the coordinates, because of the height of the circle
 		};
 
+		// Idication that changes to the color settings are triggered as a result of user pressing over the main color section.
+		this._isSelectedColorChanged = true;
+
 		const tempColor = this._calculateColorFromCoordinates(x, y);
 		if (tempColor) {
 			this._setColor(HSLToRGB(tempColor));
 		}
 	}
 
+	_onkeydown(event) {
+		if (isEnter(event)) {
+			this._handleHEXChange(event);
+		}
+	}
+
 	_calculateColorFromCoordinates(x, y) {
 		// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
 		// and HSL format, the color will be parsed to RGB
 
-		const h = Math.round(this._hue / 4.25), // 0 ≤ H < 360
+		const h = this._hue / 4.25, // 0 ≤ H < 360
 			// 0 ≤ S ≤ 1
 			s = 1 - +(Math.round((y / 256) + "e+2") + "e-2"), // eslint-disable-line
 			// 0 ≤ V ≤ 1
@@ -488,7 +518,15 @@ class ColorPicker extends UI5Element {
 			y: (256 - (Math.round(hslColours.s * 100) * 2.56)) - 6.5, // Center the coordinates, because of the height of the circle
 		};
 
-		this._hue = this.selectedHue ? this.selectedHue : Math.round(hslColours.h * 4.25);
+		if (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.
+			this._isSelectedColorChanged = false;
+		} else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.
+			this._isHueValueChanged = false;
+			this._hue = this.selectedHue ? this.selectedHue : this._hue;
+		} else {
+			this._hue = Math.round(hslColours.h * 4.25);
+		}
+
 		this._setMainColor(this._hue);
 	}
 

package/src/ComboBox.js

@@ -8,6 +8,10 @@ import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	isBackSpace,
@@ -57,6 +61,7 @@ import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
 import StandardListItem from "./StandardListItem.js";
 import ComboBoxGroupItem from "./ComboBoxGroupItem.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
 
 /**
  * @public
@@ -206,9 +211,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -220,7 +225,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
@@ -468,7 +473,7 @@ class ComboBox extends UI5Element {
 			return;
 		}
 
-		if (!this.shadowRoot.contains(event.relatedTarget)) {
+		if (!this.shadowRoot.contains(event.relatedTarget) && (this.staticAreaItem !== event.relatedTarget)) {
 			this.focused = false;
 			!isPhone() && this._closeRespPopover(event);
 		}
@@ -1063,6 +1068,7 @@ class ComboBox extends UI5Element {
 			BusyIndicator,
 			Button,
 			StandardListItem,
+			GroupHeaderListItem,
 			Popover,
 			ComboBoxGroupItem,
 		];

package/src/ComboBoxPopover.hbs

@@ -102,7 +102,6 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"

package/src/DatePicker.hbs

@@ -2,7 +2,7 @@
 		class="ui5-date-picker-root"
 		style="{{styles.main}}"
 >
-	<!-- INPUT -->
+	{{! INPUT}}
 	<ui5-input
 			id="{{_id}}-inner"
 			class="ui5-date-picker-input"

package/src/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/src/DatePickerPopover.hbs

@@ -1,12 +1,10 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
 	allow-target-overlap
-	stay-open-on-scroll
 	placement-type="Bottom"
 	horizontal-align="Left"
 	?disable-scrolling="{{_isIE}}"
 	hide-arrow
-	with-padding
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"

package/src/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/src/Dialog.hbs

@@ -7,7 +7,8 @@
 			id="ui5-popup-header"
 			tabindex="{{_headerTabIndex}}"
 			@keydown="{{_onDragOrResizeKeyDown}}"
-			@mousedown="{{_onDragMouseDown}}">
+			@mousedown="{{_onDragMouseDown}}"
+			part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
@@ -19,7 +20,7 @@
 
 {{#*inline "afterContent"}}
 	{{#if footer.length }}
-		<footer class="ui5-popup-footer-root">
+		<footer class="ui5-popup-footer-root" part="footer">
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}

package/src/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/src/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/src/FileUploaderPopover.hbs

@@ -2,14 +2,15 @@
 	skip-registry-update
 	_disable-initial-focus
 	prevent-focus-restore
-	no-padding
 	hide-arrow
 	class="ui5-valuestatemessage-popover"
 	placement-type="Bottom"
 	horizontal-align="Left"
 >
 	<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
-		<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+		{{#if _valueStateMessageInputIcon}}
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+		{{/if}}
 		{{> valueStateMessage}}
 	</div>
 </ui5-popover>

package/src/Input.hbs

@@ -19,7 +19,7 @@
 			maxlength="{{maxlength}}"
 			role="{{accInfo.input.role}}"
 			aria-controls="{{accInfo.input.ariaControls}}"
-			?aria-invalid="{{accInfo.input.ariaInvalid}}"
+			aria-invalid="{{accInfo.input.ariaInvalid}}"
 			aria-haspopup="{{accInfo.input.ariaHasPopup}}"
 			aria-describedby="{{accInfo.input.ariaDescribedBy}}"
 			aria-roledescription="{{accInfo.input.ariaRoledescription}}"
@@ -43,6 +43,10 @@
 			<ui5-icon class="ui5-input-readonly-icon" name="not-editable"></ui5-icon>
 		{{/if}}
 
+		{{#if effectiveShowClearIcon}}
+			<ui5-icon @click={{_clear}} tabindex="-1" input-icon class="ui5-input-clear-icon" name="decline"></ui5-icon>
+		{{/if}}
+
 		{{#if icon.length}}
 			<div class="ui5-input-icon-root">
 				<slot name="icon"></slot>