@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

package/src/ComboBoxFilters.js

@@ -30,4 +30,11 @@ const Contains = (value, items) => {
 	});
 };
 
-export { StartsWithPerTerm, StartsWith, Contains };
+const None = (_, items) => items;
+
+export {
+	StartsWithPerTerm,
+	StartsWith,
+	Contains,
+	None,
+};

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

@@ -1,9 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import ComboBoxItemTemplate from "./generated/templates/ComboBoxItemTemplate.lit.js";
-
-// Styles
-import ComboBoxItemCss from "./generated/themes/ComboBoxItem.css.js";
 
 /**
  * @public
@@ -12,19 +7,22 @@ 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 ""
 		 * @public
 		 */
 		text: { type: String },
-	},
-	slots: {
-		//
-	},
-	events: {
-		//
+		/**
+		 * Defines the additional text of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.11
+		 * @public
+		 */
+		additionalText: { type: String },
 	},
 };
 
@@ -37,24 +35,13 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.ComboBoxItem
  * @extends UI5Element
  * @tagname ui5-cb-item
+ * @implements sap.ui.webcomponents.main.IComboBoxItem
  * @public
  */
 class ComboBoxItem extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return ComboBoxItemCss;
-	}
-
-	static get template() {
-		return ComboBoxItemTemplate;
-	}
 }
 
 ComboBoxItem.define();

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">
@@ -25,15 +26,15 @@
 			>
 			</ui5-button>
 		</div>
+
 		<div class="row">
 			<div
-				slot="header"
 				class="input-root-phone"
 				value-state="{{valueState}}"
 			>
 				<input
 					class="ui5-input-inner-phone"
-					.value="{{_tempValue}}"
+					.value="{{value}}"
 					inner-input
 					placeholder="{{placeholder}}"
 					value-state="{{valueState}}"
@@ -44,22 +45,47 @@
 				/>
 			</div>
 		</div>
