@ui5/webcomponents 0.0.0-11d529e8a → 0.0.0-1e08ebdef

package/src/CheckBox.js

@@ -1,7 +1,7 @@
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -275,8 +275,6 @@ class CheckBox extends UI5Element {
 			document.addEventListener("mouseup", this._deactivate);
 			isGlobalHandlerAttached = true;
 		}
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -300,6 +298,10 @@ class CheckBox extends UI5Element {
 	}
 
 	_onmousedown() {
+		if (this.readonly || this.disabled) {
+			return;
+		}
+
 		this.active = true;
 		activeCb = this; // eslint-disable-line
 	}
@@ -353,12 +355,10 @@ class CheckBox extends UI5Element {
 	}
 
 	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Error": CheckBox.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": CheckBox.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": CheckBox.i18nBundle.getText(VALUE_STATE_SUCCESS),
 		};
 	}
 
@@ -415,7 +415,7 @@ class CheckBox extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		CheckBox.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/ColorPalette.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
@@ -182,12 +182,16 @@ class ColorPalette extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		const ColorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
+
+		[ColorPalette.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			ColorPaletteMoreColors ? ColorPaletteMoreColors.init() : Promise.resolve(),
+		]);
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._itemNavigation = new ItemNavigation(this, {
 			getItemsCallback: () => this.displayedColors,
 			rowSize: this.rowSize,
@@ -404,11 +408,11 @@ class ColorPalette extends UI5Element {
 	}
 
 	get colorContainerLabel() {
-		return this.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
+		return ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
 	}
 
 	get colorPaleteMoreColorsText() {
-		return this.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
+		return ColorPalette.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
 	}
 
 	get _showMoreColors() {

package/src/ColorPaletteItem.hbs

@@ -1,6 +1,6 @@
 <div
 	class="ui5-cp-item"
-	style="background-color: {{value}}"
+	style="{{styles.root}}"
 	value="{{value}}"
 	tabindex="{{_tabIndex}}"
 	role="button"
@@ -8,4 +8,4 @@
 	title="{{colorLabel}} - {{index}}: {{this.value}}"
 	?disabled="{{_disabled}}"
 >
-</div>
+</div>

package/src/ColorPaletteItem.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import ColorPaletteItemTemplate from "./generated/templates/ColorPaletteItemTemplate.lit.js";
@@ -107,12 +107,11 @@ class ColorPaletteItem extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ColorPaletteItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -121,7 +120,15 @@ class ColorPaletteItem extends UI5Element {
 	}
 
 	get colorLabel() {
-		return this.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+		return ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+	}
+
+	get styles() {
+		return {
+			root: {
+				"background-color": this.value,
+			},
+		};
 	}
 }
 

package/src/ColorPalettePopover.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import ColorPalettePopoverTemplate from "./generated/templates/ColorPalettePopoverTemplate.lit.js";
 
@@ -58,7 +58,6 @@ const metadata = {
 		 * Defines the default color of the component.
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
 		 * @type {CSSColor}
-		 * @defaultValue ""
 		 * @public
 		 */
 		defaultColor: {
@@ -151,12 +150,11 @@ class ColorPalettePopover extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ColorPalettePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_respPopover() {
@@ -208,11 +206,11 @@ class ColorPalettePopover extends UI5Element {
 	}
 
 	get _colorPaletteTitle() {
-		return this.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
+		return ColorPalettePopover.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
 	}
 
 	get _cancelButtonLabel() {
-		return this.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+		return ColorPalettePopover.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
 	}
 }
 

package/src/ColorPicker.js

@@ -30,7 +30,7 @@ const metadata = {
 		 * Defines the currently selected color of the component.
 		 * <br><br>
 		 * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
-		 * @type {String}
+		 * @type {CSSColor}
 		 * @public
 		 */
 		color: {

package/src/ComboBox.hbs

@@ -26,6 +26,10 @@
 		data-sap-focus-ref
 	/>
 
+	{{#if readonly}}
+		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
+	{{/if}}
+
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}

package/src/ComboBox.js

@@ -1,12 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	isBackSpace,
@@ -16,6 +17,8 @@ import {
 	isDown,
 	isEnter,
 	isEscape,
+	isTabNext,
+	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import * as Filters from "./ComboBoxFilters.js";
 
@@ -39,6 +42,7 @@ import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 import ComboBoxItem from "./ComboBoxItem.js";
 import Icon from "./Icon.js";
@@ -367,7 +371,7 @@ class ComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, ComboBoxPopoverCss, SuggestionsCss];
 	}
 
 	static get template() {
@@ -385,7 +389,6 @@ class ComboBox extends UI5Element {
 		this._initialRendering = true;
 		this._itemFocused = false;
 		this._selectionChanged = false;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -399,7 +402,6 @@ class ComboBox extends UI5Element {
 
 		this._selectMatchingItem();
 		this._initialRendering = false;
-		this._isKeyNavigation = false;
 	}
 
 	async onAfterRendering() {
@@ -417,6 +419,15 @@ class ComboBox extends UI5Element {
 
 		this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
 		this.storeResponsivePopoverWidth();
+
+		// Safari is quite slow and does not preserve text highlighting on control rerendering.
+		// That's why we need to restore it "manually".
+		if (isSafari() && this._autocomplete && this.filterValue !== this.value) {
+			this.inner.setSelectionRange(
+				(this._isKeyNavigation ? 0 : this.filterValue.length),
+				this.value.length,
+			);
+		}
 	}
 
 	shouldClosePopover() {
@@ -428,6 +439,8 @@ class ComboBox extends UI5Element {
 
 		this._lastValue = this.value;
 
+		this._autocomplete = false;
+
 		!isPhone() && event.target.setSelectionRange(0, this.value.length);
 	}
 
@@ -515,6 +528,10 @@ class ComboBox extends UI5Element {
 		this._toggleRespPopover();
 	}
 
+	_readonlyIconClick() {
+		this.inner.focus();
+	}
+
 	_input(event) {
 		const { value } = event.target;
 
@@ -533,10 +550,11 @@ class ComboBox extends UI5Element {
 		this._clearFocus();
 
 		// autocomplete
-		if (this._autocomplete && value !== "") {
-			const item = this._autoCompleteValue(value);
+		if (this._autocomplete) {
+			const item = this._getFirstMatchingItem(value);
+			this._applyAtomicValueAndSelection(item, value, true);
 
-			if (!this._selectionChanged && (item && !item.selected && !item.isGroupItem)) {
+			if (value !== "" && !this._selectionChanged && (item && !item.selected && !item.isGroupItem)) {
 				this.fireEvent("selection-change", {
 					item,
 				});
@@ -551,7 +569,7 @@ class ComboBox extends UI5Element {
 			return;
 		}
 
-		if (!this._filteredItems.length) {
+		if (!this._filteredItems.length || value === "") {
 			this._closeRespPopover();
 		} else {
 			this._openRespPopover();
@@ -633,7 +651,8 @@ class ComboBox extends UI5Element {
 		this._announceSelectedItem(indexOfItem);
 
 		// autocomplete
-		const item = this._autoCompleteValue(this.value);
+		const item = this._getFirstMatchingItem(this.value);
+		this._applyAtomicValueAndSelection(item, "", true);
 
 		if ((item && !item.selected)) {
 			this.fireEvent("selection-change", {
@@ -690,6 +709,7 @@ class ComboBox extends UI5Element {
 	_keydown(event) {
 		const isArrowKey = isDown(event) || isUp(event);
 		this._autocomplete = !(isBackSpace(event) || isDelete(event));
+		this._isKeyNavigation = false;
 
 		if (isArrowKey) {
 			this.handleArrowKeyPress(event);
@@ -707,6 +727,10 @@ class ComboBox extends UI5Element {
 			this._isValueStateFocused = false;
 		}
 
+		if ((isTabNext(event) || isTabPrevious(event)) && this.open) {
+			this._closeRespPopover();
+		}
+
 		if (isShow(event) && !this.readonly && !this.disabled) {
 			event.preventDefault();
 
@@ -775,7 +799,7 @@ class ComboBox extends UI5Element {
 		}
 	}
 
-	_autoCompleteValue(current) {
+	_getFirstMatchingItem(current) {
 		const currentlyFocusedItem = this.items.find(item => item.focused === true);
 
 		if (currentlyFocusedItem && currentlyFocusedItem.isGroupItem) {
@@ -785,24 +809,20 @@ class ComboBox extends UI5Element {
 
 		const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem);
 
-		let value;
-		if (matchingItems.length) {
-			value = matchingItems[0] ? matchingItems[0].text : current;
-		} else {
-			value = current;
-		}
-
-		this._applyAtomicValueAndSelection(value, this._isKeyNavigation || matchingItems.length);
-
 		if (matchingItems.length) {
 			return matchingItems[0];
 		}
 	}
 
-	_applyAtomicValueAndSelection(value, highlightValue) {
+	_applyAtomicValueAndSelection(item, filterValue, highlightValue) {
+		if (!item) {
+			return;
+		}
+
+		const value = (item && item.text) || "";
 		this.inner.value = value;
 		if (highlightValue) {
-			this.inner.setSelectionRange(this.filterValue.length, value.length);
+			this.inner.setSelectionRange(filterValue.length, value.length);
 		}
 		this.value = value;
 	}
@@ -872,18 +892,18 @@ class ComboBox extends UI5Element {
 	}
 
 	_announceSelectedItem(indexOfItem) {
-		const itemPositionText = this.i18nBundle.getText(LIST_ITEM_POSITION, [indexOfItem + 1], [this._filteredItems.length]);
-		const itemSelectionText = this.i18nBundle.getText(LIST_ITEM_SELECTED);
+		const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
+		const itemSelectionText = ComboBox.i18nBundle.getText(LIST_ITEM_SELECTED);
 
 		announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return ComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _iconAccessibleNameText() {
-		return this.i18nBundle.getText(SELECT_OPTIONS);
+		return ComboBox.i18nBundle.getText(SELECT_OPTIONS);
 	}
 
 	get inner() {
@@ -922,15 +942,15 @@ class ComboBox extends UI5Element {
 
 	get valueStateTextMappings() {
 		return {
-			"Success": this.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Error": this.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": this.i18nBundle.getText(VALUE_STATE_WARNING),
-			"Information": this.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Success": ComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Error": ComboBox.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": ComboBox.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Information": ComboBox.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 
 	get shouldOpenValueStateMessagePopover() {
-		return this.focused && this.hasValueStateText && !this._iconPressed
+		return this.focused && !this.readonly && this.hasValueStateText && !this._iconPressed
 			&& !this.open && !this._isPhone;
 	}
 
@@ -938,6 +958,24 @@ class ComboBox extends UI5Element {
 		return !this.valueStateMessage.length && this.hasValueStateText;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get open() {
 		return this.responsivePopover ? this.responsivePopover.opened : false;
 	}
@@ -968,6 +1006,10 @@ class ComboBox extends UI5Element {
 		];
 	}
 
+	static async onDefine() {
+		ComboBox.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
 	get styles() {
 		return {
 			popoverHeader: {
@@ -976,14 +1018,18 @@ class ComboBox extends UI5Element {
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth}px`,
-				"padding": "0.9125rem 1rem",
 			},
 		};
 	}
 
 	get classes() {
 		return {
+			popover: {
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateText,
+			},
 			popoverValueState: {
+				"ui5-valuestatemessage-header": true,
 				"ui5-valuestatemessage-root": true,
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,

package/src/ComboBoxPopover.hbs

@@ -1,4 +1,5 @@
 <ui5-responsive-popover
+	class="{{classes.popover}}"
 	hide-arrow
 	content-only-on-desktop
 	_disable-initial-focus
@@ -55,6 +56,7 @@
 	{{#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}}
@@ -103,9 +105,11 @@
 		no-padding
 		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/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";
@@ -101,7 +101,6 @@ class DateComponentBase extends UI5Element {
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	get _primaryCalendarType() {
@@ -161,9 +160,9 @@ class DateComponentBase extends UI5Element {
 	}
 
 	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

@@ -319,8 +319,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>
@@ -353,7 +353,7 @@ const metadata = {
  * {
  *	"calendarType": "Japanese"
  * }
- * &lt;/script&gt;</code>
+ * &lt;/script&gt;</code></pre>
  *
  * <h3>ES6 Module Import</h3>
  *
@@ -641,7 +641,7 @@ class DatePicker extends DateComponentBase {
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return DatePicker.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get phone() {
@@ -674,7 +674,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() {
@@ -682,7 +682,7 @@ class DatePicker extends DateComponentBase {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
+		return DatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
 	}
 
 	/**

package/src/DateRangePicker.js

@@ -84,6 +84,28 @@ class DateRangePicker extends DatePicker {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
+	/**
+	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValue() {
+		return null;
+	}
+
+	/**
+	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValueUTC() {
+		return null;
+	}
+
 	get _startDateTimestamp() {
 		return this._extractFirstTimestamp(this.value);
 	}
@@ -156,7 +178,7 @@ class DateRangePicker extends DatePicker {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATERANGE_DESCRIPTION);
+		return DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);
 	}
 
 	/**

package/src/DateTimePicker.js

@@ -262,19 +262,19 @@ class DateTimePicker extends DatePicker {
 	}
 
 	get btnOKLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+		return DateTimePicker.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
 	}
 
 	get btnCancelLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+		return DateTimePicker.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
 	}
 
 	get btnDateLabel() {
-		return this.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
+		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
 	}
 
 	get btnTimeLabel() {
-		return this.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
+		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
 	}
 
 	get showFooter() {
@@ -294,7 +294,7 @@ class DateTimePicker extends DatePicker {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATETIME_DESCRIPTION);
+		return DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);
 	}
 
 	/**
@@ -314,12 +314,13 @@ class DateTimePicker extends DatePicker {
 	 */
 	onSelectedDatesChange(event) {
 		event.preventDefault();
+		const dateTimePickerContent = event.path ? event.path[1] : event.composedPath()[1];
 
 		this._previewValues = {
 			...this._previewValues,
 			calendarTimestamp: event.detail.timestamp,
 			calendarValue: event.detail.values[0],
-			timeSelectionValue: event.path[1].lastChild.value,
+			timeSelectionValue: dateTimePickerContent.lastChild.value,
 		};
 	}