@ui5/webcomponents 0.0.0-cc312800a → 0.0.0-cf069fb29

package/src/ComboBoxGroupItem.js

@@ -0,0 +1,70 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-cb-group-item",
+	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+		/**
+		 * Indicates whether the input is focssed
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	},
+	events: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-combobox-group-item</code> is type of suggestion item,
+ * that can be used to split the <code>ui5-combobox</code> suggestions into groups.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.ComboBoxGroupItem
+ * @extends UI5Element
+ * @tagname ui5-cb-group-item
+ * @public
+ * @implements sap.ui.webcomponents.main.IComboBoxItem
+ * @since 1.0.0-rc.15
+ */
+class ComboBoxGroupItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			GroupHeaderListItem,
+		];
+	}
+
+	/**
+	 * Used to avoid tag name checks
+	 * @protected
+	 */
+	get isGroupItem() {
+		return true;
+	}
+}
+
+ComboBoxGroupItem.define();
+
+export default ComboBoxGroupItem;

package/src/ComboBoxItem.js

@@ -7,7 +7,7 @@ const metadata = {
 	tag: "ui5-cb-item",
 	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-cb-item</code>.
+		 * Defines the text of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -15,7 +15,7 @@ const metadata = {
 		 */
 		text: { type: String },
 		/**
-		 * Defines the additional text of the <code>ui5-cb-item</code>.
+		 * Defines the additional text of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""

package/src/ComboBoxPopover.hbs

@@ -1,18 +1,19 @@
 <ui5-responsive-popover
-	no-arrow
+	class="{{classes.popover}}"
+	hide-arrow
 	content-only-on-desktop
 	_disable-initial-focus
 	placement-type="Bottom"
-	horizontal-align="Left"
+	horizontal-align="Stretch"
 	@ui5-after-open={{_afterOpenPopover}}
 	@ui5-after-close={{_afterClosePopover}}
 >
-	<ui5-busyindicator
+	<ui5-busy-indicator
 		?active={{loading}}
 		size="Medium"
 		class="ui5-combobox-busy"
 	>
-	</ui5-busyindicator>
+	</ui5-busy-indicator>
 
 	<div slot="header" class="ui5-responsive-popover-header">
 		<div class="row">
@@ -33,7 +34,7 @@
 			>
 				<input
 					class="ui5-input-inner-phone"
-					.value="{{_tempValue}}"
+					.value="{{value}}"
 					inner-input
 					placeholder="{{placeholder}}"
 					value-state="{{valueState}}"
@@ -54,7 +55,8 @@
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateText}}
-			<div class="ui5-responsive-popover-header {{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
+			<div class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
@@ -68,16 +70,22 @@
 		mode="SingleSelect"
 	>
 		{{#each _filteredItems}}
-			<ui5-li
-				type="Active"
-				info={{this.additionalText}}
-				._tabIndex={{itemTabIndex}}
-				.mappedItem={{this}}
-				?selected={{this.selected}}
-				?focused={{this.focused}}
-			>
-				{{this.text}}
-			</ui5-li>
+			{{#if isGroupItem}}
+				<ui5-li-groupheader ?focused={{this.focused}}>{{ this.text }}</ui5-li-groupheader>
+			{{else}}
+				<ui5-li
+					type="Active"
+					additional-text={{this.additionalText}}
+					group-name={{this.groupName}}
+					._tabIndex={{itemTabIndex}}
+					.mappedItem={{this}}
+					?selected={{this.selected}}
+					?focused={{this.focused}}
+				>
+					{{this.text}}
+				</ui5-li>
+			{{/if}}
+
 		{{/each}}
 	</ui5-list>
 
@@ -95,11 +103,13 @@
 		_disable-initial-focus
 		prevent-focus-restore
 		no-padding
-		no-arrow
+		hide-arrow
 		class="ui5-valuestatemessage-popover"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 		placement-type="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/CustomListItem.js

@@ -13,7 +13,7 @@ const metadata = {
 	slots: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ {
 
 		/**
-		 * Defines the content of the <code>ui5-li-custom</code>.
+		 * Defines the content of the component.
 		 * @type {Node[]}
 		 * @slot
 		 * @public
@@ -23,6 +23,18 @@ const metadata = {
 		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ {
+		/**
+		 * Defines the text alternative of the component.
+		 * Note: If not provided a default text alternative will be set, if present.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		 accessibleName: {
+			type: String,
+		},
 	},
 };
 
@@ -32,7 +44,7 @@ const metadata = {
  * A component to be used as custom list item within the <code>ui5-list</code>
  * the same way as the standard <code>ui5-li</code>.
  *
- * The <code>ui5-li-custom</code> accepts arbitrary HTML content to allow full customization.
+ * The component accepts arbitrary HTML content to allow full customization.
  *
  * @constructor
  * @author SAP SE

package/src/DateComponentBase.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 { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
@@ -27,7 +27,19 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the мinimum date available for selection.
+		 * Defines the secondary calendar type.
+		 * If not set, the calendar will only show the primary calendar type.
+		 * @type {CalendarType}
+		 * @since 1.0.0-rc.16
+		 * @defaultvalue undefined
+		 * @public
+		 */
+		secondaryCalendarType: {
+			type: CalendarType,
+		},
+
+		/**
+		 * Determines the minimum date available for selection.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -89,7 +101,6 @@ class DateComponentBase extends UI5Element {
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	get _primaryCalendarType() {
@@ -133,25 +144,23 @@ class DateComponentBase extends UI5Element {
 	}
 
 	getFormat() {
-		let dateFormat;
-		if (this._isPattern) {
-			dateFormat = DateFormat.getInstance({
+		return this._isPattern
+			? DateFormat.getInstance({
+				strictParsing: true,
 				pattern: this._formatPattern,
 				calendarType: this._primaryCalendarType,
-			});
-		} else {
-			dateFormat = DateFormat.getInstance({
+			})
+			: DateFormat.getInstance({
+				strictParsing: true,
 				style: this._formatPattern,
 				calendarType: this._primaryCalendarType,
 			});
-		}
-		return dateFormat;
 	}
 
 	static async onDefine() {
-		await Promise.all([
+		[DateComponentBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
 			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 	}
 }

package/src/DatePicker.js

@@ -14,6 +14,7 @@ import {
 	isPageDownShiftCtrl,
 	isShow,
 	isF4,
+	isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
@@ -58,7 +59,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value state of the <code>ui5-date-picker</code>.
+		 * Defines the value state of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -79,7 +80,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the <code>ui5-date-picker</code> is required.
+		 * Defines whether the component is required.
 		 *
 		 * @since 1.0.0-rc.9
 		 * @type {boolean}
@@ -91,7 +92,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-date-picker</code> is displayed as disabled.
+		 * Determines whether the component is displayed as disabled.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -102,7 +103,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-date-picker</code> is displayed as read-only.
+		 * Determines whether the component is displayed as read-only.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -114,11 +115,11 @@ const metadata = {
 
 		/**
 		 * Defines a short hint, intended to aid the user with data entry when the
-		 * <code>ui5-date-picker</code> has no value.
+		 * component has no value.
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
-		 * Passing an empty string as the value of this property will make the <code>ui5-date-picker</code> appear empty - without placeholder or format pattern.
+		 * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
 		 *
 		 * @type {string}
 		 * @defaultvalue undefined
@@ -130,7 +131,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines the name with which the <code>ui5-date-picker</code> will be submitted in an HTML form.
+		 * Determines the name with which the component will be submitted in an HTML form.
 		 *
 		 * <br><br>
 		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
@@ -138,7 +139,7 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-date-picker</code> so that it can be submitted as
+		 * will be created inside the component so that it can be submitted as
 		 * part of an HTML form. Do not use this property unless you need to submit a form.
 		 *
 		 * @type {string}
@@ -153,7 +154,7 @@ const metadata = {
 		 * Defines the visibility of the week numbers column.
 		 * <br><br>
 		 *
-		 * <b>Note:<b> For calendars other than Gregorian,
+		 * <b>Note:</b> For calendars other than Gregorian,
 		 * the week numbers are not displayed regardless of what is set.
 		 *
 		 * @type {boolean}
@@ -166,26 +167,25 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the <code>ui5-date-picker</code>.
+		 * Defines the aria-label attribute for the component.
 		 *
 		 * @type {String}
-		 * @since 1.0.0-rc.9
-		 * @private
-		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 		},
 
 		/**
-		 * Receives id(or many ids) of the elements that label the <code>ui5-date-picker</code>.
+		 * Receives id(or many ids) of the elements that label the component.
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.9
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabelledby: {
+		accessibleNameRef: {
 			type: String,
 			defaultValue: "",
 		},
@@ -207,13 +207,13 @@ const metadata = {
 
 	slots: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
-		 * Defines the value state message that will be displayed as pop up under the <code>ui5-date-picker</code>.
+		 * Defines the value state message that will be displayed as pop up under the component.
 		 * <br><br>
 		 *
 		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
 		 * <br>
 		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-		 * when the <code>ui5-date-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+		 * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
 		 * @type {HTMLElement}
 		 * @since 1.0.0-rc.7
 		 * @slot
@@ -241,17 +241,41 @@ const metadata = {
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
 		 *
 		 * @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.
 		*/
-		change: {},
+		change: {
+			details: {
+				value: {
+					type: String,
+				},
+				valid: {
+					type: Boolean,
+				},
+			},
+		},
 
 		/**
-		 * Fired when the value of the <code>ui5-date-picker</code> is changed at each key stroke.
+		 * Fired when the value of the component is changed at each key stroke.
 		 *
 		 * @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.
 		*/
-		input: {},
+		input: {
+			details: {
+				value: {
+					type: String,
+				},
+				valid: {
+					type: Boolean,
+				},
+			},
+		},
 	},
 };
 
