@ui5/webcomponents-fiori 1.4.0 → 1.7.0

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.
@@ -1079,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() {
@@ -1115,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);
 	}
@@ -1197,6 +1195,10 @@ class ShellBar extends UI5Element {
 		};
 	}
 
+	get accLogoRole() {
+		return this.accessibilityRoles.logoRole || "button";
+	}
+
 	static get dependencies() {
 		return [
 			Button,

package/src/SideNavigationItem.js

@@ -24,7 +24,7 @@ const metadata = {
 		 *
 		 * The SAP-icons font provides numerous options.
 		 * <br>
-		 * 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>.
 		 * @public
 		 * @type {string}
 		 * @defaultvalue ""

package/src/SideNavigationSubItem.js

@@ -34,7 +34,7 @@ const metadata = {
 		 *
 		 * The SAP-icons font provides numerous options.
 		 * <br>
-		 * 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>.
 		 * @public
 		 * @type {string}
 		 * @defaultvalue ""

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/TimelineItem.hbs

@@ -31,7 +31,7 @@
 
 {{#*inline "name"}}
 	{{#if nameClickable}}
-		<ui5-link @click="{{onNamePress}}" class="ui5-tli-title-name-clickable">{{name}}&nbsp;</ui5-link>
+		<ui5-link @ui5-click="{{onNamePress}}" class="ui5-tli-title-name-clickable">{{name}}&nbsp;</ui5-link>
 	{{else}}
 		<span class="ui5-tli-title-name">{{name}}&nbsp;</span>
 	{{/if}}

package/src/TimelineItem.js

@@ -33,7 +33,7 @@ const metadata = {
 		 * SAP-icons font provides numerous options.
 		 * <br><br>
 		 *
-		 * 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 ""

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

@@ -22,7 +22,7 @@
 					</div>
 				{{else }}
 					{{#if fileNameClickable}}
-						<ui5-link class="ui5-uci-file-name" @click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
+						<ui5-link class="ui5-uci-file-name" @ui5-click="{{_onFileNameClick}}">{{fileName}}</ui5-link>
 					{{else}}
 						<span class="ui5-uci-file-name ui5-uci-file-name-text">{{fileName}}</span>
 					{{/if}}

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();
@@ -624,9 +633,8 @@ class ViewSettingsDialog extends UI5Element {
 	/**
 	 * Resets the control settings to their initial state.
 	 */
-	_resetSettings() {
+	 _resetSettings() {
 		this._restoreSettings(this._initialSettings);
-		this._filterStepTwo = false;
 		this._recentlyFocused = this._sortOrder;
 		this._focusRecentlyUsedControl();
 	}
@@ -638,6 +646,8 @@ class ViewSettingsDialog extends UI5Element {
 	 */
 	_restoreSettings(settings) {
 		this._currentSettings = JSON.parse(JSON.stringify(settings));
+		this._currentMode = ViewSettingsDialogMode.Sort;
+		this._filterStepTwo = false;
 	}
 
 	/**
@@ -667,6 +677,64 @@ 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 {Object} settings - predefined settings.
+   * @param {string} settings.sortOrder - sort order
+   * @param {string} settings.sortBy - sort by
+   * @param {Array.<Object>} settings.filters - filters
+	 * @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/WizardStep.js

@@ -44,7 +44,7 @@ const metadata = {
 		 * <br><br>
 		 *
 		 * The SAP-icons font provides numerous options.
-		 * 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 ""
 		 * @public

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

@@ -100,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;
-}

package/src/themes/MediaGalleryItem.css

@@ -1,131 +1,130 @@
-:host {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    display: flex;
-}
-
-:host([_square]) {
-    height: 0;
-    padding-top: 100%;
-}
-
-.ui5-media-gallery-item-root {
-    width: 100%;
-    height: 100%;
-    display: flex;
-}
-
-:host([_square]) .ui5-media-gallery-item-root {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-:host([layout="Wide"]) .ui5-media-gallery-item-root {
-    align-items: center;
-}
-
-:host([_thumbnail-design]) .ui5-media-gallery-item-root {
-    border: var(--_ui5_media_gallery_thumbnail_border);
-    box-sizing: border-box;
-}
-
-:host([_interactive]) .ui5-media-gallery-item-root {
-    cursor: pointer;
-}
-
-/* hover */
-:host([_thumbnail-design]:not([disabled]):not([selected])) .ui5-media-gallery-item-root:hover {
-    border-color: var(--sapTile_Interactive_BorderColor);
-    background: var(--sapList_Hover_Background);
-}
-
-/* focused */
-:host([focused]) .ui5-media-gallery-item-root {
-	outline: var(--_ui5_media_gallery_thumbnail_focus_outline);
-	outline-offset: -1px;
-}
-
-/* selected */
-:host([_thumbnail-design][selected]) .ui5-media-gallery-item-root {
-    border: var(--_ui5_media_gallery_thumbnail_selected_border);
-}
-
-/* selected focused */
-:host([_thumbnail-design][focused][selected]) .ui5-media-gallery-item-root {
-    outline-offset: -3px;
-}
-
-.ui5-media-gallery-item-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-}
-
-:host([layout="Wide"]) .ui5-media-gallery-item-wrapper {
-    z-index: 1;
-}
-
-:host([layout="Wide"]:not([_thumbnail-design])) .ui5-media-gallery-item-wrapper {
-    height: calc(100% / 16 * 9);
-}
-
-/* resource not found icon */
-[ui5-icon] {
-    position: absolute;
-    width: 4.5rem;
-    height: 4.55rem;
-    align-self: center;
-}
-
-.ui5-media-gallery-item-mask-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-:host(:not([_thumbnail-design])) .ui5-media-gallery-item-mask-layer {
-    z-index: 2;
-    background: var(--sapBaseColor);
-    mix-blend-mode: multiply;
-    opacity: 0.2;
-    box-shadow: var(--_ui5_media_gallery_item_overlay_box_shadow);
-    pointer-events: none;
-}
-
-:host(:not([_thumbnail-design])[layout="Wide"]) .ui5-media-gallery-item-mask-layer {
-    z-index: 0;
-}
-
-/* disabled state */
-:host([disabled]) .ui5-media-gallery-item-mask-layer {
-    z-index: 2;
-    background: var(--sapContent_ImagePlaceholderBackground);
-    opacity: 0.5;
-    cursor: default;
-}
-
-/* stretch the slotted thumbnails and videos */
-::slotted([slot^=thumbnail]),
-:host([layout="Wide"]) ::slotted(*) {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-/* fit the slotted images within the host container,
-preserving their proportions */
-::slotted(*) {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    margin: auto;
-}
+:host {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+}
+
+:host([_square]) {
+    height: 0;
+    padding-top: 100%;
+}
+
+.ui5-media-gallery-item-root {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+:host([_square]) .ui5-media-gallery-item-root {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+:host([layout="Wide"]) .ui5-media-gallery-item-root {
+    align-items: center;
+}
+
+:host([_thumbnail-design]) .ui5-media-gallery-item-root {
+    border: var(--_ui5_media_gallery_thumbnail_border);
+    box-sizing: border-box;
+}
+
+:host([_interactive]) .ui5-media-gallery-item-root {
+    cursor: pointer;
+}
+
+/* hover */
+:host([_thumbnail-design]:not([disabled]):not([selected])) .ui5-media-gallery-item-root:hover {
+    border-color: var(--sapTile_Interactive_BorderColor);
+    background: var(--sapList_Hover_Background);
+}
+
+/* focused */
+:host([focused]) .ui5-media-gallery-item-root {
+	outline: var(--_ui5_media_gallery_thumbnail_focus_outline);
+	outline-offset: -1px;
+}
+
+/* selected */
+:host([_thumbnail-design][selected]) .ui5-media-gallery-item-root {
+    border: var(--_ui5_media_gallery_thumbnail_selected_border);
+}
+
+/* selected focused */
+:host([_thumbnail-design][focused][selected]) .ui5-media-gallery-item-root {
+    outline-offset: -3px;
+}
+
+.ui5-media-gallery-item-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+:host([layout="Wide"]) .ui5-media-gallery-item-wrapper {
+    z-index: 1;
+}
+
+:host([layout="Wide"]:not([_thumbnail-design])) .ui5-media-gallery-item-wrapper {
+    height: calc(100% / 16 * 9);
+}
+
+/* resource not found icon */
+[ui5-icon] {
+    position: absolute;
+    width: 4.5rem;
+    height: 4.55rem;
+    align-self: center;
+}
+
+.ui5-media-gallery-item-mask-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+:host(:not([_thumbnail-design])) .ui5-media-gallery-item-mask-layer {
+    z-index: 2;
+    background: var(--sapBaseColor);
+    mix-blend-mode: multiply;
+    opacity: 0.2;
+    box-shadow: var(--_ui5_media_gallery_item_overlay_box_shadow);
+    pointer-events: none;
+}
+
+:host(:not([_thumbnail-design])[layout="Wide"]) .ui5-media-gallery-item-mask-layer {
+    z-index: 0;
+}
+
+/* disabled state */
+:host([disabled]) .ui5-media-gallery-item-mask-layer {
+    z-index: 2;
+    background: var(--sapContent_ImagePlaceholderBackground);
+    opacity: 0.5;
+    cursor: default;
+}
+
+/* stretch the slotted thumbnails and videos */
+::slotted([slot^=thumbnail]),
+:host([layout="Wide"]) ::slotted(*) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* fit the slotted images within the host container,
+preserving their proportions */
+::slotted(*) {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    margin: auto;
+}

package/src/themes/NotificationListItem.css

@@ -27,23 +27,6 @@
 	font-weight: normal;
 }
 
-/* IE */
-:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-description {
-	max-height: 32px;
-}
-
-:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-title-text {
-	max-height: 32px;
-}
-
-:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-title-text {
-	max-height: inherit;
-}
-
-:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-description  {
-	max-height: inherit;
-}
-
 :host(:first-of-type) {
 	border-top-left-radius: var(--_ui5-notification_item-border-raius);
 	border-top-right-radius: var(--_ui5-notification_item-border-raius);
@@ -144,4 +127,4 @@
 .ui5-nli-actions {
 	display: flex;
 	box-sizing: border-box;
-}
+}

package/src/themes/NotificationOverflowActionsPopover.css

@@ -5,4 +5,8 @@
 
 .ui5-notification-overflow-popover::part(content) {
 	padding: var(--_ui5-notification-overflow-popover-padding);
+}
+
+.ui5-notification-overflow-list-btn::part(button) {
+	justify-content: flex-start;
 }

package/src/themes/ProductSwitchItem.css

@@ -43,7 +43,6 @@
 
 .ui5-product-switch-item-root {
 	user-select: none;
-	-ms-user-select: none;
 	width: 100%;
 	height: 100%;
 	flex-direction: column;