npm - @openui5/sap.ui.webc.fiori - Versions diffs - 1.116.0 → 1.117.1 - Mend

@openui5/sap.ui.webc.fiori 1.116.0 → 1.117.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.webc.fiori",
-  "version": "1.116.0",
+  "version": "1.117.1",
   "description": "OpenUI5 UI Library sap.ui.webc.fiori",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -20,8 +20,8 @@
     "generate": "ui5-webc-generate"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.116.0",
-    "@openui5/sap.ui.webc.main": "1.116.0",
-    "@openui5/sap.ui.webc.common": "1.116.0"
+    "@openui5/sap.ui.core": "1.117.1",
+    "@openui5/sap.ui.webc.main": "1.117.1",
+    "@openui5/sap.ui.webc.common": "1.117.1"
   }
 }

package/src/sap/ui/webc/fiori/.library CHANGED Viewed

@@ -3,7 +3,7 @@
 	<name>sap.ui.webc.fiori</name>
 	<vendor>SAP SE</vendor>
-	<version>1.116.0</version>
+	<version>1.117.1</version>
 	<copyright>OpenUI5
  * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>

package/src/sap/ui/webc/fiori/Bar.js CHANGED Viewed

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * <h3>Keyboard Handling</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/BarcodeScannerDialog.js CHANGED Viewed

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * For a list of supported barcode formats, see the {@link https://github.com/zxing-js/library zxing-js/library} documentation.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/DynamicSideContent.js CHANGED Viewed

@@ -70,7 +70,7 @@ sap.ui.define([
 	 *             A special case allows switching the comparison mode between the main and side content. In this case, the screen is split into 50:50 percent for main vs. side content. The responsive behavior of the equal split is the same as in the standard view - the side content disappears on screen widths of less than 720 px and can only be viewed by triggering it.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/FilterItem.js CHANGED Viewed

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * <h3>Usage</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/FilterItemOption.js CHANGED Viewed

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * <h3>Usage</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/FlexibleColumnLayout.js CHANGED Viewed

@@ -40,7 +40,7 @@ sap.ui.define([
 	 * <h3>Keyboard Handling</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/IllustratedMessage.js CHANGED Viewed

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * <h3>Usage</h3> <code>sap.ui.webc.fiori.IllustratedMessage</code> is meant to be used inside container component, for example a <code>sap.ui.webc.main.Card</code>, a <code>sap.ui.webc.main.Dialog</code> or a <code>sap.ui.webc.fiori.Page</code>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/MediaGallery.js CHANGED Viewed

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * </ul> <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/MediaGalleryItem.js CHANGED Viewed

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/NotificationAction.js CHANGED Viewed

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.fiori.NotificationAction</code> represents an abstract action, used in the <code>sap.ui.webc.fiori.NotificationListItem</code> and the <code>sap.ui.webc.fiori.NotificationListGroupItem</code> items.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/NotificationListGroupItem.js CHANGED Viewed

@@ -47,7 +47,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/NotificationListItem.js CHANGED Viewed

@@ -49,7 +49,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/Page.js CHANGED Viewed

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * <b>Note:</b> <code>sap.ui.webc.fiori.Page</code> occipues the whole available space of its parent. In order to achieve the intended design you have to make sure that there is enough space for the <code>sap.ui.webc.fiori.Page</code> to be rendered. <b>Note:</b> In order for the <code>sap.ui.webc.fiori.Page</code> to be displayed, the parent element should have fixed height.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/ProductSwitch.js CHANGED Viewed

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * <br>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/ProductSwitchItem.js CHANGED Viewed

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/ShellBar.js CHANGED Viewed

@@ -50,7 +50,7 @@ sap.ui.define([
 	 * <h3>Keyboard Handling</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/ShellBarItem.js CHANGED Viewed

@@ -24,7 +24,7 @@ sap.ui.define([
 	 *
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/SideNavigation.js CHANGED Viewed

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * <h3>Keyboard Handling</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/SideNavigationItem.js CHANGED Viewed

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.fiori.SideNavigationItem</code> is used within <code>sap.ui.webc.fiori.SideNavigation</code> only. Via the <code>sap.ui.webc.fiori.SideNavigationItem</code> you control the content of the <code>SideNavigation</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/SideNavigationSubItem.js CHANGED Viewed

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.fiori.SideNavigationSubItem</code> is intended to be used inside a <code>sap.ui.webc.fiori.SideNavigationItem</code> only.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/SortItem.js CHANGED Viewed

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * <h3>Usage</h3>
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/Timeline.js CHANGED Viewed

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * The <code>sap.ui.webc.fiori.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.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/TimelineItem.js CHANGED Viewed

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * An entry posted on the timeline.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/UploadCollection.js CHANGED Viewed

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * <h3>Overview</h3> This component allows you to represent files before uploading them to a server, with the help of <code>sap.ui.webc.fiori.UploadCollectionItem</code>. It also allows you to show already uploaded files.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/UploadCollectionItem.js CHANGED Viewed

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * <h3>Overview</h3> A component to be used within the <code>sap.ui.webc.fiori.UploadCollection</code>.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/ViewSettingsDialog.js CHANGED Viewed

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * <h3>Responsive Behavior</h3> <code>sap.ui.webc.fiori.ViewSettingsDialog</code> stretches on full screen on phones.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/Wizard.js CHANGED Viewed

@@ -88,7 +88,7 @@ sap.ui.define([
 	 * <h3>Responsive Behavior</h3> On small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap. Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/WizardStep.js CHANGED Viewed

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * <h3>Usage</h3> The <code>sap.ui.webc.fiori.WizardStep</code> component should be used only as slot of the <code>sap.ui.webc.fiori.Wizard</code> component and should not be used standalone.
 	 *
 	 * @author SAP SE
-	 * @version 1.116.0
+	 * @version 1.117.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/fiori/library.js CHANGED Viewed

@@ -23,14 +23,14 @@ sap.ui.define([
 		 * @namespace
 		 * @alias sap.ui.webc.fiori
 		 * @author SAP SE
-		 * @version 1.116.0
+		 * @version 1.117.1
 		 * @public
 		 * @since 1.92.0
 		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
 		 */
 		var thisLib = Library.init({
 			name: "sap.ui.webc.fiori",
-			version: "1.116.0",
+			version: "1.117.1",
 			dependencies: ["sap.ui.core", "sap.ui.webc.common"],
 			noLibraryCSS: true,
 			designtime: "sap/ui/webc/fiori/designtime/library.designtime",

package/ui5.yaml CHANGED Viewed

@@ -1,5 +1,5 @@
 ---
-specVersion: "2.1"
+specVersion: "3.0"
 type: library
 metadata:
   name: sap.ui.webc.fiori
@@ -35,8 +35,9 @@ builder:
               - "!sap/ui/webc/fiori/designtime/"
               - "!sap/ui/webc/fiori/**/*.designtime.js"
               - "!sap/ui/webc/fiori/**/*.support.js"
-              - "!sap/ui/webc/fiori/thirdparty/messagebundle*.js"
-              - "!sap/ui/webc/fiori/thirdparty/generated/themes/*/*.js"
+              - "!sap/ui/webc/fiori/thirdparty/generated/assets/**/*.js"
+              - "!sap/ui/webc/fiori/thirdparty/generated/themes/**/parameters-bundle.css.js"
+              - "!sap/ui/webc/fiori/thirdparty/illustrations/**/*.js"
             resolve: false
             resolveConditional: false
             renderer: true
@@ -57,6 +58,7 @@ customConfiguration:
           - "!test/"
           - "!**/*-static.js"
           - "!**/api.json"
+          - "!**/custom-elements.json"
         outputPath: "src/sap/ui/webc/fiori/thirdparty/" # where to create the UI5 controls
         generation: # if set, control wrappers will be generated
           suffix: "-ui5"

package/src/sap/ui/webc/fiori/thirdparty/custom-elements.json.js DELETED Viewed

@@ -1 +0,0 @@

- sap.ui.define(['exports'], function(exports) { 'use strict'; exports["default"] = {"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"Bar.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Bar","name":"Bar","tagName":"ui5-bar","slots":[{"deprecated":false,"description":"Defines the content in the middle of the bar","name":"default"},{"deprecated":false,"description":"Defines the content at the end of the bar","name":"endContent"},{"deprecated":false,"description":"Defines the content at the start of the bar","name":"startContent"}],"attributes":[{"default":"\"Header\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.fiori.types.BarDesign"},"description":"Defines the component's design.\n\n<br><br> <b>Note:</b> Available options are: <ul> <li><code>Header</code></li> <li><code>Subheader</code></li> <li><code>Footer</code></li> <li><code>FloatingFooter</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The Bar is a container which is primarily used to hold titles, buttons and input elements and its design and functionality is the basis for page headers and footers. The component consists of three areas to hold its content - startContent slot, default slot and endContent slot. 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. <br> <b>Note:</b> Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n<h3>Responsive Behavior</h3> The default slot will be centered in the available space between the startContent and the endContent areas, therefore it might not always be centered in the entire bar.\n\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-bar</code> exposes the following CSS Shadow Parts: <ul> <li>bar - Used to style the wrapper of the content of the component</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/Bar.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.BarDesign"},"default":"\"Header\"","description":"Defines the component's design.\n\n<br><br> <b>Note:</b> Available options are: <ul> <li><code>Header</code></li> <li><code>Subheader</code></li> <li><code>Footer</code></li> <li><code>FloatingFooter</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Bar.js","name":"Bar","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Bar","module":"Bar.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-bar"}]},{"kind":"javascript-module","path":"BarcodeScannerDialog.js","declarations":[{"deprecated":false,"customElement":true,"kind":"BarcodeScannerDialog","name":"BarcodeScannerDialog","tagName":"ui5-barcode-scanner-dialog","events":[{"deprecated":false,"name":"scan-error","type":"CustomEvent","description":"Fires when the scan fails with error."},{"deprecated":false,"name":"scan-success","type":"CustomEvent","description":"Fires when the scan is completed successfuuly."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>BarcodeScannerDialog</code> component provides barcode scanning functionality for all devices that support the <code>MediaDevices.getUserMedia()</code> native API. Opening the dialog launches the device camera and scans for known barcode formats. <br> <br> A <code>scanSuccess</code> event fires whenever a barcode is identified and a <code>scanError</code> event fires when the scan failed (for example, due to missing permisions). <br> <br> Internally, the component uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the <ui5-link target=\"_blank\" href=\"https://github.com/zxing-js/library\">zxing-js/library</ui5-link> documentation.","members":[{"deprecated":false,"kind":"method","name":"close","privacy":"public","description":"Closes the dialog and the scan session."},{"deprecated":false,"kind":"method","name":"show","privacy":"public","description":"Shows a dialog with the camera videostream. Starts a scan session."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"BarcodeScannerDialog.js","name":"BarcodeScannerDialog","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"BarcodeScannerDialog","module":"BarcodeScannerDialog.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-barcode-scanner-dialog"}]},{"kind":"javascript-module","path":"DynamicSideContent.js","declarations":[{"deprecated":false,"customElement":true,"kind":"DynamicSideContent","name":"DynamicSideContent","tagName":"ui5-dynamic-side-content","slots":[{"deprecated":false,"description":"Defines the main content.","name":"default"},{"deprecated":false,"description":"Defines the side content.","name":"sideContent"}],"events":[{"deprecated":false,"name":"layout-change","type":"CustomEvent","description":"Fires when the current breakpoint has been changed."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"equalSplit","name":"equal-split","type":{"text":"boolean"},"description":"Defines whether the component is in equal split mode. In this mode, the side and the main content take 50:50 percent of the container on all screen sizes except for phone, where the main and side contents are switching visibility using the toggle method."},{"default":"false","deprecated":false,"fieldName":"hideMainContent","name":"hide-main-content","type":{"text":"boolean"},"description":"Defines the visibility of the main content."},{"default":"false","deprecated":false,"fieldName":"hideSideContent","name":"hide-side-content","type":{"text":"boolean"},"description":"Defines the visibility of the side content."},{"default":"\"OnMinimumWidth\"","deprecated":false,"fieldName":"sideContentFallDown","name":"side-content-fall-down","type":{"text":"sap.ui.webc.fiori.types.SideContentFallDown"},"description":"Defines on which breakpoints the side content falls down below the main content.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>BelowXL</code></li> <li><code>BelowL</code></li> <li><code>BelowM</code></li> <li><code>OnMinimumWidth</code></li> </ul>"},{"default":"\"End\"","deprecated":false,"fieldName":"sideContentPosition","name":"side-content-position","type":{"text":"sap.ui.webc.fiori.types.SideContentPosition"},"description":"Defines whether the side content is positioned before the main content (left side in LTR mode), or after the the main content (right side in LTR mode).\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Start</code></li> <li><code>End</code></li> </ul>"},{"default":"\"ShowAboveS\"","deprecated":false,"fieldName":"sideContentVisibility","name":"side-content-visibility","type":{"text":"sap.ui.webc.fiori.types.SideContentVisibility"},"description":"Defines on which breakpoints the side content is visible.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>AlwaysShow</code></li> <li><code>ShowAboveL</code></li> <li><code>ShowAboveM</code></li> <li><code>ShowAboveS</code></li> <li><code>NeverShow</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe DynamicSideContent (<code>ui5-dynamic-side-content</code>) is a layout component that allows additional content to be displayed in a way that flexibly adapts to different screen sizes. The side content appears in a container next to or directly below the main content (it doesn't overlay). When the side content is triggered, the main content becomes narrower (if appearing side-by-side). The side content contains a separate scrollbar when appearing next to the main content.\n\n<h3>Usage</h3>\n\n<i>When to use?</i>\n\nUse this component if you want to display relevant information that is not critical for users to complete a task. Users should have access to all the key functions and critical information in the app even if they do not see the side content. This is important because on smaller screen sizes it may be difficult to display the side content in a way that is easily accessible for the user.\n\n<i>When not to use?</i>\n\nDon't use it if you want to display navigation or critical information that prevents users from completing a task when they have no access to the side content.\n\n<h3>Responsive Behavior</h3>\n\nScreen width > 1440px\n\n<ul><li>Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px each).</li> <li>If the application defines a trigger, the side content can be hidden.</li></ul>\n\nScreen width <= 1440px and > 1024px\n\n<ul><li>Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of 320px each). If the side content width falls below 320 px, it automatically slides under the main content, unless the app development team specifies that it should disappear.</li></ul>\n\nScreen width <= 1024px and > 720px\n\n<ul><li>The side content ratio is fixed to 340px, and the main content takes the rest of the width. Only if the <code>sideContentFallDown</code> is set to <code>OnMinimumWidth</code> and screen width is <= 960px and > 720px the side content falls below the main content.</li></ul>\n\nScreen width <= 720px (for example on a mobile device)\n\n<ul><li>In this case, the side content automatically disappears from the screen (unless specified to stay under the content by setting of <code>sideContentVisibility</code> property to <code>AlwaysShow</code>) and can be triggered from a pre-set trigger (specified within the app). When the side content is triggered, it replaces the main content. We recommend that you always place the trigger for the side content in the same location, such as in the app footer.</li></ul>\n\nA special case allows switching the comparison mode between the main and side content. In this case, the screen is split into 50:50 percent for main vs. side content. The responsive behavior of the equal split is the same as in the standard view - the side content disappears on screen widths of less than 720 px and can only be viewed by triggering it.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/DynamicSideContent\";</code>","members":[{"deprecated":false,"kind":"field","name":"equalSplit","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is in equal split mode. In this mode, the side and the main content take 50:50 percent of the container on all screen sizes except for phone, where the main and side contents are switching visibility using the toggle method."},{"deprecated":false,"kind":"field","name":"hideMainContent","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the visibility of the main content."},{"deprecated":false,"kind":"field","name":"hideSideContent","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the visibility of the side content."},{"deprecated":false,"kind":"field","name":"sideContentFallDown","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.SideContentFallDown"},"default":"\"OnMinimumWidth\"","description":"Defines on which breakpoints the side content falls down below the main content.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>BelowXL</code></li> <li><code>BelowL</code></li> <li><code>BelowM</code></li> <li><code>OnMinimumWidth</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"sideContentPosition","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.SideContentPosition"},"default":"\"End\"","description":"Defines whether the side content is positioned before the main content (left side in LTR mode), or after the the main content (right side in LTR mode).\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Start</code></li> <li><code>End</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"sideContentVisibility","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.SideContentVisibility"},"default":"\"ShowAboveS\"","description":"Defines on which breakpoints the side content is visible.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>AlwaysShow</code></li> <li><code>ShowAboveL</code></li> <li><code>ShowAboveM</code></li> <li><code>ShowAboveS</code></li> <li><code>NeverShow</code></li> </ul>"},{"deprecated":false,"kind":"method","name":"toggleContents","privacy":"public","description":"Toggles visibility of main and side contents on S screen size (mobile device)."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"DynamicSideContent.js","name":"DynamicSideContent","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"DynamicSideContent","module":"DynamicSideContent.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-dynamic-side-content"}]},{"kind":"javascript-module","path":"FilterItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"FilterItem","name":"FilterItem","tagName":"ui5-filter-item","slots":[{"deprecated":false,"description":"Defines the <code>values</code> list.","name":"values"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"additionalText","name":"additional-text","type":{"text":"string"},"description":"Defines the additional text of the component."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the component."}],"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>","members":[{"deprecated":false,"kind":"field","name":"additionalText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the additional text of the component."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"FilterItem.js","name":"FilterItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"FilterItem","module":"FilterItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-filter-item"}]},{"kind":"javascript-module","path":"FilterItemOption.js","declarations":[{"deprecated":false,"customElement":true,"kind":"FilterItemOption","name":"FilterItemOption","tagName":"ui5-filter-item-option","attributes":[{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines if the component is selected."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the component."}],"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>","members":[{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the component is selected."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"FilterItemOption.js","name":"FilterItemOption","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"FilterItemOption","module":"FilterItemOption.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-filter-item-option"}]},{"kind":"javascript-module","path":"FlexibleColumnLayout.js","declarations":[{"deprecated":false,"customElement":true,"kind":"FlexibleColumnLayout","name":"FlexibleColumnLayout","tagName":"ui5-flexible-column-layout","slots":[{"deprecated":false,"description":"Defines the content in the end column.","name":"endColumn"},{"deprecated":false,"description":"Defines the content in the middle column.","name":"midColumn"},{"deprecated":false,"description":"Defines the content in the start column.","name":"startColumn"}],"events":[{"deprecated":false,"name":"layout-change","type":"CustomEvent","description":"Fired when the layout changes via user interaction by clicking the arrows or by changing the component size due to resizing."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"hideArrows","name":"hide-arrows","type":{"text":"boolean"},"description":"Defines the visibility of the arrows, used for expanding and shrinking the columns."},{"default":"\"OneColumn\"","deprecated":false,"fieldName":"layout","name":"layout","type":{"text":"sap.ui.webc.fiori.types.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 599px, two columns between 599px and 1023px and three columns for sizes bigger than 1023px. <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."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>FlexibleColumnLayout</code> implements the list-detail-detail paradigm by displaying up to three pages in separate columns. There are several possible layouts that can be changed either with the component API, or by pressing the arrows, displayed between the columns.\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 599px, up to two columns between 599px and 1023px, and 3 columns for sizes bigger than 1023px.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<h4>Basic Navigation</h4> <ul> <li>[SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).</li> <li>This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code></li> </ul>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibilityRoles","privacy":"public","static":false,"type":{"text":"object"},"description":"An object of strings that defines additional accessibility roles for further customization.\n\nIt supports the following fields: - <code>startColumnRole</code>: the accessibility role for the <code>startColumn</code> - <code>startArrowContainerRole</code>: the accessibility role for the first arrow container (between the <code>begin</code> and <code>mid</code> columns) - <code>midColumnRole</code>: the accessibility role for the <code>midColumn</code> - <code>endArrowContainerRole</code>: the accessibility role for the second arrow container (between the <code>mid</code> and <code>end</code> columns) - <code>endColumnRole</code>: the accessibility role for the <code>endColumn</code>"},{"deprecated":false,"kind":"field","name":"accessibilityTexts","privacy":"public","static":false,"type":{"text":"object"},"description":"An 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 - <code>startArrowContainerAccessibleName</code>: the text that the first arrow container (between the <code>begin</code> and <code>mid</code> columns) will have as <code>aria-label</code> - <code>endArrowContainerAccessibleName</code>: the text that the second arrow container (between the <code>mid</code> and <code>end</code> columns) will have as <code>aria-label</code>"},{"deprecated":false,"kind":"field","name":"columnLayout","privacy":"public","static":false,"type":{"text":"array"},"default":"[\"100%\", 0, 0]","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."},{"deprecated":false,"kind":"field","name":"endColumnVisible","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Returns if the <code>end</code> column is visible."},{"deprecated":false,"kind":"field","name":"hideArrows","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the visibility of the arrows, used for expanding and shrinking the columns."},{"deprecated":false,"kind":"field","name":"layout","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.FCLLayout"},"default":"\"OneColumn\"","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 599px, two columns between 599px and 1023px and three columns for sizes bigger than 1023px. <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."},{"deprecated":false,"kind":"field","name":"midColumnVisible","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Returns if the <code>middle</code> column is visible."},{"deprecated":false,"kind":"field","name":"startColumnVisible","privacy":"public","static":false,"type":{"text":"boolean"},"default":"true","description":"Returns if the <code>start</code> column is visible."},{"deprecated":false,"kind":"field","name":"visibleColumns","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1","description":"Returns the number of currently visible columns."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"FlexibleColumnLayout.js","name":"FlexibleColumnLayout","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"FlexibleColumnLayout","module":"FlexibleColumnLayout.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-flexible-column-layout"}]},{"kind":"javascript-module","path":"IllustratedMessage.js","declarations":[{"deprecated":false,"customElement":true,"kind":"IllustratedMessage","name":"IllustratedMessage","tagName":"ui5-illustrated-message","slots":[{"deprecated":false,"description":"Defines the component actions.","name":"default"},{"deprecated":false,"description":"Defines the subtitle of the component. <br><br> <b>Note:</b> Using this slot, the default subtitle text of illustration and the value of <code>subtitleText</code> property will be overwritten.","name":"subtitle"},{"deprecated":false,"description":"Defines the title of the component. <br><br> <b>Note:</b> Using this slot, the default title text of illustration and the value of <code>title</code> property will be overwritten.","name":"title"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Receives id(or many ids) of the elements that label the component."},{"default":"\"BeforeSearch\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"sap.ui.webc.fiori.types.IllustrationMessageType"},"description":"Defines the illustration name that will be displayed in the component. <br><br> Available illustrations are: <ul> <li><code>AddColumn</code></li> <li><code>AddPeople</code></li> <li><code>AddDimensions</code></li> <li><code>BalloonSky</code></li> <li><code>BeforeSearch</code></li> <li><code>Connection</code></li> <li><code>EmptyCalendar</code></li> <li><code>EmptyList</code></li> <li><code>EmptyPlanningCalendar</code></li> <li><code>ErrorScreen</code></li> <li><code>FilterTable</code></li> <li><code>GroupTable</code></li> <li><code>NoActivities</code></li> <li><code>NoColumnsSet</code></li> <li><code>NoData</code></li> <li><code>NoEntries</code></li> <li><code>NoFilterResults</code></li> <li><code>NoMail_v1</code></li> <li><code>NoMail</code></li> <li><code>NoNotifications</code></li> <li><code>NoSavedItems_v1</code></li> <li><code>NoSavedItems</code></li> <li><code>NoSearchResults</code></li> <li><code>NoTasks_v1</code></li> <li><code>NoTasks</code></li> <li><code>NoDimensionsSet</code></li> <li><code>PageNotFound</code></li> <li><code>ReloadScreen</code></li> <li><code>ResizeColumn</code></li> <li><code>SearchEarth</code></li> <li><code>SearchFolder</code></li> <li><code>SimpleBalloon</code></li> <li><code>SimpleBell</code></li> <li><code>SimpleCalendar</code></li> <li><code>SimpleCheckMark</code></li> <li><code>SimpleConnection</code></li> <li><code>SimpleEmptyDoc</code></li> <li><code>SimpleEmptyList</code></li> <li><code>SimpleError</code></li> <li><code>SimpleMagnifier</code></li> <li><code>SimpleMail</code></li> <li><code>SimpleNoSavedItems</code></li> <li><code>SimpleNotFoundMagnifier</code></li> <li><code>SimpleReload</code></li> <li><code>SimpleTask</code></li> <li><code>SleepingBell</code></li> <li><code>SortColumn</code></li> <li><code>SuccessBalloon</code></li> <li><code>SuccessCheckMark</code></li> <li><code>SuccessHighFive</code></li> <li><code>SuccessScreen</code></li> <li><code>Survey</code></li> <li><code>Tent</code></li> <li><code>UnableToLoad</code></li> <li><code>UnableToLoadImage</code></li> <li><code>UnableToUpload</code></li> <li><code>UploadToCloud</code></li> <li><code>UploadCollection</code></li> <li><code>TntChartArea</code></li> <li><code>TntChartArea2</code></li> <li><code>TntChartBar</code></li> <li><code>TntChartBPMNFlow</code></li> <li><code>TntChartBullet</code></li> <li><code>TntChartDoughnut</code></li> <li><code>TntChartFlow</code></li> <li><code>TntChartGantt</code></li> <li><code>TntChartOrg</code></li> <li><code>TntChartPie</code></li> <li><code>TntCodePlaceholder</code></li> <li><code>TntCompany</code></li> <li><code>TntComponents</code></li> <li><code>TntExternalLink</code></li> <li><code>TntFaceID</code></li> <li><code>TntFingerprint</code></li> <li><code>TntLock</code></li> <li><code>TntMission</code></li> <li><code>TntNoApplications</code></li> <li><code>TntNoFlows</code></li> <li><code>TntNoUsers</code></li> <li><code>TntRadar</code></li> <li><code>TntSecrets</code></li> <li><code>TntServices</code></li> <li><code>TntSessionExpired</code></li> <li><code>TntSessionExpiring</code></li> <li><code>TntSuccess</code></li> <li><code>TntSuccessfulAuth</code></li> <li><code>TntSystems</code></li> <li><code>TntTeams</code></li> <li><code>TntTools</code></li> <li><code>TntUnableToLoad</code></li> <li><code>TntUnlock</code></li> <li><code>TntUnsuccessfulAuth</code></li> <li><code>TntUser2</code></li> </ul> <br><br> <b>Note:</b> By default the <code>BeforeSearch</code> illustration is loaded. <br> When using an illustration type, other than the default, it should be loaded in addition: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";</code> <br><br> <b>Note:</b> TNT illustrations cointain <code>Tnt</code> prefix in their name. You can import them removing the <code>Tnt</code> prefix like this: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";</code>"},{"default":"\"Auto\"","deprecated":false,"fieldName":"size","name":"size","type":{"text":"sap.ui.webc.fiori.types.IllustrationMessageSize"},"description":"Determines which illustration breakpoint variant is used. <br><br> Available options are: <ul> <li><code>Auto</code></li> <li><code>Base</code></li> <li><code>Spot</code></li> <li><code>Dialog</code></li> <li><code>Scene</code></li> </ul>\n\nAs <code>IllustratedMessage</code> adapts itself around the <code>Illustration</code>, the other elements of the component are displayed differently on the different breakpoints/illustration sizes."},{"default":"\"\"","deprecated":false,"fieldName":"subtitleText","name":"subtitle-text","type":{"text":"string"},"description":"Defines the subtitle of the component. <br><br> <b>Note:</b> Using this property, the default subtitle text of illustration will be overwritten. <br><br> <b>Note:</b> Using <code>subtitle</code> slot, the default of this property will be overwritten."},{"default":"\"\"","deprecated":false,"fieldName":"titleText","name":"title-text","type":{"text":"string"},"description":"Defines the title of the component. <br><br> <b>Note:</b> Using this property, the default title text of illustration will be overwritten."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging illustration, and conversational tone to better communicate an empty or a success state than just show a message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with <code>titleText</code> and <code>subtitleText</code> properties.\n\nTo display the desired illustration, use the <code>name</code> property, where you can find the list of all available illustrations. <br><br> <b>Note:</b> By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"</code> <br> <b>Note:</b> Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import:: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"</code>\n\n<h3>Structure</h3> The IllustratedMessage consists of the following elements, which are displayed below each other in the following order: <br> <ul> <li>Illustration</li> <li>Title</li> <li>Subtitle</li> <li>Actions</li> </ul>\n\n<h3>Usage</h3> <code>ui5-illustrated-message</code> is meant to be used inside container component, for example a <code>ui5-card</code>, a <code>ui5-dialog</code> or a <code>ui5-page</code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibleNameRef","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Receives id(or many ids) of the elements that label the component."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.IllustrationMessageType"},"default":"\"BeforeSearch\"","description":"Defines the illustration name that will be displayed in the component. <br><br> Available illustrations are: <ul> <li><code>AddColumn</code></li> <li><code>AddPeople</code></li> <li><code>AddDimensions</code></li> <li><code>BalloonSky</code></li> <li><code>BeforeSearch</code></li> <li><code>Connection</code></li> <li><code>EmptyCalendar</code></li> <li><code>EmptyList</code></li> <li><code>EmptyPlanningCalendar</code></li> <li><code>ErrorScreen</code></li> <li><code>FilterTable</code></li> <li><code>GroupTable</code></li> <li><code>NoActivities</code></li> <li><code>NoColumnsSet</code></li> <li><code>NoData</code></li> <li><code>NoEntries</code></li> <li><code>NoFilterResults</code></li> <li><code>NoMail_v1</code></li> <li><code>NoMail</code></li> <li><code>NoNotifications</code></li> <li><code>NoSavedItems_v1</code></li> <li><code>NoSavedItems</code></li> <li><code>NoSearchResults</code></li> <li><code>NoTasks_v1</code></li> <li><code>NoTasks</code></li> <li><code>NoDimensionsSet</code></li> <li><code>PageNotFound</code></li> <li><code>ReloadScreen</code></li> <li><code>ResizeColumn</code></li> <li><code>SearchEarth</code></li> <li><code>SearchFolder</code></li> <li><code>SimpleBalloon</code></li> <li><code>SimpleBell</code></li> <li><code>SimpleCalendar</code></li> <li><code>SimpleCheckMark</code></li> <li><code>SimpleConnection</code></li> <li><code>SimpleEmptyDoc</code></li> <li><code>SimpleEmptyList</code></li> <li><code>SimpleError</code></li> <li><code>SimpleMagnifier</code></li> <li><code>SimpleMail</code></li> <li><code>SimpleNoSavedItems</code></li> <li><code>SimpleNotFoundMagnifier</code></li> <li><code>SimpleReload</code></li> <li><code>SimpleTask</code></li> <li><code>SleepingBell</code></li> <li><code>SortColumn</code></li> <li><code>SuccessBalloon</code></li> <li><code>SuccessCheckMark</code></li> <li><code>SuccessHighFive</code></li> <li><code>SuccessScreen</code></li> <li><code>Survey</code></li> <li><code>Tent</code></li> <li><code>UnableToLoad</code></li> <li><code>UnableToLoadImage</code></li> <li><code>UnableToUpload</code></li> <li><code>UploadToCloud</code></li> <li><code>UploadCollection</code></li> <li><code>TntChartArea</code></li> <li><code>TntChartArea2</code></li> <li><code>TntChartBar</code></li> <li><code>TntChartBPMNFlow</code></li> <li><code>TntChartBullet</code></li> <li><code>TntChartDoughnut</code></li> <li><code>TntChartFlow</code></li> <li><code>TntChartGantt</code></li> <li><code>TntChartOrg</code></li> <li><code>TntChartPie</code></li> <li><code>TntCodePlaceholder</code></li> <li><code>TntCompany</code></li> <li><code>TntComponents</code></li> <li><code>TntExternalLink</code></li> <li><code>TntFaceID</code></li> <li><code>TntFingerprint</code></li> <li><code>TntLock</code></li> <li><code>TntMission</code></li> <li><code>TntNoApplications</code></li> <li><code>TntNoFlows</code></li> <li><code>TntNoUsers</code></li> <li><code>TntRadar</code></li> <li><code>TntSecrets</code></li> <li><code>TntServices</code></li> <li><code>TntSessionExpired</code></li> <li><code>TntSessionExpiring</code></li> <li><code>TntSuccess</code></li> <li><code>TntSuccessfulAuth</code></li> <li><code>TntSystems</code></li> <li><code>TntTeams</code></li> <li><code>TntTools</code></li> <li><code>TntUnableToLoad</code></li> <li><code>TntUnlock</code></li> <li><code>TntUnsuccessfulAuth</code></li> <li><code>TntUser2</code></li> </ul> <br><br> <b>Note:</b> By default the <code>BeforeSearch</code> illustration is loaded. <br> When using an illustration type, other than the default, it should be loaded in addition: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";</code> <br><br> <b>Note:</b> TNT illustrations cointain <code>Tnt</code> prefix in their name. You can import them removing the <code>Tnt</code> prefix like this: <br> <code>import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";</code>"},{"deprecated":false,"kind":"field","name":"size","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.IllustrationMessageSize"},"default":"\"Auto\"","description":"Determines which illustration breakpoint variant is used. <br><br> Available options are: <ul> <li><code>Auto</code></li> <li><code>Base</code></li> <li><code>Spot</code></li> <li><code>Dialog</code></li> <li><code>Scene</code></li> </ul>\n\nAs <code>IllustratedMessage</code> adapts itself around the <code>Illustration</code>, the other elements of the component are displayed differently on the different breakpoints/illustration sizes."},{"deprecated":false,"kind":"field","name":"subtitleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the subtitle of the component. <br><br> <b>Note:</b> Using this property, the default subtitle text of illustration will be overwritten. <br><br> <b>Note:</b> Using <code>subtitle</code> slot, the default of this property will be overwritten."},{"deprecated":false,"kind":"field","name":"titleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the title of the component. <br><br> <b>Note:</b> Using this property, the default title text of illustration will be overwritten."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"IllustratedMessage.js","name":"IllustratedMessage","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"IllustratedMessage","module":"IllustratedMessage.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-illustrated-message"}]},{"kind":"javascript-module","path":"MediaGallery.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MediaGallery","name":"MediaGallery","tagName":"ui5-media-gallery","slots":[{"deprecated":false,"description":"Defines the component items.\n\n<br><br> <b>Note:</b> Only one selected item is allowed.\n\n<br><br> <b>Note:</b> Use the <code>ui5-media-gallery-item</code> component to define the desired items.","name":"default"}],"events":[{"deprecated":false,"name":"display-area-click","type":"CustomEvent","description":"Fired when the display area is clicked.<br> The display area is the central area that contains the enlarged content of the currently selected item."},{"deprecated":false,"name":"overflow-click","type":"CustomEvent","description":"Fired when the thumbnails overflow button is clicked."},{"deprecated":false,"name":"selection-change","type":"CustomEvent","description":"Fired when selection is changed by user interaction."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"interactiveDisplayArea","name":"interactive-display-area","type":{"text":"boolean"},"description":"If enabled, a <code>display-area-click</code> event is fired when the user clicks or taps on the display area. <br> The display area is the central area that contains the enlarged content of the currently selected item."},{"default":"\"Auto\"","deprecated":false,"fieldName":"layout","name":"layout","type":{"text":"sap.ui.webc.fiori.types.MediaGalleryLayout"},"description":"Determines the layout of the component. <br><br> Available options are: <ul> <li><code>Auto</code></li> <li><code>Vertical</code></li> <li><code>Horizontal</code></li> </ul>"},{"default":"\"Left\"","deprecated":false,"fieldName":"menuHorizontalAlign","name":"menu-horizontal-align","type":{"text":"sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign"},"description":"Determines the horizontal alignment of the thumbnails menu vs. the central display area. <br><br> Available options are: <ul> <li><code>Left</code></li> <li><code>Right</code></li> </ul>"},{"default":"\"Bottom\"","deprecated":false,"fieldName":"menuVerticalAlign","name":"menu-vertical-align","type":{"text":"sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign"},"description":"Determines the vertical alignment of the thumbnails menu vs. the central display area. <br><br> Available options are: <ul> <li><code>Top</code></li> <li><code>Bottom</code></li> </ul>"},{"default":"false","deprecated":false,"fieldName":"showAllThumbnails","name":"show-all-thumbnails","type":{"text":"boolean"},"description":"If set to <code>true</code>, all thumbnails are rendered in a scrollable container. If <code>false</code>, only up to five thumbnails are rendered, followed by an overflow button that shows the count of the remaining thumbnails."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-media-gallery</code> component allows the user to browse through multimedia items. Currently, the supported items are images and videos. The items should be defined using the <code>ui5-media-gallery-item</code> component.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item is displayed in larger size. <br> The component is responsive by default and adjusts the position of the menu with respect to viewport size, but the application is able to further customize the layout via the provided API.\n\n<h3>Keyboard Handling</h3> The <code>ui5-media-gallery</code> provides advanced keyboard handling. <br> When the thumbnails menu is focused the following keyboard shortcuts allow the user to navigate through the thumbnail items: <br>\n\n<ul> <li>[UP/DOWN] - Navigates up and down the items</li> <li>[HOME] - Navigates to first item</li> <li>[END] - Navigates to the last item</li> <li>[SPACE/ENTER] - Select an item</li> </ul> <br>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/MediaGallery\";</code> <br> <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem\";</code>","members":[{"deprecated":false,"kind":"field","name":"interactiveDisplayArea","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"If enabled, a <code>display-area-click</code> event is fired when the user clicks or taps on the display area. <br> The display area is the central area that contains the enlarged content of the currently selected item."},{"deprecated":false,"kind":"field","name":"layout","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.MediaGalleryLayout"},"default":"\"Auto\"","description":"Determines the layout of the component. <br><br> Available options are: <ul> <li><code>Auto</code></li> <li><code>Vertical</code></li> <li><code>Horizontal</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"menuHorizontalAlign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign"},"default":"\"Left\"","description":"Determines the horizontal alignment of the thumbnails menu vs. the central display area. <br><br> Available options are: <ul> <li><code>Left</code></li> <li><code>Right</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"menuVerticalAlign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign"},"default":"\"Bottom\"","description":"Determines the vertical alignment of the thumbnails menu vs. the central display area. <br><br> Available options are: <ul> <li><code>Top</code></li> <li><code>Bottom</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"showAllThumbnails","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"If set to <code>true</code>, all thumbnails are rendered in a scrollable container. If <code>false</code>, only up to five thumbnails are rendered, followed by an overflow button that shows the count of the remaining thumbnails."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"MediaGallery.js","name":"MediaGallery","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MediaGallery","module":"MediaGallery.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-media-gallery"}]},{"kind":"javascript-module","path":"MediaGalleryItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MediaGalleryItem","name":"MediaGalleryItem","tagName":"ui5-media-gallery-item","slots":[{"deprecated":false,"description":"Defines the content of the component.","name":"default"},{"deprecated":false,"description":"Defines the content of the thumbnail.","name":"thumbnail"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is in disabled state."},{"default":"\"Square\"","deprecated":false,"fieldName":"layout","name":"layout","type":{"text":"sap.ui.webc.fiori.types.MediaGalleryItemLayout"},"description":"Determines the layout of the item container. <br><br> Available options are: <ul> <li><code>Square</code></li> <li><code>Wide</code></li> </ul>"},{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines the selected state of the component."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-media-gallery-item</code> web component represents the items displayed in the <code>ui5-media-gallery</code> web component. <br><br> <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>. <br><br>\n\n<h3>Keyboard Handling</h3> The <code>ui5-media-gallery</code> provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation: <br> <ul> <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";</code> (comes with <code>ui5-media-gallery</code>)","members":[{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is in disabled state."},{"deprecated":false,"kind":"field","name":"layout","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.MediaGalleryItemLayout"},"default":"\"Square\"","description":"Determines the layout of the item container. <br><br> Available options are: <ul> <li><code>Square</code></li> <li><code>Wide</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the selected state of the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"MediaGalleryItem.js","name":"MediaGalleryItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MediaGalleryItem","module":"MediaGalleryItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-media-gallery-item"}]},{"kind":"javascript-module","path":"NotificationAction.js","declarations":[{"deprecated":false,"customElement":true,"kind":"NotificationAction","name":"NotificationAction","tagName":"ui5-notification-action","events":[{"deprecated":false,"name":"click","type":"CustomEvent","description":"Fired, when the action is pressed."}],"attributes":[{"default":"\"Transparent\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.ButtonDesign"},"description":"Defines the action design.\n\n<br><br> <b>Note:</b> <ul> <li><code>Default</code></li> <li><code>Emphasized</code></li> <li><code>Positive</code></li> <li><code>Negative</code></li> <li><code>Transparent</code></li> </ul>"},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"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."},{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"string"},"description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous built-in icons. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the <code>ui5-notification-action</code>."}],"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.","members":[{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ButtonDesign"},"default":"\"Transparent\"","description":"Defines the action design.\n\n<br><br> <b>Note:</b> <ul> <li><code>Default</code></li> <li><code>Emphasized</code></li> <li><code>Positive</code></li> <li><code>Negative</code></li> <li><code>Transparent</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","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."},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous built-in icons. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the <code>ui5-notification-action</code>."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"NotificationAction.js","name":"NotificationAction","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"NotificationAction","module":"NotificationAction.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-notification-action"}]},{"kind":"javascript-module","path":"NotificationListGroupItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"NotificationListGroupItem","name":"NotificationListGroupItem","tagName":"ui5-li-notification-group","slots":[{"deprecated":false,"description":"Defines the items of the <code>ui5-li-notification-group</code>, usually <code>ui5-li-notification</code> items.","name":"default"}],"events":[{"deprecated":false,"name":"toggle","type":"CustomEvent","description":"Fired when the <code>ui5-li-notification-group</code> is expanded/collapsed by user interaction."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"collapsed","name":"collapsed","type":{"text":"boolean"},"description":"Defines if the group is collapsed or expanded."},{"default":"false","deprecated":false,"fieldName":"showCounter","name":"show-counter","type":{"text":"boolean"},"description":"Defines if the items <code>counter</code> would be displayed."}],"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>TitleText</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>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-li-notification-group</code> exposes the following CSS Shadow Parts: <ul> <li>title-text - Used to style the titleText of the notification list group item</li> </ul>\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)","members":[{"deprecated":false,"kind":"field","name":"collapsed","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the group is collapsed or expanded."},{"deprecated":false,"kind":"field","name":"showCounter","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the items <code>counter</code> would be displayed."}],"superclass":{"module":"NotificationListItemBase.js","name":"NotificationListItemBase","package":"@ui5/webcomponents-fiori"}}],"exports":[{"declaration":{"module":"NotificationListGroupItem.js","name":"NotificationListGroupItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"NotificationListGroupItem","module":"NotificationListGroupItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-li-notification-group"}]},{"kind":"javascript-module","path":"NotificationListItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"NotificationListItem","name":"NotificationListItem","tagName":"ui5-li-notification","slots":[{"deprecated":false,"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> property to <code>XS</code> to get the required size - <code><ui5-avatar size=\"XS\"></ui5-avatar></code>.","name":"avatar"},{"deprecated":false,"description":"Defines the content of the <code>ui5-li-notification</code>, usually a description of the notification.\n\n<br><br> <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.","name":"default"},{"deprecated":false,"description":"Defines the elements, displayed in the footer of the of the component.","name":"footnotes"}],"attributes":[{"default":"\"None\"","deprecated":false,"fieldName":"wrappingType","name":"wrapping-type","type":{"text":"sap.ui.webc.main.types.WrappingType"},"description":"Defines if the <code>titleText</code> and <code>description</code> should wrap, they truncate by default.\n\n<br><br> <b>Note:</b> by default the <code>titleText</code> and <code>description</code>, and a <code>ShowMore/Less</code> button would be displayed."}],"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>titleText</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>titleText</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>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-li-notification</code> exposes the following CSS Shadow Parts: <ul> <li>title-text - Used to style the titleText of the notification list item</li> </ul>\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)","members":[{"deprecated":false,"kind":"field","name":"wrappingType","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.WrappingType"},"default":"\"None\"","description":"Defines if the <code>titleText</code> and <code>description</code> should wrap, they truncate by default.\n\n<br><br> <b>Note:</b> by default the <code>titleText</code> and <code>description</code>, and a <code>ShowMore/Less</code> button would be displayed."}],"superclass":{"module":"NotificationListItemBase.js","name":"NotificationListItemBase","package":"@ui5/webcomponents-fiori"}}],"exports":[{"declaration":{"module":"NotificationListItem.js","name":"NotificationListItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"NotificationListItem","module":"NotificationListItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-li-notification"}]},{"kind":"javascript-module","path":"Page.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Page","name":"Page","tagName":"ui5-page","slots":[{"deprecated":false,"description":"Defines the content HTML Element.","name":"default"},{"deprecated":false,"description":"Defines the footer HTML Element.","name":"footer"},{"deprecated":false,"description":"Defines the header HTML Element.","name":"header"}],"attributes":[{"default":"\"Solid\"","deprecated":false,"fieldName":"backgroundDesign","name":"background-design","type":{"text":"sap.ui.webc.fiori.types.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>Solid</code></li> (default) <li><code>Transparent</code></li> <li><code>List</code></li> </ul>"},{"default":"false","deprecated":false,"fieldName":"disableScrolling","name":"disable-scrolling","type":{"text":"boolean"},"description":"Disables vertical scrolling of page content. If set to true, there will be no vertical scrolling at all."},{"default":"true","deprecated":false,"fieldName":"floatingFooter","name":"floating-footer","type":{"text":"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."},{"default":"false","deprecated":false,"fieldName":"hideFooter","name":"hide-footer","type":{"text":"boolean"},"description":"Defines the footer visibility."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-page</code> is a container component that holds one whole screen of an application. The page has three distinct areas that can hold content - a header, content area and a footer. <h3>Structure</h3> <h4>Header</h4> 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<b>Note:</b> <code>ui5-page</code> occipues the whole available space of its parent. In order to achieve the intended design you have to make sure that there is enough space for the <code>ui5-page</code> to be rendered. <b>Note:</b> In order for the <code>ui5-page</code> to be displayed, the parent element should have fixed height.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents-fiori/dist/Page.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"backgroundDesign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.PageBackgroundDesign"},"default":"\"Solid\"","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>Solid</code></li> (default) <li><code>Transparent</code></li> <li><code>List</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"disableScrolling","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Disables vertical scrolling of page content. If set to true, there will be no vertical scrolling at all."},{"deprecated":false,"kind":"field","name":"floatingFooter","privacy":"public","static":false,"type":{"text":"boolean"},"default":"true","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."},{"deprecated":false,"kind":"field","name":"hideFooter","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the footer visibility."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Page.js","name":"Page","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Page","module":"Page.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-page"}]},{"kind":"javascript-module","path":"ProductSwitch.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ProductSwitch","name":"ProductSwitch","tagName":"ui5-product-switch","slots":[{"deprecated":false,"description":"Defines the items of the <code>ui5-product-switch</code>.","name":"default"}],"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>\n\n<h3>Keyboard Handling</h3> The <code>ui5-product-switch</code> provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation: <br> <ul> <li>[TAB] - Move focus to the next interactive element after the <code>ui5-product-switch</code></li> <li>[UP/DOWN] - Navigates up and down the items </li> <li>[LEFT/RIGHT] - Navigates left and right the items</li> </ul> <br> <br>\n\n<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>)","superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ProductSwitch.js","name":"ProductSwitch","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ProductSwitch","module":"ProductSwitch.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-product-switch"}]},{"kind":"javascript-module","path":"ProductSwitchItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ProductSwitchItem","name":"ProductSwitchItem","tagName":"ui5-product-switch-item","events":[{"deprecated":false,"name":"click","type":"CustomEvent","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."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"string"},"description":"Defines the icon to be displayed as a graphical element within the component. <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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"default":"\"\"","deprecated":false,"fieldName":"subtitleText","name":"subtitle-text","type":{"text":"string"},"description":"Defines the subtitle of the component."},{"deprecated":false,"fieldName":"target","name":"target","type":{"text":"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>"},{"default":"\"\"","deprecated":false,"fieldName":"targetSrc","name":"target-src","type":{"text":"string"},"description":"Defines the component target URI. Supports standard hyperlink behavior."},{"default":"\"\"","deprecated":false,"fieldName":"titleText","name":"title-text","type":{"text":"string"},"description":"Defines the title of the component."}],"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>\n\n<h3>Keyboard Handling</h3> The <code>ui5-product-switch</code> provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation: <br> <ul> <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the icon to be displayed as a graphical element within the component. <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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"deprecated":false,"kind":"field","name":"subtitleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the subtitle of the component."},{"deprecated":false,"kind":"field","name":"target","privacy":"public","static":false,"type":{"text":"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>"},{"deprecated":false,"kind":"field","name":"targetSrc","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the component target URI. Supports standard hyperlink behavior."},{"deprecated":false,"kind":"field","name":"titleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the title of the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ProductSwitchItem.js","name":"ProductSwitchItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ProductSwitchItem","module":"ProductSwitchItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-product-switch-item"}]},{"kind":"javascript-module","path":"ShellBar.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ShellBar","name":"ShellBar","tagName":"ui5-shellbar","slots":[{"deprecated":false,"description":"Defines the <code>ui5-shellbar</code> aditional items. <br><br> <b>Note:</b> You can use the  <ui5-shellbar-item></ui5-shellbar-item>.","name":"default"},{"deprecated":false,"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":"logo"},{"deprecated":false,"description":"Defines the items displayed in menu after a click on the primary title. <br><br> <b>Note:</b> You can use the  <ui5-li></ui5-li> and its ancestors.","name":"menuItems"},{"deprecated":false,"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":"profile"},{"deprecated":false,"description":"Defines the <code>ui5-input</code>, that will be used as a search field.","name":"searchField"},{"deprecated":false,"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.","name":"startButton"}],"events":[{"deprecated":false,"name":"co-pilot-click","type":"CustomEvent","description":"Fired, when the co pilot is activated."},{"deprecated":false,"name":"logo-click","type":"CustomEvent","description":"Fired, when the logo is activated."},{"deprecated":false,"name":"menu-item-click","type":"CustomEvent","description":"Fired, when a menu item is activated <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>."},{"deprecated":false,"name":"notifications-click","type":"CustomEvent","description":"Fired, when the notification icon is activated."},{"deprecated":false,"name":"product-switch-click","type":"CustomEvent","description":"Fired, when the product switch icon is activated. <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>."},{"deprecated":false,"name":"profile-click","type":"CustomEvent","description":"Fired, when the profile slot is present."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"notificationsCount","name":"notifications-count","type":{"text":"string"},"description":"Defines the <code>notificationsCount</code>, displayed in the notification icon top-right corner."},{"default":"\"\"","deprecated":false,"fieldName":"primaryTitle","name":"primary-title","type":{"text":"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)."},{"default":"\"\"","deprecated":false,"fieldName":"secondaryTitle","name":"secondary-title","type":{"text":"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)."},{"default":"false","deprecated":false,"fieldName":"showCoPilot","name":"show-co-pilot","type":{"text":"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."},{"default":"false","deprecated":false,"fieldName":"showNotifications","name":"show-notifications","type":{"text":"boolean"},"description":"Defines, if the notification icon would be displayed."},{"default":"false","deprecated":false,"fieldName":"showProductSwitch","name":"show-product-switch","type":{"text":"boolean"},"description":"Defines, if the product switch icon would be displayed."},{"default":"false","deprecated":false,"fieldName":"showSearchField","name":"show-search-field","type":{"text":"boolean"},"description":"Defines, if the Search Field would be displayed when there is a valid <code>searchField</code> slot. <br><b>Note:</b> By default the Search Field is not displayed."}],"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\n<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-shellbar</code> exposes the following CSS Shadow Parts: <ul> <li>root - Used to style the outermost wrapper of the <code>ui5-shellbar</code></li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/ShellBar\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibilityAttributes","privacy":"public","static":false,"type":{"text":"object"},"description":"An object of strings that defines several additional accessibility attribute values for customization depending on the use case.\n\nIt supports the following fields:\n\n<ul> <li><code>expanded</code>: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: <ul> <li><code>true</code></li> <li><code>false</code></li> </ul> </li> <li><code>hasPopup</code>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values: <ul> <li><code>Dialog</code></li> <li><code>Grid</code></li> <li><code>ListBox</code></li> <li><code>Menu</code></li> <li><code>Tree</code></li> </ul> </li> </ul>"},{"deprecated":false,"kind":"field","name":"accessibilityRoles","privacy":"public","static":false,"type":{"text":"object"},"description":"An object of strings that defines additional accessibility roles for further customization.\n\nIt supports the following fields: - <code>logoRole</code>: the accessibility role for the <code>logo</code>"},{"deprecated":false,"kind":"field","name":"accessibilityTexts","privacy":"public","static":false,"type":{"text":"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 - <code>logoTitle</code>: defines the tooltip for the logo"},{"deprecated":false,"kind":"field","name":"copilotDomRef","privacy":"public","static":false,"type":{"text":"HTMLElement"},"description":"Returns the <code>copilot</code> DOM ref."},{"deprecated":false,"kind":"field","name":"logoDomRef","privacy":"public","static":false,"type":{"text":"HTMLElement"},"description":"Returns the <code>logo</code> DOM ref."},{"deprecated":false,"kind":"field","name":"notificationsCount","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the <code>notificationsCount</code>, displayed in the notification icon top-right corner."},{"deprecated":false,"kind":"field","name":"notificationsDomRef","privacy":"public","static":false,"type":{"text":"HTMLElement"},"description":"Returns the <code>notifications</code> icon DOM ref."},{"deprecated":false,"kind":"field","name":"overflowDomRef","privacy":"public","static":false,"type":{"text":"HTMLElement"},"description":"Returns the <code>overflow</code> icon DOM ref."},{"deprecated":false,"kind":"field","name":"primaryTitle","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","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)."},{"deprecated":false,"kind":"field","name":"productSwitchDomRef","privacy":"public","static":false,"type":{"text":"HTMLElement"},"description":"Returns the <code>product-switch</code> icon DOM ref."},{"deprecated":false,"kind":"field","name":"profileDomRef","privacy":"public","static":false,"type":{"text":"HTMLElement"},"description":"Returns the <code>profile</code> icon DOM ref."},{"deprecated":false,"kind":"field","name":"secondaryTitle","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","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)."},{"deprecated":false,"kind":"field","name":"showCoPilot","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","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."},{"deprecated":false,"kind":"field","name":"showNotifications","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines, if the notification icon would be displayed."},{"deprecated":false,"kind":"field","name":"showProductSwitch","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines, if the product switch icon would be displayed."},{"deprecated":false,"kind":"field","name":"showSearchField","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines, if the Search Field would be displayed when there is a valid <code>searchField</code> slot. <br><b>Note:</b> By default the Search Field is not displayed."},{"deprecated":false,"kind":"method","name":"closeOverflow","privacy":"public","description":"Closes the overflow area. Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ShellBar.js","name":"ShellBar","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ShellBar","module":"ShellBar.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-shellbar"}]},{"kind":"javascript-module","path":"ShellBarItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ShellBarItem","name":"ShellBarItem","tagName":"ui5-shellbar-item","events":[{"deprecated":false,"name":"click","type":"NativeEvent","description":"Fired, when the item is pressed."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"count","name":"count","type":{"text":"string"},"description":"Defines the count displayed in the top-right corner."},{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"string"},"description":"Defines the name of the item's icon."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the item text."}],"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>","members":[{"deprecated":false,"kind":"field","name":"count","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the count displayed in the top-right corner."},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the name of the item's icon."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the item text."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ShellBarItem.js","name":"ShellBarItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ShellBarItem","module":"ShellBarItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-shellbar-item"}]},{"kind":"javascript-module","path":"SideNavigation.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SideNavigation","name":"SideNavigation","tagName":"ui5-side-navigation","slots":[{"deprecated":false,"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":"default"},{"deprecated":false,"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":"fixedItems"},{"deprecated":false,"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;","name":"header"}],"events":[{"deprecated":false,"name":"selection-change","type":"CustomEvent","description":"Fired when the selection has changed via user interaction"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"collapsed","name":"collapsed","type":{"text":"boolean"},"description":"Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed."}],"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>Keyboard Handling</h3>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code> <br><br>\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>)","members":[{"deprecated":false,"kind":"field","name":"collapsed","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SideNavigation.js","name":"SideNavigation","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SideNavigation","module":"SideNavigation.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-side-navigation"}]},{"kind":"javascript-module","path":"SideNavigationItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SideNavigationItem","name":"SideNavigationItem","tagName":"ui5-side-navigation-item","slots":[{"deprecated":false,"description":"Defines nested items by passing <code>ui5-side-navigation-sub-item</code> to the default slot.","name":"default"}],"events":[{"deprecated":false,"name":"click","type":"CustomEvent","description":"Fired when the component is activated either with a click/tap or by using the Enter or Space key."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"expanded","name":"expanded","type":{"text":"boolean"},"description":"Defines if the item is expanded"},{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines whether the subitem is selected"},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the item."},{"default":"false","deprecated":false,"fieldName":"wholeItemToggleable","name":"whole-item-toggleable","type":{"text":"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."}],"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>","members":[{"deprecated":false,"kind":"field","name":"expanded","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the item is expanded"},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the subitem is selected"},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the item."},{"deprecated":false,"kind":"field","name":"wholeItemToggleable","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","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."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SideNavigationItem.js","name":"SideNavigationItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SideNavigationItem","module":"SideNavigationItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-side-navigation-item"}]},{"kind":"javascript-module","path":"SideNavigationSubItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SideNavigationSubItem","name":"SideNavigationSubItem","tagName":"ui5-side-navigation-sub-item","events":[{"deprecated":false,"name":"click","type":"CustomEvent","description":"Fired when the component is activated either with a click/tap or by using the Enter or Space key."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines whether the subitem is selected."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the item."}],"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>","members":[{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the subitem is selected."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the item."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SideNavigationSubItem.js","name":"SideNavigationSubItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SideNavigationSubItem","module":"SideNavigationSubItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-side-navigation-sub-item"}]},{"kind":"javascript-module","path":"SortItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SortItem","name":"SortItem","tagName":"ui5-sort-item","attributes":[{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines if the component is selected."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the component."}],"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>","members":[{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the component is selected."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SortItem.js","name":"SortItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SortItem","module":"SortItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-sort-item"}]},{"kind":"javascript-module","path":"Timeline.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Timeline","name":"Timeline","tagName":"ui5-timeline","slots":[{"deprecated":false,"description":"Determines the content of the <code>ui5-timeline</code>.","name":"default"}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"Vertical\"","deprecated":false,"fieldName":"layout","name":"layout","type":{"text":"sap.ui.webc.fiori.types.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>"}],"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.","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"deprecated":false,"kind":"field","name":"layout","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.TimelineLayout"},"default":"\"Vertical\"","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>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Timeline.js","name":"Timeline","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Timeline","module":"Timeline.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-timeline"}]},{"kind":"javascript-module","path":"TimelineItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TimelineItem","name":"TimelineItem","tagName":"ui5-timeline-item","slots":[{"deprecated":false,"description":"Determines the description of the <code>ui5-timeline-item</code>.","name":"default"}],"events":[{"deprecated":false,"name":"name-click","type":"CustomEvent","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>name-clickable</code> attribute is not set."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Defines the name of the item, displayed before the <code>title-text</code>."},{"default":"false","deprecated":false,"fieldName":"nameClickable","name":"name-clickable","type":{"text":"boolean"},"description":"Defines if the <code>name</code> is clickable."},{"default":"\"\"","deprecated":false,"fieldName":"subtitleText","name":"subtitle-text","type":{"text":"string"},"description":"Defines the subtitle text of the component."},{"default":"\"\"","deprecated":false,"fieldName":"titleText","name":"title-text","type":{"text":"string"},"description":"Defines the title text of the component."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nAn entry posted on the timeline.","members":[{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the name of the item, displayed before the <code>title-text</code>."},{"deprecated":false,"kind":"field","name":"nameClickable","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the <code>name</code> is clickable."},{"deprecated":false,"kind":"field","name":"subtitleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the subtitle text of the component."},{"deprecated":false,"kind":"field","name":"titleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the title text of the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"TimelineItem.js","name":"TimelineItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TimelineItem","module":"TimelineItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-timeline-item"}]},{"kind":"javascript-module","path":"UploadCollection.js","declarations":[{"deprecated":false,"customElement":true,"kind":"UploadCollection","name":"UploadCollection","tagName":"ui5-upload-collection","slots":[{"deprecated":false,"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":"default"},{"deprecated":false,"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.","name":"header"}],"events":[{"deprecated":false,"name":"drop","type":"NativeEvent","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>."},{"deprecated":false,"name":"item-delete","type":"CustomEvent","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>."},{"deprecated":false,"name":"selection-change","type":"CustomEvent","description":"Fired when selection is changed by user interaction in <code>SingleSelect</code> and <code>MultiSelect</code> modes."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"false","deprecated":false,"fieldName":"hideDragOverlay","name":"hide-drag-overlay","type":{"text":"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. <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 displays an overlay."},{"default":"\"None\"","deprecated":false,"fieldName":"mode","name":"mode","type":{"text":"sap.ui.webc.main.types.ListMode"},"description":"Defines the mode of the <code>ui5-upload-collection</code>.\n\n<br><br> <b>Note:</b> <ul> <li><code>None</code></li> <li><code>SingleSelect</code></li> <li><code>MultiSelect</code></li> <li><code>Delete</code></li> </ul>"},{"default":"\"\"","deprecated":false,"fieldName":"noDataDescription","name":"no-data-description","type":{"text":"string"},"description":"Allows you to set your own text for the 'No data' description."},{"default":"\"\"","deprecated":false,"fieldName":"noDataText","name":"no-data-text","type":{"text":"string"},"description":"Allows you to set your own text for the 'No data' text."}],"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>)","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the accessible ARIA name of the component."},{"deprecated":false,"kind":"field","name":"hideDragOverlay","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","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. <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 displays an overlay."},{"deprecated":false,"kind":"field","name":"mode","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ListMode"},"default":"\"None\"","description":"Defines the mode of the <code>ui5-upload-collection</code>.\n\n<br><br> <b>Note:</b> <ul> <li><code>None</code></li> <li><code>SingleSelect</code></li> <li><code>MultiSelect</code></li> <li><code>Delete</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"noDataDescription","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Allows you to set your own text for the 'No data' description."},{"deprecated":false,"kind":"field","name":"noDataText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Allows you to set your own text for the 'No data' text."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"UploadCollection.js","name":"UploadCollection","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"UploadCollection","module":"UploadCollection.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-upload-collection"}]},{"kind":"javascript-module","path":"UploadCollectionItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"UploadCollectionItem","name":"UploadCollectionItem","tagName":"ui5-upload-collection-item","slots":[{"deprecated":false,"description":"Hold the description of the <code>ui5-upload-collection-item</code>. Will be shown below the file name.","name":"default"},{"deprecated":false,"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.","name":"thumbnail"}],"events":[{"deprecated":false,"name":"file-name-click","type":"CustomEvent","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>."},{"deprecated":false,"name":"rename","type":"CustomEvent","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>."},{"deprecated":false,"name":"retry","type":"CustomEvent","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>."},{"deprecated":false,"name":"terminate","type":"CustomEvent","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>."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"disableDeleteButton","name":"disable-delete-button","type":{"text":"boolean"},"description":"Disables the delete button."},{"default":"null","deprecated":false,"fieldName":"file","name":"file","type":{"text":"File"},"description":"Holds an instance of <code>File</code> associated with this item."},{"default":"\"\"","deprecated":false,"fieldName":"fileName","name":"file-name","type":{"text":"string"},"description":"The name of the file."},{"default":"false","deprecated":false,"fieldName":"fileNameClickable","name":"file-name-clickable","type":{"text":"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."},{"default":"false","deprecated":false,"fieldName":"hideRetryButton","name":"hide-retry-button","type":{"text":"boolean"},"description":"Hides the retry button when <code>uploadState</code> property is <code>Error</code>."},{"default":"false","deprecated":false,"fieldName":"hideTerminateButton","name":"hide-terminate-button","type":{"text":"boolean"},"description":"Hides the terminate button when <code>uploadState</code> property is <code>Uploading</code>."},{"default":"0","deprecated":false,"fieldName":"progress","name":"progress","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"The upload progress in percentage. <br><br> <b>Note:</b> Expected values are in the interval [0, 100]."},{"default":"\"Ready\"","deprecated":false,"fieldName":"uploadState","name":"upload-state","type":{"text":"sap.ui.webc.fiori.types.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."}],"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>","members":[{"deprecated":false,"kind":"field","name":"disableDeleteButton","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Disables the delete button."},{"deprecated":false,"kind":"field","name":"file","privacy":"public","static":false,"type":{"text":"File"},"default":"null","description":"Holds an instance of <code>File</code> associated with this item."},{"deprecated":false,"kind":"field","name":"fileName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"The name of the file."},{"deprecated":false,"kind":"field","name":"fileNameClickable","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","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."},{"deprecated":false,"kind":"field","name":"hideRetryButton","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Hides the retry button when <code>uploadState</code> property is <code>Error</code>."},{"deprecated":false,"kind":"field","name":"hideTerminateButton","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Hides the terminate button when <code>uploadState</code> property is <code>Uploading</code>."},{"deprecated":false,"kind":"field","name":"progress","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"0","description":"The upload progress in percentage. <br><br> <b>Note:</b> Expected values are in the interval [0, 100]."},{"deprecated":false,"kind":"field","name":"uploadState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.UploadState"},"default":"\"Ready\"","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."}],"superclass":{"module":"ListItem.js","name":"ListItem","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"UploadCollectionItem.js","name":"UploadCollectionItem","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"UploadCollectionItem","module":"UploadCollectionItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-upload-collection-item"}]},{"kind":"javascript-module","path":"ViewSettingsDialog.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ViewSettingsDialog","name":"ViewSettingsDialog","tagName":"ui5-view-settings-dialog","slots":[{"deprecated":false,"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":"filterItems"},{"deprecated":false,"description":"Defines the list of items against which the user could sort data. <b>Note:</b> If you want to use this slot, you need to import used item: <code>import \"@ui5/webcomponents-fiori/dist/SortItem\";</code>","name":"sortItems"}],"events":[{"deprecated":false,"name":"before-open","type":"CustomEvent","description":"Fired before the component is opened. <b>This event does not bubble.</b>"},{"deprecated":false,"name":"cancel","type":"CustomEvent","description":"Fired when cancel button is activated."},{"deprecated":false,"name":"confirm","type":"CustomEvent","description":"Fired when confirmation button is activated."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"sortDescending","name":"sort-descending","type":{"text":"boolean"},"description":"Defines the initial sort order."}],"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-fiori/dist/ViewSettingsDialog\";</code>","members":[{"deprecated":false,"kind":"field","name":"sortDescending","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the initial sort order."},{"deprecated":false,"kind":"method","name":"setConfirmedSettings","privacy":"public","description":"Sets a JavaScript object, as settings to the <code>ui5-view-settings-dialog</code>. This method can be used after the dialog is initially open, as the dialog need to set its initial settings. The <code>ui5-view-settings-dialog</code> throws an event called \"before-open\", this can be used as trigger point. The object should have the following format: <code> {sortOrder: \"Ascending\", sortBy: \"Name\", filters: [{\"Filter 1\": [\"Some filter 1\", \"Some filter 2\"]}, {\"Filter 2\": [\"Some filter 4\"]}]} </code>","parameters":[{"deprecated":false,"name":"settings","type":{"text":"Object"},"description":"predefined settings."}]},{"deprecated":false,"kind":"method","name":"show","privacy":"public","description":"Shows the dialog."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ViewSettingsDialog.js","name":"ViewSettingsDialog","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ViewSettingsDialog","module":"ViewSettingsDialog.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-view-settings-dialog"}]},{"kind":"javascript-module","path":"Wizard.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Wizard","name":"Wizard","tagName":"ui5-wizard","slots":[{"deprecated":false,"description":"Defines the steps. <br><br> <b>Note:</b> Use the available <code>ui5-wizard-step</code> component.","name":"default"}],"events":[{"deprecated":false,"name":"step-change","type":"CustomEvent","description":"Fired when the step is changed by user interaction - either with scrolling, or by clicking on the steps within the component header."}],"attributes":[{"default":"\"MultipleSteps\"","deprecated":false,"fieldName":"contentLayout","name":"content-layout","type":{"text":"sap.ui.webc.fiori.types.WizardContentLayout"},"description":"Defines how the content of the <code>ui5-wizard</code> would be visualized."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-wizard</code> helps users to complete a complex task by dividing it into sections and guiding them 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> <li> Steps might have labels for better readability - titleText and subTitleText.</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<h3>CSS Shadow Parts</h3>\n\n<ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM. <br> The <code>ui5-wizard</code> exposes the following CSS Shadow Parts: <ul> <li>navigator - Used to style the progress navigator of the <code>ui5-wizard</code>.</li> <li>step-content - Used to style a <code>ui5-wizard-step</code> container.</li> </ul>\n\n<h3>Keyboard Handling</h3> The user can navigate using the following keyboard shortcuts: <br>\n\n<h4>Wizard Progress Navigation</h4> <ul> <li>[LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.</li> <li>[UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.</li> <li>[SPACE] or [ENTER], [RETURN] - Selects an active step</li> <li>[HOME] or [PAGE UP] - Focus goes to the first step</li> <li>[END] or [PAGE DOWN] - Focus goes to the last step</li> </ul>\n\n<h4>Fast Navigation</h4> This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up</code>. In order to use this functionality, you need to import the following module: <code>import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"</code>\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><ui5-dialog style=\"height: 80%\"><br></code> <code>	<ui5-wizard></ui5-wizard><br></code> <code></ui5-dialog></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>. 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 or unfamiliar task.\n\n<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 titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap. Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents-fiori/dist/Wizard.js\";</code> (includes <ui5-wizard-step/>)","members":[{"deprecated":false,"kind":"field","name":"contentLayout","privacy":"public","static":false,"type":{"text":"sap.ui.webc.fiori.types.WizardContentLayout"},"default":"\"MultipleSteps\"","description":"Defines how the content of the <code>ui5-wizard</code> would be visualized."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Wizard.js","name":"Wizard","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Wizard","module":"Wizard.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-wizard"}]},{"kind":"javascript-module","path":"WizardStep.js","declarations":[{"deprecated":false,"customElement":true,"kind":"WizardStep","name":"WizardStep","tagName":"ui5-wizard-step","slots":[{"deprecated":false,"description":"Defines the step content.","name":"default"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"branching","name":"branching","type":{"text":"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."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"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."},{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"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."},{"default":"\"\"","deprecated":false,"fieldName":"subtitleText","name":"subtitle-text","type":{"text":"string"},"description":"Defines the <code>subtitleText</code> of the step. <br><br>\n\n<b>Note:</b> the text is displayed in the <code>ui5-wizard</code> navigation header."},{"default":"\"\"","deprecated":false,"fieldName":"titleText","name":"title-text","type":{"text":"string"},"description":"Defines the <code>titleText</code> of the step. <br><br>\n\n<b>Note:</b> The text is displayed in the <code>ui5-wizard</code> navigation header."}],"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 form 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>titleText</code> and <code>subtitleText</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.","members":[{"deprecated":false,"kind":"field","name":"branching","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","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."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","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."},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","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://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>."},{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","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."},{"deprecated":false,"kind":"field","name":"subtitleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the <code>subtitleText</code> of the step. <br><br>\n\n<b>Note:</b> the text is displayed in the <code>ui5-wizard</code> navigation header."},{"deprecated":false,"kind":"field","name":"titleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the <code>titleText</code> of the step. <br><br>\n\n<b>Note:</b> The text is displayed in the <code>ui5-wizard</code> navigation header."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"WizardStep.js","name":"WizardStep","package":"@ui5/webcomponents-fiori"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"WizardStep","module":"WizardStep.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-wizard-step"}]}]}; })