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

package/dist/MediaGalleryItem.js

@@ -0,0 +1,336 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/background.js";
+import MediaGalleryItemLayout from "./types/MediaGalleryItemLayout.js";
+// Template
+import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemplate.lit.js";
+// Styles
+import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-media-gallery-item",
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
+
+		/**
+		 * Defines the selected state of the component.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		selected: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines whether the component is in disabled state.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
+		/**
+		 * Determines the layout of the item container.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Square</code></li>
+		 * <li><code>Wide</code></li>
+		 * </ul>
+		 *
+		 * @type {sap.ui.webcomponents.fiori.types.MediaGalleryItemLayout}
+		 * @defaultvalue "Square"
+		 * @public
+		 */
+		layout: {
+			type: MediaGalleryItemLayout,
+			defaultValue: MediaGalleryItemLayout.Square,
+		},
+
+		/**
+		 * @private
+		 */
+		_interactive: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		_square: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		_contentImageNotFound: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		_thumbnailNotFound: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		_thumbnailDesign: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates whether the element is focused.
+		 *
+		 * @private
+		 */
+		focused: {
+			type: Boolean,
+		},
+
+		/**
+		 * @private
+		 */
+		_tabIndex: {
+			type: String,
+			defaultValue: undefined,
+		},
+
+		/**
+		 * @private
+		 */
+		contentHeight: {
+			type: String,
+			noAttribute: true,
+			defaultValue: "",
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
+		/**
+		 * Defines the content of the component.
+		 *
+		 * @type {HTMLElement}
+		 * @slot content
+		 * @public
+		 */
+		 "default": {
+			propertyName: "content",
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the content of the thumbnail.
+		 *
+		 * @type {HTMLElement}
+		 * @slot
+		 * @public
+		 */
+		 "thumbnail": {
+			type: HTMLElement,
+		},
+	},
+};
+
+/**
+ * @class
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-media-gallery-item</code> web component represents the items displayed in the
+ * <code>ui5-media-gallery</code> web component.
+ * <br><br>
+ * <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>.
+ * <br><br>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-media-gallery</code> provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * <ul>
+ * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";</code> (comes with <code>ui5-media-gallery</code>)
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.MediaGalleryItem
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-media-gallery-item
+ * @public
+ * @implements sap.ui.webcomponents.fiori.IMediaGalleryItem
+ * @since 1.1.0
+ */
+class MediaGalleryItem extends UI5Element {
+	constructor() {
+		super();
+		this._monitoredContent = null;
+		this._monitoredThumbnail = null;
+	}
+
+	onEnterDOM() {
+		this._thumbnailDesign = !isPhone();
+		this._interactive = !isPhone();
+		this._square = true;
+	}
+
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return MediaGalleryItemCss;
+	}
+
+	static get template() {
+		return MediaGalleryItemTemplate;
+	}
+
+	get _thumbnail() {
+		return this.thumbnail.length && this.thumbnail[0];
+	}
+
+	get _content() {
+		return this.content.length && this.content[0];
+	}
+
+	get _isThubmnailAvailable() {
+		return this._thumbnail && !this._thumbnailNotFound;
+	}
+
+	get _isContentAvailable() {
+		return this._content && !this._contentImageNotFound;
+	}
+
+	get _useThumbnail() {
+		return this._thumbnailDesign && this._isThubmnailAvailable;
+	}
+
+	get _useContent() {
+		return !this._useThumbnail && this._isContentAvailable;
+	}
+
+	get tabIndex() {
+		return this.disabled ? undefined : this._tabIndex;
+	}
+
+	get _showBackgroundIcon() {
+		return this._thumbnailNotFound || this._contentImageNotFound;
+	}
+
+	get styles() {
+		return {
+			wrapper: {
+				height: this.contentHeight,
+			},
+		};
+	}
+
+	get _role() {
+		return this._interactive ? "button" : undefined;
+	}
+
+	onBeforeRendering() {
+		this._monitorLoadingError();
+	}
+
+	_monitorLoadingError() {
+		let callback,
+			success;
+		if (this._thumbnailDesign && this.thumbnail.length && (this._monitoredThumbnail !== this._thumbnail)) {
+			this._thumbnailNotFound = undefined; // reset flag
+			callback = this._updateThumbnailLoaded;
+			success = this._attachListeners(this._thumbnail, callback);
+			success && (this._monitoredThumbnail = this._thumbnail);
+		}
+		if (!this._useThumbnail && this.content.length && (this._monitoredContent !== this._content)) {
+			this._contentImageNotFound = undefined; // reset flag
+			callback = this._updateContentImageLoaded;
+			success = this._attachListeners(this._content, callback);
+			success && (this._monitoredContent = this._content);
+		}
+	}
+
+	_attachListeners(element, callback) {
+		const isImg = element.tagName === "IMG",
+			img = isImg ? element : element.querySelector("img");
+		if (img) {
+			callback.call(this, img);
+			img.addEventListener("error", () => {
+				if (this.contains(img)) { // img still belongs to us
+					callback.call(this, img);
+				}
+			});
+			img.addEventListener("load", () => {
+				if (this.contains(img)) { // img still belongs to us
+					callback.call(this, img);
+				}
+			});
+			return true;
+		}
+	}
+
+	_updateContentImageLoaded(image) {
+		this._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;
+	}
+
+	_updateThumbnailLoaded(image) {
+		this._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;
+	}
+
+	_onkeydown(event) {
+		if (isSpace(event)) {
+			event.preventDefault();
+		}
+
+		if (isEnter(event)) {
+			this._fireItemClick();
+		}
+	}
+
+	_onkeyup(event) {
+		if (isSpace(event)) {
+			this._fireItemClick();
+		}
+	}
+
+	_onfocusout() {
+		this.focused = false;
+	}
+
+	_onfocusin() {
+		this.focused = true;
+	}
+
+	_fireItemClick() {
+		this.fireEvent("click", { item: this });
+	}
+
+	static get dependencies() {
+		return [
+			Icon,
+		];
+	}
+}
+
+MediaGalleryItem.define();
+
+export default MediaGalleryItem;

