@ui5/webcomponents-fiori 0.0.0-dff5837d7 → 0.0.0-e0658a650

package/dist/NotificationListItem.js

@@ -1,7 +1,5 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
@@ -9,8 +7,13 @@ import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 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,
@@ -31,8 +34,6 @@ import NotificationListItemTemplate from "./generated/templates/NotificationList
 // Styles
 import NotificationListItemCss from "./generated/themes/NotificationListItem.css.js";
 
-const MAX_WRAP_HEIGHT = 32; // px.
-
 /**
  * @public
  */
@@ -43,34 +44,24 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
 
 		/**
-		 * Defines if the <code>heading</code> and <code>decription</code> should wrap,
+		 * Defines if the <code>titleText</code> and <code>description</code> should wrap,
 		 * they truncate by default.
 		 *
 		 * <br><br>
-		 * <b>Note:</b> by default the <code>heading</code> and <code>decription</code>,
+		 * <b>Note:</b> by default the <code>titleText</code> and <code>decription</code>,
 		 * and a <code>ShowMore/Less</code> button would be displayed.
-		 * @defaultvalue false
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
+		 * @defaultvalue "None"
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		wrap: {
-			type: Boolean,
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		/**
-		 * Defines if the <code>notification</code> is new or has been already read.
-		 * <br><br>
-		 * <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font,
-		 * if set to true - it has a normal font.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		read: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the state of the <code>heading</code> and <code>decription</code>,
+		 * Defines the state of the <code>titleText</code> and <code>description</code>,
 		 * if less or more information is displayed.
 		 * @private
 		 */
@@ -93,8 +84,12 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Consider using the <code>ui5-avatar</code> to display icons, initials or images.
+		 * <br>
+		 * <b>Note:</b>In order to be complaint with the UX guidlines and for best experience,
+		 * 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 {HTMLElement}
+		 * @type {sap.ui.webcomponents.main.IAvatar}
 		 * @slot
 		 * @public
 		 */
@@ -103,14 +98,13 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the elements, dipalyed in the footer of the of the <code>ui5-li-notification</code>.
+		 * Defines the elements, displayed in the footer of the of the component.
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
 		 */
 		footnotes: {
 			type: HTMLElement,
-			propertyName: "footnotes",
 			individualSlots: true,
 		},
 
