@ui5/webcomponents-fiori 1.4.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "1.4.0",
+  "version": "1.7.0",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -28,7 +28,6 @@
     "lint": "wc-dev lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "serve": "wc-dev serve",
     "build": "wc-dev build",
     "test": "wc-dev test",
     "create-ui5-element": "wc-create-ui5-element",
@@ -40,14 +39,14 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "1.4.0",
-    "@ui5/webcomponents-base": "1.4.0",
-    "@ui5/webcomponents-icons": "1.4.0",
-    "@ui5/webcomponents-theming": "1.4.0",
+    "@ui5/webcomponents": "1.7.0",
+    "@ui5/webcomponents-base": "1.7.0",
+    "@ui5/webcomponents-icons": "1.7.0",
+    "@ui5/webcomponents-theming": "1.7.0",
     "@zxing/library": "^0.18.3"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.4.0",
-    "chromedriver": "101.0.0"
+    "@ui5/webcomponents-tools": "1.7.0",
+    "chromedriver": "104.0.0"
   }
 }

package/src/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>
@@ -36,15 +36,6 @@ const metadata = {
 			type: BarDesign,
 			defaultValue: BarDesign.Header,
 		},
-
-		/**
-		 * Defines if the component middle area needs to be centered between start and end area
-		 * @type {boolean}
-		 * @private
-		 */
-		_shrinked: {
-			type: Boolean,
-		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.Bar.prototype */ {
 		/**
@@ -163,17 +154,17 @@ class Bar extends UI5Element {
 	handleResize() {
 		const bar = this.getDomRef();
 		const barWidth = bar.offsetWidth;
-
-		this._shrinked = Array.from(bar.children).some(element => {
-			return barWidth / 3 < element.offsetWidth;
+		const needShrinked = Array.from(bar.children).some(slot => {
+			return slot.offsetWidth > barWidth / 3;
 		});
+
+		bar.classList.toggle("ui5-bar-root-shrinked", needShrinked);
 	}
 
 	get classes() {
 		return {
 			root: {
 				"ui5-bar-root": true,
-				"ui5-bar-root-shrinked": this._shrinked,
 			},
 		};
 	}
@@ -185,11 +176,19 @@ class Bar extends UI5Element {
 
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResizeBound);
+
+		this.getDomRef().querySelectorAll(".ui5-bar-content-container").forEach(slot => {
+			ResizeHandler.register(slot, this._handleResizeBound);
+		}, this);
 	}
 
 	onExitDOM() {
 		ResizeHandler.deregister(this, this._handleResizeBound);
-	}
+
+		this.getDomRef().querySelectorAll(".ui5-bar-content-container").forEach(slot => {
+			ResizeHandler.deregister(slot, this._handleResizeBound);
+		}, this);
+	 }
 }
 
 Bar.define();

package/src/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/src/DynamicSideContent.js

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

package/src/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/src/IllustratedMessage.hbs

@@ -3,7 +3,11 @@
 		{{{effectiveIllustration}}}
 	</div>
 	{{#if hasTitle}}
-	<ui5-title level="H2" class="ui5-illustrated-message-title" wrapping-type="Normal">{{effectiveTitleText}}</ui5-title>
+			{{#if hasFormattedTitle}}
+				<slot name="title"></slot>
+			{{else}}
+				<ui5-title level="H2" class="ui5-illustrated-message-title" wrapping-type="Normal">{{effectiveTitleText}}</ui5-title>
+			{{/if}}
 	{{/if}}
 
 	{{#if hasSubtitle}}

package/src/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 */ {
 		/**
@@ -197,6 +222,18 @@ const metadata = {
 		subtitle: {
 			type: HTMLElement,
 		},
+		/**
+		 * Defines the title of the component.
+		 * <br><br>
+		 * <b>Note:</b> Using this slot, the default title text of illustration and the value of <code>title</code> property will be overwritten.
+		 * @type {HTMLElement}
+		 * @slot title
+		 * @public
+		 * @since 1.7.0
+		 */
+		title: {
+			type: HTMLElement,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.fiori.IllustratedMessage.prototype */ {
 		//
@@ -316,6 +353,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 +368,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 +383,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:
@@ -355,6 +422,10 @@ class IllustratedMessage extends UI5Element {
 		return !!this.subtitle.length;
 	}
 
+	get hasFormattedTitle() {
+		return !!this.title.length;
+	}
+
 	get effectiveTitleText() {
 		return this.titleText ? this.titleText : this.illustrationTitle;
 	}
@@ -364,11 +435,11 @@ class IllustratedMessage extends UI5Element {
 	}
 
 	get hasTitle() {
-		return this.titleText || this.illustrationTitle;
+		return this.hasFormattedTitle || this.titleText || this.illustrationTitle;
 	}
 
 	get hasSubtitle() {
-		return this.subtitleText || this.illustrationSubtitle;
+		return this.hasFormattedSubtitle || this.subtitleText || this.illustrationSubtitle;
 	}
 
 	get hasActions() {

package/src/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/src/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/src/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>.
 		 *
@@ -58,7 +58,7 @@ const metadata = {
 		 * <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://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * <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 ""
@@ -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/src/NotificationListItem.hbs

@@ -46,7 +46,7 @@
 		{{/if}}
 	</div>
 
-	<div class="ui5-nli-content {{classes.content}}">
+	<div class="ui5-nli-content">
 		<div class="ui5-nli-title-text-wrapper">
 			{{#if hasPriority}}
 				<ui5-icon
@@ -77,7 +77,7 @@
 			<ui5-link
 				class="ui5-nli-footer-showMore"
 				?hidden="{{hideShowMore}}"
-				@click="{{_onShowMoreClick}}"
+				@ui5-click="{{_onShowMoreClick}}"
 				aria-hidden="true"
 				href="#" {{!--without href ENTER does not trigger click --}}
 				showMore-btn

package/src/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/src/NotificationOverflowActionsPopover.hbs

@@ -13,6 +13,7 @@
 				?disabled="{{this.disabled}}"
 				design="{{this.design}}"
 				data-ui5-external-action-item-id="{{this.refItemid}}"
+				class="ui5-notification-overflow-list-btn"
 				>{{this.text}}
 			</ui5-button>
 		{{/each}}

package/src/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/src/ProductSwitchItem.js

@@ -42,7 +42,7 @@ const metadata = {
 		 * <br>
 		 * <pre>ui5-product-switch-item icon="palette"</pre>
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in 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 ""
@@ -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/src/ShellBar.hbs

@@ -10,49 +10,79 @@
 				<slot name="startButton"></slot>
 		{{/if}}
 
-		{{#if hasFocusableLogo}}
-			<span class="ui5-shellbar-logo"
-				role="button"
-				aria-label="{{_logoText}}"
-				title="{{_logoText}}"
-				@click="{{_logoPress}}"
-				@keydown="{{_logoKeydown}}"
-				@keyup="{{_logoKeyup}}"
-				tabindex="0"
-				data-ui5-stable="logo"
-			>
-				<slot name="logo"></slot>
-			</span>
-		{{/if}}
-
-		{{#if showArrowDown}}
-			<button tabindex="{{menuBtnTabindex}}"
-				class="{{classes.button}}"
-				@click="{{_header.press}}"
-				aria-haspopup="{{menuBtnHasPopup}}"
-				aria-expanded="{{menuPopoverExpanded}}"
-				data-ui5-stable="menu"
-			>
-				{{#if hasNonFocusableLogo}}
-					<span
-						class="ui5-shellbar-logo"
+		{{#if hasMenuItems}}
+				{{#unless showLogoInMenuButton}}
+					<span class="ui5-shellbar-logo"
+						role="{{accLogoRole}}"
 						aria-label="{{_logoText}}"
 						title="{{_logoText}}"
+						@click="{{_logoPress}}"
+						@keydown="{{_logoKeydown}}"
+						@keyup="{{_logoKeyup}}"
+						tabindex="0"
+						data-ui5-stable="logo"
 					>
 						<slot name="logo"></slot>
 					</span>
-				{{/if}}
+				{{/unless}}
 
-				{{#if primaryTitle}}
-					<h1 class="ui5-shellbar-menu-button-title">
-						<bdi>{{primaryTitle}}</bdi>
+				{{#if showTitleInMenuButton}}
+					<h1 class="ui5-hidden-text">
+						{{primaryTitle}}
 					</h1>
 				{{/if}}
 
-				<span class="ui5-shellbar-menu-button-arrow"></span>
-			</button>
+				{{#if showMenuButton}}
+					<button class="{{classes.button}}"
+						@click="{{_header.press}}"
+						aria-haspopup="menu"
+						aria-expanded="{{_menuPopoverExpanded}}"
+						data-ui5-stable="menu"
+					>
+						{{#if showLogoInMenuButton}}
+							<span
+								class="ui5-shellbar-logo"
+								role="{{accLogoRole}}"
+								aria-label="{{_logoText}}"
+								title="{{_logoText}}">
+								<slot name="logo"></slot>
+							</span>
+						{{/if}}
+
+
+						{{#if showTitleInMenuButton}}
+							<div class="ui5-shellbar-menu-button-title">
+								{{primaryTitle}}
+							</div>
+						{{/if}}
+
+						<span class="ui5-shellbar-menu-button-arrow"></span>
+					</button>
+				{{/if}}
 		{{/if}}
 
+		{{#unless hasMenuItems}}
+			{{#if hasLogo}}
+				<span class="ui5-shellbar-logo"
+					role="{{accLogoRole}}"
+					aria-label="{{_logoText}}"
+					title="{{_logoText}}"
+					@click="{{_logoPress}}"
+					@keydown="{{_logoKeydown}}"
+					@keyup="{{_logoKeyup}}"
+					tabindex="0"
+					data-ui5-stable="logo"
+				>
+					<slot name="logo"></slot>
+				</span>
+			{{/if}}
+			{{#if primaryTitle}}
+				<h1 class="ui5-shellbar-title">
+					<bdi>{{primaryTitle}}</bdi>
+				</h1>
+			{{/if}}
+		{{/unless}}
+
 		{{#if secondaryTitle}}
 			<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">{{secondaryTitle}}</h2>
 		{{/if}}