@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/dist/ComboBox.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 ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isPhone, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isAndroid, 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";
@@ -29,17 +29,21 @@ import {
 	isHome,
 	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import * as Filters from "./ComboBoxFilters.js";
+import * as Filters from "./Filters.js";
 
 import {
 	VALUE_STATE_SUCCESS,
 	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
@@ -76,6 +80,8 @@ const metadata = {
 		 *
 		 * @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.webcomponents.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: ""
@@ -371,7 +377,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ComboBox
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.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();
 	}
 
@@ -571,7 +581,7 @@ class ComboBox extends UI5Element {
 		this._clearFocus();
 
 		// autocomplete
-		if (this._autocomplete) {
+		if (this._autocomplete && !isAndroid()) {
 			const item = this._getFirstMatchingItem(value);
 			this._applyAtomicValueAndSelection(item, value, true);
 
@@ -598,7 +608,7 @@ class ComboBox extends UI5Element {
 	}
 
 	_startsWithMatchingItems(str) {
-		return Filters.StartsWith(str, this._filteredItems);
+		return Filters.StartsWith(str, this._filteredItems, "text");
 	}
 
 	_clearFocus() {
@@ -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();
 
@@ -845,7 +865,7 @@ class ComboBox extends UI5Element {
 
 	_filterItems(str) {
 		const itemsToFilter = this.items.filter(item => !item.isGroupItem);
-		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter);
+		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
 
 		// Return the filtered items and their group items
 		return this.items.filter((item, idx, allItems) => ComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
@@ -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/dist/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.webcomponents.main.ComboBoxGroupItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -25,21 +25,21 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
 	},
-	events: /** @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,
+ * 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
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-cb-group-item
  * @public
  * @implements sap.ui.webcomponents.main.IComboBoxItem

package/dist/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.webcomponents.main.ComboBoxItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -33,7 +33,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ComboBoxItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-cb-item
  * @implements sap.ui.webcomponents.main.IComboBoxItem
  * @public

package/dist/CustomListItem.js

@@ -49,7 +49,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.CustomListItem
- * @extends ListItem
+ * @extends sap.ui.webcomponents.main.ListItem
  * @tagname ui5-li-custom
  * @implements sap.ui.webcomponents.main.IListItem
  * @public

package/dist/DateComponentBase.js

@@ -15,11 +15,11 @@ import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-local
  */
 const metadata = {
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.DateComponentBase.prototype */ {
+	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}
+		 * @type {sap.ui.webcomponents.base.types.CalendarType}
 		 * @public
 		 */
 		primaryCalendarType: {
@@ -29,7 +29,7 @@ const metadata = {
 		/**
 		 * Defines the secondary calendar type.
 		 * If not set, the calendar will only show the primary calendar type.
-		 * @type {CalendarType}
+		 * @type {sap.ui.webcomponents.base.types.CalendarType}
 		 * @since 1.0.0-rc.16
 		 * @defaultvalue undefined
 		 * @public

package/dist/DatePicker.js

@@ -15,8 +15,12 @@ import {
 	isShow,
 	isF4,
 	isEnter,
+	isTabNext,
+	isTabPrevious,
+	isF6Next,
+	isF6Previous,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isDesktop } 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";
@@ -45,14 +49,15 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
  */
 const metadata = {
 	tag: "ui5-date-picker",
-	altTag: "ui5-datepicker",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
 		 * Defines a formatted date value.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
+		 * @formEvents change input
+		 * @formProperty
 		 * @public
 		 */
 		value: {
@@ -71,7 +76,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -206,7 +211,7 @@ const metadata = {
 		},
 	},
 
-	slots: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
 		 * Defines the value state message that will be displayed as pop up under the component.
 		 * <br><br>
@@ -236,7 +241,7 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
 
 		/**
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
@@ -248,7 +253,7 @@ const metadata = {
 		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		change: {
-			details: {
+			detail: {
 				value: {
 					type: String,
 				},
@@ -268,7 +273,7 @@ const metadata = {
 		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		input: {
-			details: {
+			detail: {
 				value: {
 					type: String,
 				},
@@ -364,7 +369,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DatePicker
- * @extends DateComponentBase
+ * @extends sap.ui.webcomponents.main.DateComponentBase
  * @tagname ui5-date-picker
  * @public
  */
@@ -476,6 +481,10 @@ class DatePicker extends DateComponentBase {
 			}
 		}
 
+		if ((this._getInput().isEqualNode(event.target) && this.isOpen()) && (isTabNext(event) || isTabPrevious(event) || isF6Next(event) || isF6Previous(event))) {
+			this.closePicker();
+		}
+
 		if (this.isOpen()) {
 			return;
 		}
@@ -675,10 +684,6 @@ class DatePicker extends DateComponentBase {
 		return this.phone;
 	}
 
-	get _isIE() {
-		return isIE();
-	}
-
 	get accInfo() {
 		return {
 			"ariaRoledescription": this.dateAriaDescription,
@@ -709,6 +714,14 @@ class DatePicker extends DateComponentBase {
 		return false;
 	}
 
+	/**
+	 * Defines whether the value help icon is hidden
+	 * @private
+	 */
+	get _ariaHidden() {
+		return isDesktop();
+	}
+
 	async _respPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector("[ui5-responsive-popover]");
@@ -799,7 +812,7 @@ class DatePicker extends DateComponentBase {
 	 * Currently selected date represented as a Local JavaScript Date instance.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValue() {

package/dist/DateRangePicker.js

@@ -70,7 +70,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DateRangePicker
- * @extends DatePicker
+ * @extends sap.ui.webcomponents.main.DatePicker
  * @tagname ui5-daterange-picker
  * @since 1.0.0-rc.8
  * @public
@@ -93,7 +93,7 @@ class DateRangePicker extends DatePicker {
 	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValue() {
@@ -104,7 +104,7 @@ class DateRangePicker extends DatePicker {
 	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get dateValueUTC() {
@@ -157,7 +157,7 @@ class DateRangePicker extends DatePicker {
 	 * Returns the start date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get startDateValue() {
@@ -168,7 +168,7 @@ class DateRangePicker extends DatePicker {
 	 * Returns the end date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
-	 * @type { Date }
+	 * @type {Date}
 	 * @public
 	 */
 	get endDateValue() {
@@ -294,8 +294,14 @@ class DateRangePicker extends DatePicker {
 		const valuesArray = [];
 		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);
+		// if format successfully parse the value, the value contains only single date
+		if (this.getFormat().parse(value)) {
+			valuesArray[0] = partsArray.join(this._effectiveDelimiter);
+			valuesArray[1] = "";
+		} else {
+			valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+			valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+		}
 
 		return valuesArray;
 	}

package/dist/DateTimePicker.js

@@ -101,7 +101,7 @@ const metadata = {
  * <li>typing in the input field</li>
  * </ul>
  *
- * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
+ * Programmatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
  *
  * <h3>Formatting</h3>
  *
@@ -148,7 +148,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DateTimePicker
- * @extends DatePicker
+ * @extends sap.ui.webcomponents.main.DatePicker
  * @tagname ui5-datetime-picker
  * @since 1.0.0-rc.7
  * @public
@@ -318,7 +318,6 @@ 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,
@@ -362,15 +361,10 @@ class DateTimePicker extends DatePicker {
 		const selectedDate = this.getSelectedDateTime();
 
 		const value = this.getFormat().format(selectedDate);
-		const valid = this.isValid(value);
-
 		if (this.value !== value) {
-			this.value = value;
-			this.fireEvent("change", { value: this.value, valid });
-			this.fireEvent("value-changed", { value: this.value, valid });
+			this._updateValueAndFireEvents(value, true, ["change", "value-changed"]);
 		}
 
-		this._updateValueState();
 		this.closePicker();
 	}
 
@@ -420,9 +414,11 @@ class DateTimePicker extends DatePicker {
 	getSelectedDateTime() {
 		const selectedDate = this.getFormat().parse(this._calendarSelectedDates[0]);
 		const selectedTime = this.getFormat().parse(this._timeSelectionValue);
-		selectedDate.setHours(selectedTime.getHours());
-		selectedDate.setMinutes(selectedTime.getMinutes());
-		selectedDate.setSeconds(selectedTime.getSeconds());
+		if (selectedTime) {
+			selectedDate.setHours(selectedTime.getHours());
+			selectedDate.setMinutes(selectedTime.getMinutes());
+			selectedDate.setSeconds(selectedTime.getSeconds());
+		}
 
 		return selectedDate;
 	}

package/dist/DayPicker.js

@@ -44,10 +44,10 @@ import dayPickerCSS from "./generated/themes/DayPicker.css.js";
  */
 const metadata = {
 	tag: "ui5-daypicker",
-	properties: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.DayPicker.prototype */ {
 		/**
 		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
-		 * @type {Array}
+		 * @type {array}
 		 * @public
 		 */
 		selectedDates: {
@@ -64,7 +64,7 @@ const metadata = {
 		 * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
 		 * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
 		 * </ul>
-		 * @type {CalendarSelectionMode}
+		 * @type {sap.ui.webcomponents.main.types.CalendarSelectionMode}
 		 * @defaultvalue "Single"
 		 * @public
 		 */
@@ -90,7 +90,7 @@ const metadata = {
 		},
 
 		/**
-		 * @type {Object}
+		 * @type {object}
 		 * @private
 		 */
 		_weeks: {
@@ -121,7 +121,7 @@ const metadata = {
 			type: String,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.DayPicker.prototype */ {
 		/**
 		 * Fired when the selected date(s) change
 		 * @public
@@ -149,7 +149,7 @@ const DAYS_IN_WEEK = 7;
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.DayPicker
- * @extends CalendarPart
+ * @extends sap.ui.webcomponents.main.CalendarPart
  * @tagname ui5-daypicker
  * @public
  */