@openui5/sap.ui.webc.main 1.116.0 → 1.117.0

package/src/sap/ui/webc/main/thirdparty/custom-elements.json.js

@@ -1 +0,0 @@
-sap.ui.define(['exports'], function(exports) {  'use strict'; exports["default"] = {"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"Avatar.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Avatar","name":"Avatar","tagName":"ui5-avatar","slots":[{"deprecated":false,"description":"Defines the optional badge that will be used for visual affordance. <b>Note:</b> While the slot allows for custom badges, to achieve the Fiori design, please use <code>ui5-badge</code> with <code>ui5-icon</code> in the corresponding <code>icon</code> slot, without text nodes. <br><br> Example: <br><br> &lt;ui5-avatar><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-badge slot=\"badge\"><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-icon slot=\"icon\" name=\"employee\">&lt;/ui5-icon><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ui5-badge><br> &lt;/ui5-avatar> <br><br> <ui5-avatar initials=\"AB\" color-scheme=\"Accent1\"> <ui5-badge slot=\"badge\"> <ui5-icon slot=\"icon\" name=\"accelerated\"></ui5-icon> </ui5-badge> </ui5-avatar>","name":"badge"},{"deprecated":false,"description":"Receives the desired <code>&lt;img&gt;</code> tag\n\n<b>Note:</b> If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS: <br /> <br /> <code> ui5-avatar:not(:defined) { <br /> &nbsp;visibility: hidden; <br /> } <br /> </code>","name":"default"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the text alternative of the component. If not provided a default text alternative will be set, if present."},{"default":"\"Accent6\"","deprecated":false,"fieldName":"colorScheme","name":"color-scheme","type":{"text":"sap.ui.webc.main.types.AvatarColorScheme"},"description":"Defines the background color of the desired image. <br><br> Available options are: <ul> <li><code>Accent1</code></li> <li><code>Accent2</code></li> <li><code>Accent3</code></li> <li><code>Accent4</code></li> <li><code>Accent5</code></li> <li><code>Accent6</code></li> <li><code>Accent7</code></li> <li><code>Accent8</code></li> <li><code>Accent9</code></li> <li><code>Accent10</code></li> <li><code>Placeholder</code></li> </ul>"},{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"string"},"description":"Defines the name of the UI5 Icon, that will be displayed. <br> <b>Note:</b> If <code>image</code> slot is provided, the property will be ignored. <br> <b>Note:</b> You should import the desired icon first, then use its name as \"icon\". <br><br> import \"@ui5/webcomponents-icons/dist/{icon_name}.js\" <br> <pre>&lt;ui5-avatar icon=\"employee\"></pre> <br> <b>Note:</b> If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\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":"initials","name":"initials","type":{"text":"string"},"description":"Defines the displayed initials. <br> Up to three Latin letters can be displayed as initials."},{"default":"false","deprecated":false,"fieldName":"interactive","name":"interactive","type":{"text":"boolean"},"description":"Defines if the avatar is interactive (focusable and pressable)."},{"default":"\"Circle\"","deprecated":false,"fieldName":"shape","name":"shape","type":{"text":"sap.ui.webc.main.types.AvatarShape"},"description":"Defines the shape of the component. <br><br> Available options are: <ul> <li><code>Circle</code></li> <li><code>Square</code></li> </ul>"},{"default":"\"S\"","deprecated":false,"fieldName":"size","name":"size","type":{"text":"sap.ui.webc.main.types.AvatarSize"},"description":"Defines predefined size of the component. <br><br> Available options are: <ul> <li><code>XS</code></li> <li><code>S</code></li> <li><code>M</code></li> <li><code>L</code></li> <li><code>XL</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nAn image-like component that has different display options for representing images and icons in different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to set a custom size.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<ul> <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li> <li>[SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.</li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Avatar.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text alternative of the component. If not provided a default text alternative will be set, if present."},{"deprecated":false,"kind":"field","name":"colorScheme","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.AvatarColorScheme"},"default":"\"Accent6\"","description":"Defines the background color of the desired image. <br><br> Available options are: <ul> <li><code>Accent1</code></li> <li><code>Accent2</code></li> <li><code>Accent3</code></li> <li><code>Accent4</code></li> <li><code>Accent5</code></li> <li><code>Accent6</code></li> <li><code>Accent7</code></li> <li><code>Accent8</code></li> <li><code>Accent9</code></li> <li><code>Accent10</code></li> <li><code>Placeholder</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the name of the UI5 Icon, that will be displayed. <br> <b>Note:</b> If <code>image</code> slot is provided, the property will be ignored. <br> <b>Note:</b> You should import the desired icon first, then use its name as \"icon\". <br><br> import \"@ui5/webcomponents-icons/dist/{icon_name}.js\" <br> <pre>&lt;ui5-avatar icon=\"employee\"></pre> <br> <b>Note:</b> If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\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":"initials","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the displayed initials. <br> Up to three Latin letters can be displayed as initials."},{"deprecated":false,"kind":"field","name":"interactive","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the avatar is interactive (focusable and pressable)."},{"deprecated":false,"kind":"field","name":"shape","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.AvatarShape"},"default":"\"Circle\"","description":"Defines the shape of the component. <br><br> Available options are: <ul> <li><code>Circle</code></li> <li><code>Square</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"size","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.AvatarSize"},"default":"\"S\"","description":"Defines predefined size of the component. <br><br> Available options are: <ul> <li><code>XS</code></li> <li><code>S</code></li> <li><code>M</code></li> <li><code>L</code></li> <li><code>XL</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Avatar.js","name":"Avatar","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Avatar","module":"Avatar.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-avatar"}]},{"kind":"javascript-module","path":"AvatarGroup.js","declarations":[{"deprecated":false,"customElement":true,"kind":"AvatarGroup","name":"AvatarGroup","tagName":"ui5-avatar-group","slots":[{"deprecated":false,"description":"Defines the items of the component. Use the <code>ui5-avatar</code> component as an item. <br><br> <b>Note:</b> The UX guidelines recommends using avatars with \"Circle\" shape. Moreover, if you use avatars with \"Square\" shape, there will be visual inconsistency as the built-in overflow action has \"Circle\" shape.","name":"default"},{"deprecated":false,"description":"Defines the overflow button of the component. <b>Note:</b> We recommend using the <code>ui5-button</code> component. <br><br> <b>Note:</b> If this slot is not used, the component will display the built-in overflow button.","name":"overflowButton"}],"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."},{"deprecated":false,"name":"overflow","type":"CustomEvent","description":"Fired when the count of visible <code>ui5-avatar</code> elements in the component has changed"}],"attributes":[{"default":"\"Group\"","deprecated":false,"fieldName":"type","name":"type","type":{"text":"sap.ui.webc.main.types.AvatarGroupType"},"description":"Defines the mode of the <code>AvatarGroup</code>. <br><br> Available options are: <ul> <li><code>Group</code></li> <li><code>Individual</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nDisplays a group of avatars arranged horizontally. It is useful to visually showcase a group of related avatars, such as, project team members or employees.\n\nThe component allows you to display the avatars in different sizes, depending on your use case.\n\nThe <code>AvatarGroup</code> component has two group types: <ul> <li><code>Group</code> type: The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area.</li> <li><code>Individual</code> type: The avatars are displayed side-by-side and each avatar has its own click/tap area.</li> </ul>\n\n<h3>Responsive Behavior</h3>\n\nWhen the available space is less than the width required to display all avatars, an overflow visualization appears as a button placed at the end with the same shape and size as the avatars. The visualization displays the number of avatars that have overflowed and are not currently visible.\n\n<h3>Usage</h3>\n\nUse the <code>AvatarGroup</code> if: <ul> <li>You want to display a group of avatars.</li> <li>You want to display several avatars which have something in common.</li> </ul>\n\nDo not use the <code>AvatarGroup</code> if: <ul> <li>You want to display a single avatar.</li> <li>You want to display a gallery for simple images.</li> <li>You want to use it for other visual content than avatars.</li> </ul>\n\n<h3>Keyboard Handling</h3> The component provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation: <br> - <code>type</code> Individual: <br> <ul> <li>[TAB] - Move focus to the overflow button</li> <li>[LEFT] - Navigate one avatar to the left</li> <li>[RIGHT] - Navigate one avatar to the right</li> <li>[HOME] - Navigate to the first avatar</li> <li>[END] - Navigate to the last avatar</li> <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li> </ul> <br> - <code>type</code> Group: <br> <ul> <li>[TAB] - Move focus to the next interactive element after the component</li> <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li> </ul> <br>","members":[{"deprecated":false,"kind":"field","name":"colorScheme","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.AvatarColorScheme[]"},"default":"[]","description":"Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component."},{"deprecated":false,"kind":"field","name":"hiddenItems","privacy":"public","static":false,"type":{"text":"HTMLElement[]"},"default":"[]","description":"Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space."},{"deprecated":false,"kind":"field","name":"type","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.AvatarGroupType"},"default":"\"Group\"","description":"Defines the mode of the <code>AvatarGroup</code>. <br><br> Available options are: <ul> <li><code>Group</code></li> <li><code>Individual</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"AvatarGroup.js","name":"AvatarGroup","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"AvatarGroup","module":"AvatarGroup.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-avatar-group"}]},{"kind":"javascript-module","path":"Badge.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Badge","name":"Badge","tagName":"ui5-badge","slots":[{"deprecated":false,"description":"Defines the text of the component. <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 icon to be displayed in the component.","name":"icon"}],"attributes":[{"default":"\"1\"","deprecated":false,"fieldName":"colorScheme","name":"color-scheme","type":{"text":"string"},"description":"Defines the color scheme of the component. There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>. To use one you can set a number from <code>\"1\"</code> to <code>\"10\"</code>. The <code>colorScheme</code> <code>\"1\"</code> will be set by default. <br><br> <b>Note:</b> Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-badge</code> is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes. It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.).\n\n<h3>Usage Guidelines</h3> <ul> <li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li> <li>When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be fully displayed.</li> <li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Badge\";</code>","members":[{"deprecated":false,"kind":"field","name":"colorScheme","privacy":"public","static":false,"type":{"text":"string"},"default":"\"1\"","description":"Defines the color scheme of the component. There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>. To use one you can set a number from <code>\"1\"</code> to <code>\"10\"</code>. The <code>colorScheme</code> <code>\"1\"</code> will be set by default. <br><br> <b>Note:</b> Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Badge.js","name":"Badge","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Badge","module":"Badge.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-badge"}]},{"kind":"javascript-module","path":"Breadcrumbs.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Breadcrumbs","name":"Breadcrumbs","tagName":"ui5-breadcrumbs","slots":[{"deprecated":false,"description":"Defines the component items.\n\n<br><br> <b>Note:</b> Use the <code>ui5-breadcrumbs-item</code> component to define the desired items.","name":"default"}],"events":[{"deprecated":false,"name":"item-click","type":"CustomEvent","description":"Fires when a <code>BreadcrumbsItem</code> is clicked. <b>Note:</b> You can prevent browser location change by calling <code>event.preventDefault()</code>."}],"attributes":[{"default":"\"Standard\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.BreadcrumbsDesign"},"description":"Defines the visual indication and behavior of the breadcrumbs. Available options are <code>Standard</code> (by default) and <code>NoCurrentPage</code>. <br><br> <b>Note:</b> The <code>Standard</code> breadcrumbs show the current page as the last item in the trail. The last item contains only plain text and is not a link."},{"default":"\"Slash\"","deprecated":false,"fieldName":"separatorStyle","name":"separator-style","type":{"text":"sap.ui.webc.main.types.BreadcrumbsSeparatorStyle"},"description":"Determines the visual style of the separator between the breadcrumb items.\n\n<br><br> Available options are: <ul> <li><code>Slash</code></li> <li><code>BackSlash</code></li> <li><code>DoubleBackSlash</code></li> <li><code>DoubleGreaterThan</code></li> <li><code>DoubleSlash</code></li> <li><code>GreaterThan</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path. It helps the user to be aware of their location within the application and allows faster navigation. <br><br> The last three steps can be accessed as links directly, while the remaining links prior to them are available in a drop-down menu. <br><br> You can choose the type of separator to be used from a number of predefined options.\n\n<h3>Keyboard Handling</h3> The <code>ui5-breadcrumbs</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - If the dropdown arrow is focused - opens/closes the drop-down.</li> <li>[SPACE, ENTER] - Activates the focused item and triggers the <code>item-click</code> event.</li> <li>[ESC] - Closes the drop-down.</li> <li>[LEFT] - If the drop-down is closed - navigates one item to the left.</li> <li>[RIGHT] - If the drop-down is closed - navigates one item to the right.</li> <li>[UP] - If the drop-down is open - moves focus to the next item.</li> <li>[DOWN] - If the drop-down is open - moves focus to the previous item.</li> <li>[HOME] - Navigates to the first item.</li> <li>[END] - Navigates to the last item.</li> </ul> <br>","members":[{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.BreadcrumbsDesign"},"default":"\"Standard\"","description":"Defines the visual indication and behavior of the breadcrumbs. Available options are <code>Standard</code> (by default) and <code>NoCurrentPage</code>. <br><br> <b>Note:</b> The <code>Standard</code> breadcrumbs show the current page as the last item in the trail. The last item contains only plain text and is not a link."},{"deprecated":false,"kind":"field","name":"separatorStyle","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.BreadcrumbsSeparatorStyle"},"default":"\"Slash\"","description":"Determines the visual style of the separator between the breadcrumb items.\n\n<br><br> Available options are: <ul> <li><code>Slash</code></li> <li><code>BackSlash</code></li> <li><code>DoubleBackSlash</code></li> <li><code>DoubleGreaterThan</code></li> <li><code>DoubleSlash</code></li> <li><code>GreaterThan</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Breadcrumbs.js","name":"Breadcrumbs","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Breadcrumbs","module":"Breadcrumbs.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-breadcrumbs"}]},{"kind":"javascript-module","path":"BreadcrumbsItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"BreadcrumbsItem","name":"BreadcrumbsItem","tagName":"ui5-breadcrumbs-item","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"attributes":[{"default":"undefined","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the item."},{"default":"\"\"","deprecated":false,"fieldName":"href","name":"href","type":{"text":"string"},"description":"Defines the link href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported."},{"default":"undefined","deprecated":false,"fieldName":"target","name":"target","type":{"text":"string"},"description":"Defines the link target. <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> <br><br> <b>Note:<b> This property must only be used when the <code>href</code> property is set."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-breadcrumbs-item</code> component defines the content of an item in <code>ui5-breadcrumbs</code>.","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"undefined","description":"Defines the accessible ARIA name of the item."},{"deprecated":false,"kind":"field","name":"href","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the link href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported."},{"deprecated":false,"kind":"field","name":"target","privacy":"public","static":false,"type":{"text":"string"},"default":"undefined","description":"Defines the link target. <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> <br><br> <b>Note:<b> This property must only be used when the <code>href</code> property is set."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"BreadcrumbsItem.js","name":"BreadcrumbsItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"BreadcrumbsItem","module":"BreadcrumbsItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-breadcrumbs-item"}]},{"kind":"javascript-module","path":"BusyIndicator.js","declarations":[{"deprecated":false,"customElement":true,"kind":"BusyIndicator","name":"BusyIndicator","tagName":"ui5-busy-indicator","slots":[{"deprecated":false,"description":"Determines the content over which the component will appear.","name":"default"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"active","name":"active","type":{"text":"boolean"},"description":"Defines if the busy indicator is visible on the screen. By default it is not."},{"default":"1000","deprecated":false,"fieldName":"delay","name":"delay","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the delay in milliseconds, after which the busy indicator will be visible on the screen."},{"default":"\"Medium\"","deprecated":false,"fieldName":"size","name":"size","type":{"text":"sap.ui.webc.main.types.BusyIndicatorSize"},"description":"Defines the size of the component.\n\n<br><br> <b>Note:</b>\n\n<ul> <li><code>Small</code></li> <li><code>Medium</code></li> <li><code>Large</code></li> </ul>"},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines text to be displayed below the component. It can be used to inform the user of the current operation."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-busy-indicator</code> signals that some operation is going on and that the user must wait. It does not block the current UI screen so other operations could be triggered in parallel. It displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.\n\n<h3>Usage</h3> For the <code>ui5-busy-indicator</code> you can define the size, the text and whether it is shown or hidden. In order to hide it, use the \"active\" property. <br><br> In order to show busy state over an HTML element, simply nest the HTML element in a <code>ui5-busy-indicator</code> instance. <br> <b>Note:</b> Since <code>ui5-busy-indicator</code> has <code>display: inline-block;</code> by default and no width of its own, whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator as well.\n\n<h4>When to use:</h4> <ul> <li>The user needs to be able to cancel the operation.</li> <li>Only part of the application or a particular component is affected.</li> </ul>\n\n<h4>When not to use:</h4> <ul> <li>The operation takes less than one second.</li> <li>You need to block the screen and prevent the user from starting another activity.</li> <li>Do not show multiple busy indicators at once.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/BusyIndicator\";</code>","members":[{"deprecated":false,"kind":"field","name":"active","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the busy indicator is visible on the screen. By default it is not."},{"deprecated":false,"kind":"field","name":"delay","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1000","description":"Defines the delay in milliseconds, after which the busy indicator will be visible on the screen."},{"deprecated":false,"kind":"field","name":"size","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.BusyIndicatorSize"},"default":"\"Medium\"","description":"Defines the size of the component.\n\n<br><br> <b>Note:</b>\n\n<ul> <li><code>Small</code></li> <li><code>Medium</code></li> <li><code>Large</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines text to be displayed below the component. It can be used to inform the user of the current operation."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"BusyIndicator.js","name":"BusyIndicator","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"BusyIndicator","module":"BusyIndicator.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-busy-indicator"}]},{"kind":"javascript-module","path":"Button.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Button","name":"Button","tagName":"ui5-button","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"events":[{"deprecated":false,"name":"click","type":"NativeEvent","description":"Fired when the component is activated either with a mouse/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event will not be fired if the <code>disabled</code> property is set to <code>true</code>."}],"attributes":[{"default":"undefined","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"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":"\"Default\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.ButtonDesign"},"description":"Defines the component design.\n\n<br><br> <b>The available values are:</b>\n\n<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> <li><code>Attention</code></li> </ul>"},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is disabled. A disabled component 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 icon, displayed as graphical element within the component. The SAP-icons font provides numerous options. <br><br> Example:\n\nSee all the available icons within 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":"iconEnd","name":"icon-end","type":{"text":"boolean"},"description":"Defines whether the icon should be displayed after the component text."},{"default":"false","deprecated":false,"fieldName":"submits","name":"submits","type":{"text":"boolean"},"description":"When set to <code>true</code>, the component will automatically submit the nearest HTML form element on <code>press</code>. <br><br> <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>"},{"default":"\"\"","deprecated":false,"fieldName":"tooltip","name":"tooltip","type":{"text":"string"},"description":"Defines the tooltip of the component. <br> <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-button</code> component represents a simple push button. It enables users to trigger actions by clicking or tapping the <code>ui5-button</code>, or by pressing certain keyboard keys, such as Enter.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-button</code> UI, you can define text, icon, or both. You can also specify whether the text or the icon is displayed first. <br><br> You can choose from a set of predefined types that offer different styling to correspond to the triggered action. <br><br> You can set the <code>ui5-button</code> as enabled or disabled. An enabled <code>ui5-button</code> can be pressed by clicking or tapping it. The button changes its style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled <code>ui5-button</code> appears inactive and cannot be pressed.\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-button</code> exposes the following CSS Shadow Parts: <ul> <li>button - Used to style the native button element</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Button\";</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 button, 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 button. 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> <li><code>controls</code>: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.</li> </ul>"},{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"undefined","description":"Defines the accessible ARIA name of the component."},{"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":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ButtonDesign"},"default":"\"Default\"","description":"Defines the component design.\n\n<br><br> <b>The available values are:</b>\n\n<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> <li><code>Attention</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is disabled. A disabled component 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 icon, displayed as graphical element within the component. The SAP-icons font provides numerous options. <br><br> Example:\n\nSee all the available icons within 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":"iconEnd","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the icon should be displayed after the component text."},{"deprecated":false,"kind":"field","name":"submits","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"When set to <code>true</code>, the component will automatically submit the nearest HTML form element on <code>press</code>. <br><br> <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>"},{"deprecated":false,"kind":"field","name":"tooltip","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the tooltip of the component. <br> <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Button.js","name":"Button","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Button","module":"Button.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-button"}]},{"kind":"javascript-module","path":"Calendar.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Calendar","name":"Calendar","tagName":"ui5-calendar","slots":[{"deprecated":false,"description":"Defines the selected date or dates (depending on the <code>selectionMode</code> property) for this calendar as instances of <code>ui5-date</code>.","name":"default"}],"events":[{"deprecated":false,"name":"selected-dates-change","type":"CustomEvent","description":"Fired when the selected dates change. <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not create instances of <code>ui5-date</code> for the newly selected dates. In that case you should do this manually."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"hideWeekNumbers","name":"hide-week-numbers","type":{"text":"boolean"},"description":"Defines the visibility of the week numbers column. <br><br>\n\n<b>Note:</b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set."},{"default":"\"Single\"","deprecated":false,"fieldName":"selectionMode","name":"selection-mode","type":{"text":"sap.ui.webc.main.types.CalendarSelectionMode"},"description":"Defines the type of selection used in the calendar component. Accepted property values are:<br> <ul> <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li> <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li> <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-calendar</code> component allows users to select one or more dates. <br><br> Currently selected dates are represented with instances of <code>ui5-date</code> as children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property. Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally. <br><br>\n\n<h3>Usage</h3>\n\nThe user can navigate to a particular date by: <br> <ul> <li>Pressing over a month inside the months view</li> <li>Pressing over an year inside the years view</li> </ul> <br> The user can confirm a date selection by pressing over a date inside the days view. <br><br>\n\n<h3>Keyboard Handling</h3> The <code>ui5-calendar</code> provides advanced keyboard handling. When a picker is showed and focused the user can use the following keyboard shortcuts in order to perform a navigation: <br> - Day picker: <br> <ul> <li>[F4] - Shows month picker</li> <li>[SHIFT] + [F4] - Shows year picker</li> <li>[PAGEUP] - Navigate to the previous month</li> <li>[PAGEDOWN] - Navigate to the next month</li> <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li> <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li> <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li> <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li> <li>[HOME] - Navigate to the first day of the week</li> <li>[END] - Navigate to the last day of the week</li> <li>[CTRL] + [HOME] - Navigate to the first day of the month</li> <li>[CTRL] + [END] - Navigate to the last day of the month</li> </ul> <br> - Month picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year</li> <li>[PAGEDOWN] - Navigate to the next year</li> <li>[HOME] - Navigate to the first month of the current row</li> <li>[END] - Navigate to the last month of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li> <li>[CTRL] + [END] - Navigate to the last month of the year</li> </ul> <br> - Year picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous year range</li> <li>[PAGEDOWN] - Navigate the next year range</li> <li>[HOME] - Navigate to the first year of the current row</li> <li>[END] - Navigate to the last year of the current row</li> <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li> <li>[CTRL] + [END] - Navigate to the last year of the current year range</li> </ul> <br>\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>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <code> &lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt; { \"calendarType\": \"Japanese\" } &lt;/script&gt; </code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Calendar\";</code>","members":[{"deprecated":false,"kind":"field","name":"hideWeekNumbers","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the visibility of the week numbers column. <br><br>\n\n<b>Note:</b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set."},{"deprecated":false,"kind":"field","name":"selectionMode","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.CalendarSelectionMode"},"default":"\"Single\"","description":"Defines the type of selection used in the calendar component. Accepted property values are:<br> <ul> <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li> <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li> <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li> </ul>"}],"superclass":{"module":"CalendarPart.js","name":"CalendarPart","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"Calendar.js","name":"Calendar","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Calendar","module":"Calendar.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-calendar"}]},{"kind":"javascript-module","path":"CalendarDate.js","declarations":[{"deprecated":false,"customElement":true,"kind":"CalendarDate","name":"CalendarDate","tagName":"ui5-date","attributes":[{"deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the component."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-date</code> component defines a calendar date to be used inside <code>ui5-calendar</code>","members":[{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"description":"The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"CalendarDate.js","name":"CalendarDate","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"CalendarDate","module":"CalendarDate.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-date"}]},{"kind":"javascript-module","path":"Card.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Card","name":"Card","tagName":"ui5-card","slots":[{"deprecated":false,"description":"Defines the content of the component.","name":"default"},{"deprecated":false,"description":"Defines the header of the component. <br><br> <b>Note:</b> Use <code>ui5-card-header</code> for the intended design.","name":"header"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Defines the IDs of the elements that label the component."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-card</code> is a component that represents information in the form of a tile with separate header and content areas. The content area of a <code>ui5-card</code> can be arbitrary HTML content. The header can be used through slot <code>header</code>. For which there is a <code>ui5-card-header</code> component to achieve the card look and feel.\n\nNote: We recommend the usage of <code>ui5-card-header</code> for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Card\";</code> <br> <code>import \"@ui5/webcomponents/dist/CardHeader.js\";</code> (for <code>ui5-card-header</code>)","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set."},{"deprecated":false,"kind":"field","name":"accessibleNameRef","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the IDs of the elements that label the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Card.js","name":"Card","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Card","module":"Card.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-card"}]},{"kind":"javascript-module","path":"CardHeader.js","declarations":[{"deprecated":false,"customElement":true,"kind":"CardHeader","name":"CardHeader","tagName":"ui5-card-header","slots":[{"deprecated":false,"description":"Defines an action, displayed in the right most part of the header.","name":"action"},{"deprecated":false,"description":"Defines an avatar image, displayed in the left most part of the header.","name":"avatar"}],"events":[{"deprecated":false,"name":"click","type":"CustomEvent","description":"Fired when the component is activated by mouse/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event would be fired only if the <code>interactive</code> property is set to true."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"interactive","name":"interactive","type":{"text":"boolean"},"description":"Defines if the component would be interactive, e.g gets hover effect, gets focus outline and <code>click</code> event is fired, when pressed."},{"default":"\"\"","deprecated":false,"fieldName":"status","name":"status","type":{"text":"string"},"description":"Defines the status text."},{"default":"\"\"","deprecated":false,"fieldName":"subtitleText","name":"subtitle-text","type":{"text":"string"},"description":"Defines the subtitle text."},{"default":"\"\"","deprecated":false,"fieldName":"titleText","name":"title-text","type":{"text":"string"},"description":"Defines the title text."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-card-header</code> is a component, meant to be used as a header of the <code>ui5-card</code> component. It displays valuable information, that can be defined with several properties, such as: <code>titleText</code>, <code>subtitleText</code>, <code>status</code> and two slots: <code>avatar</code> and <code>action</code>.\n\n<h3>Keyboard handling</h3> In case you enable <code>interactive</code> property, you can press the <code>ui5-card-header</code> by Space and Enter keys.\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-card-header</code> exposes the following CSS Shadow Parts: <ul> <li>root - Used to style the root DOM element of the CardHeader</li> <li>title - Used to style the title of the CardHeader</li> <li>subtitle - Used to style the subtitle of the CardHeader</li> <li>status - Used to style the status of the CardHeader</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/CardHeader\";</code>","members":[{"deprecated":false,"kind":"field","name":"interactive","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the component would be interactive, e.g gets hover effect, gets focus outline and <code>click</code> event is fired, when pressed."},{"deprecated":false,"kind":"field","name":"status","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the status text."},{"deprecated":false,"kind":"field","name":"subtitleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the subtitle text."},{"deprecated":false,"kind":"field","name":"titleText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the title text."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"CardHeader.js","name":"CardHeader","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"CardHeader","module":"CardHeader.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-card-header"}]},{"kind":"javascript-module","path":"Carousel.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Carousel","name":"Carousel","tagName":"ui5-carousel","slots":[{"deprecated":false,"description":"Defines the content of the component.","name":"default"}],"events":[{"deprecated":false,"name":"navigate","type":"CustomEvent","description":"Fired whenever the page changes due to user interaction, when the user clicks on the navigation arrows or while resizing, based on the <code>items-per-page-l</code>, <code>items-per-page-m</code> and <code>items-per-page-s</code> properties."}],"attributes":[{"default":"\"Content\"","deprecated":false,"fieldName":"arrowsPlacement","name":"arrows-placement","type":{"text":"sap.ui.webc.main.types.CarouselArrowsPlacement"},"description":"Defines the position of arrows. <br><br> Available options are: <ul> <li><code>Content</code></li> <li><code>Navigation</code></li> </ul> <br> When set to \"Content\", the arrows are placed on the sides of the current page. <br> When set to \"Navigation\", the arrows are placed on the sides of the page indicator."},{"default":"\"Translucent\"","deprecated":false,"fieldName":"backgroundDesign","name":"background-design","type":{"text":"sap.ui.webc.main.types.BackgroundDesign"},"description":"Defines the carousel's background design."},{"default":"false","deprecated":false,"fieldName":"cyclic","name":"cyclic","type":{"text":"boolean"},"description":"Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa."},{"default":"false","deprecated":false,"fieldName":"hideNavigationArrows","name":"hide-navigation-arrows","type":{"text":"boolean"},"description":"Defines the visibility of the navigation arrows. If set to true the navigation arrows will be hidden. <br><br> <b>Note:</b> The navigation arrows are never displayed on touch devices. In this case, the user can swipe to navigate through the items."},{"default":"false","deprecated":false,"fieldName":"hidePageIndicator","name":"hide-page-indicator","type":{"text":"boolean"},"description":"Defines the visibility of the page indicator. If set to true the page indicator will be hidden."},{"default":"1","deprecated":false,"fieldName":"itemsPerPageL","name":"items-per-page-l","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the number of items per page on large size (more than 1024px). One item per page shown by default."},{"default":"1","deprecated":false,"fieldName":"itemsPerPageM","name":"items-per-page-m","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default."},{"default":"1","deprecated":false,"fieldName":"itemsPerPageS","name":"items-per-page-s","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the number of items per page on small size (up to 640px). One item per page shown by default."},{"default":"\"Solid\"","deprecated":false,"fieldName":"pageIndicatorBackgroundDesign","name":"page-indicator-background-design","type":{"text":"sap.ui.webc.main.types.BackgroundDesign"},"description":"Defines the page indicator background design."},{"default":"\"Solid\"","deprecated":false,"fieldName":"pageIndicatorBorderDesign","name":"page-indicator-border-design","type":{"text":"sap.ui.webc.main.types.BorderDesign"},"description":"Defines the page indicator border design."},{"default":"\"Default\"","deprecated":false,"fieldName":"pageIndicatorStyle","name":"page-indicator-style","type":{"text":"sap.ui.webc.main.types.CarouselPageIndicatorStyle"},"description":"Defines the style of the page indicator. Available options are: <ul> <li><code>Default</code> - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)</li> <li><code>Numeric</code> - The page indicator will display the current page and the total number of pages. (e.g. X of Y)</li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of images, but can hold any other HTML element. <br> There are several ways to perform navigation: <ul> <li>on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.</li> <li>on mobile - the user can use swipe gestures.</li> </ul>\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4>\n\n<ul> <li>The items you want to display are very different from each other.</li> <li>You want to display the items one after the other.</li> </ul>\n\n<h4>When not to use:</h4>\n\n<ul> <li>The items you want to display need to be visible at the same time.</li> <li>The items you want to display are uniform and very similar.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<h4>Basic Navigation</h4> When the <code>ui5-carousel</code> is focused the user can navigate between the items with the following keyboard shortcuts: <br> <ul> <li>[UP/DOWN] - Navigates to previous and next item</li> <li>[LEFT/RIGHT] - Navigates to previous and next item</li> </ul>\n\n<h3>Fast Navigation</h3> 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>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-carousel</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style the content of the component</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Carousel.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"arrowsPlacement","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.CarouselArrowsPlacement"},"default":"\"Content\"","description":"Defines the position of arrows. <br><br> Available options are: <ul> <li><code>Content</code></li> <li><code>Navigation</code></li> </ul> <br> When set to \"Content\", the arrows are placed on the sides of the current page. <br> When set to \"Navigation\", the arrows are placed on the sides of the page indicator."},{"deprecated":false,"kind":"field","name":"backgroundDesign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.BackgroundDesign"},"default":"\"Translucent\"","description":"Defines the carousel's background design."},{"deprecated":false,"kind":"field","name":"cyclic","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa."},{"deprecated":false,"kind":"field","name":"hideNavigationArrows","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the visibility of the navigation arrows. If set to true the navigation arrows will be hidden. <br><br> <b>Note:</b> The navigation arrows are never displayed on touch devices. In this case, the user can swipe to navigate through the items."},{"deprecated":false,"kind":"field","name":"hidePageIndicator","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the visibility of the page indicator. If set to true the page indicator will be hidden."},{"deprecated":false,"kind":"field","name":"itemsPerPageL","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1","description":"Defines the number of items per page on large size (more than 1024px). One item per page shown by default."},{"deprecated":false,"kind":"field","name":"itemsPerPageM","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1","description":"Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default."},{"deprecated":false,"kind":"field","name":"itemsPerPageS","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1","description":"Defines the number of items per page on small size (up to 640px). One item per page shown by default."},{"deprecated":false,"kind":"field","name":"pageIndicatorBackgroundDesign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.BackgroundDesign"},"default":"\"Solid\"","description":"Defines the page indicator background design."},{"deprecated":false,"kind":"field","name":"pageIndicatorBorderDesign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.BorderDesign"},"default":"\"Solid\"","description":"Defines the page indicator border design."},{"deprecated":false,"kind":"field","name":"pageIndicatorStyle","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.CarouselPageIndicatorStyle"},"default":"\"Default\"","description":"Defines the style of the page indicator. Available options are: <ul> <li><code>Default</code> - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)</li> <li><code>Numeric</code> - The page indicator will display the current page and the total number of pages. (e.g. X of Y)</li> </ul>"},{"deprecated":false,"kind":"method","name":"navigateTo","privacy":"public","description":"Changes the currently displayed page.","parameters":[{"deprecated":false,"name":"itemIndex","type":{"text":"Integer"},"description":"The index of the target page"}]}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Carousel.js","name":"Carousel","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Carousel","module":"Carousel.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-carousel"}]},{"kind":"javascript-module","path":"CheckBox.js","declarations":[{"deprecated":false,"customElement":true,"kind":"CheckBox","name":"CheckBox","tagName":"ui5-checkbox","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the component checked state changes."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"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":"false","deprecated":false,"fieldName":"checked","name":"checked","type":{"text":"boolean"},"description":"Defines if the component is checked. <br><br> <b>Note:</b> The property can be changed with user interaction, either by cliking/tapping on the component, or by pressing the Enter or Space key."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is disabled. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"default":"false","deprecated":false,"fieldName":"indeterminate","name":"indeterminate","type":{"text":"boolean"},"description":"Defines whether the component is displayed as partially checked. <br><br> <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user interaction and the resulting visual state depends on the values of the <code>indeterminate</code> and <code>checked</code> properties: <ul> <li> If the component is checked and indeterminate, it will be displayed as partially checked <li> If the component is checked and it is not indeterminate, it will be displayed as checked <li> If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute </ul>"},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the component."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component.\n\n<br><br> <b>Note:</b>\n\n<ul> <li><code>Warning</code></li> <li><code>Error</code></li> <li><code>None</code>(default)</li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"},{"default":"\"None\"","deprecated":false,"fieldName":"wrappingType","name":"wrapping-type","type":{"text":"sap.ui.webc.main.types.WrappingType"},"description":"Defines whether the component text wraps when there is not enough space. <br><br> Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nAllows the user to set a binary value, such as true/false or yes/no for an item. <br><br> The <code>ui5-checkbox</code> component consists of a box and a label that describes its purpose. If it's checked, an indicator is displayed inside the box. To check/uncheck the <code>ui5-checkbox</code>, the user has to click or tap the square box or its label. <br><br> The <code>ui5-checkbox</code> component only has 2 states - checked and unchecked. Clicking or tapping toggles the <code>ui5-checkbox</code> between checked and unchecked state.\n\n<h3>Usage</h3>\n\nYou can define the checkbox text with via the <code>text</code> property. If the text exceeds the available width, it is truncated by default. In case you prefer text to wrap, set the <code>wrappingType</code> property to \"Normal\". The touchable area for toggling the <code>ui5-checkbox</code> ends where the text ends. <br><br> You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to <code>true</code>, or use the <code>ui5-checkbox</code> in read-only mode by setting the <code>readonly</code> property to <code>true</code>.\n\n<br><br> <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-checkbox</code> exposes the following CSS Shadow Parts: <ul> <li>root - Used to style the outermost wrapper of the <code>ui5-checkbox</code></li> </ul>\n\n<br><br> <h3>Keyboard Handling</h3>\n\nThe user can use the following keyboard shortcuts to toggle the checked state of the <code>ui5-checkbox</code>. <ul> <li>[SPACE, ENTER] - Toggles between different states: checked, not checked.</li> </ul> <br><br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/CheckBox\";</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":"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":"checked","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the component is checked. <br><br> <b>Note:</b> The property can be changed with user interaction, either by cliking/tapping on the component, or by pressing the Enter or Space key."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is disabled. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"kind":"field","name":"indeterminate","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is displayed as partially checked. <br><br> <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user interaction and the resulting visual state depends on the values of the <code>indeterminate</code> and <code>checked</code> properties: <ul> <li> If the component is checked and indeterminate, it will be displayed as partially checked <li> If the component is checked and it is not indeterminate, it will be displayed as checked <li> If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute </ul>"},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the component."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component.\n\n<br><br> <b>Note:</b>\n\n<ul> <li><code>Warning</code></li> <li><code>Error</code></li> <li><code>None</code>(default)</li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"wrappingType","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.WrappingType"},"default":"\"None\"","description":"Defines whether the component text wraps when there is not enough space. <br><br> Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"CheckBox.js","name":"CheckBox","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"CheckBox","module":"CheckBox.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-checkbox"}]},{"kind":"javascript-module","path":"ColorPalette.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ColorPalette","name":"ColorPalette","tagName":"ui5-color-palette","slots":[{"deprecated":false,"description":"Defines the <code>ui5-color-palette-item</code> elements.","name":"default"}],"events":[{"deprecated":false,"name":"item-click","type":"CustomEvent","description":"Fired when the user selects a color."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-color-palette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n\n<h3>Usage</h3>\n\nThe <code>ui5-color-palette</code> is meant for users that need to select a color from a predefined set. To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ColorPalette.js\";</code>","superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ColorPalette.js","name":"ColorPalette","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ColorPalette","module":"ColorPalette.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-color-palette"}]},{"kind":"javascript-module","path":"ColorPaletteItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ColorPaletteItem","name":"ColorPaletteItem","tagName":"ui5-color-palette-item","attributes":[{"deprecated":false,"fieldName":"value","name":"value","type":{"text":"sap.ui.webc.base.types.CSSColor"},"description":"Defines the colour of the component. <br><br> <b>Note:</b> The value should be a valid CSS color."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-color-palette-item</code> component represents a color in the the <code>ui5-color-palette</code>.","members":[{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.CSSColor"},"description":"Defines the colour of the component. <br><br> <b>Note:</b> The value should be a valid CSS color."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ColorPaletteItem.js","name":"ColorPaletteItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ColorPaletteItem","module":"ColorPaletteItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-color-palette-item"}]},{"kind":"javascript-module","path":"ColorPalettePopover.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ColorPalettePopover","name":"ColorPalettePopover","tagName":"ui5-color-palette-popover","slots":[{"deprecated":false,"description":"Defines the content of the component.","name":"default"}],"events":[{"deprecated":false,"name":"item-click","type":"CustomEvent","description":"Fired when the user selects a color."}],"attributes":[{"deprecated":false,"fieldName":"defaultColor","name":"default-color","type":{"text":"sap.ui.webc.base.types.CSSColor"},"description":"Defines the default color of the component. <b>Note:</b> The default color should be a part of the ColorPalette colors</code>"},{"default":"false","deprecated":false,"fieldName":"showDefaultColor","name":"show-default-color","type":{"text":"boolean"},"description":"Defines whether the user can choose the default color from a button."},{"default":"false","deprecated":false,"fieldName":"showMoreColors","name":"show-more-colors","type":{"text":"boolean"},"description":"Defines whether the user can choose a custom color from a component. <b>Note:</b> In order to use this property you need to import the following module: <code>\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"</code>"},{"default":"false","deprecated":false,"fieldName":"showRecentColors","name":"show-recent-colors","type":{"text":"boolean"},"description":"Defines whether the user can see the last used colors in the bottom of the component"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> Represents a predefined range of colors for easier selection.\n\nOverview The ColorPalettePopover provides the users with a slot to predefine colors.\n\nYou can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly. You can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n\n<h3>Usage</h3>\n\nThe palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n\nFor the <code>ui5-color-palette-popover</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/ColorPalettePopover.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"defaultColor","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.CSSColor"},"description":"Defines the default color of the component. <b>Note:</b> The default color should be a part of the ColorPalette colors</code>"},{"deprecated":false,"kind":"field","name":"showDefaultColor","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the user can choose the default color from a button."},{"deprecated":false,"kind":"field","name":"showMoreColors","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the user can choose a custom color from a component. <b>Note:</b> In order to use this property you need to import the following module: <code>\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"</code>"},{"deprecated":false,"kind":"field","name":"showRecentColors","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the user can see the last used colors in the bottom of the component"},{"deprecated":true,"kind":"method","name":"openPopover","privacy":"public","description":"Shows the ColorPalettePopover. <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.","parameters":[{"deprecated":false,"name":"opener","type":{"text":"HTMLElement"},"description":"the element that the popover is shown at"}]},{"deprecated":false,"kind":"method","name":"showAt","privacy":"public","description":"Shows the ColorPalettePopover.","parameters":[{"deprecated":false,"name":"opener","type":{"text":"HTMLElement"},"description":"the element that the popover is shown at"}]}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ColorPalettePopover.js","name":"ColorPalettePopover","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ColorPalettePopover","module":"ColorPalettePopover.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-color-palette-popover"}]},{"kind":"javascript-module","path":"ColorPicker.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ColorPicker","name":"ColorPicker","tagName":"ui5-color-picker","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the the selected color is changed"}],"attributes":[{"deprecated":false,"fieldName":"color","name":"color","type":{"text":"sap.ui.webc.base.types.CSSColor"},"description":"Defines the currently selected color of the component. <br><br> <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-color-picker</code> allows users to choose any color and provides different input options for selecting colors.\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4 Use the color picker if: <ul> <li> users need to select any color freely.</li> </ul>\n\n<h4>When not to use:</h4> <ul> <li> Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ColorPicker.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"color","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.CSSColor"},"description":"Defines the currently selected color of the component. <br><br> <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ColorPicker.js","name":"ColorPicker","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ColorPicker","module":"ColorPicker.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-color-picker"}]},{"kind":"javascript-module","path":"ComboBox.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ComboBox","name":"ComboBox","tagName":"ui5-combobox","slots":[{"deprecated":false,"description":"Defines the component items.","name":"default"},{"deprecated":false,"description":"Defines the icon to be displayed in the input field.","name":"icon"},{"deprecated":false,"description":"Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the <code>ui5-combobox</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.","name":"valueStateMessage"}],"events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the input operation has finished by pressing Enter, focusout or an item is selected."},{"deprecated":false,"name":"input","type":"CustomEvent","description":"Fired when typing in input. <br><br> <b>Note:</b> filterValue property is updated, input is changed."},{"deprecated":false,"name":"selection-change","type":"CustomEvent","description":"Fired when selection is changed by user interaction"}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"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":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"default":"\"StartsWithPerTerm\"","deprecated":false,"fieldName":"filter","name":"filter","type":{"text":"sap.ui.webc.main.types.ComboBoxFilter"},"description":"Defines the filter type of the component. Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>."},{"default":"false","deprecated":false,"fieldName":"loading","name":"loading","type":{"text":"boolean"},"description":"Indicates whether a loading indicator should be shown in the picker."},{"default":"\"\"","deprecated":false,"fieldName":"placeholder","name":"placeholder","type":{"text":"string"},"description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"\"\"","deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines the value of the component."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-combobox</code> component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n<h3>Structure</h3> The <code>ui5-combobox</code> consists of the following elements:\n\n<ul> <li> Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.</li> <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\nThe <code>ui5-combobox</code> provides advanced keyboard handling. <br>\n\n<ul> <li>[F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.</li> <li>[ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.</li> <li>[ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.</li> <li>[DOWN] - Selects the next matching item in the picker.</li> <li>[UP] - Selects the previous matching item in the picker.</li> <li>[PAGEDOWN] - Moves selection down by page size (10 items by default).</li> <li>[PAGEUP] - Moves selection up by page size (10 items by default). </li> <li>[HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.</li> <li>[END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ComboBox\";</code>","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":"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":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"kind":"field","name":"filter","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ComboBoxFilter"},"default":"\"StartsWithPerTerm\"","description":"Defines the filter type of the component. Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>."},{"deprecated":false,"kind":"field","name":"loading","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates whether a loading indicator should be shown in the picker."},{"deprecated":false,"kind":"field","name":"placeholder","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the value of the component."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ComboBox.js","name":"ComboBox","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ComboBox","module":"ComboBox.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-combobox"}]},{"kind":"javascript-module","path":"ComboBoxGroupItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ComboBoxGroupItem","name":"ComboBoxGroupItem","tagName":"ui5-cb-group-item","attributes":[{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the component."}],"description":"The <code>ui5-cb-group-item</code> is type of suggestion item, that can be used to split the <code>ui5-combobox</code> suggestions into groups.","members":[{"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":"ComboBoxGroupItem.js","name":"ComboBoxGroupItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ComboBoxGroupItem","module":"ComboBoxGroupItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-cb-group-item"}]},{"kind":"javascript-module","path":"ComboBoxItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ComboBoxItem","name":"ComboBoxItem","tagName":"ui5-cb-item","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":"The <code>ui5-cb-item</code> represents the item for a <code>ui5-combobox</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":"ComboBoxItem.js","name":"ComboBoxItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ComboBoxItem","module":"ComboBoxItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-cb-item"}]},{"kind":"javascript-module","path":"CustomListItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"CustomListItem","name":"CustomListItem","tagName":"ui5-li-custom","slots":[{"deprecated":false,"description":"Defines the content of the component.","name":"default"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present."}],"description":"A component to be used as custom list item within the <code>ui5-list</code> the same way as the standard <code>ui5-li</code>.\n\nThe component accepts arbitrary HTML content to allow full customization.","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present."}],"superclass":{"module":"ListItem.js","name":"ListItem","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"CustomListItem.js","name":"CustomListItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"CustomListItem","module":"CustomListItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-li-custom"}]},{"kind":"javascript-module","path":"DatePicker.js","declarations":[{"deprecated":false,"customElement":true,"kind":"DatePicker","name":"DatePicker","tagName":"ui5-date-picker","slots":[{"deprecated":false,"description":"Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.","name":"valueStateMessage"}],"events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"deprecated":false,"name":"input","type":"CustomEvent","description":"Fired when the value of the component is changed at each key stroke."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the aria-label attribute for the component."},{"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":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Determines whether the component is displayed as disabled."},{"default":"false","deprecated":false,"fieldName":"hideWeekNumbers","name":"hide-week-numbers","type":{"text":"boolean"},"description":"Defines the visibility of the week numbers column. <br><br>\n\n<b>Note:</b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set."},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"default":"undefined","deprecated":false,"fieldName":"placeholder","name":"placeholder","type":{"text":"string"},"description":"Defines a short hint, intended to aid the user with data entry when the component has no value.\n\n<br><br> <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Determines whether the component is displayed as read-only."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"\"\"","deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines a formatted date value."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-date-picker</code> component provides an input field with assigned calendar which opens on user action. The <code>ui5-date-picker</code> allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker.\n\n<h3>Usage</h3>\n\nThe user can enter a date by: <ul> <li>Using the calendar that opens in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and presses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed.\n\n<h3>Formatting</h3>\n\nIf a date is entered by typing it into the input field, it must fit to the used date format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"yyyy-MM-dd\", a valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n<h3>Keyboard Handling</h3> The <code>ui5-date-picker</code> provides advanced keyboard handling. If the <code>ui5-date-picker</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>RIGHT</code> arrow keys to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can use TAB to reach the buttons for changing month and year. <br>\n\nIf the <code>ui5-date-picker</code> input field is focused and its corresponding picker dialog is not opened, then users can increment or decrement the date referenced by <code>dateValue</code> property by using the following shortcuts: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>\n\n<h3>Calendar types</h3> The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the <code>primaryCalendarType</code> property and import one or more of the following modules: <br><br>\n\n<code>import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";</code> <br> <code>import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";</code> <br><br>\n\nOr, you can use the global configuration and set the <code>calendarType</code> key: <br> <pre><code>&lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt;\n{\n\t\"calendarType\": \"Japanese\"\n}\n&lt;/script&gt;</code></pre>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DatePicker\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the aria-label attribute for the component."},{"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":"dateValue","privacy":"public","static":false,"type":{"text":"Date"},"description":"Currently selected date represented as a Local JavaScript Date instance."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component is displayed as disabled."},{"deprecated":false,"kind":"field","name":"hideWeekNumbers","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the visibility of the week numbers column. <br><br>\n\n<b>Note:</b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"deprecated":false,"kind":"field","name":"placeholder","privacy":"public","static":false,"type":{"text":"string"},"default":"undefined","description":"Defines a short hint, intended to aid the user with data entry when the component has no value.\n\n<br><br> <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component is displayed as read-only."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines a formatted date value."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"},{"deprecated":false,"kind":"method","name":"closePicker","privacy":"public","description":"Closes the picker."},{"deprecated":false,"kind":"method","name":"formatValue","privacy":"public","description":"Formats a Java Script date object into a string representing a locale date according to the <code>formatPattern</code> property of the DatePicker instance","parameters":[{"deprecated":false,"name":"date","type":{"text":"Date"},"description":"A Java Script date object to be formatted as string"}],"return":{"type":{"text":"string"},"description":"string"}},{"deprecated":false,"kind":"method","name":"isInValidRange","privacy":"public","description":"Checks if a date is between the minimum and maximum date.","parameters":[{"deprecated":false,"name":"value","type":{"text":"string"},"description":"A value to be checked","optional":true}],"return":{"type":{"text":"boolean"}}},{"deprecated":false,"kind":"method","name":"isOpen","privacy":"public","description":"Checks if the picker is open.","return":{"type":{"text":"boolean"},"description":"boolean"}},{"deprecated":false,"kind":"method","name":"isValid","privacy":"public","description":"Checks if a value is valid against the current date format of the DatePicker.","parameters":[{"deprecated":false,"name":"value","type":{"text":"string"},"description":"A value to be tested against the current date format","optional":true}],"return":{"type":{"text":"boolean"}}},{"deprecated":false,"kind":"method","name":"openPicker","privacy":"public","description":"Opens the picker.","return":{"type":{"text":"Promise"},"description":"Promise"}}],"superclass":{"module":"DateComponentBase.js","name":"DateComponentBase","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"DatePicker.js","name":"DatePicker","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"DatePicker","module":"DatePicker.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-date-picker"}]},{"kind":"javascript-module","path":"DateRangePicker.js","declarations":[{"deprecated":false,"customElement":true,"kind":"DateRangePicker","name":"DateRangePicker","tagName":"ui5-daterange-picker","attributes":[{"default":"\"-\"","deprecated":false,"fieldName":"delimiter","name":"delimiter","type":{"text":"string"},"description":"Determines the symbol which separates the dates. If not supplied, the default time interval delimiter for the current locale will be used."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.\n\n<h3>Usage</h3> The user can enter a date by: Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices). For the <code>ui5-daterange-picker</code> <h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DateRangePicker.js\";</code>\n\n<h3>Keyboard Handling</h3> The <code>ui5-daterange-picker</code> provides advanced keyboard handling. <br>\n\nWhen the <code>ui5-daterange-picker</code> input field is focused the user can increment or decrement respectively the range start or end date, depending on where the cursor is. The following shortcuts are available: <br> <ul> <li>[PAGEDOWN] - Decrements the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one</li> <li>[PAGEUP] - Increments the corresponding day of the month by one</li> <li>[SHIFT] + [PAGEUP] - Increments the corresponding month by one</li> <li>[SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one</li> </ul>","members":[{"deprecated":false,"kind":"field","name":"dateValue","privacy":"public","static":false,"type":{"text":"Date"},"description":"<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."},{"deprecated":false,"kind":"field","name":"dateValueUTC","privacy":"public","static":false,"type":{"text":"Date"},"description":"<b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value."},{"deprecated":false,"kind":"field","name":"delimiter","privacy":"public","static":false,"type":{"text":"string"},"default":"\"-\"","description":"Determines the symbol which separates the dates. If not supplied, the default time interval delimiter for the current locale will be used."},{"deprecated":false,"kind":"field","name":"endDateValue","privacy":"public","static":false,"type":{"text":"Date"},"description":"Returns the end date of the currently selected range as JavaScript Date instance."},{"deprecated":false,"kind":"field","name":"startDateValue","privacy":"public","static":false,"type":{"text":"Date"},"description":"Returns the start date of the currently selected range as JavaScript Date instance."}],"superclass":{"module":"DatePicker.js","name":"DatePicker","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"DateRangePicker.js","name":"DateRangePicker","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"DateRangePicker","module":"DateRangePicker.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-daterange-picker"}]},{"kind":"javascript-module","path":"DateTimePicker.js","declarations":[{"deprecated":false,"customElement":true,"kind":"DateTimePicker","name":"DateTimePicker","tagName":"ui5-datetime-picker","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>DateTimePicker</code> component alows users to select both date (day, month and year) and time (hours, minutes and seconds) and for the purpose it consists of input field and Date/Time picker.\n\n<h3>Usage</h3>\n\nUse the <code>DateTimePicker</code> if you need a combined date and time input component. Don't use it if you want to use either date, or time value. In this case, use the <code>DatePicker</code> or the <code>TimePicker</code> components instead. <br><br> The user can set date/time by: <ul> <li>using the calendar and the time selectors</li> <li>typing in the input field</li> </ul>\n\nProgrammatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property\n\n<h3>Formatting</h3>\n\nThe value entered by typing into the input field must fit to the used date/time format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> <b>Example:</b> the following format <code>dd/MM/yyyy, hh:mm:ss aa</code> corresponds the <code>13/04/2020, 03:16:16 AM</code> value. <br> The small 'h' defines \"12\" hours format and the \"aa\" symbols - \"AM/PM\" time periods.\n\n<br><br> <b>Example:</b> the following format <code>dd/MM/yyyy, HH:mm:ss</code> corresponds the <code>13/04/2020, 15:16:16</code> value. <br> The capital 'H' indicates \"24\" hours format.\n\n<br><br> <b>Note:</b> If the <code>formatPattern</code> does NOT include time, the <code>DateTimePicker</code> will fallback to the default time format according to the locale.\n\n<br><br> <b>Note:</b> If no placeholder is set to the <code>DateTimePicker</code>, the current <code>formatPattern</code> is displayed as a placeholder. If another placeholder is needed, it must be set or in case no placeholder is needed - it can be set to an empty string.\n\n<br><br> <b>Note:</b> If the user input does NOT match the <code>formatPattern</code>, the <code>DateTimePicker</code> makes an attempt to parse it based on the locale settings.\n\n<h3>Responsive behavior</h3>\n\nThe <code>DateTimePicker</code> is responsive and fully adapts to all devices. For larger screens, such as tablet or desktop, it is displayed as a popover, while on phone devices, it is displayed full screen.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DateTimePicker.js\";</code>","superclass":{"module":"DatePicker.js","name":"DatePicker","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"DateTimePicker.js","name":"DateTimePicker","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"DateTimePicker","module":"DateTimePicker.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-datetime-picker"}]},{"kind":"javascript-module","path":"DayPicker.js","declarations":[{"deprecated":false,"customElement":true,"kind":"DayPicker","name":"DayPicker","tagName":"ui5-daypicker","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the selected date(s) change"},{"deprecated":false,"name":"navigate","type":"CustomEvent","description":"Fired when the timestamp changes (user navigates with the keyboard) or clicks with the mouse"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"hideWeekNumbers","name":"hide-week-numbers","type":{"text":"boolean"},"description":"Defines the visibility of the week numbers column. <br><br>\n\n<b>Note:<b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set."},{"default":"\"Single\"","deprecated":false,"fieldName":"selectionMode","name":"selection-mode","type":{"text":"sap.ui.webc.main.types.CalendarSelectionMode"},"description":"Defines the type of selection used in the day picker component. Accepted property values are:<br> <ul> <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li> <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li> <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li> </ul>"}],"description":"Represents the days inside a single month view of the <code>ui5-calendar</code> component.","members":[{"deprecated":false,"kind":"field","name":"hideWeekNumbers","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the visibility of the week numbers column. <br><br>\n\n<b>Note:<b> For calendars other than Gregorian, the week numbers are not displayed regardless of what is set."},{"deprecated":false,"kind":"field","name":"selectedDates","privacy":"public","static":false,"type":{"text":"array"},"description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."},{"deprecated":false,"kind":"field","name":"selectionMode","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.CalendarSelectionMode"},"default":"\"Single\"","description":"Defines the type of selection used in the day picker component. Accepted property values are:<br> <ul> <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li> <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li> <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li> </ul>"}],"superclass":{"module":"CalendarPart.js","name":"CalendarPart","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"DayPicker.js","name":"DayPicker","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"DayPicker","module":"DayPicker.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-daypicker"}]},{"kind":"javascript-module","path":"Dialog.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Dialog","name":"Dialog","tagName":"ui5-dialog","slots":[{"deprecated":false,"description":"Defines the footer HTML Element.","name":"footer"},{"deprecated":false,"description":"Defines the header HTML Element. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the labelling of the dialog is a responsibility of the application developer. <code>accessibleName</code> should be used.","name":"header"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"draggable","name":"draggable","type":{"text":"boolean"},"description":"Determines whether the component is draggable. If this property is set to true, the Dialog will be draggable by its header. <br><br> <b>Note:</b> The component can be draggable only in desktop mode. <br><br> <b>Note:</b> This property overrides the default HTML \"draggable\" attribute native behavior. When \"draggable\" is set to true, the native browser \"draggable\" behavior is prevented and only the Dialog custom logic (\"draggable by its header\") works."},{"default":"\"\"","deprecated":false,"fieldName":"headerText","name":"header-text","type":{"text":"string"},"description":"Defines the header text. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored."},{"default":"false","deprecated":false,"fieldName":"resizable","name":"resizable","type":{"text":"boolean"},"description":"Configures the component to be resizable. If this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages. In RTL languages, the resize handle will be placed in the bottom left corner. <br><br> <b>Note:</b> The component can be resizable only in desktop mode. <br> <b>Note:</b> Upon resizing, externally defined height and width styling will be ignored."},{"default":"\"None\"","deprecated":false,"fieldName":"state","name":"state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the state of the <code>Dialog</code>. <br><br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Error\"</code>. <br><br> <b>Note:</b> If <code>\"Error\"</code> and <code>\"Warning\"</code> state is set, it will change the accessibility role to \"alertdialog\", if the accessibleRole property is set to <code>\"Dialog\"</code>."},{"default":"false","deprecated":false,"fieldName":"stretch","name":"stretch","type":{"text":"boolean"},"description":"Determines whether the component should be stretched to fullscreen. <br><br> <b>Note:</b> The component will be stretched to approximately 90% of the viewport."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-dialog</code> component is used to temporarily display some information in a size-limited window in front of the regular app screen. It is used to prompt the user for an action or a confirmation. The <code>ui5-dialog</code> interrupts the current app processing as it is the only focused UI element and the main screen is dimmed/blocked. The dialog combines concepts known from other technologies where the windows have names such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box. <br><br> The <code>ui5-dialog</code> is modal, which means that an user action is required before it is possible to return to the parent window. To open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other. The content of the <code>ui5-dialog</code> is fully customizable.\n\n<h3>Structure</h3> A <code>ui5-dialog</code> consists of a header, content, and a footer for action buttons. The <code>ui5-dialog</code> is usually displayed at the center of the screen. Its position can be changed by the user. To enable this, you need to set the property <code>draggable</code> accordingly.\n\n<h3>Responsive Behavior</h3> The <code>stretch</code> property can be used to stretch the <code>ui5-dialog</code> on full screen.\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-dialog</code> exposes the following CSS Shadow Parts: <ul> <li>header - Used to style the header of the component</li> <li>content - Used to style the content of the component</li> <li>footer - Used to style the footer of the component</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Dialog\";</code>\n\n<b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside <code>ui5-dialog</code>. Ideally you should create all popups on the same level inside your HTML page and just open them from one another, rather than nesting them.\n\n<b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside other components containing z-index. This might break z-index management.","members":[{"deprecated":false,"kind":"field","name":"draggable","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component is draggable. If this property is set to true, the Dialog will be draggable by its header. <br><br> <b>Note:</b> The component can be draggable only in desktop mode. <br><br> <b>Note:</b> This property overrides the default HTML \"draggable\" attribute native behavior. When \"draggable\" is set to true, the native browser \"draggable\" behavior is prevented and only the Dialog custom logic (\"draggable by its header\") works."},{"deprecated":false,"kind":"field","name":"headerText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the header text. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored."},{"deprecated":false,"kind":"field","name":"resizable","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Configures the component to be resizable. If this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages. In RTL languages, the resize handle will be placed in the bottom left corner. <br><br> <b>Note:</b> The component can be resizable only in desktop mode. <br> <b>Note:</b> Upon resizing, externally defined height and width styling will be ignored."},{"deprecated":false,"kind":"field","name":"state","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the state of the <code>Dialog</code>. <br><br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Error\"</code>. <br><br> <b>Note:</b> If <code>\"Error\"</code> and <code>\"Warning\"</code> state is set, it will change the accessibility role to \"alertdialog\", if the accessibleRole property is set to <code>\"Dialog\"</code>."},{"deprecated":false,"kind":"field","name":"stretch","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component should be stretched to fullscreen. <br><br> <b>Note:</b> The component will be stretched to approximately 90% of the viewport."},{"deprecated":false,"kind":"method","name":"show","privacy":"public","description":"Shows the dialog.","parameters":[{"deprecated":false,"name":"preventInitialFocus","type":{"text":"boolean"},"description":"Prevents applying the focus inside the popup","optional":true}],"return":{"type":{"text":"Promise"},"description":"Promise"}}],"superclass":{"module":"Popup.js","name":"Popup","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"Dialog.js","name":"Dialog","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Dialog","module":"Dialog.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-dialog"}]},{"kind":"javascript-module","path":"FileUploader.js","declarations":[{"deprecated":false,"customElement":true,"kind":"FileUploader","name":"FileUploader","tagName":"ui5-file-uploader","slots":[{"deprecated":false,"description":"By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.","name":"default"},{"deprecated":false,"description":"Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.","name":"valueStateMessage"}],"events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Event is fired when the value of the file path has been changed. <b>Note:</b> Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accept","name":"accept","type":{"text":"string"},"description":"Comma-separated list of file types that the component should accept. <br><br> <b>Note:</b> Please make sure you are adding the <code>.</code> in front on the file type, e.g. <code>.png</code> in case you want to accept png's only."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"default":"false","deprecated":false,"fieldName":"hideInput","name":"hide-input","type":{"text":"boolean"},"description":"If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered."},{"default":"false","deprecated":false,"fieldName":"multiple","name":"multiple","type":{"text":"boolean"},"description":"Allows multiple files to be chosen."},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"default":"\"\"","deprecated":false,"fieldName":"placeholder","name":"placeholder","type":{"text":"string"},"description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"default":"\"\"","deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines the name/names of the file/files to upload."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-file-uploader</code> opens a file explorer dialog and enables users to upload files. The component consists of input field, but you can provide an HTML element by your choice to trigger the file upload, by using the default slot. Furthermore, you can set the property \"hideInput\" to \"true\" to hide the input field. <br> To get all selected files, you can simply use the read-only \"files\" property. To restrict the types of files the user can select, you can use the \"accept\" property. <br> And, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the <code>ui5-file-uploader</code> <h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/FileUploader.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"accept","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Comma-separated list of file types that the component should accept. <br><br> <b>Note:</b> Please make sure you are adding the <code>.</code> in front on the file type, e.g. <code>.png</code> in case you want to accept png's only."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"kind":"field","name":"files","privacy":"public","static":false,"type":{"text":"FileList"},"description":"FileList of all selected files."},{"deprecated":false,"kind":"field","name":"hideInput","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered."},{"deprecated":false,"kind":"field","name":"multiple","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Allows multiple files to be chosen."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"deprecated":false,"kind":"field","name":"placeholder","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the name/names of the file/files to upload."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"FileUploader.js","name":"FileUploader","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"FileUploader","module":"FileUploader.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-file-uploader"}]},{"kind":"javascript-module","path":"GroupHeaderListItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"GroupHeaderListItem","name":"GroupHeaderListItem","tagName":"ui5-li-groupheader","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present."}],"description":"The <code>ui5-li-groupheader</code> is a special list item, used only to separate other list items into logical groups.","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present."}],"superclass":{"module":"ListItemBase.js","name":"ListItemBase","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"GroupHeaderListItem.js","name":"GroupHeaderListItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"GroupHeaderListItem","module":"GroupHeaderListItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-li-groupheader"}]},{"kind":"javascript-module","path":"Icon.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Icon","name":"Icon","tagName":"ui5-icon","attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the text alternative of the component. If not provided a default text alternative will be set, if present. <br><br> <b>Note:</b> Every icon should have a text alternative in order to calculate its accessible name."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleRole","name":"accessible-role","type":{"text":"string"},"description":"Defines the accessibility role of the component."},{"default":"\"Default\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.IconDesign"},"description":"Defines the component semantic design.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Contrast</code></li> <li><code>Critical</code></li> <li><code>Default</code></li> <li><code>Information</code></li> <li><code>Negative</code></li> <li><code>Neutral</code></li> <li><code>NonInteractive</code></li> <li><code>Positive</code></li> </ul>"},{"default":"false","deprecated":false,"fieldName":"interactive","name":"interactive","type":{"text":"boolean"},"description":"Defines if the icon is interactive (focusable and pressable)"},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Defines the unique identifier (icon name) of the component. <br>\n\nTo browse all available icons, see the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">SAP Icons</ui5-link>, <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT\">SAP Fiori Tools</ui5-link> and <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">SAP Business Suite</ui5-link> collections. <br>\n\nExample: <br> <code>name='add'</code>, <code>name='delete'</code>, <code>name='employee'</code>. <br><br>\n\n<b>Note:</b> To use the SAP Fiori Tools icons, you need to set the <code>tnt</code> prefix in front of the icon's name. <br>\n\nExample: <br> <code>name='tnt/antenna'</code>, <code>name='tnt/actor'</code>, <code>name='tnt/api'</code>. <br><br>\n\n<b>Note:</b> To use the SAP Business Suite icons, you need to set the <code>business-suite</code> prefix in front of the icon's name. <br>\n\nExample: <br> <code>name='business-suite/3d'</code>, <code>name='business-suite/1x2-grid-layout'</code>, <code>name='business-suite/4x4-grid-layout'</code>."},{"default":"false","deprecated":false,"fieldName":"showTooltip","name":"show-tooltip","type":{"text":"boolean"},"description":"Defines whether the component should have a tooltip. <br><br> <b>Note:</b> The tooltip text should be provided via the <code>accessible-name</code> property."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-icon</code> component represents an SVG icon. There are two main scenarios how the <code>ui5-icon</code> component is used: as a purely decorative element, <br> or as an interactive element that can be focused and clicked.\n\n<h3>Usage</h3>\n\n1. <b>Get familiar with the icons collections.</b> <br> Before displaying an icon, you need to explore the icons collections to find and import the desired icon. <br> Currently there are 3 icons collection, available as 3 npm packages: <br>\n\n<ul> <li> <ui5-link target=\"_blank\" href=\"https://www.npmjs.com/package/@ui5/webcomponents-icons\">@ui5/webcomponents-icons</ui5-link> represents the \"SAP-icons\" collection and includes the following <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons\">icons</ui5-link>. </li> <li> <ui5-link target=\"_blank\" href=\"https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt\">@ui5/webcomponents-icons-tnt</ui5-link> represents the \"tnt\" collection and includes the following <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT\">icons</ui5-link>. </li> <li> <ui5-link target=\"_blank\" href=\"https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite\">@ui5/webcomponents-icons-icons-business-suite</ui5-link> represents the \"business-suite\" collection and includes the following <ui5-link target=\"_blank\" href=\"https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols\">icons</ui5-link>. </li> </ul>\n\n2. <b>After exploring the icons collections, add one or more of the packages as dependencies to your project.</b> <br> <code>npm i @ui5/webcomponents-icons</code><br> <code>npm i @ui5/webcomponents-icons-tnt</code><br> <code>npm i @ui5/webcomponents-icons-business-suite</code> <br><br>\n\n3. <b>Then, import the desired icon</b>. <br> <code>import \"@ui5/{package_name}/dist/{icon_name}.js\";</code> <br><br>\n\n<b>For Example</b>: <br>\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the <code>@ui5/webcomponents-icons</code> package: <br> <code>import \"@ui5/webcomponents-icons/dist/employee.js\";</code> <br><br>\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the <code>@ui5/webcomponents-icons-tnt</code> package: <br> <code>import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";</code> <br><br>\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the <code>@ui5/webcomponents-icons-business-suite</code> package: <br> <code>import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";</code> <br><br>\n\n4. <b>Display the icon using the <code>ui5-icon</code> web component.</b><br> Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)<br> and the icon name to the <code>name</code> property. <br><br>\n\n<code>&lt;ui5-icon name=\"employee\">&lt;/ui5-icon></code><br> <code>&lt;ui5-icon name=\"tnt/antenna\">&lt;/ui5-icon></code><br> <code>&lt;ui5-icon name=\"business-suite/ab-testing\">&lt;/ui5-icon></code>\n\n<br><br> <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-icon</code> exposes the following CSS Shadow Parts: <ul> <li>root - Used to style the outermost wrapper of the <code>ui5-icon</code></li> </ul>\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<ul> <li>[SPACE, ENTER, RETURN] - Fires the <code>click</code> event if the <code>interactive</code> property is set to true.</li> <li>[SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the ui5-icon without triggering the click event.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Icon.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text alternative of the component. If not provided a default text alternative will be set, if present. <br><br> <b>Note:</b> Every icon should have a text alternative in order to calculate its accessible name."},{"deprecated":false,"kind":"field","name":"accessibleRole","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the accessibility role of the component."},{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.IconDesign"},"default":"\"Default\"","description":"Defines the component semantic design.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Contrast</code></li> <li><code>Critical</code></li> <li><code>Default</code></li> <li><code>Information</code></li> <li><code>Negative</code></li> <li><code>Neutral</code></li> <li><code>NonInteractive</code></li> <li><code>Positive</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"interactive","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the icon is interactive (focusable and pressable)"},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the unique identifier (icon name) of the component. <br>\n\nTo browse all available icons, see the <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">SAP Icons</ui5-link>, <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT\">SAP Fiori Tools</ui5-link> and <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">SAP Business Suite</ui5-link> collections. <br>\n\nExample: <br> <code>name='add'</code>, <code>name='delete'</code>, <code>name='employee'</code>. <br><br>\n\n<b>Note:</b> To use the SAP Fiori Tools icons, you need to set the <code>tnt</code> prefix in front of the icon's name. <br>\n\nExample: <br> <code>name='tnt/antenna'</code>, <code>name='tnt/actor'</code>, <code>name='tnt/api'</code>. <br><br>\n\n<b>Note:</b> To use the SAP Business Suite icons, you need to set the <code>business-suite</code> prefix in front of the icon's name. <br>\n\nExample: <br> <code>name='business-suite/3d'</code>, <code>name='business-suite/1x2-grid-layout'</code>, <code>name='business-suite/4x4-grid-layout'</code>."},{"deprecated":false,"kind":"field","name":"showTooltip","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component should have a tooltip. <br><br> <b>Note:</b> The tooltip text should be provided via the <code>accessible-name</code> property."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Icon.js","name":"Icon","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Icon","module":"Icon.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-icon"}]},{"kind":"javascript-module","path":"Input.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Input","name":"Input","tagName":"ui5-input","slots":[{"deprecated":false,"description":"Defines the suggestion items. <br><br> Example: <br><br> &lt;ui5-input show-suggestions><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text=\"Item #1\">&lt;/ui5-suggestion-item><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text=\"Item #2\">&lt;/ui5-suggestion-item><br> &lt;/ui5-input> <br> <ui5-input show-suggestions> <ui5-suggestion-group-item text=\"Group #1\"></ui5-suggestion-group-item> <ui5-suggestion-item text=\"Item #1\"></ui5-suggestion-item> <ui5-suggestion-item text=\"Item #2\"></ui5-suggestion-item> <ui5-suggestion-group-item text=\"Group #2\"></ui5-suggestion-group-item> <ui5-suggestion-item text=\"Item #3\"></ui5-suggestion-item> <ui5-suggestion-item text=\"Item #4\"></ui5-suggestion-item> </ui5-input> <br><br> <b>Note:</b> The suggestions would be displayed only if the <code>showSuggestions</code> property is set to <code>true</code>. <br><br> <b>Note:</b> The <code>&lt;ui5-suggestion-item&gt;</code> and <code>&lt;ui5-suggestion-group-item&gt;</code> are recommended to be used as suggestion items. <br><br> <b>Note:</b> Importing the Input Suggestions Support feature: <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> <br> automatically imports the <code>&lt;ui5-suggestion-item></code> and <code>&lt;ui5-suggestion-group-item></code> for your convenience.","name":"default"},{"deprecated":false,"description":"Defines the icon to be displayed in the component.","name":"icon"},{"deprecated":false,"description":"Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br><br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state. <br><br> <b>Note:</b> If the component has <code>suggestionItems</code>, the <code>valueStateMessage</code> would be displayed as part of the same popover, if used on desktop, or dialog - on phone.","name":"valueStateMessage"}],"events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"deprecated":false,"name":"input","type":"CustomEvent","description":"Fired when the value of the component changes at each keystroke, and when a suggestion item has been selected."},{"deprecated":false,"name":"suggestion-item-preview","type":"CustomEvent","description":"Fired when the user navigates to a suggestion item via the ARROW keys, as a preview, before the final selection."},{"deprecated":false,"name":"suggestion-item-select","type":"CustomEvent","description":"Fired when a suggestion item, that is displayed in the suggestion popup, is selected."}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Receives id(or many ids) of the elements that label the input."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"fieldName":"maxlength","name":"maxlength","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Sets the maximum number of characters available in the input field. <br><br> <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored."},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"default":"false","deprecated":false,"fieldName":"noTypeahead","name":"no-typeahead","type":{"text":"boolean"},"description":"Defines whether the value will be autcompleted to match an item"},{"default":"\"\"","deprecated":false,"fieldName":"placeholder","name":"placeholder","type":{"text":"string"},"description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"false","deprecated":false,"fieldName":"showClearIcon","name":"show-clear-icon","type":{"text":"boolean"},"description":"Defines whether the clear icon of the input will be shown."},{"default":"false","deprecated":false,"fieldName":"showSuggestions","name":"show-suggestions","type":{"text":"boolean"},"description":"Defines whether the component should show suggestions, if such are present. <br><br> <b>Note:</b> You need to import the <code>InputSuggestions</code> module from <code>\"@ui5/webcomponents/dist/features/InputSuggestions.js\"</code> to enable this functionality."},{"default":"\"Text\"","deprecated":false,"fieldName":"type","name":"type","type":{"text":"sap.ui.webc.main.types.InputType"},"description":"Defines the HTML type of the component. Available options are: <code>Text</code>, <code>Email</code>, <code>Number</code>, <code>Password</code>, <code>Tel</code>, and <code>URL</code>. <br><br> <b>Notes:</b> <ul> <li>The particular effect of this property differs depending on the browser and the current language settings, especially for type <code>Number</code>.</li> <li>The property is mostly intended to be used with touch devices that use different soft keyboard layouts depending on the given input type.</li> </ul>"},{"default":"\"\"","deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines the value of the component. <br><br> <b>Note:</b> The property is updated upon typing."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-input</code> component allows the user to enter and edit text or numeric values in one line. <br> Additionally, you can provide <code>suggestionItems</code>, that are displayed in a popover right under the input. <br><br> The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code>disabled</code> property). To visualize semantic states, such as \"error\" or \"warning\", the <code>valueState</code> property is provided. When the user makes changes to the text, the change event is fired, which enables you to react on any text change. <br><br> <b>Note:</b> If you are using the <code>ui5-input</code> as a single npm module, don't forget to import the <code>InputSuggestions</code> module from \"@ui5/webcomponents/dist/features/InputSuggestions.js\" to enable the suggestions functionality.\n\n<h3>Keyboard Handling</h3> The <code>ui5-input</code> provides the following keyboard shortcuts: <br>\n\n<ul> <li>[ESC] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.</li> <li>[ENTER] or [RETURN] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.</li> <li>[DOWN] - Focuses the next matching item in the suggestion list.</li> <li>[UP] - Focuses the previous matching item in the suggestion list.</li> <li>[HOME] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.</li> <li>[END] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.</li> <li>[PAGEUP] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.</li> <li>[PAGEDOWN] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Input.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> (optional - for input suggestions support)","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":"accessibleNameRef","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Receives id(or many ids) of the elements that label the input."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"kind":"field","name":"maxlength","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Sets the maximum number of characters available in the input field. <br><br> <b>Note:</b> This property is not compatible with the ui5-input type InputType.Number. If the ui5-input type is set to Number, the maxlength value is ignored."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"deprecated":false,"kind":"field","name":"noTypeahead","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the value will be autcompleted to match an item"},{"deprecated":false,"kind":"field","name":"placeholder","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"deprecated":false,"kind":"field","name":"previewItem","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.IInputSuggestionItem|null"},"description":"The suggestion item on preview."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"showClearIcon","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the clear icon of the input will be shown."},{"deprecated":false,"kind":"field","name":"showSuggestions","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component should show suggestions, if such are present. <br><br> <b>Note:</b> You need to import the <code>InputSuggestions</code> module from <code>\"@ui5/webcomponents/dist/features/InputSuggestions.js\"</code> to enable this functionality."},{"deprecated":false,"kind":"field","name":"type","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.InputType"},"default":"\"Text\"","description":"Defines the HTML type of the component. Available options are: <code>Text</code>, <code>Email</code>, <code>Number</code>, <code>Password</code>, <code>Tel</code>, and <code>URL</code>. <br><br> <b>Notes:</b> <ul> <li>The particular effect of this property differs depending on the browser and the current language settings, especially for type <code>Number</code>.</li> <li>The property is mostly intended to be used with touch devices that use different soft keyboard layouts depending on the given input type.</li> </ul>"},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the value of the component. <br><br> <b>Note:</b> The property is updated upon typing."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"},{"deprecated":false,"kind":"method","name":"openPicker","privacy":"public","description":"Manually opens the suggestions popover, assuming suggestions are enabled. Items must be preloaded for it to open."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Input.js","name":"Input","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Input","module":"Input.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-input"}]},{"kind":"javascript-module","path":"Label.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Label","name":"Label","tagName":"ui5-label","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"for","name":"for","type":{"text":"string"},"description":"Defines the labeled input by providing its ID. <br><br> <b>Note:</b> Can be used with both <code>ui5-input</code> and native input."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether an asterisk character is added to the component text. <br><br> <b>Note:</b> Usually indicates that user input (bound with the <code>for</code> property) is required. In that case the <code>required</> property of the corresponding input should also be set."},{"default":"false","deprecated":false,"fieldName":"showColon","name":"show-colon","type":{"text":"boolean"},"description":"Defines whether colon is added to the component text. <br><br> <b>Note:</b> Usually used in forms."},{"default":"\"None\"","deprecated":false,"fieldName":"wrappingType","name":"wrapping-type","type":{"text":"sap.ui.webc.main.types.WrappingType"},"description":"Defines how the text of a component will be displayed when there is not enough space. Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-label</code> is a component used to represent a label for elements like input, textarea, select. <br><br> The <code>for</code> property of the <code>ui5-label</code> must be the same as the id attribute of the related input element.<br><br> Screen readers read out the label, when the user focuses the labelled control. <br><br> The <code>ui5-label</code> appearance can be influenced by properties, such as <code>required</code> and <code>wrappingType</code>. The appearance of the Label can be configured in a limited way by using the design property. For a broader choice of designs, you can use custom styles.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Label\";</code>","members":[{"deprecated":false,"kind":"field","name":"for","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the labeled input by providing its ID. <br><br> <b>Note:</b> Can be used with both <code>ui5-input</code> and native input."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether an asterisk character is added to the component text. <br><br> <b>Note:</b> Usually indicates that user input (bound with the <code>for</code> property) is required. In that case the <code>required</> property of the corresponding input should also be set."},{"deprecated":false,"kind":"field","name":"showColon","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether colon is added to the component text. <br><br> <b>Note:</b> Usually used in forms."},{"deprecated":false,"kind":"field","name":"wrappingType","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.WrappingType"},"default":"\"None\"","description":"Defines how the text of a component will be displayed when there is not enough space. Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Label.js","name":"Label","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Label","module":"Label.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-label"}]},{"kind":"javascript-module","path":"Link.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Link","name":"Link","tagName":"ui5-link","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"events":[{"deprecated":false,"name":"click","type":"CustomEvent","description":"Fired when the component is triggered either with a mouse/tap or by using the Enter key."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Receives id(or many ids) of the elements that label the input"},{"default":"\"link\"","deprecated":false,"fieldName":"accessibleRole","name":"accessible-role","type":{"text":"string"},"description":"Defines the ARIA role of the component.\n\n<b>Note:</b> Use the \"button\" role in cases when navigation is not expected to occur and the href property is not defined."},{"default":"\"Default\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.LinkDesign"},"description":"Defines the component design. <br><br> <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is disabled. <br><br> <b>Note:</b> When disabled, the click event cannot be triggered by the user."},{"default":"\"\"","deprecated":false,"fieldName":"href","name":"href","type":{"text":"string"},"description":"Defines the component href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported."},{"default":"\"\"","deprecated":false,"fieldName":"target","name":"target","type":{"text":"string"},"description":"Defines the component target. <br><br> <b>Notes:</b>\n\n<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>\n\n<b>This property must only be used when the <code>href</code> property is set.</b>"},{"default":"\"None\"","deprecated":false,"fieldName":"wrappingType","name":"wrapping-type","type":{"text":"sap.ui.webc.main.types.WrappingType"},"description":"Defines how the text of a component will be displayed when there is not enough space. Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-link</code> is a hyperlink component that is used to navigate to other apps and web pages, or to trigger actions. It is a clickable text element, visualized in such a way that it stands out from the standard text. On hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n<h3>Usage</h3>\n\nYou can set the <code>ui5-link</code> to be enabled or disabled. <br><br> To create a visual hierarchy in large lists of links, you can set the less important links as <code>Subtle</code> or the more important ones as <code>Emphasized</code>, by using the <code>design</code> property. <br><br> If the <code>href</code> property is set, the link behaves as the HTML anchor tag (<code>&lt;a&gt;&lt;a&#47;&gt;</code>) and opens the specified URL in the given target frame (<code>target</code> property). To specify where the linked content is opened, you can use the <code>target</code> property.\n\n<h3>Responsive behavior</h3>\n\nIf there is not enough space, the text of the <code>ui5-link</code> becomes truncated. If the <code>wrappingType</code> property is set to <code>\"Normal\"</code>, the text is displayed on several lines instead of being truncated.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Link\";</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":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the accessible ARIA name of the component."},{"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 input"},{"deprecated":false,"kind":"field","name":"accessibleRole","privacy":"public","static":false,"type":{"text":"string"},"default":"\"link\"","description":"Defines the ARIA role of the component.\n\n<b>Note:</b> Use the \"button\" role in cases when navigation is not expected to occur and the href property is not defined."},{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.LinkDesign"},"default":"\"Default\"","description":"Defines the component design. <br><br> <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is disabled. <br><br> <b>Note:</b> When disabled, the click event cannot be triggered by the user."},{"deprecated":false,"kind":"field","name":"href","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the component href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported."},{"deprecated":false,"kind":"field","name":"target","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the component target. <br><br> <b>Notes:</b>\n\n<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>\n\n<b>This property must only be used when the <code>href</code> property is set.</b>"},{"deprecated":false,"kind":"field","name":"wrappingType","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.WrappingType"},"default":"\"None\"","description":"Defines how the text of a component will be displayed when there is not enough space. Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Link.js","name":"Link","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Link","module":"Link.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-link"}]},{"kind":"javascript-module","path":"List.js","declarations":[{"deprecated":false,"customElement":true,"kind":"List","name":"List","tagName":"ui5-list","slots":[{"deprecated":false,"description":"Defines the items of the component. <br><br> <b>Note:</b> Use <code>ui5-li</code>, <code>ui5-li-custom</code>, and <code>ui5-li-groupheader</code> for the intended design.","name":"default"},{"deprecated":false,"description":"Defines the component header. <br><br> <b>Note:</b> When <code>header</code> is set, the <code>headerText</code> property is ignored.","name":"header"}],"events":[{"deprecated":false,"name":"item-click","type":"CustomEvent","description":"Fired when an item is activated, unless the item's <code>type</code> property is set to <code>Inactive</code>."},{"deprecated":false,"name":"item-close","type":"CustomEvent","description":"Fired when the <code>Close</code> button of any item is clicked <br><br> <b>Note:</b> This event is only applicable to list items that can be closed (such as notification list items), not to be confused with <code>item-delete</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 component <code>mode</code> property is set to <code>Delete</code>."},{"deprecated":false,"name":"item-toggle","type":"CustomEvent","description":"Fired when the <code>Toggle</code> button of any item is clicked. <br><br> <b>Note:</b> This event is only applicable to list items that can be toggled (such as notification group list items)."},{"deprecated":false,"name":"load-more","type":"CustomEvent","description":"Fired when the user scrolls to the bottom of the list. <br><br> <b>Note:</b> The event is fired when the <code>growing='Scroll'</code> property is enabled."},{"deprecated":false,"name":"selection-change","type":"CustomEvent","description":"Fired when selection is changed by user interaction in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible name of the component."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Defines the IDs of the elements that label the input."},{"default":"\"list\"","deprecated":false,"fieldName":"accessibleRole","name":"accessible-role","type":{"text":"string"},"description":"Defines the accessible role of the component. <br><br>"},{"default":"false","deprecated":false,"fieldName":"busy","name":"busy","type":{"text":"boolean"},"description":"Defines if the component would display a loading indicator over the list."},{"default":"1000","deprecated":false,"fieldName":"busyDelay","name":"busy-delay","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the delay in milliseconds, after which the busy indicator will show up for this component."},{"default":"\"\"","deprecated":false,"fieldName":"footerText","name":"footer-text","type":{"text":"string"},"description":"Defines the footer text."},{"default":"\"None\"","deprecated":false,"fieldName":"growing","name":"growing","type":{"text":"sap.ui.webc.main.types.ListGrowingMode"},"description":"Defines whether the component will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the list, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>."},{"default":"\"\"","deprecated":false,"fieldName":"headerText","name":"header-text","type":{"text":"string"},"description":"Defines the component header text. <br><br> <b>Note:</b> If <code>header</code> is set this property is ignored."},{"default":"false","deprecated":false,"fieldName":"indent","name":"indent","type":{"text":"boolean"},"description":"Determines whether the component is indented."},{"default":"\"None\"","deprecated":false,"fieldName":"mode","name":"mode","type":{"text":"sap.ui.webc.main.types.ListMode"},"description":"Defines the mode of the component. <br><br> <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code>, <code>MultiSelect</code>, and <code>Delete</code>."},{"default":"\"\"","deprecated":false,"fieldName":"noDataText","name":"no-data-text","type":{"text":"string"},"description":"Defines the text that is displayed when the component contains no items."},{"default":"\"All\"","deprecated":false,"fieldName":"separators","name":"separators","type":{"text":"sap.ui.webc.main.types.ListSeparators"},"description":"Defines the item separator style that is used. <br><br> <b>Notes:</b> <ul> <li>Avalaible options are <code>All</code>, <code>Inner</code>, and <code>None</code>.</li> <li>When set to <code>None</code>, none of the items are separated by horizontal lines.</li> <li>When set to <code>Inner</code>, the first item doesn't have a top separator and the last item doesn't have a bottom separator.</li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-list</code> component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. <br><br> The <code>ui5-list</code> is a container for the available list items: <ul> <li><code>ui5-li</code></li> <li><code>ui5-li-custom</code></li> <li><code>ui5-li-groupheader</code></li> </ul> <br><br> To benefit from the built-in selection mechanism, you can use the available selection modes, such as <code>SingleSelect</code>, <code>MultiSelect</code> and <code>Delete</code>. <br><br> Additionally, the <code>ui5-list</code> provides header, footer, and customization for the list item separators.\n\n<br><br> <h3>Keyboard Handling</h3>\n\n<h4>Basic Navigation</h4> The <code>ui5-list</code> provides advanced keyboard handling. When a list is focused the user can use the following keyboard shortcuts in order to perform a navigation: <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> </ul>\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete), when the <code>mode</code> property is in use: <ul> <li>[SPACE] - Select an item (if <code>type</code> is 'Active') when <code>mode</code> is selection</li> <li>[DELETE] - Delete an item if <code>mode</code> property is <code>Delete</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/dist/List.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/StandardListItem.js\";</code> (for <code>ui5-li</code>) <br> <code>import \"@ui5/webcomponents/dist/CustomListItem.js\";</code> (for <code>ui5-li-custom</code>) <br> <code>import \"@ui5/webcomponents/dist/GroupHeaderListItem.js\";</code> (for <code>ui5-li-groupheader</code>)","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the accessible name of the component."},{"deprecated":false,"kind":"field","name":"accessibleNameRef","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the IDs of the elements that label the input."},{"deprecated":false,"kind":"field","name":"accessibleRole","privacy":"public","static":false,"type":{"text":"string"},"default":"\"list\"","description":"Defines the accessible role of the component. <br><br>"},{"deprecated":false,"kind":"field","name":"busy","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the component would display a loading indicator over the list."},{"deprecated":false,"kind":"field","name":"busyDelay","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1000","description":"Defines the delay in milliseconds, after which the busy indicator will show up for this component."},{"deprecated":false,"kind":"field","name":"footerText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the footer text."},{"deprecated":false,"kind":"field","name":"growing","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ListGrowingMode"},"default":"\"None\"","description":"Defines whether the component will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the list, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the list; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>."},{"deprecated":false,"kind":"field","name":"headerText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the component header text. <br><br> <b>Note:</b> If <code>header</code> is set this property is ignored."},{"deprecated":false,"kind":"field","name":"indent","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component is indented."},{"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 component. <br><br> <b>Note:</b> Available options are <code>None</code>, <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code>, <code>MultiSelect</code>, and <code>Delete</code>."},{"deprecated":false,"kind":"field","name":"noDataText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text that is displayed when the component contains no items."},{"deprecated":false,"kind":"field","name":"separators","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ListSeparators"},"default":"\"All\"","description":"Defines the item separator style that is used. <br><br> <b>Notes:</b> <ul> <li>Avalaible options are <code>All</code>, <code>Inner</code>, and <code>None</code>.</li> <li>When set to <code>None</code>, none of the items are separated by horizontal lines.</li> <li>When set to <code>Inner</code>, the first item doesn't have a top separator and the last item doesn't have a bottom separator.</li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"List.js","name":"List","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"List","module":"List.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-list"}]},{"kind":"javascript-module","path":"Menu.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Menu","name":"Menu","tagName":"ui5-menu","slots":[{"deprecated":false,"description":"Defines the items of this component. <br><br> <b>Note:</b> Use <code>ui5-menu-item</code> for the intended design.","name":"default"}],"events":[{"deprecated":false,"name":"after-close","type":"CustomEvent","description":"Fired after the menu is closed. <b>This event does not bubble.</b>"},{"deprecated":false,"name":"after-open","type":"CustomEvent","description":"Fired after the menu is opened. <b>This event does not bubble.</b>"},{"deprecated":false,"name":"before-close","type":"CustomEvent","description":"Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. <b>This event does not bubble.</b>"},{"deprecated":false,"name":"before-open","type":"CustomEvent","description":"Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening. <b>This event does not bubble.</b> <b>Note:</b> Since 1.14.0 the event is also fired before a sub-menu opens."},{"deprecated":false,"name":"item-click","type":"CustomEvent","description":"Fired when an item is being clicked."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"busy","name":"busy","type":{"text":"boolean"},"description":"Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover."},{"default":"1000","deprecated":false,"fieldName":"busyDelay","name":"busy-delay","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.."},{"default":"\"\"","deprecated":false,"fieldName":"headerText","name":"header-text","type":{"text":"string"},"description":"Defines the header text of the menu (displayed on mobile)."},{"default":"false","deprecated":false,"fieldName":"open","name":"open","type":{"text":"boolean"},"description":"Indicates if the menu is open"},{"default":"\"\"","deprecated":false,"fieldName":"opener","name":"opener","type":{"text":"sap.ui.webc.base.types.DOMReference"},"description":"Defines the ID or DOM Reference of the element that the menu is shown at"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<code>ui5-menu</code> component represents a hierarchical menu structure.\n\n<h3>Usage</h3>\n\n<code>ui5-menu</code> contains <code>ui5-menu-item</code> components. An arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n<h3>Keyboard Handling</h3>\n\nThe <code>ui5-menu</code> provides advanced keyboard handling. The user can use the following keyboard shortcuts in order to navigate trough the tree: <ul> <li><code>Arrow Up</code> / <code>Arrow Down</code> - Navigates up and down the menu items that are currently visible.</li> <li><code>Arrow Right</code>, <code>Space</code> or <code>Enter</code> - Opens a sub-menu if there are menu items nested in the currently clicked menu item.</li> <li><code>Arrow Left</code> or <code>Escape</code> - Closes the currently opened sub-menu.</li> </ul> Note: if the text ditrection is set to Right-to-left (RTL), <code>Arrow Right</code> and <code>Arrow Left</code> functionality is swapped. <br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Menu.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"busy","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover."},{"deprecated":false,"kind":"field","name":"busyDelay","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1000","description":"Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.."},{"deprecated":false,"kind":"field","name":"headerText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the header text of the menu (displayed on mobile)."},{"deprecated":false,"kind":"field","name":"open","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates if the menu is open"},{"deprecated":false,"kind":"field","name":"opener","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.DOMReference"},"default":"\"\"","description":"Defines the ID or DOM Reference of the element that the menu is shown at"},{"deprecated":false,"kind":"method","name":"close","privacy":"public","description":"Closes the Menu."},{"deprecated":false,"kind":"method","name":"showAt","privacy":"public","description":"Shows the Menu near the opener element.","parameters":[{"deprecated":false,"name":"opener","type":{"text":"HTMLElement"},"description":"the element that the popover is shown at"}]}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Menu.js","name":"Menu","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Menu","module":"Menu.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-menu"}]},{"kind":"javascript-module","path":"MenuItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MenuItem","name":"MenuItem","tagName":"ui5-menu-item","slots":[{"deprecated":false,"description":"Defines the items of this component.","name":"default"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"deprecated":false,"fieldName":"additionalText","name":"additional-text","type":{"text":"string"},"description":"Defines the <code>additionalText</code>, displayed in the end of the menu item. <b>Note:</b> The additional text would not be displayed if the item has a submenu."},{"default":"false","deprecated":false,"fieldName":"busy","name":"busy","type":{"text":"boolean"},"description":"Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.\n\nNote: If set to <code>true</code> a <code>ui5-busy-indicator</code> component will be displayed into the related one to the current <code>ui5-menu-item</code> sub-menu popover."},{"default":"1000","deprecated":false,"fieldName":"busyDelay","name":"busy-delay","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether <code>ui5-menu-item</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-menu-item</code> is noninteractive."},{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"string"},"description":"Defines the icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options. <br><br> <b>* Example:</b> 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":"startsSection","name":"starts-section","type":{"text":"boolean"},"description":"Defines whether a visual separator should be rendered before the item."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the tree item."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<code>ui5-menu-item</code> is the item to use inside a <code>ui5-menu</code>. An arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n<h3>Usage</h3>\n\n<code>ui5-menu-item</code> is an abstract element, representing a node in a <code>ui5-menu</code>. The menu itself is rendered as a list, and each <code>ui5-menu-item</code> is represented by a list item (<code>ui5-li</code>) in that list. Therefore, you should only use <code>ui5-menu-item</code> directly in your apps. The <code>ui5-li</code> list item is internal for the list, and not intended for public use.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MenuItem.js\";</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":"additionalText","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the <code>additionalText</code>, displayed in the end of the menu item. <b>Note:</b> The additional text would not be displayed if the item has a submenu."},{"deprecated":false,"kind":"field","name":"busy","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover.\n\nNote: If set to <code>true</code> a <code>ui5-busy-indicator</code> component will be displayed into the related one to the current <code>ui5-menu-item</code> sub-menu popover."},{"deprecated":false,"kind":"field","name":"busyDelay","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1000","description":"Defines the delay in milliseconds, after which the busy indicator will be displayed inside the corresponding ui5-menu popover."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether <code>ui5-menu-item</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-menu-item</code> is noninteractive."},{"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 component. The SAP-icons font provides numerous options. <br><br> <b>* Example:</b> 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":"startsSection","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether a visual separator should be rendered before the item."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the tree item."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"MenuItem.js","name":"MenuItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MenuItem","module":"MenuItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-menu-item"}]},{"kind":"javascript-module","path":"MessageStrip.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MessageStrip","name":"MessageStrip","tagName":"ui5-message-strip","slots":[{"deprecated":false,"description":"Defines the text of the component. <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 content to be displayed as graphical element within the component. <br><br> <b>Note:</b> If no icon is given, the default icon for the component type will be used. The 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>.","name":"icon"}],"events":[{"deprecated":false,"name":"close","type":"CustomEvent","description":"Fired when the close button is pressed either with a click/tap or by using the Enter or Space key."}],"attributes":[{"default":"\"Information\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.MessageStripDesign"},"description":"Defines the component type. <br><br> <b>Note:</b> Available options are <code>\"Information\"</code>, <code>\"Positive\"</code>, <code>\"Negative\"</code>, and <code>\"Warning\"</code>."},{"default":"false","deprecated":false,"fieldName":"hideCloseButton","name":"hide-close-button","type":{"text":"boolean"},"description":"Defines whether the MessageStrip renders close button."},{"default":"false","deprecated":false,"fieldName":"hideIcon","name":"hide-icon","type":{"text":"boolean"},"description":"Defines whether the MessageStrip will show an icon in the beginning. You can directly provide an icon with the <code>icon</code> slot. Otherwise, the default icon for the type will be used."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-message-strip</code> component enables the embedding of app-related messages. It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative. Each message can have a Close button, so that it can be removed from the UI, if needed.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-message-strip</code> component, you can define whether it displays an icon in the beginning and a close button. Moreover, its size and background can be controlled with CSS.\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/dist/MessageStrip\";</code>","members":[{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.MessageStripDesign"},"default":"\"Information\"","description":"Defines the component type. <br><br> <b>Note:</b> Available options are <code>\"Information\"</code>, <code>\"Positive\"</code>, <code>\"Negative\"</code>, and <code>\"Warning\"</code>."},{"deprecated":false,"kind":"field","name":"hideCloseButton","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the MessageStrip renders close button."},{"deprecated":false,"kind":"field","name":"hideIcon","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the MessageStrip will show an icon in the beginning. You can directly provide an icon with the <code>icon</code> slot. Otherwise, the default icon for the type will be used."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"MessageStrip.js","name":"MessageStrip","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MessageStrip","module":"MessageStrip.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-message-strip"}]},{"kind":"javascript-module","path":"MonthPicker.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MonthPicker","name":"MonthPicker","tagName":"ui5-monthpicker","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the user selects a month via \"Space\", \"Enter\" or click."},{"deprecated":false,"name":"navigate","type":"CustomEvent","description":"Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse."}],"description":"Displays months which can be selected.","members":[{"deprecated":false,"kind":"field","name":"selectedDates","privacy":"public","static":false,"type":{"text":"array"},"description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."}],"superclass":{"module":"CalendarPart.js","name":"CalendarPart","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"MonthPicker.js","name":"MonthPicker","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MonthPicker","module":"MonthPicker.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-monthpicker"}]},{"kind":"javascript-module","path":"MultiComboBox.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MultiComboBox","name":"MultiComboBox","tagName":"ui5-multi-combobox","slots":[{"deprecated":false,"description":"Defines the component items.","name":"default"},{"deprecated":false,"description":"Defines the icon to be displayed in the component.","name":"icon"},{"deprecated":false,"description":"Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.","name":"valueStateMessage"}],"events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"deprecated":false,"name":"input","type":"CustomEvent","description":"Fired when the value of the component changes at each keystroke."},{"deprecated":false,"name":"open-change","type":"CustomEvent","description":"Fired when the dropdown is opened or closed."},{"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":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"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":"false","deprecated":false,"fieldName":"allowCustomValues","name":"allow-custom-values","type":{"text":"boolean"},"description":"Defines if the user input will be prevented, if no matching item has been found"},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"default":"\"StartsWithPerTerm\"","deprecated":false,"fieldName":"filter","name":"filter","type":{"text":"sap.ui.webc.main.types.ComboBoxFilter"},"description":"Defines the filter type of the component. Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>."},{"default":"false","deprecated":false,"fieldName":"noTypeahead","name":"no-typeahead","type":{"text":"boolean"},"description":"Defines whether the value will be autcompleted to match an item"},{"default":"\"\"","deprecated":false,"fieldName":"placeholder","name":"placeholder","type":{"text":"string"},"description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"\"\"","deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines the value of the component. <br><br> <b>Note:</b> The property is updated upon typing."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options. The options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens. <h3>Structure</h3> The <code>ui5-multi-combobox</code> consists of the following elements: <ul> <li> Tokenizer - a list of tokens with selected options.</li> <li> Input field - displays the selected option/s as token/s. Users can type to filter the list.</li> <li> Drop-down arrow - expands\\collapses the option list.</li> <li> Option list - the list of available options.</li> </ul> <h3>Keyboard Handling</h3>\n\nThe <code>ui5-multi-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-multi-combobox</code> is focused, you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened, you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one by pressing the <code>Space</code> or <code>Enter</code> keys. <br>\n\n<h4>Tokens</h4> <ul> <li> Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available). </li> <li> Delete - deletes the token and focuses the previous token. </li> <li> Backspace - deletes the token and focus the next token. </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-multi-combobox</code> exposes the following CSS Shadow Parts: <ul> <li>token-{index} - Used to style each token(where <code>token-0</code> corresponds to the first item)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>","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":"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":"allowCustomValues","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the user input will be prevented, if no matching item has been found"},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"kind":"field","name":"filter","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ComboBoxFilter"},"default":"\"StartsWithPerTerm\"","description":"Defines the filter type of the component. Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>."},{"deprecated":false,"kind":"field","name":"noTypeahead","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the value will be autcompleted to match an item"},{"deprecated":false,"kind":"field","name":"open","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates whether the dropdown is open. True if the dropdown is open, false otherwise."},{"deprecated":false,"kind":"field","name":"placeholder","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the value of the component. <br><br> <b>Note:</b> The property is updated upon typing."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"MultiComboBox.js","name":"MultiComboBox","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MultiComboBox","module":"MultiComboBox.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-multi-combobox"}]},{"kind":"javascript-module","path":"MultiComboBoxGroupItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MultiComboBoxGroupItem","name":"MultiComboBoxGroupItem","tagName":"ui5-mcb-group-item","attributes":[{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the component."}],"description":"The <code>ui5-mcb-group-item</code> is type of suggestion item, that can be used to split the <code>ui5-multi-combobox</code> suggestions into groups.","members":[{"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":"MultiComboBoxGroupItem.js","name":"MultiComboBoxGroupItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MultiComboBoxGroupItem","module":"MultiComboBoxGroupItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-mcb-group-item"}]},{"kind":"javascript-module","path":"MultiComboBoxItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MultiComboBoxItem","name":"MultiComboBoxItem","tagName":"ui5-mcb-item","attributes":[{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines the selected state of the component."}],"description":"The <code>ui5-mcb-item</code> represents the item for a <code>ui5-multi-combobox</code>.","members":[{"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":"ComboBoxItem.js","name":"ComboBoxItem","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"MultiComboBoxItem.js","name":"MultiComboBoxItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MultiComboBoxItem","module":"MultiComboBoxItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-mcb-item"}]},{"kind":"javascript-module","path":"MultiInput.js","declarations":[{"deprecated":false,"customElement":true,"kind":"MultiInput","name":"MultiInput","tagName":"ui5-multi-input","slots":[{"deprecated":false,"description":"Defines the component tokens.","name":"tokens"}],"events":[{"deprecated":false,"name":"token-delete","type":"CustomEvent","description":"Fired when a token is about to be deleted."},{"deprecated":false,"name":"value-help-trigger","type":"CustomEvent","description":"Fired when the value help icon is pressed and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"showValueHelpIcon","name":"show-value-help-icon","type":{"text":"boolean"},"description":"Determines whether a value help icon will be visualized in the end of the input. Pressing the icon will fire <code>value-help-trigger</code> event."}],"description":"<h3>Overview</h3> A <code>ui5-multi-input</code> field allows the user to enter multiple values, which are displayed as <code>ui5-token</code>.\n\nUser can choose interaction for creating tokens. Fiori Guidelines say that user should create tokens when: <ul> <li>Type a value in the input and press enter or focus out the input field (<code>change</code> event is fired)</li> <li>Select a value from the suggestion list (<code>suggestion-item-select</code> event is fired)</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiInput\";</code>","members":[{"deprecated":false,"kind":"field","name":"showValueHelpIcon","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether a value help icon will be visualized in the end of the input. Pressing the icon will fire <code>value-help-trigger</code> event."}],"superclass":{"module":"Input.js","name":"Input","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"MultiInput.js","name":"MultiInput","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"MultiInput","module":"MultiInput.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-multi-input"}]},{"kind":"javascript-module","path":"Option.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Option","name":"Option","tagName":"ui5-option","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"attributes":[{"deprecated":false,"fieldName":"additionalText","name":"additional-text","type":{"text":"string"},"description":"Defines the additional text displayed at the end of the option element."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is hidden."},{"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":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines the selected state of the component."},{"deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected. For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.","members":[{"deprecated":false,"kind":"field","name":"additionalText","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the additional text displayed at the end of the option element."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is hidden."},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"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>."},{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the selected state of the component."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected. For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Option.js","name":"Option","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Option","module":"Option.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-option"}]},{"kind":"javascript-module","path":"Panel.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Panel","name":"Panel","tagName":"ui5-panel","slots":[{"deprecated":false,"description":"Defines the content of the component. The content is visible only when the component is expanded.","name":"default"},{"deprecated":false,"description":"Defines the component header area. <br><br> <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored.","name":"header"}],"events":[{"deprecated":false,"name":"toggle","type":"CustomEvent","description":"Fired when the component is expanded/collapsed by user interaction."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"Form\"","deprecated":false,"fieldName":"accessibleRole","name":"accessible-role","type":{"text":"sap.ui.webc.main.types.PanelAccessibleRole"},"description":"Sets the accessible ARIA role of the component. Depending on the usage, you can change the role from the default <code>Form</code> to <code>Region</code> or <code>Complementary</code>."},{"default":"false","deprecated":false,"fieldName":"collapsed","name":"collapsed","type":{"text":"boolean"},"description":"Indicates whether the component is collapsed and only the header is displayed."},{"default":"false","deprecated":false,"fieldName":"fixed","name":"fixed","type":{"text":"boolean"},"description":"Determines whether the component is in a fixed state that is not expandable/collapsible by user interaction."},{"default":"\"H2\"","deprecated":false,"fieldName":"headerLevel","name":"header-level","type":{"text":"sap.ui.webc.main.types.TitleLevel"},"description":"Defines the \"aria-level\" of component heading, set by the <code>headerText</code>. <br><br> Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>."},{"default":"\"\"","deprecated":false,"fieldName":"headerText","name":"header-text","type":{"text":"string"},"description":"This property is used to set the header text of the component. The text is visible in both expanded and collapsed states. <br><br> <b>Note:</b> This property is overridden by the <code>header</code> slot."},{"default":"false","deprecated":false,"fieldName":"noAnimation","name":"no-animation","type":{"text":"boolean"},"description":"Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-panel</code> component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen.\n\n<h3>Guidelines:</h3> <ul> <li>Nesting two or more panels is not recommended.</li> <li>Do not stack too many panels on one page.</li> </ul>\n\n<h3>Structure</h3> The panel's header area consists of a title bar with a header text or custom header. <br> The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state. <br> The custom header can be set through the <code>header</code> slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements. <br> The content area can contain an arbitrary set of controls. <br><b>Note:</b> The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n<h3>Responsive Behavior</h3> <ul> <li>If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.</li> <li>If the panel has a fixed height, it will take up the space even if the panel is collapsed.</li> <li>When the panel is expandable (the <code>fixed</code> property is set to <code>false</code>), an arrow icon (pointing to the right) appears in front of the header.</li> <li>When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.</li> <li>When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.</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-panel</code> exposes the following CSS Shadow Parts: <ul> <li>header - Used to style the wrapper of the header</li> <li>content - Used to style the wrapper of the content</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/dist/Panel\";</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":"accessibleRole","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.PanelAccessibleRole"},"default":"\"Form\"","description":"Sets the accessible ARIA role of the component. Depending on the usage, you can change the role from the default <code>Form</code> to <code>Region</code> or <code>Complementary</code>."},{"deprecated":false,"kind":"field","name":"collapsed","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates whether the component is collapsed and only the header is displayed."},{"deprecated":false,"kind":"field","name":"fixed","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component is in a fixed state that is not expandable/collapsible by user interaction."},{"deprecated":false,"kind":"field","name":"headerLevel","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TitleLevel"},"default":"\"H2\"","description":"Defines the \"aria-level\" of component heading, set by the <code>headerText</code>. <br><br> Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>."},{"deprecated":false,"kind":"field","name":"headerText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"This property is used to set the header text of the component. The text is visible in both expanded and collapsed states. <br><br> <b>Note:</b> This property is overridden by the <code>header</code> slot."},{"deprecated":false,"kind":"field","name":"noAnimation","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Panel.js","name":"Panel","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Panel","module":"Panel.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-panel"}]},{"kind":"javascript-module","path":"Popover.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Popover","name":"Popover","tagName":"ui5-popover","slots":[{"deprecated":false,"description":"Defines the footer HTML Element.","name":"footer"},{"deprecated":false,"description":"Defines the header HTML Element.","name":"header"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"allowTargetOverlap","name":"allow-target-overlap","type":{"text":"boolean"},"description":"Determines if there is no enough space, the component can be placed over the target."},{"default":"\"\"","deprecated":false,"fieldName":"headerText","name":"header-text","type":{"text":"string"},"description":"Defines the header text. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored."},{"default":"false","deprecated":false,"fieldName":"hideArrow","name":"hide-arrow","type":{"text":"boolean"},"description":"Determines whether the component arrow is hidden."},{"default":"false","deprecated":false,"fieldName":"hideBackdrop","name":"hide-backdrop","type":{"text":"boolean"},"description":"Defines whether the block layer will be shown if modal property is set to true."},{"default":"\"Center\"","deprecated":false,"fieldName":"horizontalAlign","name":"horizontal-align","type":{"text":"sap.ui.webc.main.types.PopoverHorizontalAlign"},"description":"Determines the horizontal alignment of the component. <br><br> Available options are: <ul> <li><code>Center</code></li> <li><code>Left</code></li> <li><code>Right</code></li> <li><code>Stretch</code></li> </ul>"},{"default":"false","deprecated":false,"fieldName":"modal","name":"modal","type":{"text":"boolean"},"description":"Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background."},{"default":"undefined","deprecated":false,"fieldName":"opener","name":"opener","type":{"text":"sap.ui.webc.base.types.DOMReference"},"description":"Defines the ID or DOM Reference of the element that the popover is shown at"},{"default":"\"Right\"","deprecated":false,"fieldName":"placementType","name":"placement-type","type":{"text":"sap.ui.webc.main.types.PopoverPlacementType"},"description":"Determines on which side the component is placed at. <br><br> Available options are: <ul> <li><code>Left</code></li> <li><code>Right</code></li> <li><code>Top</code></li> <li><code>Bottom</code></li> </ul>"},{"default":"\"Center\"","deprecated":false,"fieldName":"verticalAlign","name":"vertical-align","type":{"text":"sap.ui.webc.main.types.PopoverVerticalAlign"},"description":"Determines the vertical alignment of the component. <br><br> Available options are: <ul> <li><code>Center</code></li> <li><code>Top</code></li> <li><code>Bottom</code></li> <li><code>Stretch</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-popover</code> component displays additional information for an object in a compact way and without leaving the page. The Popover can contain various UI elements, such as fields, tables, images, and charts. It can also include actions in the footer.\n\n<h3>Structure</h3>\n\nThe popover has three main areas: <ul> <li>Header (optional)</li> <li>Content</li> <li>Footer (optional)</li> </ul>\n\n<b>Note:</b> The <code>ui5-popover</code> is closed when the user clicks or taps outside the popover or selects an action within the popover. You can prevent this with the <code>modal</code> property.\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-popover</code> exposes the following CSS Shadow Parts: <ul> <li>header - Used to style the header of the component</li> <li>content - Used to style the content of the component</li> <li>footer - Used to style the footer of the component</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Popover.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"allowTargetOverlap","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines if there is no enough space, the component can be placed over the target."},{"deprecated":false,"kind":"field","name":"headerText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the header text. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored."},{"deprecated":false,"kind":"field","name":"hideArrow","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component arrow is hidden."},{"deprecated":false,"kind":"field","name":"hideBackdrop","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the block layer will be shown if modal property is set to true."},{"deprecated":false,"kind":"field","name":"horizontalAlign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.PopoverHorizontalAlign"},"default":"\"Center\"","description":"Determines the horizontal alignment of the component. <br><br> Available options are: <ul> <li><code>Center</code></li> <li><code>Left</code></li> <li><code>Right</code></li> <li><code>Stretch</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"modal","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background."},{"deprecated":false,"kind":"field","name":"opener","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.DOMReference"},"default":"undefined","description":"Defines the ID or DOM Reference of the element that the popover is shown at"},{"deprecated":false,"kind":"field","name":"placementType","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.PopoverPlacementType"},"default":"\"Right\"","description":"Determines on which side the component is placed at. <br><br> Available options are: <ul> <li><code>Left</code></li> <li><code>Right</code></li> <li><code>Top</code></li> <li><code>Bottom</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"verticalAlign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.PopoverVerticalAlign"},"default":"\"Center\"","description":"Determines the vertical alignment of the component. <br><br> Available options are: <ul> <li><code>Center</code></li> <li><code>Top</code></li> <li><code>Bottom</code></li> <li><code>Stretch</code></li> </ul>"},{"deprecated":false,"kind":"method","name":"showAt","privacy":"public","description":"Shows the popover.","parameters":[{"deprecated":false,"name":"opener","type":{"text":"HTMLElement"},"description":"the element that the popover is shown at"},{"deprecated":false,"name":"preventInitialFocus","type":{"text":"boolean"},"description":"prevents applying the focus inside the popover","optional":true}],"return":{"type":{"text":"Promise"},"description":"Promise"}}],"superclass":{"module":"Popup.js","name":"Popup","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"Popover.js","name":"Popover","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Popover","module":"Popover.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-popover"}]},{"kind":"javascript-module","path":"ProgressIndicator.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ProgressIndicator","name":"ProgressIndicator","tagName":"ui5-progress-indicator","attributes":[{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether component is in disabled state."},{"deprecated":false,"fieldName":"displayValue","name":"display-value","type":{"text":"string"},"description":"Specifies the text value to be displayed in the bar.\n\n<b>Note:</b> <ul> <li>If there is no value provided or the value is empty, the default percentage value is shown.</li> <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li> </ul>"},{"default":"false","deprecated":false,"fieldName":"hideValue","name":"hide-value","type":{"text":"boolean"},"description":"Defines whether the component value is shown."},{"default":"0","deprecated":false,"fieldName":"value","name":"value","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Specifies the numerical value in percent for the length of the component.\n\n<b>Note:</b> If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> Shows the progress of a process in a graphical way. To indicate the progress, the inside of the component is filled with a color.\n\n<h3>Responsive Behavior</h3> You can change the size of the Progress Indicator by changing its <code>width</code> or <code>height</code> CSS properties.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ProgressIndicator.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether component is in disabled state."},{"deprecated":false,"kind":"field","name":"displayValue","privacy":"public","static":false,"type":{"text":"string"},"description":"Specifies the text value to be displayed in the bar.\n\n<b>Note:</b> <ul> <li>If there is no value provided or the value is empty, the default percentage value is shown.</li> <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li> </ul>"},{"deprecated":false,"kind":"field","name":"hideValue","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component value is shown."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"0","description":"Specifies the numerical value in percent for the length of the component.\n\n<b>Note:</b> If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"ProgressIndicator.js","name":"ProgressIndicator","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ProgressIndicator","module":"ProgressIndicator.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-progress-indicator"}]},{"kind":"javascript-module","path":"RadioButton.js","declarations":[{"deprecated":false,"customElement":true,"kind":"RadioButton","name":"RadioButton","tagName":"ui5-radio-button","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the component checked state changes."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Defines the IDs of the elements that label the component."},{"default":"false","deprecated":false,"fieldName":"checked","name":"checked","type":{"text":"boolean"},"description":"Defines whether the component is checked or not. <br><br> <b>Note:</b> The property value can be changed with user interaction, either by clicking/tapping on the component, or by using the Space or Enter key."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is disabled. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Defines the name of the component. Radio buttons with the same <code>name</code> will form a radio button group.\n\n<br><br> <b>Note:</b> The selection can be changed with <code>ARROW_UP/DOWN</code> and <code>ARROW_LEFT/RIGHT</code> keys between radio buttons in same group.\n\n<br><br> <b>Note:</b> Only one radio button can be selected per group.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect when submitting forms, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the component."},{"default":"\"\"","deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines the form value of the component. When a form with a radio button group is submitted, the group's value will be the value of the currently selected radio button. <br> <b>Important:</b> For the <code>value</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>"},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"},{"default":"\"None\"","deprecated":false,"fieldName":"wrappingType","name":"wrapping-type","type":{"text":"sap.ui.webc.main.types.WrappingType"},"description":"Defines whether the component text wraps when there is not enough space. <br><br> Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-radio-button</code> component enables users to select a single option from a set of options. When a <code>ui5-radio-button</code> is selected by the user, the <code>change</code> event is fired. When a <code>ui5-radio-button</code> that is within a group is selected, the one that was previously selected gets automatically deselected. You can group radio buttons by using the <code>name</code> property. <br> <b>Note:</b> If <code>ui5-radio-button</code> is not part of a group, it can be selected once, but can not be deselected back.\n\n<h3>Keyboard Handling</h3>\n\nOnce the <code>ui5-radio-button</code> is on focus, it might be selected by pressing the Space and Enter keys. <br> The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group, while TAB and SHIFT + TAB can be used to enter or leave the radio button group. <br> <b>Note:</b> On entering radio button group, the focus goes to the currently selected radio button.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RadioButton\";</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":"accessibleNameRef","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the IDs of the elements that label the component."},{"deprecated":false,"kind":"field","name":"checked","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is checked or not. <br><br> <b>Note:</b> The property value can be changed with user interaction, either by clicking/tapping on the component, or by using the Space or Enter key."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is disabled. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the name of the component. Radio buttons with the same <code>name</code> will form a radio button group.\n\n<br><br> <b>Note:</b> The selection can be changed with <code>ARROW_UP/DOWN</code> and <code>ARROW_LEFT/RIGHT</code> keys between radio buttons in same group.\n\n<br><br> <b>Note:</b> Only one radio button can be selected per group.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect when submitting forms, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the component."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the form value of the component. When a form with a radio button group is submitted, the group's value will be the value of the currently selected radio button. <br> <b>Important:</b> For the <code>value</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>"},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"wrappingType","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.WrappingType"},"default":"\"None\"","description":"Defines whether the component text wraps when there is not enough space. <br><br> Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"RadioButton.js","name":"RadioButton","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"RadioButton","module":"RadioButton.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-radio-button"}]},{"kind":"javascript-module","path":"RangeSlider.js","declarations":[{"deprecated":false,"customElement":true,"kind":"RangeSlider","name":"RangeSlider","tagName":"ui5-range-slider","attributes":[{"default":"100","deprecated":false,"fieldName":"endValue","name":"end-value","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines end point of a selection - position of a second handle on the slider. <br><br>"},{"default":"0","deprecated":false,"fieldName":"startValue","name":"start-value","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines start point of a selection - position of a first handle on the slider. <br><br>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> Represents a numerical interval and two handles (grips) to select a sub-range within it. The purpose of the component to enable visual selection of sub-ranges within a given interval.\n\n<h3>Structure</h3> The most important properties of the Range Slider are: <ul> <li>min - The minimum value of the slider range.</li> <li>max - The maximum value of the slider range.</li> <li>value - The current value of the slider.</li> <li>step - Determines the increments in which the slider will move.</li> <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li> <li>showTickmarks - Displays a visual divider between the step values.</li> <li>labelInterval - Labels some or all of the tickmarks with their values.</li> </ul> <h4>Notes:</h4> <ul> <li>The right and left handle can be moved individually and their positions could therefore switch.</li> <li>The entire range can be moved along the interval.</li> </ul> <h3>Usage</h3> The most common use case is to select and move sub-ranges on a continuous numerical scale.\n\n<h3>Responsive Behavior</h3> You can move the currently selected range by clicking on it and dragging it along the interval.\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-range-slider</code> exposes the following CSS Shadow Parts: <ul> <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-range-slider</code>.</li> <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-range-slider</code>.</li> <li>handle - Used to style the handles of the <code>ui5-range-slider</code>.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<ul> <li><code>Left or Down Arrow</code> - Moves a component's handle or the entire selection one step to the left;</li> <li><code>Right or Up Arrow</code> - Moves a component's handle or the entire selection one step to the right;</li> <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves a component's handle to the left or the entire range with step equal to 1/10th of the entire range;</li> <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves a component's handle to the right or the entire range with step equal to 1/10th of the entire range;</li> <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li> <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li> <li><code>Home</code> - Moves the entire selection or the selected handle to the beginning of the component's range;</li> <li><code>End</code> - Moves the entire selection or the selected handle to the end of the component's range;</li> <li><code>Page Up</code> - Same as <code>Right or Up Arrow + Ctrl/Cmd</code>;</li> <li><code>Page Down</code> - Same as <code>Left or Down Arrow + Ctrl/Cmd</code>;</li> <li><code>Escape</code> - Resets the <code>startValue</code> and <code>endValue</code> properties to the values prior the component focusing;</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RangeSlider\";</code>","members":[{"deprecated":false,"kind":"field","name":"endValue","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"default":"100","description":"Defines end point of a selection - position of a second handle on the slider. <br><br>"},{"deprecated":false,"kind":"field","name":"startValue","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"default":"0","description":"Defines start point of a selection - position of a first handle on the slider. <br><br>"}],"superclass":{"module":"SliderBase.js","name":"SliderBase","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"RangeSlider.js","name":"RangeSlider","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"RangeSlider","module":"RangeSlider.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-range-slider"}]},{"kind":"javascript-module","path":"RatingIndicator.js","declarations":[{"deprecated":false,"customElement":true,"kind":"RatingIndicator","name":"RatingIndicator","tagName":"ui5-rating-indicator","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"The event is fired when the value changes."}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is disabled.\n\n<br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"default":"5","deprecated":false,"fieldName":"max","name":"max","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"The number of displayed rating symbols."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"default":"0","deprecated":false,"fieldName":"value","name":"value","type":{"text":"sap.ui.webc.base.types.Float"},"description":"The indicated value of the rating. <br><br> <b>Note:</b> If you set a number which is not round, it would be shown as follows: <ul> <li>1.0 - 1.2 -> 1</li> <li>1.3 - 1.7 -> 1.5</li> <li>1.8 - 1.9 -> 2</li> <ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The Rating Indicator is used to display a specific number of icons that are used to rate an item. Additionally, it is also used to display the average and overall ratings.\n\n<h3>Usage</h3> The recommended number of icons is between 5 and 7.\n\n<h3>Responsive Behavior</h3> You can change the size of the Rating Indicator by changing its <code>font-size</code> CSS property. <br> Example: <code>&lt;ui5-rating-indicator style=\"font-size: 3rem;\">&lt;/ui5-rating-indicator></code>\n\n<h3>Keyboard Handling</h3> When the <code>ui5-rating-indicator</code> is focused, the user can change the rating with the following keyboard shortcuts: <br>\n\n<ul> <li>[RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing</li> <li>[LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.</li> <li>[HOME] - Sets the lowest value.</li> <li>[END] - Sets the highest value.</li> <li>[SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.</li> <li>Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RatingIndicator.js\";</code>","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":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is disabled.\n\n<br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"kind":"field","name":"max","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"5","description":"The number of displayed rating symbols."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"default":"0","description":"The indicated value of the rating. <br><br> <b>Note:</b> If you set a number which is not round, it would be shown as follows: <ul> <li>1.0 - 1.2 -> 1</li> <li>1.3 - 1.7 -> 1.5</li> <li>1.8 - 1.9 -> 2</li> <ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"RatingIndicator.js","name":"RatingIndicator","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"RatingIndicator","module":"RatingIndicator.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-rating-indicator"}]},{"kind":"javascript-module","path":"ResponsivePopover.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ResponsivePopover","name":"ResponsivePopover","tagName":"ui5-responsive-popover","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-responsive-popover</code> acts as a Popover on desktop and tablet, while on phone it acts as a Dialog. The component improves tremendously the user experience on mobile.\n\n<h3>Usage</h3> Use it when you want to make sure that all the content is visible on any device.\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-responsive-popover</code> exposes the following CSS Shadow Parts: <ul> <li>header - Used to style the header of the component</li> <li>content - Used to style the content of the component</li> <li>footer - Used to style the footer of the component</li> </ul>","members":[{"deprecated":false,"kind":"method","name":"close","privacy":"public","description":"Closes the popover/dialog."},{"deprecated":false,"kind":"method","name":"isOpen","privacy":"public","description":"Tells if the responsive popover is open.","return":{"type":{"text":"boolean"}}},{"deprecated":false,"kind":"method","name":"showAt","privacy":"public","description":"Shows popover on desktop and dialog on mobile.","parameters":[{"deprecated":false,"name":"opener","type":{"text":"HTMLElement"},"description":"the element that the popover is shown at"},{"deprecated":false,"name":"preventInitialFocus","type":{"text":"boolean"},"description":"Prevents applying the focus inside the popup","optional":true}],"return":{"type":{"text":"Promise"},"description":"Promise"}}],"superclass":{"module":"Popover.js","name":"Popover","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"ResponsivePopover.js","name":"ResponsivePopover","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ResponsivePopover","module":"ResponsivePopover.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-responsive-popover"}]},{"kind":"javascript-module","path":"SegmentedButton.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SegmentedButton","name":"SegmentedButton","tagName":"ui5-segmented-button","slots":[{"deprecated":false,"description":"Defines the items of <code>ui5-segmented-button</code>. <br><br> <b>Note:</b> Multiple items are allowed. <br><br> <b>Note:</b> Use the <code>ui5-segmented-button-item</code> for the intended design.","name":"default"}],"events":[{"deprecated":false,"name":"selection-change","type":"CustomEvent","description":"Fired when the selected item changes."}],"attributes":[{"default":"undefined","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"SingleSelect\"","deprecated":false,"fieldName":"mode","name":"mode","type":{"text":"sap.ui.webc.main.types.SegmentedButtonMode"},"description":"Defines the component selection mode.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>SingleSelect</code></li> <li><code>MultiSelect</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-segmented-button</code> shows a group of items. When the user clicks or taps one of the items, it stays in a pressed state. It automatically resizes the items to fit proportionally within the component. When no width is set, the component uses the available width. <br><br> <b>Note:</b> There can be just one selected <code>item</code> at a time.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/SegmentedButton\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"undefined","description":"Defines the accessible ARIA name of the component."},{"deprecated":false,"kind":"field","name":"mode","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.SegmentedButtonMode"},"default":"\"SingleSelect\"","description":"Defines the component selection mode.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>SingleSelect</code></li> <li><code>MultiSelect</code></li> </ul>"},{"deprecated":true,"kind":"field","name":"selectedItem","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.ISegmentedButtonItem"},"description":"Currently selected item."},{"deprecated":false,"kind":"field","name":"selectedItems","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.ISegmentedButtonItem[]"},"description":"Returns an array of the currently selected items."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SegmentedButton.js","name":"SegmentedButton","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SegmentedButton","module":"SegmentedButton.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-segmented-button"}]},{"kind":"javascript-module","path":"SegmentedButtonItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SegmentedButtonItem","name":"SegmentedButtonItem","tagName":"ui5-segmented-button-item","attributes":[{"default":"\"Default\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.ButtonDesign"},"description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"default":"false","deprecated":false,"fieldName":"iconEnd","name":"icon-end","type":{"text":"boolean"},"description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"default":"false","deprecated":false,"fieldName":"submits","name":"submits","type":{"text":"boolean"},"description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nUsers can use the <code>ui5-segmented-button-item</code> as part of a <code>ui5-segmented-button</code>. <br><br> Clicking or tapping on a <code>ui5-segmented-button-item</code> changes its state to <code>pressed</code>. The item returns to its initial state when the user clicks or taps on it again. By applying additional custom CSS-styling classes, apps can give a different style to any <code>ui5-segmented-button-item</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/SegmentedButtonItem\";</code>","members":[{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ButtonDesign"},"default":"\"Default\"","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"deprecated":false,"kind":"field","name":"iconEnd","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"deprecated":false,"kind":"field","name":"submits","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."}],"superclass":{"module":"ToggleButton.js","name":"ToggleButton","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"SegmentedButtonItem.js","name":"SegmentedButtonItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SegmentedButtonItem","module":"SegmentedButtonItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-segmented-button-item"}]},{"kind":"javascript-module","path":"Select.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Select","name":"Select","tagName":"ui5-select","slots":[{"deprecated":false,"description":"Defines the component options.\n\n<br><br> <b>Note:</b> Only one selected option is allowed. If more than one option is defined as selected, the last one would be considered as the selected one.\n\n<br><br> <b>Note:</b> Use the <code>ui5-option</code> component to define the desired options.","name":"default"},{"deprecated":false,"description":"Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br><br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state. <br><br> <b>Note:</b> If the component has <code>suggestionItems</code>, the <code>valueStateMessage</code> would be displayed as part of the same popover, if used on desktop, or dialog - on phone.","name":"valueStateMessage"}],"events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the selected option changes."},{"deprecated":false,"name":"close","type":"CustomEvent","description":"Fired after the component's dropdown menu closes."},{"deprecated":false,"name":"open","type":"CustomEvent","description":"Fired after the component's dropdown menu opens."}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Receives id(or many ids) of the elements that label the select."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is noninteractive."},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Determines the name with which the component will be submitted in an HTML form. The value of the component will be the value of the currently selected <code>ui5-option</code>.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the <code>ui5-select</code> so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-select</code> component is used to create a drop-down list. The items inside the <code>ui5-select</code> define the available options by using the <code>ui5-option</code> component.\n\n<h3>Keyboard Handling</h3> The <code>ui5-select</code> provides advanced keyboard handling. <br> <ul> <li>[F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.</li> <li>[UP, DOWN] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.</li> <li>[SPACE, ENTER] - If the drop-down is opened - selects the focused option.</li> <li>[ESC] - Closes the drop-down without changing the selection.</li> <li>[HOME] - Navigates to first option</li> <li>[END] - Navigates to the last option</li> </ul> <br>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Select\";</code> <br> <code>import \"@ui5/webcomponents/dist/Option\";</code> (comes with <code>ui5-select</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":"accessibleNameRef","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Receives id(or many ids) of the elements that label the select."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is in disabled state. <br><br> <b>Note:</b> A disabled component is noninteractive."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Determines the name with which the component will be submitted in an HTML form. The value of the component will be the value of the currently selected <code>ui5-option</code>.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the <code>ui5-select</code> so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"selectedOption","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.ISelectOption"},"description":"Currently selected <code>ui5-option</code> element."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Select.js","name":"Select","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Select","module":"Select.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-select"}]},{"kind":"javascript-module","path":"Slider.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Slider","name":"Slider","tagName":"ui5-slider","attributes":[{"default":"0","deprecated":false,"fieldName":"value","name":"value","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Current value of the slider"}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The Slider component represents a numerical range and a handle (grip). The purpose of the component is to enable visual selection of a value in a continuous numerical range by moving an adjustable handle.\n\n<h3>Structure</h3> The most important properties of the Slider are: <ul> <li>min - The minimum value of the slider range.</li> <li>max - The maximum value of the slider range.</li> <li>value - The current value of the slider range.</li> <li>step - Determines the increments in which the slider will move.</li> <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li> <li>showTickmarks - Displays a visual divider between the step values.</li> <li>labelInterval - Labels some or all of the tickmarks with their values.</li> </ul>\n\n<h3>Usage</h3> The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n\n<h3>Responsive Behavior</h3> The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and resizing the width of the control. You can move the slider handle in several different ways: <ul> <li>Drag and drop the handle to the desired value.</li> <li>Click/tap on the range bar to move the handle to that location.</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-slider</code> exposes the following CSS Shadow Parts: <ul> <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li> <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li> <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\n<ul> <li><code>Left or Down Arrow</code> - Moves the handle one step to the left, effectively decreasing the component's value by <code>step</code> amount;</li> <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li> <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;</li> <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;</li> <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li> <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li> <li><code>Home</code> - Moves the handle to the beginning of the range;</li> <li><code>End</code> - Moves the handle to the end of the range;</li> <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li> <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li> <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Slider\";</code>","members":[{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"default":"0","description":"Current value of the slider"}],"superclass":{"module":"SliderBase.js","name":"SliderBase","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"Slider.js","name":"Slider","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Slider","module":"Slider.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-slider"}]},{"kind":"javascript-module","path":"SliderBase.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SliderBase","name":"SliderBase","tagName":"ui5-slider","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the value changes and the user has finished interacting with the slider."},{"deprecated":false,"name":"input","type":"CustomEvent","description":"Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging."}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the slider is in disabled state."},{"default":"0","deprecated":false,"fieldName":"labelInterval","name":"label-interval","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Displays a label with a value on every N-th step. <br><br> <b>Note:</b> The step and tickmarks properties must be enabled. Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second tickmark will be labelled, which means every 4th value number."},{"default":"100","deprecated":false,"fieldName":"max","name":"max","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines the maximum value of the slider."},{"default":"0","deprecated":false,"fieldName":"min","name":"min","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines the minimum value of the slider."},{"default":"false","deprecated":false,"fieldName":"showTickmarks","name":"show-tickmarks","type":{"text":"boolean"},"description":"Enables tickmarks visualization for each step. <br><br> <b>Note:</b> The step must be a positive number."},{"default":"false","deprecated":false,"fieldName":"showTooltip","name":"show-tooltip","type":{"text":"boolean"},"description":"Enables handle tooltip displaying the current value."},{"default":"1","deprecated":false,"fieldName":"step","name":"step","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10). <br><br> <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>","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":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the slider is in disabled state."},{"deprecated":false,"kind":"field","name":"labelInterval","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"0","description":"Displays a label with a value on every N-th step. <br><br> <b>Note:</b> The step and tickmarks properties must be enabled. Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second tickmark will be labelled, which means every 4th value number."},{"deprecated":false,"kind":"field","name":"max","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"default":"100","description":"Defines the maximum value of the slider."},{"deprecated":false,"kind":"field","name":"min","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"default":"0","description":"Defines the minimum value of the slider."},{"deprecated":false,"kind":"field","name":"showTickmarks","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Enables tickmarks visualization for each step. <br><br> <b>Note:</b> The step must be a positive number."},{"deprecated":false,"kind":"field","name":"showTooltip","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Enables handle tooltip displaying the current value."},{"deprecated":false,"kind":"field","name":"step","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1","description":"Defines the size of the slider's selection intervals (e.g. min = 0, max = 10, step = 5 would result in possible selection of the values 0, 5, 10). <br><br> <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SliderBase.js","name":"SliderBase","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SliderBase","module":"SliderBase.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-slider"}]},{"kind":"javascript-module","path":"SplitButton.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SplitButton","name":"SplitButton","tagName":"ui5-split-button","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"events":[{"deprecated":false,"name":"arrow-click","type":"CustomEvent","description":"Fired when the user clicks on the arrow action."},{"deprecated":false,"name":"click","type":"CustomEvent","description":"Fired when the user clicks on the default action."}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"\"","deprecated":false,"fieldName":"activeIcon","name":"active-icon","type":{"text":"string"},"description":"Defines the icon to be displayed in active state as graphical element within the component."},{"default":"\"Default\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.ButtonDesign"},"description":"Defines the component design.\n\n<br><br> <b>The available values are:</b>\n\n<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> <li><code>Attention</code></li> </ul>"},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is disabled. A disabled component 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 icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options. <br><br> Example:\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>."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<code>ui5-split-button</code> enables users to trigger actions. It is constructed of two separate actions - default action and arrow action that can be activated by clicking or tapping, or by pressing certain keyboard keys - <code>Space</code> or <code>Enter</code> for default action, and <code>Arrow Down</code> or <code>Arrow Up</code> for arrow action.\n\n<h3>Usage</h3>\n\n<code>ui5-split-button</code> consists two separate buttons: <ul> <li>for the first one (default action) you can define some <code>text</code> or an <code>icon</code>, or both. Also, it is possible to define different icon for active state of this button - <code>activeIcon</code>.</li> <li>the second one (arrow action) contains only <code>slim-arrow-down</code> icon.</li> </ul> You can choose a <code>design</code> from a set of predefined types (the same as for ui5-button) that offer different styling to correspond to the triggered action. Both text and arrow actions have the same design. <br><br> You can set the <code>ui5-split-button</code> as enabled or disabled. Both parts of an enabled <code>ui5-split-button</code> can be pressed by clicking or tapping it, or by certain keys, which changes the style to provide visual feedback to the user that it is pressed or hovered over with the mouse cursor. A disabled <code>ui5-split-button</code> appears inactive and any of the two buttons cannot be pressed.\n\n<h3>Keyboard Handling</h3> <ul> <li><code>Space</code> or <code>Enter</code> - triggers the default action</li> <li><code>Shift</code> or <code>Escape</code> - if <code>Space</code> is pressed, releases the default action button without triggering the click event.</li> <li><code>Arrow Down</code>, <code>Arrow Up</code>, <code>Alt</code>+<code>Arrow Down</code>, <code>Alt</code>+<code>Arrow Up</code>, or <code>F4</code> - triggers the arrow action</li> There are separate events that are fired on activating of <code>ui5-split-button</code> parts: <ul> <li><code>click</code> for the first button (default action)</li> <li><code>arrow-click</code> for the second button (arrow action)</li> </ul> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/SplitButton.js\";</code>","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":"activeIcon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the icon to be displayed in active state as graphical element within the component."},{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ButtonDesign"},"default":"\"Default\"","description":"Defines the component design.\n\n<br><br> <b>The available values are:</b>\n\n<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> <li><code>Attention</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is disabled. A disabled component 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 icon to be displayed as graphical element within the component. The SAP-icons font provides numerous options. <br><br> Example:\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>."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SplitButton.js","name":"SplitButton","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SplitButton","module":"SplitButton.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-split-button"}]},{"kind":"javascript-module","path":"StandardListItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"StandardListItem","name":"StandardListItem","tagName":"ui5-li","slots":[{"deprecated":false,"description":"Defines the text of the component. <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":"<b>Note:</b> While the slot allows option for setting custom avatar, to match the design guidelines, please use the <code>ui5-avatar</code> with it`s default size - S. <b>Note:</b> If bigger <code>ui5-avatar</code> needs to be used, then the size of the <code>ui5-li</code> should be customized in order to fit.","name":"imageContent"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present."},{"deprecated":false,"fieldName":"additionalText","name":"additional-text","type":{"text":"string"},"description":"Defines the <code>additionalText</code>, displayed in the end of the list item."},{"default":"\"None\"","deprecated":false,"fieldName":"additionalTextState","name":"additional-text-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the state of the <code>additionalText</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Error\"</code>."},{"deprecated":false,"fieldName":"description","name":"description","type":{"text":"string"},"description":"Defines the description displayed right under the item text, if such is present."},{"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":"false","deprecated":false,"fieldName":"iconEnd","name":"icon-end","type":{"text":"boolean"},"description":"Defines whether the <code>icon</code> should be displayed in the beginning of the list item or in the end. <br><br> <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>."},{"deprecated":false,"fieldName":"image","name":"image","type":{"text":"string"},"description":"Defines the <code>image</code> source URI. <br><br> <b>Note:</b> The <code>image</code> would be displayed in the beginning of the list item."}],"description":"The <code>ui5-li</code> represents the simplest type of item for a <code>ui5-list</code>.\n\nThis is a list item, providing the most common use cases such as <code>text</code>, <code>image</code> and <code>icon</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</code> exposes the following CSS Shadow Parts: <ul> <li>title - Used to style the title of the list item</li> <li>description - Used to style the description of the list item</li> <li>additional-text - Used to style the additionalText of the list item</li> <li>icon - Used to style the icon of the list item</li> </ul>","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present."},{"deprecated":false,"kind":"field","name":"additionalText","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the <code>additionalText</code>, displayed in the end of the list item."},{"deprecated":false,"kind":"field","name":"additionalTextState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the state of the <code>additionalText</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Error\"</code>."},{"deprecated":false,"kind":"field","name":"description","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the description displayed right under the item text, if such is present."},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"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>."},{"deprecated":false,"kind":"field","name":"iconEnd","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the <code>icon</code> should be displayed in the beginning of the list item or in the end. <br><br> <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>."},{"deprecated":false,"kind":"field","name":"image","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the <code>image</code> source URI. <br><br> <b>Note:</b> The <code>image</code> would be displayed in the beginning of the list item."}],"superclass":{"module":"ListItem.js","name":"ListItem","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"StandardListItem.js","name":"StandardListItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"StandardListItem","module":"StandardListItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-li"}]},{"kind":"javascript-module","path":"StepInput.js","declarations":[{"deprecated":false,"customElement":true,"kind":"StepInput","name":"StepInput","tagName":"ui5-step-input","slots":[{"deprecated":false,"description":"Defines the value state message that will be displayed as pop up under the component. <br><br>\n\n<b>Note:</b> If not specified, a default text (in the respective language) will be displayed. <br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed, when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.","name":"valueStateMessage"}],"events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the input operation has finished by pressing Enter or on focusout."}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"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":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Determines whether the component is displayed as disabled."},{"deprecated":false,"fieldName":"max","name":"max","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines a maximum value of the component."},{"deprecated":false,"fieldName":"min","name":"min","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines a minimum value of the component."},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"default":"undefined","deprecated":false,"fieldName":"placeholder","name":"placeholder","type":{"text":"string"},"description":"Defines a short hint, intended to aid the user with data entry when the component has no value.\n\n<br><br> <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Determines whether the component is displayed as read-only."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"1","deprecated":false,"fieldName":"step","name":"step","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines a step of increasing/decreasing the value of the component."},{"default":"0","deprecated":false,"fieldName":"value","name":"value","type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines a value of the component."},{"default":"0","deprecated":false,"fieldName":"valuePrecision","name":"value-precision","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Determines the number of digits after the decimal point of the component."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-step-input</code> consists of an input field and buttons with icons to increase/decrease the value with the predefined step. <br><br> The user can change the value of the component by pressing the increase/decrease buttons, by typing a number directly, by using the keyboard up/down and page up/down, or by using the mouse scroll wheel. Decimal values are supported.\n\n<h3>Usage</h3>\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for the <code>StepInput</code>. The increase/decrease button and the up/down keyboard navigation become disabled when the value reaches the max/min or a new value is entered from the input which is greater/less than the max/min. <br><br> <h4>When to use:</h4> <ul> <li>To adjust amounts, quantities, or other values quickly.</li> <li>To adjust values for a specific step.</li> </ul>\n\n<h4>When not to use:</h4> <ul> <li>To enter a static number (for example, postal code, phone number, or ID). In this case, use the regular <code>ui5-input</code> instead.</li> <li>To display a value that rarely needs to be adjusted and does not pertain to a particular step. In this case, use the regular <code>ui5-input</code> instead.</li> <li>To enter dates and times. In this case, use date/time related components instead.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/StepInput.js\";</code>","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":"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":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component is displayed as disabled."},{"deprecated":false,"kind":"field","name":"max","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines a maximum value of the component."},{"deprecated":false,"kind":"field","name":"min","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"description":"Defines a minimum value of the component."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"deprecated":false,"kind":"field","name":"placeholder","privacy":"public","static":false,"type":{"text":"string"},"default":"undefined","description":"Defines a short hint, intended to aid the user with data entry when the component has no value.\n\n<br><br> <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component is displayed as read-only."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"step","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"default":"1","description":"Defines a step of increasing/decreasing the value of the component."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Float"},"default":"0","description":"Defines a value of the component."},{"deprecated":false,"kind":"field","name":"valuePrecision","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"0","description":"Determines the number of digits after the decimal point of the component."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"StepInput.js","name":"StepInput","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"StepInput","module":"StepInput.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-step-input"}]},{"kind":"javascript-module","path":"SuggestionGroupItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SuggestionGroupItem","name":"SuggestionGroupItem","tagName":"ui5-suggestion-group-item","attributes":[{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the <code>ui5-suggestion-group-item</code>."}],"description":"The <code>ui5-suggestion-group-item</code> is type of suggestion item, that can be used to split the <code>ui5-input</code> suggestions into groups.","members":[{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the <code>ui5-suggestion-group-item</code>."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SuggestionGroupItem.js","name":"SuggestionGroupItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SuggestionGroupItem","module":"SuggestionGroupItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-suggestion-group-item"}]},{"kind":"javascript-module","path":"SuggestionItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"SuggestionItem","name":"SuggestionItem","tagName":"ui5-suggestion-item","attributes":[{"deprecated":false,"fieldName":"additionalText","name":"additional-text","type":{"text":"string"},"description":"Defines the <code>additionalText</code>, displayed in the end of the item."},{"default":"\"None\"","deprecated":false,"fieldName":"additionalTextState","name":"additional-text-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the state of the <code>additionalText</code>. <br><br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Information\"</code>, <code>\"Warning\"</code> and <code>\"Error\"</code>."},{"deprecated":false,"fieldName":"description","name":"description","type":{"text":"string"},"description":"Defines the description displayed right under the item text, if such is present."},{"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":"false","deprecated":false,"fieldName":"iconEnd","name":"icon-end","type":{"text":"boolean"},"description":"Defines whether the <code>icon</code> should be displayed in the beginning of the item or in the end. <br><br> <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>."},{"deprecated":false,"fieldName":"image","name":"image","type":{"text":"string"},"description":"Defines the <code>image</code> source URI. <br><br> <b>Note:</b> The <code>image</code> would be displayed in the beginning of the item."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the component."},{"default":"\"Active\"","deprecated":false,"fieldName":"type","name":"type","type":{"text":"sap.ui.webc.main.types.ListItemType"},"description":"Defines the visual indication and behavior of the item. Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>. <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover, while when <code>Inactive</code> or <code>Detail</code> - will not."}],"description":"The <code>ui5-suggestion-item</code> represents the suggestion item of the <code>ui5-input</code>.","members":[{"deprecated":false,"kind":"field","name":"additionalText","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the <code>additionalText</code>, displayed in the end of the item."},{"deprecated":false,"kind":"field","name":"additionalTextState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the state of the <code>additionalText</code>. <br><br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Information\"</code>, <code>\"Warning\"</code> and <code>\"Error\"</code>."},{"deprecated":false,"kind":"field","name":"description","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the description displayed right under the item text, if such is present."},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"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>."},{"deprecated":false,"kind":"field","name":"iconEnd","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the <code>icon</code> should be displayed in the beginning of the item or in the end. <br><br> <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>."},{"deprecated":false,"kind":"field","name":"image","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the <code>image</code> source URI. <br><br> <b>Note:</b> The <code>image</code> would be displayed in the beginning of the item."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the component."},{"deprecated":false,"kind":"field","name":"type","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ListItemType"},"default":"\"Active\"","description":"Defines the visual indication and behavior of the item. Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>. <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover, while when <code>Inactive</code> or <code>Detail</code> - will not."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"SuggestionItem.js","name":"SuggestionItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"SuggestionItem","module":"SuggestionItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-suggestion-item"}]},{"kind":"javascript-module","path":"Switch.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Switch","name":"Switch","tagName":"ui5-switch","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the component checked state changes."}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Sets the accessible ARIA name of the component.\n\n<b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>. Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set."},{"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.\n\n<b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>. Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set."},{"default":"false","deprecated":false,"fieldName":"checked","name":"checked","type":{"text":"boolean"},"description":"Defines if the component is checked. <br><br> <b>Note:</b> The property can be changed with user interaction, either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key."},{"default":"\"Textual\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.SwitchDesign"},"description":"Defines the component design. <br><br> <b>Note:</b> If <code>Graphical</code> type is set, positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is disabled. <br><br> <b>Note:</b> A disabled component is noninteractive."},{"default":"\"\"","deprecated":false,"fieldName":"textOff","name":"text-off","type":{"text":"string"},"description":"Defines the text, displayed when the component is not checked. <br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>."},{"default":"\"\"","deprecated":false,"fieldName":"textOn","name":"text-on","type":{"text":"string"},"description":"Defines the text, displayed when the component is checked.\n\n<br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>."},{"deprecated":false,"fieldName":"tooltip","name":"tooltip","type":{"text":"string"},"description":"Defines the tooltip of the component. <br> <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-switch</code> component is used for changing between binary states. <br> The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and <code>textOff</code> properties, but texts longer than 3 letters will be cutted off. <br> However, users are able to customize the width of <code>ui5-switch</code> with pure CSS (<code>&lt;ui5-switch style=\"width: 200px\"></code>), and set widths, depending on the texts they would use. <br> Note: the component would not automatically stretch to fit the whole text width.\n\n<h3>Keyboard Handling</h3> The state can be changed by pressing the Space and Enter keys.\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-switch</code> exposes the following CSS Shadow Parts: <ul> <li>slider - Used to style the track, where the handle is being slid</li> <li>text-on - Used to style the <code>textOn</code> property text</li> <li>text-off - Used to style the <code>textOff</code> property text</li> <li>handle - Used to style the handle of the switch</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Switch\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"description":"Sets the accessible ARIA name of the component.\n\n<b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>. Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set."},{"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.\n\n<b>Note</b>: We recommend that you set an accessibleNameRef pointing to an external label or at least an <code>accessibleName</code>. Providing an <code>accessibleNameRef</code> or an <code>accessibleName</code> is mandatory in the cases when <code>textOn</code> and <code>textOff</code> properties aren't set."},{"deprecated":false,"kind":"field","name":"checked","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the component is checked. <br><br> <b>Note:</b> The property can be changed with user interaction, either by cliking the component, or by pressing the <code>Enter</code> or <code>Space</code> key."},{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.SwitchDesign"},"default":"\"Textual\"","description":"Defines the component design. <br><br> <b>Note:</b> If <code>Graphical</code> type is set, positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is disabled. <br><br> <b>Note:</b> A disabled component is noninteractive."},{"deprecated":false,"kind":"field","name":"textOff","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text, displayed when the component is not checked. <br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>."},{"deprecated":false,"kind":"field","name":"textOn","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text, displayed when the component is checked.\n\n<br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off). <b>Note:</b> This property will have no effect if the theme is set to <code>sap_horizon</code>."},{"deprecated":false,"kind":"field","name":"tooltip","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the tooltip of the component. <br> <b>Note:</b> If applicable an external label reference should always be the preferred option to provide context to the <code>ui5-switch</code> component over a tooltip."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Switch.js","name":"Switch","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Switch","module":"Switch.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-switch"}]},{"kind":"javascript-module","path":"Tab.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Tab","name":"Tab","tagName":"ui5-tab","slots":[{"deprecated":false,"description":"Holds the content associated with this tab.","name":"default"},{"deprecated":false,"description":"Defines hierarchies with nested sub tabs. <br><br> <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.","name":"subTabs"}],"attributes":[{"default":"\"\"","deprecated":false,"fieldName":"additionalText","name":"additional-text","type":{"text":"string"},"description":"Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger."},{"default":"\"Default\"","deprecated":false,"fieldName":"design","name":"design","type":{"text":"sap.ui.webc.main.types.SemanticColor"},"description":"Defines the component's design color. <br><br> The design is applied to: <ul> <li>the component icon</li> <li>the <code>text</code> when the component overflows</li> <li>the tab selection line</li> </ul>\n\n<br><br> Available designs are: <code>\"Default\"</code>, <code>\"Neutral\"</code>, <code>\"Positive\"</code>, <code>\"Critical\"</code> and <code>\"Negative\"</code>.\n\n<br><br> <b>Note:</b> The design depends on the current theme."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Disabled tabs can't be selected."},{"default":"\"\"","deprecated":false,"fieldName":"icon","name":"icon","type":{"text":"string"},"description":"Defines the icon source URI to be displayed as graphical element within the component. The SAP-icons font provides numerous built-in icons. 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":"Specifies if the component is selected."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"The text to be displayed for the item."}],"description":"The <code>ui5-tab</code> represents a selectable item inside a <code>ui5-tabcontainer</code>. It defines both the item in the tab strip (top part of the <code>ui5-tabcontainer</code>) and the content that is presented to the user once the tab is selected.","members":[{"deprecated":false,"kind":"field","name":"additionalText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Represents the \"additionalText\" text, which is displayed in the tab. In the cases when in the same time there are tabs with icons and tabs without icons, if a tab has no icon the \"additionalText\" is displayed larger."},{"deprecated":false,"kind":"field","name":"design","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.SemanticColor"},"default":"\"Default\"","description":"Defines the component's design color. <br><br> The design is applied to: <ul> <li>the component icon</li> <li>the <code>text</code> when the component overflows</li> <li>the tab selection line</li> </ul>\n\n<br><br> Available designs are: <code>\"Default\"</code>, <code>\"Neutral\"</code>, <code>\"Positive\"</code>, <code>\"Critical\"</code> and <code>\"Negative\"</code>.\n\n<br><br> <b>Note:</b> The design depends on the current theme."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Disabled tabs can't be selected."},{"deprecated":false,"kind":"field","name":"icon","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the icon source URI to be displayed as graphical element within the component. The SAP-icons font provides numerous built-in icons. 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":"Specifies if the component is selected."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"The text to be displayed for the item."},{"deprecated":false,"kind":"method","name":"getTabInStripDomRef","privacy":"public","description":"Returns the DOM reference of the tab that is placed in the header. <b>Note:</b> Tabs, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs will return <code>null</code>. <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Tab.js","name":"Tab","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Tab","module":"Tab.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-tab"}]},{"kind":"javascript-module","path":"TabContainer.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TabContainer","name":"TabContainer","tagName":"ui5-tabcontainer","slots":[{"deprecated":false,"description":"Defines the tabs. <br><br> <b>Note:</b> Use <code>ui5-tab</code> and <code>ui5-tab-separator</code> for the intended design.","name":"default"},{"deprecated":false,"description":"Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used.","name":"overflowButton"},{"deprecated":false,"description":"Defines the button which will open the start overflow menu if available. If nothing is provided to this slot, the default button will be used.","name":"startOverflowButton"}],"events":[{"deprecated":false,"name":"tab-select","type":"CustomEvent","description":"Fired when a tab is selected."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"collapsed","name":"collapsed","type":{"text":"boolean"},"description":"Defines whether the tab content is collapsed."},{"default":"\"Solid\"","deprecated":false,"fieldName":"contentBackgroundDesign","name":"content-background-design","type":{"text":"sap.ui.webc.main.types.TabContainerBackgroundDesign"},"description":"Sets the background color of the Tab Container's content as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>."},{"default":"false","deprecated":false,"fieldName":"fixed","name":"fixed","type":{"text":"boolean"},"description":"Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction."},{"default":"\"Solid\"","deprecated":false,"fieldName":"headerBackgroundDesign","name":"header-background-design","type":{"text":"sap.ui.webc.main.types.TabContainerBackgroundDesign"},"description":"Sets the background color of the Tab Container's header as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>."},{"default":"false","deprecated":true,"fieldName":"showOverflow","name":"show-overflow","type":{"text":"boolean"},"description":"Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all tabs are displayed so that it's easier for the user to select a specific tab."},{"default":"\"Standard\"","deprecated":false,"fieldName":"tabLayout","name":"tab-layout","type":{"text":"sap.ui.webc.main.types.TabLayout"},"description":"Defines the alignment of the content and the <code>additionalText</code> of a tab.\n\n<br><br> <b>Note:</b> The content and the <code>additionalText</code> would be displayed vertically by default, but when set to <code>Inline</code>, they would be displayed horizontally.\n\n<br><br> Available options are: <ul> <li><code>Standard</code></li> <li><code>Inline</code></li> </ul>"},{"default":"\"End\"","deprecated":false,"fieldName":"tabsOverflowMode","name":"tabs-overflow-mode","type":{"text":"sap.ui.webc.main.types.TabsOverflowMode"},"description":"Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n<br><br> <b>Note:</b> Only one overflow at the end would be displayed by default, but when set to <code>StartAndEnd</code>, there will be two overflows on both ends, and tab order will not change on tab selection.\n\n<br><br> Available options are: <ul> <li><code>End</code></li> <li><code>StartAndEnd</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-tabcontainer</code> represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text.\n\n<h3>Structure</h3>\n\nThe <code>ui5-tabcontainer</code> can hold two types of entities: <ul> <li><code>ui5-tab</code> - contains all the information on an item (text and icon)</li> <li><code>ui5-tab-separator</code> - used to separate tabs with a line</li> </ul>\n\n<h3>Hierarchies</h3> Multiple sub tabs could be placed underneath one main tab. Nesting allows deeper hierarchies with indentations to indicate the level of each nested tab. When a tab has both sub tabs and own content its click area is split to allow the user to display the content or alternatively to expand / collapse the list of sub tabs.\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-tabcontainer</code> exposes the following CSS Shadow Parts: <ul> <li>content - Used to style 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/dist/TabContainer\";</code> <br> <code>import \"@ui5/webcomponents/dist/Tab\";</code> (for <code>ui5-tab</code>) <br> <code>import \"@ui5/webcomponents/dist/TabSeparator\";</code> (for <code>ui5-tab-separator</code>)","members":[{"deprecated":false,"kind":"field","name":"allItems","privacy":"public","static":false,"type":{"text":"undefined"},"description":"Returns all slotted tabs and their subTabs in a flattened array. The order of tabs is depth-first. For example, given the following slotted elements: <pre><code>\n\t&lt;ui5-tabcontainer&gt;\n\t\t&lt;ui5-tab id=\"First\" text=\"First\"&gt;\n\t\t\t...\n\t\t\t&lt;ui5-tab slot=\"subTabs\" id=\"Nested\" text=\"Nested\"&gt;...&lt;/ui5-tab&gt;\n\t\t&lt;/ui5-tab&gt;\n\t\t&lt;ui5-tab id=\"Second\" text=\"Second\"&gt;...&lt;/ui5-tab&gt;\n\t\t&lt;ui5-tab-separator id=\"sep\"&gt;&lt;/ui5-tab-separator&gt;\n\t\t&lt;ui5-tab id=\"Third\" text=\"Third\"&gt;...&lt;/ui5-tab&gt;\n\t&lt;/ui5-tabcontainer&gt;\n</code></pre> Calling <code>allItems</code> on this TabContainer will return the instances in the following order: <code>[ ui5-tab#First, ui5-tab#Nested, ui5-tab#Second, ui5-tab-separator#sep, ui5-tab#Third ]</code>"},{"deprecated":false,"kind":"field","name":"collapsed","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the tab content is collapsed."},{"deprecated":false,"kind":"field","name":"contentBackgroundDesign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TabContainerBackgroundDesign"},"default":"\"Solid\"","description":"Sets the background color of the Tab Container's content as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>."},{"deprecated":false,"kind":"field","name":"fixed","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction."},{"deprecated":false,"kind":"field","name":"headerBackgroundDesign","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TabContainerBackgroundDesign"},"default":"\"Solid\"","description":"Sets the background color of the Tab Container's header as <code>Solid</code>, <code>Transparent</code>, or <code>Translucent</code>."},{"deprecated":true,"kind":"field","name":"showOverflow","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all tabs are displayed so that it's easier for the user to select a specific tab."},{"deprecated":false,"kind":"field","name":"tabLayout","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TabLayout"},"default":"\"Standard\"","description":"Defines the alignment of the content and the <code>additionalText</code> of a tab.\n\n<br><br> <b>Note:</b> The content and the <code>additionalText</code> would be displayed vertically by default, but when set to <code>Inline</code>, they would be displayed horizontally.\n\n<br><br> Available options are: <ul> <li><code>Standard</code></li> <li><code>Inline</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"tabsOverflowMode","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TabsOverflowMode"},"default":"\"End\"","description":"Defines the overflow mode of the header (the tab strip). If you have a large number of tabs, only the tabs that can fit on screen will be visible. All other tabs that can 't fit on the screen are available in an overflow tab \"More\".\n\n<br><br> <b>Note:</b> Only one overflow at the end would be displayed by default, but when set to <code>StartAndEnd</code>, there will be two overflows on both ends, and tab order will not change on tab selection.\n\n<br><br> Available options are: <ul> <li><code>End</code></li> <li><code>StartAndEnd</code></li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"TabContainer.js","name":"TabContainer","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TabContainer","module":"TabContainer.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-tabcontainer"}]},{"kind":"javascript-module","path":"Table.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Table","name":"Table","tagName":"ui5-table","slots":[{"deprecated":false,"description":"Defines the configuration for the columns of the component. <br><br> <b>Note:</b> Use <code>ui5-table-column</code> for the intended design.","name":"columns"},{"deprecated":false,"description":"Defines the component rows. <br><br> <b>Note:</b> Use <code>ui5-table-row</code> for the intended design.","name":"default"}],"events":[{"deprecated":false,"name":"load-more","type":"CustomEvent","description":"Fired when the user presses the <code>More</code> button or scrolls to the table's end. <br><br>\n\n<b>Note:</b> The event will be fired if <code>growing</code> is set to <code>Button</code> or <code>Scroll</code>."},{"deprecated":false,"name":"popin-change","type":"CustomEvent","description":"Fired when <code>ui5-table-column</code> is shown as a pop-in instead of hiding it."},{"deprecated":false,"name":"row-click","type":"CustomEvent","description":"Fired when a row in <code>Active</code> mode is clicked or <code>Enter</code> key is pressed."},{"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":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"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":"false","deprecated":false,"fieldName":"busy","name":"busy","type":{"text":"boolean"},"description":"Defines if the table is in busy state. <b>\n\nIn this state the component's opacity is reduced and busy indicator is displayed at the bottom of the table."},{"default":"1000","deprecated":false,"fieldName":"busyDelay","name":"busy-delay","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the delay in milliseconds, after which the busy indicator will show up for this component."},{"default":"\"None\"","deprecated":false,"fieldName":"growing","name":"growing","type":{"text":"sap.ui.webc.main.types.TableGrowingMode"},"description":"Defines whether the table will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>."},{"default":"\"\"","deprecated":false,"fieldName":"growingButtonSubtext","name":"growing-button-subtext","type":{"text":"string"},"description":"Defines the subtext that will be displayed under the <code>growingButtonText</code>.\n\n<br><br> <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>."},{"default":"\"\"","deprecated":false,"fieldName":"growingButtonText","name":"growing-button-text","type":{"text":"string"},"description":"Defines the text that will be displayed inside the growing button at the bottom of the table, meant for loading more rows upon press.\n\n<br><br> <b>Note:</b> If not specified a built-in text will be displayed. <br> <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>."},{"default":"false","deprecated":false,"fieldName":"hideNoData","name":"hide-no-data","type":{"text":"boolean"},"description":"Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table."},{"default":"\"None\"","deprecated":false,"fieldName":"mode","name":"mode","type":{"text":"sap.ui.webc.main.types.TableMode"},"description":"Defines the mode of the component. <br><br> Available options are: <ul> <li><code>MultiSelect</code></li> <li><code>SingleSelect</code></li> <li><code>None</code></li> <ul>"},{"default":"\"\"","deprecated":false,"fieldName":"noDataText","name":"no-data-text","type":{"text":"string"},"description":"Defines the text that will be displayed when there is no data and <code>hideNoData</code> is not present."},{"default":"false","deprecated":false,"fieldName":"stickyColumnHeader","name":"sticky-column-header","type":{"text":"boolean"},"description":"Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br><br> <b>Restrictions:</b> <ul> <li>Browsers that do not support this feature: <ul> <li>Internet Explorer</li> <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li> <li>Mozilla Firefox lower than version 59</li> </ul> </li> <li>Scrolling behavior: <ul> <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code> or <code>overflow: auto</code> style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li> </ul> </li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table</code> component provides a set of sophisticated and convenient functions for responsive table design. It provides a comprehensive set of features for displaying and dealing with vast amounts of data. <br><br> To render the <code>Table</code> properly, the order of the <code>columns</code> should match with the order of the item <code>cells</code> in the <code>rows</code>. <br><br> Desktop and tablet devices are supported. On tablets, special consideration should be given to the number of visible columns and rows due to the limited performance of some devices.\n\n<h3>Selection</h3> To benefit from the selection mechanism of <code>ui5-table</code> component, you can use the available selection modes: <code>SingleSelect</code> and <code>MultiSelect</code>. <br> In additition to the used mode, you can also specify the <code>ui5-table-row</code> type choosing between <code>Active</code> or <code>Inactive</code>. <br><br> In <code>SingleSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row via mouse or by pressing the <code>Space</code> or <code>Enter</code> keys. <br> In <code>MultiSelect</code> mode, you can select both an <code>Active</code> and <code>Inactive</code> row by pressing the <code>Space</code> key when a row is on focus or via mouse click over the selection checkbox of the row. In order to select all the available rows at once, you can use the selection checkbox presented in the table's header. <br><br> <b>Note:</b> Currently, when a column is shown as a pop-in, the visual indication for selection is not presented over it.\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> Furthermore, you can interact with <code>ui5-table</code> via the following keys. <br>\n\n<ul> <li>[F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.</li> <li>[CTRL]+[A] - Selects all items, if MultiSelect mode is enabled.</li> <li>[HOME]/[END] - Focuses the first/last item.</li> <li>[PAGEUP]/[PAGEDOWN] - Moves focus up/down by page size (20 items by default).</li> <li>[ALT]+[DOWN]/[UP] - Switches focus between header, last focused item, and More button (if applies) in either direction.</li> <li>[SHIFT]+[DOWN]/[UP] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).</li> <li>[SHIFT]+[HOME]/[END] - Range selection to the first/last item of the List.</li> <li>[CTRL]+[HOME]/[END] - Same behavior as HOME & END.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Table.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/TableColumn.js\";</code> (for <code>ui5-table-column</code>) <br> <code>import \"@ui5/webcomponents/dist/TableRow.js\";</code> (for <code>ui5-table-row</code>) <br> <code>import \"@ui5/webcomponents/dist/TableCell.js\";</code> (for <code>ui5-table-cell</code>)","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":"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":"busy","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the table is in busy state. <b>\n\nIn this state the component's opacity is reduced and busy indicator is displayed at the bottom of the table."},{"deprecated":false,"kind":"field","name":"busyDelay","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"1000","description":"Defines the delay in milliseconds, after which the busy indicator will show up for this component."},{"deprecated":false,"kind":"field","name":"growing","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TableGrowingMode"},"default":"\"None\"","description":"Defines whether the table will have growing capability either by pressing a <code>More</code> button, or via user scroll. In both cases <code>load-more</code> event is fired. <br><br>\n\nAvailable options: <br><br> <code>Button</code> - Shows a <code>More</code> button at the bottom of the table, pressing of which triggers the <code>load-more</code> event. <br> <code>Scroll</code> - The <code>load-more</code> event is triggered when the user scrolls to the bottom of the table; <br> <code>None</code> (default) - The growing is off. <br><br>\n\n<b>Restrictions:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>."},{"deprecated":false,"kind":"field","name":"growingButtonSubtext","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the subtext that will be displayed under the <code>growingButtonText</code>.\n\n<br><br> <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>."},{"deprecated":false,"kind":"field","name":"growingButtonText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text that will be displayed inside the growing button at the bottom of the table, meant for loading more rows upon press.\n\n<br><br> <b>Note:</b> If not specified a built-in text will be displayed. <br> <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>."},{"deprecated":false,"kind":"field","name":"hideNoData","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table."},{"deprecated":false,"kind":"field","name":"mode","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TableMode"},"default":"\"None\"","description":"Defines the mode of the component. <br><br> Available options are: <ul> <li><code>MultiSelect</code></li> <li><code>SingleSelect</code></li> <li><code>None</code></li> <ul>"},{"deprecated":false,"kind":"field","name":"noDataText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text that will be displayed when there is no data and <code>hideNoData</code> is not present."},{"deprecated":false,"kind":"field","name":"stickyColumnHeader","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the column headers remain fixed at the top of the page during vertical scrolling as long as the Web Component is in the viewport. <br><br> <b>Restrictions:</b> <ul> <li>Browsers that do not support this feature: <ul> <li>Internet Explorer</li> <li>Microsoft Edge lower than version 41 (EdgeHTML 16)</li> <li>Mozilla Firefox lower than version 59</li> </ul> </li> <li>Scrolling behavior: <ul> <li>If the Web Component is placed in layout containers that have the <code>overflow: hidden</code> or <code>overflow: auto</code> style definition, this can prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.</li> </ul> </li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Table.js","name":"Table","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Table","module":"Table.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-table"}]},{"kind":"javascript-module","path":"TableCell.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TableCell","name":"TableCell","tagName":"ui5-table-cell","slots":[{"deprecated":false,"description":"Specifies the content of the component.","name":"default"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table-cell</code> component defines the structure of the data in a single <code>ui5-table</code> cell.\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-table-cell</code> exposes the following CSS Shadow Parts: <ul> <li>cell - Used to style the native <code>td</code> element</li> </ul>","superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"TableCell.js","name":"TableCell","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TableCell","module":"TableCell.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-table-cell"}]},{"kind":"javascript-module","path":"TableColumn.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TableColumn","name":"TableColumn","tagName":"ui5-table-column","slots":[{"deprecated":false,"description":"Defines the content of the column header.","name":"default"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"demandPopin","name":"demand-popin","type":{"text":"boolean"},"description":"According to your <code>minWidth</code> settings, the component can be hidden in different screen sizes. <br><br> Setting this property to <code>true</code>, shows this column as pop-in instead of hiding it."},{"default":"Infinity","deprecated":false,"fieldName":"minWidth","name":"min-width","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the minimum table width required to display this column. By default it is always displayed. <br><br> The responsive behavior of the <code>ui5-table</code> is determined by this property. As an example, by setting <code>minWidth</code> property to <code>400</code> sets the minimum width to 400 pixels, and shows this column on tablet (and desktop) but hides it on mobile. <br> For further responsive design options, see <code>demandPopin</code> property."},{"default":"\"Block\"","deprecated":false,"fieldName":"popinDisplay","name":"popin-display","type":{"text":"TableColumnPopinDisplay"},"description":"Defines how the popin row is displayed.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Block</code></li> <li><code>Inline</code></li> </ul>"},{"default":"\"\"","deprecated":false,"fieldName":"popinText","name":"popin-text","type":{"text":"string"},"description":"The text for the column when it pops in."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table-column</code> component allows to define column specific properties that are applied when rendering the <code>ui5-table</code> component.\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-table-column</code> exposes the following CSS Shadow Parts: <ul> <li>column - Used to style the native <code>th</code> element</li> </ul>","members":[{"deprecated":false,"kind":"field","name":"demandPopin","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"According to your <code>minWidth</code> settings, the component can be hidden in different screen sizes. <br><br> Setting this property to <code>true</code>, shows this column as pop-in instead of hiding it."},{"deprecated":false,"kind":"field","name":"minWidth","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"Infinity","description":"Defines the minimum table width required to display this column. By default it is always displayed. <br><br> The responsive behavior of the <code>ui5-table</code> is determined by this property. As an example, by setting <code>minWidth</code> property to <code>400</code> sets the minimum width to 400 pixels, and shows this column on tablet (and desktop) but hides it on mobile. <br> For further responsive design options, see <code>demandPopin</code> property."},{"deprecated":false,"kind":"field","name":"popinDisplay","privacy":"public","static":false,"type":{"text":"TableColumnPopinDisplay"},"default":"\"Block\"","description":"Defines how the popin row is displayed.\n\n<br><br> <b>The available values are:</b>\n\n<ul> <li><code>Block</code></li> <li><code>Inline</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"popinText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"The text for the column when it pops in."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"TableColumn.js","name":"TableColumn","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TableColumn","module":"TableColumn.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-table-column"}]},{"kind":"javascript-module","path":"TableGroupRow.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TableGroupRow","name":"TableGroupRow","tagName":"ui5-table-group-row","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table-group-row</code> component represents a group row in the <code>ui5-table</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-table-group-row</code> exposes the following CSS Shadow Parts: <ul> <li>group-row - Used to style the native <code>tr</code> element.</li> </ul>","superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"TableGroupRow.js","name":"TableGroupRow","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TableGroupRow","module":"TableGroupRow.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-table-group-row"}]},{"kind":"javascript-module","path":"TableRow.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TableRow","name":"TableRow","tagName":"ui5-table-row","slots":[{"deprecated":false,"description":"Defines the cells of the component. <br><br> <b>Note:</b> Use <code>ui5-table-cell</code> for the intended design.","name":"default"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"navigated","name":"navigated","type":{"text":"boolean"},"description":"Indicates if the table row is navigated."},{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines the row's selected state."},{"default":"\"Inactive\"","deprecated":false,"fieldName":"type","name":"type","type":{"text":"sap.ui.webc.main.types.TableRowType"},"description":"Defines the visual indication and behavior of the component. <br><br> Available options are: <ul> <li><code>Active</code></li> <li><code>Inactive</code></li> </ul> <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press, while with type <code>Inactive</code> - will not."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-table-row</code> component represents a row in the <code>ui5-table</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-table-row</code> exposes the following CSS Shadow Parts: <ul> <li>row - Used to style the native <code>tr</code> element</li> <li>popin-row - Used to style the <code>tr</code> element when a row pops in</li> </ul>","members":[{"deprecated":false,"kind":"field","name":"navigated","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates if the table row is navigated."},{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines the row's selected state."},{"deprecated":false,"kind":"field","name":"type","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TableRowType"},"default":"\"Inactive\"","description":"Defines the visual indication and behavior of the component. <br><br> Available options are: <ul> <li><code>Active</code></li> <li><code>Inactive</code></li> </ul> <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press, while with type <code>Inactive</code> - will not."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"TableRow.js","name":"TableRow","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TableRow","module":"TableRow.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-table-row"}]},{"kind":"javascript-module","path":"TabSeparator.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TabSeparator","name":"TabSeparator","tagName":"ui5-tab-separator","description":"The <code>ui5-tab-separator</code> represents a vertical line to separate tabs inside a <code>ui5-tabcontainer</code>.","members":[{"deprecated":false,"kind":"method","name":"getTabInStripDomRef","privacy":"public","description":"Returns the DOM reference of the separator that is placed in the header. <b>Note:</b> Tabs and separators, placed in the <code>subTabs</code> slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return <code>null</code>."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"TabSeparator.js","name":"TabSeparator","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TabSeparator","module":"TabSeparator.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-tab-separator"}]},{"kind":"javascript-module","path":"TextArea.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TextArea","name":"TextArea","tagName":"ui5-textarea","slots":[{"deprecated":false,"description":"Defines the value state message that will be displayed as pop up under the component.\n\n<br><br> <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.\n\n<br><br> <b>Note:</b> The <code>valueStateMessage</code> would be displayed if the component has <code>valueState</code> of type <code>Information</code>, <code>Warning</code> or <code>Error</code>.","name":"valueStateMessage"}],"events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the text has changed and the focus leaves the component."},{"deprecated":false,"name":"input","type":"CustomEvent","description":"Fired when the value of the component changes at each keystroke or when something is pasted."}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible ARIA name of the component."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Receives id(or many ids) of the elements that label the textarea."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Indicates whether the user can interact with the component or not. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"default":"false","deprecated":false,"fieldName":"growing","name":"growing","type":{"text":"boolean"},"description":"Enables the component to automatically grow and shrink dynamically with its content. <br><br>"},{"default":"0","deprecated":false,"fieldName":"growingMaxLines","name":"growing-max-lines","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the maximum number of lines that the component can grow."},{"default":"null","deprecated":false,"fieldName":"maxlength","name":"maxlength","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the maximum number of characters that the <code>value</code> can have."},{"default":"\"\"","deprecated":false,"fieldName":"name","name":"name","type":{"text":"string"},"description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"default":"\"\"","deprecated":false,"fieldName":"placeholder","name":"placeholder","type":{"text":"string"},"description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"default":"false","deprecated":false,"fieldName":"required","name":"required","type":{"text":"boolean"},"description":"Defines whether the component is required."},{"default":"0","deprecated":false,"fieldName":"rows","name":"rows","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the number of visible text lines for the component. <br><br> <b>Notes:</b> <ul> <li>If the <code>growing</code> property is enabled, this property defines the minimum rows to be displayed in the textarea.</li> <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li> </ul>"},{"default":"false","deprecated":false,"fieldName":"showExceededText","name":"show-exceeded-text","type":{"text":"boolean"},"description":"Determines whether the characters exceeding the maximum allowed character count are visible in the component. <br><br> If set to <code>false</code>, the user is not allowed to enter more characters than what is set in the <code>maxlength</code> property. If set to <code>true</code> the characters exceeding the <code>maxlength</code> value are selected on paste and the counter below the component displays their number."},{"default":"\"\"","deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines the value of the component."},{"default":"\"None\"","deprecated":false,"fieldName":"valueState","name":"value-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul> <br><br> <b>Note:</b> If <code>maxlength</code> property is set, the component turns into \"Warning\" state once the characters exceeds the limit. In this case, only the \"Error\" state is considered and can be applied."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-textarea</code> component is used to enter multiple lines of text. <br><br> When empty, it can hold a placeholder similar to a <code>ui5-input</code>. You can define the rows of the <code>ui5-textarea</code> and also determine specific behavior when handling long texts.\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-textarea</code> exposes the following CSS Shadow Parts: <ul> <li>textarea - Used to style the native textarea</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TextArea\";</code>","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":"accessibleNameRef","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Receives id(or many ids) of the elements that label the textarea."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates whether the user can interact with the component or not. <br><br> <b>Note:</b> A disabled component is completely noninteractive."},{"deprecated":false,"kind":"field","name":"growing","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Enables the component to automatically grow and shrink dynamically with its content. <br><br>"},{"deprecated":false,"kind":"field","name":"growingMaxLines","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"0","description":"Defines the maximum number of lines that the component can grow."},{"deprecated":false,"kind":"field","name":"maxlength","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"null","description":"Defines the maximum number of characters that the <code>value</code> can have."},{"deprecated":false,"kind":"field","name":"name","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Determines the name with which the component will be submitted in an HTML form.\n\n<br><br> <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project: <code>import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";</code>\n\n<br><br> <b>Note:</b> When set, a native <code>input</code> HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form."},{"deprecated":false,"kind":"field","name":"placeholder","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines a short hint intended to aid the user with data entry when the component has no value."},{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component is not editable, but still provides visual feedback upon user interaction."},{"deprecated":false,"kind":"field","name":"required","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is required."},{"deprecated":false,"kind":"field","name":"rows","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"0","description":"Defines the number of visible text lines for the component. <br><br> <b>Notes:</b> <ul> <li>If the <code>growing</code> property is enabled, this property defines the minimum rows to be displayed in the textarea.</li> <li>The CSS <code>height</code> property wins over the <code>rows</code> property, if both are set.</li> </ul>"},{"deprecated":false,"kind":"field","name":"showExceededText","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the characters exceeding the maximum allowed character count are visible in the component. <br><br> If set to <code>false</code>, the user is not allowed to enter more characters than what is set in the <code>maxlength</code> property. If set to <code>true</code> the characters exceeding the <code>maxlength</code> value are selected on paste and the counter below the component displays their number."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the value of the component."},{"deprecated":false,"kind":"field","name":"valueState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the value state of the component. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> <li><code>Success</code></li> <li><code>Information</code></li> </ul> <br><br> <b>Note:</b> If <code>maxlength</code> property is set, the component turns into \"Warning\" state once the characters exceeds the limit. In this case, only the \"Error\" state is considered and can be applied."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"TextArea.js","name":"TextArea","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TextArea","module":"TextArea.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-textarea"}]},{"kind":"javascript-module","path":"TimePicker.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TimePicker","name":"TimePicker","tagName":"ui5-time-picker","attributes":[{"default":"\"\"","deprecated":false,"fieldName":"formatPattern","name":"format-pattern","type":{"text":"string"},"description":"Determines the format, displayed in the input field.\n\nExample: HH:mm:ss -> 11:42:35 hh:mm:ss a -> 2:23:15 PM mm:ss -> 12:04 (only minutes and seconds)"},{"default":"undefined","deprecated":false,"fieldName":"placeholder","name":"placeholder","type":{"text":"string"},"description":"Defines a short hint, intended to aid the user with data entry when the component has no value.\n\n<br><br> <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-time-picker</code> component provides an input field with assigned sliders which are opened on user action. The <code>ui5-time-picker</code> allows users to select a localized time using touch, mouse, or keyboard input. It consists of two parts: the time input field and the sliders.\n\n<h3>Usage</h3> The user can enter a time by: <ul> <li>Using the sliders that are displayed in a popup</li> <li>Typing it in directly in the input field</li> </ul> <br><br> When the user makes an entry and chooses the enter key, the sliders shows the corresponding time. When the user directly triggers the sliders display, the actual time is displayed. For the <code>ui5-time-picker</code>\n\n<h3>Formatting</h3>\n\nIf a time is entered by typing it into the input field, it must fit to the used time format. <br><br> Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see <ui5-link target=\"_blank\" href=\"http://unicode.org/reports/tr35/#Date_Field_Symbol_Table\">UTS #35: Unicode Locale Data Markup Language</ui5-link>. <br><br> For example, if the <code>format-pattern</code> is \"HH:mm:ss\", a valid value string is \"11:42:35\" and the same is displayed in the input.\n\n<h3>Keyboard handling</h3> [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it. <br> When closed: <ul> <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li> <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li> <li>[SHIFT]+[PAGEUP] Increments minutes by 1.</li> <li>[SHIFT]+ [PAGEDOWN] Decrements minutes by 1.</li> <li>[SHIFT]+[CTRL]+[PAGEUP] Increments seconds by 1.</li> <li>[SHIFT]+[CTRL]+ [PAGEDOWN] Decrements seconds by 1.</li> </ul> When opened: <ul> <li>[UP] If focus is on one of the selection lists: Select the value which is above the current value. If the first value is selected, select the last value in the list. Exception: AM/ PM List: stay on the first item.</li> <li>[DOWN] If focus is on one of the selection lists: Select the value which is below the current value. If the last value is selected, select the first value in the list. Exception: AM/ PM List: stay on the last item.</li> <li>[LEFT] If focus is on one of the selection lists: Move focus to the selection list which is left of the current selection list. If focus is at the first selection list, move focus to the last selection list.</li> <li>[RIGHT] If focus is on one of the selection lists: Move focus to the selection list which is right of the current selection list. When focus is at the last selection list, move focus to the first selection list.</li> <li>[PAGEUP] If focus is on one of the selection lists: Move focus to the first entry of this list.</li> <li>[PAGEDOWN] If focus is on one of the selection lists: Move focus to the last entry of this list.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TimePicker.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"dateValue","privacy":"public","static":false,"type":{"text":"Date"},"description":"Currently selected time represented as JavaScript Date instance"},{"deprecated":false,"kind":"field","name":"formatPattern","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Determines the format, displayed in the input field.\n\nExample: HH:mm:ss -> 11:42:35 hh:mm:ss a -> 2:23:15 PM mm:ss -> 12:04 (only minutes and seconds)"},{"deprecated":false,"kind":"field","name":"placeholder","privacy":"public","static":false,"type":{"text":"string"},"default":"undefined","description":"Defines a short hint, intended to aid the user with data entry when the component has no value.\n\n<br><br> <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern."}],"superclass":{"module":"TimePickerBase.js","name":"TimePickerBase","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"TimePicker.js","name":"TimePicker","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TimePicker","module":"TimePicker.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-time-picker"}]},{"kind":"javascript-module","path":"Title.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Title","name":"Title","tagName":"ui5-title","slots":[{"deprecated":false,"description":"Defines the text of the component. This component supports nesting a <code>Link</code> component inside. <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"}],"attributes":[{"default":"\"H2\"","deprecated":false,"fieldName":"level","name":"level","type":{"text":"sap.ui.webc.main.types.TitleLevel"},"description":"Defines the component level. Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>."},{"default":"\"None\"","deprecated":false,"fieldName":"wrappingType","name":"wrapping-type","type":{"text":"sap.ui.webc.main.types.WrappingType"},"description":"Defines how the text of a component will be displayed when there is not enough space. Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-title</code> component is used to display titles inside a page. It is a simple, large-sized text with explicit header/title semantics.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Title\";</code>","members":[{"deprecated":false,"kind":"field","name":"level","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.TitleLevel"},"default":"\"H2\"","description":"Defines the component level. Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>."},{"deprecated":false,"kind":"field","name":"wrappingType","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.WrappingType"},"default":"\"None\"","description":"Defines how the text of a component will be displayed when there is not enough space. Available options are: <ul> <li><code>None</code> - The text will be truncated with an ellipsis.</li> <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li> </ul>"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Title.js","name":"Title","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Title","module":"Title.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-title"}]},{"kind":"javascript-module","path":"Toast.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Toast","name":"Toast","tagName":"ui5-toast","slots":[{"deprecated":false,"description":"Defines the text of the component. <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"}],"attributes":[{"default":"3000","deprecated":false,"fieldName":"duration","name":"duration","type":{"text":"sap.ui.webc.base.types.Integer"},"description":"Defines the duration in milliseconds for which component remains on the screen before it's automatically closed. <br><br> <b>Note:</b> The minimum supported value is <code>500</code> ms and even if a lower value is set, the duration would remain <code>500</code> ms."},{"default":"\"BottomCenter\"","deprecated":false,"fieldName":"placement","name":"placement","type":{"text":"sap.ui.webc.main.types.ToastPlacement"},"description":"Defines the placement of the component. <br><br> Available options are: <ul> <li><code>TopStart</code></li> <li><code>TopCenter</code></li> <li><code>TopEnd</code></li> <li><code>MiddleStart</code></li> <li><code>MiddleCenter</code></li> <li><code>MiddleEnd</code></li> <li><code>BottomStart</code></li> <li><code>BottomCenter</code></li> <li><code>BottomEnd</code></li> </ul>"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-toast</code> is a small, non-disruptive popup for success or information messages that disappears automatically after a few seconds.\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4> <ul> <li>You want to display a short success or information message.</li> <li>You do not want to interrupt users while they are performing an action.</li> <li>You want to confirm a successful action.</li> </ul> <h4>When not to use:</h4> <ul> <li>You want to display error or warning message.</li> <li>You want to interrupt users while they are performing an action.</li> <li>You want to make sure that users read the message before they leave the page.</li> <li>You want users to be able to copy some part of the message text.</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Toast\";</code>","members":[{"deprecated":false,"kind":"field","name":"duration","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.Integer"},"default":"3000","description":"Defines the duration in milliseconds for which component remains on the screen before it's automatically closed. <br><br> <b>Note:</b> The minimum supported value is <code>500</code> ms and even if a lower value is set, the duration would remain <code>500</code> ms."},{"deprecated":false,"kind":"field","name":"placement","privacy":"public","static":false,"type":{"text":"sap.ui.webc.main.types.ToastPlacement"},"default":"\"BottomCenter\"","description":"Defines the placement of the component. <br><br> Available options are: <ul> <li><code>TopStart</code></li> <li><code>TopCenter</code></li> <li><code>TopEnd</code></li> <li><code>MiddleStart</code></li> <li><code>MiddleCenter</code></li> <li><code>MiddleEnd</code></li> <li><code>BottomStart</code></li> <li><code>BottomCenter</code></li> <li><code>BottomEnd</code></li> </ul>"},{"deprecated":false,"kind":"method","name":"show","privacy":"public","description":"Shows the component."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Toast.js","name":"Toast","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Toast","module":"Toast.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-toast"}]},{"kind":"javascript-module","path":"ToggleButton.js","declarations":[{"deprecated":false,"customElement":true,"kind":"ToggleButton","name":"ToggleButton","tagName":"ui5-toggle-button","attributes":[{"default":"false","deprecated":false,"fieldName":"pressed","name":"pressed","type":{"text":"boolean"},"description":"Determines whether the component is displayed as pressed."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-toggle-button</code> component is an enhanced <code>ui5-button</code> that can be toggled between pressed and normal states. Users can use the <code>ui5-toggle-button</code> as a switch to turn a setting on or off. It can also be used to represent an independent choice similar to a check box. <br><br> Clicking or tapping on a <code>ui5-toggle-button</code> changes its state to <code>pressed</code>. The button returns to its initial state when the user clicks or taps on it again. By applying additional custom CSS-styling classes, apps can give a different style to any <code>ui5-toggle-button</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ToggleButton\";</code>","members":[{"deprecated":false,"kind":"field","name":"pressed","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Determines whether the component is displayed as pressed."}],"superclass":{"module":"Button.js","name":"Button","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"ToggleButton.js","name":"ToggleButton","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"ToggleButton","module":"ToggleButton.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-toggle-button"}]},{"kind":"javascript-module","path":"Token.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Token","name":"Token","tagName":"ui5-token","slots":[{"deprecated":false,"description":"Defines the close icon for the token. If nothing is provided to this slot, the default close icon will be used. Accepts <code>ui5-icon</code>.","name":"closeIcon"}],"events":[{"deprecated":false,"name":"select","type":"CustomEvent","description":"Fired when the the component is selected by user interaction with mouse or by clicking space."}],"attributes":[{"default":"false","deprecated":false,"fieldName":"readonly","name":"readonly","type":{"text":"boolean"},"description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component can not be deleted or selected, but still provides visual feedback upon user interaction."},{"default":"false","deprecated":false,"fieldName":"selected","name":"selected","type":{"text":"boolean"},"description":"Defines whether the component is selected or not."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the token."}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nTokens are small items of information (similar to tags) that mainly serve to visualize previously selected items.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Token.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"readonly","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is read-only. <br><br> <b>Note:</b> A read-only component can not be deleted or selected, but still provides visual feedback upon user interaction."},{"deprecated":false,"kind":"field","name":"selected","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is selected or not."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the token."}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Token.js","name":"Token","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Token","module":"Token.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-token"}]},{"kind":"javascript-module","path":"Tree.js","declarations":[{"deprecated":false,"customElement":true,"kind":"Tree","name":"Tree","tagName":"ui5-tree","slots":[{"deprecated":false,"description":"Defines the items of the component. Tree items may have other tree items as children. <br><br> <b>Note:</b> Use <code>ui5-tree-item</code> for the intended design.","name":"default"},{"deprecated":false,"description":"Defines the component header. <br><br> <b>Note:</b> When the <code>header</code> slot is set, the <code>headerText</code> property is ignored.","name":"header"}],"events":[{"deprecated":false,"name":"item-click","type":"CustomEvent","description":"Fired when a tree item is activated."},{"deprecated":false,"name":"item-delete","type":"CustomEvent","description":"Fired when the Delete button of any tree item is pressed. <br><br> <b>Note:</b> A Delete button is displayed on each item, when the component <code>mode</code> property is set to <code>Delete</code>."},{"deprecated":false,"name":"item-mouseout","type":"CustomEvent","description":"Fired when the mouse cursor leaves the tree item borders."},{"deprecated":false,"name":"item-mouseover","type":"CustomEvent","description":"Fired when the mouse cursor enters the tree item borders."},{"deprecated":false,"name":"item-toggle","type":"CustomEvent","description":"Fired when a tree item is expanded or collapsed. <i>Note:</i> You can call <code>preventDefault()</code> on the event object to suppress the event, if needed. This may be handy for example if you want to dynamically load tree items upon the user expanding a node. Even if you prevented the event's default behavior, you can always manually call <code>toggle()</code> on a tree item."},{"deprecated":false,"name":"selection-change","type":"CustomEvent","description":"Fired when selection is changed by user interaction in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes."}],"attributes":[{"deprecated":false,"fieldName":"accessibleName","name":"accessible-name","type":{"text":"string"},"description":"Defines the accessible name of the component."},{"default":"\"\"","deprecated":false,"fieldName":"accessibleNameRef","name":"accessible-name-ref","type":{"text":"string"},"description":"Defines the IDs of the elements that label the component."},{"default":"\"\"","deprecated":false,"fieldName":"footerText","name":"footer-text","type":{"text":"string"},"description":"Defines the component footer text."},{"default":"\"\"","deprecated":false,"fieldName":"headerText","name":"header-text","type":{"text":"string"},"description":"Defines the component header text. <br><br> <b>Note:</b> If the <code>header</code> slot is set, this property is ignored."},{"default":"\"None\"","deprecated":false,"fieldName":"mode","name":"mode","type":{"text":"sap.ui.webc.main.types.ListMode"},"description":"Defines the mode of the component. Since the tree uses a <code>ui5-list</code> to display its structure, the tree modes are exactly the same as the list modes, and are all applicable.\n\n<br><br> <b>Note:</b>\n\n<ul> <li><code>None</code></li> <li><code>SingleSelect</code></li> <li><code>SingleSelectBegin</code></li> <li><code>SingleSelectEnd</code></li> <li><code>MultiSelect</code></li> <li><code>Delete</code></li> </ul>"},{"default":"\"\"","deprecated":false,"fieldName":"noDataText","name":"no-data-text","type":{"text":"string"},"description":"Defines the text that is displayed when the component contains no items."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-tree</code> component provides a tree structure for displaying data in a hierarchy.\n\n<h3>Usage</h3>\n\n<h4>When to use:</h4> <ul> <li>To display hierarchically structured items.</li> <li>To select one or more items out of a set of hierarchically structured items.</li> </ul>\n\n<h4>When not to use:</h4> <ul> <li>To display items not hierarchically strcutured. In this case, use the List component.</li> <li>To select one item from a very small number of non-hierarchical items. Select or ComboBox might be more appropriate.</li> <li>The hierarchy turns out to have only two levels. In this case, use List with group items.</li> </ul>\n\n<h3>Keyboard Handling</h3>\n\nThe <code>ui5-tree</code> provides advanced keyboard handling. The user can use the following keyboard shortcuts in order to navigate trough the tree: <ul> <li>[UP/DOWN] - Navigates up and down the tree items that are currently visible.</li> <li>[RIGHT] - Drills down the tree by expanding the tree nodes.</li> <li>[LEFT] - Goes up the tree and collapses the tree nodes.</li> </ul> <br>\n\nThe user can use the following keyboard shortcuts to perform selection, when the <code>mode</code> property is in use: <ul> <li>[SPACE] - Selects the currently focused item upon keyup.</li> <li>[ENTER] - Selects the currently focused item upon keydown.</li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Tree.js\";</code> <br> <code>import \"@ui5/webcomponents/dist/TreeItem.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"accessibleName","privacy":"public","static":false,"type":{"text":"string"},"description":"Defines the accessible name of the component."},{"deprecated":false,"kind":"field","name":"accessibleNameRef","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the IDs of the elements that label the component."},{"deprecated":false,"kind":"field","name":"footerText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the component footer text."},{"deprecated":false,"kind":"field","name":"headerText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the component header text. <br><br> <b>Note:</b> If the <code>header</code> slot is set, this property is ignored."},{"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 component. Since the tree uses a <code>ui5-list</code> to display its structure, the tree modes are exactly the same as the list modes, and are all applicable.\n\n<br><br> <b>Note:</b>\n\n<ul> <li><code>None</code></li> <li><code>SingleSelect</code></li> <li><code>SingleSelectBegin</code></li> <li><code>SingleSelectEnd</code></li> <li><code>MultiSelect</code></li> <li><code>Delete</code></li> </ul>"},{"deprecated":false,"kind":"field","name":"noDataText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text that is displayed when the component contains no items."},{"deprecated":false,"kind":"method","name":"walk","privacy":"public","description":"Perform Depth-First-Search walk on the tree and run a callback on each node","parameters":[{"deprecated":false,"name":"callback","type":{"text":"function"},"description":"function to execute on each node of the tree with 3 arguments: the node, the level and the index"}]}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"Tree.js","name":"Tree","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"Tree","module":"Tree.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-tree"}]},{"kind":"javascript-module","path":"TreeItem.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TreeItem","name":"TreeItem","tagName":"ui5-tree-item","attributes":[{"default":"\"\"","deprecated":false,"fieldName":"additionalText","name":"additional-text","type":{"text":"string"},"description":"Defines the <code>additionalText</code>, displayed in the end of the tree item."},{"default":"\"None\"","deprecated":false,"fieldName":"additionalTextState","name":"additional-text-state","type":{"text":"sap.ui.webc.base.types.ValueState"},"description":"Defines the state of the <code>additionalText</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Error\"</code>."},{"default":"\"\"","deprecated":false,"fieldName":"text","name":"text","type":{"text":"string"},"description":"Defines the text of the tree item."}],"description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-tree-item</code> represents a node in a tree structure, shown as a <code>ui5-list</code>. <br> This is the item to use inside a <code>ui5-tree</code>. You can represent an arbitrary tree structure by recursively nesting tree items.\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-tree-item</code> exposes the following CSS Shadow Parts: <ul> <li>title - Used to style the title of the tree list item</li> <li>additionalText - Used to style the additionalText of the tree list item</li> <li>icon - Used to style the icon of the tree list item</li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/TreeItem.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"additionalText","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the <code>additionalText</code>, displayed in the end of the tree item."},{"deprecated":false,"kind":"field","name":"additionalTextState","privacy":"public","static":false,"type":{"text":"sap.ui.webc.base.types.ValueState"},"default":"\"None\"","description":"Defines the state of the <code>additionalText</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Error\"</code>."},{"deprecated":false,"kind":"field","name":"text","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the text of the tree item."}],"superclass":{"module":"TreeItemBase.js","name":"TreeItemBase","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"TreeItem.js","name":"TreeItem","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TreeItem","module":"TreeItem.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-tree-item"}]},{"kind":"javascript-module","path":"TreeItemCustom.js","declarations":[{"deprecated":false,"customElement":true,"kind":"TreeItemCustom","name":"TreeItemCustom","tagName":"ui5-tree-item-custom","slots":[{"deprecated":false,"description":"Defines the content of the <code>ui5-tree-item</code>.","name":"content"}],"attributes":[{"default":"false","deprecated":false,"fieldName":"hideSelectionElement","name":"hide-selection-element","type":{"text":"Boolean"},"description":"Defines whether the tree list item should display the selection element."}],"description":"The <code>ui5-tree-item-custom</code> represents a node in a tree structure, shown as a <code>ui5-list</code>. <br> This is the item to use inside a <code>ui5-tree</code>. You can represent an arbitrary tree structure by recursively nesting tree items.\n\nYou can use this item to put any custom content inside the tree item.\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-tree-item-custom</code> exposes the following CSS Shadow Parts: <ul> <li>title - Used to style the title of the tree list item</li> <li>additionalText - Used to style the additionalText of the tree list item</li> <li>icon - Used to style the icon of the tree list item</li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/TreeItemCustom.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"hideSelectionElement","privacy":"public","static":false,"type":{"text":"Boolean"},"default":"false","description":"Defines whether the tree list item should display the selection element."}],"superclass":{"module":"TreeItemBase.js","name":"TreeItemBase","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"TreeItemCustom.js","name":"TreeItemCustom","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"TreeItemCustom","module":"TreeItemCustom.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-tree-item-custom"}]},{"kind":"javascript-module","path":"WheelSlider.js","declarations":[{"deprecated":false,"customElement":true,"kind":"WheelSlider","name":"WheelSlider","tagName":"ui5-wheelslider","attributes":[{"default":"false","deprecated":false,"fieldName":"cyclic","name":"cyclic","type":{"text":"boolean"},"description":"Indicates if the wheelslider has a cyclic behaviour."},{"default":"false","deprecated":false,"fieldName":"disabled","name":"disabled","type":{"text":"boolean"},"description":"Defines whether the component is disabled (default is set to <code>false</code>). A disabled component can't be pressed or focused, and it is not in the tab chain."},{"default":"false","deprecated":false,"fieldName":"expanded","name":"expanded","type":{"text":"boolean"},"description":"Indicates if the wheelslider is expanded."},{"default":"\"\"","deprecated":false,"fieldName":"label","name":"label","type":{"text":"string"},"description":"Defines the label of the wheelslider."},{"default":"\"\"","deprecated":false,"fieldName":"value","name":"value","type":{"text":"string"},"description":"Defines the currently selected value"}],"description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/WheelSlider.js\";</code>","members":[{"deprecated":false,"kind":"field","name":"cyclic","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates if the wheelslider has a cyclic behaviour."},{"deprecated":false,"kind":"field","name":"disabled","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Defines whether the component is disabled (default is set to <code>false</code>). A disabled component can't be pressed or focused, and it is not in the tab chain."},{"deprecated":false,"kind":"field","name":"expanded","privacy":"public","static":false,"type":{"text":"boolean"},"default":"false","description":"Indicates if the wheelslider is expanded."},{"deprecated":false,"kind":"field","name":"label","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the label of the wheelslider."},{"deprecated":false,"kind":"field","name":"value","privacy":"public","static":false,"type":{"text":"string"},"default":"\"\"","description":"Defines the currently selected value"}],"superclass":{"module":"UI5Element.js","name":"UI5Element","package":"@ui5/webcomponents-base"}}],"exports":[{"declaration":{"module":"WheelSlider.js","name":"WheelSlider","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"WheelSlider","module":"WheelSlider.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-wheelslider"}]},{"kind":"javascript-module","path":"YearPicker.js","declarations":[{"deprecated":false,"customElement":true,"kind":"YearPicker","name":"YearPicker","tagName":"ui5-yearpicker","events":[{"deprecated":false,"name":"change","type":"CustomEvent","description":"Fired when the user selects a year via \"Space\", \"Enter\" or click."},{"deprecated":false,"name":"navigate","type":"CustomEvent","description":"Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse."}],"description":"Displays years which can be selected.","members":[{"deprecated":false,"kind":"field","name":"selectedDates","privacy":"public","static":false,"type":{"text":"array"},"description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."}],"superclass":{"module":"CalendarPart.js","name":"CalendarPart","package":"@ui5/webcomponents"}}],"exports":[{"declaration":{"module":"YearPicker.js","name":"YearPicker","package":"@ui5/webcomponents"},"deprecated":false,"kind":"js","name":"default"},{"declaration":{"name":"YearPicker","module":"YearPicker.js"},"deprecated":false,"kind":"custom-element-definition","name":"ui5-yearpicker"}]}]}; })