@ui5/webcomponents-fiori 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/SAP/ui5-webcomponents/compare/v1.1.2...v1.2.0) (2022-02-28)
+
+
+### Bug Fixes
+
+* correct scoping issues with several components ([#4820](https://github.com/SAP/ui5-webcomponents/issues/4820)) ([621dc20](https://github.com/SAP/ui5-webcomponents/commit/621dc20))
+* **ui5-flexible-column-layout:** fix accessibility of hidden columns ([#4811](https://github.com/SAP/ui5-webcomponents/issues/4811)) ([d9f514f](https://github.com/SAP/ui5-webcomponents/commit/d9f514f)), closes [#4789](https://github.com/SAP/ui5-webcomponents/issues/4789)
+* **ui5-media-gallery-item:** correct jsdoc ([#4819](https://github.com/SAP/ui5-webcomponents/issues/4819)) ([5783fa7](https://github.com/SAP/ui5-webcomponents/commit/5783fa7))
+* **ui5-view-settings-dialog:** improve `title` text accessibility  ([#4783](https://github.com/SAP/ui5-webcomponents/issues/4783)) ([88a13df](https://github.com/SAP/ui5-webcomponents/commit/88a13df)), closes [#4660](https://github.com/SAP/ui5-webcomponents/issues/4660)
+* **ui5-wizard:** prevent unnecessary content scrolling ([#4774](https://github.com/SAP/ui5-webcomponents/issues/4774)) ([751db3f](https://github.com/SAP/ui5-webcomponents/commit/751db3f))
+* scoped bundles ([#4745](https://github.com/SAP/ui5-webcomponents/issues/4745)) ([2cd4c7e](https://github.com/SAP/ui5-webcomponents/commit/2cd4c7e))
+
+
+### Features
+
+* **ui5-breadcrumbs:** allow preventDefault in item-click event listener ([#4589](https://github.com/SAP/ui5-webcomponents/issues/4589)) ([ccb4c83](https://github.com/SAP/ui5-webcomponents/commit/ccb4c83))
+* **ui5-button:** add new `tooltip` property ([#4737](https://github.com/SAP/ui5-webcomponents/issues/4737)) ([df8f013](https://github.com/SAP/ui5-webcomponents/commit/df8f013)), closes [#4689](https://github.com/SAP/ui5-webcomponents/issues/4689)
+* **ui5-button:** implement accessibilityAttributes property ([#4655](https://github.com/SAP/ui5-webcomponents/issues/4655)) ([d27c4b5](https://github.com/SAP/ui5-webcomponents/commit/d27c4b5)), closes [#3546](https://github.com/SAP/ui5-webcomponents/issues/3546)
+* **ui5-illustrated-message:** add TNT illustrations ([#4710](https://github.com/SAP/ui5-webcomponents/issues/4710)) ([822a73c](https://github.com/SAP/ui5-webcomponents/commit/822a73c))
+* **ui5-popup:** аdd default responsive paddings ([#4567](https://github.com/SAP/ui5-webcomponents/issues/4567)) ([ddc1e39](https://github.com/SAP/ui5-webcomponents/commit/ddc1e39)), closes [#4402](https://github.com/SAP/ui5-webcomponents/issues/4402)
+* **ui5-side-navigation:** make selection-change event preventable ([#4732](https://github.com/SAP/ui5-webcomponents/issues/4732)) ([d908465](https://github.com/SAP/ui5-webcomponents/commit/d908465)), closes [#4700](https://github.com/SAP/ui5-webcomponents/issues/4700)
+* **ui5-timeline:** add `accessible-name` support ([#4721](https://github.com/SAP/ui5-webcomponents/issues/4721)) ([0562e89](https://github.com/SAP/ui5-webcomponents/commit/0562e89)), closes [#4644](https://github.com/SAP/ui5-webcomponents/issues/4644)
+* **ui5-view-settings-dialog:** add more event.details to confirm/cancel events ([#4772](https://github.com/SAP/ui5-webcomponents/issues/4772)) ([a3eca7a](https://github.com/SAP/ui5-webcomponents/commit/a3eca7a)), closes [#4539](https://github.com/SAP/ui5-webcomponents/issues/4539)
+
+
+
+
+
 ## [1.1.2](https://github.com/SAP/ui5-webcomponents/compare/v1.1.1...v1.1.2) (2022-01-26)
 
 

package/README.md

@@ -14,8 +14,11 @@ such as a common header (ShellBar).
 |-------------------------------------------|--------------------------------|-----------------------------------------------------------------------|
 | Bar                                       | `ui5-bar`                      | `import "@ui5/webcomponents-fiori/dist/Bar.js";`                      |
 | Barcode Scanner Dialog                    | `ui5-barcode-scanner-dialog`   | `import "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";`     |
+| Dynamic Side Content                      | `ui5-dynamic-side-content`     | `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";`       |
 | Flexible Column Layout                    | `ui5-flexible-column-layout`   | `import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";`     |
 | Illustrated Message                       | `ui5-illustrated-message`      | `import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";`       |
+| Media Gallery                             | `ui5-media-gallery`            | `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`             |
+| Media Gallery Item                        | `ui5-media-gallery-item`       | comes with  `ui5-media-gallery`                                       |
 | Notification List Item                    | `ui5-li-notifcation`           | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";`      |
 | Notification Group List Item              | `ui5-li-notification-group`    | `import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";` |
 | Notification Action                       | `ui5-notification-action`      | `import "@ui5/webcomponents-fiori/dist/NotificationAction.js";`       |

package/dist/Bar.js

@@ -39,7 +39,7 @@ const metadata = {
 
 		/**
 		 * Defines if the component middle area needs to be centered between start and end area
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @private
 		 */
 		_shrinked: {
@@ -60,7 +60,7 @@ const metadata = {
 		/**
 		 * Defines the content in the middle of the bar
 		 * @type {HTMLElement[]}
-		 * @slot
+		 * @slot middleContent
 		 * @public
 		 */
 		"default": {
@@ -125,6 +125,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.Bar
+ * @implements sap.ui.webcomponents.fiori.IBar
  * @extends UI5Element
  * @tagname ui5-bar
  * @public

package/dist/BarcodeScannerDialog.js

@@ -56,7 +56,7 @@ const metadata = {
 		 * Fires when the scan is completed successfuuly.
 		 *
 		 * @event sap.ui.webcomponents.fiori.BarcodeScannerDialog#scan-success
-		 * @param {String} text the scan result as string
+		 * @param {string} text the scan result as string
 		 * @param {Object} rawBytes the scan result as a Uint8Array
 		 * @public
 		 */
@@ -71,7 +71,7 @@ const metadata = {
 		 * Fires when the scan fails with error.
 		 *
 		 * @event sap.ui.webcomponents.fiori.BarcodeScannerDialog#scan-error
-		 * @param {String} message the error message
+		 * @param {string} message the error message
 		 * @public
 		 */
 		 "scan-error": {

package/dist/DynamicSideContent.js

@@ -202,10 +202,10 @@ const metadata = {
 		/**
 		 * Fires when the current breakpoint has been changed.
 		 * @event sap.ui.webcomponents.fiori.DynamicSideContent#layout-change
-		 * @param {String} currentBreakpoint the current breakpoint.
-		 * @param {String} previousBreakpoint the breakpoint that was active before change to current breakpoint.
-		 * @param {Boolean} mainContentVisible visibility of the main content.
-		 * @param {Boolean} sideContentVisible visibility of the side content.
+		 * @param {string} currentBreakpoint the current breakpoint.
+		 * @param {string} previousBreakpoint the breakpoint that was active before change to current breakpoint.
+		 * @param {boolean} mainContentVisible visibility of the main content.
+		 * @param {boolean} sideContentVisible visibility of the side content.
 		 * @public
 		 */
 		"layout-change": {
@@ -345,7 +345,6 @@ class DynamicSideContent extends UI5Element {
 
 	/**
 	 * Toggles visibility of main and side contents on S screen size (mobile device).
-	 * @type {String}
 	 * @public
 	 */
 	 toggleContents() {

package/dist/FilterItem.js

@@ -14,7 +14,7 @@ const metadata = {
 		/**
 		 * Defines the text of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
@@ -25,7 +25,7 @@ const metadata = {
 		/**
 		 * Defines the additional text of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @private
 		 */

package/dist/FilterItemOption.js

@@ -10,7 +10,7 @@ const metadata = {
 		 * Defines the text of the component.
 		 *
 		 * @public
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 */
 		text: {
@@ -21,7 +21,7 @@ const metadata = {
 		 * Defines whether the option is selected
 		 *
 		 * @public
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @defaultvalue false
 		 */
 		selected: {

package/dist/FlexibleColumnLayout.js

@@ -705,15 +705,24 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	get accStartColumnRole() {
-		return this.accessibilityRoles.startColumnRole || "region";
+		if (this.startColumnVisible) {
+			return this.accessibilityRoles.startColumnRole || "region";
+		}
+		return undefined;
 	}
 
 	get accMiddleColumnRole() {
-		return this.accessibilityRoles.midColumnRole || "region";
+		if (this.midColumnVisible) {
+			return this.accessibilityRoles.midColumnRole || "region";
+		}
+		return undefined;
 	}
 
 	get accEndColumnRole() {
-		return this.accessibilityRoles.endColumnRole || "region";
+		if (this.endColumnVisible) {
+			return this.accessibilityRoles.endColumnRole || "region";
+		}
+		return undefined;
 	}
 
 	get accStartArrowContainerRole() {
@@ -728,6 +737,25 @@ class FlexibleColumnLayout extends UI5Element {
 		return this._layoutsConfiguration || getLayoutsByMedia();
 	}
 
+	get _accAttributes() {
+		return {
+			columns: {
+				start: {
+					role: this.accStartColumnRole,
+					ariaHidden: !this.startColumnVisible || undefined,
+				},
+				middle: {
+					role: this.accMiddleColumnRole,
+					ariaHidden: !this.midColumnVisible || undefined,
+				},
+				end: {
+					role: this.accEndColumnRole,
+					ariaHidden: !this.endColumnVisible || undefined,
+				},
+			},
+		};
+	}
+
 	get accStartArrowText() {
 		const customTexts = this.accessibilityTexts;
 

package/dist/IllustratedMessage.js

@@ -200,6 +200,10 @@ const metadata = {
  * <b>Note:</b> By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
  * <br>
  * <code>import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"</code>
+ * <br>
+ * <b>Note:</b> Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
+ * <br>
+ * <code>import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"</code>
  *
  * <h3>Structure</h3>
  * The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
@@ -280,8 +284,10 @@ class IllustratedMessage extends UI5Element {
 
 		if (illustrationData === ILLUSTRATION_NOT_FOUND) {
 			this.invalid = true;
+			const illustrationPath = this.name.includes("Tnt") ? `tnt/${this.name.replace("Tnt", "")}` : this.name;
+
 			/* eslint-disable-next-line */
-			return console.warn(`Required illustration is not registered. You can either import the illustration as a module in order to use it e.g. "@ui5/webcomponents-fiori/dist/illustrations/${this.name}.js".`);
+			return console.warn(`Required illustration is not registered. You can either import the illustration as a module in order to use it e.g. "@ui5/webcomponents-fiori/dist/illustrations/${illustrationPath}.js".`);
 		}
 
 		this.invalid = false;

package/dist/Interfaces.js

@@ -1,3 +1,12 @@
+/**
+ * Interface for components that may be slotted inside <code>ui5-page</code> as header and footer.
+ *
+ * @name sap.ui.webcomponents.fiori.IBar
+ * @interface
+ * @public
+ */
+const IBar = "sap.ui.webcomponents.fiori.IBar";
+
 /**
  * Interface for components that may be slotted inside <code>ui5-view-settings-dialog</code> as filter items
  *
@@ -116,6 +125,7 @@ const IUploadCollectionItem = "sap.ui.webcomponents.fiori.IUploadCollectionItem"
 const IWizardStep = "sap.ui.webcomponents.fiori.IWizardStep";
 
 export {
+	IBar,
 	IFilterItem,
 	IFilterItemOption,
 	IMediaGalleryItem,

package/dist/MediaGallery.js

@@ -460,7 +460,7 @@ class MediaGallery extends UI5Element {
 	}
 
 	_onThumbnailClick(event) {
-		const item = event.target.closest("ui5-media-gallery-item");
+		const item = event.target.closest("[ui5-media-gallery-item]");
 
 		if (item.disabled) {
 			return;

package/dist/MediaGalleryItem.js

@@ -123,8 +123,8 @@ const metadata = {
 		/**
 		 * Defines the content of the component.
 		 *
-		 * @type {HTMLElement[]}
-		 * @slot
+		 * @type {HTMLElement}
+		 * @slot content
 		 * @public
 		 */
 		 "default": {
@@ -135,12 +135,11 @@ const metadata = {
 		/**
 		 * Defines the content of the thumbnail.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {HTMLElement}
 		 * @slot
 		 * @public
 		 */
 		 "thumbnail": {
-			propertyName: "thumbnail",
 			type: HTMLElement,
 		},
 	},
@@ -165,7 +164,7 @@ const metadata = {
  * </ul>
  *
  * <h3>ES6 Module Import</h3>
- * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";</code>
+ * <code>import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";</code> (comes with <code>ui5-media-gallery</code>)
  *
  * @constructor
  * @author SAP SE

package/dist/NotificationListItem.js

@@ -99,12 +99,11 @@ const metadata = {
 		/**
 		 * Defines the elements, displayed in the footer of the of the component.
 		 * @type {HTMLElement[]}
-		 * @slot footnotes
+		 * @slot
 		 * @public
 		 */
 		footnotes: {
 			type: HTMLElement,
-			propertyName: "footnotes",
 			individualSlots: true,
 		},
 

package/dist/Page.js

@@ -91,7 +91,7 @@ const metadata = {
 		/**
 		 * Defines the header HTML Element.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.fiori.IBar}
 		 * @slot
 		 * @public
 		 */
@@ -114,7 +114,7 @@ const metadata = {
 		/**
 		 * Defines the footer HTML Element.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.fiori.IBar}
 		 * @slot
 		 * @public
 		 */

package/dist/ShellBar.js

@@ -10,6 +10,7 @@ import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
+import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/bell.js";
@@ -169,6 +170,7 @@ const metadata = {
 			type: String,
 			multiple: true,
 		},
+
 		_menuPopoverExpanded: {
 			type: Boolean,
 			noAttribute: true,
@@ -177,6 +179,7 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
+
 		_fullWidthSearch: {
 			type: Boolean,
 			noAttribute: true,
@@ -298,7 +301,7 @@ const metadata = {
 
 		/**
 		 * Fired, when the product switch icon is activated.
-		 * <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
+		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
 		 * @event sap.ui.webcomponents.fiori.ShellBar#product-switch-click
 		 * @allowPreventDefault
@@ -341,7 +344,7 @@ const metadata = {
 
 		/**
 		 * Fired, when a menu item is activated
-		 * <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>.
+		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
 		 * @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
 		 * @param {HTMLElement} item DOM ref of the activated list item
@@ -1112,7 +1115,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get menuBtnHasPopup() {
-		return this.hasMenuItems ? true : undefined;
+		return this.hasMenuItems ? HasPopup.Menu : undefined;
 	}
 
 	get menuBtnTabindex() {
@@ -1178,13 +1181,17 @@ class ShellBar extends UI5Element {
 				"title": this._productsText,
 			},
 			search: {
-				"ariaExpanded": this.showSearchField,
 				"title": this._searchText,
+				"accessibilityAttributes": {
+					expanded: this.showSearchField,
+				},
 			},
 			overflow: {
 				"title": this._overflowText,
-				"ariaHaspopup": true,
-				"ariaExpanded": this._overflowPopoverExpanded,
+				"accessibilityAttributes": {
+					hasPopup: HasPopup.Menu,
+					expanded: this._overflowPopoverExpanded,
+				},
 			},
 		};
 	}

package/dist/SideNavigation.js

@@ -90,6 +90,7 @@ const metadata = {
 		 *
 		 * @event sap.ui.webcomponents.fiori.SideNavigation#selection-change
 		 * @param {HTMLElement} item the clicked item.
+		 * @allowPreventDefault
 		 * @public
 		 */
 		"selection-change": {
@@ -198,12 +199,14 @@ class SideNavigation extends UI5Element {
 	}
 
 	_setSelectedItem(item) {
+		if (!this.fireEvent("selection-change", { item }, true)) {
+			return;
+		}
+
 		this._walk(current => {
 			current.selected = false;
 		});
 		item.selected = true;
-
-		this.fireEvent("selection-change", { item });
 	}
 
 	_buildPopoverContent(item) {

package/dist/SortItem.js

@@ -9,7 +9,7 @@ const metadata = {
 		/**
 		 * Defines the text of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
@@ -19,7 +19,7 @@ const metadata = {
 
 		/**
 		 * Defines if the component is selected.
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */

package/dist/Timeline.js

@@ -4,8 +4,8 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
 import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
+import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
 import TimelineItem from "./TimelineItem.js";
 
 // Styles
@@ -43,6 +43,18 @@ const metadata = {
 			type: TimelineLayout,
 			defaultValue: TimelineLayout.Vertical,
 		},
+
+		/**
+		 * Defines the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.2.0
+		 */
+		accessibleName: {
+			type: String,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.Timeline.prototype */ {
 		/**
@@ -115,7 +127,9 @@ class Timeline extends UI5Element {
 	}
 
 	get ariaLabel() {
-		return Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);
+		return this.accessibleName
+			? `${Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL)} ${this.accessibleName}`
+			: Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);
 	}
 
 	_onfocusin(event) {

package/dist/TimelineItem.js

@@ -107,7 +107,7 @@ const metadata = {
 		/**
 		 * Defines the indicator line width.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @private
 		 */
 		_lineWidth: {

package/dist/UploadCollection.js

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

package/dist/ViewSettingsDialog.js

@@ -8,6 +8,7 @@ import Label from "@ui5/webcomponents/dist/Label.js";
 import GroupHeaderListItem from "@ui5/webcomponents/dist/GroupHeaderListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
+import Title from "@ui5/webcomponents/dist/Title.js";
 import SegmentedButton from "@ui5/webcomponents/dist/SegmentedButton.js";
 import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js";
 import Bar from "./Bar.js";
@@ -146,12 +147,17 @@ const metadata = {
 		 * @event sap.ui.webcomponents.fiori.ViewSettingsDialog#confirm
 		 * @param {String} sortOrder The current sort order selected.
 		 * @param {String} sortBy The currently selected <code>ui5-sort-item</code> text attribute.
+		 * @param {HTMLElement} sortByItem The currently selected <code>ui5-sort-item</code>.
+		 * @param {Boolean} sortDescending The selected sort order (true = descending, false = ascending).
+		 * @param {Array} filterItems The selected filters items.
 		 * @public
 		 */
 		confirm: {
 			detail: {
 				sortOrder: { type: String },
 				sortBy: { type: String },
+				sortByItem: { type: HTMLElement },
+				sortDescending: { type: Boolean },
 				filters: { type: Array },
 			},
 		},
@@ -162,12 +168,17 @@ const metadata = {
 		 * @event sap.ui.webcomponents.fiori.ViewSettingsDialog#cancel
 		 * @param {String} sortOrder The current sort order selected.
 		 * @param {String} sortBy The currently selected <code>ui5-sort-item</code> text attribute.
+		 * @param {HTMLElement} sortByItem The currently selected <code>ui5-sort-item</code>.
+		 * @param {Boolean} sortDescending The selected sort order (true = descending, false = ascending).
+		 * @param {Array} filterItems The selected filters items.
 		 * @public
 		 */
 		cancel: {
 			detail: {
 				sortOrder: { type: String },
 				sortBy: { type: String },
+				sortByItem: { type: HTMLElement },
+				sortDescending: { type: Boolean },
 				filters: { type: Array },
 			},
 		},
@@ -251,6 +262,7 @@ class ViewSettingsDialog extends UI5Element {
 		return [
 			Bar,
 			Button,
+			Title,
 			Dialog,
 			Label,
 			List,
@@ -400,10 +412,12 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	get initSortByItems() {
-		return this.sortItems.map(item => {
+		return this.sortItems.map((item, index) => {
 			return {
 				text: item.text,
 				selected: item.selected,
+				associatedItem: item,
+				index,
 			};
 		});
 	}
@@ -412,11 +426,11 @@ class ViewSettingsDialog extends UI5Element {
 		return [
 			{
 				text: this._ascendingLabel,
-				selected: true,
+				selected: !this.sortDescending,
 			},
 			{
 				text: this._descendingLabel,
-				selected: false,
+				selected: this.sortDescending,
 			},
 		];
 	}
@@ -548,11 +562,16 @@ class ViewSettingsDialog extends UI5Element {
 		const _currentSortOrderSelected = this._currentSettings.sortOrder.filter(item => item.selected)[0],
 			_currentSortBySelected = this._currentSettings.sortBy.filter(item => item.selected)[0],
 			sortOrder = _currentSortOrderSelected && _currentSortOrderSelected.text,
-			sortBy = _currentSortBySelected && _currentSortBySelected.text;
-
+			sortDescending = !this._currentSettings.sortOrder[0].selected,
+			sortBy = _currentSortBySelected && _currentSortBySelected.text,
+			sortByElementIndex = _currentSortBySelected && _currentSortBySelected.index,
+			initSortIByItem = this.initSortByItems.find((item, index) => index === sortByElementIndex),
+			sortByItem = initSortIByItem && initSortIByItem.associatedItem;
 		return {
 			sortOrder,
+			sortDescending,
 			sortBy,
+			sortByItem,
 			filters: this.selectedFilters,
 		};
 	}
@@ -628,12 +647,12 @@ class ViewSettingsDialog extends UI5Element {
 	 * Stores <code>Sort By</code> list as recently used control and its selected item in current state.
 	 */
 	 _onSortByChange(event) {
+		const selectedItemIndex = Number(event.detail.item.getAttribute("data-ui5-external-action-item-index"));
 		this._recentlyFocused = this._sortBy;
-		this._currentSettings.sortBy = this.initSortByItems.map(item => {
-			item.selected = item.text === event.detail.item.innerText;
+		this._currentSettings.sortBy = this.initSortByItems.map((item, index) => {
+			item.selected = index === selectedItemIndex;
 			return item;
 		});
-
 		// Invalidate
 		this._currentSettings = JSON.parse(JSON.stringify(this._currentSettings));
 	}

package/dist/Wizard.js

@@ -126,7 +126,7 @@ const metadata = {
 		 * @event sap.ui.webcomponents.fiori.Wizard#step-change
 		 * @param {HTMLElement} step The new step.
 		 * @param {HTMLElement} previousStep The previous step.
-		 * @param {Boolean} changeWithClick The step change occurs due to user's click or 'Enter'/'Space' key press on step within the navigation.
+		 * @param {boolean} changeWithClick The step change occurs due to user's click or 'Enter'/'Space' key press on step within the navigation.
 		 * @public
 		 */
 		"step-change": {
@@ -985,7 +985,7 @@ class Wizard extends UI5Element {
 	 * @param {HTMLElement} selectedStep the old step
 	 * @param {HTMLElement} stepToSelect the step to be selected
 	 * @param {Integer} stepToSelectIndex the index of the newly selected step
-	 * @param {Boolean} changeWithClick the selection changed due to user click in the step navigation
+	 * @param {boolean} changeWithClick the selection changed due to user click in the step navigation
 	 * @private
 	 */
 	switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex, changeWithClick) {