@@ -119,10 +113,10 @@ const metadata = {
 		 * usually a description of the notification.
 		 *
 		 * <br><br>
-		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
-		 * @slot
+		 * @slot description
 		 * @public
 		 */
 		"default": {
@@ -139,44 +133,54 @@ const metadata = {
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-li-notification</code> is a type of list item, meant to dispaly notifcatations.
+ * The <code>ui5-li-notification</code> is a type of list item, meant to display notifications.
  * <br>
  *
- * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>heading</code>, descriptive <code>content</code>
- * and <code>footnotes</code> to fully describe a notifcation.
+ * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>titleText</code>, descriptive <code>content</code>
+ * and <code>footnotes</code> to fully describe a notification.
  * <br>
  *
  * The user can:
  * <ul>
- * <li>display a <code>Close</code> button</code></li>
- * <li>can control whether the <code>heading</code> and <code>description</code> should wrap or truncate
- * and display a <code>ShomeMore</code> button to switch between less and more information</code></li>
- * <li>add custom actions by using the <code>ui5-notification-overflow-action</code></code> component</li>
+ * <li>display a <code>Close</code> button</li>
+ * <li>can control whether the <code>titleText</code> and <code>description</code> should wrap or truncate
+ * and display a <code>ShowMore</code> button to switch between less and more information</li>
+ * <li>add custom actions by using the <code>ui5-notification-action</code> component</li>
  * </ul>
  *
  * <h3>Usage</h3>
  * The component can be used in a standard <code>ui5-list</code>.
  *
+ * <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-li-notification</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title-text - Used to style the titleText of the notification list item</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/NotificationListItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/NotificationListItem.js";</code>
  * <br>
- * <code>import @ui5/webcomponents/dist/NotificationOverflowAction.js";</code> (optional)
+ * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.NotificationListItem
- * @extends NotificationListItemBase
+ * @extends sap.ui.webcomponents.fiori.NotificationListItemBase
  * @tagname ui5-li-notification
- * @appenddocs NotificationOverflowAction
+ * @appenddocs NotificationAction
  * @since 1.0.0-rc.8
+ * @implements sap.ui.webcomponents.fiori.INotificationListItem, sap.ui.webcomponents.main.IListItem
  * @public
  */
 class NotificationListItem extends NotificationListItemBase {
 	constructor() {
 		super();
 
-		// the heading overflow height
-		this._headingOverflowHeight = 0;
+		// the titleText overflow height
+		this._titleTextOverflowHeight = 0;
 
 		// the description overflow height
 		this._descOverflowHeight = 0;
@@ -197,15 +201,14 @@ class NotificationListItem extends NotificationListItemBase {
 		return NotificationListItemTemplate;
 	}
 
-	static async onDefine() {
-		await Promise.all([
-			Button.define(),
-			Icon.define(),
-			BusyIndicator.define(),
-			Link.define(),
-			Popover.define(),
-			fetchI18nBundle("@ui5/webcomponents-fiori"),
-		]);
+	static get dependencies() {
+		return [
+			Button,
+			Icon,
+			BusyIndicator,
+			Link,
+			Popover,
+		];
 	}
 
 	onEnterDOM() {
@@ -226,22 +229,22 @@ class NotificationListItem extends NotificationListItemBase {
 
 	get showMoreText() {
 		if (this._showMorePressed) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_LESS);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_LESS);
 		}
 
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);
 	}
 
-	get overflowBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
+	get overflowBtnAccessibleName() {
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
 	}
 
-	get closeBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
+	get closeBtnAccessibleName() {
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
 	}
 
 	get hideShowMore() {
-		if (!this.wrap && this._showMore) {
+		if (this.wrappingType === WrappingType.None && this._showMore) {
 			return undefined;
 		}
 
@@ -252,30 +255,26 @@ class NotificationListItem extends NotificationListItemBase {
 		return this.shadowRoot.querySelector(".ui5-nli-description");
 	}
 
-	get headingDOM() {
-		return this.shadowRoot.querySelector(".ui5-nli-title");
+	get titleTextDOM() {
+		return this.shadowRoot.querySelector(".ui5-nli-title-text");
 	}
 
-	get headingHeight() {
-		return this.headingDOM.offsetHeight;
+	get titleTextHeight() {
+		return this.titleTextDOM.offsetHeight;
 	}
 
 	get descriptionHeight() {
 		return this.descriptionDOM.offsetHeight;
 	}
 
-	get headingOverflows() {
-		const heading = this.headingDOM;
+	get titleTextOverflows() {
+		const titleText = this.titleTextDOM;
 
-		if (!heading) {
+		if (!titleText) {
 			return false;
 		}
 
-		if (isIE()) {
-			return heading.scrollHeight > MAX_WRAP_HEIGHT;
-		}
-
-		return heading.offsetHeight < heading.scrollHeight;
+		return titleText.offsetHeight < titleText.scrollHeight;
 	}
 
 	get descriptionOverflows() {
@@ -285,10 +284,6 @@ class NotificationListItem extends NotificationListItemBase {
 			return false;
 		}
 
-		if (isIE()) {
-			return description.scrollHeight > MAX_WRAP_HEIGHT;
-		}
-
 		return description.offsetHeight < description.scrollHeight;
 	}
 
@@ -305,8 +300,8 @@ class NotificationListItem extends NotificationListItemBase {
 		const id = this._id;
 		const ids = [];
 
-		if (this.hasHeading) {
-			ids.push(`${id}-heading`);
+		if (this.hasTitleText) {
+			ids.push(`${id}-title-text`);
 		}
 		if (this.hasDesc) {
 			ids.push(`${id}-description`);
@@ -323,34 +318,26 @@ class NotificationListItem extends NotificationListItemBase {
 
 	get priorityText() {
 		if (this.priority === Priority.High) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
 		}
 
 		if (this.priority === Priority.Medium) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
 		}
 
 		if (this.priority === Priority.Low) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);
 		}
 
 		return "";
 	}
 
 	get accInvisibleText() {
-		const notifcationTxt = this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
-		const readTxt = this.read ? this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_READ) : this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
+		const notificationText = NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
+		const readText = this.read ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
 		const priorityText = this.priorityText;
 
-		return `${notifcationTxt} ${readTxt} ${priorityText}`;
-	}
-
-	get classes() {
-		return {
-			content: {
-				"ui5-nli-content--ie": isIE(),
-			},
-		};
+		return `${notificationText} ${readText} ${priorityText}`;
 	}
 
 	/**
@@ -400,23 +387,23 @@ class NotificationListItem extends NotificationListItemBase {
 	}
 
 	onResize() {
-		if (this.wrap) {
+		if (this.wrappingType === WrappingType.Normal) {
 			this._showMore = false;
 			return;
 		}
 
-		const headingWouldOverflow = this.headingHeight > this._headingOverflowHeight;
-		const descWouldOverflow = this.descriptionHeight > this._descOverflowHeight;
-		const overflows = headingWouldOverflow || descWouldOverflow;
+		const titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;
+		const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
+		const overflows = titleTextWouldOverflow || descWouldOverflow;
 
 		if (this._showMorePressed && overflows) {
 			this._showMore = true;
 			return;
 		}
 
-		if (this.headingOverflows || this.descriptionOverflows) {
-			this._headingOverflowHeight = this.headingHeight;
-			this._descOverflowHeight = this.descriptionHeight;
+		if (this.titleTextOverflows || this.descriptionOverflows) {
+			this._titleTextOverflowHeight = this.titleTextHeight;
+			this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
 			this._showMore = true;
 			return;
 		}

package/dist/NotificationListItemBase.js

@@ -1,21 +1,30 @@
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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";
 
 // Icons
-import "@ui5/webcomponents-icons/dist/icons/decline.js";
-import "@ui5/webcomponents-icons/dist/icons/message-success.js";
-import "@ui5/webcomponents-icons/dist/icons/message-error.js";
-import "@ui5/webcomponents-icons/dist/icons/message-warning.js";
-import "@ui5/webcomponents-icons/dist/icons/overflow.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/message-success.js";
+import "@ui5/webcomponents-icons/dist/message-error.js";
+import "@ui5/webcomponents-icons/dist/message-warning.js";
+import "@ui5/webcomponents-icons/dist/overflow.js";
 
 // Templates
-import NotifactionOverflowActionsPopoverTemplate from "./generated/templates/NotifactionOverflowActionsPopoverTemplate.lit.js";
+import NotificationOverflowActionsPopoverTemplate from "./generated/templates/NotificationOverflowActionsPopoverTemplate.lit.js";
 
 // Styles
-import NotifactionOverflowActionsPopoverCss from "./generated/themes/NotifactionOverflowActionsPopover.css.js";
+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
@@ -25,18 +34,25 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 
 		/**
-		 * Defines the <code>heading</code> of the item.
+		 * Defines the <code>titleText</code> of the item.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
-		heading: {
+		titleText: {
 			type: String,
 		},
 
 		/**
 		 * Defines the <code>priority</code> of the item.
-		 * @type {Priority}
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code></li>
+		 * <li><code>Low</code></li>
+		 * <li><code>Medium</code></li>
+		 * <li><code>High</code></li>
+		 * </ul>
+		 * @type {sap.ui.webcomponents.main.types.Priority}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -55,6 +71,19 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines if the <code>notification</code> is new or has been already read.
+		 * <br><br>
+		 * <b>Note:</b> if set to <code>false</code> the <code>titleText</code> has bold font,
+		 * if set to true - it has a normal font.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		read: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines if a busy indicator would be displayed over the item.
 		 * @type {boolean}
@@ -65,15 +94,27 @@ const metadata = {
 		busy: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+		 *
+		 * @type {sap.ui.webcomponents.base.types.Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		busyDelay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 
 		/**
 		 * Defines the actions, displayed in the top-right area.
 		 * <br><br>
-		 * <b>Note:</b> use the <code>ui5-notification-overflow-action</code> component.
+		 * <b>Note:</b> use the <code>ui5-notification-action</code> component.
 		 *
-		 * @type {HTMLElement}
+		 * @type {sap.ui.webcomponents.fiori.INotificationAction[]}
 		 * @slot
 		 * @public
 		 */
@@ -101,41 +142,27 @@ 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 NotificationOverflowAction
+ * @appenddocs NotificationAction
  * @public
  */
 class NotificationListItemBase extends ListItemBase {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
 
 	static get staticAreaTemplate() {
-		return NotifactionOverflowActionsPopoverTemplate;
+		return NotificationOverflowActionsPopoverTemplate;
 	}
 
 	static get staticAreaStyles() {
-		return NotifactionOverflowActionsPopoverCss;
-	}
-
-	static priorityIconsMappings() {
-		return {
-			"High": "message-error",
-			"Medium": "message-warning",
-			"Low": "message-success",
-		};
+		return NotificationOverflowActionsPopoverCss;
 	}
 
-	get hasHeading() {
-		return !!this.heading.length;
+	get hasTitleText() {
+		return !!this.titleText.length;
 	}
 
 	get hasPriority() {
@@ -143,7 +170,7 @@ class NotificationListItemBase extends ListItemBase {
 	}
 
 	get priorityIcon() {
-		return NotificationListItemBase.priorityIconsMappings()[this.priority];
+		return ICON_PER_PRIORITY[this.priority];
 	}
 
 	get overflowButtonDOM() {
@@ -224,7 +251,7 @@ class NotificationListItemBase extends ListItemBase {
 
 	async openOverflow() {
 		const overflowPopover = await this.getOverflowPopover();
-		overflowPopover.openBy(this.overflowButtonDOM);
+		overflowPopover.showAt(this.overflowButtonDOM);
 	}
 
 	async closeOverflow() {
@@ -236,6 +263,10 @@ class NotificationListItemBase extends ListItemBase {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector(".ui5-notification-overflow-popover");
 	}
+
+	static async onDefine() {
+		NotificationListItemBase.i18nFioriBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
 }
 
 export default NotificationListItemBase;