@ui5/webcomponents-fiori 1.0.1 → 1.1.2

package/dist/MediaGalleryItem.js

@@ -0,0 +1,337 @@
+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 {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._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/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/dist/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/dist/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/dist/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();
 

package/dist/ViewSettingsDialog.js

@@ -195,7 +195,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@ui5/webcomponents/dist/ViewSettingsDialog";</code>
+ * <code>import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog";</code>
  *
  * @constructor
  * @author SAP SE
@@ -219,6 +219,10 @@ class ViewSettingsDialog extends UI5Element {
 		if (this._currentSettings.filters && this._currentSettings.filters.length) {
 			this._setAdditionalTexts();
 		}
+
+		if (!this.shouldBuildSort && this.shouldBuildFilter) {
+			this._currentMode = ViewSettingsDialogMode.Filter;
+		}
 	}
 
 	_setAdditionalTexts() {
@@ -279,6 +283,18 @@ class ViewSettingsDialog extends UI5Element {
 		return "";
 	}
 
+	get shouldBuildSort() {
+		return !!this.sortItems.length;
+	}
+
+	get shouldBuildFilter() {
+		return !!this.filterItems.length;
+	}
+
+	get hasPagination() {
+		return this.shouldBuildSort && this.shouldBuildFilter;
+	}
+
 	get _filterByTitle() {
 		return `${ViewSettingsDialog.i18nBundle.getText(VSD_FILTER_BY)}: ${this._selectedFilter.text}`;
 	}
@@ -494,7 +510,7 @@ class ViewSettingsDialog extends UI5Element {
 	 * Sets focus on recently used control within the dialog.
 	 */
 	_focusRecentlyUsedControl() {
-		if (!Object.keys(this._recentlyFocused).length) {
+		if (!this._recentlyFocused || !Object.keys(this._recentlyFocused).length) {
 			return;
 		}
 		const recentlyFocusedSelectedItems = this._recentlyFocused.getSelectedItems(),

package/dist/Wizard.js

@@ -56,6 +56,7 @@ const STEP_SWITCH_THRESHOLDS = {
 const metadata = {
 	tag: "ui5-wizard",
 	managedSlots: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
 		/**
 		 * Defines the width of the <code>ui5-wizard</code>.
@@ -160,6 +161,24 @@ const metadata = {
  * <br>
  * <b>Note:</b> If multiple selected steps are defined, the last step will be selected.
  *
+ * <h3>Keyboard Handling</h3>
+ * The user can navigate using the following keyboard shortcuts:
+ * <br>
+ *
+ * <h4>Wizard Progress Navigation</h4>
+ * <ul>
+ * 	<li>[LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.</li>
+ * 	<li>[UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.</li>
+ * 	<li>[SPACE] or [ENTER], [RETURN] - Selects an active step</li>
+ * 	<li>[HOME] or [PAGE UP] - Focus goes to the first step</li>
+ * 	<li>[END] or [PAGE DOWN] - Focus goes to the last step</li>
+ * </ul>
+ *
+ * <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>
+ *
  * <h4>Content</h4>
  * The content occupies the main part of the page. It can hold any type of HTML elements.
  * It's defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.
@@ -243,7 +262,7 @@ class Wizard extends UI5Element {
 		this.selectionRequestedByScroll = false;
 
 		this._itemNavigation = new ItemNavigation(this, {
-			navigationMode: NavigationMode.Horizontal,
+			navigationMode: NavigationMode.Auto,
 			getItemsCallback: () => this.enabledStepsInHeaderDOM,
 		});
 
@@ -301,10 +320,6 @@ class Wizard extends UI5Element {
 		return 25;
 	}
 
-	static get CONTENT_TOP_OFFSET() {
-		return 32;
-	}
-
 	static get staticAreaTemplate() {
 		return WizardPopoverTemplate;
 	}
@@ -405,7 +420,7 @@ class Wizard extends UI5Element {
 	storeStepScrollOffsets() {
 		this.stepScrollOffsets = this.slottedSteps.map(step => {
 			const contentItem = this.getStepWrapperByRefId(step._id);
-			return contentItem.offsetTop + contentItem.offsetHeight - Wizard.CONTENT_TOP_OFFSET;
+			return contentItem.offsetTop + contentItem.offsetHeight;
 		});
 	}
 
@@ -693,9 +708,11 @@ class Wizard extends UI5Element {
 
 	get _steps() {
 		const lastEnabledStepIndex = this.getLastEnabledStepIndex();
+		const stepsInfo = this.getStepsInfo();
 
 		return this.steps.map((step, idx) => {
 			step.stretch = idx === lastEnabledStepIndex;
+			step.stepContentAriaLabel = `${this.navStepDefaultHeading} ${stepsInfo[idx].number} ${stepsInfo[idx].titleText}`;
 			return step;
 		});
 	}
@@ -745,7 +762,7 @@ class Wizard extends UI5Element {
 	}
 
 	get enabledStepsInHeaderDOM() {
-		return this.stepsInHeaderDOM.filter(step => !step.disabled);
+		return this.stepsInHeaderDOM;
 	}
 
 	get phoneMode() {
@@ -973,8 +990,11 @@ class Wizard extends UI5Element {
 	 */
 	switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex, changeWithClick) {
 		if (selectedStep && stepToSelect) {
-			selectedStep.selected = false;
-			stepToSelect.selected = true;
+			// keep the selection if next step is disabled
+			if (!stepToSelect.disabled) {
+				selectedStep.selected = false;
+				stepToSelect.selected = true;
+			}
 
 			this.fireEvent("step-change", {
 				step: stepToSelect,