@ui5/webcomponents-fiori 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/{Interfaces.js → Interfaces.ts}

@@ -1,128 +1,128 @@
 /**
  * Interface for components that may be slotted inside <code>ui5-page</code> as header and footer.
  *
- * @name sap.ui.webcomponents.fiori.IBar
+ * @name sap.ui.webc.fiori.IBar
  * @interface
  * @public
  */
-const IBar = "sap.ui.webcomponents.fiori.IBar";
+const IBar = "sap.ui.webc.fiori.IBar";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-view-settings-dialog</code> as filter items
  *
- * @name sap.ui.webcomponents.fiori.IFilterItem
+ * @name sap.ui.webc.fiori.IFilterItem
  * @interface
  * @public
  */
-const IFilterItem = "sap.ui.webcomponents.fiori.IFilterItem";
+const IFilterItem = "sap.ui.webc.fiori.IFilterItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-filter-item</code> as values
  *
- * @name sap.ui.webcomponents.fiori.IFilterItemOption
+ * @name sap.ui.webc.fiori.IFilterItemOption
  * @interface
  * @public
  */
-const IFilterItemOption = "sap.ui.webcomponents.fiori.IFilterItemOption";
+const IFilterItemOption = "sap.ui.webc.fiori.IFilterItemOption";
 
 /**
  * Interface for components that can be slotted inside <code>ui5-media-gallery</code> as items.
  *
- * @name sap.ui.webcomponents.fiori.IMediaGalleryItem
+ * @name sap.ui.webc.fiori.IMediaGalleryItem
  * @interface
  * @public
  */
-const IMediaGalleryItem = "sap.ui.webcomponents.fiori.IMediaGalleryItem";
+const IMediaGalleryItem = "sap.ui.webc.fiori.IMediaGalleryItem";
 
 /**
  * Interface for components that may be slotted as an action inside <code>ui5-li-notification</code> and <code>ui5-li-notification-group</code>
  *
- * @name sap.ui.webcomponents.fiori.INotificationAction
+ * @name sap.ui.webc.fiori.INotificationAction
  * @interface
  * @public
  */
-const INotificationAction = "sap.ui.webcomponents.fiori.INotificationAction";
+const INotificationAction = "sap.ui.webc.fiori.INotificationAction";
 
 /**
  * Interface for components that may be slotted inside a notification list
  *
- * @name sap.ui.webcomponents.fiori.INotificationListItem
+ * @name sap.ui.webc.fiori.INotificationListItem
  * @interface
  * @public
  */
-const INotificationListItem = "sap.ui.webcomponents.fiori.INotificationListItem";
+const INotificationListItem = "sap.ui.webc.fiori.INotificationListItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-product-switch</code> as items
  *
- * @name sap.ui.webcomponents.fiori.IProductSwitchItem
+ * @name sap.ui.webc.fiori.IProductSwitchItem
  * @interface
  * @public
  */
-const IProductSwitchItem = "sap.ui.webcomponents.fiori.IProductSwitchItem";
+const IProductSwitchItem = "sap.ui.webc.fiori.IProductSwitchItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-shellbar</code> as items
  *
- * @name sap.ui.webcomponents.fiori.IShellBarItem
+ * @name sap.ui.webc.fiori.IShellBarItem
  * @interface
  * @public
  */
-const IShellBarItem = "sap.ui.webcomponents.fiori.IShellBarItem";
+const IShellBarItem = "sap.ui.webc.fiori.IShellBarItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-side-navigation</code> as items
  *
- * @name sap.ui.webcomponents.fiori.ISideNavigationItem
+ * @name sap.ui.webc.fiori.ISideNavigationItem
  * @interface
  * @public
  */
-const ISideNavigationItem = "sap.ui.webcomponents.fiori.ISideNavigationItem";
+const ISideNavigationItem = "sap.ui.webc.fiori.ISideNavigationItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-side-navigation-item</code> as sub-items
  *
- * @name sap.ui.webcomponents.fiori.ISideNavigationSubItem
+ * @name sap.ui.webc.fiori.ISideNavigationSubItem
  * @interface
  * @public
  */
-const ISideNavigationSubItem = "sap.ui.webcomponents.fiori.ISideNavigationSubItem";
+const ISideNavigationSubItem = "sap.ui.webc.fiori.ISideNavigationSubItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-view-settings-dialog</code> as sort items
  *
- * @name sap.ui.webcomponents.fiori.ISortItem
+ * @name sap.ui.webc.fiori.ISortItem
  * @interface
  * @public
  */
