@ui5/webcomponents-fiori 1.7.1 → 1.9.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.8.0](https://github.com/SAP/ui5-webcomponents/compare/v1.7.1...v1.8.0) (2022-10-03)
+
+
+### Bug Fixes
+
+* **ui5-illustrated-message:** removed redundant scrollbar in RTL ([#5819](https://github.com/SAP/ui5-webcomponents/issues/5819)) ([676adcd](https://github.com/SAP/ui5-webcomponents/commit/676adcd1e706e528440c9a75edb5713ef538460d)), closes [#5788](https://github.com/SAP/ui5-webcomponents/issues/5788)
+* **ui5-side-navigation:** toggle icon no longer shrinks with long text ([#5837](https://github.com/SAP/ui5-webcomponents/issues/5837)) ([8a69be2](https://github.com/SAP/ui5-webcomponents/commit/8a69be21c683ed98a522e2391eeb61901acb0e7d)), closes [#5825](https://github.com/SAP/ui5-webcomponents/issues/5825)
+
+
+### Features
+
+* **f6navigation:** improve fastgroup navigation ([#5844](https://github.com/SAP/ui5-webcomponents/issues/5844)) ([f44f57b](https://github.com/SAP/ui5-webcomponents/commit/f44f57b27850de03e430d08e3e9adc71d60296fe))
+* **ui5-illustrated-message:** accessible-name-ref added ([#5765](https://github.com/SAP/ui5-webcomponents/issues/5765)) ([51165df](https://github.com/SAP/ui5-webcomponents/commit/51165df780d92404c63e16a09dbfe579c533456c))
+
+
+
+
+
 ## [1.7.1](https://github.com/SAP/ui5-webcomponents/compare/v1.7.0...v1.7.1) (2022-09-08)
 
 **Note:** Version bump only for package @ui5/webcomponents-fiori

package/dist/Bar.js

@@ -28,7 +28,7 @@ const metadata = {
 		 * <li><code>FloatingFooter</code></li>
 		 * </ul>
 		 *
-		 * @type {BarDesign}
+		 * @type {sap.ui.webcomponents.fiori.types.BarDesign}
 		 * @defaultvalue "Header"
 		 * @public
 		 */
@@ -117,7 +117,7 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.Bar
  * @implements sap.ui.webcomponents.fiori.IBar
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-bar
  * @public
  * @since 1.0.0-rc.11

package/dist/BarcodeScannerDialog.js

@@ -4,8 +4,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Dialog from "@ui5/webcomponents/dist/Dialog.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
-import { BrowserMultiFormatReader, NotFoundException } from "@zxing/library";
-
+import * as ZXing from "@zxing/library/umd/index.min.js";
 // Template
 import BarcodeScannerDialogTemplate from "./generated/templates/BarcodeScannerDialogTemplate.lit.js";
 
@@ -18,6 +17,11 @@ import {
 	BARCODE_SCANNER_DIALOG_LOADING_TXT,
 } from "./generated/i18n/i18n-defaults.js";
 
+// some tools handle named exports from UMD files and the window object is not assigned but the imports work (vitejs)
+// other tools do not handle named exports (they are undefined after the import), but the window global is assigned and can be used (web dev server)
+const effectiveZXing = { ...ZXing, ...window.ZXing };
+const { BrowserMultiFormatReader, NotFoundException } = effectiveZXing;
+
 const defaultMediaConstraints = {
 	audio: false,
 	video: {
@@ -102,7 +106,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.BarcodeScannerDialog
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-barcode-scanner-dialog
  * @public
  * @since 1.0.0-rc.15

package/dist/DynamicSideContent.js

@@ -65,7 +65,7 @@ const metadata = {
 		 * <li><code>End</code></li>
 		 * </ul>
 		 *
-		 * @type {SideContentPosition}
+		 * @type {sap.ui.webcomponents.fiori.types.SideContentPosition}
 		 * @defaultvalue "End"
 		 * @public
 		 *
@@ -89,7 +89,7 @@ const metadata = {
 		 * <li><code>NeverShow</code></li>
 		 * </ul>
 		 *
-		 * @type {SideContentVisibility}
+		 * @type {sap.ui.webcomponents.fiori.types.SideContentVisibility}
 		 * @defaultvalue "ShowAboveS"
 		 * @public
 		 *
@@ -112,7 +112,7 @@ const metadata = {
 		 * <li><code>OnMinimumWidth</code></li>
 		 * </ul>
 		 *
-		 * @type {SideContentFallDown}
+		 * @type {sap.ui.webcomponents.fiori.types.SideContentFallDown}
 		 * @defaultvalue "OnMinimumWidth"
 		 * @public
 		 *
@@ -300,7 +300,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.DynamicSideContent
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-dynamic-side-content
  * @public
  * @since 1.1.0

package/dist/FilterItem.js

@@ -61,7 +61,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.FilterItem
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @since 1.0.0-rc.16
  * @tagname ui5-filter-item
  * @implements sap.ui.webcomponents.fiori.IFilterItem

package/dist/FilterItemOption.js

@@ -52,7 +52,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.FilterItemOption
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @since 1.0.0-rc.16
  * @tagname ui5-filter-item-option
  * @implements sap.ui.webcomponents.fiori.IFilterItemOption

package/dist/FlexibleColumnLayout.js

@@ -61,7 +61,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>For example:</b> layout=<code>TwoColumnsStartExpanded</code> means the layout will display up to two columns
 		 * in 67%/33% proportion.
-		 * @type {FCLLayout}
+		 * @type {sap.ui.webcomponents.fiori.types.FCLLayout}
 		 * @defaultvalue "OneColumn"
 		 * @public
 		 */
@@ -126,7 +126,7 @@ const metadata = {
 		/**
 		* Defines the component width in px.
 		*
-		* @type {Float}
+		* @type {sap.ui.webcomponents.base.types.Float}
 		* @defaultvalue 0
 		* @private
 		*/
@@ -140,7 +140,7 @@ const metadata = {
 		* based on both the <code>layout</code> property and the screen size.
 		* Example: [67%, 33%, 0], [25%, 50%, 25%], etc.
 		*
-		* @type {Object}
+		* @type {object}
 		* @defaultvalue undefined
 		* @private
 		*/
@@ -152,7 +152,7 @@ const metadata = {
 		/**
 		* Defines the visible columns count - 1, 2 or 3.
 		*
-		* @type {Integer}
+		* @type {sap.ui.webcomponents.base.types.Integer}
 		* @defaultvalue 1
 		* @private
 		*/
@@ -164,7 +164,7 @@ const metadata = {
 		/**
 		 * Allows the user to replace the whole layouts configuration
 		 *
-		 * @type {Object}
+		 * @type {object}
 		 * @private
 		 * @sap-restricted
 		 */
@@ -209,8 +209,8 @@ const metadata = {
 		 * Fired when the layout changes via user interaction by clicking the arrows
 		 * or by changing the component size due to resizing.
 		 *
-		 * @param {FCLLayout} layout The current layout
-		 * @param {Array} columnLayout The effective column layout, f.e [67%, 33%, 0]
+		 * @param {sap.ui.webcomponents.fiori.types.FCLLayout} layout The current layout
+		 * @param {array} columnLayout The effective column layout, f.e [67%, 33%, 0]
 		 * @param {boolean} startColumnVisible Indicates if the start column is currently visible
 		 * @param {boolean} midColumnVisible Indicates if the middle column is currently visible
 		 * @param {boolean} endColumnVisible Indicates if the end column is currently visible
@@ -276,7 +276,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.FlexibleColumnLayout
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-flexible-column-layout
  * @public
  * @since 1.0.0-rc.8
@@ -493,7 +493,7 @@ class FlexibleColumnLayout extends UI5Element {
 	 * <b>For example:</b> ["67%", "33%", 0], ["100%", 0, 0], ["25%", "50%", "25%"], etc,
 	 * where the numbers represents the width of the start, middle and end columns.
 	 * @readonly
-	 * @type { Array }
+	 * @type {array}
 	 * @defaultvalue ["100%", 0, 0]
 	 * @public
 	 */
@@ -505,7 +505,7 @@ class FlexibleColumnLayout extends UI5Element {
 	 * Returns if the <code>start</code> column is visible.
 	 * @readonly
 	 * @defaultvalue true
-	 * @type { boolean }
+	 * @type {boolean}
 	 * @public
 	 */
 	get startColumnVisible() {
@@ -519,7 +519,7 @@ class FlexibleColumnLayout extends UI5Element {
 	/**
 	 * Returns if the <code>middle</code> column is visible.
 	 * @readonly
-	 * @type { boolean }
+	 * @type {boolean}
 	 * @defaultvalue false
 	 * @public
 	 */
@@ -534,7 +534,7 @@ class FlexibleColumnLayout extends UI5Element {
 	/**
 	 * Returns if the <code>end</code> column is visible.
 	 * @readonly
-	 * @type { boolean }
+	 * @type {boolean}
 	 * @defaultvalue false
 	 * @public
 	 */
@@ -549,7 +549,7 @@ class FlexibleColumnLayout extends UI5Element {
 	/**
 	 * Returns the number of currently visible columns.
 	 * @readonly
-	 * @type { Integer }
+	 * @type {sap.ui.webcomponents.base.types.Integer}
 	 * @defaultvalue 1
 	 * @public
 	 */

package/dist/IllustratedMessage.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { getIllustrationDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+import { getIllustrationDataSync, getIllustrationData } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
@@ -23,6 +24,19 @@ const metadata = {
 	languageAware: true,
 	managedSlots: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.IllustratedMessage.prototype */ {
+
+		/**
+		 * Receives id(or many ids) of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.7.0
+		 */
+		 accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
 		/**
 		 * Defines the title of the component.
 		 * <br><br>
@@ -166,7 +180,7 @@ const metadata = {
 		 * You can import them removing the <code>Tnt</code> prefix like this:
 		 * <br>
 		 * <code>import "@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js";</code>
-		 * @type {IllustrationMessageType}
+		 * @type {sap.ui.webcomponents.fiori.types.IllustrationMessageType}
 		 * @defaultvalue "BeforeSearch"
 		 * @public
 		 */
@@ -189,7 +203,7 @@ const metadata = {
 		 * As <code>IllustratedMessage</code> adapts itself around the <code>Illustration</code>, the other
 		 * elements of the component are displayed differently on the different breakpoints/illustration sizes.
 		 *
-		 * @type {IllustrationMessageSize}
+		 * @type {sap.ui.webcomponents.fiori.types.IllustrationMessageSize}
 		 * @defaultvalue "Auto"
 		 * @public
 		 * @since 1.5.0
@@ -198,6 +212,36 @@ const metadata = {
 			type: IllustrationMessageSize,
 			defaultValue: IllustrationMessageSize.Auto,
 		},
+		/**
+		* Illustration breakpoint variant for the <code>Dialog</code> size.
+		*
+		* @private
+		* @type {String}
+		* @since 1.9.0
+		*/
+		dialogSvg: {
+			type: String,
+		},
+		/**
+		* Illustration breakpoint variant for the <code>Scene</code> size.
+		*
+		* @private
+		* @type {String}
+		* @since 1.9.0
+		*/
+		sceneSvg: {
+			type: String,
+		},
+		/**
+		* Illustration breakpoint variant for the <code>Spot</code> size.
+		*
+		* @private
+		* @type {String}
+		* @since 1.9.0
+		*/
+		spotSvg: {
+			type: String,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.IllustratedMessage.prototype */ {
 		/**
@@ -282,7 +326,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.IllustratedMessage
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-illustrated-message
  * @public
  * @since 1.0.0-rc.15
@@ -292,6 +336,7 @@ class IllustratedMessage extends UI5Element {
 		super();
 
 		this._handleResize = this.handleResize.bind(this);
+		this._lastKnownOffsetWidthForMedia = {}; // this will store the last known offsetWidth of the IllustratedMessage DOM node for a given media (e.g. "Spot")
 	}
 
 	static get metadata() {
@@ -335,15 +380,19 @@ class IllustratedMessage extends UI5Element {
 		return [Title];
 	}
 
-	onBeforeRendering() {
-		const illustrationData = getIllustrationDataSync(this.name);
+	async onBeforeRendering() {
+		let illustrationData = getIllustrationDataSync(this.name);
+
+		if (illustrationData === undefined) {
+			illustrationData = await getIllustrationData(this.name);
+		}
 
 		if (illustrationData === ILLUSTRATION_NOT_FOUND) {
 			this.invalid = true;
 			const illustrationPath = this.name.includes("Tnt") ? `tnt/${this.name.replace("Tnt", "")}` : this.name;
 
 			/* eslint-disable-next-line */
-			return console.warn(`Required illustration is not registered. You can either import the illustration as a module in order to use it e.g. "@ui5/webcomponents-fiori/dist/illustrations/${illustrationPath}.js".`);
+			return console.warn(`Required illustration is not registered. You can either import the specific illustration as a module - e.g. "@ui5/webcomponents-fiori/dist/illustrations/${illustrationPath}.js" or import the "@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js" module to fetch any existing illustration on demand`);
 		}
 
 		this.invalid = false;
@@ -372,17 +421,40 @@ class IllustratedMessage extends UI5Element {
 			return;
 		}
 
+		this._applyMedia();
+	}
+
+	_applyMedia() {
+		const currOffsetWidth = this.offsetWidth;
+		let newMedia = "";
+
 		if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.BASE) {
-			this.media = IllustratedMessage.MEDIA.BASE;
+			newMedia = IllustratedMessage.MEDIA.BASE;
 		} else if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.SPOT) {
-			this.media = IllustratedMessage.MEDIA.SPOT;
+			newMedia = IllustratedMessage.MEDIA.SPOT;
 		} else if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.DIALOG) {
-			this.media = IllustratedMessage.MEDIA.DIALOG;
+			newMedia = IllustratedMessage.MEDIA.DIALOG;
 		} else {
-			this.media = IllustratedMessage.MEDIA.SCENE;
+			newMedia = IllustratedMessage.MEDIA.SCENE;
+		}
+		const lastKnownOffsetWidth = this._lastKnownOffsetWidthForMedia[newMedia];
+		if (!(lastKnownOffsetWidth && currOffsetWidth === lastKnownOffsetWidth)) { // prevents infinite resize
+			this.media = newMedia;
+			this._lastKnownOffsetWidthForMedia[newMedia] = currOffsetWidth;
+		}
+	}
+
+	_setSVGAccAttrs() {
+		const svg = this.shadowRoot.querySelector(".ui5-illustrated-message-illustration svg");
+		if (svg && this.ariaLabelText !== "") {
+			svg.setAttribute("aria-label", this.ariaLabelText);
 		}
 	}
 
+	onAfterRendering() {
+		this._setSVGAccAttrs();
+	}
+
 	/**
 	 * Modifies the IM styles in accordance to the `size` property's value.
 	 * Note: The resize handler has no effect when size is different than "Auto".
@@ -405,6 +477,10 @@ class IllustratedMessage extends UI5Element {
 		}
 	}
 
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	get effectiveIllustration() {
 		switch (this.media) {
 		case IllustratedMessage.MEDIA.SPOT:

package/dist/MediaGallery.js

@@ -95,7 +95,7 @@ const metadata = {
 		 * <li><code>Horizontal</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryLayout}
+		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryLayout}
 		 * @defaultvalue "Auto"
 		 * @public
 		 */
@@ -114,7 +114,7 @@ const metadata = {
 		 * <li><code>Right</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryMenuHorizontalAlign}
+		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryMenuHorizontalAlign}
 		 * @defaultvalue "Left"
 		 * @public
 		 */
@@ -133,7 +133,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryMenuVerticalAlign}
+		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryMenuVerticalAlign}
 		 * @defaultvalue "Bottom"
 		 * @public
 		 */
@@ -153,7 +153,7 @@ const metadata = {
 		 * <li><code>Horizontal</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryLayout}
+		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryLayout}
 		 * @defaultvalue "Vertical"
 		 * @private
 		 */
@@ -254,7 +254,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.MediaGallery
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-media-gallery
  * @appenddocs MediaGalleryItem
  * @public

package/dist/MediaGalleryItem.js

@@ -49,7 +49,7 @@ const metadata = {
 		 * <li><code>Wide</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryItemLayout}
+		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryItemLayout}
 		 * @defaultvalue "Square"
 		 * @public
 		 */

package/dist/NotificationAction.js

@@ -44,7 +44,7 @@ const metadata = {
 		 * <li><code>Transparent</code></li>
 		 * </ul>
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
 		 * @defaultvalue "Transparent"
 		 * @public
 		 */
@@ -83,7 +83,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.NotificationAction
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-notification-action
  * @implements sap.ui.webcomponents.fiori.INotificationAction
  * @public

package/dist/NotificationListGroupItem.js

@@ -6,6 +6,11 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
 
+// Icons
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import "@ui5/webcomponents-icons/dist/overflow.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+
 // Texts
 import {
 	NOTIFICATION_LIST_GROUP_ITEM_TXT,
@@ -120,7 +125,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.NotificationListGroupItem
- * @extends NotificationListItemBase
+ * @extends sap.ui.webcomponents.fiori.NotificationListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
  * @appenddocs NotificationAction

package/dist/NotificationListItem.js

@@ -10,6 +10,10 @@ import Popover from "@ui5/webcomponents/dist/Popover.js";
 import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
 
+// Icons
+import "@ui5/webcomponents-icons/dist/overflow.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+
 // Texts
 import {
 	NOTIFICATION_LIST_ITEM_TXT,
@@ -46,7 +50,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> by default the <code>titleText</code> and <code>decription</code>,
 		 * and a <code>ShowMore/Less</code> button would be displayed.
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -164,7 +168,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.NotificationListItem
- * @extends NotificationListItemBase
+ * @extends sap.ui.webcomponents.fiori.NotificationListItemBase
  * @tagname ui5-li-notification
  * @appenddocs NotificationAction
  * @since 1.0.0-rc.8

package/dist/NotificationListItemBase.js

@@ -17,6 +17,15 @@ import NotificationOverflowActionsPopoverTemplate from "./generated/templates/No
 // Styles
 import NotificationOverflowActionsPopoverCss from "./generated/themes/NotificationOverflowActionsPopover.css.js";
 
+/**
+ * Defines the icons corresponding to the notification's priority.
+ */
+const ICON_PER_PRIORITY = {
+	[Priority.High]: "message-error",
+	[Priority.Medium]: "message-warning",
+	[Priority.Low]: "message-success",
+};
+
 /**
  * @public
  */
@@ -43,7 +52,7 @@ const metadata = {
 		 * <li><code>Medium</code></li>
 		 * <li><code>High</code></li>
 		 * </ul>
-		 * @type {Priority}
+		 * @type {sap.ui.webcomponents.main.types.Priority}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -89,7 +98,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -133,7 +142,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.NotificationListItemBase
- * @extends ListItemBase
+ * @extends sap.ui.webcomponents.main.ListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
  * @appenddocs NotificationAction
@@ -152,14 +161,6 @@ class NotificationListItemBase extends ListItemBase {
 		return NotificationOverflowActionsPopoverCss;
 	}
 
-	static priorityIconsMappings() {
-		return {
-			"High": "message-error",
-			"Medium": "message-warning",
-			"Low": "message-success",
-		};
-	}
-
 	get hasTitleText() {
 		return !!this.titleText.length;
 	}
@@ -169,7 +170,7 @@ class NotificationListItemBase extends ListItemBase {
 	}
 
 	get priorityIcon() {
-		return NotificationListItemBase.priorityIconsMappings()[this.priority];
+		return ICON_PER_PRIORITY[this.priority];
 	}
 
 	get overflowButtonDOM() {

package/dist/Page.js

@@ -30,12 +30,12 @@ const metadata = {
 		 * <li><code>Transparent</code></li>
 		 * <li><code>List</code></li>
 		 * </ul>
-		 * @type {PageBackgroundDesign}
+		 * @type {sap.ui.webcomponents.fiori.types.PageBackgroundDesign}
 		 * @defaultvalue "Solid"
 		 * @public
 		 */
 		backgroundDesign: {
-			type: String,
+			type: PageBackgroundDesign,
 			defaultValue: PageBackgroundDesign.Solid,
 		},
 
@@ -154,7 +154,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.Page
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-page
  * @since 1.0.0-rc.12
  * @public

package/dist/ShellBar.js

@@ -812,7 +812,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>logo</code> DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -823,7 +823,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>copilot</code> DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -834,7 +834,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>notifications</code> icon DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -845,7 +845,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>overflow</code> icon DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -856,7 +856,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>profile</code> icon DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -867,7 +867,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>product-switch</code> icon DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16