package/dist/NotificationAction.js

@@ -0,0 +1,99 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-notification-action",
+	properties: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+		/**
+		 * Defines the text of the <code>ui5-notification-action</code>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+
+		/**
+		 * Defines if the action is disabled.
+		 * <br><br>
+		 * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
+		/**
+		 * Defines the action design.
+		 *
+		 * <br><br>
+		 * <b>Note:</b>
+		 * <ul>
+		 * <li><code>Default</code></li>
+		 * <li><code>Emphasized</code></li>
+		 * <li><code>Positive</code></li>
+		 * <li><code>Negative</code></li>
+		 * <li><code>Transparent</code></li>
+		 * </ul>
+		 *
+		 * @type {sap.ui.webcomponents.main.types.ButtonDesign}
+		 * @defaultvalue "Transparent"
+		 * @public
+		 */
+		design: {
+			type: ButtonDesign,
+			defaultValue: ButtonDesign.Transparent,
+		},
+
+		/**
+		 * Defines the <code>icon</code> source URI.
+		 * <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://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 ""
+		 * @public
+		 */
+		icon: {
+			type: String,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	},
+	events: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+		click: {},
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-notification-action</code> represents an abstract action,
+ * used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.NotificationAction
+ * @extends sap.ui.webcomponents.base.UI5Element
+ * @tagname ui5-notification-action
+ * @implements sap.ui.webcomponents.fiori.INotificationAction
+ * @public
+ */
+class NotificationAction extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+NotificationAction.define();
+
+export default NotificationAction;

package/dist/NotificationListGroupItem.js

@@ -1,4 +1,3 @@
-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";
@@ -7,15 +6,24 @@ 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,
 	NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT,
+	NOTIFICATION_LIST_ITEM_READ,
+	NOTIFICATION_LIST_ITEM_UNREAD,
 	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,
+	NOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE,
+	NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE,
+	NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -59,8 +67,8 @@ const metadata = {
 		 * Defines the items of the <code>ui5-li-notification-group</code>,
 		 * usually <code>ui5-li-notification</code> items.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {sap.ui.webcomponents.fiori.INotificationListItem[]}
+		 * @slot items
 		 * @public
 		 */
 		"default": {
@@ -92,26 +100,36 @@ const metadata = {
  * <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><code>TitleText</code> to entitle the group</li>
+ * <li>Custom actions - with the use of <code>ui5-notification-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>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-group</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title-text - Used to style the titleText of the notification list group item</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/NotificationListGroupItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/NotificationListGroupItem.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.NotificationListGroupItem
- * @extends NotificationListItemBase
+ * @extends sap.ui.webcomponents.fiori.NotificationListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
- * @appenddocs NotificationOverflowAction
+ * @appenddocs NotificationAction
+ * @implements sap.ui.webcomponents.main.IListItem
  * @public
  */
 class NotificationListGroupItem extends NotificationListItemBase {
@@ -143,60 +161,79 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		});
 	}
 
-	static async onDefine() {
-		await Promise.all([
-			List.define(),
-			Button.define(),
-			Icon.define(),
-			BusyIndicator.define(),
-			Popover.define(),
-			fetchI18nBundle("@ui5/webcomponents-fiori"),
-		]);
+	static get dependencies() {
+		return [
+			List,
+			Button,
+			Icon,
+			BusyIndicator,
+			Popover,
+		];
 	}
 
 	get itemsCount() {
 		return this.items.length;
 	}
 
-	get overflowBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
+	get overflowBtnAccessibleName() {
+		return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
+	}
+
+	get closeBtnAccessibleName() {
+		return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE);
 	}
 
-	get closeBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
+	get toggleBtnAccessibleName() {
+		if (this.collapsed) {
+			return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE);
+		}
+
+		return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE);
 	}
 
 	get priorityText() {
 		if (this.priority === Priority.High) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
+			return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
 		}
 
 		if (this.priority === Priority.Medium) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
+			return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
 		}
 
 		if (this.priority === Priority.Low) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);
+			return NotificationListGroupItem.i18nFioriBundle.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 `${this.groupText} ${this.readText} ${this.priorityText} ${this.counterText}`;
+	}
+
+	get readText() {
+		if (this.read) {
+			return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ);
+		}
+
+		return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
+	}
 
-		return `${groupTxt} ${priorityText} ${counter}`;
+	get groupText() {
+		return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TXT);
+	}
+
+	get counterText() {
+		const text = NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT);
+		return this.showCounter ? `${text} ${this.itemsCount}` : "";
 	}
 
 	get ariaLabelledBy() {
 		const id = this._id;
 		const ids = [];
 
-		if (this.hasHeading) {
-			ids.push(`${id}-heading`);
+		if (this.hasTitleText) {
+			ids.push(`${id}-title-text`);
 		}
 
 		ids.push(`${id}-invisibleText`);
@@ -204,6 +241,10 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		return ids.join(" ");
 	}
 
+	get ariaExpanded() {
+		return !this.collapsed;
+	}
+
 	/**
 	 * Event handlers
 	 *