@ui5/webcomponents 0.0.0-974b11d82 → 0.0.0-97cba4b0b

package/dist/types/TabLayout.d.ts

@@ -1,7 +1,7 @@
 /**
  * Tab layout of TabContainer.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TabLayout.js

@@ -1,7 +1,7 @@
 /**
  * Tab layout of TabContainer.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TableColumnPopinDisplay.d.ts

@@ -1,7 +1,7 @@
 /**
  * Table cell popin display.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TableColumnPopinDisplay.js

@@ -1,7 +1,7 @@
 /**
  * Table cell popin display.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TableGrowingMode.d.ts

@@ -1,7 +1,7 @@
 /**
  * Different table growing modes.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TableGrowingMode.js

@@ -1,7 +1,7 @@
 /**
  * Different table growing modes.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TableMode.d.ts

@@ -1,7 +1,7 @@
 /**
  * Different table modes.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TableMode.js

@@ -1,7 +1,7 @@
 /**
  * Different table modes.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TableRowType.d.ts

@@ -1,7 +1,7 @@
 /**
  * Different table row types.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TableRowType.js

@@ -1,7 +1,7 @@
 /**
  * Different table row types.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TabsOverflowMode.d.ts

@@ -1,7 +1,7 @@
 /**
  * Tabs overflow mode in TabContainer.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TabsOverflowMode.js

@@ -1,7 +1,7 @@
 /**
  * Tabs overflow mode in TabContainer.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TitleLevel.d.ts

@@ -1,7 +1,7 @@
 /**
  * Different types of Title level.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/TitleLevel.js

@@ -1,7 +1,7 @@
 /**
  * Different types of Title level.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/ToastPlacement.d.ts

@@ -1,7 +1,7 @@
 /**
  * Toast placement.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/ToastPlacement.js

@@ -1,7 +1,7 @@
 /**
  * Toast placement.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/WrappingType.d.ts

@@ -1,7 +1,7 @@
 /**
  * Different types of wrapping.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/dist/types/WrappingType.js

@@ -1,7 +1,7 @@
 /**
  * Different types of wrapping.
  *
- * @class
+ * @readonly
  * @enum {string}
  * @public
  * @author SAP SE

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-974b11d82",
+  "version": "0.0.0-97cba4b0b",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -42,13 +42,13 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-974b11d82",
-    "@ui5/webcomponents-icons": "0.0.0-974b11d82",
-    "@ui5/webcomponents-localization": "0.0.0-974b11d82",
-    "@ui5/webcomponents-theming": "0.0.0-974b11d82"
+    "@ui5/webcomponents-base": "0.0.0-97cba4b0b",
+    "@ui5/webcomponents-icons": "0.0.0-97cba4b0b",
+    "@ui5/webcomponents-localization": "0.0.0-97cba4b0b",
+    "@ui5/webcomponents-theming": "0.0.0-97cba4b0b"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-974b11d82",
+    "@ui5/webcomponents-tools": "0.0.0-97cba4b0b",
     "chromedriver": "109.0.0"
   }
 }

package/src/AvatarGroup.ts

@@ -267,6 +267,7 @@ class AvatarGroup extends UI5Element {
 	 * @readonly
 	 * @type {HTMLElement[]}
 	 * @defaultValue []
+	 * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems
 	 * @public
 	 */
 	get hiddenItems() {
@@ -277,6 +278,7 @@ class AvatarGroup extends UI5Element {
 	 * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.
 	 * @readonly
 	 * @type {sap.ui.webc.main.types.AvatarColorScheme[]}
+	 * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme
 	 * @defaultValue []
 	 * @public
 	 */

package/src/Breadcrumbs.ts

@@ -36,6 +36,7 @@ import type { SelectionChangeEventDetail } from "./List.js";
 import StandardListItem from "./StandardListItem.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
 // Templates
 import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";

package/src/Calendar.ts

@@ -24,6 +24,7 @@ import type { MonthPickerChangeEventDetail } from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
 import type { YearPickerChangeEventDetail } from "./YearPicker.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
 
 // Default calendar for bundling
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
@@ -253,6 +254,9 @@ class Calendar extends CalendarPart {
 	@property()
 	_headerYearButtonTextSecType!: string;
 
+	@property({ type: CalendarPickersMode, defaultValue: CalendarPickersMode.DAY_MONTH_YEAR, noAttribute: true })
+	_pickersMode!: CalendarPickersMode;
+
 	/**
 	 * Defines the selected date or dates (depending on the <code>selectionMode</code> property)
 	 * for this calendar as instances of <code>ui5-date</code>.
@@ -298,6 +302,23 @@ class Calendar extends CalendarPart {
 		});
 	}
 
+	/**
+	 * Makes sure that _currentPicker is always set to a value, allowed by _pickersMode
+	 */
+	_normalizeCurrentPicker() {
+		if (this._currentPicker === "day" && this._pickersMode !== CalendarPickersMode.DAY_MONTH_YEAR) {
+			this._currentPicker = "month";
+		}
+
+		if (this._currentPicker === "month" && this._pickersMode === CalendarPickersMode.YEAR) {
+			this._currentPicker = "year";
+		}
+	}
+
+	onBeforeRendering() {
+		this._normalizeCurrentPicker();
+	}
+
 	async onAfterRendering() {
 		await renderFinished(); // Await for the current picker to render and then ask if it has previous/next pages
 		this._previousButtonDisabled = !this._currentPickerDOM._hasPreviousPage();
@@ -416,30 +437,46 @@ class Calendar extends CalendarPart {
 		return this._currentPicker !== "year";
 	}
 
-	onSelectedDatesChange(e: CustomEvent<DayPickerChangeEventDetail>) {
-		const timestamp = e.detail.timestamp;
-		const selectedDates = e.detail.dates;
-		const datesValues = selectedDates.map(ts => {
-			const calendarDate = CalendarDate.fromTimestamp(ts * 1000, this._primaryCalendarType);
+	_fireEventAndUpdateSelectedDates(selectedDates: Array<number>) {
+		const datesValues = selectedDates.map(timestamp => {
+			const calendarDate = CalendarDate.fromTimestamp(timestamp * 1000, this._primaryCalendarType);
 			return this.getFormat().format(calendarDate.toUTCJSDate(), true);
 		});
 
-		this.timestamp = timestamp;
-		const defaultPrevented = !this.fireEvent<CalendarChangeEventDetail>("selected-dates-change", { timestamp, dates: [...selectedDates], values: datesValues }, true);
+		const defaultPrevented = !this.fireEvent<CalendarChangeEventDetail>("selected-dates-change", { timestamp: this.timestamp, dates: [...selectedDates], values: datesValues }, true);
 		if (!defaultPrevented) {
 			this._setSelectedDates(selectedDates);
 		}
 	}
 
+	onSelectedDatesChange(e: CustomEvent<DayPickerChangeEventDetail>) {
+		this.timestamp = e.detail.timestamp;
+		this._fireEventAndUpdateSelectedDates(e.detail.dates);
+	}
+
 	onSelectedMonthChange(e: CustomEvent<MonthPickerChangeEventDetail>) {
 		this.timestamp = e.detail.timestamp;
-		this._currentPicker = "day";
+
+		if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
+			this._currentPicker = "day";
+		} else {
+			this._fireEventAndUpdateSelectedDates([this.timestamp]);
+		}
+
 		this._currentPickerDOM._autoFocus = true;
 	}
 
 	onSelectedYearChange(e: CustomEvent<YearPickerChangeEventDetail>) {
 		this.timestamp = e.detail.timestamp;
-		this._currentPicker = "day";
+
+		if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
+			this._currentPicker = "day";
+		} else if (this._pickersMode === CalendarPickersMode.MONTH_YEAR) {
+			this._currentPicker = "month";
+		} else {
+			this._fireEventAndUpdateSelectedDates([this.timestamp]);
+		}
+
 		this._currentPickerDOM._autoFocus = true;
 	}
 

package/src/Carousel.ts

@@ -79,25 +79,24 @@ type CarouselNavigateEventDetail = {
  * When the <code>ui5-carousel</code> is focused the user can navigate between the items
  * with the following keyboard shortcuts:
  * <br>
- *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-carousel</code> exposes the following CSS Shadow Parts:
  * <ul>
- * <li>content - Used to style the content of the component</li>
+ * <li>[UP/DOWN] - Navigates to previous and next item</li>
+ * <li>[LEFT/RIGHT] - Navigates to previous and next item</li>
  * </ul>
  *
- * * <h4>Fast Navigation</h4>
+ * <h3>Fast Navigation</h3>
  * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
  * In order to use this functionality, you need to import the following module:
  * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
  * <br><br>
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-carousel</code> exposes the following CSS Shadow Parts:
  * <ul>
- * <li>[UP/DOWN] - Navigates to previous and next item</li>
- * <li>[LEFT/RIGHT] - Navigates to previous and next item</li>
+ * <li>content - Used to style the content of the component</li>
  * </ul>
  *
  * <h3>ES6 Module Import</h3>

package/src/ComboBox.ts

@@ -420,7 +420,6 @@ class ComboBox extends UI5Element {
 
 	_initialRendering: boolean;
 	_itemFocused: boolean;
-	_selectionChanged: boolean;
 	// used only for Safari fix (check onAfterRendering)
 	_autocomplete: boolean;
 	_isKeyNavigation: boolean;
@@ -439,7 +438,6 @@ class ComboBox extends UI5Element {
 		this._filteredItems = [];
 		this._initialRendering = true;
 		this._itemFocused = false;
-		this._selectionChanged = false;
 		this._autocomplete = false;
 		this._isKeyNavigation = false;
 		this._lastValue = "";
@@ -630,12 +628,10 @@ class ComboBox extends UI5Element {
 			const item = this._getFirstMatchingItem(value);
 			item && this._applyAtomicValueAndSelection(item, value, true);
 
-			if (value !== "" && !this._selectionChanged && (item && !item.selected && !item.isGroupItem)) {
+			if (value !== "" && (item && !item.selected && !item.isGroupItem)) {
 				this.fireEvent<ComboBoxSelectionChangeEventDetail>("selection-change", {
 					item,
 				});
-
-				this._selectionChanged = false;
 			}
 		}
 
@@ -744,7 +740,6 @@ class ComboBox extends UI5Element {
 		}
 
 		this._isValueStateFocused = false;
-		this._selectionChanged = true;
 
 		this._announceSelectedItem(indexOfItem);
 
@@ -1038,8 +1033,6 @@ class ComboBox extends UI5Element {
 			this.fireEvent<ComboBoxSelectionChangeEventDetail>("selection-change", {
 				item: listItem.mappedItem,
 			});
-
-			this._selectionChanged = true;
 		}
 
 		this._filteredItems.map(item => {

package/src/ComboBoxGroupItem.ts

@@ -24,7 +24,7 @@ class ComboBoxGroupItem extends UI5Element implements IComboBoxItem {
 		 * Defines the text of the component.
 		 *
 		 * @type {string}
-		 * @name sap.ui.webc.main.ComboBoxItem.prototype.text
+		 * @name sap.ui.webc.main.ComboBoxGroupItem.prototype.text
 		 * @defaultvalue ""
 		 * @public
 		 */

package/src/DatePicker.ts

@@ -4,6 +4,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import getRoundedTimestamp from "@ui5/webcomponents-localization/dist/dates/getRoundedTimestamp.js";
@@ -26,6 +27,7 @@ import {
 	isF6Previous,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
 import type FormSupportT from "./features/InputElementsFormSupport.js";
 import type { IFormElement } from "./features/InputElementsFormSupport.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
@@ -738,6 +740,23 @@ class DatePicker extends DateComponentBase implements IFormElement {
 		return !this.disabled && !this.readonly;
 	}
 
+	get _calendarPickersMode() {
+		const format = this.getFormat() as DateFormat & { aFormatArray: Array<{type: string}> };
+		const patternSymbolTypes = format.aFormatArray.map(patternSymbolSettings => {
+			return patternSymbolSettings.type.toLowerCase();
+		});
+
+		if (patternSymbolTypes.includes("day")) {
+			return CalendarPickersMode.DAY_MONTH_YEAR;
+		}
+
+		if (patternSymbolTypes.includes("month") || patternSymbolTypes.includes("monthstandalone")) {
+			return CalendarPickersMode.MONTH_YEAR;
+		}
+
+		return CalendarPickersMode.YEAR;
+	}
+
 	/**
 	 * The user selected a new date in the calendar
 	 * @param event

package/src/DatePickerPopover.hbs

@@ -49,6 +49,7 @@
 		@ui5-show-year-press="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"
 		._currentPicker="{{_calendarCurrentPicker}}"
+		._pickersMode="{{_calendarPickersMode}}"
 	>
 		{{#each _calendarSelectedDates}}
 			<ui5-date value="{{this}}"></ui5-date>

package/src/DateRangePicker.ts

@@ -10,6 +10,7 @@ import { DATERANGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 import DateRangePickerCss from "./generated/themes/DateRangePicker.css.js";
 import DatePicker from "./DatePicker.js";
 import type { DatePickerChangeEventDetail } from "./DatePicker.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
 
 /**
  * @class
@@ -355,6 +356,13 @@ class DateRangePicker extends DatePicker {
 
 		return "";
 	}
+
+	/**
+	 * @override
+	 */
+	get _calendarPickersMode() {
+		return CalendarPickersMode.DAY_MONTH_YEAR;
+	}
 }
 
 DateRangePicker.define();

package/src/DateTimePicker.ts

@@ -32,6 +32,7 @@ import DateTimePickerPopoverTemplate from "./generated/templates/DateTimePickerP
 // Styles
 import DateTimePickerCss from "./generated/themes/DateTimePicker.css.js";
 import DateTimePickerPopoverCss from "./generated/themes/DateTimePickerPopover.css.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
 
 const PHONE_MODE_BREAKPOINT = 640; // px
 
@@ -416,6 +417,13 @@ class DateTimePicker extends DatePicker {
 
 		return selectedDate;
 	}
+
+	/**
+	 * @override
+	 */
+	get _calendarPickersMode() {
+		return CalendarPickersMode.DAY_MONTH_YEAR;
+	}
 }
 
 DateTimePicker.define();

package/src/Icon.ts

@@ -408,6 +408,8 @@ class Icon extends UI5Element {
 		} else if (this.accData) {
 			const i18nBundle = await getI18nBundle(this.packageName);
 			this.effectiveAccessibleName = i18nBundle.getText(this.accData) || undefined;
+		} else {
+			this.effectiveAccessibleName = undefined;
 		}
 	}
 

package/src/Option.ts

@@ -24,7 +24,7 @@ class Option extends UI5Element implements IOption {
 	 * Defines the selected state of the component.
 	 * @type {boolean}
 	 * @defaultvalue false
-	 * @name sap.ui.webc.main.Option.selected
+	 * @name sap.ui.webc.main.Option.prototype.selected
 	 * @public
 	 */
 	@property({ type: Boolean })
@@ -36,7 +36,7 @@ class Option extends UI5Element implements IOption {
 	 * <b>Note:</b> A disabled component is hidden.
 	 * @type {boolean}
 	 * @defaultvalue false
-	 * @name sap.ui.webc.main.Option.disabled
+	 * @name sap.ui.webc.main.Option.prototype.disabled
 	 * @public
 	 * @since 1.0.0-rc.12
 	 */
@@ -61,7 +61,7 @@ class Option extends UI5Element implements IOption {
 	 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 	 *
 	 * @type {string}
-	 * @name sap.ui.webc.main.Option.icon
+	 * @name sap.ui.webc.main.Option.prototype.icon
 	 * @public
 	 */
 	@property({ defaultValue: null })
@@ -72,7 +72,7 @@ class Option extends UI5Element implements IOption {
 	 * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
 	 *
 	 * @type {string}
-	 * @name sap.ui.webc.main.Option.value
+	 * @name sap.ui.webc.main.Option.prototype.value
 	 * @public
 	 */
 	@property()
@@ -81,7 +81,7 @@ class Option extends UI5Element implements IOption {
 	/**
 	 * Defines the additional text displayed at the end of the option element.
 	 * @type {string}
-	 * @name sap.ui.webc.main.Option.additionalText
+	 * @name sap.ui.webc.main.Option.prototype.additionalText
 	 * @public
 	 * @since 1.3.0
 	 */

package/src/SegmentedButton.ts

@@ -288,7 +288,7 @@ class SegmentedButton extends UI5Element {
 	 *
 	 * @readonly
 	 * @type {sap.ui.webc.main.ISegmentedButtonItem}
-	 * @name sap.ui.webc.main.SegmentedButtonItem.prototype.selectedItem
+	 * @name sap.ui.webc.main.SegmentedButton.prototype.selectedItem
 	 * @public
 	 */
 	get selectedItem() {

package/src/Select.ts

@@ -176,7 +176,7 @@ class Select extends UI5Element implements IFormElement {
 	 *
 	 * @type {boolean}
 	 * @defaultvalue false
-	 * @name sap.ui.webc.main.Select.disabled
+	 * @name sap.ui.webc.main.Select.prototype.disabled
 	 * @public
 	 */
 	@property({ type: Boolean })
@@ -197,7 +197,7 @@ class Select extends UI5Element implements IFormElement {
 	 *
 	 * @type {string}
 	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.Select.name
+	 * @name sap.ui.webc.main.Select.prototype.name
 	 * @public
 	 */
 	@property()
@@ -217,7 +217,7 @@ class Select extends UI5Element implements IFormElement {
 	 *
 	 * @type {sap.ui.webc.base.types.ValueState}
 	 * @defaultvalue "None"
-	 * @name sap.ui.webc.main.Select.valueState
+	 * @name sap.ui.webc.main.Select.prototype.valueState
 	 * @public
 	 */
 	@property({ type: ValueState, defaultValue: ValueState.None })
@@ -229,7 +229,7 @@ class Select extends UI5Element implements IFormElement {
 	 * @since 1.0.0-rc.9
 	 * @type {boolean}
 	 * @defaultvalue false
-	 * @name sap.ui.webc.main.Select.required
+	 * @name sap.ui.webc.main.Select.prototype.required
 	 * @public
 	 */
 	@property({ type: Boolean })
@@ -242,7 +242,7 @@ class Select extends UI5Element implements IFormElement {
 	 * @since 1.0.0-rc.9
 	 * @public
 	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.Select.accessibleName
+	 * @name sap.ui.webc.main.Select.prototype.accessibleName
 	 * @since 1.0.0-rc.15
 	 */
 	@property()
@@ -253,7 +253,7 @@ class Select extends UI5Element implements IFormElement {
 	 *
 	 * @type {string}
 	 * @defaultvalue ""
-	 * @name sap.ui.webc.main.Select.accessibleNameRef
+	 * @name sap.ui.webc.main.Select.prototype.accessibleNameRef
 	 * @public
 	 * @since 1.0.0-rc.15
 	 */
@@ -400,6 +400,7 @@ class Select extends UI5Element implements IFormElement {
 	 * Currently selected <code>ui5-option</code> element.
 	 * @readonly
 	 * @type {sap.ui.webc.main.ISelectOption}
+     * @name sap.ui.webc.main.Select.prototype.selectedOption
 	 * @public
 	 */
 	get selectedOption() {