@ui5/webcomponents-fiori 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://github.com/SAP/ui5-webcomponents/compare/v1.4.0...v1.5.0) (2022-07-03)
+
+
+### Bug Fixes
+
+* **f6navigation:** prevent default behavior on windows OS ([#5424](https://github.com/SAP/ui5-webcomponents/issues/5424)) ([a494f85](https://github.com/SAP/ui5-webcomponents/commit/a494f85))
+* **ui5-shellbar:** correct accessibility DOM ([#5395](https://github.com/SAP/ui5-webcomponents/issues/5395)) ([aba5fb5](https://github.com/SAP/ui5-webcomponents/commit/aba5fb5))
+* **ui5-timeline-item:** align text in title link ([51954b7](https://github.com/SAP/ui5-webcomponents/commit/51954b7)), closes [#5163](https://github.com/SAP/ui5-webcomponents/issues/5163)
+
+
+### Features
+
+* **ui5-illustrated-message:** implement size property ([#5405](https://github.com/SAP/ui5-webcomponents/issues/5405)) ([c58690d](https://github.com/SAP/ui5-webcomponents/commit/c58690d))
+* **ui5-view-settings-dialog:** Implement behaviour for external setting of confirmed settings ([#5222](https://github.com/SAP/ui5-webcomponents/issues/5222)) ([7fbb235](https://github.com/SAP/ui5-webcomponents/commit/7fbb235))
+
+
+
+
+
 # [1.4.0](https://github.com/SAP/ui5-webcomponents/compare/v1.3.1...v1.4.0) (2022-05-25)
 
 

package/README.md

@@ -1,8 +1,7 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/docs/images/UI5_logo_wide.png)
+![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png)
 
 # UI5 Web Components - Fiori
 
-[![Travis CI Build Status](https://travis-ci.org/SAP/ui5-webcomponents.svg?branch=master)](https://travis-ci.org/SAP/ui5-webcomponents)
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
 Provides essential building blocks, necessary to implement the Fiori UX concept, 
@@ -69,16 +68,16 @@ Importing the module above enables the detailed but more resource-intensive anim
 
 
 ## Resources
-- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/README.md)
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
 - [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/docs/6-contributing/02-conventions-and-guidelines.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
-This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/master/LICENSE.txt) file.
+This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/main/LICENSE.txt) file.

package/dist/Bar.js

@@ -16,7 +16,7 @@ const metadata = {
 	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
 		/**
-		 * Defines the <code>ui5-bar</code> design.
+		 * Defines the component's design.
 		 *
 		 * <br><br>
 		 * <b>Note:</b>

package/dist/BarcodeScannerDialog.js

@@ -37,9 +37,9 @@ const defaultMediaConstraints = {
 const metadata = {
 	tag: "ui5-barcode-scanner-dialog",
 	languageAware: true,
-	slots: /** @lends  sap.ui.webcomponents.fiori.BarcodeScannerDialog.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.BarcodeScannerDialog.prototype */ {
 	},
-	properties: /** @lends  sap.ui.webcomponents.fiori.BarcodeScannerDialog.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.fiori.BarcodeScannerDialog.prototype */ {
 		/**
 		 * Indicates whether a loading indicator should be displayed in the dialog.
 		 *
@@ -51,7 +51,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.fiori.BarcodeScannerDialog.prototype */ {
+	events: /** @lends sap.ui.webcomponents.fiori.BarcodeScannerDialog.prototype */ {
 		/**
 		 * Fires when the scan is completed successfuuly.
 		 *

package/dist/DynamicSideContent.js

@@ -209,7 +209,7 @@ const metadata = {
 		 * @public
 		 */
 		"layout-change": {
-			details: {
+			detail: {
 				currentBreakpoint: {
 					type: String,
 				},

package/dist/FlexibleColumnLayout.js

@@ -6,7 +6,6 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
@@ -239,7 +238,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>FlexibleColumnLayout</code> implements the master-detail-detail paradigm by displaying up to three pages in separate columns.
+ * The <code>FlexibleColumnLayout</code> implements the list-detail-detail paradigm by displaying up to three pages in separate columns.
  * There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.
  *
  * <h3>Usage</h3>
@@ -564,7 +563,6 @@ class FlexibleColumnLayout extends UI5Element {
 		return {
 			root: {
 				"ui5-fcl-root": true,
-				"ui5-fcl--ie": isIE(),
 			},
 			columns: {
 				start: {

package/dist/IllustratedMessage.js

@@ -6,6 +6,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import IllustratedMessageTemplate from "./generated/templates/IllustratedMessageTemplate.lit.js";
+import IllustrationMessageSize from "./types/IllustrationMessageSize.js";
 import IllustrationMessageType from "./types/IllustrationMessageType.js";
 import "./illustrations/BeforeSearch.js";
 
@@ -173,6 +174,30 @@ const metadata = {
 			type: IllustrationMessageType,
 			defaultValue: IllustrationMessageType.BeforeSearch,
 		},
+		/**
+		 * Determines which illustration breakpoint variant is used.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Auto</code></li>
+		 * <li><code>Base</code></li>
+		 * <li><code>Spot</code></li>
+		 * <li><code>Dialog</code></li>
+		 * <li><code>Scene</code></li>
+		 * </ul>
+		 *
+		 * As <code>IllustratedMessage</code> adapts itself around the <code>Illustration</code>, the other
+		 * elements of the component are displayed differently on the different breakpoints/illustration sizes.
+		 *
+		 * @type {IllustrationMessageSize}
+		 * @defaultvalue "Auto"
+		 * @public
+		 * @since 1.5.0
+		 */
+		size: {
+			type: IllustrationMessageSize,
+			defaultValue: IllustrationMessageSize.Auto,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.IllustratedMessage.prototype */ {
 		/**
@@ -316,6 +341,10 @@ class IllustratedMessage extends UI5Element {
 
 		this.illustrationTitle = IllustratedMessage.i18nBundle.getText(illustrationData.title);
 		this.illustrationSubtitle = IllustratedMessage.i18nBundle.getText(illustrationData.subtitle);
+
+		if (this.size !== IllustrationMessageSize.Auto) {
+			this._handleCustomSize();
+		}
 	}
 
 	onEnterDOM() {
@@ -327,6 +356,10 @@ class IllustratedMessage extends UI5Element {
 	}
 
 	handleResize() {
+		if (this.size !== IllustrationMessageSize.Auto) {
+			return;
+		}
+
 		if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.BASE) {
 			this.media = IllustratedMessage.MEDIA.BASE;
 		} else if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.SPOT) {
@@ -338,6 +371,28 @@ class IllustratedMessage extends UI5Element {
 		}
 	}
 
+	/**
+	 * Modifies the IM styles in accordance to the `size` property's value.
+	 * Note: The resize handler has no effect when size is different than "Auto".
+	 * @private
+	 * @since 1.5.0
+	 */
+	_handleCustomSize() {
+		switch (this.size) {
+		case IllustrationMessageSize.Base:
+			this.media = IllustratedMessage.MEDIA.BASE;
+			return;
+		case IllustrationMessageSize.Spot:
+			this.media = IllustratedMessage.MEDIA.SPOT;
+			return;
+		case IllustrationMessageSize.Dialog:
+			this.media = IllustratedMessage.MEDIA.DIALOG;
+			return;
+		default:
+			this.media = IllustratedMessage.MEDIA.SCENE;
+		}
+	}
+
 	get effectiveIllustration() {
 		switch (this.media) {
 		case IllustratedMessage.MEDIA.SPOT:

package/dist/MediaGallery.js

@@ -35,7 +35,7 @@ const COLUMNS_COUNT = {
 const metadata = {
 	tag: "ui5-media-gallery",
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
 		/**
 		 * Defines the component items.
 		 *
@@ -56,7 +56,7 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
 		/**
 		 * If set to <code>true</code>, all thumbnails are rendered in a scrollable container.
 		 * If <code>false</code>, only up to five thumbnails are rendered, followed by
@@ -182,7 +182,7 @@ const metadata = {
 			defaultValue: 0,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
+	events: /** @lends sap.ui.webcomponents.fiori.MediaGallery.prototype */ {
 		/**
 		 * Fired when selection is changed by user interaction.
 		 *
@@ -221,7 +221,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui-media-gallery</code> component allows the user to browse through multimedia items. Currently,
+ * The <code>ui5-media-gallery</code> component allows the user to browse through multimedia items. Currently,
  * the supported items are images and videos. The items should be defined using the <code>ui5-media-gallery-item</code>
  * component.
  *

package/dist/MediaGalleryItem.js

@@ -119,7 +119,7 @@ const metadata = {
 			defaultValue: "",
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.MediaGalleryItem.prototype */ {
 		/**
 		 * Defines the content of the component.
 		 *

package/dist/NotificationAction.js

@@ -6,7 +6,7 @@ import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
  */
 const metadata = {
 	tag: "ui5-notification-action",
-	properties: /** @lends  sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
 		/**
 		 * Defines the text of the <code>ui5-notification-action</code>.
 		 *
@@ -68,9 +68,9 @@ const metadata = {
 			type: String,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
+	events: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
 		click: {},
 	},
 };

package/dist/NotificationListItem.js

@@ -1,6 +1,5 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.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";
@@ -31,8 +30,6 @@ import NotificationListItemTemplate from "./generated/templates/NotificationList
 // Styles
 import NotificationListItemCss from "./generated/themes/NotificationListItem.css.js";
 
-const MAX_WRAP_HEIGHT = 32; // px.
-
 /**
  * @public
  */
@@ -273,10 +270,6 @@ class NotificationListItem extends NotificationListItemBase {
 			return false;
 		}
 
-		if (isIE()) {
-			return titleText.scrollHeight > MAX_WRAP_HEIGHT;
-		}
-
 		return titleText.offsetHeight < titleText.scrollHeight;
 	}
 
@@ -287,10 +280,6 @@ class NotificationListItem extends NotificationListItemBase {
 			return false;
 		}
 
-		if (isIE()) {
-			return description.scrollHeight > MAX_WRAP_HEIGHT;
-		}
-
 		return description.offsetHeight < description.scrollHeight;
 	}
 
@@ -347,14 +336,6 @@ class NotificationListItem extends NotificationListItemBase {
 		return `${notificationText} ${readText} ${priorityText}`;
 	}
 
-	get classes() {
-		return {
-			content: {
-				"ui5-nli-content--ie": isIE(),
-			},
-		};
-	}
-
 	/**
 	 * Event handlers
 	 */

package/dist/Page.js

@@ -131,7 +131,7 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-page</code> is a container control that holds one whole screen of an application.
+ * The <code>ui5-page</code> is a container component that holds one whole screen of an application.
  * The page has three distinct areas that can hold content - a header, content area and a footer.
  * <h3>Structure</h3>
  * <h4>Header</h4>

package/dist/ProductSwitchItem.js

@@ -113,7 +113,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.ProductSwitchItem.prototype */ {
 		/**

package/dist/ShellBar.js

@@ -1079,24 +1079,20 @@ class ShellBar extends UI5Element {
 		return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
 	}
 
-	get nonFocusableLogo() {
-		return this.breakpointSize === "S" && this.hasMenuItems;
-	}
-
-	get hasFocusableLogo() {
-		return this.hasLogo && !this.nonFocusableLogo;
+	get hasLogo() {
+		return !!this.logo.length;
 	}
 
-	get hasNonFocusableLogo() {
-		return this.hasLogo && this.nonFocusableLogo;
+	get showLogoInMenuButton() {
+		return this.hasLogo && this.breakpointSize === "S";
 	}
 
-	get hasLogo() {
-		return !!this.logo.length;
+	get showTitleInMenuButton() {
+		return this.primaryTitle && !(this.showLogoInMenuButton);
 	}
 
-	get showArrowDown() {
-		return this.primaryTitle || this.hasInteractvieLogo;
+	get showMenuButton() {
+		return this.primaryTitle || this.showLogoInMenuButton;
 	}
 
 	get popoverHorizontalAlign() {
@@ -1115,18 +1111,6 @@ class ShellBar extends UI5Element {
 		return this.menuItems.length > 0;
 	}
 
-	get menuBtnHasPopup() {
-		return this.hasMenuItems ? HasPopup.Menu : undefined;
-	}
-
-	get menuBtnTabindex() {
-		return this.hasMenuItems ? "0" : "-1";
-	}
-
-	get menuPopoverExpanded() {
-		return this.hasMenuItems ? this._menuPopoverExpanded : undefined;
-	}
-
 	get _shellbarText() {
 		return ShellBar.i18nBundle.getText(SHELLBAR_LABEL);
 	}

package/dist/Timeline.js

@@ -22,7 +22,7 @@ const metadata = {
 	tag: "ui5-timeline",
 	languageAware: true,
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.fiori.Timeline.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.fiori.Timeline.prototype */ {
 		/**
 		 * Defines the items orientation.
 		 *

package/dist/ViewSettingsDialog.js

@@ -41,7 +41,7 @@ import viewSettingsDialogCSS from "./generated/themes/ViewSettingsDialog.css.js"
 const metadata = {
 	tag: "ui5-view-settings-dialog",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.fiori.ViewSettingsDialog.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.fiori.ViewSettingsDialog.prototype */ {
 		/**
 		 * Defines the initial sort order.
 		 *
@@ -115,7 +115,7 @@ const metadata = {
 			noAttribute: true,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.fiori.ViewSettingsDialog.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.fiori.ViewSettingsDialog.prototype */ {
 		/**
 		 * Defines the list of items against which the user could sort data.
 		 * <b>Note:</b> If you want to use this slot, you need to import used item: <code>import "@ui5/webcomponents-fiori/dist/SortItem";</code>
@@ -140,7 +140,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.fiori.ViewSettingsDialog.prototype */ {
+	events: /** @lends sap.ui.webcomponents.fiori.ViewSettingsDialog.prototype */ {
 
 		/**
 		 * Fired when confirmation button is activated.
@@ -183,6 +183,14 @@ const metadata = {
 				filters: { type: Array },
 			},
 		},
+
+		/**
+		 * Fired before the component is opened. <b>This event does not bubble.</b>
+		 *
+		 * @public
+		 * @event sap.ui.webcomponents.fiori.ViewSettingsDialog#before-open
+		 */
+		"before-open": {},
 	},
 };
 
@@ -488,6 +496,7 @@ class ViewSettingsDialog extends UI5Element {
 			this._restoreSettings(this._confirmedSettings);
 		}
 
+		this.fireEvent("before-open", {}, true, false);
 		this._dialog.show(true);
 
 		this._dialog.querySelector("[ui5-list]").focusFirstItem();
@@ -667,6 +676,61 @@ class ViewSettingsDialog extends UI5Element {
 		// Invalidate
 		this._currentSettings = JSON.parse(JSON.stringify(this._currentSettings));
 	}
+
+	/**
+	 * Sets a JavaScript object, as settings to the <code>ui5-view-settings-dialog</code>.
+	 * This method can be used after the dialog is initially open, as the dialog need to set its initial settings.
+	 * The <code>ui5-view-settings-dialog</code> throws an event called "before-open", this can be used as trigger point.
+	 * The object should have the following format:
+	 * <code>{
+	 *	{ "sortOrder" : "Ascending", "sortBy" : "Name", "filters" : [{"Filter 1": ["Some filter 1", "Some filter 2"]}, {"Filter 2": ["Some filter 4"]}]}
+	 * }</code>
+	 * @param {string} settings A value to be set as predefined settings.
+	 * @public
+	 */
+	setConfirmedSettings(settings) {
+		if (settings && this._dialog && !this._dialog.isOpen()) {
+			const tempSettings = JSON.parse(JSON.stringify(this._confirmedSettings));
+			if (settings.sortOrder) {
+				for (let i = 0; i < tempSettings.sortOrder.length; i++) {
+					if (tempSettings.sortOrder[i].text === settings.sortOrder) {
+						tempSettings.sortOrder[i].selected = true;
+					} else {
+						tempSettings.sortOrder[i].selected = false;
+					}
+				}
+			}
+
+			if (settings.sortBy) {
+				for (let i = 0; i < tempSettings.sortBy.length; i++) {
+					if (tempSettings.sortBy[i].text === settings.sortBy) {
+						tempSettings.sortBy[i].selected = true;
+					} else {
+						tempSettings.sortBy[i].selected = false;
+					}
+				}
+			}
+
+			if (settings.filters) {
+				const inputFilters = {};
+				for (let i = 0; i < settings.filters.length; i++) {
+					inputFilters[Object.keys(settings.filters[i])[0]] = settings.filters[i][Object.keys(settings.filters[i])[0]];
+				}
+
+				for (let i = 0; i < tempSettings.filters.length; i++) {
+					for (let j = 0; j < tempSettings.filters[i].filterOptions.length; j++) {
+						if (inputFilters[tempSettings.filters[i].text] && inputFilters[tempSettings.filters[i].text].indexOf(tempSettings.filters[i].filterOptions[j].text) > -1) {
+							tempSettings.filters[i].filterOptions[j].selected = true;
+						} else {
+							tempSettings.filters[i].filterOptions[j].selected = false;
+						}
+					}
+				}
+			}
+
+			this._confirmedSettings = JSON.parse(JSON.stringify(tempSettings));
+		}
+	}
 }
 
 ViewSettingsDialog.define();