-const ISortItem = "sap.ui.webcomponents.fiori.ISortItem";
+const ISortItem = "sap.ui.webc.fiori.ISortItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-timeline</code> as items
  *
- * @name sap.ui.webcomponents.fiori.ITimelineItem
+ * @name sap.ui.webc.fiori.ITimelineItem
  * @interface
  * @public
  */
-const ITimelineItem = "sap.ui.webcomponents.fiori.ITimelineItem";
+const ITimelineItem = "sap.ui.webc.fiori.ITimelineItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-upload-collection</code> as items
  *
- * @name sap.ui.webcomponents.fiori.IUploadCollectionItem
+ * @name sap.ui.webc.fiori.IUploadCollectionItem
  * @interface
  * @public
  */
-const IUploadCollectionItem = "sap.ui.webcomponents.fiori.IUploadCollectionItem";
+const IUploadCollectionItem = "sap.ui.webc.fiori.IUploadCollectionItem";
 
 /**
  * Interface for components that may be slotted inside <code>ui5-wizard</code> as wizard steps
  *
- * @name sap.ui.webcomponents.fiori.IWizardStep
+ * @name sap.ui.webc.fiori.IWizardStep
  * @interface
  * @public
  */
-const IWizardStep = "sap.ui.webcomponents.fiori.IWizardStep";
+const IWizardStep = "sap.ui.webc.fiori.IWizardStep";
 
 export {
 	IBar,

package/src/MediaGallery.js

@@ -35,7 +35,7 @@ const COLUMNS_COUNT = {
 const metadata = {
 	tag: "ui5-media-gallery",
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.MediaGallery.prototype */ {
 		/**
 		 * Defines the component items.
 		 *
@@ -45,7 +45,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b> Use the <code>ui5-media-gallery-item</code> component to define the desired items.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.IMediaGalleryItem[]}
+		 * @type {sap.ui.webc.fiori.IMediaGalleryItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -56,7 +56,7 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.MediaGallery.prototype */ {
 		/**
 		 * If set to <code>true</code>, all thumbnails are rendered in a scrollable container.
 		 * If <code>false</code>, only up to five thumbnails are rendered, followed by
@@ -95,7 +95,7 @@ const metadata = {
 		 * <li><code>Horizontal</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryLayout}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryLayout}
 		 * @defaultvalue "Auto"
 		 * @public
 		 */
@@ -114,7 +114,7 @@ const metadata = {
 		 * <li><code>Right</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryMenuHorizontalAlign}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign}
 		 * @defaultvalue "Left"
 		 * @public
 		 */
@@ -133,7 +133,7 @@ const metadata = {
 		 * <li><code>Bottom</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryMenuVerticalAlign}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign}
 		 * @defaultvalue "Bottom"
 		 * @public
 		 */
@@ -153,7 +153,7 @@ const metadata = {
 		 * <li><code>Horizontal</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryLayout}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryLayout}
 		 * @defaultvalue "Vertical"
 		 * @private
 		 */
@@ -182,11 +182,11 @@ const metadata = {
 			defaultValue: 0,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.MediaGallery.prototype */ {
 		/**
 		 * Fired when selection is changed by user interaction.
 		 *
-		 * @event sap.ui.webcomponents.fiori.MediaGallery#selection-change
+		 * @event sap.ui.webc.fiori.MediaGallery#selection-change
 		 * @param {HTMLElement} item the selected item.
 		 * @public
 		 */
@@ -199,7 +199,7 @@ const metadata = {
 		/**
 		 * Fired when the thumbnails overflow button is clicked.
 		 *
-		 * @event sap.ui.webcomponents.fiori.MediaGallery#overflow-click
+		 * @event sap.ui.webc.fiori.MediaGallery#overflow-click
 		 * @public
 		 */
 		"overflow-click": {},
@@ -209,7 +209,7 @@ const metadata = {
 		 * The display area is the central area that contains
 		 * the enlarged content of the currently selected item.
 		 *
-		 * @event sap.ui.webcomponents.fiori.MediaGallery#display-area-click
+		 * @event sap.ui.webc.fiori.MediaGallery#display-area-click
 		 * @public
 		 */
 		"display-area-click": {},
@@ -253,8 +253,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.MediaGallery
- * @extends UI5Element
+ * @alias sap.ui.webc.fiori.MediaGallery
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-media-gallery
  * @appenddocs MediaGalleryItem
  * @public

package/src/MediaGalleryItem.js

@@ -16,7 +16,7 @@ import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js";
 const metadata = {
 	tag: "ui5-media-gallery-item",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.MediaGalleryItem.prototype */ {
 
 		/**
 		 * Defines the selected state of the component.
@@ -49,7 +49,7 @@ const metadata = {
 		 * <li><code>Wide</code></li>
 		 * </ul>
 		 *
-		 * @type {MediaGalleryItemLayout}
+		 * @type {sap.ui.webc.fiori.types.MediaGalleryItemLayout}
 		 * @defaultvalue "Square"
 		 * @public
 		 */
@@ -119,7 +119,7 @@ const metadata = {
 			defaultValue: "",
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.MediaGalleryItem.prototype */ {
 		/**
 		 * Defines the content of the component.
 		 *
@@ -168,11 +168,11 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.MediaGalleryItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.MediaGalleryItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-media-gallery-item
  * @public
- * @implements sap.ui.webcomponents.fiori.IMediaGalleryItem
+ * @implements sap.ui.webc.fiori.IMediaGalleryItem
  * @since 1.1.0
  */
 class MediaGalleryItem extends UI5Element {

package/src/NotificationAction.js

@@ -6,7 +6,7 @@ import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
  */
 const metadata = {
 	tag: "ui5-notification-action",
-	properties: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.NotificationAction.prototype */ {
 		/**
 		 * Defines the text of the <code>ui5-notification-action</code>.
 		 *
@@ -44,7 +44,7 @@ const metadata = {
 		 * <li><code>Transparent</code></li>
 		 * </ul>
 		 *
-		 * @type {ButtonDesign}
+		 * @type {sap.ui.webc.main.types.ButtonDesign}
 		 * @defaultvalue "Transparent"
 		 * @public
 		 */
@@ -58,7 +58,7 @@ const metadata = {
 		 * <br><br>
 		 * <b>Note:</b>
 		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <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}
 		 * @defaultvalue ""
@@ -68,9 +68,9 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.NotificationAction.prototype */ {
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.NotificationAction.prototype */ {
 		click: {},
 	},
 };
@@ -82,10 +82,10 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationAction
- * @extends UI5Element
+ * @alias sap.ui.webc.fiori.NotificationAction
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-notification-action
- * @implements sap.ui.webcomponents.fiori.INotificationAction
+ * @implements sap.ui.webc.fiori.INotificationAction
  * @public
  */
 class NotificationAction extends UI5Element {

package/src/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,
@@ -34,7 +39,7 @@ const metadata = {
 	tag: "ui5-li-notification-group",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.NotificationListGroupItem.prototype */ {
 
 		/**
 		 * Defines if the group is collapsed or expanded.
@@ -56,13 +61,13 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.NotificationListGroupItem.prototype */ {
 
 		/**
 		 * Defines the items of the <code>ui5-li-notification-group</code>,
 		 * usually <code>ui5-li-notification</code> items.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.INotificationListItem[]}
+		 * @type {sap.ui.webc.fiori.INotificationListItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -71,7 +76,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.NotificationListGroupItem.prototype */ {
 
 		/**
 		 * Fired when the <code>ui5-li-notification-group</code> is expanded/collapsed by user interaction.
@@ -119,12 +124,12 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationListGroupItem
- * @extends NotificationListItemBase
+ * @alias sap.ui.webc.fiori.NotificationListGroupItem
+ * @extends sap.ui.webc.fiori.NotificationListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
  * @appenddocs NotificationAction
- * @implements sap.ui.webcomponents.main.IListItem
+ * @implements sap.ui.webc.main.IListItem
  * @public
  */
 class NotificationListGroupItem extends NotificationListItemBase {

package/src/NotificationListItem.hbs

@@ -77,7 +77,7 @@
 			<ui5-link
 				class="ui5-nli-footer-showMore"
 				?hidden="{{hideShowMore}}"
-				@click="{{_onShowMoreClick}}"
+				@ui5-click="{{_onShowMoreClick}}"
 				aria-hidden="true"
 				href="#" {{!--without href ENTER does not trigger click --}}
 				showMore-btn

package/src/NotificationListItem.js

@@ -1,6 +1,6 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-
+import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.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,
@@ -37,7 +41,7 @@ const metadata = {
 	tag: "ui5-li-notification",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.NotificationListItem.prototype */ {
 
 		/**
 		 * Defines if the <code>titleText</code> and <code>description</code> should wrap,
@@ -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.webc.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -73,7 +77,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.NotificationListItem.prototype */ {
 
 		/**
 		 * Defines the avatar, displayed in the <code>ui5-li-notification</code>.
@@ -85,7 +89,7 @@ const metadata = {
 		 * we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the <code>ui5-avatar</code>
 		 * you can set its <code>size</code> property to <code>XS</code> to get the required size - <code>&lt;ui5-avatar size="XS">&lt;/ui5-avatar></code>.
 		 *
-		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @type {sap.ui.webc.main.IAvatar}
 		 * @slot
 		 * @public
 		 */
@@ -120,7 +124,7 @@ const metadata = {
 			type: Node,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.NotificationListItem.prototype */ {
 		_press: {},
 	},
 };
@@ -163,12 +167,12 @@ const metadata = {
  * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationListItem
- * @extends NotificationListItemBase
+ * @alias sap.ui.webc.fiori.NotificationListItem
+ * @extends sap.ui.webc.fiori.NotificationListItemBase
  * @tagname ui5-li-notification
  * @appenddocs NotificationAction
  * @since 1.0.0-rc.8
- * @implements sap.ui.webcomponents.fiori.INotificationListItem, sap.ui.webcomponents.main.IListItem
+ * @implements sap.ui.webc.fiori.INotificationListItem, sap.ui.webc.main.IListItem
  * @public
  */
 class NotificationListItem extends NotificationListItemBase {
@@ -361,7 +365,7 @@ class NotificationListItem extends NotificationListItemBase {
 
 		const space = isSpace(event);
 
-		if (space && event.isMarked === "link") {
+		if (space && getEventMark(event) === "link") {
 			this._onShowMoreClick(event);
 			return;
 		}
@@ -375,7 +379,7 @@ class NotificationListItem extends NotificationListItemBase {
 	 * Private
 	 */
 	fireItemPress(event) {
-		if (event.isMarked === "button" || event.isMarked === "link") {
+		if (getEventMark(event) === "button" || getEventMark(event) === "link") {
 			return;
 		}
 

package/src/NotificationListItemBase.js

@@ -1,5 +1,6 @@
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
@@ -17,12 +18,21 @@ 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
  */
 const metadata = {
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.NotificationListItemBase.prototype */ {
 
 		/**
 		 * Defines the <code>titleText</code> of the item.
@@ -43,7 +53,7 @@ const metadata = {
 		 * <li><code>Medium</code></li>
 		 * <li><code>High</code></li>
 		 * </ul>
-		 * @type {Priority}
+		 * @type {sap.ui.webc.main.types.Priority}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -89,7 +99,7 @@ const metadata = {
 		/**
 		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
 		 *
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @defaultValue 1000
 		 * @public
 		 */
@@ -98,14 +108,14 @@ const metadata = {
 			defaultValue: 1000,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.NotificationListItemBase.prototype */ {
 
 		/**
 		 * Defines the actions, displayed in the top-right area.
 		 * <br><br>
 		 * <b>Note:</b> use the <code>ui5-notification-action</code> component.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.INotificationAction[]}
+		 * @type {sap.ui.webc.fiori.INotificationAction[]}
 		 * @slot
 		 * @public
 		 */
@@ -113,14 +123,19 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.NotificationListItemBase.prototype */ {
 		/**
 		 * Fired when the <code>Close</code> button is pressed.
 		 *
-		 * @event
+		 * @event sap.ui.webc.fiori.NotificationListItemBase#close
+		 * @param {HTMLElement} item the closed item.
 		 * @public
 		 */
-		close: {},
+		close: {
+			detail: {
+				item: HTMLElement,
+			},
+		},
 	},
 };
 
@@ -132,8 +147,8 @@ const metadata = {
  * @abstract
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationListItemBase
- * @extends ListItemBase
+ * @alias sap.ui.webc.fiori.NotificationListItemBase
+ * @extends sap.ui.webc.main.ListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
  * @appenddocs NotificationAction
@@ -152,14 +167,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 +176,7 @@ class NotificationListItemBase extends ListItemBase {
 	}
 
 	get priorityIcon() {
-		return NotificationListItemBase.priorityIconsMappings()[this.priority];
+		return ICON_PER_PRIORITY[this.priority];
 	}
 
 	get overflowButtonDOM() {
@@ -235,7 +242,7 @@ class NotificationListItemBase extends ListItemBase {
 	_onkeydown(event) {
 		super._onkeydown(event);
 
-		if (event.isMarked === "button") {
+		if (getEventMark(event) === "button") {
 			return;
 		}
 

package/src/NotificationOverflowActionsPopover.hbs

@@ -13,6 +13,7 @@
 				?disabled="{{this.disabled}}"
 				design="{{this.design}}"
 				data-ui5-external-action-item-id="{{this.refItemid}}"
+				class="ui5-notification-overflow-list-btn"
 				>{{this.text}}
 			</ui5-button>
 		{{/each}}