@ui5/webcomponents-fiori 1.0.2 → 1.1.0

package/src/MediaGalleryItem.js

@@ -0,0 +1,334 @@
+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 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 {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
+		 * @public
+		 */
+		 "default": {
+			propertyName: "content",
+			type: HTMLElement,
+		},
+
+		/**
+		 * Defines the content of the thumbnail.
+		 *
+		 * @type {HTMLElement[]}
+		 * @slot
+		 * @public
+		 */
+		 "thumbnail": {
+			propertyName: "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>
+ *
+ * @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._thumbnailDesign = !isPhone();
+		this._interactive = !isPhone();
+		this._square = true;
+		this._monitoredContent = null;
+		this._monitoredThumbnail = null;
+	}
+
+	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/src/ShellBar.hbs

@@ -32,6 +32,7 @@
 				@click="{{_header.press}}"
 				aria-haspopup="{{menuBtnHasPopup}}"
 				aria-expanded="{{menuPopoverExpanded}}"
+				data-ui5-stable="menu"
 			>
 				{{#if hasNonFocusableLogo}}
 					<span
@@ -45,7 +46,7 @@
 
 				{{#if primaryTitle}}
 					<h1 class="ui5-shellbar-menu-button-title">
-						<bdi class="{{classes.title}}">{{primaryTitle}}</bdi>
+						<bdi>{{primaryTitle}}</bdi>
 					</h1>
 				{{/if}}
 
@@ -54,7 +55,7 @@
 		{{/if}}
 
 		{{#if secondaryTitle}}
-			<h2 class="ui5-shellbar-secondary-title">{{secondaryTitle}}</h2>
+			<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">{{secondaryTitle}}</h2>
 		{{/if}}
 	</div>
 
@@ -89,6 +90,7 @@
 						<ui5-button
 							@click={{_handleCancelButtonPress}}
 							class="ui5-shellbar-button"
+							data-ui5-stable="cancel-search"
 						>
 							Cancel
 						</ui5-button>
@@ -107,6 +109,7 @@
 					icon="sap-icon://search"
 					data-ui5-text="Search"
 					data-ui5-notifications-count="{{notificationsCount}}"
+					data-ui5-stable="toggle-search"
 					@click={{_handleSearchIconPress}}
 					title="{{_searchText}}"
 					._buttonAccInfo="{{accInfo.search}}"
@@ -155,20 +158,7 @@
 			></ui5-button>
 
 			{{#if hasProfile}}
-				<ui5-button
-					profile-btn
-					id="{{this._id}}-item-3"
-					@click={{_handleProfilePress}}
-					style="{{styles.items.profile}}"
-					title="{{_profileText}}"
-					._buttonAccInfo="{{accInfo.profile}}"
-					class="ui5-shellbar-button ui5-shellbar-image-button"
-					data-ui5-stable="profile"
-				>
-					<slot
-						name="profile"
-					></slot>
-				</ui5-button>
+				{{> profileButton}}
 			{{/if}}
 
 			{{#if showProductSwitch}}
@@ -188,6 +178,21 @@
 	</div>
 </div>
 
+{{#*inline "profileButton"}}
+	<ui5-button
+		profile-btn
+		id="{{this._id}}-item-3"
+		@click={{_handleProfilePress}}
+		style="{{styles.items.profile}}"
+		title="{{_profileText}}"
+		._buttonAccInfo="{{accInfo.profile}}"
+		class="ui5-shellbar-button ui5-shellbar-image-button"
+		data-ui5-stable="profile"
+	>
+		<slot name="profile"></slot>
+	</ui5-button>
+{{/inline}}
+
 {{#*inline "coPilot"}}
 	<svg @click="{{_coPilotClick}}" focusable="false" width="44" role="presentation" aria-hidden="true" height="44" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ui5-shellbar-coPilot">
 		<defs>

package/src/ShellBar.js

@@ -5,6 +5,7 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
@@ -42,6 +43,7 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
 const metadata = {
 	tag: "ui5-shellbar",
 	languageAware: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
 
 		/**
@@ -111,6 +113,22 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines several additional accessibility texts
+		 * for even further customization.
+		 *
+		 * It supports the following fields:
+		 * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
+		 * - <code>logoTitle</code>: defines the tooltip for the logo
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibilityTexts: {
+			type: Object,
+		},
+
 		/**
 		 * @private
 		 */
@@ -143,10 +161,6 @@ const metadata = {
 			type: Object,
 		},
 
-		_actionList: {
-			type: Object,
-		},
-
 		_header: {
 			type: Object,
 		},
@@ -371,6 +385,14 @@ const metadata = {
  * <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li>
  * </ul>
  *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents-fiori/dist/ShellBar";</code>
  *
@@ -434,16 +456,6 @@ class ShellBar extends UI5Element {
 		// marks if preventDefault() is called in item's press handler
 		this._defaultItemPressPrevented = false;
 
-		this._actionList = {
-			itemPress: event => {
-				if (!this._defaultItemPressPrevented) {
-					this.overflowPopover.close();
-				}
-
-				this._defaultItemPressPrevented = false;
-			},
-		};
-
 		this.menuItemsObserver = new MutationObserver(() => {
 			this._updateClonedMenuItems();
 		});
@@ -479,7 +491,7 @@ class ShellBar extends UI5Element {
 	_menuItemPress(event) {
 		this.menuPopover.close();
 		this.fireEvent("menu-item-click", {
-			item: event.detail.item,
+			item: event.detail.selectedItems[0],
 		}, true);
 	}
 
@@ -721,6 +733,17 @@ class ShellBar extends UI5Element {
 		}, 100);
 	}
 
+	async _handleActionListClick(event) {
+		if (!this._defaultItemPressPrevented) {
+			this.closeOverflow();
+			// wait for DOM to be updated when ui5-popover is closed, otherwise if Enter key is hold
+			// there will be no visual indication that this has happened
+			await renderFinished();
+		}
+
+		this._defaultItemPressPrevented = false;
+	}
+
 	_handleCustomActionPress(event) {
 		const refItemId = event.target.getAttribute("data-ui5-external-action-item-id");
 
@@ -997,7 +1020,6 @@ class ShellBar extends UI5Element {
 				"ui5-shellbar-menu-button--interactive": this.hasMenuItems,
 				"ui5-shellbar-menu-button": true,
 			},
-			title: {},
 			items: {
 				notification: {
 					"ui5-shellbar-hidden-button": this.isIconHidden("bell"),
@@ -1106,7 +1128,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get _logoText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_LOGO);
+		return this.accessibilityTexts.logoTitle || ShellBar.i18nBundle.getText(SHELLBAR_LOGO);
 	}
 
 	get _copilotText() {
@@ -1129,7 +1151,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get _profileText() {
-		return ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
+		return this.accessibilityTexts.profileButtonTitle || ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
 	}
 
 	get _productsText() {

package/src/ShellBarItem.js

@@ -82,7 +82,7 @@ class ShellBarItem extends UI5Element {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

package/src/ShellBarPopover.hbs

@@ -3,7 +3,7 @@
 	@ui5-before-open={{_menuPopoverBeforeOpen}}
 	@ui5-after-close={{_menuPopoverAfterClose}}
 >
-	<ui5-list separators="None" mode="SingleSelect" @ui5-item-press={{_menuItemPress}}>
+	<ui5-list separators="None" mode="SingleSelect" @ui5-selection-change={{_menuItemPress}}>
 		{{#each _menuPopoverItems}}
 			{{ this }}
 		{{/each}}
@@ -17,7 +17,7 @@
 	@ui5-before-open={{_overflowPopoverBeforeOpen}}
 	@ui5-after-close={{_overflowPopoverAfterClose}}
 >
-	<ui5-list separators="None" @ui5-item-press="{{_actionList.itemPress}}">
+	<ui5-list separators="None" @ui5-item-click="{{_handleActionListClick}}">
 		{{#each _hiddenIcons}}
 			<ui5-li
 				data-ui5-external-action-item-id="{{this.refItemid}}"

package/src/SideNavigation.js

@@ -10,6 +10,7 @@ import SideNavigationItemPopoverContentTemplate from "./generated/templates/Side
 
 // Styles
 import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
+import SideNavigationPopoverCss from "./generated/themes/SideNavigationPopover.css.js";
 
 /**
  * @public
@@ -17,6 +18,7 @@ import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
 const metadata = {
 	tag: "ui5-side-navigation",
 	managedSlots: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
 		/**
 		 * Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.
@@ -119,6 +121,14 @@ const metadata = {
  * The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.
  * You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.
  *
+ * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents-fiori/dist/SideNavigation.js";</code>
@@ -142,7 +152,7 @@ class SideNavigation extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [SideNavigationCss];
+		return [SideNavigationPopoverCss];
 	}
 
 	static get render() {

package/src/UploadCollectionItem.js

@@ -280,6 +280,11 @@ class UploadCollectionItem extends ListItem {
 		]);
 	}
 
+	onBeforeRendering() {
+		// In the base class the item can become "actionable",
+		// that's why we are overriding this method.
+	}
+
 	async _initInputField() {
 		await renderFinished();