@ui5/webcomponents-fiori 0.31.21 → 0.31.25

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.31.25](https://github.com/SAP/ui5-webcomponents/compare/v0.31.24...v0.31.25) (2021-11-29)
+
+**Note:** Version bump only for package @ui5/webcomponents-fiori
+
+
+
+
+
+## [0.31.24](https://github.com/SAP/ui5-webcomponents/compare/v0.31.23...v0.31.24) (2021-11-23)
+
+
+### Bug Fixes
+
+* adding stable selectors for tab container and shellbar ([#4369](https://github.com/SAP/ui5-webcomponents/issues/4369)) ([dc2ea58](https://github.com/SAP/ui5-webcomponents/commit/dc2ea58))
+
+
+### Features
+
+* **ui5-shellbar:** introduce accessibilityTexts property ([#4377](https://github.com/SAP/ui5-webcomponents/issues/4377)) ([426e6c0](https://github.com/SAP/ui5-webcomponents/commit/426e6c0)), closes [#4009](https://github.com/SAP/ui5-webcomponents/issues/4009)
+
+
+
+
+
+## [0.31.23](https://github.com/SAP/ui5-webcomponents/compare/v0.31.22...v0.31.23) (2021-11-17)
+
+**Note:** Version bump only for package @ui5/webcomponents-fiori
+
+
+
+
+
+## [0.31.22](https://github.com/SAP/ui5-webcomponents/compare/v0.31.21...v0.31.22) (2021-10-26)
+
+**Note:** Version bump only for package @ui5/webcomponents-fiori
+
+
+
+
+
 ## [0.31.21](https://github.com/SAP/ui5-webcomponents/compare/v0.31.20...v0.31.21) (2021-10-16)
 
 

package/dist/ShellBar.js

@@ -109,6 +109,21 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines several additional accessibility texts
+		 * for even further customization.
+		 *
+		 * It supports the following fields:
+		 * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibilityTexts: {
+			type: Object,
+		},
+
 		/**
 		 * @private
 		 */
@@ -1021,7 +1036,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get _profileText() {
-		return this.i18nBundle.getText(SHELLBAR_PROFILE);
+		return this.accessibilityTexts.profileButtonTitle || this.i18nBundle.getText(SHELLBAR_PROFILE);
 	}
 
 	get _productsText() {

package/dist/api.json

@@ -1 +1 @@
-{"$schema-ref":"http://schemas.sap.com/sapui5/designtime/api.json/1.0","version":"1.62","symbols":[{"kind":"class","name":"sap.ui.webcomponents.fiori.Bar","basename":"Bar","tagname":"ui5-bar","resource":"Bar.js","module":"Bar","static":true,"visibility":"public","since":"1.0.0-rc.11","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The Bar component consists of three areas to hold its content. It has the capability to center content, such as a title, while having other components on the left and right side.\n\n<h3>Usage</h3> With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\nNote: Do not place a Bar inside another Bar or inside any bar-like component. Doing so causes unpredictable behavior.\n\nFor the <code>ui5-bar</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/Bar.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"BarDesign","description":"Defines the <code>ui5-bar</code> design. <br><br> <b>Note:</b> Available options are \"Header\", \"Subheader\", \"Footer\", \"FloatingFooter\".","defaultValue":"\"Header\""}],"slots":[{"name":"endContent","visibility":"public","type":"HTMLElement[]"},{"name":"middleContent","visibility":"public","type":"HTMLElement[]"},{"name":"startContent","visibility":"public","type":"HTMLElement[]"}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.FilterItem","basename":"FilterItem","tagname":"ui5-filter-item","resource":"FilterItem.js","module":"FilterItem","static":true,"visibility":"public","since":"1.0.0-rc.16","extends":"ListItem","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>ui5-filter-item</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/FilterItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"text","visibility":"public","type":"String","description":"Defines the text of the component.","defaultValue":"\"\""}],"slots":[{"name":"values","visibility":"public","type":"ui5-filter-item-option","description":"Defines the <code>values</code> list."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.FilterItemOption","basename":"FilterItemOption","tagname":"ui5-filter-item-option","resource":"FilterItemOption.js","module":"FilterItemOption","static":true,"visibility":"public","since":"1.0.0-rc.16","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>ui5-filter-item-option</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/FilterItemOption.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"selected","visibility":"public","type":"Boolean","description":"Defines whether the option is selected","defaultValue":"false"},{"name":"text","visibility":"public","type":"String","description":"Defines the text of the component.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.FlexibleColumnLayout","basename":"FlexibleColumnLayout","tagname":"ui5-flexible-column-layout","resource":"FlexibleColumnLayout.js","module":"FlexibleColumnLayout","visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>FlexibleColumnLayout</code> implements the master-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.\n\n<h3>Usage</h3>\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.). The Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n<h3>Responsive Behavior</h3>\n\nThe <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> property and the window size. The component would display 1 column for window size smaller than 900px, up to two columns between 900px and 1280px, and 3 columns for sizes bigger than 1280px.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"_layoutsConfiguration","visibility":"restricted","type":"Object","description":"Allows the user to replace the whole layouts configuration"},{"name":"accessibilityTexts","visibility":"public","since":"1.0.0-rc.11","type":"object","description":"On object of strings that defines several additional accessibility texts for even further customization.\n\nIt supports the following fields: - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right"},{"name":"columnLayout","readonly":"true","visibility":"public","type":"Array","description":"Returns the current column layout, based on both the <code>layout</code> property and the screen size. <br><br> <b>For example:</b> [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc, where the numbers represents the width of the start, middle and end columns.","defaultValue":"[\"100%\", 0, 0]"},{"name":"endColumnVisible","readonly":"true","visibility":"public","type":"boolean","description":"Returns if the <code>end</code> column is visible.","defaultValue":"false"},{"name":"layout","visibility":"public","type":"FCLLayout","description":"Defines the columns layout and their proportion. <br><br> <b>Note:</b> The layout also depends on the screen size - one column for screens smaller than 900px, two columns between 900px and 1280px and three columns for sizes bigger than 1280px. <br><br> Available options are: <ul> <li><code>OneColumn</code></li> <li><code>TwoColumnsStartExpanded</code></li> <li><code>TwoColumnsMidExpanded</code></li> <li><code>ThreeColumnsMidExpanded</code></li> <li><code>ThreeColumnsEndExpanded</code></li> <li><code>ThreeColumnsStartExpandedEndHidden</code></li> <li><code>ThreeColumnsMidExpandedEndHidden</code></li> <li><code>MidColumnFullScreen</code></li> <li><code>EndColumnFullScreen</code></li> </ul> <br><br> <b>For example:</b> layout=<code>TwoColumnsStartExpanded</code> means the layout will display up to two columns in 67%/33% proportion.","defaultValue":"\"OneColumn\""},{"name":"midColumnVisible","readonly":"true","visibility":"public","type":"boolean","description":"Returns if the <code>middle</code> column is visible.","defaultValue":"false"},{"name":"noArrows","visibility":"public","type":"boolean","description":"Defines the visibility of the arrows, used for expanding and shrinking the columns.","defaultValue":"false"},{"name":"startColumnVisible","readonly":"true","visibility":"public","type":"boolean","description":"Returns if the <code>start</code> column is visible.","defaultValue":"true"},{"name":"visibleColumns","readonly":"true","visibility":"public","type":"Integer","description":"Returns the number of currently visible columns.","defaultValue":"1"}],"slots":[{"name":"endColumn","visibility":"public","type":"HTMLElement","description":"Defines the content in the end column."},{"name":"midColumn","visibility":"public","type":"HTMLElement","description":"Defines the content in the middle column."},{"name":"startColumn","visibility":"public","type":"HTMLElement","description":"Defines the content in the start column."}],"events":[{"name":"layout-change","visibility":"public","parameters":[{"name":"layout","type":"FCLLayout","description":"the current layout"},{"name":"columnLayout","type":"Array","description":"the effective column layout, f.e [67%, 33%, 0]"},{"name":"startColumnVisible","type":"boolean","description":"indicates if the start column is currently visible"},{"name":"midColumnVisible","type":"boolean","description":"indicates if the middle column is currently visible"},{"name":"endColumnVisible","type":"boolean","description":"indicates if the end column is currently visible"},{"name":"arrowsUsed","type":"boolean","description":"indicates if the layout is changed via the arrows"},{"name":"resize","type":"boolean","description":"indicates if the layout is changed via resizing"}],"description":"Fired when the layout changes via user interaction by clicking the arrows or by changing the component size due to resizing."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.NotificationAction","basename":"NotificationAction","tagname":"ui5-notification-action","resource":"NotificationAction.js","module":"NotificationAction","static":true,"visibility":"public","extends":"UI5Element","description":"The <code>ui5-notification-action</code> represents an abstract action, used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"ButtonDesign","description":"Defines the action design. <br><br> <b>Note:</b> Available options are \"Default\", \"Emphasized\", \"Positive\", \"Negative\", and \"Transparent\".","defaultValue":"\"Transparent\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines if the action is disabled. <br><br> <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous buil-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>.","defaultValue":"\"\""},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-notification-action</code>.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.NotificationListGroupItem","basename":"NotificationListGroupItem","tagname":"ui5-li-notification-group","appenddocs":"NotificationAction","resource":"NotificationListGroupItem.js","module":"NotificationListGroupItem","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"NotificationListItemBase","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-li-notification-group</code> is a special type of list item, that unlike others can group items within self, usually <code>ui5-li-notification</code> items. <br>\n\nThe component consists of: <ul> <li><code>Toggle</code> button to expand and collapse the group</li> <li><code>Priority</code> icon to display the priority of the group</li> <li><code>Heading</code> to entitle the group</li> <li>Custom actions - with the use of <code>ui5-notification-action</code></li> <li>Items of the group</li> </ul>\n\n<h3>Usage</h3> The component can be used in a standard <code>ui5-list</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/NotificationListGroupItem.js\";</code> <br> <code>import @ui5/webcomponents/dist/NotificationAction.js\";</code> (optional)","constructor":{"visibility":"public"},"properties":[{"name":"collapsed","visibility":"public","type":"boolean","description":"Defines if the group is collapsed or expanded.","defaultValue":"false"},{"name":"showCounter","visibility":"public","type":"boolean","description":"Defines if the items <code>counter</code> would be displayed.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-li-notification-group</code>, usually <code>ui5-li-notification</code> items."}],"events":[{"name":"toggle","visibility":"public","description":"Fired when the <code>ui5-li-notification-group</code> is expanded/collapsed by user interaction."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.NotificationListItem","basename":"NotificationListItem","tagname":"ui5-li-notification","appenddocs":"NotificationAction","resource":"NotificationListItem.js","module":"NotificationListItem","visibility":"public","since":"1.0.0-rc.8","extends":"NotificationListItemBase","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-li-notification</code> is a type of list item, meant to display notifications. <br>\n\nThe component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>heading</code>, descriptive <code>content</code> and <code>footnotes</code> to fully describe a notification. <br>\n\nThe user can: <ul> <li>display a <code>Close</code> button</li> <li>can control whether the <code>heading</code> and <code>description</code> should wrap or truncate and display a <code>ShowMore</code> button to switch between less and more information</li> <li>add custom actions by using the <code>ui5-notification-action</code> component</li> </ul>\n\n<h3>Usage</h3> The component can be used in a standard <code>ui5-list</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/NotificationListItem.js\";</code> <br> <code>import @ui5/webcomponents/dist/NotificationAction.js\";</code> (optional)","constructor":{"visibility":"public"},"properties":[{"name":"wrap","visibility":"public","type":"boolean","description":"Defines if the <code>heading</code> and <code>description</code> should wrap, they truncate by default.\n\n<br><br> <b>Note:</b> by default the <code>heading</code> and <code>decription</code>, and a <code>ShowMore/Less</code> button would be displayed.","defaultValue":"false"}],"slots":[{"name":"avatar","visibility":"public","type":"HTMLElement","description":"Defines the avatar, displayed in the <code>ui5-li-notification</code>.\n\n<br><br> <b>Note:</b> Consider using the <code>ui5-avatar</code> to display icons, initials or images. <br> <b>Note:</b>In order to be complaint with the UX guidlines and for best experience, we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the <code>ui5-avatar</code> you can set its <code>size</code><code> property to <code>XS</code> to get the required size - <code><ui5-avatar size=\"XS\"></code>."},{"name":"default","visibility":"public","type":"Node[]","description":"Defines the content of the <code>ui5-li-notification</code>, usually a description of the notification.\n\n<br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."},{"name":"footnotes","visibility":"public","type":"HTMLElement[]","description":"Defines the elements, dipalyed in the footer of the of the <code>ui5-li-notification</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.NotificationListItemBase","basename":"NotificationListItemBase","tagname":"ui5-li-notification-group","appenddocs":"NotificationAction","resource":"NotificationListItemBase.js","module":"NotificationListItemBase","abstract":true,"visibility":"public","since":"1.0.0-rc.8","extends":"ListItemBase","description":"The base class of the <code>NotificationListItem</code> and <code>NotificationListGroupItem</code>.","constructor":{"visibility":"public"},"properties":[{"name":"busy","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines if a busy indicator would be displayed over the item.","defaultValue":"false"},{"name":"heading","visibility":"public","type":"string","description":"Defines the <code>heading</code> of the item.","defaultValue":"\"\""},{"name":"priority","visibility":"public","type":"Priority","description":"Defines the <code>priority</code> of the item.","defaultValue":"\"None\""},{"name":"read","visibility":"public","type":"boolean","description":"Defines if the <code>notification</code> is new or has been already read. <br><br> <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font, if set to true - it has a normal font.","defaultValue":"false"},{"name":"showClose","visibility":"public","type":"boolean","description":"Defines if the <code>close</code> button would be displayed.","defaultValue":"false"}],"slots":[{"name":"actions","visibility":"public","type":"HTMLElement","description":"Defines the actions, displayed in the top-right area. <br><br> <b>Note:</b> use the <code>ui5-notification-action</code> component."}],"events":[{"name":"close","visibility":"public","description":"Fired when the <code>Close</code> button is pressed."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.Page","basename":"Page","tagname":"ui5-page","resource":"Page.js","module":"Page","visibility":"public","since":"1.0.0-rc.12","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-page</code> is a container control 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> The top most area of the page is occupied by the header. The standard header includes a navigation button and a title. <h4>Content</h4> The content occupies the main part of the page. Only the content area is scrollable by default. This can be prevented by setting <code>enableScrolling</code> to <code>false</code>. <h4>Footer</h4> The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content. This is enabled with the <code>floatingFooter</code> property.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/Page.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"backgroundDesign","visibility":"public","type":"PageBackgroundDesign","description":"Defines the background color of the <code>ui5-page</code>. <br><br> <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast. <br><br> Available options are: <ul> <li><code>List</code></li> <li><code>Solid</code></li> <li><code>Standard</code></li> (default) <li><code>Transparent</code></li> <ul>","defaultValue":"\"Standard\""},{"name":"disableScrolling","visibility":"public","type":"Boolean","description":"Disables vertical scrolling of page content. If set to true, there will be no vertical scrolling at all.","defaultValue":"false"},{"name":"floatingFooter","visibility":"public","type":"Boolean","description":"Defines if the footer should float over the content. <br><br> <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.","defaultValue":"true"},{"name":"hideFooter","visibility":"public","type":"Boolean","description":"Defines the footer visibility.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the content HTML Element."},{"name":"footer","visibility":"public","type":"HTMLElement[]","description":"Defines the footer HTML Element."},{"name":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the header HTML Element."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ProductSwitch","basename":"ProductSwitch","tagname":"ui5-product-switch","appenddocs":"ProductSwitchItem","resource":"ProductSwitch.js","module":"ProductSwitch","visibility":"public","since":"1.0.0-rc.5","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code> and allows the user to easily switch between products. <br><br> <h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code> (for <code>ui5-product-switch-item</code>)","constructor":{"visibility":"public"},"properties":[],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-product-switch</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ProductSwitchItem","basename":"ProductSwitchItem","tagname":"ui5-product-switch-item","resource":"ProductSwitchItem.js","module":"ProductSwitchItem","visibility":"public","since":"1.0.0-rc.5","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-product-switch-item</code> web component represents the items displayed in the <code>ui5-product-switch</code> web component. <br><br> <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>. <br><br> <h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"heading","visibility":"public","type":"string","description":"Defines the title of the <code>ui5-product-switch-item</code>.","defaultValue":"\"\""},{"name":"icon","visibility":"public","type":"string","description":"Defines the icon to be displayed as a graphical element within the <code>ui5-product-switch-item</code>. <br><br> Example: <br> <pre>ui5-product-switch-item icon=\"palette\"</pre>\n\nSee 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>.","defaultValue":"\"\""},{"name":"subtitle","visibility":"public","type":"string","description":"Defines the subtitle of the <code>ui5-product-switch-item</code>.","defaultValue":"\"\""},{"name":"target","visibility":"public","type":"string","description":"Defines a target where the <code>targetSrc</code> content must be open. <br><br> Available options are: <ul> <li><code>_self</code></li> <li><code>_top</code></li> <li><code>_blank</code></li> <li><code>_parent</code></li> <li><code>_search</code></li> </ul>","defaultValue":"\"_self\""},{"name":"targetSrc","visibility":"public","type":"string","description":"Defines the <code>ui5-product-switch-item</code> target URI. Supports standard hyperlink behavior.","defaultValue":"\"\""}],"slots":[],"events":[{"name":"click","visibility":"public","description":"Fired when the <code>ui5-product-switch-item</code> is activated either with a click/tap or by using the Enter or Space key."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ShellBar","basename":"ShellBar","tagname":"ui5-shellbar","appenddocs":"ShellBarItem","resource":"ShellBar.js","module":"ShellBar","visibility":"public","since":"0.8.0","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-shellbar</code> is meant to serve as an application header and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on. <br><br>\n\n<h3>Stable DOM Refs</h3>\n\nYou can use the following stable DOM refs for the <code>ui5-shellbar</code>: <ul> <li>logo</li> <li>copilot</li> <li>notifications</li> <li>overflow</li> <li>profile</li> <li>product-switch</li> </ul>\n\nIn the context of <code>ui5-shellbar</code>, you can provide a custom stable DOM refs for: <ul> <li>Every <code>ui5-shellbar-item</code> that you provide. Example: <code><ui5-shellbar-item stable-dom-ref=\"messages\"></ui5-shellbar-item></code></li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ShellBar\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"notificationCount","visibility":"public","type":"string","description":"Defines the <code>notificationCount</code>, displayed in the notification icon top-right corner.","defaultValue":"\"\""},{"name":"primaryTitle","visibility":"public","type":"string","description":"Defines the <code>primaryTitle</code>. <br><br> <b>Note:</b> The <code>primaryTitle</code> would be hidden on S screen size (less than approx. 700px).","defaultValue":"\"\""},{"name":"secondaryTitle","visibility":"public","type":"string","description":"Defines the <code>secondaryTitle</code>. <br><br> <b>Note:</b> The <code>secondaryTitle</code> would be hidden on S and M screen sizes (less than approx. 1300px).","defaultValue":"\"\""},{"name":"showCoPilot","visibility":"public","type":"boolean","description":"Defines, if the product CoPilot icon would be displayed. <br><b>Note:</b> By default the co-pilot is displayed as static SVG. If you need an animated co-pilot, you can import the <code>\"@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js\"</code> module as add-on feature.","defaultValue":"false"},{"name":"showNotifications","visibility":"public","type":"boolean","description":"Defines, if the notification icon would be displayed.","defaultValue":"false"},{"name":"showProductSwitch","visibility":"public","type":"boolean","description":"Defines, if the product switch icon would be displayed.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-shellbar</code> aditional items. <br><br> <b>Note:</b> You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>."},{"name":"logo","visibility":"public","since":"1.0.0-rc.8","type":"HTMLElement","description":"Defines the logo of the <code>ui5-shellbar</code>. For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo."},{"name":"menuItems","visibility":"public","since":"0.10","type":"HTMLElement[]","description":"Defines the items displayed in menu after a click on the primary title. <br><br> <b>Note:</b> You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors."},{"name":"profile","visibility":"public","since":"1.0.0-rc.6","type":"HTMLElement","description":"You can pass <code>ui5-avatar</code> to set the profile image/icon. If no profile slot is set - profile will be excluded from actions.\n\nNote: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because it should have specific size by design in the context of <code>ui5-shellbar</code> profile."},{"name":"searchField","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-input</code>, that will be used as a search field."},{"name":"startButton","visibility":"public","type":"HTMLElement[]","description":"Defines a <code>ui5-button</code> in the bar that will be placed in the beginning. We encourage this slot to be used for a back or home button. It gets overstyled to match ShellBar's styling."}],"events":[{"name":"co-pilot-click","visibility":"public","since":"0.10","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the co pilot is activated."},{"name":"logo-click","visibility":"public","since":"0.10","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the logo is activated."},{"name":"menu-item-click","visibility":"public","since":"0.10","parameters":[{"name":"item","type":"HTMLElement","description":"dom ref of the activated list item"}],"description":"Fired, when a menu item is activated <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>."},{"name":"notifications-click","visibility":"public","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the notification icon is activated."},{"name":"product-switch-click","visibility":"public","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the product switch icon is activated. <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>."},{"name":"profile-click","visibility":"public","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the profile slot is present."}],"methods":[{"name":"closeOverflow","visibility":"public","description":"Closes the overflow area. Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event"}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ShellBarItem","basename":"ShellBarItem","tagname":"ui5-shellbar-item","resource":"ShellBarItem.js","module":"ShellBarItem","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"The <code>ui5-shellbar-item</code> represents a custom item, that might be added to the <code>ui5-shellbar</code>. <br><br> <h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ShellBarItem\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"count","visibility":"public","since":"1.0.0-rc.6","type":"string","description":"Defines the count displayed in the top-right corner.","defaultValue":"\"\""},{"name":"icon","visibility":"public","type":"string","description":"Defines the name of the item's icon.","defaultValue":"\"\""},{"name":"stableDomRef","visibility":"public","since":"1.0.0-rc.8","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."},{"name":"text","visibility":"public","type":"string","description":"Defines the item text.","defaultValue":"\"\""}],"slots":[],"events":[{"name":"item-click","visibility":"public","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the clicked element"}],"description":"Fired, when the item is pressed."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.SideNavigation","basename":"SideNavigation","tagname":"ui5-side-navigation","appenddocs":"SideNavigationItem SideNavigationSubItem","resource":"SideNavigation.js","module":"SideNavigation","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>SideNavigation</code> is used as a standard menu in applications. It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned). <ul> <li>The header is meant for displaying user related information - profile data, avatar, etc.</li> <li>The main navigation section is related to the user’s current work context</li> <li>The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on). </li> </ul>\n\n<h3>Usage</h3>\n\nUse the available <code>ui5-side-navigation-item</code> and <code>ui5-side-navigation-sub-item</code> components to build your menu. The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level. You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/SideNavigation.js\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";</code> (for <code>ui5-side-navigation-item</code>) <br> <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";</code> (for <code>ui5-side-navigation-sub-item</code>)","constructor":{"visibility":"public"},"properties":[{"name":"collapsed","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"undefined","description":"Defines the main items of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component for the top-level items, and the <code>ui5-side-navigation-sub-item</code> component for second-level items, nested inside the items."},{"name":"fixedItems","visibility":"public","type":"undefined","description":"Defines the fixed items at the bottom of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component for the fixed items, and optionally the <code>ui5-side-navigation-sub-item</code> component to provide second-level items inside them.\n\n<b>Note:</b> In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)"},{"name":"header","visibility":"public","since":"1.0.0-rc.11","type":"undefined","description":"Defines the header of the <code>ui5-side-navigation</code>.\n\n<br><br> <b>Note:</b> The header is displayed when the component is expanded - the property <code>collapsed</code> is false;"}],"events":[{"name":"selection-change","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the clicked item."}],"description":"Fired when the selection has changed via user interaction"}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.SideNavigationItem","basename":"SideNavigationItem","tagname":"ui5-side-navigation-item","resource":"SideNavigationItem.js","module":"SideNavigationItem","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-side-navigation-item</code> is used within <code>ui5-side-navigation</code> only. Via the <code>ui5-side-navigation-item</code> you control the content of the <code>SideNavigation</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/SideNavigationItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"expanded","visibility":"public","type":"boolean","description":"Defines if the item is expanded","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the icon of the item. <br><br>\n\nThe 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>.","defaultValue":"\"\""},{"name":"selected","visibility":"public","type":"boolean","description":"Defines whether the subitem is selected","defaultValue":"false"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the item.","defaultValue":"\"\""},{"name":"wholeItemToggleable","visibility":"public","since":"1.0.0-rc.11","type":"boolean","description":"Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present). If set to true, pressing the whole item will toggle the sub items, and it won't fire the <code>click</code> event. By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"If you wish to nest menus, you can pass inner menu items to the default slot."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.SideNavigationSubItem","basename":"SideNavigationSubItem","tagname":"ui5-side-navigation-sub-item","resource":"SideNavigationSubItem.js","module":"SideNavigationSubItem","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-side-navigation-sub-item</code> is intended to be used inside a <code>ui5-side-navigation-item</code> only.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"icon","visibility":"public","type":"string","description":"Defines the icon of the item. <br><br>\n\nThe 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>.","defaultValue":"\"\""},{"name":"selected","visibility":"public","type":"boolean","description":"Defines whether the subitem is selected.","defaultValue":"false"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the item.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.SortItem","basename":"SortItem","tagname":"ui5-sort-item","resource":"SortItem.js","module":"SortItem","static":true,"visibility":"public","since":"1.0.0-rc.16","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>ui5-sort-item</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/SortItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"selected","visibility":"public","type":"Boolean","description":"Defines if the component is selected.","defaultValue":"false"},{"name":"text","visibility":"public","type":"String","description":"Defines the text of the component.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.Timeline","basename":"Timeline","tagname":"ui5-timeline","appenddocs":"TimelineItem","resource":"Timeline.js","module":"Timeline","visibility":"public","since":"0.8.0","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-timeline</code> component shows entries (such as objects, events, or posts) in chronological order. A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.","constructor":{"visibility":"public"},"properties":[{"name":"layout","visibility":"public","since":"1.0.0-rc.15","type":"TimelineLayout","description":"Defines the items orientation.\n\n<br><br> <b>Note:</b> Available options are: <ul> <li><code>Vertical</code></li> <li><code>Horizontal</code></li> </ul>","defaultValue":"\"Vertical\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Determines the content of the <code>ui5-timeline</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.TimelineItem","basename":"TimelineItem","tagname":"ui5-timeline-item","resource":"TimelineItem.js","module":"TimelineItem","visibility":"public","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nAn entry posted on the timeline.","constructor":{"visibility":"public"},"properties":[{"name":"icon","visibility":"public","type":"string","description":"Defines the icon to be displayed as graphical element within the <code>ui5-timeline-item</code>. SAP-icons font provides numerous options. <br><br>\n\nSee 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>.","defaultValue":"\"\""},{"name":"itemName","visibility":"public","type":"string","description":"Defines the name of the item.","defaultValue":"\"\""},{"name":"itemNameClickable","visibility":"public","type":"boolean","description":"Defines whether the <code>itemName</code> is clickable.","defaultValue":"false"},{"name":"subtitleText","visibility":"public","type":"string","description":"Defines the subtitle text of the component.","defaultValue":"\"\""},{"name":"titleText","visibility":"public","type":"string","description":"Defines the title text of the component.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Determines the description of the <code>ui5-timeline-item</code>."}],"events":[{"name":"item-name-click","visibility":"public","description":"Fired when the item name is pressed either with a click/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event will not be fired if the <code>item-name-clickable</code> attribute is not set."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.types.FCLLayout","basename":"FCLLayout","resource":"types/FCLLayout.js","module":"types/FCLLayout","static":true,"visibility":"public","constructor":{"visibility":"public"},"properties":[{"name":"EndColumnFullScreen","visibility":"public","type":"EndColumnFullScreen","description":"Desktop: -/-/100 only the End column is displayed Tablet: -/-/100 only the End column is displayed Phone: -/-/100 only the End column is displayed\n\nUse to display a detail-detail page only, when the user should focus entirely on it."},{"name":"MidColumnFullScreen","visibility":"public","type":"MidColumnFullScreen","description":"Desktop: -/100/- only the Mid column is displayed Tablet: -/100/- only the Mid column is displayed Phone: -/100/- only the Mid column is displayed\n\nUse to display a detail page only, when the user should focus entirely on it."},{"name":"OneColumn","visibility":"public","type":"OneColumn","description":"The layout will display 1 column."},{"name":"ThreeColumnsEndExpanded","visibility":"public","type":"ThreeColumnsEndExpanded","description":"Desktop: 25/25/50 Start, Mid and End (expanded) columns are displayed Tablet: 0/33/67 Mid and End (expanded) columns are displayed, Start is accessible by layout arrows Phone: -/-/100 (only the End column is displayed)\n\nUse to display all three pages (master, detail, detail-detail) when the user should focus on the detail-detail."},{"name":"ThreeColumnsMidExpanded","visibility":"public","type":"ThreeColumnsMidExpanded","description":"Desktop: 25/50/25 Start, Mid (expanded) and End columns are displayed Tablet: 0/67/33 Mid (expanded) and End columns are displayed, Start is accessible by a layout arrow Phone: -/-/100 only the End column is displayed\n\nUse to display all three pages (master, detail, detail-detail) when the user should focus on the detail."},{"name":"ThreeColumnsMidExpandedEndHidden","visibility":"public","type":"ThreeColumnsMidExpandedEndHidden","description":"Desktop: 33/67/0 Start and Mid (expanded) columns are displayed, End is accessible by a layout arrow Tablet: 33/67/0 Start and Mid (expanded) columns are displayed, End is accessible by a layout arrow Phone: -/-/100 only the End column is displayed\n\nUse to display the master and detail pages when the user should focus on the detail. The detail-detail is still loaded and easily accessible with a layout arrow."},{"name":"ThreeColumnsStartExpandedEndHidden","visibility":"public","type":"ThreeColumnsStartExpandedEndHidden","description":"Desktop: 67/33/0 Start (expanded) and Mid columns are displayed, End is accessible by layout arrows Tablet: 67/33/0 Start (expanded) and Mid columns are displayed, End is accessible by layout arrows Phone: -/-/100 only the End column is displayed\n\nUse to display the master and detail pages when the user should focus on the master. The detail-detail is still loaded and easily accessible with layout arrows."},{"name":"TwoColumnsMidExpanded","visibility":"public","type":"TwoColumnsMidExpanded","description":"Desktop: 33/67/- Start and Mid (expanded) columns are displayed Tablet: 33/67/- Start and Mid (expanded) columns are displayed Phone: -/100/- only the Mid column is displayed\n\nUse to display both a master and a detail page when the user should focus on the detail page."},{"name":"TwoColumnsStartExpanded","visibility":"public","type":"TwoColumnsStartExpanded","description":"Desktop: 67/33/- Start (expanded) and Mid columns are displayed Tablet: 67/33/- Start (expanded) and Mid columns are displayed Phone: -/100/- only the Mid column is displayed\n\nUse to display both a master and a detail page when the user should focus on the master page."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.types.PageBackgroundDesign","basename":"PageBackgroundDesign","resource":"types/PageBackgroundDesign.js","module":"types/PageBackgroundDesign","static":true,"visibility":"public","constructor":{"visibility":"public"},"properties":[{"name":"List","visibility":"public","type":"List","description":"Page background color when a List is set as the Page content."},{"name":"Solid","visibility":"public","type":"Solid","description":"A solid background color dependent on the theme."},{"name":"Standard","visibility":"public","type":"Standard","description":"Standard Page background color."},{"name":"Transparent","visibility":"public","type":"Transparent","description":"Transparent background for the page."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.types.TimelineLayout","basename":"TimelineLayout","resource":"types/TimelineLayout.js","module":"types/TimelineLayout","static":true,"visibility":"public","description":"Different types of Timeline.","constructor":{"visibility":"public"},"properties":[{"name":"Horizontal","visibility":"public","type":"Horizontal","description":"Horizontal layout"},{"name":"Vertical","visibility":"public","type":"Vertical","description":"Vertical layout Default type"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.types.UploadState","basename":"UploadState","resource":"types/UploadState.js","module":"types/UploadState","static":true,"visibility":"public","constructor":{"visibility":"public"},"properties":[{"name":"Complete","visibility":"public","type":"Complete","description":"The file has been uploaded successfully."},{"name":"Error","visibility":"public","type":"Error","description":"The file cannot be uploaded due to an error."},{"name":"Ready","visibility":"public","type":"Ready","description":"The file is awaiting an explicit command to start being uploaded."},{"name":"Uploading","visibility":"public","type":"Uploading","description":"The file is currently being uploaded."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.UploadCollection","basename":"UploadCollection","tagname":"ui5-upload-collection","appenddocs":"UploadCollectionItem","resource":"UploadCollection.js","module":"UploadCollection","visibility":"public","since":"1.0.0-rc.7","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> This component allows you to represent files before uploading them to a server, with the help of <code>ui5-upload-collection-item</code>. It also allows you to show already uploaded files.\n\n<h3>ES6 Module Import</h3> <code>import @ui5/webcomponents-fiori/dist/UploadCollection.js\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";</code> (for <code>ui5-upload-collection-item</code>)","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.16","type":"string","description":"Sets the accessible aria name of the component.","defaultValue":"\"\""},{"name":"mode","visibility":"public","type":"ListMode","description":"Defines the mode of the <code>ui5-upload-collection</code>. <br><br> <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>MultiSelect</code>, and <code>Delete</code>.","defaultValue":"\"None\""},{"name":"noDataDescription","visibility":"public","type":"string","description":"Allows you to set your own text for the 'No data' description.","defaultValue":"\"\""},{"name":"noDataText","visibility":"public","type":"string","description":"Allows you to set your own text for the 'No data' text.","defaultValue":"\"\""},{"name":"noDnd","visibility":"public","type":"boolean","description":"By default there will be drag and drop overlay shown over the <code>ui5-upload-collection</code> when files are dragged. If you don't intend to use drag and drop, set this property to <code>true</code> <br><br> <b>Note:</b> It is up to the application developer to add handler for <code>drop</code> event and handle it. <code>ui5-upload-collection</code> only shows an overlay.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-upload-collection</code>. <br><b>Note:</b> Use <code>ui5-upload-collection-item</code> for the intended design."},{"name":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-upload-collection</code> header. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the labelling of the <code>UploadCollection</code> is a responsibility of the application developer. <code>accessibleName</code> should be used."}],"events":[{"name":"drop","visibility":"public","parameters":[{"name":"dataTransfer","type":"DataTransfer","description":"The <code>drop</code> event operation data."}],"description":"Fired when an element is dropped inside the drag and drop overlay. <br><br> <b>Note:</b> The <code>drop</code> event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the <code>ui5-upload-collection</code>."},{"name":"file-deleted","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"The <code>ui5-upload-collection-item</code> which was renamed."}],"description":"Fired when the Delete button of any item is pressed. <br><br> <b>Note:</b> A Delete button is displayed on each item, when the <code>ui5-upload-collection</code> <code>mode</code> property is set to <code>Delete</code>."},{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedItems","type":"Array","description":"An array of the selected items."}],"description":"Fired when selection is changed by user interaction in <code>SingleSelect</code> and <code>MultiSelect</code> modes."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.UploadCollectionItem","basename":"UploadCollectionItem","tagname":"ui5-upload-collection-item","resource":"UploadCollectionItem.js","module":"UploadCollectionItem","visibility":"public","since":"1.0.0-rc.7","extends":"ListItem","description":"<h3 class=\"comment-api-title\">Overview</h3> A component to be used within the <code>ui5-upload-collection</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"file","visibility":"public","type":"File","description":"Holds <code>File</code>, associated with this item.","defaultValue":"null"},{"name":"fileName","visibility":"public","type":"string","description":"The name of the file.","defaultValue":"\"\""},{"name":"fileNameClickable","visibility":"public","type":"boolean","description":"If set to <code>true</code> the file name will be clickable and it will fire <code>file-name-click</code> event upon click.","defaultValue":"false"},{"name":"noDelete","visibility":"public","type":"boolean","description":"Removes delete option from <code>ui5-upload-collection</code> with <code>mode</code> <code>Delete</code> for this item.","defaultValue":"false"},{"name":"noRetry","visibility":"public","type":"boolean","description":"Hides the retry button when <code>uploadState</code> property is <code>Error</code>.","defaultValue":"false"},{"name":"noTerminate","visibility":"public","type":"boolean","description":"Hides the terminate button when <code>uploadState</code> property is <code>Uploading</code>.","defaultValue":"false"},{"name":"progress","visibility":"public","type":"Integer","description":"The upload progress in percentage. <br><br> <b>Note:</b> Expected values are in the interval [0, 100].","defaultValue":"0"},{"name":"uploadState","visibility":"public","type":"UploadState","description":"If set to <code>Uploading</code> or <code>Error</code>, a progress indicator showing the <code>progress</code> is displayed. Also if set to <code>Error</code>, a refresh button is shown. When this icon is pressed <code>retry</code> event is fired. If set to <code>Uploading</code>, a terminate button is shown. When this icon is pressed <code>terminate</code> event is fired.","defaultValue":"\"Ready\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Hold the description of the <code>ui5-upload-collection-item</code>. Will be shown below the file name."},{"name":"thumbnail","visibility":"public","type":"HTMLElement","description":"A thumbnail, which will be shown in the beginning of the <code>ui5-upload-collection-item</code>. <br><br> <b>Note:</b> Use <code>ui5-icon</code> or <code>img</code> for the intended design."}],"events":[{"name":"file-name-click","visibility":"public","description":"Fired when the file name is clicked. <br><br> <b>Note:</b> This event is only available when <code>fileNameClickable</code> property is <code>true</code>."},{"name":"rename","visibility":"public","description":"Fired when the <code>fileName</code> property gets changed. <br><br> <b>Note:</b> An edit button is displayed on each item, when the <code>ui5-upload-collection-item</code> <code>type</code> property is set to <code>Detail</code>."},{"name":"retry","visibility":"public","description":"Fired when the retry button is pressed. <br><br> <b>Note:</b> Retry button is displayed when <code>uploadState</code> property is set to <code>Error</code>."},{"name":"terminate","visibility":"public","description":"Fired when the terminate button is pressed. <br><br> <b>Note:</b> Terminate button is displayed when <code>uploadState</code> property is set to <code>Uploading</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ViewSettingsDialog","basename":"ViewSettingsDialog","tagname":"ui5-view-settings-dialog","resource":"ViewSettingsDialog.js","module":"ViewSettingsDialog","visibility":"public","since":"1.0.0-rc.16","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-view-settings-dialog</code> component helps the user to sort data within a list or a table. It consists of several lists like <code>Sort order</code> which is built-in and <code>Sort By</code> and <code>Filter By</code> lists, for which you must be provide items(<code>ui5-sort-item</code> & <code>ui5-filter-item</code> respectively) These options can be used to create sorters for a table.\n\nThe <code>ui5-view-settings-dialog</code> interrupts the current application processing as it is the only focused UI element and the main screen is dimmed/blocked. The <code>ui5-view-settings-dialog</code> is modal, which means that user action is required before returning to the parent window is possible.\n\n<h3>Structure</h3> A <code>ui5-view-settings-dialog</code> consists of a header, content, and a footer for action buttons. The <code>ui5-view-settings-dialog</code> is usually displayed at the center of the screen.\n\n<h3>Responsive Behavior</h3> <code>ui5-view-settings-dialog</code> stretches on full screen on phones.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ViewSettingsDialog\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"sortDescending","visibility":"public","type":"boolean","description":"Defines the initial sort order.","defaultValue":"false"}],"slots":[{"name":"filterItems","visibility":"public","type":"sap.ui.webcomponents.fiori.FilterItem[]","description":"Defines the <code>filterItems</code> list. <b>Note:</b> If you want to use this slot, you need to import used item: <code>import \"@ui5/webcomponents-fiori/dist/FilterItem\";</code>"},{"name":"sortItems","visibility":"public","type":"sap.ui.webcomponents.fiori.SortItem[]","description":"Defines the <code>sortItems</code> list. <b>Note:</b> If you want to use this slot, you need to import used item: <code>import \"@ui5/webcomponents-fiori/dist/SortItem\";</code>"}],"events":[{"name":"cancel","visibility":"public","parameters":[{"name":"sortOrder","type":"String","description":"The current sort order selected."},{"name":"sortBy","type":"String","description":"The current sort by selected."}],"description":"Fired when cancel button is activated."},{"name":"confirm","visibility":"public","parameters":[{"name":"sortOrder","type":"String","description":"The current sort order selected."},{"name":"sortBy","type":"String","description":"The current sort by selected."}],"description":"Fired when confirmation button is activated."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.Wizard","basename":"Wizard","tagname":"ui5-wizard","appenddocs":"WizardStep","resource":"Wizard.js","module":"Wizard","visibility":"public","since":"1.0.0-rc.10","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-wizard</code> helps users complete a complex task by dividing it into sections and guiding the user through it. It has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n<h3>Structure</h3> <h4>Navigation area</h4> The top most area of the <code>ui5-wizard</code> is occupied by the navigation area. It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps. <ul> <li> Steps can have different visual representations - numbers or icons. <li> Steps might have labels for better readability - heading and subheding.</li> <li> Steps are defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code></li> </ul>\n\n<b>Note:</b> If no selected step is defined, the first step will be auto selected. <br> <b>Note:</b> If multiple selected steps are defined, the last step will be selected.\n\n<h4>Content</h4> The content occupies the main part of the page. It can hold any type of HTML elements. It's defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.\n\n<h3>Scrolling</h3> The component handles user scrolling by selecting the closest step, based on the current scroll position and scrolls to particular place, when the user clicks on the step within the navigation area. <br><br>\n\n<b>Important:</b> In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height. The component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page. <br><br> <b>For example:</b> <br><br> <code>&lt;ui5-dialog style=\"height: 80%\"&gt;<br></code> <code>&#9;&lt;ui5-wizard&gt;&lt;/ui5-wizard&gt;<br></code> <code>&lt;/ui5-dialog&gt;</code>\n\n<h4>Moving to next step</h4> The <code>ui5-wizard-step</code> provides the necessary API and it's up to the user of the component to use it to move to the next step. You have to set its <code>selected</code> property (and remove the <code>disabled</code> one if set) to <code>true</code>. And, the <code>ui5-wizard</code> will automatically scroll to the content of the newly selected step. <br><br>\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area. You can place a button, or any other type of element to trigger step change, inside the <code>ui5-wizard-step</code>, and show/hide it when certain fields are filled or user defined criteria is met.\n\n<h3>Usage</h3> <h4>When to use:</h4> When the user has to accomplish a long set of tasks. <h4>When not to use:</h4> When the task has less than 3 steps.\n\n<h3>Responsive Behavior</h3> On small widths the step's heading, subheading and separators in the navigation area will start truncate and shrink and from particular point they will hide to free as much space as possible.\n\n<h3>ES6 Module Import</h3> <code>import @ui5/webcomponents-fiori/dist/Wizard.js\";</code> (includes <ui5-wizard-step>)","constructor":{"visibility":"public"},"properties":[],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the steps. <br><br> <b>Note:</b> Use the available <code>ui5-wizard-step</code> component."}],"events":[{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedStep","type":"HTMLElement","description":"the newly selected step"},{"name":"previouslySelectedStep","type":"HTMLElement","description":"the previously selected step"},{"name":"changeWithClick","type":"Boolean","description":"the selection changed due to user's click on step within the navigation"}],"description":"Fired when the step selection is changed by user interaction - either with scrolling, or by clicking on the steps within the component header."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.WizardStep","basename":"WizardStep","tagname":"ui5-wizard-step","resource":"WizardStep.js","module":"WizardStep","static":true,"visibility":"public","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nA component that represents a logical step as part of the <code>ui5-wizard</code>. It is meant to aggregate arbitrary HTML elements that forms the content of a single step.\n\n<h3>Structure</h3> <ul> <li>Each wizard step has arbitrary content</li> <li>Each wizard step might have texts - defined by the <code>heading</code> and <code>subheading</code> properties</li> <li>Each wizard step might have an icon - defined by the <code>icon</code> property</li> <li>Each wizard step might display a number in place of the <code>icon</code>, when it's missing</li> </ul>\n\n<h3>Usage</h3> The <code>ui5-wizard-step</code> component should be used only as slot of the <code>ui5-wizard</code> component and should not be used standalone.","constructor":{"visibility":"public"},"properties":[{"name":"branching","visibility":"public","type":"boolean","description":"When <code>branching</code> is enabled a dashed line would be displayed after the step, meant to indicate that the next step is not yet known and depends on user choice in the current step. <br><br>\n\n<b>Note:</b> It is recommended to use <code>branching</code> on the last known step and later add new steps when it becomes clear how the wizard flow should continue.","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines if the step is <code>disabled</code>. When disabled the step is displayed, but the user can't select the step by clicking or navigate to it with scrolling. <br><br>\n\n<b>Note:</b> Step can't be <code>selected</code> and <code>disabled</code> at the same time. In this case the <code>selected</code> property would take precedence.","defaultValue":"false"},{"name":"heading","visibility":"public","type":"String","description":"Defines the <code>heading</code> of the step. <br><br>\n\n<b>Note:</b> the text is displayed in the <code>ui5-wizard</code> navigation header. <br> <b>Note:</b> the text will hide on small sizes (about 559 px).","defaultValue":"\"\""},{"name":"icon","visibility":"public","type":"String","description":"Defines the <code>icon</code> of the step. <br><br>\n\n<b>Note:</b> the icon is displayed in the <code>ui5-wizard</code> navigation header. <br><br>\n\nThe 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>.","defaultValue":"\"\""},{"name":"selected","visibility":"public","type":"boolean","description":"Defines the step's <code>selected</code> state - the step that is currently active. <br><br>\n\n<b>Note:</b> Step can't be <code>selected</code> and <code>disabled</code> at the same time. In this case the <code>selected</code> property would take precedence.","defaultValue":"false"},{"name":"subheading","visibility":"public","type":"String","description":"Defines the <code>subheading</code> of the step. <br><br>\n\n<b>Note:</b> the text is displayed in the <code>ui5-wizard</code> navigation header. <br> <b>Note:</b> the text will hide on small sizes (about 559 px).","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the step content."}]},{"kind":"class","name":"sap.ui.webcomponents.main.types.BarDesign","basename":"BarDesign","resource":"types/BarDesign.js","module":"types/BarDesign","static":true,"visibility":"public","description":"Different types of Bar.","constructor":{"visibility":"public"},"properties":[{"name":"FloatingFooter","visibility":"public","type":"FloatingFooter","description":"Floating Footer type - there is visible border on all sides"},{"name":"Footer","visibility":"public","type":"Footer","description":"Footer type"},{"name":"Header","visibility":"public","type":"Header","description":"Default type"},{"name":"Subheader","visibility":"public","type":"Subheader","description":"Subheader type"}],"slots":[]}]}
+{"$schema-ref":"http://schemas.sap.com/sapui5/designtime/api.json/1.0","version":"1.62","symbols":[{"kind":"class","name":"sap.ui.webcomponents.fiori.Bar","basename":"Bar","tagname":"ui5-bar","resource":"Bar.js","module":"Bar","static":true,"visibility":"public","since":"1.0.0-rc.11","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The Bar component consists of three areas to hold its content. It has the capability to center content, such as a title, while having other components on the left and right side.\n\n<h3>Usage</h3> With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\nNote: Do not place a Bar inside another Bar or inside any bar-like component. Doing so causes unpredictable behavior.\n\nFor the <code>ui5-bar</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/Bar.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"BarDesign","description":"Defines the <code>ui5-bar</code> design. <br><br> <b>Note:</b> Available options are \"Header\", \"Subheader\", \"Footer\", \"FloatingFooter\".","defaultValue":"\"Header\""}],"slots":[{"name":"endContent","visibility":"public","type":"HTMLElement[]"},{"name":"middleContent","visibility":"public","type":"HTMLElement[]"},{"name":"startContent","visibility":"public","type":"HTMLElement[]"}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.FilterItem","basename":"FilterItem","tagname":"ui5-filter-item","resource":"FilterItem.js","module":"FilterItem","static":true,"visibility":"public","since":"1.0.0-rc.16","extends":"ListItem","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>ui5-filter-item</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/FilterItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"text","visibility":"public","type":"String","description":"Defines the text of the component.","defaultValue":"\"\""}],"slots":[{"name":"values","visibility":"public","type":"ui5-filter-item-option","description":"Defines the <code>values</code> list."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.FilterItemOption","basename":"FilterItemOption","tagname":"ui5-filter-item-option","resource":"FilterItemOption.js","module":"FilterItemOption","static":true,"visibility":"public","since":"1.0.0-rc.16","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>ui5-filter-item-option</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/FilterItemOption.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"selected","visibility":"public","type":"Boolean","description":"Defines whether the option is selected","defaultValue":"false"},{"name":"text","visibility":"public","type":"String","description":"Defines the text of the component.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.FlexibleColumnLayout","basename":"FlexibleColumnLayout","tagname":"ui5-flexible-column-layout","resource":"FlexibleColumnLayout.js","module":"FlexibleColumnLayout","visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>FlexibleColumnLayout</code> implements the master-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.\n\n<h3>Usage</h3>\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.). The Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n<h3>Responsive Behavior</h3>\n\nThe <code>FlexibleColumnLayout</code> automatically displays the maximum possible number of columns based on <code>layout</code> property and the window size. The component would display 1 column for window size smaller than 900px, up to two columns between 900px and 1280px, and 3 columns for sizes bigger than 1280px.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"_layoutsConfiguration","visibility":"restricted","type":"Object","description":"Allows the user to replace the whole layouts configuration"},{"name":"accessibilityTexts","visibility":"public","since":"1.0.0-rc.11","type":"object","description":"On object of strings that defines several additional accessibility texts for even further customization.\n\nIt supports the following fields: - <code>startColumnAccessibleName</code>: the accessibility name for the <code>startColumn</code> region - <code>midColumnAccessibleName</code>: the accessibility name for the <code>midColumn</code> region - <code>endColumnAccessibleName</code>: the accessibility name for the <code>endColumn</code> region - <code>startArrowLeftText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the left - <code>startArrowRightText</code>: the text that the first arrow (between the <code>begin</code> and <code>mid</code> columns) will have when pointing to the right - <code>endArrowLeftText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the left - <code>endArrowRightText</code>: the text that the second arrow (between the <code>mid</code> and <code>end</code> columns) will have when pointing to the right"},{"name":"columnLayout","readonly":"true","visibility":"public","type":"Array","description":"Returns the current column layout, based on both the <code>layout</code> property and the screen size. <br><br> <b>For example:</b> [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc, where the numbers represents the width of the start, middle and end columns.","defaultValue":"[\"100%\", 0, 0]"},{"name":"endColumnVisible","readonly":"true","visibility":"public","type":"boolean","description":"Returns if the <code>end</code> column is visible.","defaultValue":"false"},{"name":"layout","visibility":"public","type":"FCLLayout","description":"Defines the columns layout and their proportion. <br><br> <b>Note:</b> The layout also depends on the screen size - one column for screens smaller than 900px, two columns between 900px and 1280px and three columns for sizes bigger than 1280px. <br><br> Available options are: <ul> <li><code>OneColumn</code></li> <li><code>TwoColumnsStartExpanded</code></li> <li><code>TwoColumnsMidExpanded</code></li> <li><code>ThreeColumnsMidExpanded</code></li> <li><code>ThreeColumnsEndExpanded</code></li> <li><code>ThreeColumnsStartExpandedEndHidden</code></li> <li><code>ThreeColumnsMidExpandedEndHidden</code></li> <li><code>MidColumnFullScreen</code></li> <li><code>EndColumnFullScreen</code></li> </ul> <br><br> <b>For example:</b> layout=<code>TwoColumnsStartExpanded</code> means the layout will display up to two columns in 67%/33% proportion.","defaultValue":"\"OneColumn\""},{"name":"midColumnVisible","readonly":"true","visibility":"public","type":"boolean","description":"Returns if the <code>middle</code> column is visible.","defaultValue":"false"},{"name":"noArrows","visibility":"public","type":"boolean","description":"Defines the visibility of the arrows, used for expanding and shrinking the columns.","defaultValue":"false"},{"name":"startColumnVisible","readonly":"true","visibility":"public","type":"boolean","description":"Returns if the <code>start</code> column is visible.","defaultValue":"true"},{"name":"visibleColumns","readonly":"true","visibility":"public","type":"Integer","description":"Returns the number of currently visible columns.","defaultValue":"1"}],"slots":[{"name":"endColumn","visibility":"public","type":"HTMLElement","description":"Defines the content in the end column."},{"name":"midColumn","visibility":"public","type":"HTMLElement","description":"Defines the content in the middle column."},{"name":"startColumn","visibility":"public","type":"HTMLElement","description":"Defines the content in the start column."}],"events":[{"name":"layout-change","visibility":"public","parameters":[{"name":"layout","type":"FCLLayout","description":"the current layout"},{"name":"columnLayout","type":"Array","description":"the effective column layout, f.e [67%, 33%, 0]"},{"name":"startColumnVisible","type":"boolean","description":"indicates if the start column is currently visible"},{"name":"midColumnVisible","type":"boolean","description":"indicates if the middle column is currently visible"},{"name":"endColumnVisible","type":"boolean","description":"indicates if the end column is currently visible"},{"name":"arrowsUsed","type":"boolean","description":"indicates if the layout is changed via the arrows"},{"name":"resize","type":"boolean","description":"indicates if the layout is changed via resizing"}],"description":"Fired when the layout changes via user interaction by clicking the arrows or by changing the component size due to resizing."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.NotificationAction","basename":"NotificationAction","tagname":"ui5-notification-action","resource":"NotificationAction.js","module":"NotificationAction","static":true,"visibility":"public","extends":"UI5Element","description":"The <code>ui5-notification-action</code> represents an abstract action, used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"ButtonDesign","description":"Defines the action design. <br><br> <b>Note:</b> Available options are \"Default\", \"Emphasized\", \"Positive\", \"Negative\", and \"Transparent\".","defaultValue":"\"Transparent\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines if the action is disabled. <br><br> <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous buil-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>.","defaultValue":"\"\""},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-notification-action</code>.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.NotificationListGroupItem","basename":"NotificationListGroupItem","tagname":"ui5-li-notification-group","appenddocs":"NotificationAction","resource":"NotificationListGroupItem.js","module":"NotificationListGroupItem","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"NotificationListItemBase","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-li-notification-group</code> is a special type of list item, that unlike others can group items within self, usually <code>ui5-li-notification</code> items. <br>\n\nThe component consists of: <ul> <li><code>Toggle</code> button to expand and collapse the group</li> <li><code>Priority</code> icon to display the priority of the group</li> <li><code>Heading</code> to entitle the group</li> <li>Custom actions - with the use of <code>ui5-notification-action</code></li> <li>Items of the group</li> </ul>\n\n<h3>Usage</h3> The component can be used in a standard <code>ui5-list</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/NotificationListGroupItem.js\";</code> <br> <code>import @ui5/webcomponents/dist/NotificationAction.js\";</code> (optional)","constructor":{"visibility":"public"},"properties":[{"name":"collapsed","visibility":"public","type":"boolean","description":"Defines if the group is collapsed or expanded.","defaultValue":"false"},{"name":"showCounter","visibility":"public","type":"boolean","description":"Defines if the items <code>counter</code> would be displayed.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-li-notification-group</code>, usually <code>ui5-li-notification</code> items."}],"events":[{"name":"toggle","visibility":"public","description":"Fired when the <code>ui5-li-notification-group</code> is expanded/collapsed by user interaction."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.NotificationListItem","basename":"NotificationListItem","tagname":"ui5-li-notification","appenddocs":"NotificationAction","resource":"NotificationListItem.js","module":"NotificationListItem","visibility":"public","since":"1.0.0-rc.8","extends":"NotificationListItemBase","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-li-notification</code> is a type of list item, meant to display notifications. <br>\n\nThe component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>heading</code>, descriptive <code>content</code> and <code>footnotes</code> to fully describe a notification. <br>\n\nThe user can: <ul> <li>display a <code>Close</code> button</li> <li>can control whether the <code>heading</code> and <code>description</code> should wrap or truncate and display a <code>ShowMore</code> button to switch between less and more information</li> <li>add custom actions by using the <code>ui5-notification-action</code> component</li> </ul>\n\n<h3>Usage</h3> The component can be used in a standard <code>ui5-list</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/NotificationListItem.js\";</code> <br> <code>import @ui5/webcomponents/dist/NotificationAction.js\";</code> (optional)","constructor":{"visibility":"public"},"properties":[{"name":"wrap","visibility":"public","type":"boolean","description":"Defines if the <code>heading</code> and <code>description</code> should wrap, they truncate by default.\n\n<br><br> <b>Note:</b> by default the <code>heading</code> and <code>decription</code>, and a <code>ShowMore/Less</code> button would be displayed.","defaultValue":"false"}],"slots":[{"name":"avatar","visibility":"public","type":"HTMLElement","description":"Defines the avatar, displayed in the <code>ui5-li-notification</code>.\n\n<br><br> <b>Note:</b> Consider using the <code>ui5-avatar</code> to display icons, initials or images. <br> <b>Note:</b>In order to be complaint with the UX guidlines and for best experience, we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the <code>ui5-avatar</code> you can set its <code>size</code><code> property to <code>XS</code> to get the required size - <code><ui5-avatar size=\"XS\"></code>."},{"name":"default","visibility":"public","type":"Node[]","description":"Defines the content of the <code>ui5-li-notification</code>, usually a description of the notification.\n\n<br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."},{"name":"footnotes","visibility":"public","type":"HTMLElement[]","description":"Defines the elements, dipalyed in the footer of the of the <code>ui5-li-notification</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.NotificationListItemBase","basename":"NotificationListItemBase","tagname":"ui5-li-notification-group","appenddocs":"NotificationAction","resource":"NotificationListItemBase.js","module":"NotificationListItemBase","abstract":true,"visibility":"public","since":"1.0.0-rc.8","extends":"ListItemBase","description":"The base class of the <code>NotificationListItem</code> and <code>NotificationListGroupItem</code>.","constructor":{"visibility":"public"},"properties":[{"name":"busy","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines if a busy indicator would be displayed over the item.","defaultValue":"false"},{"name":"heading","visibility":"public","type":"string","description":"Defines the <code>heading</code> of the item.","defaultValue":"\"\""},{"name":"priority","visibility":"public","type":"Priority","description":"Defines the <code>priority</code> of the item.","defaultValue":"\"None\""},{"name":"read","visibility":"public","type":"boolean","description":"Defines if the <code>notification</code> is new or has been already read. <br><br> <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font, if set to true - it has a normal font.","defaultValue":"false"},{"name":"showClose","visibility":"public","type":"boolean","description":"Defines if the <code>close</code> button would be displayed.","defaultValue":"false"}],"slots":[{"name":"actions","visibility":"public","type":"HTMLElement","description":"Defines the actions, displayed in the top-right area. <br><br> <b>Note:</b> use the <code>ui5-notification-action</code> component."}],"events":[{"name":"close","visibility":"public","description":"Fired when the <code>Close</code> button is pressed."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.Page","basename":"Page","tagname":"ui5-page","resource":"Page.js","module":"Page","visibility":"public","since":"1.0.0-rc.12","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-page</code> is a container control 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> The top most area of the page is occupied by the header. The standard header includes a navigation button and a title. <h4>Content</h4> The content occupies the main part of the page. Only the content area is scrollable by default. This can be prevented by setting <code>enableScrolling</code> to <code>false</code>. <h4>Footer</h4> The footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content. This is enabled with the <code>floatingFooter</code> property.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/Page.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"backgroundDesign","visibility":"public","type":"PageBackgroundDesign","description":"Defines the background color of the <code>ui5-page</code>. <br><br> <b>Note:</b> When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast. <br><br> Available options are: <ul> <li><code>List</code></li> <li><code>Solid</code></li> <li><code>Standard</code></li> (default) <li><code>Transparent</code></li> <ul>","defaultValue":"\"Standard\""},{"name":"disableScrolling","visibility":"public","type":"Boolean","description":"Disables vertical scrolling of page content. If set to true, there will be no vertical scrolling at all.","defaultValue":"false"},{"name":"floatingFooter","visibility":"public","type":"Boolean","description":"Defines if the footer should float over the content. <br><br> <b>Note:</b> When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.","defaultValue":"true"},{"name":"hideFooter","visibility":"public","type":"Boolean","description":"Defines the footer visibility.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the content HTML Element."},{"name":"footer","visibility":"public","type":"HTMLElement[]","description":"Defines the footer HTML Element."},{"name":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the header HTML Element."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ProductSwitch","basename":"ProductSwitch","tagname":"ui5-product-switch","appenddocs":"ProductSwitchItem","resource":"ProductSwitch.js","module":"ProductSwitch","visibility":"public","since":"1.0.0-rc.5","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-product-switch</code> is an SAP Fiori specific web component that is used in <code>ui5-shellbar</code> and allows the user to easily switch between products. <br><br> <h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code> (for <code>ui5-product-switch-item</code>)","constructor":{"visibility":"public"},"properties":[],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-product-switch</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ProductSwitchItem","basename":"ProductSwitchItem","tagname":"ui5-product-switch-item","resource":"ProductSwitchItem.js","module":"ProductSwitchItem","visibility":"public","since":"1.0.0-rc.5","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-product-switch-item</code> web component represents the items displayed in the <code>ui5-product-switch</code> web component. <br><br> <b>Note:</b> <code>ui5-product-switch-item</code> is not supported when used outside of <code>ui5-product-switch</code>. <br><br> <h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"heading","visibility":"public","type":"string","description":"Defines the title of the <code>ui5-product-switch-item</code>.","defaultValue":"\"\""},{"name":"icon","visibility":"public","type":"string","description":"Defines the icon to be displayed as a graphical element within the <code>ui5-product-switch-item</code>. <br><br> Example: <br> <pre>ui5-product-switch-item icon=\"palette\"</pre>\n\nSee 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>.","defaultValue":"\"\""},{"name":"subtitle","visibility":"public","type":"string","description":"Defines the subtitle of the <code>ui5-product-switch-item</code>.","defaultValue":"\"\""},{"name":"target","visibility":"public","type":"string","description":"Defines a target where the <code>targetSrc</code> content must be open. <br><br> Available options are: <ul> <li><code>_self</code></li> <li><code>_top</code></li> <li><code>_blank</code></li> <li><code>_parent</code></li> <li><code>_search</code></li> </ul>","defaultValue":"\"_self\""},{"name":"targetSrc","visibility":"public","type":"string","description":"Defines the <code>ui5-product-switch-item</code> target URI. Supports standard hyperlink behavior.","defaultValue":"\"\""}],"slots":[],"events":[{"name":"click","visibility":"public","description":"Fired when the <code>ui5-product-switch-item</code> is activated either with a click/tap or by using the Enter or Space key."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ShellBar","basename":"ShellBar","tagname":"ui5-shellbar","appenddocs":"ShellBarItem","resource":"ShellBar.js","module":"ShellBar","visibility":"public","since":"0.8.0","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-shellbar</code> is meant to serve as an application header and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on. <br><br>\n\n<h3>Stable DOM Refs</h3>\n\nYou can use the following stable DOM refs for the <code>ui5-shellbar</code>: <ul> <li>logo</li> <li>copilot</li> <li>notifications</li> <li>overflow</li> <li>profile</li> <li>product-switch</li> </ul>\n\nIn the context of <code>ui5-shellbar</code>, you can provide a custom stable DOM refs for: <ul> <li>Every <code>ui5-shellbar-item</code> that you provide. Example: <code><ui5-shellbar-item stable-dom-ref=\"messages\"></ui5-shellbar-item></code></li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ShellBar\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"accessibilityTexts","visibility":"public","since":"1.1.0","type":"object","description":"An object of strings that defines several additional accessibility texts for even further customization.\n\nIt supports the following fields: - <code>profileButtonTitle</code>: defines the tooltip for the profile button"},{"name":"notificationCount","visibility":"public","type":"string","description":"Defines the <code>notificationCount</code>, displayed in the notification icon top-right corner.","defaultValue":"\"\""},{"name":"primaryTitle","visibility":"public","type":"string","description":"Defines the <code>primaryTitle</code>. <br><br> <b>Note:</b> The <code>primaryTitle</code> would be hidden on S screen size (less than approx. 700px).","defaultValue":"\"\""},{"name":"secondaryTitle","visibility":"public","type":"string","description":"Defines the <code>secondaryTitle</code>. <br><br> <b>Note:</b> The <code>secondaryTitle</code> would be hidden on S and M screen sizes (less than approx. 1300px).","defaultValue":"\"\""},{"name":"showCoPilot","visibility":"public","type":"boolean","description":"Defines, if the product CoPilot icon would be displayed. <br><b>Note:</b> By default the co-pilot is displayed as static SVG. If you need an animated co-pilot, you can import the <code>\"@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js\"</code> module as add-on feature.","defaultValue":"false"},{"name":"showNotifications","visibility":"public","type":"boolean","description":"Defines, if the notification icon would be displayed.","defaultValue":"false"},{"name":"showProductSwitch","visibility":"public","type":"boolean","description":"Defines, if the product switch icon would be displayed.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-shellbar</code> aditional items. <br><br> <b>Note:</b> You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>."},{"name":"logo","visibility":"public","since":"1.0.0-rc.8","type":"HTMLElement","description":"Defines the logo of the <code>ui5-shellbar</code>. For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo."},{"name":"menuItems","visibility":"public","since":"0.10","type":"HTMLElement[]","description":"Defines the items displayed in menu after a click on the primary title. <br><br> <b>Note:</b> You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors."},{"name":"profile","visibility":"public","since":"1.0.0-rc.6","type":"HTMLElement","description":"You can pass <code>ui5-avatar</code> to set the profile image/icon. If no profile slot is set - profile will be excluded from actions.\n\nNote: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because it should have specific size by design in the context of <code>ui5-shellbar</code> profile."},{"name":"searchField","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-input</code>, that will be used as a search field."},{"name":"startButton","visibility":"public","type":"HTMLElement[]","description":"Defines a <code>ui5-button</code> in the bar that will be placed in the beginning. We encourage this slot to be used for a back or home button. It gets overstyled to match ShellBar's styling."}],"events":[{"name":"co-pilot-click","visibility":"public","since":"0.10","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the co pilot is activated."},{"name":"logo-click","visibility":"public","since":"0.10","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the logo is activated."},{"name":"menu-item-click","visibility":"public","since":"0.10","parameters":[{"name":"item","type":"HTMLElement","description":"dom ref of the activated list item"}],"description":"Fired, when a menu item is activated <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>."},{"name":"notifications-click","visibility":"public","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the notification icon is activated."},{"name":"product-switch-click","visibility":"public","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the product switch icon is activated. <b>Note:</b> You can prevent closing of oveflow popover by calling <code>event.preventDefault()</code>."},{"name":"profile-click","visibility":"public","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the activated element"}],"description":"Fired, when the profile slot is present."}],"methods":[{"name":"closeOverflow","visibility":"public","description":"Closes the overflow area. Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event"}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ShellBarItem","basename":"ShellBarItem","tagname":"ui5-shellbar-item","resource":"ShellBarItem.js","module":"ShellBarItem","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"The <code>ui5-shellbar-item</code> represents a custom item, that might be added to the <code>ui5-shellbar</code>. <br><br> <h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ShellBarItem\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"count","visibility":"public","since":"1.0.0-rc.6","type":"string","description":"Defines the count displayed in the top-right corner.","defaultValue":"\"\""},{"name":"icon","visibility":"public","type":"string","description":"Defines the name of the item's icon.","defaultValue":"\"\""},{"name":"stableDomRef","visibility":"public","since":"1.0.0-rc.8","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."},{"name":"text","visibility":"public","type":"string","description":"Defines the item text.","defaultValue":"\"\""}],"slots":[],"events":[{"name":"item-click","visibility":"public","parameters":[{"name":"targetRef","type":"HTMLElement","description":"dom ref of the clicked element"}],"description":"Fired, when the item is pressed."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.SideNavigation","basename":"SideNavigation","tagname":"ui5-side-navigation","appenddocs":"SideNavigationItem SideNavigationSubItem","resource":"SideNavigation.js","module":"SideNavigation","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>SideNavigation</code> is used as a standard menu in applications. It consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned). <ul> <li>The header is meant for displaying user related information - profile data, avatar, etc.</li> <li>The main navigation section is related to the user’s current work context</li> <li>The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on). </li> </ul>\n\n<h3>Usage</h3>\n\nUse the available <code>ui5-side-navigation-item</code> and <code>ui5-side-navigation-sub-item</code> components to build your menu. The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level. You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/SideNavigation.js\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";</code> (for <code>ui5-side-navigation-item</code>) <br> <code>import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";</code> (for <code>ui5-side-navigation-sub-item</code>)","constructor":{"visibility":"public"},"properties":[{"name":"collapsed","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"undefined","description":"Defines the main items of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component for the top-level items, and the <code>ui5-side-navigation-sub-item</code> component for second-level items, nested inside the items."},{"name":"fixedItems","visibility":"public","type":"undefined","description":"Defines the fixed items at the bottom of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component for the fixed items, and optionally the <code>ui5-side-navigation-sub-item</code> component to provide second-level items inside them.\n\n<b>Note:</b> In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)"},{"name":"header","visibility":"public","since":"1.0.0-rc.11","type":"undefined","description":"Defines the header of the <code>ui5-side-navigation</code>.\n\n<br><br> <b>Note:</b> The header is displayed when the component is expanded - the property <code>collapsed</code> is false;"}],"events":[{"name":"selection-change","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the clicked item."}],"description":"Fired when the selection has changed via user interaction"}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.SideNavigationItem","basename":"SideNavigationItem","tagname":"ui5-side-navigation-item","resource":"SideNavigationItem.js","module":"SideNavigationItem","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-side-navigation-item</code> is used within <code>ui5-side-navigation</code> only. Via the <code>ui5-side-navigation-item</code> you control the content of the <code>SideNavigation</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/SideNavigationItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"expanded","visibility":"public","type":"boolean","description":"Defines if the item is expanded","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the icon of the item. <br><br>\n\nThe 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>.","defaultValue":"\"\""},{"name":"selected","visibility":"public","type":"boolean","description":"Defines whether the subitem is selected","defaultValue":"false"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the item.","defaultValue":"\"\""},{"name":"wholeItemToggleable","visibility":"public","since":"1.0.0-rc.11","type":"boolean","description":"Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present). If set to true, pressing the whole item will toggle the sub items, and it won't fire the <code>click</code> event. By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"If you wish to nest menus, you can pass inner menu items to the default slot."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.SideNavigationSubItem","basename":"SideNavigationSubItem","tagname":"ui5-side-navigation-sub-item","resource":"SideNavigationSubItem.js","module":"SideNavigationSubItem","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-side-navigation-sub-item</code> is intended to be used inside a <code>ui5-side-navigation-item</code> only.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"icon","visibility":"public","type":"string","description":"Defines the icon of the item. <br><br>\n\nThe 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>.","defaultValue":"\"\""},{"name":"selected","visibility":"public","type":"boolean","description":"Defines whether the subitem is selected.","defaultValue":"false"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the item.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.SortItem","basename":"SortItem","tagname":"ui5-sort-item","resource":"SortItem.js","module":"SortItem","static":true,"visibility":"public","since":"1.0.0-rc.16","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>ui5-sort-item</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/SortItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"selected","visibility":"public","type":"Boolean","description":"Defines if the component is selected.","defaultValue":"false"},{"name":"text","visibility":"public","type":"String","description":"Defines the text of the component.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.Timeline","basename":"Timeline","tagname":"ui5-timeline","appenddocs":"TimelineItem","resource":"Timeline.js","module":"Timeline","visibility":"public","since":"0.8.0","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-timeline</code> component shows entries (such as objects, events, or posts) in chronological order. A common use case is to provide information about changes to an object, or events related to an object. These entries can be generated by the system (for example, value XY changed from A to B), or added manually. There are two distinct variants of the timeline: basic and social. The basic timeline is read-only, while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.","constructor":{"visibility":"public"},"properties":[{"name":"layout","visibility":"public","since":"1.0.0-rc.15","type":"TimelineLayout","description":"Defines the items orientation.\n\n<br><br> <b>Note:</b> Available options are: <ul> <li><code>Vertical</code></li> <li><code>Horizontal</code></li> </ul>","defaultValue":"\"Vertical\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Determines the content of the <code>ui5-timeline</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.TimelineItem","basename":"TimelineItem","tagname":"ui5-timeline-item","resource":"TimelineItem.js","module":"TimelineItem","visibility":"public","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nAn entry posted on the timeline.","constructor":{"visibility":"public"},"properties":[{"name":"icon","visibility":"public","type":"string","description":"Defines the icon to be displayed as graphical element within the <code>ui5-timeline-item</code>. SAP-icons font provides numerous options. <br><br>\n\nSee 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>.","defaultValue":"\"\""},{"name":"itemName","visibility":"public","type":"string","description":"Defines the name of the item.","defaultValue":"\"\""},{"name":"itemNameClickable","visibility":"public","type":"boolean","description":"Defines whether the <code>itemName</code> is clickable.","defaultValue":"false"},{"name":"subtitleText","visibility":"public","type":"string","description":"Defines the subtitle text of the component.","defaultValue":"\"\""},{"name":"titleText","visibility":"public","type":"string","description":"Defines the title text of the component.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Determines the description of the <code>ui5-timeline-item</code>."}],"events":[{"name":"item-name-click","visibility":"public","description":"Fired when the item name is pressed either with a click/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event will not be fired if the <code>item-name-clickable</code> attribute is not set."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.types.FCLLayout","basename":"FCLLayout","resource":"types/FCLLayout.js","module":"types/FCLLayout","static":true,"visibility":"public","constructor":{"visibility":"public"},"properties":[{"name":"EndColumnFullScreen","visibility":"public","type":"EndColumnFullScreen","description":"Desktop: -/-/100 only the End column is displayed Tablet: -/-/100 only the End column is displayed Phone: -/-/100 only the End column is displayed\n\nUse to display a detail-detail page only, when the user should focus entirely on it."},{"name":"MidColumnFullScreen","visibility":"public","type":"MidColumnFullScreen","description":"Desktop: -/100/- only the Mid column is displayed Tablet: -/100/- only the Mid column is displayed Phone: -/100/- only the Mid column is displayed\n\nUse to display a detail page only, when the user should focus entirely on it."},{"name":"OneColumn","visibility":"public","type":"OneColumn","description":"The layout will display 1 column."},{"name":"ThreeColumnsEndExpanded","visibility":"public","type":"ThreeColumnsEndExpanded","description":"Desktop: 25/25/50 Start, Mid and End (expanded) columns are displayed Tablet: 0/33/67 Mid and End (expanded) columns are displayed, Start is accessible by layout arrows Phone: -/-/100 (only the End column is displayed)\n\nUse to display all three pages (master, detail, detail-detail) when the user should focus on the detail-detail."},{"name":"ThreeColumnsMidExpanded","visibility":"public","type":"ThreeColumnsMidExpanded","description":"Desktop: 25/50/25 Start, Mid (expanded) and End columns are displayed Tablet: 0/67/33 Mid (expanded) and End columns are displayed, Start is accessible by a layout arrow Phone: -/-/100 only the End column is displayed\n\nUse to display all three pages (master, detail, detail-detail) when the user should focus on the detail."},{"name":"ThreeColumnsMidExpandedEndHidden","visibility":"public","type":"ThreeColumnsMidExpandedEndHidden","description":"Desktop: 33/67/0 Start and Mid (expanded) columns are displayed, End is accessible by a layout arrow Tablet: 33/67/0 Start and Mid (expanded) columns are displayed, End is accessible by a layout arrow Phone: -/-/100 only the End column is displayed\n\nUse to display the master and detail pages when the user should focus on the detail. The detail-detail is still loaded and easily accessible with a layout arrow."},{"name":"ThreeColumnsStartExpandedEndHidden","visibility":"public","type":"ThreeColumnsStartExpandedEndHidden","description":"Desktop: 67/33/0 Start (expanded) and Mid columns are displayed, End is accessible by layout arrows Tablet: 67/33/0 Start (expanded) and Mid columns are displayed, End is accessible by layout arrows Phone: -/-/100 only the End column is displayed\n\nUse to display the master and detail pages when the user should focus on the master. The detail-detail is still loaded and easily accessible with layout arrows."},{"name":"TwoColumnsMidExpanded","visibility":"public","type":"TwoColumnsMidExpanded","description":"Desktop: 33/67/- Start and Mid (expanded) columns are displayed Tablet: 33/67/- Start and Mid (expanded) columns are displayed Phone: -/100/- only the Mid column is displayed\n\nUse to display both a master and a detail page when the user should focus on the detail page."},{"name":"TwoColumnsStartExpanded","visibility":"public","type":"TwoColumnsStartExpanded","description":"Desktop: 67/33/- Start (expanded) and Mid columns are displayed Tablet: 67/33/- Start (expanded) and Mid columns are displayed Phone: -/100/- only the Mid column is displayed\n\nUse to display both a master and a detail page when the user should focus on the master page."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.types.PageBackgroundDesign","basename":"PageBackgroundDesign","resource":"types/PageBackgroundDesign.js","module":"types/PageBackgroundDesign","static":true,"visibility":"public","constructor":{"visibility":"public"},"properties":[{"name":"List","visibility":"public","type":"List","description":"Page background color when a List is set as the Page content."},{"name":"Solid","visibility":"public","type":"Solid","description":"A solid background color dependent on the theme."},{"name":"Standard","visibility":"public","type":"Standard","description":"Standard Page background color."},{"name":"Transparent","visibility":"public","type":"Transparent","description":"Transparent background for the page."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.types.TimelineLayout","basename":"TimelineLayout","resource":"types/TimelineLayout.js","module":"types/TimelineLayout","static":true,"visibility":"public","description":"Different types of Timeline.","constructor":{"visibility":"public"},"properties":[{"name":"Horizontal","visibility":"public","type":"Horizontal","description":"Horizontal layout"},{"name":"Vertical","visibility":"public","type":"Vertical","description":"Vertical layout Default type"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.types.UploadState","basename":"UploadState","resource":"types/UploadState.js","module":"types/UploadState","static":true,"visibility":"public","constructor":{"visibility":"public"},"properties":[{"name":"Complete","visibility":"public","type":"Complete","description":"The file has been uploaded successfully."},{"name":"Error","visibility":"public","type":"Error","description":"The file cannot be uploaded due to an error."},{"name":"Ready","visibility":"public","type":"Ready","description":"The file is awaiting an explicit command to start being uploaded."},{"name":"Uploading","visibility":"public","type":"Uploading","description":"The file is currently being uploaded."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.fiori.UploadCollection","basename":"UploadCollection","tagname":"ui5-upload-collection","appenddocs":"UploadCollectionItem","resource":"UploadCollection.js","module":"UploadCollection","visibility":"public","since":"1.0.0-rc.7","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> This component allows you to represent files before uploading them to a server, with the help of <code>ui5-upload-collection-item</code>. It also allows you to show already uploaded files.\n\n<h3>ES6 Module Import</h3> <code>import @ui5/webcomponents-fiori/dist/UploadCollection.js\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";</code> (for <code>ui5-upload-collection-item</code>)","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.16","type":"string","description":"Sets the accessible aria name of the component.","defaultValue":"\"\""},{"name":"mode","visibility":"public","type":"ListMode","description":"Defines the mode of the <code>ui5-upload-collection</code>. <br><br> <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>MultiSelect</code>, and <code>Delete</code>.","defaultValue":"\"None\""},{"name":"noDataDescription","visibility":"public","type":"string","description":"Allows you to set your own text for the 'No data' description.","defaultValue":"\"\""},{"name":"noDataText","visibility":"public","type":"string","description":"Allows you to set your own text for the 'No data' text.","defaultValue":"\"\""},{"name":"noDnd","visibility":"public","type":"boolean","description":"By default there will be drag and drop overlay shown over the <code>ui5-upload-collection</code> when files are dragged. If you don't intend to use drag and drop, set this property to <code>true</code> <br><br> <b>Note:</b> It is up to the application developer to add handler for <code>drop</code> event and handle it. <code>ui5-upload-collection</code> only shows an overlay.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-upload-collection</code>. <br><b>Note:</b> Use <code>ui5-upload-collection-item</code> for the intended design."},{"name":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-upload-collection</code> header. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the labelling of the <code>UploadCollection</code> is a responsibility of the application developer. <code>accessibleName</code> should be used."}],"events":[{"name":"drop","visibility":"public","parameters":[{"name":"dataTransfer","type":"DataTransfer","description":"The <code>drop</code> event operation data."}],"description":"Fired when an element is dropped inside the drag and drop overlay. <br><br> <b>Note:</b> The <code>drop</code> event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the <code>ui5-upload-collection</code>."},{"name":"file-deleted","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"The <code>ui5-upload-collection-item</code> which was renamed."}],"description":"Fired when the Delete button of any item is pressed. <br><br> <b>Note:</b> A Delete button is displayed on each item, when the <code>ui5-upload-collection</code> <code>mode</code> property is set to <code>Delete</code>."},{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedItems","type":"Array","description":"An array of the selected items."}],"description":"Fired when selection is changed by user interaction in <code>SingleSelect</code> and <code>MultiSelect</code> modes."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.UploadCollectionItem","basename":"UploadCollectionItem","tagname":"ui5-upload-collection-item","resource":"UploadCollectionItem.js","module":"UploadCollectionItem","visibility":"public","since":"1.0.0-rc.7","extends":"ListItem","description":"<h3 class=\"comment-api-title\">Overview</h3> A component to be used within the <code>ui5-upload-collection</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"file","visibility":"public","type":"File","description":"Holds <code>File</code>, associated with this item.","defaultValue":"null"},{"name":"fileName","visibility":"public","type":"string","description":"The name of the file.","defaultValue":"\"\""},{"name":"fileNameClickable","visibility":"public","type":"boolean","description":"If set to <code>true</code> the file name will be clickable and it will fire <code>file-name-click</code> event upon click.","defaultValue":"false"},{"name":"noDelete","visibility":"public","type":"boolean","description":"Removes delete option from <code>ui5-upload-collection</code> with <code>mode</code> <code>Delete</code> for this item.","defaultValue":"false"},{"name":"noRetry","visibility":"public","type":"boolean","description":"Hides the retry button when <code>uploadState</code> property is <code>Error</code>.","defaultValue":"false"},{"name":"noTerminate","visibility":"public","type":"boolean","description":"Hides the terminate button when <code>uploadState</code> property is <code>Uploading</code>.","defaultValue":"false"},{"name":"progress","visibility":"public","type":"Integer","description":"The upload progress in percentage. <br><br> <b>Note:</b> Expected values are in the interval [0, 100].","defaultValue":"0"},{"name":"uploadState","visibility":"public","type":"UploadState","description":"If set to <code>Uploading</code> or <code>Error</code>, a progress indicator showing the <code>progress</code> is displayed. Also if set to <code>Error</code>, a refresh button is shown. When this icon is pressed <code>retry</code> event is fired. If set to <code>Uploading</code>, a terminate button is shown. When this icon is pressed <code>terminate</code> event is fired.","defaultValue":"\"Ready\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Hold the description of the <code>ui5-upload-collection-item</code>. Will be shown below the file name."},{"name":"thumbnail","visibility":"public","type":"HTMLElement","description":"A thumbnail, which will be shown in the beginning of the <code>ui5-upload-collection-item</code>. <br><br> <b>Note:</b> Use <code>ui5-icon</code> or <code>img</code> for the intended design."}],"events":[{"name":"file-name-click","visibility":"public","description":"Fired when the file name is clicked. <br><br> <b>Note:</b> This event is only available when <code>fileNameClickable</code> property is <code>true</code>."},{"name":"rename","visibility":"public","description":"Fired when the <code>fileName</code> property gets changed. <br><br> <b>Note:</b> An edit button is displayed on each item, when the <code>ui5-upload-collection-item</code> <code>type</code> property is set to <code>Detail</code>."},{"name":"retry","visibility":"public","description":"Fired when the retry button is pressed. <br><br> <b>Note:</b> Retry button is displayed when <code>uploadState</code> property is set to <code>Error</code>."},{"name":"terminate","visibility":"public","description":"Fired when the terminate button is pressed. <br><br> <b>Note:</b> Terminate button is displayed when <code>uploadState</code> property is set to <code>Uploading</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.ViewSettingsDialog","basename":"ViewSettingsDialog","tagname":"ui5-view-settings-dialog","resource":"ViewSettingsDialog.js","module":"ViewSettingsDialog","visibility":"public","since":"1.0.0-rc.16","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-view-settings-dialog</code> component helps the user to sort data within a list or a table. It consists of several lists like <code>Sort order</code> which is built-in and <code>Sort By</code> and <code>Filter By</code> lists, for which you must be provide items(<code>ui5-sort-item</code> & <code>ui5-filter-item</code> respectively) These options can be used to create sorters for a table.\n\nThe <code>ui5-view-settings-dialog</code> interrupts the current application processing as it is the only focused UI element and the main screen is dimmed/blocked. The <code>ui5-view-settings-dialog</code> is modal, which means that user action is required before returning to the parent window is possible.\n\n<h3>Structure</h3> A <code>ui5-view-settings-dialog</code> consists of a header, content, and a footer for action buttons. The <code>ui5-view-settings-dialog</code> is usually displayed at the center of the screen.\n\n<h3>Responsive Behavior</h3> <code>ui5-view-settings-dialog</code> stretches on full screen on phones.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ViewSettingsDialog\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"sortDescending","visibility":"public","type":"boolean","description":"Defines the initial sort order.","defaultValue":"false"}],"slots":[{"name":"filterItems","visibility":"public","type":"sap.ui.webcomponents.fiori.FilterItem[]","description":"Defines the <code>filterItems</code> list. <b>Note:</b> If you want to use this slot, you need to import used item: <code>import \"@ui5/webcomponents-fiori/dist/FilterItem\";</code>"},{"name":"sortItems","visibility":"public","type":"sap.ui.webcomponents.fiori.SortItem[]","description":"Defines the <code>sortItems</code> list. <b>Note:</b> If you want to use this slot, you need to import used item: <code>import \"@ui5/webcomponents-fiori/dist/SortItem\";</code>"}],"events":[{"name":"cancel","visibility":"public","parameters":[{"name":"sortOrder","type":"String","description":"The current sort order selected."},{"name":"sortBy","type":"String","description":"The current sort by selected."}],"description":"Fired when cancel button is activated."},{"name":"confirm","visibility":"public","parameters":[{"name":"sortOrder","type":"String","description":"The current sort order selected."},{"name":"sortBy","type":"String","description":"The current sort by selected."}],"description":"Fired when confirmation button is activated."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.Wizard","basename":"Wizard","tagname":"ui5-wizard","appenddocs":"WizardStep","resource":"Wizard.js","module":"Wizard","visibility":"public","since":"1.0.0-rc.10","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-wizard</code> helps users complete a complex task by dividing it into sections and guiding the user through it. It has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n<h3>Structure</h3> <h4>Navigation area</h4> The top most area of the <code>ui5-wizard</code> is occupied by the navigation area. It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps. <ul> <li> Steps can have different visual representations - numbers or icons. <li> Steps might have labels for better readability - heading and subheding.</li> <li> Steps are defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code></li> </ul>\n\n<b>Note:</b> If no selected step is defined, the first step will be auto selected. <br> <b>Note:</b> If multiple selected steps are defined, the last step will be selected.\n\n<h4>Content</h4> The content occupies the main part of the page. It can hold any type of HTML elements. It's defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.\n\n<h3>Scrolling</h3> The component handles user scrolling by selecting the closest step, based on the current scroll position and scrolls to particular place, when the user clicks on the step within the navigation area. <br><br>\n\n<b>Important:</b> In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height. The component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page. <br><br> <b>For example:</b> <br><br> <code>&lt;ui5-dialog style=\"height: 80%\"&gt;<br></code> <code>&#9;&lt;ui5-wizard&gt;&lt;/ui5-wizard&gt;<br></code> <code>&lt;/ui5-dialog&gt;</code>\n\n<h4>Moving to next step</h4> The <code>ui5-wizard-step</code> provides the necessary API and it's up to the user of the component to use it to move to the next step. You have to set its <code>selected</code> property (and remove the <code>disabled</code> one if set) to <code>true</code>. And, the <code>ui5-wizard</code> will automatically scroll to the content of the newly selected step. <br><br>\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area. You can place a button, or any other type of element to trigger step change, inside the <code>ui5-wizard-step</code>, and show/hide it when certain fields are filled or user defined criteria is met.\n\n<h3>Usage</h3> <h4>When to use:</h4> When the user has to accomplish a long set of tasks. <h4>When not to use:</h4> When the task has less than 3 steps.\n\n<h3>Responsive Behavior</h3> On small widths the step's heading, subheading and separators in the navigation area will start truncate and shrink and from particular point they will hide to free as much space as possible.\n\n<h3>ES6 Module Import</h3> <code>import @ui5/webcomponents-fiori/dist/Wizard.js\";</code> (includes <ui5-wizard-step>)","constructor":{"visibility":"public"},"properties":[],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the steps. <br><br> <b>Note:</b> Use the available <code>ui5-wizard-step</code> component."}],"events":[{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedStep","type":"HTMLElement","description":"the newly selected step"},{"name":"previouslySelectedStep","type":"HTMLElement","description":"the previously selected step"},{"name":"changeWithClick","type":"Boolean","description":"the selection changed due to user's click on step within the navigation"}],"description":"Fired when the step selection is changed by user interaction - either with scrolling, or by clicking on the steps within the component header."}]},{"kind":"class","name":"sap.ui.webcomponents.fiori.WizardStep","basename":"WizardStep","tagname":"ui5-wizard-step","resource":"WizardStep.js","module":"WizardStep","static":true,"visibility":"public","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nA component that represents a logical step as part of the <code>ui5-wizard</code>. It is meant to aggregate arbitrary HTML elements that forms the content of a single step.\n\n<h3>Structure</h3> <ul> <li>Each wizard step has arbitrary content</li> <li>Each wizard step might have texts - defined by the <code>heading</code> and <code>subheading</code> properties</li> <li>Each wizard step might have an icon - defined by the <code>icon</code> property</li> <li>Each wizard step might display a number in place of the <code>icon</code>, when it's missing</li> </ul>\n\n<h3>Usage</h3> The <code>ui5-wizard-step</code> component should be used only as slot of the <code>ui5-wizard</code> component and should not be used standalone.","constructor":{"visibility":"public"},"properties":[{"name":"branching","visibility":"public","type":"boolean","description":"When <code>branching</code> is enabled a dashed line would be displayed after the step, meant to indicate that the next step is not yet known and depends on user choice in the current step. <br><br>\n\n<b>Note:</b> It is recommended to use <code>branching</code> on the last known step and later add new steps when it becomes clear how the wizard flow should continue.","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines if the step is <code>disabled</code>. When disabled the step is displayed, but the user can't select the step by clicking or navigate to it with scrolling. <br><br>\n\n<b>Note:</b> Step can't be <code>selected</code> and <code>disabled</code> at the same time. In this case the <code>selected</code> property would take precedence.","defaultValue":"false"},{"name":"heading","visibility":"public","type":"String","description":"Defines the <code>heading</code> of the step. <br><br>\n\n<b>Note:</b> the text is displayed in the <code>ui5-wizard</code> navigation header. <br> <b>Note:</b> the text will hide on small sizes (about 559 px).","defaultValue":"\"\""},{"name":"icon","visibility":"public","type":"String","description":"Defines the <code>icon</code> of the step. <br><br>\n\n<b>Note:</b> the icon is displayed in the <code>ui5-wizard</code> navigation header. <br><br>\n\nThe 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>.","defaultValue":"\"\""},{"name":"selected","visibility":"public","type":"boolean","description":"Defines the step's <code>selected</code> state - the step that is currently active. <br><br>\n\n<b>Note:</b> Step can't be <code>selected</code> and <code>disabled</code> at the same time. In this case the <code>selected</code> property would take precedence.","defaultValue":"false"},{"name":"subheading","visibility":"public","type":"String","description":"Defines the <code>subheading</code> of the step. <br><br>\n\n<b>Note:</b> the text is displayed in the <code>ui5-wizard</code> navigation header. <br> <b>Note:</b> the text will hide on small sizes (about 559 px).","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the step content."}]},{"kind":"class","name":"sap.ui.webcomponents.main.types.BarDesign","basename":"BarDesign","resource":"types/BarDesign.js","module":"types/BarDesign","static":true,"visibility":"public","description":"Different types of Bar.","constructor":{"visibility":"public"},"properties":[{"name":"FloatingFooter","visibility":"public","type":"FloatingFooter","description":"Floating Footer type - there is visible border on all sides"},{"name":"Footer","visibility":"public","type":"Footer","description":"Footer type"},{"name":"Header","visibility":"public","type":"Header","description":"Default type"},{"name":"Subheader","visibility":"public","type":"Subheader","description":"Subheader type"}],"slots":[]}]}

package/dist/generated/templates/ShellBarTemplate.lit.js

@@ -5,16 +5,16 @@ import { html, svg, repeat, classMap, styleMap, unsafeHTML, setTags, setSuffix }
 const block0 = (context) => { return html`<div class="${classMap(context.classes.wrapper)}" dir="${ifDefined(context.effectiveDir)}" role="banner" aria-label="${ifDefined(context._shellbarText)}" part="root"><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">${ context.startButton.length ? block1(context) : undefined }${ context.hasFocusableLogo ? block2(context) : undefined }${ context.showArrowDown ? block3(context) : undefined }${ context.secondaryTitle ? block6(context) : undefined }</div><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">${ context.showCoPilot ? block7(context) : block10(context) }</div><div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right"><div class="ui5-shellbar-overflow-container-right-child">${ context.hasSearchField ? block11(context) : undefined }${ repeat(context.customItemsInfo, (item, index) => item._id || index, (item, index) => block14(item, index, context)) }${ context.showNotifications ? block15(context) : undefined }<ui5-button id="${ifDefined(context._id)}-item-5" style="${styleMap(context.styles.items.overflow)}" class="${classMap(context.classes.items.overflow)} ui5-shellbar-button ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button" icon="sap-icon://overflow" @click="${context._handleOverflowPress}" title="${ifDefined(context._overflowText)}" ._buttonAccInfo="${ifDefined(context.accInfo.overflow)}" data-ui5-stable="overflow"></ui5-button>${ context.hasProfile ? block16(context) : undefined }${ context.showProductSwitch ? block17(context) : undefined }</div></div></div> `; };
 const block1 = (context) => { return html`<slot name="startButton"></slot>`; };
 const block2 = (context) => { return html`<span class="ui5-shellbar-logo" role="button" aria-label="${ifDefined(context._logoText)}" title="${ifDefined(context._logoText)}" @click="${context._logoPress}" @keydown="${context._logoKeydown}" @keyup="${context._logoKeyup}" tabindex="0" data-ui5-stable="logo"><slot name="logo"></slot></span>`; };
-const block3 = (context) => { return html`<button tabindex="${ifDefined(context.menuBtnTabindex)}" class="${classMap(context.classes.button)}" @click="${context._header.press}" aria-haspopup="${ifDefined(context.menuBtnHasPopup)}" aria-expanded="${ifDefined(context.menuPopoverExpanded)}">${ context.hasNonFocusableLogo ? block4(context) : undefined }${ context.primaryTitle ? block5(context) : undefined }<span class="ui5-shellbar-menu-button-arrow"></span></button>`; };
+const block3 = (context) => { return html`<button tabindex="${ifDefined(context.menuBtnTabindex)}" class="${classMap(context.classes.button)}" @click="${context._header.press}" aria-haspopup="${ifDefined(context.menuBtnHasPopup)}" aria-expanded="${ifDefined(context.menuPopoverExpanded)}" data-ui5-stable="menu">${ context.hasNonFocusableLogo ? block4(context) : undefined }${ context.primaryTitle ? block5(context) : undefined }<span class="ui5-shellbar-menu-button-arrow"></span></button>`; };
 const block4 = (context) => { return html`<span class="ui5-shellbar-logo" aria-label="${ifDefined(context._logoText)}" title="${ifDefined(context._logoText)}"><slot name="logo"></slot></span>`; };
 const block5 = (context) => { return html`<h1 class="ui5-shellbar-menu-button-title"><bdi class="${classMap(context.classes.title)}">${ifDefined(context.primaryTitle)}</bdi></h1>`; };
-const block6 = (context) => { return html`<h2 class="ui5-shellbar-secondary-title">${ifDefined(context.secondaryTitle)}</h2>`; };
+const block6 = (context) => { return html`<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">${ifDefined(context.secondaryTitle)}</h2>`; };
 const block7 = (context) => { return html`<div class="ui5-shellbar-copilot-wrapper" tabindex="0" aria-label="${ifDefined(context._copilotText)}" role="button" title="${ifDefined(context._copilotText)}" @keydown="${context._coPilotKeydown}" @keyup="${context._coPilotKeyup}" ?active="${context.coPilotActive}" data-ui5-stable="copilot"><svg @click="${context._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">${blockSVG1(context)}</svg></div>`; };
 const block8 = (context) => { return svg`<animateTransform attributeName="transform" type="rotate" from="54" to="416" dur="15s" repeatCount="indefinite"/>`; };
 const block9 = (context) => { return svg`<animateTransform attributeName="transform" type="rotate" from="90" to="450" dur="30s" repeatCount="indefinite"/>`; };
 const block10 = (context) => { return html`<span class="ui5-shellbar-co-pilot-placeholder"></span>`; };
-const block11 = (context) => { return html`${ context._fullWidthSearch ? block12(context) : undefined }<div class="ui5-shellbar-search-field" style="${styleMap(context.styles.searchField)}">${ !context._fullWidthSearch ? block13(context) : undefined }</div><ui5-button id="${ifDefined(context._id)}-item-1" class="${classMap(context.classes.items.search)} ui5-shellbar-button ui5-shellbar-search-button" icon="sap-icon://search" data-ui5-text="Search" data-ui5-notification-count="${ifDefined(context.notificationCount)}" @click=${context._handleSearchIconPress} title="${ifDefined(context._searchText)}" ._buttonAccInfo="${ifDefined(context.accInfo.search)}"></ui5-button>`; };
-const block12 = (context) => { return html`<div class="ui5-shellbar-search-full-width-wrapper" style="${styleMap(context.styles.searchField)}"><div class="ui5-shellbar-search-full-field"><slot name="searchField"></slot></div><ui5-button @click=${context._handleCancelButtonPress} class="ui5-shellbar-button">Cancel</ui5-button></div>`; };
+const block11 = (context) => { return html`${ context._fullWidthSearch ? block12(context) : undefined }<div class="ui5-shellbar-search-field" style="${styleMap(context.styles.searchField)}">${ !context._fullWidthSearch ? block13(context) : undefined }</div><ui5-button id="${ifDefined(context._id)}-item-1" class="${classMap(context.classes.items.search)} ui5-shellbar-button ui5-shellbar-search-button" icon="sap-icon://search" data-ui5-text="Search" data-ui5-notification-count="${ifDefined(context.notificationCount)}" data-ui5-stable="toggle-search" @click=${context._handleSearchIconPress} title="${ifDefined(context._searchText)}" ._buttonAccInfo="${ifDefined(context.accInfo.search)}"></ui5-button>`; };
+const block12 = (context) => { return html`<div class="ui5-shellbar-search-full-width-wrapper" style="${styleMap(context.styles.searchField)}"><div class="ui5-shellbar-search-full-field"><slot name="searchField"></slot></div><ui5-button @click=${context._handleCancelButtonPress} class="ui5-shellbar-button" data-ui5-stable="cancel-search">Cancel</ui5-button></div>`; };
 const block13 = (context) => { return html`<slot name="searchField"></slot>`; };
 const block14 = (item, index, context) => { return html`<ui5-button id="${ifDefined(item.id)}" style="${ifDefined(item.style)}" class="${ifDefined(item.classes)}" icon="${ifDefined(item.icon)}" title="${ifDefined(item.title)}" data-count="${ifDefined(item.count)}" data-ui5-notification-count="${ifDefined(context.notificationCount)}" data-ui5-external-action-item-id="${ifDefined(item.refItemid)}" data-ui5-stable="${ifDefined(item.stableDomRef)}" @click=${item.press}></ui5-button>`; };
 const block15 = (context) => { return html`<ui5-button id="${ifDefined(context._id)}-item-2" style="${styleMap(context.styles.items.notification)}" class="${classMap(context.classes.items.notification)} ui5-shellbar-button ui5-shellbar-bell-button" icon="sap-icon://bell" data-ui5-text="Notifications" data-ui5-notification-count="${ifDefined(context.notificationCount)}" @click=${context._handleNotificationsPress} title="${ifDefined(context._notificationsText)}" ._buttonAccInfo="${ifDefined(context.accInfo.notifications)}" data-ui5-stable="notifications"></ui5-button>`; };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "0.31.21",
+  "version": "0.31.25",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -30,14 +30,14 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "0.31.21",
-    "@ui5/webcomponents-base": "0.31.21",
-    "@ui5/webcomponents-icons": "0.31.21",
-    "@ui5/webcomponents-ie11": "0.31.21",
-    "@ui5/webcomponents-theme-base": "0.31.21"
+    "@ui5/webcomponents": "0.31.25",
+    "@ui5/webcomponents-base": "0.31.25",
+    "@ui5/webcomponents-icons": "0.31.25",
+    "@ui5/webcomponents-ie11": "0.31.25",
+    "@ui5/webcomponents-theme-base": "0.31.25"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.31.21",
-    "chromedriver": "88.0.0"
+    "@ui5/webcomponents-tools": "0.31.25",
+    "chromedriver": "96.0.0"
   }
 }

package/src/ShellBar.hbs

@@ -32,6 +32,7 @@
 				@click="{{_header.press}}"
 				aria-haspopup="{{menuBtnHasPopup}}"
 				aria-expanded="{{menuPopoverExpanded}}"
+				data-ui5-stable="menu"
 			>
 				{{#if hasNonFocusableLogo}}
 					<span
@@ -54,7 +55,7 @@
 		{{/if}}
 
 		{{#if secondaryTitle}}
-			<h2 class="ui5-shellbar-secondary-title">{{secondaryTitle}}</h2>
+			<h2 class="ui5-shellbar-secondary-title" data-ui5-stable="secondary-title">{{secondaryTitle}}</h2>
 		{{/if}}
 	</div>
 
@@ -89,6 +90,7 @@
 						<ui5-button
 							@click={{_handleCancelButtonPress}}
 							class="ui5-shellbar-button"
+							data-ui5-stable="cancel-search"
 						>
 							Cancel
 						</ui5-button>
@@ -107,6 +109,7 @@
 					icon="sap-icon://search"
 					data-ui5-text="Search"
 					data-ui5-notification-count="{{notificationCount}}"
+					data-ui5-stable="toggle-search"
 					@click={{_handleSearchIconPress}}
 					title="{{_searchText}}"
 					._buttonAccInfo="{{accInfo.search}}"

package/src/ShellBar.js

@@ -109,6 +109,21 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines several additional accessibility texts
+		 * for even further customization.
+		 *
+		 * It supports the following fields:
+		 * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibilityTexts: {
+			type: Object,
+		},
+
 		/**
 		 * @private
 		 */
@@ -1021,7 +1036,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get _profileText() {
-		return this.i18nBundle.getText(SHELLBAR_PROFILE);
+		return this.accessibilityTexts.profileButtonTitle || this.i18nBundle.getText(SHELLBAR_PROFILE);
 	}
 
 	get _productsText() {