@ui5/webcomponents 1.11.0 → 1.12.0-rc.1

package/dist/types/TabContainerTabsPlacement.d.ts

@@ -1,9 +1,9 @@
 /**
  * Tabs placement of TabContainer.
  *
- * @class
+ * @readonly
  * @enum {string}
- * @public
+ * @private
  * @author SAP SE
  * @alias sap.ui.webc.main.types.TabContainerTabsPlacement
  */

package/dist/types/TabContainerTabsPlacement.js

@@ -1,9 +1,9 @@
 /**
  * Tabs placement of TabContainer.
  *
- * @class
+ * @readonly
  * @enum {string}
- * @public
+ * @private
  * @author SAP SE
  * @alias sap.ui.webc.main.types.TabContainerTabsPlacement
  */

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": "1.11.0",
+  "version": "1.12.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -42,14 +42,14 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.11.0",
-    "@ui5/webcomponents-icons": "1.11.0",
-    "@ui5/webcomponents-localization": "1.11.0",
-    "@ui5/webcomponents-theming": "1.11.0"
+    "@ui5/webcomponents-base": "1.12.0-rc.1",
+    "@ui5/webcomponents-icons": "1.12.0-rc.1",
+    "@ui5/webcomponents-localization": "1.12.0-rc.1",
+    "@ui5/webcomponents-theming": "1.12.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.11.0",
-    "chromedriver": "109.0.0"
+    "@ui5/webcomponents-tools": "1.12.0-rc.1",
+    "chromedriver": "110.0.0"
   },
-  "gitHead": "816b5b6293ca3b56e461126eb77a3a1f238efdc0"
+  "gitHead": "d9d5077df87afcda0589596174767ef5d512bcf1"
 }

package/src/Avatar.ts

@@ -103,7 +103,7 @@ class Avatar extends UI5Element implements ITabbable {
 	 * <br>
 	 * <pre>&lt;ui5-avatar icon="employee"></pre>
 	 *
-	 * See all the available icons in the <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>.
+	 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
 	 * @type {string}
 	 * @name sap.ui.webc.main.Avatar.prototype.icon
 	 * @defaultvalue ""

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/Button.ts

@@ -142,7 +142,7 @@ class Button extends UI5Element implements IFormElement {
 	 * <br><br>
 	 * Example:
 	 *
-	 * See all the available icons within the <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>.
+	 * See all the available icons within the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
 	 *
 	 * @type {string}
 	 * @name sap.ui.webc.main.Button.prototype.icon

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/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";
@@ -84,7 +86,7 @@ type DatePickerChangeEventDetail = {
  * the input field, it must fit to the used date format.
  * <br><br>
  * Supported format options are pattern-based on Unicode LDML Date Format notation.
- * For more information, see <ui5-link target="_blank" href="http://unicode.org/reports/tr35/#Date_Field_Symbol_Table" class="api-table-content-cell-link">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
+ * For more information, see <ui5-link target="_blank" href="http://unicode.org/reports/tr35/#Date_Field_Symbol_Table">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
  * <br><br>
  * For example, if the <code>format-pattern</code> is "yyyy-MM-dd",
  * a valid value string is "2015-07-30" and the same is displayed in the input.
@@ -534,19 +536,23 @@ class DatePicker extends DateComponentBase implements IFormElement {
 		let executeEvent = true;
 		this.liveValue = value;
 
+		const previousValue = this.value;
+
+		if (updateValue) {
+			this._getInput().value = value;
+			this.value = value;
+			this._updateValueState(); // Change the value state to Error/None, but only if needed
+		}
+
 		events.forEach((e: string) => {
 			if (!this.fireEvent(e, { value, valid }, true)) {
 				executeEvent = false;
 			}
 		});
 
-		if (!executeEvent) {
-			return;
-		}
-
-		if (updateValue) {
-			this._getInput().value = value;
-			this.value = value;
+		if (!executeEvent && updateValue) {
+			this._getInput().value = previousValue;
+			this.value = previousValue;
 			this._updateValueState(); // Change the value state to Error/None, but only if needed
 		}
 	}
@@ -738,6 +744,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
 
@@ -67,7 +68,7 @@ type PreviewValues = {
  * The value entered by typing into the input field must fit to the used date/time format.
  * <br><br>
  * Supported format options are pattern-based on Unicode LDML Date Format notation.
- * For more information, see <ui5-link target="_blank" href="https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table" class="api-table-content-cell-link">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
+ * For more information, see <ui5-link target="_blank" href="https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
  * <br><br>
  * <b>Example:</b> the following format <code>dd/MM/yyyy, hh:mm:ss aa</code>
  * corresponds the <code>13/04/2020, 03:16:16 AM</code> value.
@@ -416,6 +417,13 @@ class DateTimePicker extends DatePicker {
 
 		return selectedDate;
 	}
+
+	/**
+	 * @override
+	 */
+	get _calendarPickersMode() {
+		return CalendarPickersMode.DAY_MONTH_YEAR;
+	}
 }
 
 DateTimePicker.define();

package/src/Icon.ts

@@ -37,16 +37,16 @@ const PRESENTATION_ROLE = "presentation";
  *
  * <ul>
  * <li>
- * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons" class="api-table-content-cell-link">@ui5/webcomponents-icons</ui5-link> represents the "SAP-icons" collection and includes the following
- * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons">@ui5/webcomponents-icons</ui5-link> represents the "SAP-icons" collection and includes the following
+ * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons">icons</ui5-link>.
  * </li>
  * <li>
- * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt" class="api-table-content-cell-link">@ui5/webcomponents-icons-tnt</ui5-link> represents the "tnt" collection and includes the following
- * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt">@ui5/webcomponents-icons-tnt</ui5-link> represents the "tnt" collection and includes the following
+ * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT">icons</ui5-link>.
  * </li>
  * <li>
- * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite" class="api-table-content-cell-link">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the "business-suite" collection and includes the following
- * <ui5-link target="_blank" href="https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols" class="api-table-content-cell-link">icons</ui5-link>.
+ * <ui5-link target="_blank" href="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the "business-suite" collection and includes the following
+ * <ui5-link target="_blank" href="https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols">icons</ui5-link>.
  * </li>
  * </ul>
  *
@@ -165,9 +165,9 @@ class Icon extends UI5Element {
 	 * <br>
 	 *
 	 * To browse all available icons, see the
-	 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Icons</ui5-link>,
-	 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT" class="api-table-content-cell-link">SAP Fiori Tools</ui5-link> and
-	 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">SAP Business Suite</ui5-link> collections.
+	 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">SAP Icons</ui5-link>,
+	 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT">SAP Fiori Tools</ui5-link> and
+	 * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">SAP Business Suite</ui5-link> collections.
 	 * <br>
 	 *
 	 * Example:
@@ -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;
 		}
 	}