@@ -273,7 +297,7 @@ const metadata = {
  * <li>Typing it in directly in the input field</li>
  * </ul>
  * <br><br>
- * When the user makes an entry and chooses the enter key, the calendar shows the corresponding date.
+ * When the user makes an entry and presses the enter key, the calendar shows the corresponding date.
  * When the user directly triggers the calendar display, the actual date is displayed.
  *
  * <h3>Formatting</h3>
@@ -296,8 +320,8 @@ const metadata = {
  * use TAB to reach the buttons for changing month and year.
  * <br>
  *
- * If the <code>ui5-date-picker</code> is focused and the picker dialog is not opened the user can
- * increment or decrement the corresponding field of the JS date object referenced by <code>dateValue</code> propery
+ * If the <code>ui5-date-picker</code> input field is focused and its corresponding picker dialog is not opened,
+ * then users can increment or decrement the date referenced by <code>dateValue</code> property
  * by using the following shortcuts:
  * <br>
  * <ul>
@@ -330,7 +354,7 @@ const metadata = {
  * {
  *	"calendarType": "Japanese"
  * }
- * &lt;/script&gt;
+ * &lt;/script&gt;</code></pre>
  *
  * <h3>ES6 Module Import</h3>
  *
@@ -371,9 +395,8 @@ class DatePicker extends DateComponentBase {
 		this._isPickerOpen = false;
 		if (isPhone()) {
 			this.blur(); // close device's keyboard and prevent further typing
-		} else if (this._focusInputAfterClose) {
+		} else {
 			this._getInput().focus();
-			this._focusInputAfterClose = false;
 		}
 	}
 
@@ -390,6 +413,8 @@ class DatePicker extends DateComponentBase {
 		} 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
 		}
+
+		this.liveValue = this.value;
 	}
 
 	/**
@@ -445,6 +470,10 @@ class DatePicker extends DateComponentBase {
 			return;
 		}
 
+		if (isEnter(event)) {
+			this._updateValueAndFireEvents(event.target.value, true, ["change", "value-changed"]);
+		}
+
 		if (isPageUpShiftCtrl(event)) {
 			event.preventDefault();
 			this._modifyDateValue(1, "year");
@@ -482,17 +511,33 @@ class DatePicker extends DateComponentBase {
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 	}
 
-	_updateValueAndFireEvents(value, normalizeValue, events) {
+	_updateValueAndFireEvents(value, normalizeValue, events, updateValue = true) {
 		const valid = this._checkValueValidity(value);
+
 		if (valid && normalizeValue) {
 			value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
 		}
 
-		this.value = value;
-		this._updateValueState(); // Change the value state to Error/None, but only if needed
+		let executeEvent = true;
+		this.liveValue = value;
+
 		events.forEach(event => {
-			this.fireEvent(event, { value, valid });
+			if (!this.fireEvent(event, { value, valid }, true)) {
+				executeEvent = false;
+			}
 		});
+
+		if (!executeEvent) {
+			return;
+		}
+
+		if (updateValue) {
+			this._getInput().getInputDOMRef().then(innnerInput => {
+				innnerInput.value = value;
+			});
+			this.value = value;
+			this._updateValueState(); // Change the value state to Error/None, but only if needed
+		}
 	}
 
 	_updateValueState() {
@@ -532,7 +577,7 @@ class DatePicker extends DateComponentBase {
 	 * @protected
 	 */
 	async _onInputInput(event) {
-		this._updateValueAndFireEvents(event.target.value, false, ["input"]);
+		this._updateValueAndFireEvents(event.target.value, false, ["input"], false);
 	}
 
 	/**
@@ -547,7 +592,7 @@ class DatePicker extends DateComponentBase {
 
 	_click(event) {
 		if (isPhone()) {
-			this.responsivePopover.open(this);
+			this.responsivePopover.showAt(this);
 			event.preventDefault(); // prevent immediate selection of any item
 		}
 	}
@@ -567,7 +612,7 @@ class DatePicker extends DateComponentBase {
 
 	/**
 	 * Checks if a date is between the minimum and maximum date.
-	 * @param {string} value
+	 * @param {string} value A value to be checked
 	 * @returns {boolean}
 	 * @public
 	 */
@@ -604,7 +649,7 @@ class DatePicker extends DateComponentBase {
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return DatePicker.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get phone() {
@@ -629,7 +674,7 @@ class DatePicker extends DateComponentBase {
 			"ariaHasPopup": "true",
 			"ariaAutoComplete": "none",
 			"role": "combobox",
-			"ariaOwns": `${this._id}-responsive-popover`,
+			"ariaControls": `${this._id}-responsive-popover`,
 			"ariaExpanded": this.isOpen(),
 			"ariaRequired": this.required,
 			"ariaLabel": getEffectiveAriaLabelText(this),
@@ -637,7 +682,7 @@ class DatePicker extends DateComponentBase {
 	}
 
 	get openIconTitle() {
-		return this.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
+		return DatePicker.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
 	}
 
 	get openIconName() {
@@ -645,7 +690,7 @@ class DatePicker extends DateComponentBase {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
+		return DatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
 	}
 
 	/**
@@ -675,19 +720,32 @@ class DatePicker extends DateComponentBase {
 		const newValue = event.detail.values && event.detail.values[0];
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 
-		this._focusInputAfterClose = true;
 		this.closePicker();
 	}
 
+	/**
+	 * The user clicked the "month" button in the header
+	 */
+	onHeaderShowMonthPress() {
+		this._calendarCurrentPicker = "month";
+	}
+
+	/**
+	 * The user clicked the "year" button in the header
+	 */
+	onHeaderShowYearPress() {
+		this._calendarCurrentPicker = "year";
+	}
+
 	/**
 	 * Formats a Java Script date object into a string representing a locale date
 	 * according to the <code>formatPattern</code> property of the DatePicker instance
-	 * @param {object} oDate A Java Script date object to be formatted as string
+	 * @param {object} date A Java Script date object to be formatted as string
 	 * @returns {string} The date as string
 	 * @public
 	 */
-	formatValue(oDate) {
-		return this.getFormat().format(oDate);
+	formatValue(date) {
+		return this.getFormat().format(date);
 	}
 
 	/**
@@ -709,7 +767,7 @@ class DatePicker extends DateComponentBase {
 		this._calendarCurrentPicker = "day";
 		this.responsivePopover = await this._respPopover();
 
-		this.responsivePopover.open(this);
+		this.responsivePopover.showAt(this);
 	}
 
 	togglePicker() {
@@ -737,11 +795,11 @@ class DatePicker extends DateComponentBase {
 	 * @public
 	 */
 	get dateValue() {
-		return this.getFormat().parse(this.value);
+		return this.liveValue ? this.getFormat().parse(this.liveValue) : this.getFormat().parse(this.value);
 	}
 
 	get dateValueUTC() {
-		return this.getFormat().parse(this.value, true);
+		return this.liveValue ? this.getFormat().parse(this.liveValue, true) : this.getFormat().parse(this.value);
 	}
 
 	get styles() {