feat(ui5-li-notification, ui5-li-notification-group): introduce new c…

…omponents (#1576)

The component covers the main functionaly of the sap.m.NotificationListItem.
It is meant to display a notification and has a rich set of properties and slots to do it.

Fixes: #1478

docs/Public Module Imports.md

@@ -136,6 +136,9 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
 | Shell Bar Item           | `ui5-shellbar-item`  | `import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";`  |
 | Product Switch           | `ui5-product-switch`       | `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";`      |
 | Product Switch Item      | `ui5-product-switch-item`  | `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`  |
+| Notification List Item      | `ui5-li-notifcation`      | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";`     |
+| Notification Group List Item|`ui5-li-notification-group`| `import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";`|
+| Notification Overflow Action| `ui5-notification-overflow-action` | `import "@ui5/webcomponents-fiori/dist/NotificationOverflowAction.js";`|
 
 ### 2. Assets
 

packages/base/src/util/TabbableElements.js

@@ -12,8 +12,12 @@ const getLastTabbableElement = node => {
 const getTabbables = (nodes, tabbables) => {
 	const tabbablesNodes = tabbables || [];
 
+	if (!nodes) {
+		return tabbablesNodes;
+	}
+
 	Array.from(nodes).forEach(currentNode => {
-		if (currentNode.nodeType === Node.TEXT_NODE) {
+		if (currentNode.nodeType === Node.TEXT_NODE || currentNode.nodeType === Node.COMMENT_NODE) {
 			return;
 		}
 

packages/fiori/bundle.esm.js

@@ -13,3 +13,6 @@ import ShellBar from "./dist/ShellBar.js";
 import ShellBarItem from "./dist/ShellBarItem.js";
 import UploadCollection from "./dist/UploadCollection.js";
 import UploadCollectionItem from "./dist/UploadCollectionItem.js";
+import NotificationListItem from "./dist/NotificationListItem.js"
+import NotificationListGroupItem from "./dist/NotificationListGroupItem.js";
+import NotificationOverflowAction from "./dist/NotificationOverflowAction.js";

packages/fiori/src/NotifactionOverflowActionsPopover.hbs

@@ -0,0 +1,20 @@
+<ui5-popover
+	class="ui5-notification-overflow-popover"
+	placement-type="Bottom"
+	horizontal-align="Right"
+	no-arrow
+>
+	<div class="ui5-notification-overflow-list">
+		{{#each overflowActions}}
+			<ui5-button
+				icon="{{this.icon}}"
+				design="Transparent"
+				@click="{{this.press}}"
+				?disabled="{{this.disabled}}"
+				design="{{this.design}}"
+				data-ui5-external-action-item-id="{{this.refItemid}}"
+				>{{this.text}}
+			</ui5-button>
+		{{/each}}
+	</div>
+</ui5-popover>

packages/fiori/src/NotificationListGroupItem.hbs

@@ -0,0 +1,77 @@
+<li
+	class="ui5-nli-group-root ui5-nli-focusable"
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+	@keydown="{{_onkeydown}}"
+	role="option"
+	tabindex="{{_tabIndex}}"
+	dir="{{rtl}}"
+	aria-labelledby="{{ariaLabelledBy}}"
+>
+	<div class="ui5-nli-group-header">
+		<ui5-button
+			icon="navigation-right-arrow"
+			design="Transparent"
+			@click="{{_onBtnToggleClick}}"
+			class="ui5-nli-group-toggle-btn"
+		></ui5-button>
+
+		{{#if hasPriority}}
+			<ui5-icon
+				class="ui5-prio-icon ui5-prio-icon--{{priorityIcon}}"
+				name="{{priorityIcon}}">
+			</ui5-icon>
+		{{/if}}
+
+		<div id="{{_id}}-heading" class="ui5-nli-group-heading" part="heading">
+			{{heading}}
+		</div>
+
+		{{#if showCounter}}
+			<span class="ui5-nli-group-counter">({{itemsCount}})</span>
+		{{/if}}
+
+		<div class="ui5-nli-group-divider"></div>
+
+		{{#unless collapsed}}
+			{{#if showOverflow}}
+				<ui5-button
+					icon="overflow"
+					design="Transparent"
+					@click="{{_onBtnOverflowClick}}"
+					class="ui5-nli-overflow-btn"
+					title="{{overflowBtnTitle}}"
+				></ui5-button>
+			{{else}}
+				{{#each standardActions}}
+					<ui5-button
+						icon="{{this.icon}}"
+						class="ui5-nli-action"
+						?disabled="{{this.disabled}}"
+						design="{{this.design}}"
+						@click="{{this.press}}"
+						data-ui5-external-action-item-id="{{this.refItemid}}"
+					>
+						{{this.text}}
+					</ui5-button>
+				{{/each}}
+			{{/if}}
+		{{/unless}}
+
+		{{#if showClose}}
+			<ui5-button
+				icon="decline"
+				design="Transparent"
+				@click="{{_onBtnCloseClick}}"
+				title="{{closeBtnTitle}}"
+				close-btn
+			></ui5-button>
+		{{/if}}
+
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
+	</div>
+
+	<ui5-list class="ui5-nli-group-items">
+		<slot></slot>
+	</ui5-list>
+</li>

packages/fiori/src/NotificationListGroupItem.js

@@ -0,0 +1,205 @@
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Priority from "@ui5/webcomponents/dist/types/Priority.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import NotificationListItemBase from "./NotificationListItemBase.js";
+
+// Texts
+import {
+	NOTIFICATION_LIST_GROUP_ITEM_TXT,
+	NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT,
+	NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT,
+	NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT,
+	NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT,
+	NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE,
+	NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Templates
+import NotificationListGroupItemTemplate from "./generated/templates/NotificationListGroupItemTemplate.lit.js";
+
+// Styles
+import NotificationListGroupItemCss from "./generated/themes/NotificationListGroupItem.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-li-notification-group",
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+
+		/**
+		 * Defines if the group is collapsed or expanded.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		collapsed: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines if the items <code>counter</code> would be displayed.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		showCounter: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+
+		/**
+		 * Defines the items of the <code>ui5-li-notification-group</code>,
+		 * usually <code>ui5-li-notification</code> items.
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			propertyName: "items",
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.fiori.NotificationListGroupItem.prototype */ {
+
+		/**
+		 * Fired when the <code>ui5-li-notification-group</code> is expanded/collapsed by user interaction.
+		 *
+		 * @event
+		 * @public
+		 */
+		toggle: {},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-li-notification-group</code> is a special type of list item,
+ * that unlike others can group items within self, usually <code>ui5-li-notification</code> items.
+ * <br>
+ *
+ * The component consists of:
+ * <ul>
+ * <li><code>Toggle</code> button to expand and collapse the group</li>
+ * <li><code>Priority</code> icon to display the priority of the group</li>
+ * <li><code>Heading</code> to entitle the group</li>
+ * <li>Custom actions - with the use of <code>ui5-notification-overflow-action</code></li>
+ * <li>Items of the group</li>
+ * </ul>
+ *
+ * <h3>Usage</h3>
+ * The component can be used in a standard <code>ui5-list</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/NotificationListGroupItem.js";</code>
+ * <br>
+ * <code>import @ui5/webcomponents/dist/NotificationOverflowAction.js";</code> (optional)
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.NotificationListGroupItem
+ * @extends NotificationListItemBase
+ * @tagname ui5-li-notification-group
+ * @since 1.0.0-rc.8
+ * @appenddocs NotificationOverflowAction
+ * @public
+ */
+class NotificationListGroupItem extends NotificationListItemBase {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return NotificationListGroupItemCss;
+	}
+
+	static get template() {
+		return NotificationListGroupItemTemplate;
+	}
+
+	static async onDefine() {
+		await Promise.all([
+			List.define(),
+			Button.define(),
+			Icon.define(),
+			Popover.define(),
+			fetchI18nBundle("@ui5/webcomponents-fiori"),
+		]);
+	}
+
+	get itemsCount() {
+		return this.items.length;
+	}
+
+	get overflowBtnTitle() {
+		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
+	}
+
+	get closeBtnTitle() {
+		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
+	}
+
+	get priorityText() {
+		if (this.priority === Priority.High) {
+			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
+		}
+
+		if (this.priority === Priority.Medium) {
+			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
+		}
+
+		if (this.priority === Priority.Low) {
+			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);
+		}
+
+		return "";
+	}
+
+	get accInvisibleText() {
+		const groupTxt = this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TXT);
+		const counterTxt = this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT);
+		const counter = this.showCounter ? `${counterTxt} ${this.itemsCount}` : "";
+		const priorityText = this.priorityText;
+
+		return `${groupTxt} ${priorityText} ${counter}`;
+	}
+
+	get ariaLabelledBy() {
+		const id = this._id;
+		const ids = [];
+
+		if (this.hasHeading) {
+			ids.push(`${id}-heading`);
+		}
+
+		ids.push(`${id}-invisibleText`);
+
+		return ids.join(" ");
+	}
+
+	/**
+	 * Event handlers
+	 *
+	 */
+	_onBtnToggleClick() {
+		this.collapsed = !this.collapsed;
+		this.fireEvent("toggle", { item: this });
+	}
+}
+
+NotificationListGroupItem.define();
+
+export default NotificationListGroupItem;