fix(ui5-li-notification-group): fixed close button functionality in shell bar sample (#4408)

Fixed samples when ui5-li-notification-group is used in shellbar. The close button functionality now works

Fixes #4202

Author: kskondov

packages/fiori/test/pages/NotificationListGroupItem.html

@@ -293,17 +293,17 @@ <h3>Events on ui5-list level</h3>
 	</div>
 
 	<script>
-		notificationList.addEventListener("itemClick", function(event) {
+		notificationList.addEventListener("item-click", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
 			wcToastBS.show();
 		});
 
-		notificationList.addEventListener("itemClose", function(event) {
+		notificationList.addEventListener("item-close", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
 			wcToastBS.show();
 		});
 
-		notificationList.addEventListener("itemToggle", function(event) {
+		notificationList.addEventListener("item-toggle", function(event) {
 			var item = event.detail.item;
 			wcToastBS.textContent = item.titleText + " has been " + (item.collapsed ? "collapsed" : "expanded");
 			wcToastBS.show();
@@ -333,10 +333,15 @@ <h3>Events on ui5-list level</h3>
 
 
 
-		shellbar.addEventListener("ui5-notificationsClick", function(event) {
+		shellbar.addEventListener("ui5-notifications-click", function(event) {
 			event.preventDefault();
 			notificationsPopover.showAt(event.detail.targetRef);
 		});
+
+		notificationListTop.addEventListener("item-close", function (event) {
+				wcToastBS.textContent = event.detail.item.titleText;
+				wcToastBS.show();
+		});
 	</script>
 </body>
 </html>

packages/fiori/test/pages/NotificationListItem.html

@@ -247,17 +247,17 @@ <h3>Events on ui5-list level</h3>
 	</div>
 
 	<script>
-		notificationList.addEventListener("itemClick", function(event) {
+		notificationList.addEventListener("item-click", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
 			wcToastBS.show();
 		});
 
-		notificationList.addEventListener("itemClose", function(event) {
+		notificationList.addEventListener("item-close", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
 			wcToastBS.show();
 		});
 
-		notificationList2.addEventListener("itemClick", function(event) {
+		notificationList2.addEventListener("item-click", function(event) {
 			var item = event.detail.item;
 
 			setTimeout(function() {
@@ -270,7 +270,7 @@ <h3>Events on ui5-list level</h3>
 			wcToastBS.show();
 		});
 
-		notificationList2.addEventListener("itemClose", function(event) {
+		notificationList2.addEventListener("item-close", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
 			wcToastBS.show();
 		});
@@ -299,7 +299,7 @@ <h3>Events on ui5-list level</h3>
 			notificationsPopover.showAt(openNotifications);
 		});
 
-		shellbar.addEventListener("ui5-notificationsClick", function(event) {
+		shellbar.addEventListener("ui5-notifications-click", function(event) {
 			event.preventDefault();
 			notificationsPopover.showAt(event.detail.targetRef);
 		});

packages/fiori/test/samples/NotificationListGroupItem.sample.html

@@ -309,6 +309,10 @@ <h3>NotificationListGroupItem In ShellBar</h3>
 				event.preventDefault();
 				notificationsPopover.showAt(event.detail.targetRef);
 			});
+
+			notificationListTop.addEventListener("item-close", function (e) {
+				e.detail.item.hidden = true;
+			});
 		</script>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
@@ -358,6 +362,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
 	shellbar.addEventListener("notifications-click", function(event) {
 		notificationsPopover.showAt(event.detail.targetRef);
 	});
+
 </script>
 
 	</xmp></pre>