@ui5/webcomponents 0.0.0-453158269 → 0.0.0-49cef2d02

package/src/ComboBox.js

@@ -36,10 +36,14 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_INFORMATION,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
-	LIST_ITEM_SELECTED,
+	LIST_ITEM_GROUP_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -70,12 +74,14 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
 const metadata = {
 	tag: "ui5-combobox",
 	languageAware: true,
-	properties: /** @lends sap.ui.webcomponents.main.ComboBox.prototype */ {
+	properties: /** @lends sap.ui.webc.main.ComboBox.prototype */ {
 		/**
 		 * Defines the value of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -137,7 +143,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webc.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -212,7 +218,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -252,11 +258,11 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.main.ComboBox.prototype */ {
+	slots: /** @lends sap.ui.webc.main.ComboBox.prototype */ {
 		/**
 		 * Defines the component items.
 		 *
-		 * @type {sap.ui.webcomponents.main.IComboBoxItem[]}
+		 * @type {sap.ui.webc.main.IComboBoxItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -286,7 +292,7 @@ const metadata = {
 		/**
 		 * Defines the icon to be displayed in the input field.
 		 *
-		 * @type {sap.ui.webcomponents.main.IIcon}
+		 * @type {sap.ui.webc.main.IIcon}
 		 * @slot
 		 * @public
 		 * @since 1.0.0-rc.9
@@ -295,7 +301,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.main.ComboBox.prototype */ {
+	events: /** @lends sap.ui.webc.main.ComboBox.prototype */ {
 		/**
 		 * Fired when the input operation has finished by pressing Enter, focusout or an item is selected.
 		 *
@@ -316,7 +322,7 @@ const metadata = {
 		/**
 		 * Fired when selection is changed by user interaction
 		 *
-		 * @event sap.ui.webcomponents.main.ComboBox#selection-change
+		 * @event sap.ui.webc.main.ComboBox#selection-change
 		 * @param {HTMLElement} item item to be selected.
 		 * @public
 		 */
@@ -370,8 +376,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ComboBox
- * @extends UI5Element
+ * @alias sap.ui.webc.main.ComboBox
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-combobox
  * @appenddocs ComboBoxItem ComboBoxGroupItem
  * @public
@@ -550,6 +556,10 @@ class ComboBox extends UI5Element {
 		this.inner.focus();
 		this._resetFilter();
 
+		if (isPhone() && this.value && !this._lastValue) {
+			this._lastValue = this.value;
+		}
+
 		this._toggleRespPopover();
 	}
 
@@ -661,12 +671,12 @@ class ComboBox extends UI5Element {
 		this._isValueStateFocused = false;
 		this._selectionChanged = true;
 
+		this._announceSelectedItem(indexOfItem);
+
 		if (isGroupItem && isOpen) {
 			return;
 		}
 
-		this._announceSelectedItem(indexOfItem);
-
 		// autocomplete
 		const item = this._getFirstMatchingItem(this.value);
 		this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : null), true);
@@ -779,8 +789,9 @@ class ComboBox extends UI5Element {
 		}
 
 		if (isEnter(event)) {
+			this._fireChangeEvent();
+
 			if (this.responsivePopover.opened) {
-				this._fireChangeEvent();
 				this._closeRespPopover();
 				this.focused = true;
 			} else if (this.FormSupport) {
@@ -828,11 +839,20 @@ class ComboBox extends UI5Element {
 	}
 
 	_closeRespPopover(event) {
-		if (isPhone() && event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
+		if (event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
 			this.value = this._selectedItemText;
 			this.filterValue = this._selectedItemText;
 		}
 
+		if (event && event.target.classList.contains("ui5-responsive-popover-close-btn")) {
+			this.value = this._lastValue ? this._lastValue : "";
+			this.filterValue = this._lastValue ? this._lastValue : "";
+		}
+
+		if (isPhone()) {
+			this._fireChangeEvent();
+		}
+
 		this._isValueStateFocused = false;
 		this._clearFocus();
 
@@ -933,6 +953,7 @@ class ComboBox extends UI5Element {
 		const sameSelectionPerformed = this.value.toLowerCase() === this.filterValue.toLowerCase();
 
 		if (sameItemSelected && sameSelectionPerformed) {
+			this._fireChangeEvent(); // Click on an already typed, but not memoized value shouold also trigger the change event
 			return this._closeRespPopover();
 		}
 
@@ -963,10 +984,17 @@ class ComboBox extends UI5Element {
 	}
 
 	_announceSelectedItem(indexOfItem) {
+		const currentItem = this._filteredItems[indexOfItem];
+		const currentItemAdditionalText = currentItem.additionalText;
+		const isGroupItem = currentItem && currentItem.isGroupItem;
 		const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
-		const itemSelectionText = ComboBox.i18nBundle.getText(LIST_ITEM_SELECTED);
+		const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
 
-		announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
+		if (isGroupItem) {
+			announce(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, "Polite");
+		} else {
+			announce(`${currentItemAdditionalText} ${itemPositionText}`.trim(), "Polite");
+		}
 	}
 
 	get _headerTitleText() {
@@ -999,7 +1027,19 @@ class ComboBox extends UI5Element {
 		return this.hasValueState && this.valueState !== ValueState.Success;
 	}
 
-	get valueStateText() {
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+		}
+
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+	}
+
+	get valueStateDefaultText() {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
@@ -1020,6 +1060,15 @@ class ComboBox extends UI5Element {
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	get shouldOpenValueStateMessagePopover() {
 		return this.focused && !this.readonly && this.hasValueStateText && !this._iconPressed
 			&& !this.open && !this._isPhone;
@@ -1083,6 +1132,7 @@ class ComboBox extends UI5Element {
 	}
 
 	get styles() {
+		const remSizeInPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 		return {
 			popoverHeader: {
 				"width": `${this.offsetWidth}px`,
@@ -1091,6 +1141,10 @@ class ComboBox extends UI5Element {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth}px`,
 			},
+			suggestionsPopover: {
+				"min-width": `${this.offsetWidth}px`,
+				"max-width": (this.offsetWidth / remSizeInPx) > 40 ? `${this.offsetWidth}px` : "40rem",
+			},
 		};
 	}
 

package/src/ComboBoxGroupItem.js

@@ -6,7 +6,7 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
  */
 const metadata = {
 	tag: "ui5-cb-group-item",
-	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.ComboBoxGroupItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -25,24 +25,24 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webc.main.ComboBoxGroupItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	events: /** @lends sap.ui.webc.main.ComboBoxGroupItem.prototype */ {
 	},
 };
 
 /**
  * @class
- * The <code>ui5-combobox-group-item</code> is type of suggestion item,
+ * The <code>ui5-cb-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
+ * @alias sap.ui.webc.main.ComboBoxGroupItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-cb-group-item
  * @public
- * @implements sap.ui.webcomponents.main.IComboBoxItem
+ * @implements sap.ui.webc.main.IComboBoxItem
  * @since 1.0.0-rc.15
  */
 class ComboBoxGroupItem extends UI5Element {

package/src/ComboBoxItem.js

@@ -5,7 +5,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  */
 const metadata = {
 	tag: "ui5-cb-item",
-	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
+	properties: /** @lends sap.ui.webc.main.ComboBoxItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -32,10 +32,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.ComboBoxItem
- * @extends UI5Element
+ * @alias sap.ui.webc.main.ComboBoxItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-cb-item
- * @implements sap.ui.webcomponents.main.IComboBoxItem
+ * @implements sap.ui.webc.main.IComboBoxItem
  * @public
  */
 class ComboBoxItem extends UI5Element {

package/src/ComboBoxPopover.hbs

@@ -1,10 +1,10 @@
 <ui5-responsive-popover
 	class="{{classes.popover}}"
 	hide-arrow
-	content-only-on-desktop
 	_disable-initial-focus
 	placement-type="Bottom"
-	horizontal-align="Stretch"
+	horizontal-align="Left"
+	style="{{styles.suggestionsPopover}}"
 	@ui5-after-open={{_afterOpenPopover}}
 	@ui5-after-close={{_afterClosePopover}}
 >
@@ -15,48 +15,50 @@
 	>
 	</ui5-busy-indicator>
 
-	<div slot="header" class="ui5-responsive-popover-header">
-		<div class="row">
-			<span>{{_headerTitleText}}</span>
-			<ui5-button
-				class="ui5-responsive-popover-close-btn"
-				icon="decline"
-				design="Transparent"
-				@click="{{_closeRespPopover}}"
-			>
-			</ui5-button>
-		</div>
+	{{#if _isPhone}}
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<span>{{_headerTitleText}}</span>
+				<ui5-button
+					class="ui5-responsive-popover-close-btn"
+					icon="decline"
+					design="Transparent"
+					@click="{{_closeRespPopover}}"
+				>
+				</ui5-button>
+			</div>
 
-		<div class="row">
-			<div
-				class="input-root-phone"
-				value-state="{{valueState}}"
-			>
-				<input
-					class="ui5-input-inner-phone"
-					.value="{{value}}"
-					inner-input
-					placeholder="{{placeholder}}"
+			<div class="row">
+				<div
+					class="input-root-phone"
 					value-state="{{valueState}}"
-					@input="{{_input}}"
-					@change="{{_inputChange}}"
-					@keydown="{{_keydown}}"
-					aria-autocomplete="both"
-				/>
+				>
+					<input
+						class="ui5-input-inner-phone"
+						.value="{{value}}"
+						inner-input
+						placeholder="{{placeholder}}"
+						value-state="{{valueState}}"
+						@input="{{_input}}"
+						@change="{{_inputChange}}"
+						@keydown="{{_keydown}}"
+						aria-autocomplete="both"
+					/>
+				</div>
 			</div>
-		</div>
 
-		{{#if hasValueStateText}}
-			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
-				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-				{{> valueStateMessage}}
-			</div>
-		{{/if}}
-	</div>
+			{{#if hasValueStateText}}
+				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+					{{> valueStateMessage}}
+				</div>
+			{{/if}}
+		</div>
+	{{/if}}
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateText}}
-			<div class="ui5-responsive-popover-header {{classes.popoverValueState}}" ?focused={{_isValueStateFocused}} tabindex="0" style="{{styles.suggestionPopoverHeader}}">
+			<div slot="header" 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>
@@ -90,12 +92,14 @@
 		{{/each}}
 	</ui5-list>
 
-	<div slot="footer" class="ui5-responsive-popover-footer">
-		<ui5-button
-			design="Transparent"
-			@click="{{_closeRespPopover}}"
-		>OK</ui5-button>
-	</div>
+	{{#if _isPhone}}
+		<div slot="footer" class="ui5-responsive-popover-footer">
+			<ui5-button
+				design="Transparent"
+				@click="{{_closeRespPopover}}"
+			>OK</ui5-button>
+		</div>
+	{{/if}}
 </ui5-responsive-popover>
 
 {{#if shouldOpenValueStateMessagePopover}}
@@ -117,7 +121,7 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}

package/src/CustomListItem.ts

@@ -0,0 +1,89 @@
+import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import type { ClassMap, ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import ListItem from "./ListItem.js";
+import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
+
+// Styles
+import customListItemCss from "./generated/themes/CustomListItem.css.js";
+
+/**
+ * @class
+ *
+ * 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 component accepts arbitrary HTML content to allow full customization.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.CustomListItem
+ * @extends sap.ui.webc.main.ListItem
+ * @tagname ui5-li-custom
+ * @implements sap.ui.webc.main.IListItem
+ * @public
+ */
+@customElement("ui5-li-custom")
+class CustomListItem extends ListItem {
+	/**
+	 * Defines the text alternative of the component.
+	 * Note: If not provided a default text alternative will be set, if present.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.CustomListItem.prototype.accessibleName
+	 * @defaultvalue ""
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property()
+	accessibleName!: string;
+
+	/**
+	 * Defines the content of the component.
+	 * @type {Node[]}
+	 * @name sap.ui.webc.main.CustomListItem.prototype.default
+	 * @slot
+	 * @public
+	 */
+
+	static get template() {
+		return CustomListItemTemplate;
+	}
+
+	static get styles(): ComponentStylesData {
+		return [ListItem.styles, customListItemCss];
+	}
+
+	_onkeydown(e: KeyboardEvent) {
+		const isTab = isTabNext(e) || isTabPrevious(e);
+
+		if (!isTab && !this.focused) {
+			return;
+		}
+
+		super._onkeydown(e);
+	}
+
+	_onkeyup(e: KeyboardEvent) {
+		const isTab = isTabNext(e) || isTabPrevious(e);
+
+		if (!isTab && !this.focused) {
+			return;
+		}
+
+		super._onkeyup(e);
+	}
+
+	get classes(): ClassMap {
+		const result = super.classes;
+
+		result.main["ui5-custom-li-root"] = true;
+
+		return result;
+	}
+}
+
+CustomListItem.define();
+
+export default CustomListItem;

package/src/DateComponentBase.ts

@@ -0,0 +1,174 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import languageAware from "@ui5/webcomponents-base/dist/decorators/languageAware.js";
+import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle 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";
+
+/**
+ * @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.webc.main.DateComponentBase
+ * @extends sap.ui.webc.base.UI5Element
+ * @public
+ */
+@languageAware
+class DateComponentBase extends UI5Element {
+	/**
+	 * Sets a calendar type used for display.
+	 * If not set, the calendar type of the global configuration is used.
+	 * @type {sap.ui.webc.base.types.CalendarType}
+	 * @name sap.ui.webc.main.DateComponentBase.prototype.primaryCalendarType
+	 * @public
+	 */
+	@property({ type: CalendarType })
+	primaryCalendarType?: CalendarType;
+
+	/**
+	 * Defines the secondary calendar type.
+	 * If not set, the calendar will only show the primary calendar type.
+	 * @type {sap.ui.webc.base.types.CalendarType}
+	 * @name sap.ui.webc.main.DateComponentBase.prototype.secondaryCalendarType
+	 * @since 1.0.0-rc.16
+	 * @defaultvalue undefined
+	 * @public
+	 */
+	@property({ type: CalendarType })
+	secondaryCalendarType?: CalendarType;
+
+	/**
+	 * Determines the format, displayed in the input field.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.DateComponentBase.prototype.formatPattern
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	formatPattern!: string;
+
+	/**
+	 * Determines the minimum date available for selection.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.DateComponentBase.prototype.minDate
+	 * @defaultvalue ""
+	 * @since 1.0.0-rc.6
+	 * @public
+	 */
+	@property()
+	minDate!: string;
+
+	/**
+	 * Determines the maximum date available for selection.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.DateComponentBase.prototype.maxDate
+	 * @defaultvalue ""
+	 * @since 1.0.0-rc.6
+	 * @public
+	 */
+	@property()
+	maxDate!: string;
+
+	static i18nBundle?: I18nBundle;
+
+	static get render() {
+		return litRender;
+	}
+
+	constructor() {
+		super();
+	}
+
+	get _primaryCalendarType() {
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
+	}
+
+	get _minDate() {
+		// <b>Note:</b> Format#parse accepts only boolean type for 2nd and 3rd params,
+		// but has logic related to "undefined" value, so we're calling it with "undefined" and casting to "boolean".
+		const utc = undefined as unknown as boolean;
+		const strict = undefined as unknown as boolean;
+		return this.minDate && this.getFormat().parse(this.minDate, utc, strict) ? this._getCalendarDateFromString(this.minDate)! : getMinCalendarDate(this._primaryCalendarType);
+	}
+
+	get _maxDate() {
+		// <b>Note:</b> Format#parse accepts only boolean type for 2nd and 3rd params,
+		// but has logic related to "undefined" value, so we're calling it with "undefined" and casting to "boolean".
+		const utc = undefined as unknown as boolean;
+		const strict = undefined as unknown as boolean;
+		return this.maxDate && this.getFormat().parse(this.maxDate, utc, strict) ? 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: string) {
+		// <b>Note:</b> Format#parse accepts only boolean type for 2nd and 3rd params,
+		// but has logic related to "undefined" value, so we're calling it with "undefined" and casting to "boolean".
+		const utc = undefined as unknown as boolean;
+		const strict = undefined as unknown as boolean;
+		const jsDate = this.getFormat().parse(value, utc, strict) as Date;
+		if (jsDate) {
+			return CalendarDate.fromLocalJSDate(jsDate, this._primaryCalendarType);
+		}
+	}
+
+	_getTimeStampFromString(value: string) {
+		const calDate = this._getCalendarDateFromString(value);
+		if (calDate) {
+			return calDate.toUTCJSDate().valueOf();
+		}
+	}
+
+	_getStringFromTimestamp(timestamp: number) {
+		const localDate = new Date(timestamp);
+		return this.getFormat().format(localDate, true);
+	}
+
+	getFormat() {
+		return this._isPattern
+			? DateFormat.getDateInstance({
+				strictParsing: true,
+				pattern: this._formatPattern,
+				calendarType: this._primaryCalendarType,
+			})
+			: DateFormat.getDateInstance({
+				strictParsing: true,
+				style: this._formatPattern,
+				calendarType: this._primaryCalendarType,
+			});
+	}
+
+	static async onDefine() {
+		[DateComponentBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+		]);
+	}
+}
+
+export default DateComponentBase;