@ui5/webcomponents-fiori 1.3.1 → 1.6.0

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/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

@@ -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

@@ -1,6 +1,5 @@
 <div
 	class="{{classes.wrapper}}"
-	dir="{{effectiveDir}}"
 	role="banner"
 	aria-label="{{_shellbarText}}"
 	part="root"
@@ -11,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}}
@@ -191,7 +220,7 @@
 {{/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">
+	<svg @click="{{_coPilotClick}}" focusable="false" width="48" role="presentation" aria-hidden="true" height="48" 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>
 			<linearGradient id="f" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" class="ui5-shellbar-co-pilot-color1 ui5-shellbar-co-pilot-opaicty7"/><stop offset="80%" class="ui5-shellbar-co-pilot-color2 ui5-shellbar-co-pilot-opaicty7"/></linearGradient>
 			<linearGradient id="e" x1="0%" x2="100%" y1="100%" y2="0%"><stop offset="0%" class="ui5-shellbar-co-pilot-color1 ui5-shellbar-co-pilot-opaicty36"/><stop offset="80%" class="ui5-shellbar-co-pilot-color2 ui5-shellbar-co-pilot-opaicty36"/></linearGradient>

package/src/ShellBar.js

@@ -115,6 +115,20 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines additional accessibility roles for further customization.
+		 *
+		 * It supports the following fields:
+		 *  - <code>logoRole</code>: the accessibility role for the <code>logo</code>
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.6.0
+		 */
+		accessibilityRoles: {
+			type: Object,
+		},
+
 		/**
 		 * An object of strings that defines several additional accessibility texts
 		 * for even further customization.
@@ -1069,11 +1083,7 @@ class ShellBar extends UI5Element {
 
 	get correctSearchFieldStyles() {
 		if (this.showSearchField) {
-			if (this._fullWidthSearch) {
-				return "flex";
-			}
-
-			return "block";
+			return "flex";
 		}
 
 		return "none";
@@ -1083,24 +1093,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() {
@@ -1119,18 +1125,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);
 	}
@@ -1201,6 +1195,10 @@ class ShellBar extends UI5Element {
 		};
 	}
 
+	get accLogoRole() {
+		return this.accessibilityRoles.logoRole || "button";
+	}
+
 	static get dependencies() {
 		return [
 			Button,

package/src/SideNavigation.hbs

@@ -4,6 +4,7 @@
 	{{#if items.length}}
 		<ui5-tree
 			id="ui5-sn-items-tree"
+			class="ui5-sn-items-tree"
 			mode="None"
 			?_minimal="{{collapsed}}"
 			_toggle-button-end

package/src/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.
 		 *
@@ -45,7 +45,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""

package/src/UploadCollection.js

@@ -106,7 +106,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""

package/src/UploadCollectionItem.hbs

@@ -1,5 +1,7 @@
 {{>include "../../main/src/ListItem.hbs"}}
 
+{{#*inline "selectionElement"}}{{/inline}}
+
 {{#*inline "listItemContent"}}
 	<div class="ui5-uci-thumbnail">
 		<slot name="thumbnail"></slot>
@@ -22,7 +24,7 @@
 					{{#if fileNameClickable}}
 						<ui5-link class="ui5-uci-file-name" @click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
 					{{else}}
-						<span class="ui5-uci-file-name">{{fileName}}</span>
+						<span class="ui5-uci-file-name ui5-uci-file-name-text">{{fileName}}</span>
 					{{/if}}
 				{{/if}}
 				<div class="ui5-uci-description">
@@ -90,6 +92,20 @@
 					>
 					</ui5-button>
 				{{/if}}
+
+				{{#if renderDeleteButton}}
+					<ui5-button
+							class="ui5-li-deletebtn"
+							tabindex="-1"
+							data-sap-no-tab-ref
+							id="{{_id}}-deleteSelectionElement"
+							design="Transparent"
+							icon="decline"
+							?disabled="{{disableDeleteButton}}"
+							@click="{{onDelete}}"
+							tooltip="{{deleteText}}"
+					></ui5-button>
+				{{/if}}
 			{{/if}}
 		</div>
 	</div>

package/src/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();

package/src/themes/Bar.css

@@ -66,13 +66,7 @@
 	box-shadow: var(--sapContent_Shadow1);
 	border: none;
 }
-  /* This selector works well for all browsers except IE11.
-  After support for IE11 is stopped, the specific selectors added for it can be removed and this selector can be uncommented*/
-/* ::slotted(*) {
-	margin: 0 0.25rem;
-} */
 
-/*Specific selector added for support in IE11*/
-::slotted(.ui5-bar-content) {
+::slotted(*) {
 	margin: 0 0.25rem;
-}
+}

package/src/themes/FlexibleColumnLayout.css

@@ -47,30 +47,6 @@
 	border-inline-start: var(--_ui5_fcl_column_border);
 }
 
-:host([_visible-columns="2"]) [dir="rtl"] .ui5-fcl-column--start {
-	border-left: var(--_ui5_fcl_column_border);
-}
-
-:host([_visible-columns="3"]) [dir="rtl"] .ui5-fcl-column--start {
-	border-left: var(--_ui5_fcl_column_border);
-}
-
-:host([_visible-columns="2"]) [dir="rtl"] .ui5-fcl-column--middle {
-	border-right: var(--_ui5_fcl_column_border)
-}
-
-:host([_visible-columns="3"]) [dir="rtl"] .ui5-fcl-column--middle {
-	border-right: var(--_ui5_fcl_column_border)
-}
-
-:host([_visible-columns="3"]) [dir="rtl"] .ui5-fcl-column--middle {
-	border-left: var(--_ui5_fcl_column_border)
-}
-
-:host([_visible-columns="3"]) [dir="rtl"] .ui5-fcl-column--end {
-	border-right: var(--_ui5_fcl_column_border);
-}
-
 .ui5-fcl-column--hidden {
 	display: none;
 }
@@ -124,12 +100,3 @@
 .ui5-fcl-arrow:hover:after {
 	height: 7rem;
 }
-
-/*
- * IE FIX:
- * The column separator, that is also the arrow container, is 1rem,
- * whereas the arrow button is 1.5rem and the arrows just doesnt center within the 
-*/
-.ui5-fcl--ie .ui5-fcl-arrow {
-	margin: 0 -0.75rem;
-}