+
+		{{#if hasValueStateText}}
+			<div class="row {{classes.popoverValueState}}">
+				{{> valueStateMessage}}
+			</div>
+		{{/if}}
 	</div>
 
+	{{#unless _isPhone}}
+		{{#if hasValueStateText}}
+			<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}}
+	{{/unless}}
+
 	<ui5-list
 		separators="None"
 		@ui5-item-click={{_selectItem}}
 		@ui5-item-focused={{_onItemFocus}}
+		@mousedown={{_itemMousedown}}
 		mode="SingleSelect"
 	>
 		{{#each _filteredItems}}
-			<ui5-li
-				type="Active"
-				.mappedItem={{this}}
-				?selected={{this.selected}}
-			>
-				{{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>
 
@@ -69,4 +95,31 @@
 			@click="{{_closeRespPopover}}"
 		>OK</ui5-button>
 	</div>
-</ui5-responsive-popover>
+</ui5-responsive-popover>
+
+{{#if shouldOpenValueStateMessagePopover}}
+	<ui5-popover
+		skip-registry-update
+		_disable-initial-focus
+		prevent-focus-restore
+		no-padding
+		hide-arrow
+		class="ui5-valuestatemessage-popover"
+		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>
+{{/if}}
+
+{{#*inline "valueStateMessage"}}
+	{{#if shouldDisplayDefaultValueStateMessage}}
+		{{valueStateText}}
+	{{else}}
+		{{#each valueStateMessageText}}
+			{{this}}
+		{{/each}}
+	{{/if}}
+{{/inline}}

package/src/CustomListItem.js

@@ -1,3 +1,4 @@
+import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import ListItem from "./ListItem.js";
 import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
 
@@ -12,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
@@ -22,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,
+		},
 	},
 };
 
@@ -31,13 +44,14 @@ 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
  * @alias sap.ui.webcomponents.main.CustomListItem
  * @extends ListItem
  * @tagname ui5-li-custom
+ * @implements sap.ui.webcomponents.main.IListItem
  * @public
  */
 class CustomListItem extends ListItem {
@@ -50,7 +64,27 @@ class CustomListItem extends ListItem {
 	}
 
 	static get styles() {
-		return [...ListItem.styles, customListItemCss];
+		return [ListItem.styles, customListItemCss];
+	}
+
+	_onkeydown(event) {
+		const isTab = isTabNext(event) || isTabPrevious(event);
+
+		if (!isTab && !this.focused) {
+			return;
+		}
+
+		super._onkeydown(event);
+	}
+
+	_onkeyup(event) {
+		const isTab = isTabNext(event) || isTabPrevious(event);
+
+		if (!isTab && !this.focused) {
+			return;
+		}
+
+		super._onkeyup(event);
 	}
 
 	get classes() {

package/src/DateComponentBase.js

@@ -0,0 +1,170 @@
+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 { 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";
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	languageAware: true,
+	properties: /** @lends  sap.ui.webcomponents.main.DateComponentBase.prototype */ {
+		/**
+		 * Sets a calendar type used for display.
+		 * If not set, the calendar type of the global configuration is used.
+		 * @type {CalendarType}
+		 * @public
+		 */
+		primaryCalendarType: {
+			type: CalendarType,
+		},
+
+		/**
+		 * 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 ""
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		minDate: {
+			type: String,
+		},
+
+		/**
+		 * Determines the maximum date available for selection.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		maxDate: {
+			type: String,
+		},
+
+		/**
+		 * Determines the format, displayed in the input field.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		formatPattern: {
+			type: String,
+		},
+	},
+};
+
+/**
+ * @class
+ *
+ * Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker)
+ * This includes:
+ *  - "languageAware: true" metadata setting, CLDR fetch and i18n initialization
+ *  - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them
+ *  - additional common methods
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.DateComponentBase
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @public
+ */
+class DateComponentBase extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	constructor() {
+		super();
+	}
+
+	get _primaryCalendarType() {
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
+	}
+
+	get _minDate() {
+		return this.minDate && this.getFormat().parse(this.minDate) ? this._getCalendarDateFromString(this.minDate) : getMinCalendarDate(this._primaryCalendarType);
+	}
+
+	get _maxDate() {
+		return this.maxDate && this.getFormat().parse(this.maxDate) ? this._getCalendarDateFromString(this.maxDate) : getMaxCalendarDate(this._primaryCalendarType);
+	}
+
+	get _formatPattern() {
+		return this.formatPattern || "medium"; // get from config
+	}
+
+	get _isPattern() {
+		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+	}
+
+	_getCalendarDateFromString(value) {
+		const jsDate = this.getFormat().parse(value);
+		if (jsDate) {
+			return CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);
+		}
+	}
+
+	_getTimeStampFromString(value) {
+		const calDate = this._getCalendarDateFromString(value);
+		if (calDate) {
+			return calDate.toUTCJSDate().valueOf();
+		}
+	}
+
+	_getStringFromTimestamp(timestamp) {
+		const localDate = new Date(timestamp);
+		return this.getFormat().format(localDate, true);
+	}
+
+	getFormat() {
+		let dateFormat;
+		if (this._isPattern) {
+			dateFormat = DateFormat.getInstance({
+				pattern: this._formatPattern,
+				calendarType: this._primaryCalendarType,
+			});
+		} else {
+			dateFormat = DateFormat.getInstance({
+				style: this._formatPattern,
+				calendarType: this._primaryCalendarType,
+			});
+		}
+		return dateFormat;
+	}
+
+	static async onDefine() {
+		[DateComponentBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+		]);
+	}
+}
+
+export default DateComponentBase;

package/src/DatePicker.hbs

@@ -1,7 +1,6 @@
 <div
 		class="ui5-date-picker-root"
 		style="{{styles.main}}"
-		@keydown={{_onkeydown}}
 >
 	<!-- INPUT -->
 	<ui5-input
@@ -11,12 +10,15 @@
 			type="{{type}}"
 			value="{{value}}"
 			?disabled="{{disabled}}"
+			?required="{{required}}"
 			?readonly="{{readonly}}"
 			value-state="{{valueState}}"
-			@ui5-change="{{_handleInputChange}}"
-			@ui5-input="{{_handleInputLiveChange}}"
 			data-sap-focus-ref
 			._inputAccInfo ="{{accInfo}}"
+			@ui5-change="{{_onInputChange}}"
+			@ui5-input="{{_onInputInput}}"
+			@ui5-submit="{{_onInputSubmit}}"
+			@keydown="{{_onkeydown}}"
 	>
 
 		{{#if valueStateMessage.length}}