@ui5/webcomponents 0.31.18 → 0.31.22

package/dist/api.json

@@ -1 +1 @@
-{"$schema-ref":"http://schemas.sap.com/sapui5/designtime/api.json/1.0","version":"1.62","symbols":[{"kind":"class","name":"sap.ui.webcomponents.main.Avatar","basename":"Avatar","tagname":"ui5-avatar","resource":"Avatar.js","module":"Avatar","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nAn image-like control 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<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Avatar.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.7","type":"string","description":"Defines the text alternative of the <code>ui5-avatar</code>. If not provided a default text alternative will be set, if present.","defaultValue":"\"\""},{"name":"backgroundColor","visibility":"public","type":"AvatarBackgroundColor","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>","defaultValue":"\"Accent6\""},{"name":"icon","visibility":"public","type":"string","description":"Defines the name of the UI5 Icon, that would be displayed. <br> <b>Note:</b> If <code>image</code> is set, the property would 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-src=\"employee\"></pre>\n\nSee all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.","defaultValue":"\"\""},{"name":"image","visibility":"public","type":"string","description":"Defines the source path to the desired image.","defaultValue":"\"\""},{"name":"imageFitType","visibility":"public","type":"AvatarFitType","description":"Defines the fit type of the desired image. <br><br> Available options are: <ul> <li><code>Cover</code></li> <li><code>Contain</code></li> <ul>","defaultValue":"\"Cover\""},{"name":"initials","visibility":"public","type":"string","description":"Defines the displayed initials. <br> Up to two Latin letters can be displayed as initials in a <code>ui5-avatar</code>.","defaultValue":"\"\""},{"name":"interactive","visibility":"public","type":"boolean","description":"Defines if the avatar is interactive (focusable and pressable)","defaultValue":"false"},{"name":"shape","visibility":"public","type":"AvatarShape","description":"Defines the shape of the <code>ui5-avatar</code>. <br><br> Available options are: <ul> <li><code>Circle</code></li> <li><code>Square</code></li> <ul>","defaultValue":"\"Circle\""},{"name":"size","visibility":"public","type":"AvatarSize","description":"Defines predefined size of the <code>ui5-avatar</code>. <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>","defaultValue":"\"S\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.AvatarGroup","basename":"AvatarGroup","tagname":"ui5-avatar-group","resource":"AvatarGroup.js","module":"AvatarGroup","visibility":"public","since":"1.0.0-rc.11","extends":"UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"avatarSize","visibility":"public","type":"AvatarSize","description":"Defines predefined size of the <code>ui5-avatar</code>. <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>","defaultValue":"\"S\""},{"name":"colorScheme","readonly":"true","visibility":"public","type":"Array","description":"Returns an array containing the <code>AvatarBackgroundColor</code> values that correspond to the avatars in the <code>items</code> array.","defaultValue":"[]"},{"name":"hiddenItems","readonly":"true","visibility":"public","type":"Array","description":"Returns an array containing the ui5-avatar instances that are currently not displayed due to lack of space.","defaultValue":"[]"},{"name":"type","visibility":"public","type":"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>","defaultValue":"\"Group\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-avatar-group</code>. 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":"overflowButton","visibility":"public","since":"1.0.0-rc.13","type":"HTMLElement","description":"Defines the overflow button of <code>ui5-avatar-group</code>. <b>Note:</b> We recommend using the <code>ui5-button</code> component. <br><br> <b>Note:</b> If this slot is not used, the <code>ui5-avatar-group</code> will display the built-in overflow button."}],"events":[{"name":"click","visibility":"public","since":"1.0.0-rc.11","parameters":[{"name":"targetRef","type":"HTMLElement","description":"The DOM ref of the clicked item."},{"name":"overflowButtonClicked","type":"boolean","description":"indicates if the overflow button is clicked"}],"description":"Fired when the <code>ui5-avatar-group</code> is activated either with a click/tap or by using the Enter or Space key."},{"name":"overflow","visibility":"public","since":"1.0.0-rc.13","description":"Fired when the count of visible <code>ui5-avatar</code> elements in the <code>ui5-avatar-group</code> has changed"}]},{"kind":"class","name":"sap.ui.webcomponents.main.Badge","basename":"Badge","tagname":"ui5-badge","resource":"Badge.js","module":"Badge","visibility":"public","since":"0.12.0","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"colorScheme","visibility":"public","type":"string","description":"Defines the color scheme of the <code>ui5-badge</code>. 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.","defaultValue":"\"1\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-badge</code>. <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."},{"name":"icon","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.BusyIndicator","basename":"BusyIndicator","tagname":"ui5-busyindicator","resource":"BusyIndicator.js","module":"BusyIndicator","visibility":"public","since":"0.12.0","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-busyindicator</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.\n\n<h3>Usage</h3> For the <code>ui5-busyindicator</code> you can define the size of the indicator, as well as whether it is shown or hidden. In order to hide it, use the html attribute <code>hidden</code> or <code>display: none;</code> <br><br> In order to show busy state for an HTML element, simply nest the HTML element in a <code>ui5-busyindicator</code> instance. <br> <b>Note:</b> Since <code>ui5-busyindicator</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<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/BusyIndicator\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"active","visibility":"public","type":"boolean","description":"Defines if the busy indicator is visible on the screen. By default it is not.","defaultValue":"false"},{"name":"size","visibility":"public","type":"BusyIndicatorSize","description":"Defines the size of the <code>ui5-busyindicator</code>. <br><br> <b>Note:</b> Available options are \"Small\", \"Medium\", and \"Large\".","defaultValue":"\"Medium\""},{"name":"text","visibility":"public","since":"1.0.0-rc.7","type":"String","description":"Defines text to be displayed below the busy indicator. It can be used to inform the user of the current operation.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Determines the content over which the <code>ui5-busyindicator</code> will appear."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Button","basename":"Button","tagname":"ui5-button","resource":"Button.js","module":"Button","visibility":"public","extends":"UI5Element","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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Button\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"ButtonDesign","description":"Defines the <code>ui5-button</code> design. <br><br> <b>Note:</b> Available options are \"Default\", \"Emphasized\", \"Positive\", \"Negative\", and \"Transparent\".","defaultValue":"\"Default\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-button</code> is disabled (default is set to <code>false</code>). A disabled <code>ui5-button</code> can't be pressed or focused, and it is not in the tab chain.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the icon to be displayed as graphical element within the <code>ui5-button</code>. The SAP-icons font provides numerous options. <br><br> Example: <br> <pre>ui5-button icon=\"palette\"</pre>\n\nSee all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.","defaultValue":"\"\""},{"name":"iconEnd","visibility":"public","type":"boolean","description":"Defines whether the icon should be displayed after the <code>ui5-button</code> text.","defaultValue":"false"},{"name":"iconSize","visibility":"public","since":"1.0.0-rc.8","type":"string","description":"Defines the size of the icon inside the <code>ui5-button</code>.","defaultValue":"undefined"},{"name":"submits","visibility":"public","type":"boolean","description":"When set to <code>true</code>, the <code>ui5-button</code> will automatically submit the nearest form element upon <code>press</code>. <br><br> <b>Important:</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>","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-button</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}],"events":[{"name":"click","visibility":"public","description":"Fired when the <code>ui5-button</code> 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>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Calendar","basename":"Calendar","tagname":"ui5-calendar","appenddocs":"CalendarDate","resource":"Calendar.js","module":"Calendar","static":true,"visibility":"public","since":"1.0.0-rc.11","extends":"CalendarPart","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>[END] - Navigate to the last day of the week <li>[CTRL] + [HOME] - Navigate to the first day of the month <li>[CTRL] + [END] - Navigate to the last day of the month </ul> <br> - Month picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous month</li> <li>[PAGEDOWN] - Navigate to the next month</li> <li>[HOME] - Navigate to the first month of the current row <li>[END] - Navigate to the last month of the current row <li>[CTRL] + [HOME] - Navigate to the first month of the current year <li>[CTRL] + [END] - Navigate to the last month of the year </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>[END] - Navigate to the last year of the current row <li>[CTRL] + [HOME] - Navigate to the first year of the current year range <li>[CTRL] + [END] - Navigate to the last year of the current year range </ul> <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> <pre><code>&lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt;\n{\n\t\"calendarType\": \"Japanese\"\n}\n&lt;/script&gt;\n\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Calendar\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"hideWeekNumbers","visibility":"public","type":"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.","defaultValue":"false"},{"name":"selectedDates","visibility":"protected","type":"undefined","description":"Creates instances of <code>ui5-date</code> inside this <code>ui5-calendar</code> with values, equal to the provided UTC timestamps","deprecated":{}},{"name":"selectionMode","visibility":"public","type":"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>","defaultValue":"\"Single\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the selected date or dates (depending on the <code>selectionMode</code> property) for this calendar as instances of <code>ui5-date</code>"}],"events":[{"name":"selected-dates-change","visibility":"public","parameters":[{"name":"values","type":"Array","description":"The selected dates"},{"name":"dates","type":"Array","description":"The selected dates as UTC timestamps"}],"description":"Fired when the selected dates change. <b>Note:</b> If you call <code>preventDefault()</code> for this event, <code>ui5-calendar</code> will not create instances of <code>ui5-date</code> for the newly selected dates. In that case you should do this manually."}]},{"kind":"class","name":"sap.ui.webcomponents.main.CalendarDate","basename":"CalendarDate","tagname":"ui5-date","resource":"CalendarDate.js","module":"CalendarDate","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"value","visibility":"public","type":"string","description":"The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the <code>ui5-date</code>"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.CalendarPart","basename":"CalendarPart","resource":"CalendarPart.js","module":"CalendarPart","static":true,"visibility":"public","extends":"DateComponentBase","description":"Abstract base class for Calendar, DayPicker, MonthPicker and YearPicker that adds support for: - common properties (timestamp, selectedDates): declarations and methods that operate on them - other common code","constructor":{"visibility":"public"},"properties":[{"name":"_calendarDate","visibility":"protected","type":"undefined","description":"Returns a CalendarDate instance, representing the _timestamp getter - this date is central to all components' rendering logic"},{"name":"_timestamp","visibility":"protected","type":"undefined","description":"Returns the effective timestamp to be used by the respective calendar part"},{"name":"timestamp","visibility":"protected","type":"Integer","description":"The timestamp of the currently focused date. Set this property to move the component's focus to a certain date. <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch."}],"slots":[],"methods":[{"name":"_safelyModifyTimestampBy","visibility":"protected","parameters":[{"name":"amount","type":"undefined","optional":false},{"name":"unit","type":"undefined","optional":false}],"description":"Modify a timestamp by a certain amount of days/months/years and enforce limits"},{"name":"_safelySetTimestamp","visibility":"protected","parameters":[{"name":"timestamp","type":"undefined","optional":false}],"description":"Change a timestamp and enforce limits"}]},{"kind":"class","name":"sap.ui.webcomponents.main.Card","basename":"Card","tagname":"ui5-card","resource":"Card.js","module":"Card","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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 several properties, such as: <code>heading</code>, <code>subheading</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>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Card\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"headerInteractive","visibility":"public","type":"boolean","description":"Defines if the <code>ui5-card</code> header would be interactive, e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.","defaultValue":"false"},{"name":"heading","visibility":"public","type":"string","description":"Defines the title displayed in the <code>ui5-card</code> header.","defaultValue":"\"\""},{"name":"status","visibility":"public","type":"string","description":"Defines the status displayed in the <code>ui5-card</code> header. <br><br> <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed, you can either have <code>action</code>, or <code>status</code>.","defaultValue":"\"\""},{"name":"subheading","visibility":"public","type":"string","description":"Defines the subheading displayed in the <code>ui5-card</code> header.","defaultValue":"\"\""}],"slots":[{"name":"action","visibility":"public","since":"1.0.0-rc.8","type":"HTMLElement[]","description":"Defines an action, displayed in the right most part of the header. <br><br> <b>Note:</b> If set, the <code>status</code> text will not be displayed, you can either have <code>action</code>, or <code>status</code>."},{"name":"avatar","visibility":"public","type":"HTMLElement[]","description":"Defines the visual representation in the header of the card. Supports images and icons. <br><br> <b>Note:</b> SAP-icons font provides numerous options. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."},{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the content of the <code>ui5-card</code>."}],"events":[{"name":"header-click","visibility":"public","since":"0.10.0","description":"Fired when the <code>ui5-card</code> header 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>headerInteractive</code> property is set to true."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Carousel","basename":"Carousel","tagname":"ui5-carousel","resource":"Carousel.js","module":"Carousel","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The carousel allows the user to browse through a set of items by swiping right or left. The component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\n<h3>Usage</h3>\n\nWhen to use\n\n- The items you want to display are very different from each other. - You want to display the items one after the other. When not to use\n\n- The items you want to display need to be visible at the same time. - The items you want to display are uniform and very similar\n\nFor the <code>ui5-carousel</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/Carousel.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"arrowsPlacement","visibility":"public","type":"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.","defaultValue":"\"Content\""},{"name":"cyclic","visibility":"public","type":"boolean","description":"Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.","defaultValue":"false"},{"name":"hideNavigation","visibility":"public","type":"boolean","description":"If set to true the navigation is hidden.","defaultValue":"false"},{"name":"infiniteScrollOffset","visibility":"public","since":"1.0.0-rc.8","type":"Integer","description":"Defines when the <code>load-more</code> event is fired. If not applied the event will not be fired.","defaultValue":"1"},{"name":"itemsPerPageL","visibility":"public","type":"Integer","description":"Sets the number of items per page on large size (more than 1024px). One item per page shown by default.","defaultValue":"1"},{"name":"itemsPerPageM","visibility":"public","type":"Integer","description":"Sets the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.","defaultValue":"1"},{"name":"itemsPerPageS","visibility":"public","type":"Integer","description":"Sets the number of items per page on small size (up to 640px). One item per page shown by default.","defaultValue":"1"},{"name":"selectedIndex","visibility":"public","type":"Integer","description":"Defines the index of the initially selected item.","defaultValue":"0"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the content of the <code>ui5-carousel</code>."}],"events":[{"name":"load-more","visibility":"public","since":"1.0.0-rc.8","description":"Fired for the last items of the <code>ui5-carousel</code> if it is scrolled and the direction of scrolling is to the end. The number of items for which the event is fired is controlled by the <code>infiniteScrollOffset</code> property."},{"name":"navigate","visibility":"public","since":"1.0.0-rc.7","parameters":[{"name":"selectedIndex","type":"Integer","description":"the current <code>selectedIndex</code>."}],"description":"Fired whenever the <code>selectedIndex</code> 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."}]},{"kind":"class","name":"sap.ui.webcomponents.main.CheckBox","basename":"CheckBox","tagname":"ui5-checkbox","resource":"CheckBox.js","module":"CheckBox","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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 manually set the width of the element containing the box and the label using the <code>width</code> property. If the text exceeds the available width, it is truncated. 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<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/CheckBox\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"checked","visibility":"public","type":"boolean","description":"Defines if the <code>ui5-checkbox</code> is checked. <br><br> <b>Note:</b> The property can be changed with user interaction, either by cliking/tapping on the <code>ui5-checkbox</code>, or by pressing the Enter or Space key.","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-checkbox</code> is disabled. <br><br> <b>Note:</b> A disabled <code>ui5-checkbox</code> is completely noninteractive.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-checkbox</code> 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 <code>ui5-checkbox</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.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-checkbox</code> is read-only. <br><br> <b>Note:</b> A red-only <code>ui5-checkbox</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-checkbox</code>.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-checkbox</code>. <br><br> <b>Note:</b> Available options are <code>Warning</code>, <code>Error</code>, and <code>None</code> (default).","defaultValue":"\"None\""},{"name":"wrap","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-checkbox</code> text wraps when there is not enough space. <br><br> <b>Note:</b> By default, the text truncates when there is not enough space.","defaultValue":"false"}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the <code>ui5-checkbox</code> checked state changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ColorPalette","basename":"ColorPalette","tagname":"ui5-color-palette","appenddocs":"ColorPaletteItem","resource":"ColorPalette.js","module":"ColorPalette","visibility":"public","since":"1.0.0-rc.12","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The ColorPalette provides the users with a range of predefined colors. You can set them by using the ColorPaletteItem items as slots.\n\n<h3>Usage</h3> The palette is intended for users, who don't want to check and remember the different values of the colors .\n\nFor the <code>ui5-color-palette</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/ColorPalette.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"value","visibility":"public","type":"CSSColor","description":"The selected color."}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-color-palette-item</code> items."}],"events":[{"name":"change","visibility":"public","parameters":[{"name":"color","type":"String","description":"the selected color"}],"description":"Fired when the user selects a color."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ColorPaletteItem","basename":"ColorPaletteItem","tagname":"ui5-color-palette-item","resource":"ColorPaletteItem.js","module":"ColorPaletteItem","visibility":"public","since":"1.0.0-rc.12","extends":"sap.ui.webcomponents.base.UI5Element","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>.","constructor":{"visibility":"public"},"properties":[{"name":"stableDomRef","visibility":"public","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."},{"name":"value","visibility":"public","type":"CSSColor","description":"Defines the value of the <code>ui5-color-palette-item</code> color. <br><br> <b>Note:</b> The value should be a valid CSS color."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.ColorPicker","basename":"ColorPicker","tagname":"ui5-color-picker","resource":"ColorPicker.js","module":"ColorPicker","visibility":"public","since":"1.0.0-rc.12","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> Enables the user to select a color & transparency.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-color-picker</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/ColorPicker.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"color","visibility":"public","type":"String","description":"Defines the currently selected color of the <code>ui5-color-picker</code>. *Note*: If you need to have initially set color, or change the color programmatically, use this property *Important*: Use HEX, RGB, RGBA, HSV, or a CSS color name when modifying this property."}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the the selected color is changed"}]},{"kind":"class","name":"sap.ui.webcomponents.main.ComboBox","basename":"ComboBox","tagname":"ui5-combobox","appenddocs":"ComboBoxItem ComboBoxGroupItem","resource":"ComboBox.js","module":"ComboBox","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","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 one or more options from a predefined list. <h3>Structure</h3> The <code>ui5-combobox</code> consists of the following elements: <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> 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-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-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. <br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ComboBox\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-combobox</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-combobox</code> is completely uninteractive.","defaultValue":"false"},{"name":"filter","visibility":"public","type":"string","description":"Defines the filter type of the <code>ui5-combobox</code>. Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code> and <code>Contains</code>.","defaultValue":"\"StartsWithPerTerm\""},{"name":"loading","visibility":"public","type":"boolean","description":"Indicates whether a loading indicator should be shown in the picker.","defaultValue":"false"},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the <code>ui5-combobox</code> has no value.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-combobox</code> is readonly. <br><br> <b>Note:</b> A read-only <code>ui5-combobox</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"required","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-combobox</code> is required.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the <code>ui5-combobox</code>.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-combobox</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-combobox</code> items. <br><br> Example: <br> &lt;ui5-combobox><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br> &lt;/ui5-combobox> <br> <br>"},{"name":"icon","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the icon to be displayed in the input field."},{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-combobox</code>. <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-select</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by pressing Enter, focusout or an item is selected."},{"name":"input","visibility":"public","description":"Fired when typing in input. <br><br> <b>Note:</b> filterValue property is updated, input is changed."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ComboBoxGroupItem","basename":"ComboBoxGroupItem","tagname":"ui5-cb-group-item","resource":"ComboBoxGroupItem.js","module":"ComboBoxGroupItem","static":true,"visibility":"public","since":"1.0.0-rc.15","extends":"UI5Element","description":"The <code>ui5-combobox-group-item</code> is type of suggestion item, that can be used to split the <code>ui5-combobox</code> suggestions into groups.","constructor":{"visibility":"public"},"properties":[{"name":"isGroupItem","visibility":"protected","type":"undefined","description":"Used to avoid tag name checks"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the component.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.ComboBoxItem","basename":"ComboBoxItem","tagname":"ui5-cb-item","resource":"ComboBoxItem.js","module":"ComboBoxItem","static":true,"visibility":"public","extends":"UI5Element","description":"The <code>ui5-cb-item</code> represents the item for a <code>ui5-combobox</code>.","constructor":{"visibility":"public"},"properties":[{"name":"additionalText","visibility":"public","since":"1.0.0-rc.11","type":"string","description":"Defines the additional text of the <code>ui5-cb-item</code>.","defaultValue":"\"\""},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-cb-item</code>.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.CustomListItem","basename":"CustomListItem","tagname":"ui5-li-custom","resource":"CustomListItem.js","module":"CustomListItem","static":true,"visibility":"public","extends":"ListItem","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 <code>ui5-li-custom</code> accepts arbitrary HTML content to allow full customization.","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.15","type":"string","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the content of the <code>ui5-li-custom</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.DateComponentBase","basename":"DateComponentBase","resource":"DateComponentBase.js","module":"DateComponentBase","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker) This includes: - \"languageAware: true\" metadata setting, CLDR fetch and i18n initialization - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them - additional common methods","constructor":{"visibility":"public"},"properties":[{"name":"formatPattern","visibility":"public","type":"string","description":"Determines the format, displayed in the input field.","defaultValue":"\"\""},{"name":"maxDate","visibility":"public","since":"1.0.0-rc.6","type":"string","description":"Determines the maximum date available for selection.","defaultValue":"\"\""},{"name":"minDate","visibility":"public","since":"1.0.0-rc.6","type":"string","description":"Determines the мinimum date available for selection.","defaultValue":"\"\""},{"name":"primaryCalendarType","visibility":"public","type":"CalendarType","description":"Sets a calendar type used for display. If not set, the calendar type of the global configuration is used."},{"name":"secondaryCalendarType","visibility":"public","since":"1.0.0-rc.16","type":"CalendarType","description":"Defines the secondary calendar type. If not set, the calendar will only show the primary calendar type.","defaultValue":"undefined"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.DatePicker","basename":"DatePicker","tagname":"ui5-date-picker","resource":"DatePicker.js","module":"DatePicker","static":true,"visibility":"public","extends":"DateComponentBase","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 chooses 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\" class=\"api-table-content-cell-link\">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> is focused and the picker dialog is not opened the user can increment or decrement the corresponding field of the JS date object referenced by <code>dateValue</code> propery 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;\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DatePicker\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"_calendarSelectedDates","visibility":"protected","type":"undefined","description":"Used to provide selectedDates to the calendar based on the component's state Override in derivatives to provide different rules for setting the calendar's selected dates"},{"name":"_calendarSelectionMode","visibility":"protected","type":"undefined","description":"Override in derivatives to change calendar selection mode"},{"name":"_calendarTimestamp","visibility":"protected","type":"undefined","description":"Used to provide a timestamp to the Calendar (to focus it to a relevant date when open) based on the component's state Override in derivatives to provide the calendar a timestamp based on their properties By default focus the calendar on the selected date if set, or the current day otherwise"},{"name":"_placeholder","visibility":"protected","type":"undefined"},{"name":"dateValue","readonly":"true","visibility":"public","type":"Date","description":"Currently selected date represented as a Local JavaScript Date instance."},{"name":"disabled","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-date-picker</code> is displayed as disabled.","defaultValue":"false"},{"name":"hideWeekNumbers","visibility":"public","since":"1.0.0-rc.8","type":"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.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-date-picker</code> 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 <code>ui5-date-picker</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.","defaultValue":"\"\""},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint, intended to aid the user with data entry when the <code>ui5-date-picker</code> 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 <code>ui5-date-picker</code> appear empty - without placeholder or format pattern.","defaultValue":"undefined"},{"name":"readonly","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-date-picker</code> is displayed as read-only.","defaultValue":"false"},{"name":"required","visibility":"public","since":"1.0.0-rc.9","type":"Boolean","description":"Defines whether the <code>ui5-date-picker</code> is required.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines a formatted date value.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-date-picker</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.7","type":"HTMLElement","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-date-picker</code>. <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-date-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","parameters":[{"name":"value","type":"String","description":"The submitted value."},{"name":"valid","type":"Boolean","description":"Indicator if the value is in correct format pattern and in valid range."}],"description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"name":"input","visibility":"public","parameters":[{"name":"value","type":"String","description":"The submitted value."},{"name":"valid","type":"Boolean","description":"Indicator if the value is in correct format pattern and in valid range."}],"description":"Fired when the value of the <code>ui5-date-picker</code> is changed at each key stroke."}],"methods":[{"name":"_checkValueValidity","visibility":"protected"},{"name":"_modifyDateValue","visibility":"protected","parameters":[{"name":"amount","type":"undefined","optional":false},{"name":"unit","type":"undefined","optional":false}]},{"name":"_onInputChange","visibility":"protected","description":"The ui5-input \"change\" event handler - fire change event when the user focuses out of the input"},{"name":"_onInputInput","visibility":"protected","description":"The ui5-input \"input\" event handler - fire input even when the user types"},{"name":"_onInputSubmit","visibility":"protected","description":"The ui5-input \"submit\" event handler - fire change event when the user presses enter"},{"name":"closePicker","visibility":"public","description":"Closes the picker."},{"name":"formatValue","visibility":"public","parameters":[{"name":"oDate","type":"object","optional":false,"description":"A Java Script date object to be formatted as string"}],"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"},{"name":"isInValidRange","visibility":"public","parameters":[{"name":"value","type":"object","optional":false}],"description":"Checks if a date is in range between minimum and maximum date."},{"name":"isOpen","visibility":"public","returnValue":{"type":"Boolean","description":"true if the picker is open, false otherwise"},"description":"Checks if the picker is open."},{"name":"isValid","visibility":"public","parameters":[{"name":"value","type":"string","optional":false,"description":"A value to be tested against the current date format"}],"description":"Checks if a value is valid against the current date format of the DatePicker."},{"name":"normalizeValue","visibility":"protected","description":"The parser understands many formats, but we need one format"},{"name":"onResponsivePopoverAfterClose","visibility":"protected"},{"name":"onSelectedDatesChange","visibility":"protected","parameters":[{"name":"event","type":"undefined","optional":false}],"description":"The user selected a new date in the calendar"},{"name":"openPicker","visibility":"public","description":"Opens the picker."}]},{"kind":"class","name":"sap.ui.webcomponents.main.DateRangePicker","basename":"DateRangePicker","tagname":"ui5-daterange-picker","resource":"DateRangePicker.js","module":"DateRangePicker","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"DatePicker","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>","constructor":{"visibility":"public"},"properties":[{"name":"delimiter","visibility":"public","type":"string","description":"Determines the symbol which separates the dates. If not supplied, the default time interval delimiter for the current locale will be used."},{"name":"firstDateValue","readonly":"true","visibility":"public","type":"Date","description":"Currently selected first date represented as JavaScript Date instance."},{"name":"lastDateValue","readonly":"true","visibility":"public","type":"Date","description":"Currently selected last date represented as JavaScript Date instance."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.DateTimePicker","basename":"DateTimePicker","tagname":"ui5-datetime-picker","resource":"DateTimePicker.js","module":"DateTimePicker","visibility":"public","since":"1.0.0-rc.7","extends":"DatePicker","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\nProgramatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property <br><br> As most of the input based components, the <code>DateTimePicker</code> supports properties, such as: <code>disabled</code>, <code>readonly</code>, <code>valueState</code> and <code>placeholder</code>.\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\" class=\"api-table-content-cell-link\">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>","constructor":{"visibility":"public"},"methods":[{"name":"openPicker","visibility":"public","description":"Opens the picker."}]},{"kind":"class","name":"sap.ui.webcomponents.main.DayPicker","basename":"DayPicker","tagname":"ui5-daypicker","resource":"DayPicker.js","module":"DayPicker","static":true,"visibility":"public","extends":"CalendarPart","description":"Represents one month view inside a calendar.","constructor":{"visibility":"public"},"properties":[{"name":"hideWeekNumbers","visibility":"public","since":"1.0.0-rc.8","type":"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.","defaultValue":"false"},{"name":"selectedDates","visibility":"public","type":"Array","description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."},{"name":"selectionMode","visibility":"public","type":"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>","defaultValue":"\"Single\""}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the selected date(s) change"},{"name":"navigate","visibility":"public","description":"Fired when the timestamp changes (user navigates with the keyboard) or clicks with the mouse"}],"methods":[{"name":"_hasNextPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_hasPreviousPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_showNextPage","visibility":"protected","description":"Called from Calendar.js Same as PageDown"},{"name":"_showPreviousPage","visibility":"protected","description":"Called from Calendar.js Same as PageUp"}]},{"kind":"class","name":"sap.ui.webcomponents.main.Dialog","basename":"Dialog","tagname":"ui5-dialog","resource":"Dialog.js","module":"Dialog","visibility":"public","extends":"Popup","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 user action is required before returning to the parent window is possible. 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>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.","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","type":"string","description":"Defines the accessible name of the dialog when <code>header</code> slot is provided. <br><br>\n\n<b>Note:</b> If <code>aria-label</code> is provided, <code>accessibleName</code> will be ignored.","defaultValue":"\"\""},{"name":"draggable","visibility":"public","since":"1.0.0-rc.9","type":"boolean","description":"Determines whether the <code>ui5-dialog</code> is draggable. If this property is set to true, the Dialog will be draggable by its header. <br><br> <b>Note:</b> The <code>ui5-dialog</code> can be draggable only in desktop mode.","defaultValue":"false"},{"name":"headerText","visibility":"public","type":"string","description":"Defines the header text. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.","defaultValue":"\"\""},{"name":"resizable","visibility":"public","since":"1.0.0-rc.10","type":"boolean","description":"Configures the <code>ui5-dialog</code> 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 <code>ui5-dialog</code> can be resizable only in desktop mode. <br> <b>Note:</b> Upon resizing, externally defined height and width styling will be ignored.","defaultValue":"false"},{"name":"stretch","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen. <br><br> <b>Note:</b> The <code>ui5-dialog</code> will be stretched to approximately 90% of the viewport.","defaultValue":"false"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.DurationPicker","basename":"DurationPicker","tagname":"ui5-duration-picker","resource":"DurationPicker.js","module":"DurationPicker","static":true,"visibility":"public","since":"1.0.0-rc.7","extends":"TimePickerBase","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-duration-picker</code> component provides an input field with assigned sliders which opens on user action. The <code>ui5-duration-picker</code> allows users to select a time duration. It consists of two parts: the time input field and the sliders.\n\n<h3>Usage</h3>\n\nThe Duration Picker is used for input of time. Users are able to select hours, minutes and seconds. The user can enter a time by: <ul> <li>Using the sliders 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 chooses the enter key, the sliders shows the corresponding time. When the user directly triggers the sliders display, the actual time is displayed.\n\nFor the <code>ui5-duration-picker</code>\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 max value is reached, the slider doesn't increment.</li> <li>[PAGEDOWN] - Decrements the corresponding field by 1. If min value is reached, the slider doesn't increment.</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.</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.</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/DurationPicker.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"hideHours","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines whether the slider for hours will be available. By default there are sliders for hours, minutes and seconds.","defaultValue":"false"},{"name":"hideMinutes","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines whether the slider for minutes will be available. By default there are sliders for hours, minutes and seconds.","defaultValue":"false"},{"name":"hideSeconds","visibility":"public","type":"boolean","description":"Defines whether a slider for seconds will be available. By default there are sliders for hours, minutes and seconds.","defaultValue":"false"},{"name":"maxValue","visibility":"public","type":"string","description":"Defines a formatted maximal time that the user will be able to adjust.","defaultValue":"\"23:59:59\""},{"name":"minutesStep","visibility":"public","since":"1.0.0-rc.8","type":"Integer","description":"Defines the selection step for the minutes","defaultValue":"1"},{"name":"secondsStep","visibility":"public","since":"1.0.0-rc.8","type":"Integer","description":"Defines the selection step for the seconds","defaultValue":"1"},{"name":"value","visibility":"public","type":"string","description":"Defines a formatted time value.","defaultValue":"\"00:00:00\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.FileUploader","basename":"FileUploader","tagname":"ui5-file-uploader","resource":"FileUploader.js","module":"FileUploader","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"accept","visibility":"public","type":"string","description":"Comma-separated list of file types that the <code>ui5-file-uploader</code> 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.","defaultValue":"\"\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-file-uploader</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-file-uploader</code> is completely noninteractive.","defaultValue":"false"},{"name":"files","readonly":"true","visibility":"public","type":"FileList","description":"FileList of all selected files."},{"name":"hideInput","visibility":"public","type":"boolean","description":"If set to \"true\", the input field of <code>ui5-file-uploader</code> will not be rendered. Only the default slot that is passed will be rendered.","defaultValue":"false"},{"name":"multiple","visibility":"public","type":"boolean","description":"Allows multiple files to be chosen.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-file-uploader</code> 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 <code>ui5-file-uploader</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.","defaultValue":"\"\""},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the <code>ui5-file-uploader</code> has no value.","defaultValue":"\"\""},{"name":"value","visibility":"public","type":"string","description":"Defines the name/names of the file/files to upload.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-file-uploader</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"By default the <code>ui5-file-uploader</code> 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":"valueStateMessage","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-file-uploader</code>. <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-file-uploader</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","parameters":[{"name":"files","type":"FileList","description":"The current files."}],"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."}]},{"kind":"class","name":"sap.ui.webcomponents.main.GroupHeaderListItem","basename":"GroupHeaderListItem","tagname":"ui5-li-groupheader","resource":"GroupHeaderListItem.js","module":"GroupHeaderListItem","visibility":"public","extends":"ListItemBase","description":"The <code>ui5-li-groupheader</code> is a special list item, used only to separate other list items into logical groups.","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.15","type":"string","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-li-groupheader</code>. <br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Icon","basename":"Icon","tagname":"ui5-icon","resource":"Icon.js","module":"Icon","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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; or as a visually appealing clickable area in the form of an icon button. <br><br> A large set of built-in icons is available and they can be used by setting the <code>name</code> property on the <code>ui5-icon</code>. But before using an icon, you need to import the desired icon. <br>\n\nFor the standard icon collection, you have to import an icon from the <code>@ui5/webcomponents-icons</code> package: <br> <code>import \"@ui5/webcomponents-icons/dist/employee.js\";</code> <br>\n\nFor the SAP Fiori Tools icon collection (supported since 1.0.0-rc.10), you have to import an icon from the <code>@ui5/webcomponents-icons-tnt</code> package: <br> <code>import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";</code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Icon.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","type":"string","description":"Defines the text alternative of the <code>ui5-icon</code>. 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.","defaultValue":"\"\""},{"name":"interactive","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines if the icon is interactive (focusable and pressable)","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Defines the unique identifier (icon name) of each <code>ui5-icon</code>. <br>\n\nTo browse all available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>. <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>.","defaultValue":"\"\""},{"name":"showTooltip","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-icon</code> should have a tooltip.","defaultValue":"false"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Input","basename":"Input","tagname":"ui5-input","appenddocs":"SuggestionItem","resource":"Input.js","module":"Input","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>enabled</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>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)","constructor":{"visibility":"public"},"properties":[{"name":"_placeholder","visibility":"protected","type":"undefined","description":"Returns the placeholder value."},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-input</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-input</code> is completely noninteractive.","defaultValue":"false"},{"name":"highlight","visibility":"public","type":"boolean","description":"Defines if characters within the suggestions are to be highlighted in case the input value matches parts of the suggestions text. <br><br> <b>Note:</b> takes effect when <code>showSuggestions</code> is set to <code>true</code>","defaultValue":"false"},{"name":"maxlength","visibility":"public","since":"1.0.0-rc.5","type":"Integer","description":"Sets the maximum number of characters available in the input field."},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-input</code> 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 <code>ui5-input</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.","defaultValue":"\"\""},{"name":"nativeInput","visibility":"protected","type":"undefined","description":"Returns a reference to the native input element"},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the <code>ui5-input</code> has no value.","defaultValue":"\"\""},{"name":"previewItem","readonly":"true","visibility":"public","type":"ui5-suggestion-item","description":"The suggestion item on preview."},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-input</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-input</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"required","visibility":"public","since":"1.0.0-rc.3","type":"boolean","description":"Defines whether the <code>ui5-input</code> is required.","defaultValue":"false"},{"name":"showSuggestions","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-input</code> should show suggestions, if such are present. <br><br> <b>Note:</b> Don`t forget to import the <code>InputSuggestions</code> module from <code>\"@ui5/webcomponents/dist/features/InputSuggestions.js\"</code> to enable this functionality.","defaultValue":"false"},{"name":"type","visibility":"public","type":"InputType","description":"Defines the HTML type of the <code>ui5-input</code>. 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>","defaultValue":"\"Text\""},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the <code>ui5-input</code>. <br><br> <b>Note:</b> The property is updated upon typing.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-input</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-input</code> 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-item text=\"Item #1\"></ui5-suggestion-item> <ui5-suggestion-item text=\"Item #2\"></ui5-suggestion-item> </ui5-input> <br><br> <b>Note:</b> The suggestion would be displayed only if the <code>showSuggestions</code> property is set to <code>true</code>. <br><br> <b>Note:</b> The &lt;ui5-suggestion-item> is recommended to be used as a suggestion item. Importing the Input Suggestions Support feature: <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> <br> also automatically imports the &lt;ui5-suggestion-item> for your convenience."},{"name":"icon","visibility":"public","type":"HTMLElement[]","description":"Defines the icon to be displayed in the <code>ui5-input</code>."},{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.6","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-input</code>. <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-input</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state. <br> <b>Note:</b> If the <code>ui5-input</code> 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."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"name":"input","visibility":"public","description":"Fired when the value of the <code>ui5-input</code> changes at each keystroke, and when a suggestion item has been selected."},{"name":"submit","visibility":"public","description":"Fired when user presses Enter key on the <code>ui5-input</code>. <br><br> <b>Note:</b> The event is fired independent of whether there was a change before or not. If change was performed, the event is fired after the change event. The event is also fired when an item of the select list is selected by pressing Enter."},{"name":"suggestion-item-preview","visibility":"public","since":"1.0.0-rc.8","parameters":[{"name":"item","type":"HTMLElement","description":"The previewed suggestion item"},{"name":"targetRef","type":"HTMLElement","description":"The DOM ref of the suggestion item."}],"description":"Fired when the user navigates to a suggestion item via the ARROW keys, as a preview, before the final selection."},{"name":"suggestion-item-select","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"The selected item"}],"description":"Fired when a suggestion item, that is displayed in the suggestion popup, is selected."},{"name":"suggestion-scroll","visibility":"public","since":"1.0.0-rc.8","parameters":[{"name":"scrollTop","type":"Integer","description":"The current scroll position"},{"name":"scrollContainer","type":"HTMLElement","description":"The scroll container"}],"description":"Fired when the user scrolls the suggestion popover."}],"methods":[{"name":"getCaretPosition","visibility":"protected","description":"Returns the caret position inside the native input"},{"name":"isOpen","visibility":"public","returnValue":{"type":"Boolean","description":"true if the popover is open, false otherwise"},"description":"Checks if the value state popover is open."},{"name":"setCaretPosition","visibility":"protected","parameters":[{"name":"pos","type":"undefined","optional":false}],"description":"Sets the caret to a certain position inside the native input"}]},{"kind":"class","name":"sap.ui.webcomponents.main.Label","basename":"Label","tagname":"ui5-label","resource":"Label.js","module":"Label","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-label</code> is a component used to represent a label, providing valuable information to the user. Usually it is placed next to a value holder, such as a text field. It informs the user about what data is displayed or expected in the value holder. <br><br> The <code>ui5-label</code> appearance can be influenced by properties, such as <code>required</code> and <code>wrap</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>","constructor":{"visibility":"public"},"properties":[{"name":"for","visibility":"public","type":"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.","defaultValue":"\"\""},{"name":"required","visibility":"public","type":"boolean","description":"Defines whether an asterisk character is added to the <code>ui5-label</code> text. <br><br> <b>Note:</b> Usually indicates that user input is required.","defaultValue":"false"},{"name":"showColon","visibility":"public","type":"boolean","description":"Defines whether colon is added to the component text. <br><br> <b>Note:</b> Usually used in forms.","defaultValue":"false"},{"name":"wrap","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-label</code> should wrap, when there is not enough space. <br><br> <b>Note:</b> By default the text would truncate.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-label</code>. <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Link","basename":"Link","tagname":"ui5-link","resource":"Link.js","module":"Link","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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 basic HTML anchor tag (<code><a></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>wrap</code> property is set to <code>true</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>","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"LinkDesign","description":"Defines the <code>ui5-link</code> design. <br><br> <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>.","defaultValue":"\"Default\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-link</code> is disabled. <br><br> <b>Note:</b> When disabled, the <code>ui5-link</code> cannot be triggered by the user.","defaultValue":"false"},{"name":"href","visibility":"public","type":"string","description":"Defines the <code>ui5-link</code> href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported.","defaultValue":"\"\""},{"name":"target","visibility":"public","type":"string","description":"Defines the <code>ui5-link</code> target. <br><br> <b>Notes:</b> <ul> <li>Available options are the standard values: <code>_self</code>, <code>_top</code>, <code>_blank</code>, <code>_parent</code>, and <code>_search</code>.</li> <li>This property must only be used when the <code>href</code> property is set.</li> </ul>","defaultValue":"\"\""},{"name":"wrap","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-link</code> text should wrap when there is no sufficient space. <br><br> <b>Note:</b> The text is truncated by default.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-link</code>. <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}],"events":[{"name":"click","visibility":"public","description":"Fired when the <code>ui5-link</code> is triggered either with a mouse/tap or by using the Enter key."}]},{"kind":"class","name":"sap.ui.webcomponents.main.List","basename":"List","tagname":"ui5-list","appenddocs":"StandardListItem CustomListItem GroupHeaderListItem","resource":"List.js","module":"List","visibility":"public","extends":"UI5Element","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 а 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<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>)","constructor":{"visibility":"public"},"properties":[{"name":"busy","visibility":"public","since":"1.0.0-rc.6","type":"boolean","description":"Defines if the component would display a loading indicator over the list.","defaultValue":"false"},{"name":"footerText","visibility":"public","type":"string","description":"Defines the footer text.","defaultValue":"\"\""},{"name":"growing","visibility":"public","since":"1.0.0-rc.13","type":"ListGrowingMode","description":"Defines whether the <code>ui5-list</code> 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>Limitations:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>.","defaultValue":"\"None\""},{"name":"headerText","visibility":"public","type":"string","description":"Defines the <code>ui5-list</code> header text. <br><br> <b>Note:</b> If <code>header</code> is set this property is ignored.","defaultValue":"\"\""},{"name":"inset","visibility":"public","type":"boolean","description":"Determines whether the list items are indented.","defaultValue":"false"},{"name":"mode","visibility":"public","type":"ListMode","description":"Defines the mode of the <code>ui5-list</code>. <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>.","defaultValue":"\"None\""},{"name":"noDataText","visibility":"public","type":"string","description":"Defines the text that is displayed when the <code>ui5-list</code> contains no items.","defaultValue":"\"\""},{"name":"separators","visibility":"public","type":"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>","defaultValue":"\"All\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-list</code>. <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":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-list</code> header. <br><br> <b>Note:</b> When <code>header</code> is set, the <code>headerText</code> property is ignored."}],"events":[{"name":"item-click","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the clicked item."}],"description":"Fired when an item is activated, unless the item's <code>type</code> property is set to <code>Inactive</code>."},{"name":"item-close","visibility":"public","since":"1.0.0-rc.8","parameters":[{"name":"item","type":"HTMLElement","description":"the item about to be closed."}],"description":"Fired when the <code>Close</code> button of any item is clicked <br><br> <b>Note:</b> This event is applicable to <code>ui5-li-notification</code> items only, not to be confused with <code>item-delete</code>."},{"name":"item-delete","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the deleted item."}],"description":"Fired when the Delete button of any item is pressed. <br><br> <b>Note:</b> A Delete button is displayed on each item, when the <code>ui5-list</code> <code>mode</code> property is set to <code>Delete</code>."},{"name":"item-toggle","visibility":"public","since":"1.0.0-rc.8","parameters":[{"name":"item","type":"HTMLElement","description":"the toggled item."}],"description":"Fired when the <code>Toggle</code> button of any item is clicked. <br><br> <b>Note:</b> This event is applicable to <code>ui5-li-notification-group</code> items only."},{"name":"load-more","visibility":"public","since":"1.0.0-rc.6","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."},{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedItems","type":"Array","description":"An array of the selected items."},{"name":"previouslySelectedItems","type":"Array","description":"An array of the previously selected items."}],"description":"Fired when selection is changed by user interaction in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes."}],"methods":[{"name":"focusItem","visibility":"protected","parameters":[{"name":"item","type":"undefined","optional":false}],"description":"Focuses a list item and sets its tabindex to \"0\" via the ItemNavigation"}]},{"kind":"class","name":"sap.ui.webcomponents.main.ListItem","basename":"ListItem","resource":"ListItem.js","module":"ListItem","visibility":"public","extends":"ListItemBase","description":"A class to serve as a base for the <code>StandardListItem</code> and <code>CustomListItem</code> classes.","constructor":{"visibility":"public"},"properties":[{"name":"type","visibility":"public","type":"ListItemType","description":"Defines the visual indication and behavior of the list items. 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 with type <code>Inactive</code> and <code>Detail</code> - will not.","defaultValue":"\"Active\""}],"slots":[],"events":[{"name":"detail-click","visibility":"public","description":"Fired when the user clicks on the detail button when type is <code>Detail</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ListItemBase","basename":"ListItemBase","resource":"ListItemBase.js","module":"ListItemBase","abstract":true,"static":true,"visibility":"public","extends":"UI5Element","description":"A class to serve as a foundation for the <code>ListItem</code> and <code>GroupHeaderListItem</code> classes.","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"protected","since":"1.0.0-rc.12","type":"boolean","description":"Defines whether <code>ui5-li</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-li</code> is noninteractive.","defaultValue":"false"},{"name":"selected","visibility":"public","type":"boolean","description":"Defines the selected state of the <code>ListItem</code>.","defaultValue":"false"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.MessageStrip","basename":"MessageStrip","tagname":"ui5-messagestrip","resource":"MessageStrip.js","module":"MessageStrip","visibility":"public","since":"0.9.0","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-messagestrip</code> component enables the embedding of app-related messages. It displays 4 types 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-messagestrip</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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"noCloseButton","visibility":"public","type":"boolean","description":"Defines whether the MessageStrip renders close icon.","defaultValue":"false"},{"name":"noIcon","visibility":"public","type":"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.","defaultValue":"false"},{"name":"type","visibility":"public","type":"MessageStripType","description":"Defines the <code>ui5-messagestrip</code> type. <br><br> <b>Note:</b> Available options are <code>\"Information\"</code>, <code>\"Positive\"</code>, <code>\"Negative\"</code>, and <code>\"Warning\"</code>.","defaultValue":"\"Information\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-messagestrip</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."},{"name":"icon","visibility":"public","type":"HTMLElement","description":"Defines the content to be displayed as graphical element within the <code>ui5-messagestrip</code>. <br><br> <b>Note:</b> If no icon is given, the default icon for the <code>ui5-messagestrip</code> 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://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."}],"events":[{"name":"close","visibility":"public","description":"Fired when the close button is pressed either with a click/tap or by using the Enter or Space key."}]},{"kind":"class","name":"sap.ui.webcomponents.main.MonthPicker","basename":"MonthPicker","tagname":"ui5-monthpicker","resource":"MonthPicker.js","module":"MonthPicker","static":true,"visibility":"public","extends":"CalendarPart","description":"Displays months which can be selected.","constructor":{"visibility":"public"},"properties":[{"name":"selectedDates","visibility":"public","type":"Array","description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the user selects a month (space/enter/click)."},{"name":"navigate","visibility":"public","since":"1.0.0-rc.9","description":"Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse."}],"methods":[{"name":"_hasNextPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_hasPreviousPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_showNextPage","visibility":"protected","description":"Called by Calendar.js User pressed the \">\" button in the calendar header (same as PageDown)"},{"name":"_showPreviousPage","visibility":"protected","description":"Called by Calendar.js User pressed the \"<\" button in the calendar header (same as PageUp)"}]},{"kind":"class","name":"sap.ui.webcomponents.main.MultiComboBox","basename":"MultiComboBox","tagname":"ui5-multi-combobox","appenddocs":"MultiComboBoxItem","resource":"MultiComboBox.js","module":"MultiComboBox","visibility":"public","since":"0.11.0","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component provides a list box with items and a text field allowing the user to either type a value directly into the control, or choose from the list of existing items.\n\nIt is a drop-down list for selecting and filtering values, commonly used to enable 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 of available options. The select 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> Input field - displays the selected option/s as token/s. Users can type to filter the list. <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\nIn the context of <code>ui5-multi-combobox</code>, you can provide a custom stable DOM ref for: <ul> <li>Every <code>ui5-mcb-item</code> that you provide. Example: <code><ui5-mcb-item stable-dom-ref=\"item1\"></ui5-mcb-item></code></li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"allowCustomValues","visibility":"public","type":"boolean","description":"Defines if the user input will be prevented, if no matching item has been found","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-multi-combobox</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-multi-combobox</code> is completely noninteractive.","defaultValue":"false"},{"name":"filter","visibility":"public","type":"string","description":"Defines the filter type of the <code>ui5-multi-combobox</code>. Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>.","defaultValue":"\"StartsWithPerTerm\""},{"name":"open","visibility":"public","since":"1.0.0-rc.5","type":"boolean","description":"Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.","defaultValue":"false"},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the <code>ui5-multi-combobox</code> has no value.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-multi-combobox</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-multi-combobox</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"required","visibility":"public","since":"1.0.0-rc.5","type":"boolean","description":"Defines whether the <code>ui5-multi-combobox</code> is required.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the <code>ui5-multi-combobox</code>. <br><br> <b>Note:</b> The property is updated upon typing.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-multi-combobox</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-multi-combobox</code> items. <br><br> Example: <br> &lt;ui5-multi-combobox><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br> &lt;/ui5-multi-combobox> <br> <br>"},{"name":"icon","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the icon to be displayed in the <code>ui5-multi-combobox</code>."},{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-multi-combobox</code>. <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-multi-combobox</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"name":"input","visibility":"public","description":"Fired when the value of the <code>ui5-multi-combobox</code> changes at each keystroke."},{"name":"open-change","visibility":"public","since":"1.0.0-rc.5","description":"Fired when the dropdown is opened or closed."},{"name":"selection-change","visibility":"public","parameters":[{"name":"items","type":"Array","description":"an array of the selected items."}],"description":"Fired when selection is changed by user interaction in <code>SingleSelect</code> and <code>MultiSelect</code> modes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.MultiComboBoxItem","basename":"MultiComboBoxItem","tagname":"ui5-mcb-item","resource":"MultiComboBoxItem.js","module":"MultiComboBoxItem","static":true,"visibility":"public","extends":"ComboBoxItem","description":"The <code>ui5-mcb-item</code> represents the item for a <code>ui5-multi-combobox</code>.","constructor":{"visibility":"public"},"properties":[{"name":"selected","visibility":"public","type":"boolean","description":"Defines the selected state of the <code>ui5-mcb-item</code>.","defaultValue":"false"},{"name":"stableDomRef","visibility":"public","since":"1.0.0-rc.11","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.MultiInput","basename":"MultiInput","tagname":"ui5-multi-input","appenddocs":"Token","resource":"MultiInput.js","module":"MultiInput","visibility":"public","since":"1.0.0-rc.9","extends":"Input","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>Select a value from the suggestion list</li> (<code>suggestion-item-select</code> event is fired) </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiInput\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"_placeholder","visibility":"protected","type":"undefined","description":"Returns the placeholder value when there are no tokens."},{"name":"showValueHelpIcon","visibility":"public","type":"boolean","description":"Determines whether a value help icon will be should in the end of the input. Pressing the icon will fire <code>value-help-trigger</code> event.","defaultValue":"false"}],"slots":[{"name":"tokens","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-multi-input</code> tokens. <br><br> Example: <br> &lt;ui5-multi-input><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-token slot=\"tokens\" text=\"Token 1\">&lt;/ui5-token><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-token slot=\"tokens\" text=\"Token 2\">&lt;/ui5-token><br> &lt;/ui5-multi-input> <br> <br>"}],"events":[{"name":"token-delete","visibility":"public","parameters":[{"name":"token","type":"HTMLElement","description":"deleted token."}],"description":"Fired when a token is about to be deleted."},{"name":"value-help-trigger","visibility":"public","description":"Fired when the value help icon is pressed and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Option","basename":"Option","tagname":"ui5-option","resource":"Option.js","module":"Option","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>.","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","since":"1.0.0-rc.12","type":"boolean","description":"Defines whether <code>ui5-option</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-option</code> is noninteractive.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous buil-in icons. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."},{"name":"selected","visibility":"public","type":"boolean","description":"Defines the selected state of the <code>ui5-option</code>.","defaultValue":"false"},{"name":"stableDomRef","visibility":"public","since":"1.0.0-rc.11","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the <code>ui5-select</code> inside an HTML Form element when this <code>ui5-option</code> is selected. For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Panel","basename":"Panel","tagname":"ui5-panel","resource":"Panel.js","module":"Panel","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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> A panel consists of a title bar with a header text or custom header. <br> The content area can contain an arbitrary set of controls. 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><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>content - Used to style the wrapper of the content</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Panel\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","type":"string","description":"Sets the accessible aria name of the <code>ui5-panel</code>.","defaultValue":"\"\""},{"name":"accessibleRole","visibility":"public","type":"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>.","defaultValue":"\"Form\""},{"name":"collapsed","visibility":"public","type":"boolean","description":"Indicates whether the <code>ui5-panel</code> is collapsed and only the header is displayed.","defaultValue":"false"},{"name":"fixed","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-panel</code> is in a fixed state that is not expandable/collapsible by user interaction.","defaultValue":"false"},{"name":"headerLevel","visibility":"public","type":"TitleLevel","description":"Defines the \"aria-level\" of <code>ui5-panel</code> heading, set by the <code>headerText</code>. <br><br> Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>.","defaultValue":"\"H2\""},{"name":"headerText","visibility":"public","type":"string","description":"This property is used to set the header text of the <code>ui5-panel</code>. 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.","defaultValue":"\"\""},{"name":"noAnimation","visibility":"public","since":"1.0.0-rc.16","type":"boolean","description":"Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Determines the content of the <code>ui5-panel</code>. The content is visible only when the <code>ui5-panel</code> is expanded."},{"name":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-panel</code> header area. <br><br> <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Popover","basename":"Popover","tagname":"ui5-popover","resource":"Popover.js","module":"Popover","visibility":"public","since":"1.0.0-rc.6","extends":"Popup","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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Popover.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"allowTargetOverlap","visibility":"public","type":"boolean","description":"Determines if there is no enough space, the <code>ui5-popover</code> can be placed over the target.","defaultValue":"false"},{"name":"headerText","visibility":"public","type":"string","description":"Defines the header text. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.","defaultValue":"\"\""},{"name":"hideBackdrop","visibility":"public","since":"1.0.0-rc.10","type":"boolean","description":"Defines whether the block layer will be shown if modal property is set to true.","defaultValue":"false"},{"name":"horizontalAlign","visibility":"public","type":"PopoverHorizontalAlign","description":"Determines the horizontal alignment of the <code>ui5-popover</code>. <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>","defaultValue":"\"Center\""},{"name":"modal","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-popover</code> should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.","defaultValue":"false"},{"name":"noArrow","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-popover</code> arrow is hidden.","defaultValue":"false"},{"name":"placementType","visibility":"public","type":"PopoverPlacementType","description":"Determines on which side the <code>ui5-popover</code> 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>","defaultValue":"\"Right\""},{"name":"verticalAlign","visibility":"public","type":"PopoverVerticalAlign","description":"Determines the vertical alignment of the <code>ui5-popover</code>. <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>","defaultValue":"\"Center\""}],"slots":[{"name":"footer","visibility":"public","type":"HTMLElement[]","description":"Defines the footer HTML Element."},{"name":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the header HTML Element."}],"methods":[{"name":"openBy","visibility":"public","parameters":[{"name":"opener","type":"HTMLElement","optional":false,"description":"the element that the popover is opened by"},{"name":"preventInitialFocus","type":"boolean","optional":false,"defaultValue":false,"description":"prevents applying the focus inside the popover"}],"description":"Opens the popover."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Popup","basename":"Popup","resource":"Popup.js","module":"Popup","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> Base class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components, it is highly recommended that you extend at least Popup in order to have consistency with other popups in terms of modal behavior and z-index management.\n\n1. The Popup class handles modality: - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not - Derivatives may call the \"blockBodyScrolling\" and \"unblockBodyScrolling\" static methods to temporarily remove scrollbars on the body - Derivatives may call the \"open\" and \"close\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n2. Provides blocking layer (relevant for modal popups only): - It is in the static area - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus: - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The Popup class automatically assigns \"z-index\" - Each time a popup is opened, it gets a higher than the previously opened popup z-index\n\n5. The template of this component exposes two inline partials you can override in derivatives: - beforeContent (upper part of the box, useful for header/title/close button) - afterContent (lower part, useful for footer/action buttons)","constructor":{"visibility":"public"},"properties":[{"name":"_ariaLabel","visibility":"protected","type":"undefined","description":"Ensures ariaLabel is never null or empty string"},{"name":"_ariaLabelledBy","visibility":"protected","type":"undefined","description":"Return the ID of an element in the shadow DOM that is going to label this popup"},{"name":"_ariaModal","visibility":"protected","type":"undefined","description":"Return the value for aria-modal for this popup"},{"name":"initialFocus","visibility":"public","type":"string","description":"Defines the ID of the HTML Element, which will get the initial focus.","defaultValue":"\"\""},{"name":"isModal","visibility":"protected","type":"undefined","description":"Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property)"},{"name":"preventFocusRestore","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines if the focus should be returned to the previously focused element, when the popup closes.","defaultValue":"false"},{"name":"shouldHideBackdrop","visibility":"protected","type":"undefined","description":"Implement this getter with relevant logic in order to hide the block layer (f.e. based on a public property)"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the content of the Popup."},{"name":"footer","module":"Dialog","visibility":"public","type":"HTMLElement[]","description":"Defines the footer HTML Element.","resource":"Dialog.js"},{"name":"header","module":"Dialog","visibility":"public","type":"HTMLElement[]","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.","resource":"Dialog.js"}],"events":[{"name":"after-close","visibility":"public","description":"Fired after the component is closed. This event does not bubble."},{"name":"after-open","visibility":"public","description":"Fired after the component is opened. This event does not bubble."},{"name":"before-close","visibility":"public","parameters":[{"name":"escPressed","type":"Boolean","description":"Indicates that <code>ESC</code> key has triggered the event."}],"description":"Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble."},{"name":"before-open","visibility":"public","description":"Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble."}],"methods":[{"name":"_addOpenedPopup","visibility":"protected","description":"Adds the popup to the \"opened popups registry\""},{"name":"_removeOpenedPopup","visibility":"protected","description":"Removes the popup from the \"opened popups registry\""},{"name":"applyFocus","visibility":"public","description":"Focuses the element denoted by <code>initialFocus</code>, if provided, or the first focusable element otherwise."},{"name":"applyInitialFocus","visibility":"protected","description":"Use this method to focus the element denoted by \"initialFocus\", if provided, or the first focusable element otherwise."},{"name":"blockBodyScrolling","visibility":"protected","static":true,"description":"Temporarily removes scrollbars from the body"},{"name":"close","visibility":"public","description":"Hides the block layer (for modal popups only)"},{"name":"hide","visibility":"protected","description":"Sets \"none\" display to the popup"},{"name":"isOpen","visibility":"public","returnValue":{"type":"boolean"},"description":"Override this method to provide custom logic for the popup's open/closed state. Maps to the \"opened\" property by default."},{"name":"open","visibility":"public","parameters":[{"name":"preventInitialFocus","type":"boolean","optional":false,"description":"prevents applying the focus inside the popup"}],"description":"Shows the block layer (for modal popups only) and sets the correct z-index for the purpose of popup stacking"},{"name":"resetFocus","visibility":"protected","description":"Returns the focus to the previously focused element"},{"name":"show","visibility":"protected","description":"Sets \"block\" display to the popup. The property can be overriden by derivatives of Popup."},{"name":"unblockBodyScrolling","visibility":"protected","static":true,"description":"Restores scrollbars on the body, if needed"}]},{"kind":"class","name":"sap.ui.webcomponents.main.ProgressIndicator","basename":"ProgressIndicator","tagname":"ui5-progress-indicator","resource":"ProgressIndicator.js","module":"ProgressIndicator","visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","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 <code>ui5-progress-indicator</code> is filled with a color.\n\n<h3>Responsive Behavior</h3> You can change the size of the Rating Indicator by changing its <code>width</code> or <code>height</code> CSS properties. <br> Example: <code>&lt;ui5-progress-indicator style=\"height: 2rem; width: 6rem;\">&lt;/ui5-progress-indicator></code>\n\nFor the <code>ui5-progress-indicator</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/ProgressIndicator.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-progress-indicator</code> is in disabled state.","defaultValue":"false"},{"name":"hideValue","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-progress-indicator</code> value is shown.","defaultValue":"false"},{"name":"value","visibility":"public","type":"Integer","description":"Specifies the numerical value in percent for the length of the <code>ui5-progress-indicator</code>.\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.","defaultValue":"0"},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-progress-indicator</code>. <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>","defaultValue":"\"None\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.RadioButton","basename":"RadioButton","tagname":"ui5-radiobutton","resource":"RadioButton.js","module":"RadioButton","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-radiobutton</code> component enables users to select a single option from a set of options. When a <code>ui5-radiobutton</code> is selected by the user, the <code>select</code> event is fired. When a <code>ui5-radiobutton</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-radiobutton</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-radiobutton</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>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-radiobutton</code> is disabled. <br><br> <b>Note:</b> A disabled <code>ui5-radiobutton</code> is completely noninteractive.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Defines the name of the <code>ui5-radiobutton</code>. 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 <code>ui5-radiobutton</code> so that it can be submitted as part of an HTML form.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-radiobutton</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-radiobutton</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"selected","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-radiobutton</code> is selected or not. <br><br> <b>Note:</b> The property value can be changed with user interaction, either by cliking/tapping on the <code>ui5-radiobutton</code>, or by using the Space or Enter key.","defaultValue":"false"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-radiobutton</code>.","defaultValue":"\"\""},{"name":"value","visibility":"public","type":"string","description":"Defines the form value of the <code>ui5-radiobutton</code>. 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>","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-radiobutton</code>. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> </ul>","defaultValue":"\"None\""},{"name":"wrap","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-radiobutton</code> text wraps when there is not enough space. <br><br> <b>Note:</b> By default, the text truncates when there is not enough space.","defaultValue":"false"}],"slots":[],"events":[{"name":"select","visibility":"public","description":"Fired when the <code>ui5-radiobutton</code> selected state changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.RangeSlider","basename":"RangeSlider","tagname":"ui5-range-slider","resource":"RangeSlider.js","module":"RangeSlider","visibility":"public","since":"1.0.0-rc.11","extends":"SliderBase","description":"Represents a numerical interval and two handles (grips) to select a sub-range within it.\n\n<h3 class=\"comment-api-title\">Overview</h3> 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 usecase 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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RangeSlider\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"endValue","visibility":"public","type":"Float","description":"Defines end point of a selection - position of a second handle on the slider. <br><br>","defaultValue":"100"},{"name":"startValue","visibility":"public","type":"Float","description":"Defines start point of a selection - position of a first handle on the slider. <br><br>","defaultValue":"0"}],"slots":[],"methods":[{"name":"focusInnerElement","visibility":"protected","description":"Manage the focus between the focusable inner elements within the component.\n\nOn initial focusin or if the whole range is affected by the user interaction set the focus on the progress selection, otherwise on one of the Range Slider handles based on the determined affected value by the user action.\n\nIf one of the handles came across the other one in result of a user action switch the focus between them to keep it visually consistent.\n\nNote: In some cases this function is going to get called twice on one user action.\n\n1. When the focus is initially set to an inner element it is done in the very beginning, of an interaction - on 'mousedown' and 'keydown' events. The focus of the host custom element is still not being received, causining an immediate focusout that we prevent by calling this function once again.\n\n2. When the focused is manually switched from one inner element to another. The focusout handler is one and the same for all focusable parts within the Range Slider and when is called it checks if it should keep the focus within the component and which part of it should get focused if that is the case."}]},{"kind":"class","name":"sap.ui.webcomponents.main.RatingIndicator","basename":"RatingIndicator","tagname":"ui5-rating-indicator","resource":"RatingIndicator.js","module":"RatingIndicator","visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","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 reccomended 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>Usage</h3>\n\nFor the <code>ui5-rating-indicator</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/RatingIndicator.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-rating-indicator</code> is disabled.\n\n<br><br> <b>Note:</b> A disabled <code>ui5-rating-indicator</code> is completely noninteractive.","defaultValue":"false"},{"name":"maxValue","visibility":"public","type":"Integer","description":"The number of displayed rating symbols","defaultValue":"5"},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-rating-indicator</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-rating-indicator</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"value","visibility":"public","type":"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>","defaultValue":"0"}],"slots":[],"events":[{"name":"change","visibility":"public","description":"The event is fired when the value changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ResponsivePopover","basename":"ResponsivePopover","tagname":"ui5-responsive-popover","resource":"ResponsivePopover.js","module":"ResponsivePopover","visibility":"public","since":"1.0.0-rc.6","extends":"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.","constructor":{"visibility":"public"},"methods":[{"name":"close","visibility":"public","description":"Closes the popover/dialog."},{"name":"open","visibility":"public","parameters":[{"name":"opener","type":"HTMLElement","optional":false,"description":"the element that the popover is opened by"},{"name":"preventInitialFocus","type":"boolean","optional":false,"defaultValue":false,"description":"prevents applying the focus inside the popup"}],"description":"Opens popover on desktop and dialog on mobile."}]},{"kind":"class","name":"sap.ui.webcomponents.main.SegmentedButton","basename":"SegmentedButton","tagname":"ui5-segmented-button","appenddocs":"SegmentedButtonItem","resource":"SegmentedButton.js","module":"SegmentedButton","visibility":"public","since":"1.0.0-rc.6","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"selectedItem","readonly":"true","visibility":"public","type":"ui5-segmented-button-item","description":"Currently selected item."}],"slots":[{"name":"default","visibility":"public","type":"sap.ui.webcomponents.main.IButton[]","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."}],"events":[{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedItem","type":"HTMLElement","description":"the pressed item."}],"description":"Fired when the selected item changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.SegmentedButtonItem","basename":"SegmentedButtonItem","tagname":"ui5-segmented-button-item","resource":"SegmentedButtonItem.js","module":"SegmentedButtonItem","static":true,"visibility":"public","extends":"ToggleButton","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>","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"undefined","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"name":"iconEnd","visibility":"public","type":"undefined","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"name":"iconSize","visibility":"public","type":"undefined","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"name":"submits","visibility":"public","type":"undefined","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Select","basename":"Select","tagname":"ui5-select","appenddocs":"Option","resource":"Select.js","module":"Select","visibility":"public","since":"0.8.0","extends":"sap.ui.webcomponents.base.UI5Element","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. If the <code>ui5-select</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<h3>Stable DOM Refs</h3>\n\nIn the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for: <ul> <li>Every <code>ui5-option</code> that you provide. Example: <code><ui5-option stable-dom-ref=\"option1\"></ui5-option></code></li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Select\";</code> <br> <code>import \"@ui5/webcomponents/dist/Option\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-select</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-select</code> is noninteractive.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-select</code> will be submitted in an HTML form. The value of the <code>ui5-select</code> 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.","defaultValue":"\"\""},{"name":"required","visibility":"public","since":"1.0.0-rc.9","type":"Boolean","description":"Defines whether the <code>ui5-select</code> is required.","defaultValue":"false"},{"name":"selectedOption","readonly":"true","visibility":"public","type":"ui5-option","description":"Currently selected option."},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-select</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-select</code> 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":"valueStateMessage","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-select</code>. <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-select</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","parameters":[{"name":"selectedOption","type":"HTMLElement","description":"the selected option."}],"description":"Fired when the selected option changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Slider","basename":"Slider","tagname":"ui5-slider","resource":"Slider.js","module":"Slider","visibility":"public","since":"1.0.0-rc.11","extends":"SliderBase","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</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 usecase 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 to the desired value</li> <li>Click/tap on the range bar to move the handle to that location</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Slider\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"value","visibility":"public","type":"Float","description":"Current value of the slider","defaultValue":"0"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.SliderBase","basename":"SliderBase","tagname":"ui5-slider","resource":"SliderBase.js","module":"SliderBase","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the slider is in disabled state.","defaultValue":"false"},{"name":"labelInterval","visibility":"public","type":"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.","defaultValue":"0"},{"name":"max","visibility":"public","type":"Float","description":"Defines the maximum value of the slider","defaultValue":"100"},{"name":"min","visibility":"public","type":"Float","description":"Defines the minimum value of the slider","defaultValue":"0"},{"name":"showTickmarks","visibility":"public","type":"boolean","description":"Enables tick marks visualization for each step. <br><br> <b>Note:</b> The step must be a positive number.","defaultValue":"false"},{"name":"showTooltip","visibility":"public","type":"boolean","description":"Enables handle tooltip displaying the current value.","defaultValue":"false"},{"name":"step","visibility":"public","type":"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.","defaultValue":"1"}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the value changes and the user has finished interacting with the slider."},{"name":"input","visibility":"public","description":"Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging."}],"methods":[{"name":"clipValue","visibility":"protected","static":true,"description":"Locks the given value between min and max boundaries based on slider properties"},{"name":"computedValueFromPageX","visibility":"protected","static":true,"description":"Computes the new value (in %) from the pageX position of the cursor. Returns the value rounded to a precision of at most 2 digits after decimal point."},{"name":"focusInnerElement","visibility":"protected","description":"Manages the focus between the component's inner elements"},{"name":"getPageXValueFromEvent","visibility":"protected","static":true,"description":"Gets pageX value from event on user interaction with the Slider"},{"name":"getSteppedValue","visibility":"protected","static":true,"description":"\"Stepify\" the raw value - calculate the new value depending on the specified step property"},{"name":"getStoredPropertyState","visibility":"protected","description":"Returns the last stored value of a property"},{"name":"getValueFromInteraction","visibility":"protected","static":true,"description":"Sets the slider value from an event"},{"name":"handleDownBase","visibility":"protected","description":"Called when the user starts interacting with the slider. After a down event on the slider root, listen for move events on window, so the slider value is updated even if the user drags the pointer outside the slider root."},{"name":"handleUpBase","visibility":"protected","description":"Called when the user finish interacting with the slider Fires an <code>change</code> event indicating a final value change, after user interaction is finished."},{"name":"isCurrentStateOutdated","visibility":"protected","description":"In order to always keep the visual UI representation and the internal state in sync, the component has a 'state storage' that is updated when the current state is changed due to a user action.\n\nCheck if the previously saved state is outdated. That would mean a property has been changed programatically because the previous state is always updated in the interaction handlers.\n\nWill return true if any of the properties is not equal to its previously stored value."},{"name":"isPropertyUpdated","visibility":"protected","description":"Check if one or more properties have been updated compared to their last saved values in the state storage."},{"name":"storePropertyState","visibility":"protected","description":"Updates the previously saved in the _stateStorage values of one or more properties."},{"name":"syncUIAndState","visibility":"protected","description":"Normalize current properties, update the previously stored state."},{"name":"updateValue","visibility":"protected","description":"Updates value property of the component that has been changed due to a user action. Fires an <code>input</code> event indicating a value change via interaction that is not yet finished."}]},{"kind":"class","name":"sap.ui.webcomponents.main.StandardListItem","basename":"StandardListItem","tagname":"ui5-li","resource":"StandardListItem.js","module":"StandardListItem","static":true,"visibility":"public","extends":"ListItem","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>.","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.15","type":"string","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.","defaultValue":"\"\""},{"name":"description","visibility":"public","since":"0.8.0","type":"string","description":"Defines the description displayed right under the item text, if such is present."},{"name":"icon","visibility":"public","type":"string","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous buil-in icons. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."},{"name":"iconEnd","visibility":"public","type":"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>.","defaultValue":"false"},{"name":"image","visibility":"public","type":"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."},{"name":"info","visibility":"public","since":"0.13.0","type":"string","description":"Defines the <code>info</code>, displayed in the end of the list item."},{"name":"infoState","visibility":"public","since":"0.13.0","type":"ValueState","description":"Defines the state of the <code>info</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Erorr\"</code>.","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-li</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.StepInput","basename":"StepInput","tagname":"ui5-step-input","resource":"StepInput.js","module":"StepInput","visibility":"public","since":"1.0.0-rc.12","extends":"UI5Element","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> <i>When to use</i> <ul> <li>To adjust amounts, quantities, or other values quickly.</li> <li>To adjust values for a specific step.</li> </ul>\n\n<i>When not to use</i> <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\nFor the <code>ui5-step-input</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/StepInput.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-step-input</code> is displayed as disabled.","defaultValue":"false"},{"name":"max","visibility":"public","type":"Float","description":"Defines a maximum value of the <code>ui5-step-input</code>."},{"name":"min","visibility":"public","type":"Float","description":"Defines a minimum value of the <code>ui5-step-input</code>."},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-step-input</code> 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 <code>ui5-step-input</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.","defaultValue":"\"\""},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint, intended to aid the user with data entry when the <code>ui5-step-input</code> 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 <code>ui5-step-input</code> appear empty - without placeholder or format pattern.","defaultValue":"undefined"},{"name":"readonly","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-step-input</code> is displayed as read-only.","defaultValue":"false"},{"name":"required","visibility":"public","type":"Boolean","description":"Defines whether the <code>ui5-step-input</code> is required.","defaultValue":"false"},{"name":"step","visibility":"public","type":"Float","description":"Defines a step of increasing/decreasing the value of the <code>ui5-step-input</code>.","defaultValue":"1"},{"name":"value","visibility":"public","type":"Float","description":"Defines a value of the <code>ui5-step-input</code>.","defaultValue":"0"},{"name":"valuePrecision","visibility":"public","type":"Integer","description":"Determines the number of digits after the decimal point of the <code>ui5-step-input</code>.","defaultValue":"0"},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-step-input</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"valueStateMessage","visibility":"public","type":"HTMLElement","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-step-input</code>. <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-step-input</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by pressing Enter or on focusout."}]},{"kind":"class","name":"sap.ui.webcomponents.main.SuggestionItem","basename":"SuggestionItem","tagname":"ui5-suggestion-item","resource":"SuggestionItem.js","module":"SuggestionItem","static":true,"visibility":"public","extends":"UI5Element","description":"The <code>ui5-suggestion-item</code> represents the suggestion item of the <code>ui5-input</code>.","constructor":{"visibility":"public"},"properties":[{"name":"description","visibility":"public","type":"string","description":"Defines the description displayed right under the item text, if such is present."},{"name":"group","visibility":"public","type":"boolean","description":"Defines the item to be displayed as a group item. <br><br> <b>Note:</b> When set, the other properties, such as <code>image</code>, <code>icon</code>, <code>description</code>, etc. will be omitted and only the <code>text</code> will be displayed.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous buil-in icons. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."},{"name":"iconEnd","visibility":"public","type":"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>.","defaultValue":"false"},{"name":"image","visibility":"public","type":"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."},{"name":"info","visibility":"public","type":"string","description":"Defines the <code>info</code>, displayed in the end of the item."},{"name":"infoState","visibility":"public","type":"ValueState","description":"Defines the state of the <code>info</code>. <br><br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code> and <code>\"Erorr\"</code>.","defaultValue":"\"None\""},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-suggestion-item</code>.","defaultValue":"\"\""},{"name":"type","visibility":"public","since":"1.0.0-rc.8","type":"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.","defaultValue":"\"Active\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Switch","basename":"Switch","tagname":"ui5-switch","resource":"Switch.js","module":"Switch","visibility":"public","since":"0.8.0","extends":"sap.ui.webcomponents.base.UI5Element","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 (&lt;ui5-switch style=\"width: 200px\">), 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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Switch\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"checked","visibility":"public","type":"boolean","description":"Defines if the <code>ui5-switch</code> is checked. <br><br> <b>Note:</b> The property can be changed with user interaction, either by cliking/tapping on the <code>ui5-switch</code>, or by pressing the <code>Enter</code> or <code>Space</code> key.","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-switch</code> is disabled. <br><br> <b>Note:</b> A disabled <code>ui5-switch</code> is noninteractive.","defaultValue":"false"},{"name":"graphical","visibility":"public","type":"boolean","description":"Defines the <code>ui5-switch</code> type. <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>.","defaultValue":"false"},{"name":"textOff","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-switch</code> when switched off. <br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).","defaultValue":"\"\""},{"name":"textOn","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-switch</code> when switched on.\n\n<br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).","defaultValue":"\"\""}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the <code>ui5-switch</code> checked state changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Tab","basename":"Tab","tagname":"ui5-tab","resource":"Tab.js","module":"Tab","static":true,"visibility":"public","extends":"UI5Element","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.","constructor":{"visibility":"public"},"properties":[{"name":"additionalText","visibility":"public","type":"string","description":"Represents the \"additionalText\" text, which is displayed in the tab filter.","defaultValue":"\"\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Enabled items can be selected.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the icon source URI to be displayed as graphical element within the <code>ui5-tab</code>. The SAP-icons font provides numerous built-in icons. See all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.","defaultValue":"\"\""},{"name":"selected","visibility":"public","type":"boolean","description":"Specifies if the <code>ui5-tab</code> is selected.","defaultValue":"false"},{"name":"semanticColor","visibility":"public","type":"SemanticColor","description":"Defines the <code>ui5-tab</code> semantic color. <br><br> The color is applied to: <ul> <li>the <code>ui5-tab</code> icon</li> <li>the <code>text</code> when <code>ui5-tab</code> overflows</li> <li>the tab selection line</li> </ul>\n\n<br><br> Available semantic colors 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 color value depends on the current theme.","defaultValue":"\"Default\""},{"name":"stableDomRef","visibility":"public","since":"1.0.0-rc.8","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."},{"name":"text","visibility":"public","type":"string","description":"The text to be displayed for the item.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the tab content."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TabContainer","basename":"TabContainer","tagname":"ui5-tabcontainer","appenddocs":"Tab TabSeparator","resource":"TabContainer.js","module":"TabContainer","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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 vertical line</li> </ul>\n\n<h3>Stable DOM Refs</h3>\n\nIn the context of <code>ui5-tabcontainer</code>, you can provide a custom stable DOM refs for: <ul> <li>Each <code>ui5-tab</code> Example: <code><ui5-tab stable-dom-ref=\"in-stock\"></ui5-tab></code></li> </ul>\n\n<h3>ES6 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>)","constructor":{"visibility":"public"},"properties":[{"name":"collapsed","visibility":"public","type":"boolean","description":"Defines whether the tab content is collapsed.","defaultValue":"false"},{"name":"fixed","visibility":"public","type":"boolean","description":"Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction.","defaultValue":"false"},{"name":"showOverflow","visibility":"public","type":"boolean","description":"Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all tab filters are displayed so that it's easier for the user to select a specific tab filter.","defaultValue":"false"},{"name":"tabLayout","visibility":"public","type":"TabLayout","description":"Defines the alignment of the <code>main text</code> and the <code>additionalText</code> of a tab.\n\n<br><br> <b>Note:</b> The <code>main text</code> and the <code>additionalText</code> would be displayed vertically by defualt, 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>","defaultValue":"\"Standard\""},{"name":"tabsPlacement","visibility":"public","since":"1.0.0-rc.7","type":"TabContainerTabsPlacement","description":"Defines the placement of the tab strip (tab buttons area) relative to the actual tabs' content. <br><br> <b>Note:</b> By default the tab strip is displayed above the tabs' content area and this is the recommended layout for most scenarios. Set to <code>Bottom</code> only when the <code>ui5-tabcontainer</code> is at the bottom of the page and you want the tab strip to act as a menu.","defaultValue":"\"Top\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","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":"overflowButton","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used."}],"events":[{"name":"tab-select","visibility":"public","parameters":[{"name":"tab","type":"HTMLElement","description":"The selected <code>tab</code>."},{"name":"tabIndex","type":"Number","description":"The selected <code>tab</code> index."}],"description":"Fired when a tab is selected."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Table","basename":"Table","tagname":"ui5-table","appenddocs":"TableColumn TableRow TableCell","resource":"Table.js","module":"Table","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>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>)","constructor":{"visibility":"public"},"properties":[{"name":"busy","visibility":"public","since":"1.0.0-rc.12","type":"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.","defaultValue":"false"},{"name":"growing","visibility":"public","since":"1.0.0-rc.12","type":"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>Limitations:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>.","defaultValue":"\"None\""},{"name":"moreSubtext","visibility":"public","since":"1.0.0-rc.11","type":"string","description":"Defines the subtext that will be displayed under the <code>moreText</code>.\n\n<br><br> <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>.","defaultValue":"\"\""},{"name":"moreText","visibility":"public","since":"1.0.0-rc.11","type":"string","description":"Defines the text that will be displayed inside the <code>More</code> 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>.","defaultValue":"\"\""},{"name":"noDataText","visibility":"public","type":"string","description":"Defines the text that will be displayed when there is no data and <code>showNoData</code> is present.","defaultValue":"\"\""},{"name":"showNoData","visibility":"public","type":"boolean","description":"Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table.","defaultValue":"false"},{"name":"stickyColumnHeader","visibility":"public","type":"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>Limitations:</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>","defaultValue":"false"}],"slots":[{"name":"columns","visibility":"public","type":"HTMLElement[]","description":"Defines the configuration for the columns of the <code>ui5-table</code>. <br><br> <b>Note:</b> Use <code>ui5-table-column</code> for the intended design."},{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-table</code> rows. <br><br> <b>Note:</b> Use <code>ui5-table-row</code> for the intended design."}],"events":[{"name":"load-more","visibility":"public","since":"1.0.0-rc.11","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>."},{"name":"popin-change","visibility":"public","since":"1.0.0-rc.6","parameters":[{"name":"poppedColumns","type":"Array","description":"popped-in columns."}],"description":"Fired when the <code>ui5-table-column</code> is shown as a pop-in instead of hiding it."},{"name":"row-click","visibility":"public","parameters":[{"name":"row","type":"HTMLElement","description":"the clicked row."}],"description":"Fired when a row is clicked."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TableCell","basename":"TableCell","tagname":"ui5-table-cell","resource":"TableCell.js","module":"TableCell","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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.","constructor":{"visibility":"public"},"properties":[],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Specifies the content of the <code>ui5-table-cell</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TableColumn","basename":"TableColumn","tagname":"ui5-table-column","resource":"TableColumn.js","module":"TableColumn","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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.","constructor":{"visibility":"public"},"properties":[{"name":"demandPopin","visibility":"public","type":"boolean","description":"According to your <code>minWidth</code> settings, the <code>ui5-table-column</code> 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.","defaultValue":"false"},{"name":"minWidth","visibility":"public","type":"number","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>40em</code> shows this column on tablet (and desktop) but hides it on mobile. <br> For further responsive design options, see <code>demandPopin</code> property.","defaultValue":"Infinity"},{"name":"popinText","visibility":"public","type":"string","description":"The text for the column when it pops in.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the content of the column header."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TableRow","basename":"TableRow","tagname":"ui5-table-row","resource":"TableRow.js","module":"TableRow","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>.","constructor":{"visibility":"public"},"properties":[],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the cells of the <code>ui5-table-row</code>. <br><br> <b>Note:</b> Use <code>ui5-table-cell</code> for the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TabSeparator","basename":"TabSeparator","tagname":"ui5-tab-separator","resource":"TabSeparator.js","module":"TabSeparator","static":true,"visibility":"public","extends":"UI5Element","description":"The <code>ui5-tab-separator</code> represents a vertical line to separate tabs inside a <code>ui5-tabcontainer</code>.","constructor":{"visibility":"public"}},{"kind":"class","name":"sap.ui.webcomponents.main.TextArea","basename":"TextArea","tagname":"ui5-textarea","resource":"TextArea.js","module":"TextArea","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-textarea</code> component provides large spaces for text entries in the form of multiple rows. It has the functionality of the <code>TextField</code> with the additional functionality for multiline texts. <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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TextArea\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Indicates whether the user can interact with the component or not. <br><br> <b>Note:</b> Disabled components cannot be focused and they are out of the tab chain.","defaultValue":"false"},{"name":"growing","visibility":"public","type":"boolean","description":"Enables the <code>ui5-textarea</code> to automatically grow and shrink dynamically with its content. <br><br> <b>Note:</b> If set to <code>true</code>, the CSS <code>height</code> property is ignored.","defaultValue":"false"},{"name":"growingMaxLines","visibility":"public","type":"number","description":"Defines the maximum number of lines that the Web Component can grow.","defaultValue":"0"},{"name":"maxlength","visibility":"public","type":"number","description":"Defines the maximum number of characters that the <code>value</code> can have.","defaultValue":"null"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-textarea</code> 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 <code>ui5-textarea</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.","defaultValue":"\"\""},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the component has no value.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-textarea</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-textarea</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"required","visibility":"public","since":"1.0.0-rc.3","type":"boolean","description":"Defines whether the <code>ui5-textarea</code> is required.","defaultValue":"false"},{"name":"rows","visibility":"public","type":"number","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>","defaultValue":"0"},{"name":"showExceededText","visibility":"public","type":"boolean","description":"Determines whether the characters exceeding the maximum allowed character count are visible in the <code>ui5-textarea</code>. <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 <code>ui5-textarea</code> displays their number.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the Web Component.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","since":"1.0.0-rc.7","type":"ValueState","description":"Defines the value state of the <code>ui5-textarea</code>. <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.","defaultValue":"\"None\""}],"slots":[{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.7","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-textarea</code>.\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 <code>ui5-textarea</code> has <code>valueState</code> of type <code>Information</code>, <code>Warning</code> or <code>Error</code>."}],"events":[{"name":"change","visibility":"public","description":"Fired when the text has changed and the focus leaves the <code>ui5-textarea</code>."},{"name":"input","visibility":"public","since":"1.0.0-rc.5","description":"Fired when the value of the <code>ui5-textarea</code> changes at each keystroke or when something is pasted."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TimePicker","basename":"TimePicker","tagname":"ui5-time-picker","resource":"TimePicker.js","module":"TimePicker","static":true,"visibility":"public","since":"1.0.0-rc.6","extends":"TimePickerBase","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-time-picker</code> component provides an input field with assigned sliders which opens 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 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 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\" class=\"api-table-content-cell-link\">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>","constructor":{"visibility":"public"},"properties":[{"name":"dateValue","readonly":"true","visibility":"public","type":"Date","description":"Currently selected date represented as JavaScript Date instance"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.TimePickerBase","basename":"TimePickerBase","resource":"TimePickerBase.js","module":"TimePickerBase","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","constructor":{"visibility":"public"},"properties":[{"name":"_formatPattern","visibility":"protected","type":"undefined"},{"name":"_placeholder","visibility":"protected","type":"undefined"},{"name":"disabled","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-time-picker</code> is displayed as disabled.","defaultValue":"false"},{"name":"formatPattern","module":"TimePicker","visibility":"public","type":"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)","defaultValue":"\"\"","resource":"TimePicker.js"},{"name":"openIconName","visibility":"protected","type":"undefined"},{"name":"placeholder","module":"TimePicker","visibility":"public","type":"string","description":"Defines a short hint, intended to aid the user with data entry when the <code>ui5-time-picker</code> 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 <code>ui5-time-picker</code> appear empty - without placeholder or format pattern.","defaultValue":"undefined","resource":"TimePicker.js"},{"name":"readonly","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-time-picker</code> is displayed as readonly.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines a formatted time value.","defaultValue":"undefined"},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-time-picker</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.8","type":"HTMLElement","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-time-picker</code>. <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-time-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by clicking the \"OK\" button or when the text in the input field has changed and the focus leaves the input field."},{"name":"input","visibility":"public","description":"Fired when the value of the <code>ui5-time-picker</code> is changed at each key stroke."}],"methods":[{"name":"closePicker","visibility":"public","description":"Closes the picker"},{"name":"formatValue","visibility":"public","parameters":[{"name":"oDate","type":"object","optional":false,"description":"A Java Script date object to be formatted as string"}],"description":"Formats a Java Script date object into a string representing a locale date and time according to the <code>formatPattern</code> property of the TimePicker instance"},{"name":"isOpen","visibility":"public","description":"Checks if a value is valid against the current date format of the TimePicker"},{"name":"isValid","visibility":"public","parameters":[{"name":"value","type":"string","optional":false,"description":"The value to be tested against the current date format"}],"description":"Checks if a value is valid against the current format patternt of the TimePicker.\n\n<br><br> <b>Note:</b> an empty string is considered as valid value."},{"name":"openPicker","visibility":"public","description":"Opens the picker."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Title","basename":"Title","tagname":"ui5-title","resource":"Title.js","module":"Title","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"level","visibility":"public","type":"TitleLevel","description":"Defines the <code>ui5-title</code> level. Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>.","defaultValue":"\"H2\""},{"name":"wrap","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-title</code> would wrap.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-title</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Toast","basename":"Toast","tagname":"ui5-toast","resource":"Toast.js","module":"Toast","static":true,"visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"duration","visibility":"public","type":"Integer","description":"Defines the duration in milliseconds for which <code>ui5-toast</code> 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.","defaultValue":"3000"},{"name":"placement","visibility":"public","type":"ToastPlacement","description":"Defines the placement of the <code>ui5-toast</code> web 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>","defaultValue":"\"BottomCenter\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-toast</code> web component. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}],"methods":[{"name":"show","visibility":"public","description":"Shows the <code>ui5-toast</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ToggleButton","basename":"ToggleButton","tagname":"ui5-togglebutton","resource":"ToggleButton.js","module":"ToggleButton","static":true,"visibility":"public","extends":"Button","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-togglebutton</code> component is an enhanced <code>ui5-button</code> that can be toggled between pressed and normal states. Users can use the <code>ui5-togglebutton</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-togglebutton</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-togglebutton</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ToggleButton\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"pressed","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-togglebutton</code> is displayed as pressed.","defaultValue":"false"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Token","basename":"Token","tagname":"ui5-token","resource":"Token.js","module":"Token","visibility":"public","since":"1.0.0-rc.9","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-token</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-token</code> can not be deleted or selected, but still provides visual feedback upon user interaction."},{"name":"selected","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-token</code> is selected or not."},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the token.","defaultValue":"\"\""}],"slots":[{"name":"closeIcon","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","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>"}],"events":[{"name":"select","visibility":"public","description":"Fired when the a <code>ui5-token</code> is selected by user interaction with mouse or clicking space."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Tree","basename":"Tree","tagname":"ui5-tree","appenddocs":"TreeItem","resource":"Tree.js","module":"Tree","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","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>Keyboard Handling</h3> <code>ui5-tree</code> provides advanced keyboard handling. You can use the up/down arrow keys to navigate to the previous/next item in the list, representing the tree, regardless of nesting, but also the left/right arrow keys to drill down and go up the tree. If you press the right arrow on a tree node, it will expand, if not expanded. If you press the right arrow key once more, the first child of this node will be selected. If you press the left arrow on a tree node, it will collapse, if expanded. If you press the left arrow key once more, the parent node of this tree node will be selected.\n\n<h3>ES6 Module Import</h3> <code>import @ui5/webcomponents/dist/Tree.js\";</code> <br> <code>import @ui5/webcomponents/dist/TreeItem.js\";</code> (for its respective item element)","constructor":{"visibility":"public"},"properties":[{"name":"_minimal","visibility":"protected","since":"1.0.0-rc.8","type":"undefined","description":"Represents the tree in a very minimal state - icons only with no text and no toggle buttons"},{"name":"_toggleButtonEnd","visibility":"protected","since":"1.0.0-rc.8","type":"undefined","description":"Shows the toggle button at the end, rather than at the beginning of the items"},{"name":"footerText","visibility":"public","type":"string","description":"Defines the <code>ui5-tree</code> footer text.","defaultValue":"\"\""},{"name":"headerText","visibility":"public","type":"string","description":"Defines the <code>ui5-tree</code> header text. <br><br> <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.","defaultValue":"\"\""},{"name":"mode","visibility":"public","type":"ListMode","description":"Defines the mode of the <code>ui5-tree</code>. 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. <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>.","defaultValue":"\"None\""},{"name":"noDataText","visibility":"public","type":"string","description":"Defines the text that is displayed when the <code>ui5-tree</code> contains no items.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-tree</code>. 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":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-tree</code> header. <br><br> <b>Note:</b> When the <code>header</code> slot is set, the <code>headerText</code> property is ignored."}],"events":[{"name":"item-click","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the clicked item."}],"description":"Fired when a tree item is activated."},{"name":"item-delete","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the deleted item."}],"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 <code>ui5-tree</code> <code>mode</code> property is set to <code>Delete</code>."},{"name":"item-toggle","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the toggled item."}],"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."},{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedItems","type":"Array","description":"An array of the selected items."},{"name":"previouslySelectedItems","type":"Array","description":"An array of the previously selected items."}],"description":"Fired when selection is changed by user interaction in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes."}],"methods":[{"name":"_getListItemForTreeItem","visibility":"protected","parameters":[{"name":"item","type":"undefined","optional":false,"description":"The tree item"}],"description":"Returns the corresponding list item for a given tree item"},{"name":"walk","visibility":"public","parameters":[{"name":"callback","type":"function","optional":false,"description":"function to execute on each node of the tree with 2 arguments: the node and the level"}],"description":"Perform Depth-First-Search walk on the tree and run a callback on each node"}]},{"kind":"class","name":"sap.ui.webcomponents.main.TreeItem","basename":"TreeItem","tagname":"ui5-tree-item","resource":"TreeItem.js","module":"TreeItem","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> 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>Usage</h3> <code>ui5-tree-item</code> is an abstract element, representing a node in a <code>ui5-tree</code>. The tree itself is rendered as a list, and each <code>ui5-tree-item</code> is represented by a list item(<code>ui5-li-tree</code>) in that list. Therefore, you should only use <code>ui5-tree-item</code> directly in your apps. The <code>ui5-li-tree</code> list item is internal for the list, and not intended for public use.\n\n<h3>ES6 Module Import</h3> <code>import @ui5/webcomponents/dist/TreeItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"expanded","visibility":"public","type":"boolean","description":"Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.","defaultValue":"false"},{"name":"hasChildren","visibility":"public","type":"boolean","description":"Defines whether the tree node has children, even if currently no other tree nodes are slotted inside. <br> <i>Note:</i> This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons. Set this to <code>true</code> for nodes you intend to load lazily, when the user clicks the expand button. It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"String","description":"If set, an icon will be displayed before the text, representing the tree item.","defaultValue":"\"\""},{"name":"info","visibility":"public","since":"1.0.0-rc.12","type":"string","description":"Defines the <code>info</code>, displayed in the end of the tree item."},{"name":"infoState","visibility":"public","since":"1.0.0-rc.12","type":"ValueState","description":"Defines the state of the <code>info</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Erorr\"</code>.","defaultValue":"\"None\""},{"name":"selected","visibility":"public","type":"boolean","description":"Defines whether the tree node is selected by the user. Only has effect if the <code>ui5-tree</code> is in one of the following modes: in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code>.","defaultValue":"false"},{"name":"text","visibility":"public","type":"String","description":"Defines the text of the tree item.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of this <code>ui5-tree-item</code>."}],"methods":[{"name":"toggle","visibility":"public","description":"Call this method to manually switch the <code>expanded</code> state of a tree item."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TreeListItem","basename":"TreeListItem","tagname":"ui5-li-tree","resource":"TreeListItem.js","module":"TreeListItem","visibility":"public","since":"1.0.0-rc.8","extends":"ListItem","description":"The <code>ui5-li-tree</code> represents a node in a tree structure, shown as a <code>ui5-list</code>. <br> <i>Note:</i> Do not use <code>ui5-li-tree</code> directly in your apps. Use <code>ui5-tree-item</code> instead, as it can be nested inside a <code>ui5-tree</code>. On the other hand, <code>ui5-li-tree</code> can only be slotted inside a <code>ui5-list</code>, being a list item. It may be useful if you want to build a custom tree component, for example.","constructor":{"visibility":"public"},"properties":[{"name":"_minimal","visibility":"protected","since":"1.0.0-rc.8","type":"undefined","description":"Defines whether the item shows minimal details - only icon (no text or toggle button)"},{"name":"_toggleButtonEnd","visibility":"protected","since":"1.0.0-rc.8","type":"undefined","description":"Defines whether the toggle button is shown at the end, rather than at the beginning of the item"},{"name":"expanded","visibility":"public","type":"boolean","description":"Defines whether the tree list item will show a collapse or expand icon inside its toggle button.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"String","description":"If set, an icon will be displayed before the text of the tree list item.","defaultValue":"\"\""},{"name":"info","visibility":"public","since":"1.0.0-rc.12","type":"string","description":"Defines the <code>info</code>, displayed in the end of the tree item."},{"name":"infoState","visibility":"public","since":"1.0.0-rc.12","type":"ValueState","description":"Defines the state of the <code>info</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Erorr\"</code>.","defaultValue":"\"None\""},{"name":"level","visibility":"public","type":"Integer","description":"Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.","defaultValue":"1"},{"name":"showToggleButton","visibility":"public","type":"boolean","description":"Defines whether the tree list item should display an expand/collapse button.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-li-tree</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}],"events":[{"name":"step-in","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the item on which right arrow was pressed."}],"description":"Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node."},{"name":"step-out","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the item on which left arrow was pressed."}],"description":"Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node."},{"name":"toggle","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the toggled item."}],"description":"Fired when the user interacts with the expand/collapse button of the tree list item."}]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarBackgroundColor","basename":"AvatarBackgroundColor","resource":"types/AvatarBackgroundColor.js","module":"types/AvatarBackgroundColor","static":true,"visibility":"public","description":"Different types of AvatarBackgroundColor.","constructor":{"visibility":"public"},"properties":[{"name":"Accent1","visibility":"public","type":"Accent1"},{"name":"Accent10","visibility":"public","type":"Accent10"},{"name":"Accent2","visibility":"public","type":"Accent2"},{"name":"Accent3","visibility":"public","type":"Accent3"},{"name":"Accent4","visibility":"public","type":"Accent4"},{"name":"Accent5","visibility":"public","type":"Accent5"},{"name":"Accent6","visibility":"public","type":"Accent6"},{"name":"Accent7","visibility":"public","type":"Accent7"},{"name":"Accent8","visibility":"public","type":"Accent8"},{"name":"Accent9","visibility":"public","type":"Accent9"},{"name":"Placeholder","visibility":"public","type":"Placeholder"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarFitType","basename":"AvatarFitType","resource":"types/AvatarFitType.js","module":"types/AvatarFitType","static":true,"visibility":"public","description":"Different types of AvatarFitType.","constructor":{"visibility":"public"},"properties":[{"name":"Contain","visibility":"public","type":"Contain"},{"name":"Cover","visibility":"public","type":"Cover"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarGroupType","basename":"AvatarGroupType","resource":"types/AvatarGroupType.js","module":"types/AvatarGroupType","static":true,"visibility":"public","description":"Different types of AvatarGroupType.","constructor":{"visibility":"public"},"properties":[{"name":"Group","visibility":"public","type":"Group","description":"The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area."},{"name":"Individual","visibility":"public","type":"Individual","description":"The avatars are displayed side-by-side and each avatar has its own click/tap area."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarShape","basename":"AvatarShape","resource":"types/AvatarShape.js","module":"types/AvatarShape","static":true,"visibility":"public","description":"Different types of AvatarShape.","constructor":{"visibility":"public"},"properties":[{"name":"Circle","visibility":"public","type":"Circle","description":"Circular shape."},{"name":"Square","visibility":"public","type":"Square","description":"Square shape."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarSize","basename":"AvatarSize","resource":"types/AvatarSize.js","module":"types/AvatarSize","static":true,"visibility":"public","description":"Different types of AvatarSize.","constructor":{"visibility":"public"},"properties":[{"name":"L","visibility":"public","type":"L","description":"component size - 5rem font size - 2.5rem"},{"name":"M","visibility":"public","type":"M","description":"component size - 4rem font size - 2rem"},{"name":"S","visibility":"public","type":"S","description":"component size - 3rem font size - 1.5rem"},{"name":"XL","visibility":"public","type":"XL","description":"component size - 7rem font size - 3rem"},{"name":"XS","visibility":"public","type":"XS","description":"component size - 2rem font size - 1rem"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.BusyIndicatorSize","basename":"BusyIndicatorSize","resource":"types/BusyIndicatorSize.js","module":"types/BusyIndicatorSize","static":true,"visibility":"public","description":"Different types of BusyIndicator.","constructor":{"visibility":"public"},"properties":[{"name":"Large","visibility":"public","type":"Large","description":"large size"},{"name":"Medium","visibility":"public","type":"Medium","description":"medium size"},{"name":"Small","visibility":"public","type":"Small","description":"small size"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ButtonDesign","basename":"ButtonDesign","resource":"types/ButtonDesign.js","module":"types/ButtonDesign","static":true,"visibility":"public","description":"Different types of Button.","constructor":{"visibility":"public"},"properties":[{"name":"Default","visibility":"public","type":"Default","description":"default type (no special styling)"},{"name":"Emphasized","visibility":"public","type":"Emphasized","description":"emphasized type"},{"name":"Negative","visibility":"public","type":"Negative","description":"reject style (red button)"},{"name":"Positive","visibility":"public","type":"Positive","description":"accept type (green button)"},{"name":"Transparent","visibility":"public","type":"Transparent","description":"transparent type"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.CarouselArrowsPlacement","basename":"CarouselArrowsPlacement","resource":"types/CarouselArrowsPlacement.js","module":"types/CarouselArrowsPlacement","static":true,"visibility":"public","description":"Different types of Arrow Placement for <code>ui5-carousel</code>.","constructor":{"visibility":"public"},"properties":[{"name":"Content","visibility":"public","type":"Default","description":"Carousel arrows are placed on the sides of the current Carousel page."},{"name":"Navigation","visibility":"public","type":"Positive","description":"Carousel arrows are placed on the sides of the page indicator of the Carousel."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.GrowingMode","basename":"GrowingMode","resource":"types/GrowingMode.js","module":"types/GrowingMode","static":true,"visibility":"public","description":"Defines the growing mode of the component.","constructor":{"visibility":"public"},"properties":[{"name":"Button","visibility":"public","type":"Button","description":"Component's <code>load-more</code> is fired upon pressing a \"More\" button. at the bottom."},{"name":"None","visibility":"public","type":"None","description":"Component's growing is not enabled."},{"name":"Scroll","visibility":"public","type":"Scroll","description":"Component's <code>load-more</code> is fired upon scroll."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.InputType","basename":"InputType","resource":"types/InputType.js","module":"types/InputType","static":true,"visibility":"public","description":"Defines input types","constructor":{"visibility":"public"},"properties":[{"name":"Email","visibility":"public","type":"Email","description":"The <ui5-input type=\"email\"></ui5-input> is used for input fields that must contain an e-mail address."},{"name":"Number","visibility":"public","type":"Number","description":"The <ui5-input type=\"number\"></ui5-input> defines a numeric input field."},{"name":"Password","visibility":"public","type":"Password","description":"<ui5-input type=\"password\"></ui5-input> defines a password field."},{"name":"Tel","visibility":"public","type":"Tel","description":"The <ui5-input type=\"url\"></ui5-input> is used for input fields that should contain a telephone number."},{"name":"Text","visibility":"public","type":"Text","description":"<ui5-input type=\"text\"></ui5-input> defines a one-line text input field:"},{"name":"URL","visibility":"public","type":"URL","description":"The <i5-input type=\"url\"></ui5-input> is used for input fields that should contain a URL address."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.LinkDesign","basename":"LinkDesign","resource":"types/LinkDesign.js","module":"types/LinkDesign","static":true,"visibility":"public","description":"Different types of Button.","constructor":{"visibility":"public"},"properties":[{"name":"Default","visibility":"public","type":"Default","description":"default type (no special styling)"},{"name":"Emphasized","visibility":"public","type":"Emphasized","description":"emphasized type"},{"name":"Subtle","visibility":"public","type":"Subtle","description":"subtle type (appears as regular text, rather than a link)"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ListGrowingMode","basename":"ListGrowingMode","resource":"types/ListGrowingMode.js","module":"types/ListGrowingMode","static":true,"visibility":"public","description":"Defines the growing mode, used in the <code>ui5-List</code>.","constructor":{"visibility":"public"}},{"kind":"class","name":"sap.ui.webcomponents.main.types.ListItemType","basename":"ListItemType","resource":"types/ListItemType.js","module":"types/ListItemType","static":true,"visibility":"public","description":"Different types of ListItem.","constructor":{"visibility":"public"},"properties":[{"name":"Active","visibility":"public","type":"Active","description":"Indicates that the item is clickable via active feedback when item is pressed."},{"name":"Detail","visibility":"public","type":"Detail","description":"Enables detail button of the list item that fires detail-click event."},{"name":"Inactive","visibility":"public","type":"Inactive","description":"Indicates the list item does not have any active feedback when item is pressed."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ListMode","basename":"ListMode","resource":"types/ListMode.js","module":"types/ListMode","static":true,"visibility":"public","description":"Defines the type of <code>ui5-list</code>.","constructor":{"visibility":"public"},"properties":[{"name":"Delete","visibility":"public","type":"Delete","description":"Delete mode (only one list item can be deleted via provided delete button)"},{"name":"MultiSelect","visibility":"public","type":"MultiSelect","description":"Multi selection mode (more than one list item can be selected)."},{"name":"None","visibility":"public","type":"None","description":"Default mode (no selection)."},{"name":"SingleSelect","visibility":"public","type":"SingleSelect","description":"Right-positioned single selection mode (only one list item can be selected)."},{"name":"SingleSelectAuto","visibility":"public","type":"SingleSelectAuto","description":"Selected item is highlighted and selection is changed upon arrow navigation (only one list item can be selected - this is always the focused item)."},{"name":"SingleSelectBegin","visibility":"public","type":"SingleSelectBegin","description":"Left-positioned single selection mode (only one list item can be selected)."},{"name":"SingleSelectEnd","visibility":"public","type":"SingleSelectEnd","description":"Selected item is highlighted but no selection element is visible (only one list item can be selected)."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ListSeparators","basename":"ListSeparators","resource":"types/ListSeparators.js","module":"types/ListSeparators","static":true,"visibility":"public","description":"Defines which separator style will be applied for the list items.","constructor":{"visibility":"public"},"properties":[{"name":"All","visibility":"public","type":"All","description":"Separators between the items including the last and the first one."},{"name":"Inner","visibility":"public","type":"Inner","description":"Separators between the items. <b>Note:</b> This enumeration depends on the theme."},{"name":"None","visibility":"public","type":"None","description":"No item separators."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.MessageStripType","basename":"MessageStripType","resource":"types/MessageStripType.js","module":"types/MessageStripType","static":true,"visibility":"public","description":"Defines different types of MessageStrip.","constructor":{"visibility":"public"},"properties":[{"name":"Information","visibility":"public","type":"Information","description":"Message should be just an information"},{"name":"Negative","visibility":"public","type":"Negative","description":"Message is an error"},{"name":"Positive","visibility":"public","type":"Positive","description":"Message is a success message"},{"name":"Warning","visibility":"public","type":"Warning","description":"Message is a warning"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.PanelAccessibleRole","basename":"PanelAccessibleRole","resource":"types/PanelAccessibleRole.js","module":"types/PanelAccessibleRole","static":true,"visibility":"public","description":"Available Panel Accessible Landmark Roles.","constructor":{"visibility":"public"},"properties":[{"name":"Complementary","visibility":"public","type":"Complementary","description":"Represents the ARIA role <code>complementary</code>. A section of the page, designed to be complementary to the main content at a similar level in the DOM hierarchy."},{"name":"Form","visibility":"public","type":"Form","description":"Represents the ARIA role <code>Form</code>. A landmark region that contains a collection of items and objects that, as a whole, create a form."},{"name":"Region","visibility":"public","type":"Region","description":"Represents the ARIA role <code>Region</code>. A section of a page, that is important enough to be included in a page summary or table of contents."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.PopoverHorizontalAlign","basename":"PopoverHorizontalAlign","resource":"types/PopoverHorizontalAlign.js","module":"types/PopoverHorizontalAlign","static":true,"visibility":"public","description":"Defines the horizontal alignment of <code>ui5-popover</code>","constructor":{"visibility":"public"},"properties":[{"name":"Center","visibility":"public","type":"Center","description":"Popover is centered"},{"name":"Left","visibility":"public","type":"Left","description":"Popover opens on the left side of the target"},{"name":"Right","visibility":"public","type":"Right","description":"Popover opens on the right side of the target"},{"name":"Stretch","visibility":"public","type":"Stretch","description":"Popover is stretched"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.PopoverPlacementType","basename":"PopoverPlacementType","resource":"types/PopoverPlacementType.js","module":"types/PopoverPlacementType","static":true,"visibility":"public","description":"Types for the placement of Popover control.","constructor":{"visibility":"public"},"properties":[{"name":"Bottom","visibility":"public","type":"Bottom","description":"Popover will be placed at the bottom of the reference element."},{"name":"Left","visibility":"public","type":"Left","description":"Popover will be placed at the left side of the reference element."},{"name":"Right","visibility":"public","type":"Right","description":"Popover will be placed at the right side of the reference element."},{"name":"Top","visibility":"public","type":"Bottom","description":"Popover will be placed at the top of the reference element."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.PopoverVerticalAlign","basename":"PopoverVerticalAlign","resource":"types/PopoverVerticalAlign.js","module":"types/PopoverVerticalAlign","static":true,"visibility":"public","description":"Types for the placement of message Popover control.","constructor":{"visibility":"public"},"properties":[{"name":"Bottom","visibility":"public","type":"Bottom","description":"Popover will be placed at the bottom of the reference control."},{"name":"Center","visibility":"public","type":"Center"},{"name":"Stretch","visibility":"public","type":"Stretch","description":"Popover will be streched"},{"name":"Top","visibility":"public","type":"Top","description":"Popover will be placed at the top of the reference control."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.Priority","basename":"Priority","resource":"types/Priority.js","module":"types/Priority","static":true,"visibility":"public","description":"Different types of Priority.","constructor":{"visibility":"public"},"properties":[{"name":"High","visibility":"public","type":"High","description":"High priority."},{"name":"Low","visibility":"public","type":"Low","description":"Low priority."},{"name":"Medium","visibility":"public","type":"Medium","description":"Medium priority."},{"name":"None","visibility":"public","type":"None","description":"Default, none priority."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.SemanticColor","basename":"SemanticColor","resource":"types/SemanticColor.js","module":"types/SemanticColor","static":true,"visibility":"public","description":"Defines the semantic color","constructor":{"visibility":"public"},"properties":[{"name":"Critical","visibility":"public","type":"Critical","description":"Critical color"},{"name":"Default","visibility":"public","type":"Default","description":"Default color (brand color)"},{"name":"Negative","visibility":"public","type":"Negative","description":"Negative color"},{"name":"Neutral","visibility":"public","type":"Neutral","description":"Neutral color."},{"name":"Positive","visibility":"public","type":"Positive","description":"Positive color"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.TabContainerTabsPlacement","basename":"TabContainerTabsPlacement","resource":"types/TabContainerTabsPlacement.js","module":"types/TabContainerTabsPlacement","static":true,"visibility":"public","description":"Different options for the position of the tab strip relative to the tab content area.","constructor":{"visibility":"public"},"properties":[{"name":"Bottom","visibility":"public","type":"Bottom","description":"The tab strip is displayed below the tab content"},{"name":"Top","visibility":"public","type":"Top","description":"The tab strip is displayed above the tab content (Default)"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.TabLayout","basename":"TabLayout","resource":"types/TabLayout.js","module":"types/TabLayout","static":true,"visibility":"public","description":"Different types of Tab layouts.","constructor":{"visibility":"public"},"properties":[{"name":"Inline","visibility":"public","type":"Inline","description":"Inline type, the tab <code>main text</code> and <code>additionalText</code> are displayed horizotally."},{"name":"Standard","visibility":"public","type":"Standard","description":"Standard type, the tab <code>main text</code> and <code>additionalText</code> are displayed vertically."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.TableGrowingMode","basename":"TableGrowingMode","resource":"types/TableGrowingMode.js","module":"types/TableGrowingMode","static":true,"visibility":"public","description":"Defines the growing mode, used in the <code>ui5-table</code>.","constructor":{"visibility":"public"}},{"kind":"class","name":"sap.ui.webcomponents.main.types.TitleLevel","basename":"TitleLevel","resource":"types/TitleLevel.js","module":"types/TitleLevel","static":true,"visibility":"public","description":"Defines the <code>ui5-title</code> level","constructor":{"visibility":"public"},"properties":[{"name":"H1","visibility":"public","type":"H1","description":"Renders <code>h1</code> tag."},{"name":"H2","visibility":"public","type":"H2","description":"Renders <code>h2</code> tag."},{"name":"H3","visibility":"public","type":"H3","description":"Renders <code>h3</code> tag."},{"name":"H4","visibility":"public","type":"H4","description":"Renders <code>h4</code> tag."},{"name":"H5","visibility":"public","type":"H5","description":"Renders <code>h5</code> tag."},{"name":"H6","visibility":"public","type":"H6","description":"Renders <code>h6</code> tag."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ToastPlacement","basename":"ToastPlacement","resource":"types/ToastPlacement.js","module":"types/ToastPlacement","static":true,"visibility":"public","description":"Defines where the <code>ui5-toast</code> will be placed.","constructor":{"visibility":"public"},"properties":[{"name":"BottomCenter","visibility":"public","type":"BottomCenter","description":"<code>ui5-toast</code> is placed at the <code>BottomCenter</code> position of its container. Default placement (no selection)"},{"name":"BottomEnd","visibility":"public","type":"BottomEnd","description":"<code>ui5-toast</code> is placed at the <code>BottomEnd</code> position of its container."},{"name":"BottomStart","visibility":"public","type":"BottomStart","description":"<code>ui5-toast</code> is placed at the <code>BottomStart</code> position of its container."},{"name":"MiddleCenter","visibility":"public","type":"MiddleCenter","description":"<code>ui5-toast</code> is placed at the <code>MiddleCenter</code> position of its container."},{"name":"MiddleEnd","visibility":"public","type":"MiddleEnd","description":"<code>ui5-toast</code> is placed at the <code>MiddleEnd</code> position of its container."},{"name":"MiddleStart","visibility":"public","type":"MiddleStart","description":"<code>ui5-toast</code> is placed at the <code>MiddleStart</code> position of its container."},{"name":"TopCenter","visibility":"public","type":"TopCenter","description":"<code>ui5-toast</code> is placed at the <code>TopCenter</code> position of its container."},{"name":"TopEnd","visibility":"public","type":"TopEnd","description":"<code>ui5-toast</code> is placed at the <code>TopEnd</code> position of its container."},{"name":"TopStart","visibility":"public","type":"TopStart","description":"<code>ui5-toast</code> is placed at the <code>TopStart</code> position of its container."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.WheelSlider","basename":"WheelSlider","tagname":"ui5-wheelslider","resource":"WheelSlider.js","module":"WheelSlider","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>ui5-wheelslider</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/WheelSlider.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"cyclic","visibility":"public","type":"boolean","description":"Indicates if the wheelslider has a cyclic behaviour.","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-wheelslider</code> is disabled (default is set to <code>false</code>). A disabled <code>ui5-wheelslider</code> can't be pressed or focused, and it is not in the tab chain.","defaultValue":"false"},{"name":"expanded","visibility":"public","type":"boolean","description":"Indicates if the wheelslider is expanded.","defaultValue":"false"},{"name":"label","visibility":"public","type":"string","description":"Defines the label of the wheelslider.","defaultValue":"\"\""},{"name":"value","visibility":"public","type":"string","description":"Defines the currently selected value","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.YearPicker","basename":"YearPicker","tagname":"ui5-yearpicker","resource":"YearPicker.js","module":"YearPicker","static":true,"visibility":"public","extends":"CalendarPart","description":"Displays years which can be selected.","constructor":{"visibility":"public"},"properties":[{"name":"selectedDates","visibility":"public","type":"Array","description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the user selects a year (space/enter/click)."},{"name":"navigate","visibility":"public","since":"1.0.0-rc.9","description":"Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse."}],"methods":[{"name":"_hasNextPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_hasPreviousPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_showNextPage","visibility":"protected","description":"Called by Calendar.js User pressed the \">\" button in the calendar header (same as PageDown)"},{"name":"_showPreviousPage","visibility":"protected","description":"Called by Calendar.js User pressed the \"<\" button in the calendar header (same as PageUp)"}]}]}
+{"$schema-ref":"http://schemas.sap.com/sapui5/designtime/api.json/1.0","version":"1.62","symbols":[{"kind":"class","name":"sap.ui.webcomponents.main.Avatar","basename":"Avatar","tagname":"ui5-avatar","resource":"Avatar.js","module":"Avatar","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nAn image-like control 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<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Avatar.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.7","type":"string","description":"Defines the text alternative of the <code>ui5-avatar</code>. If not provided a default text alternative will be set, if present.","defaultValue":"\"\""},{"name":"backgroundColor","visibility":"public","type":"AvatarBackgroundColor","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>","defaultValue":"\"Accent6\""},{"name":"icon","visibility":"public","type":"string","description":"Defines the name of the UI5 Icon, that would be displayed. <br> <b>Note:</b> If <code>image</code> is set, the property would 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-src=\"employee\"></pre>\n\nSee all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.","defaultValue":"\"\""},{"name":"image","visibility":"public","type":"string","description":"Defines the source path to the desired image.","defaultValue":"\"\""},{"name":"imageFitType","visibility":"public","type":"AvatarFitType","description":"Defines the fit type of the desired image. <br><br> Available options are: <ul> <li><code>Cover</code></li> <li><code>Contain</code></li> <ul>","defaultValue":"\"Cover\""},{"name":"initials","visibility":"public","type":"string","description":"Defines the displayed initials. <br> Up to two Latin letters can be displayed as initials in a <code>ui5-avatar</code>.","defaultValue":"\"\""},{"name":"interactive","visibility":"public","type":"boolean","description":"Defines if the avatar is interactive (focusable and pressable)","defaultValue":"false"},{"name":"shape","visibility":"public","type":"AvatarShape","description":"Defines the shape of the <code>ui5-avatar</code>. <br><br> Available options are: <ul> <li><code>Circle</code></li> <li><code>Square</code></li> <ul>","defaultValue":"\"Circle\""},{"name":"size","visibility":"public","type":"AvatarSize","description":"Defines predefined size of the <code>ui5-avatar</code>. <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>","defaultValue":"\"S\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.AvatarGroup","basename":"AvatarGroup","tagname":"ui5-avatar-group","resource":"AvatarGroup.js","module":"AvatarGroup","visibility":"public","since":"1.0.0-rc.11","extends":"UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"avatarSize","visibility":"public","type":"AvatarSize","description":"Defines predefined size of the <code>ui5-avatar</code>. <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>","defaultValue":"\"S\""},{"name":"colorScheme","readonly":"true","visibility":"public","type":"Array","description":"Returns an array containing the <code>AvatarBackgroundColor</code> values that correspond to the avatars in the <code>items</code> array.","defaultValue":"[]"},{"name":"hiddenItems","readonly":"true","visibility":"public","type":"Array","description":"Returns an array containing the ui5-avatar instances that are currently not displayed due to lack of space.","defaultValue":"[]"},{"name":"type","visibility":"public","type":"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>","defaultValue":"\"Group\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-avatar-group</code>. 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":"overflowButton","visibility":"public","since":"1.0.0-rc.13","type":"HTMLElement","description":"Defines the overflow button of <code>ui5-avatar-group</code>. <b>Note:</b> We recommend using the <code>ui5-button</code> component. <br><br> <b>Note:</b> If this slot is not used, the <code>ui5-avatar-group</code> will display the built-in overflow button."}],"events":[{"name":"click","visibility":"public","since":"1.0.0-rc.11","parameters":[{"name":"targetRef","type":"HTMLElement","description":"The DOM ref of the clicked item."},{"name":"overflowButtonClicked","type":"boolean","description":"indicates if the overflow button is clicked"}],"description":"Fired when the <code>ui5-avatar-group</code> is activated either with a click/tap or by using the Enter or Space key."},{"name":"overflow","visibility":"public","since":"1.0.0-rc.13","description":"Fired when the count of visible <code>ui5-avatar</code> elements in the <code>ui5-avatar-group</code> has changed"}]},{"kind":"class","name":"sap.ui.webcomponents.main.Badge","basename":"Badge","tagname":"ui5-badge","resource":"Badge.js","module":"Badge","visibility":"public","since":"0.12.0","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"colorScheme","visibility":"public","type":"string","description":"Defines the color scheme of the <code>ui5-badge</code>. 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.","defaultValue":"\"1\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-badge</code>. <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."},{"name":"icon","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.BusyIndicator","basename":"BusyIndicator","tagname":"ui5-busyindicator","resource":"BusyIndicator.js","module":"BusyIndicator","visibility":"public","since":"0.12.0","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-busyindicator</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.\n\n<h3>Usage</h3> For the <code>ui5-busyindicator</code> you can define the size of the indicator, as well as whether it is shown or hidden. In order to hide it, use the html attribute <code>hidden</code> or <code>display: none;</code> <br><br> In order to show busy state for an HTML element, simply nest the HTML element in a <code>ui5-busyindicator</code> instance. <br> <b>Note:</b> Since <code>ui5-busyindicator</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<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/BusyIndicator\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"active","visibility":"public","type":"boolean","description":"Defines if the busy indicator is visible on the screen. By default it is not.","defaultValue":"false"},{"name":"size","visibility":"public","type":"BusyIndicatorSize","description":"Defines the size of the <code>ui5-busyindicator</code>. <br><br> <b>Note:</b> Available options are \"Small\", \"Medium\", and \"Large\".","defaultValue":"\"Medium\""},{"name":"text","visibility":"public","since":"1.0.0-rc.7","type":"String","description":"Defines text to be displayed below the busy indicator. It can be used to inform the user of the current operation.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Determines the content over which the <code>ui5-busyindicator</code> will appear."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Button","basename":"Button","tagname":"ui5-button","resource":"Button.js","module":"Button","visibility":"public","extends":"UI5Element","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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Button\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"ButtonDesign","description":"Defines the <code>ui5-button</code> design. <br><br> <b>Note:</b> Available options are \"Default\", \"Emphasized\", \"Positive\", \"Negative\", and \"Transparent\".","defaultValue":"\"Default\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-button</code> is disabled (default is set to <code>false</code>). A disabled <code>ui5-button</code> can't be pressed or focused, and it is not in the tab chain.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the icon to be displayed as graphical element within the <code>ui5-button</code>. The SAP-icons font provides numerous options. <br><br> Example: <br> <pre>ui5-button icon=\"palette\"</pre>\n\nSee all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.","defaultValue":"\"\""},{"name":"iconEnd","visibility":"public","type":"boolean","description":"Defines whether the icon should be displayed after the <code>ui5-button</code> text.","defaultValue":"false"},{"name":"iconSize","visibility":"public","since":"1.0.0-rc.8","type":"string","description":"Defines the size of the icon inside the <code>ui5-button</code>.","defaultValue":"undefined"},{"name":"submits","visibility":"public","type":"boolean","description":"When set to <code>true</code>, the <code>ui5-button</code> will automatically submit the nearest form element upon <code>press</code>. <br><br> <b>Important:</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>","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-button</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}],"events":[{"name":"click","visibility":"public","description":"Fired when the <code>ui5-button</code> 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>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Calendar","basename":"Calendar","tagname":"ui5-calendar","appenddocs":"CalendarDate","resource":"Calendar.js","module":"Calendar","static":true,"visibility":"public","since":"1.0.0-rc.11","extends":"CalendarPart","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>[END] - Navigate to the last day of the week <li>[CTRL] + [HOME] - Navigate to the first day of the month <li>[CTRL] + [END] - Navigate to the last day of the month </ul> <br> - Month picker: <br> <ul> <li>[PAGEUP] - Navigate to the previous month</li> <li>[PAGEDOWN] - Navigate to the next month</li> <li>[HOME] - Navigate to the first month of the current row <li>[END] - Navigate to the last month of the current row <li>[CTRL] + [HOME] - Navigate to the first month of the current year <li>[CTRL] + [END] - Navigate to the last month of the year </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>[END] - Navigate to the last year of the current row <li>[CTRL] + [HOME] - Navigate to the first year of the current year range <li>[CTRL] + [END] - Navigate to the last year of the current year range </ul> <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> <pre><code>&lt;script data-id=\"sap-ui-config\" type=\"application/json\"&gt;\n{\n\t\"calendarType\": \"Japanese\"\n}\n&lt;/script&gt;\n\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Calendar\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"hideWeekNumbers","visibility":"public","type":"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.","defaultValue":"false"},{"name":"selectedDates","visibility":"protected","type":"undefined","description":"Creates instances of <code>ui5-date</code> inside this <code>ui5-calendar</code> with values, equal to the provided UTC timestamps","deprecated":{}},{"name":"selectionMode","visibility":"public","type":"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>","defaultValue":"\"Single\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the selected date or dates (depending on the <code>selectionMode</code> property) for this calendar as instances of <code>ui5-date</code>"}],"events":[{"name":"selected-dates-change","visibility":"public","parameters":[{"name":"values","type":"Array","description":"The selected dates"},{"name":"dates","type":"Array","description":"The selected dates as UTC timestamps"}],"description":"Fired when the selected dates change. <b>Note:</b> If you call <code>preventDefault()</code> for this event, <code>ui5-calendar</code> will not create instances of <code>ui5-date</code> for the newly selected dates. In that case you should do this manually."}]},{"kind":"class","name":"sap.ui.webcomponents.main.CalendarDate","basename":"CalendarDate","tagname":"ui5-date","resource":"CalendarDate.js","module":"CalendarDate","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"value","visibility":"public","type":"string","description":"The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the <code>ui5-date</code>"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.CalendarPart","basename":"CalendarPart","resource":"CalendarPart.js","module":"CalendarPart","static":true,"visibility":"public","extends":"DateComponentBase","description":"Abstract base class for Calendar, DayPicker, MonthPicker and YearPicker that adds support for: - common properties (timestamp, selectedDates): declarations and methods that operate on them - other common code","constructor":{"visibility":"public"},"properties":[{"name":"_calendarDate","visibility":"protected","type":"undefined","description":"Returns a CalendarDate instance, representing the _timestamp getter - this date is central to all components' rendering logic"},{"name":"_timestamp","visibility":"protected","type":"undefined","description":"Returns the effective timestamp to be used by the respective calendar part"},{"name":"timestamp","visibility":"protected","type":"Integer","description":"The timestamp of the currently focused date. Set this property to move the component's focus to a certain date. <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch."}],"slots":[],"methods":[{"name":"_safelyModifyTimestampBy","visibility":"protected","parameters":[{"name":"amount","type":"undefined","optional":false},{"name":"unit","type":"undefined","optional":false}],"description":"Modify a timestamp by a certain amount of days/months/years and enforce limits"},{"name":"_safelySetTimestamp","visibility":"protected","parameters":[{"name":"timestamp","type":"undefined","optional":false}],"description":"Change a timestamp and enforce limits"}]},{"kind":"class","name":"sap.ui.webcomponents.main.Card","basename":"Card","tagname":"ui5-card","resource":"Card.js","module":"Card","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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 several properties, such as: <code>heading</code>, <code>subheading</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>headerInteractive</code> property, you can press the <code>ui5-card</code> header by Space and Enter keys.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Card\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.16","type":"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.","defaultValue":"\"\""},{"name":"accessibleNameRef","visibility":"public","since":"1.0.0-rc.16","type":"String","description":"Defines the IDs of the elements that label the component.","defaultValue":"\"\""},{"name":"headerInteractive","visibility":"public","type":"boolean","description":"Defines if the <code>ui5-card</code> header would be interactive, e.g gets hover effect, gets focused and <code>headerPress</code> event is fired, when it is pressed.","defaultValue":"false"},{"name":"heading","visibility":"public","type":"string","description":"Defines the title displayed in the <code>ui5-card</code> header.","defaultValue":"\"\""},{"name":"status","visibility":"public","type":"string","description":"Defines the status displayed in the <code>ui5-card</code> header. <br><br> <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed, you can either have <code>action</code>, or <code>status</code>.","defaultValue":"\"\""},{"name":"subheading","visibility":"public","type":"string","description":"Defines the subheading displayed in the <code>ui5-card</code> header.","defaultValue":"\"\""}],"slots":[{"name":"action","visibility":"public","since":"1.0.0-rc.8","type":"HTMLElement[]","description":"Defines an action, displayed in the right most part of the header. <br><br> <b>Note:</b> If set, the <code>status</code> text will not be displayed, you can either have <code>action</code>, or <code>status</code>."},{"name":"avatar","visibility":"public","type":"HTMLElement[]","description":"Defines the visual representation in the header of the card. Supports images and icons. <br><br> <b>Note:</b> SAP-icons font provides numerous options. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."},{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the content of the <code>ui5-card</code>."}],"events":[{"name":"header-click","visibility":"public","since":"0.10.0","description":"Fired when the <code>ui5-card</code> header 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>headerInteractive</code> property is set to true."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Carousel","basename":"Carousel","tagname":"ui5-carousel","resource":"Carousel.js","module":"Carousel","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The carousel allows the user to browse through a set of items by swiping right or left. The component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\n<h3>Usage</h3>\n\nWhen to use\n\n- The items you want to display are very different from each other. - You want to display the items one after the other. When not to use\n\n- The items you want to display need to be visible at the same time. - The items you want to display are uniform and very similar\n\nFor the <code>ui5-carousel</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/Carousel.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"arrowsPlacement","visibility":"public","type":"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.","defaultValue":"\"Content\""},{"name":"cyclic","visibility":"public","type":"boolean","description":"Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.","defaultValue":"false"},{"name":"hideNavigation","visibility":"public","type":"boolean","description":"If set to true the navigation is hidden.","defaultValue":"false"},{"name":"infiniteScrollOffset","visibility":"public","since":"1.0.0-rc.8","type":"Integer","description":"Defines when the <code>load-more</code> event is fired. If not applied the event will not be fired.","defaultValue":"1"},{"name":"itemsPerPageL","visibility":"public","type":"Integer","description":"Sets the number of items per page on large size (more than 1024px). One item per page shown by default.","defaultValue":"1"},{"name":"itemsPerPageM","visibility":"public","type":"Integer","description":"Sets the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.","defaultValue":"1"},{"name":"itemsPerPageS","visibility":"public","type":"Integer","description":"Sets the number of items per page on small size (up to 640px). One item per page shown by default.","defaultValue":"1"},{"name":"selectedIndex","visibility":"public","type":"Integer","description":"Defines the index of the initially selected item.","defaultValue":"0"}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the content of the <code>ui5-carousel</code>."}],"events":[{"name":"load-more","visibility":"public","since":"1.0.0-rc.8","description":"Fired for the last items of the <code>ui5-carousel</code> if it is scrolled and the direction of scrolling is to the end. The number of items for which the event is fired is controlled by the <code>infiniteScrollOffset</code> property."},{"name":"navigate","visibility":"public","since":"1.0.0-rc.7","parameters":[{"name":"selectedIndex","type":"Integer","description":"the current <code>selectedIndex</code>."}],"description":"Fired whenever the <code>selectedIndex</code> 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."}]},{"kind":"class","name":"sap.ui.webcomponents.main.CheckBox","basename":"CheckBox","tagname":"ui5-checkbox","resource":"CheckBox.js","module":"CheckBox","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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 manually set the width of the element containing the box and the label using the <code>width</code> property. If the text exceeds the available width, it is truncated. 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<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/CheckBox\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"checked","visibility":"public","type":"boolean","description":"Defines if the <code>ui5-checkbox</code> is checked. <br><br> <b>Note:</b> The property can be changed with user interaction, either by cliking/tapping on the <code>ui5-checkbox</code>, or by pressing the Enter or Space key.","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-checkbox</code> is disabled. <br><br> <b>Note:</b> A disabled <code>ui5-checkbox</code> is completely noninteractive.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-checkbox</code> 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 <code>ui5-checkbox</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.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-checkbox</code> is read-only. <br><br> <b>Note:</b> A red-only <code>ui5-checkbox</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-checkbox</code>.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-checkbox</code>. <br><br> <b>Note:</b> Available options are <code>Warning</code>, <code>Error</code>, and <code>None</code> (default).","defaultValue":"\"None\""},{"name":"wrap","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-checkbox</code> text wraps when there is not enough space. <br><br> <b>Note:</b> By default, the text truncates when there is not enough space.","defaultValue":"false"}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the <code>ui5-checkbox</code> checked state changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ColorPalette","basename":"ColorPalette","tagname":"ui5-color-palette","appenddocs":"ColorPaletteItem","resource":"ColorPalette.js","module":"ColorPalette","visibility":"public","since":"1.0.0-rc.12","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> The ColorPalette provides the users with a range of predefined colors. You can set them by using the ColorPaletteItem items as slots.\n\n<h3>Usage</h3> The palette is intended for users, who don't want to check and remember the different values of the colors .\n\nFor the <code>ui5-color-palette</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/ColorPalette.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"value","visibility":"public","type":"CSSColor","description":"The selected color."}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-color-palette-item</code> items."}],"events":[{"name":"change","visibility":"public","parameters":[{"name":"color","type":"String","description":"the selected color"}],"description":"Fired when the user selects a color."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ColorPaletteItem","basename":"ColorPaletteItem","tagname":"ui5-color-palette-item","resource":"ColorPaletteItem.js","module":"ColorPaletteItem","visibility":"public","since":"1.0.0-rc.12","extends":"sap.ui.webcomponents.base.UI5Element","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>.","constructor":{"visibility":"public"},"properties":[{"name":"stableDomRef","visibility":"public","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."},{"name":"value","visibility":"public","type":"CSSColor","description":"Defines the value of the <code>ui5-color-palette-item</code> color. <br><br> <b>Note:</b> The value should be a valid CSS color."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.ColorPicker","basename":"ColorPicker","tagname":"ui5-color-picker","resource":"ColorPicker.js","module":"ColorPicker","visibility":"public","since":"1.0.0-rc.12","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> Enables the user to select a color & transparency.\n\n<h3>Usage</h3>\n\nFor the <code>ui5-color-picker</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/ColorPicker.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"color","visibility":"public","type":"String","description":"Defines the currently selected color of the <code>ui5-color-picker</code>. *Note*: If you need to have initially set color, or change the color programmatically, use this property *Important*: Use HEX, RGB, RGBA, HSV, or a CSS color name when modifying this property."}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the the selected color is changed"}]},{"kind":"class","name":"sap.ui.webcomponents.main.ComboBox","basename":"ComboBox","tagname":"ui5-combobox","appenddocs":"ComboBoxItem ComboBoxGroupItem","resource":"ComboBox.js","module":"ComboBox","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","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 one or more options from a predefined list. <h3>Structure</h3> The <code>ui5-combobox</code> consists of the following elements: <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> 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-combobox</code> provides advanced keyboard handling.\n\n<h4>Picker</h4> If the <code>ui5-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. <br>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ComboBox\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-combobox</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-combobox</code> is completely uninteractive.","defaultValue":"false"},{"name":"filter","visibility":"public","type":"string","description":"Defines the filter type of the <code>ui5-combobox</code>. Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code> and <code>Contains</code>.","defaultValue":"\"StartsWithPerTerm\""},{"name":"loading","visibility":"public","type":"boolean","description":"Indicates whether a loading indicator should be shown in the picker.","defaultValue":"false"},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the <code>ui5-combobox</code> has no value.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-combobox</code> is readonly. <br><br> <b>Note:</b> A read-only <code>ui5-combobox</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"required","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-combobox</code> is required.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the <code>ui5-combobox</code>.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-combobox</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-combobox</code> items. <br><br> Example: <br> &lt;ui5-combobox><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br> &lt;/ui5-combobox> <br> <br>"},{"name":"icon","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the icon to be displayed in the input field."},{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-combobox</code>. <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-select</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by pressing Enter, focusout or an item is selected."},{"name":"input","visibility":"public","description":"Fired when typing in input. <br><br> <b>Note:</b> filterValue property is updated, input is changed."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ComboBoxGroupItem","basename":"ComboBoxGroupItem","tagname":"ui5-cb-group-item","resource":"ComboBoxGroupItem.js","module":"ComboBoxGroupItem","static":true,"visibility":"public","since":"1.0.0-rc.15","extends":"UI5Element","description":"The <code>ui5-combobox-group-item</code> is type of suggestion item, that can be used to split the <code>ui5-combobox</code> suggestions into groups.","constructor":{"visibility":"public"},"properties":[{"name":"isGroupItem","visibility":"protected","type":"undefined","description":"Used to avoid tag name checks"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the component.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.ComboBoxItem","basename":"ComboBoxItem","tagname":"ui5-cb-item","resource":"ComboBoxItem.js","module":"ComboBoxItem","static":true,"visibility":"public","extends":"UI5Element","description":"The <code>ui5-cb-item</code> represents the item for a <code>ui5-combobox</code>.","constructor":{"visibility":"public"},"properties":[{"name":"additionalText","visibility":"public","since":"1.0.0-rc.11","type":"string","description":"Defines the additional text of the <code>ui5-cb-item</code>.","defaultValue":"\"\""},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-cb-item</code>.","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.CustomListItem","basename":"CustomListItem","tagname":"ui5-li-custom","resource":"CustomListItem.js","module":"CustomListItem","static":true,"visibility":"public","extends":"ListItem","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 <code>ui5-li-custom</code> accepts arbitrary HTML content to allow full customization.","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.15","type":"string","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the content of the <code>ui5-li-custom</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.DateComponentBase","basename":"DateComponentBase","resource":"DateComponentBase.js","module":"DateComponentBase","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"Abstract class that provides common functionality for date-related components (day picker, month picker, year picker, calendar, date picker, date range picker, date time picker) This includes: - \"languageAware: true\" metadata setting, CLDR fetch and i18n initialization - common properties (primaryCalendar, minDate, maxDate and formatPattern) declaration and methods that operate on them - additional common methods","constructor":{"visibility":"public"},"properties":[{"name":"formatPattern","visibility":"public","type":"string","description":"Determines the format, displayed in the input field.","defaultValue":"\"\""},{"name":"maxDate","visibility":"public","since":"1.0.0-rc.6","type":"string","description":"Determines the maximum date available for selection.","defaultValue":"\"\""},{"name":"minDate","visibility":"public","since":"1.0.0-rc.6","type":"string","description":"Determines the мinimum date available for selection.","defaultValue":"\"\""},{"name":"primaryCalendarType","visibility":"public","type":"CalendarType","description":"Sets a calendar type used for display. If not set, the calendar type of the global configuration is used."},{"name":"secondaryCalendarType","visibility":"public","since":"1.0.0-rc.16","type":"CalendarType","description":"Defines the secondary calendar type. If not set, the calendar will only show the primary calendar type.","defaultValue":"undefined"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.DatePicker","basename":"DatePicker","tagname":"ui5-date-picker","resource":"DatePicker.js","module":"DatePicker","static":true,"visibility":"public","extends":"DateComponentBase","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 chooses 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\" class=\"api-table-content-cell-link\">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> is focused and the picker dialog is not opened the user can increment or decrement the corresponding field of the JS date object referenced by <code>dateValue</code> propery 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;\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/DatePicker\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"_calendarSelectedDates","visibility":"protected","type":"undefined","description":"Used to provide selectedDates to the calendar based on the component's state Override in derivatives to provide different rules for setting the calendar's selected dates"},{"name":"_calendarSelectionMode","visibility":"protected","type":"undefined","description":"Override in derivatives to change calendar selection mode"},{"name":"_calendarTimestamp","visibility":"protected","type":"undefined","description":"Used to provide a timestamp to the Calendar (to focus it to a relevant date when open) based on the component's state Override in derivatives to provide the calendar a timestamp based on their properties By default focus the calendar on the selected date if set, or the current day otherwise"},{"name":"_placeholder","visibility":"protected","type":"undefined"},{"name":"dateValue","readonly":"true","visibility":"public","type":"Date","description":"Currently selected date represented as a Local JavaScript Date instance."},{"name":"disabled","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-date-picker</code> is displayed as disabled.","defaultValue":"false"},{"name":"hideWeekNumbers","visibility":"public","since":"1.0.0-rc.8","type":"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.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-date-picker</code> 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 <code>ui5-date-picker</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.","defaultValue":"\"\""},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint, intended to aid the user with data entry when the <code>ui5-date-picker</code> 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 <code>ui5-date-picker</code> appear empty - without placeholder or format pattern.","defaultValue":"undefined"},{"name":"readonly","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-date-picker</code> is displayed as read-only.","defaultValue":"false"},{"name":"required","visibility":"public","since":"1.0.0-rc.9","type":"Boolean","description":"Defines whether the <code>ui5-date-picker</code> is required.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines a formatted date value.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-date-picker</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.7","type":"HTMLElement","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-date-picker</code>. <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-date-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","parameters":[{"name":"value","type":"String","description":"The submitted value."},{"name":"valid","type":"Boolean","description":"Indicator if the value is in correct format pattern and in valid range."}],"description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"name":"input","visibility":"public","parameters":[{"name":"value","type":"String","description":"The submitted value."},{"name":"valid","type":"Boolean","description":"Indicator if the value is in correct format pattern and in valid range."}],"description":"Fired when the value of the <code>ui5-date-picker</code> is changed at each key stroke."}],"methods":[{"name":"_checkValueValidity","visibility":"protected"},{"name":"_modifyDateValue","visibility":"protected","parameters":[{"name":"amount","type":"undefined","optional":false},{"name":"unit","type":"undefined","optional":false}]},{"name":"_onInputChange","visibility":"protected","description":"The ui5-input \"change\" event handler - fire change event when the user focuses out of the input"},{"name":"_onInputInput","visibility":"protected","description":"The ui5-input \"input\" event handler - fire input even when the user types"},{"name":"_onInputSubmit","visibility":"protected","description":"The ui5-input \"submit\" event handler - fire change event when the user presses enter"},{"name":"closePicker","visibility":"public","description":"Closes the picker."},{"name":"formatValue","visibility":"public","parameters":[{"name":"oDate","type":"object","optional":false,"description":"A Java Script date object to be formatted as string"}],"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"},{"name":"isInValidRange","visibility":"public","parameters":[{"name":"value","type":"object","optional":false}],"description":"Checks if a date is in range between minimum and maximum date."},{"name":"isOpen","visibility":"public","returnValue":{"type":"Boolean","description":"true if the picker is open, false otherwise"},"description":"Checks if the picker is open."},{"name":"isValid","visibility":"public","parameters":[{"name":"value","type":"string","optional":false,"description":"A value to be tested against the current date format"}],"description":"Checks if a value is valid against the current date format of the DatePicker."},{"name":"normalizeValue","visibility":"protected","description":"The parser understands many formats, but we need one format"},{"name":"onResponsivePopoverAfterClose","visibility":"protected"},{"name":"onSelectedDatesChange","visibility":"protected","parameters":[{"name":"event","type":"undefined","optional":false}],"description":"The user selected a new date in the calendar"},{"name":"openPicker","visibility":"public","description":"Opens the picker."}]},{"kind":"class","name":"sap.ui.webcomponents.main.DateRangePicker","basename":"DateRangePicker","tagname":"ui5-daterange-picker","resource":"DateRangePicker.js","module":"DateRangePicker","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"DatePicker","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>","constructor":{"visibility":"public"},"properties":[{"name":"delimiter","visibility":"public","type":"string","description":"Determines the symbol which separates the dates. If not supplied, the default time interval delimiter for the current locale will be used."},{"name":"firstDateValue","readonly":"true","visibility":"public","type":"Date","description":"Currently selected first date represented as JavaScript Date instance."},{"name":"lastDateValue","readonly":"true","visibility":"public","type":"Date","description":"Currently selected last date represented as JavaScript Date instance."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.DateTimePicker","basename":"DateTimePicker","tagname":"ui5-datetime-picker","resource":"DateTimePicker.js","module":"DateTimePicker","visibility":"public","since":"1.0.0-rc.7","extends":"DatePicker","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\nProgramatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property <br><br> As most of the input based components, the <code>DateTimePicker</code> supports properties, such as: <code>disabled</code>, <code>readonly</code>, <code>valueState</code> and <code>placeholder</code>.\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\" class=\"api-table-content-cell-link\">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>","constructor":{"visibility":"public"},"methods":[{"name":"openPicker","visibility":"public","description":"Opens the picker."}]},{"kind":"class","name":"sap.ui.webcomponents.main.DayPicker","basename":"DayPicker","tagname":"ui5-daypicker","resource":"DayPicker.js","module":"DayPicker","static":true,"visibility":"public","extends":"CalendarPart","description":"Represents one month view inside a calendar.","constructor":{"visibility":"public"},"properties":[{"name":"hideWeekNumbers","visibility":"public","since":"1.0.0-rc.8","type":"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.","defaultValue":"false"},{"name":"selectedDates","visibility":"public","type":"Array","description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."},{"name":"selectionMode","visibility":"public","type":"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>","defaultValue":"\"Single\""}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the selected date(s) change"},{"name":"navigate","visibility":"public","description":"Fired when the timestamp changes (user navigates with the keyboard) or clicks with the mouse"}],"methods":[{"name":"_hasNextPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_hasPreviousPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_showNextPage","visibility":"protected","description":"Called from Calendar.js Same as PageDown"},{"name":"_showPreviousPage","visibility":"protected","description":"Called from Calendar.js Same as PageUp"}]},{"kind":"class","name":"sap.ui.webcomponents.main.Dialog","basename":"Dialog","tagname":"ui5-dialog","resource":"Dialog.js","module":"Dialog","visibility":"public","extends":"Popup","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 user action is required before returning to the parent window is possible. 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>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.","constructor":{"visibility":"public"},"properties":[{"name":"_ariaLabel","visibility":"protected","type":"undefined","description":"Ensures ariaLabel is never null or empty string"},{"name":"accessibleName","visibility":"public","type":"string","description":"Defines the accessible name of the dialog when <code>header</code> slot is provided. <br><br>\n\n<b>Note:</b> If <code>aria-label</code> is provided, <code>accessibleName</code> will be ignored.","defaultValue":"\"\""},{"name":"draggable","visibility":"public","since":"1.0.0-rc.9","type":"boolean","description":"Determines whether the <code>ui5-dialog</code> is draggable. If this property is set to true, the Dialog will be draggable by its header. <br><br> <b>Note:</b> The <code>ui5-dialog</code> can be draggable only in desktop mode.","defaultValue":"false"},{"name":"headerText","visibility":"public","type":"string","description":"Defines the header text. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.","defaultValue":"\"\""},{"name":"resizable","visibility":"public","since":"1.0.0-rc.10","type":"boolean","description":"Configures the <code>ui5-dialog</code> 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 <code>ui5-dialog</code> can be resizable only in desktop mode. <br> <b>Note:</b> Upon resizing, externally defined height and width styling will be ignored.","defaultValue":"false"},{"name":"stretch","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen. <br><br> <b>Note:</b> The <code>ui5-dialog</code> will be stretched to approximately 90% of the viewport.","defaultValue":"false"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.DurationPicker","basename":"DurationPicker","tagname":"ui5-duration-picker","resource":"DurationPicker.js","module":"DurationPicker","static":true,"visibility":"public","since":"1.0.0-rc.7","extends":"TimePickerBase","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-duration-picker</code> component provides an input field with assigned sliders which opens on user action. The <code>ui5-duration-picker</code> allows users to select a time duration. It consists of two parts: the time input field and the sliders.\n\n<h3>Usage</h3>\n\nThe Duration Picker is used for input of time. Users are able to select hours, minutes and seconds. The user can enter a time by: <ul> <li>Using the sliders 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 chooses the enter key, the sliders shows the corresponding time. When the user directly triggers the sliders display, the actual time is displayed.\n\nFor the <code>ui5-duration-picker</code>\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 max value is reached, the slider doesn't increment.</li> <li>[PAGEDOWN] - Decrements the corresponding field by 1. If min value is reached, the slider doesn't increment.</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.</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.</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/DurationPicker.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"hideHours","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines whether the slider for hours will be available. By default there are sliders for hours, minutes and seconds.","defaultValue":"false"},{"name":"hideMinutes","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines whether the slider for minutes will be available. By default there are sliders for hours, minutes and seconds.","defaultValue":"false"},{"name":"hideSeconds","visibility":"public","type":"boolean","description":"Defines whether a slider for seconds will be available. By default there are sliders for hours, minutes and seconds.","defaultValue":"false"},{"name":"maxValue","visibility":"public","type":"string","description":"Defines a formatted maximal time that the user will be able to adjust.","defaultValue":"\"23:59:59\""},{"name":"minutesStep","visibility":"public","since":"1.0.0-rc.8","type":"Integer","description":"Defines the selection step for the minutes","defaultValue":"1"},{"name":"secondsStep","visibility":"public","since":"1.0.0-rc.8","type":"Integer","description":"Defines the selection step for the seconds","defaultValue":"1"},{"name":"value","visibility":"public","type":"string","description":"Defines a formatted time value.","defaultValue":"\"00:00:00\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.FileUploader","basename":"FileUploader","tagname":"ui5-file-uploader","resource":"FileUploader.js","module":"FileUploader","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"accept","visibility":"public","type":"string","description":"Comma-separated list of file types that the <code>ui5-file-uploader</code> 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.","defaultValue":"\"\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-file-uploader</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-file-uploader</code> is completely noninteractive.","defaultValue":"false"},{"name":"files","readonly":"true","visibility":"public","type":"FileList","description":"FileList of all selected files."},{"name":"hideInput","visibility":"public","type":"boolean","description":"If set to \"true\", the input field of <code>ui5-file-uploader</code> will not be rendered. Only the default slot that is passed will be rendered.","defaultValue":"false"},{"name":"multiple","visibility":"public","type":"boolean","description":"Allows multiple files to be chosen.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-file-uploader</code> 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 <code>ui5-file-uploader</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.","defaultValue":"\"\""},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the <code>ui5-file-uploader</code> has no value.","defaultValue":"\"\""},{"name":"value","visibility":"public","type":"string","description":"Defines the name/names of the file/files to upload.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-file-uploader</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"By default the <code>ui5-file-uploader</code> 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":"valueStateMessage","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-file-uploader</code>. <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-file-uploader</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","parameters":[{"name":"files","type":"FileList","description":"The current files."}],"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."}]},{"kind":"class","name":"sap.ui.webcomponents.main.GroupHeaderListItem","basename":"GroupHeaderListItem","tagname":"ui5-li-groupheader","resource":"GroupHeaderListItem.js","module":"GroupHeaderListItem","visibility":"public","extends":"ListItemBase","description":"The <code>ui5-li-groupheader</code> is a special list item, used only to separate other list items into logical groups.","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.15","type":"string","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-li-groupheader</code>. <br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Icon","basename":"Icon","tagname":"ui5-icon","resource":"Icon.js","module":"Icon","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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; or as a visually appealing clickable area in the form of an icon button. <br><br> A large set of built-in icons is available and they can be used by setting the <code>name</code> property on the <code>ui5-icon</code>. But before using an icon, you need to import the desired icon. <br>\n\nFor the standard icon collection, you have to import an icon from the <code>@ui5/webcomponents-icons</code> package: <br> <code>import \"@ui5/webcomponents-icons/dist/employee.js\";</code> <br>\n\nFor the SAP Fiori Tools icon collection (supported since 1.0.0-rc.10), you have to import an icon from the <code>@ui5/webcomponents-icons-tnt</code> package: <br> <code>import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";</code>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Icon.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","type":"string","description":"Defines the text alternative of the <code>ui5-icon</code>. 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.","defaultValue":"\"\""},{"name":"interactive","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines if the icon is interactive (focusable and pressable)","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Defines the unique identifier (icon name) of each <code>ui5-icon</code>. <br>\n\nTo browse all available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>. <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>.","defaultValue":"\"\""},{"name":"showTooltip","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-icon</code> should have a tooltip.","defaultValue":"false"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Input","basename":"Input","tagname":"ui5-input","appenddocs":"SuggestionItem","resource":"Input.js","module":"Input","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>enabled</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>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)","constructor":{"visibility":"public"},"properties":[{"name":"_placeholder","visibility":"protected","type":"undefined","description":"Returns the placeholder value."},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-input</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-input</code> is completely noninteractive.","defaultValue":"false"},{"name":"highlight","visibility":"public","type":"boolean","description":"Defines if characters within the suggestions are to be highlighted in case the input value matches parts of the suggestions text. <br><br> <b>Note:</b> takes effect when <code>showSuggestions</code> is set to <code>true</code>","defaultValue":"false"},{"name":"maxlength","visibility":"public","since":"1.0.0-rc.5","type":"Integer","description":"Sets the maximum number of characters available in the input field."},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-input</code> 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 <code>ui5-input</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.","defaultValue":"\"\""},{"name":"nativeInput","visibility":"protected","type":"undefined","description":"Returns a reference to the native input element"},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the <code>ui5-input</code> has no value.","defaultValue":"\"\""},{"name":"previewItem","readonly":"true","visibility":"public","type":"ui5-suggestion-item","description":"The suggestion item on preview."},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-input</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-input</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"required","visibility":"public","since":"1.0.0-rc.3","type":"boolean","description":"Defines whether the <code>ui5-input</code> is required.","defaultValue":"false"},{"name":"showSuggestions","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-input</code> should show suggestions, if such are present. <br><br> <b>Note:</b> Don`t forget to import the <code>InputSuggestions</code> module from <code>\"@ui5/webcomponents/dist/features/InputSuggestions.js\"</code> to enable this functionality.","defaultValue":"false"},{"name":"type","visibility":"public","type":"InputType","description":"Defines the HTML type of the <code>ui5-input</code>. 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>","defaultValue":"\"Text\""},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the <code>ui5-input</code>. <br><br> <b>Note:</b> The property is updated upon typing.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-input</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-input</code> 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-item text=\"Item #1\"></ui5-suggestion-item> <ui5-suggestion-item text=\"Item #2\"></ui5-suggestion-item> </ui5-input> <br><br> <b>Note:</b> The suggestion would be displayed only if the <code>showSuggestions</code> property is set to <code>true</code>. <br><br> <b>Note:</b> The &lt;ui5-suggestion-item> is recommended to be used as a suggestion item. Importing the Input Suggestions Support feature: <br> <code>import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";</code> <br> also automatically imports the &lt;ui5-suggestion-item> for your convenience."},{"name":"icon","visibility":"public","type":"HTMLElement[]","description":"Defines the icon to be displayed in the <code>ui5-input</code>."},{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.6","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-input</code>. <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-input</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state. <br> <b>Note:</b> If the <code>ui5-input</code> 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."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"name":"input","visibility":"public","description":"Fired when the value of the <code>ui5-input</code> changes at each keystroke, and when a suggestion item has been selected."},{"name":"submit","visibility":"public","description":"Fired when user presses Enter key on the <code>ui5-input</code>. <br><br> <b>Note:</b> The event is fired independent of whether there was a change before or not. If change was performed, the event is fired after the change event. The event is also fired when an item of the select list is selected by pressing Enter."},{"name":"suggestion-item-preview","visibility":"public","since":"1.0.0-rc.8","parameters":[{"name":"item","type":"HTMLElement","description":"The previewed suggestion item"},{"name":"targetRef","type":"HTMLElement","description":"The DOM ref of the suggestion item."}],"description":"Fired when the user navigates to a suggestion item via the ARROW keys, as a preview, before the final selection."},{"name":"suggestion-item-select","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"The selected item"}],"description":"Fired when a suggestion item, that is displayed in the suggestion popup, is selected."},{"name":"suggestion-scroll","visibility":"public","since":"1.0.0-rc.8","parameters":[{"name":"scrollTop","type":"Integer","description":"The current scroll position"},{"name":"scrollContainer","type":"HTMLElement","description":"The scroll container"}],"description":"Fired when the user scrolls the suggestion popover."}],"methods":[{"name":"getCaretPosition","visibility":"protected","description":"Returns the caret position inside the native input"},{"name":"isOpen","visibility":"public","returnValue":{"type":"Boolean","description":"true if the popover is open, false otherwise"},"description":"Checks if the value state popover is open."},{"name":"setCaretPosition","visibility":"protected","parameters":[{"name":"pos","type":"undefined","optional":false}],"description":"Sets the caret to a certain position inside the native input"}]},{"kind":"class","name":"sap.ui.webcomponents.main.Label","basename":"Label","tagname":"ui5-label","resource":"Label.js","module":"Label","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-label</code> is a component used to represent a label, providing valuable information to the user. Usually it is placed next to a value holder, such as a text field. It informs the user about what data is displayed or expected in the value holder. <br><br> The <code>ui5-label</code> appearance can be influenced by properties, such as <code>required</code> and <code>wrap</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>","constructor":{"visibility":"public"},"properties":[{"name":"for","visibility":"public","type":"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.","defaultValue":"\"\""},{"name":"required","visibility":"public","type":"boolean","description":"Defines whether an asterisk character is added to the <code>ui5-label</code> text. <br><br> <b>Note:</b> Usually indicates that user input is required.","defaultValue":"false"},{"name":"showColon","visibility":"public","type":"boolean","description":"Defines whether colon is added to the component text. <br><br> <b>Note:</b> Usually used in forms.","defaultValue":"false"},{"name":"wrap","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-label</code> should wrap, when there is not enough space. <br><br> <b>Note:</b> By default the text would truncate.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-label</code>. <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Link","basename":"Link","tagname":"ui5-link","resource":"Link.js","module":"Link","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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 basic HTML anchor tag (<code><a></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>wrap</code> property is set to <code>true</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>","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"LinkDesign","description":"Defines the <code>ui5-link</code> design. <br><br> <b>Note:</b> Avaialble options are <code>Default</code>, <code>Subtle</code>, and <code>Emphasized</code>.","defaultValue":"\"Default\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-link</code> is disabled. <br><br> <b>Note:</b> When disabled, the <code>ui5-link</code> cannot be triggered by the user.","defaultValue":"false"},{"name":"href","visibility":"public","type":"string","description":"Defines the <code>ui5-link</code> href. <br><br> <b>Note:</b> Standard hyperlink behavior is supported.","defaultValue":"\"\""},{"name":"target","visibility":"public","type":"string","description":"Defines the <code>ui5-link</code> target. <br><br> <b>Notes:</b> <ul> <li>Available options are the standard values: <code>_self</code>, <code>_top</code>, <code>_blank</code>, <code>_parent</code>, and <code>_search</code>.</li> <li>This property must only be used when the <code>href</code> property is set.</li> </ul>","defaultValue":"\"\""},{"name":"wrap","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-link</code> text should wrap when there is no sufficient space. <br><br> <b>Note:</b> The text is truncated by default.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-link</code>. <br><b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}],"events":[{"name":"click","visibility":"public","description":"Fired when the <code>ui5-link</code> is triggered either with a mouse/tap or by using the Enter key."}]},{"kind":"class","name":"sap.ui.webcomponents.main.List","basename":"List","tagname":"ui5-list","appenddocs":"StandardListItem CustomListItem GroupHeaderListItem","resource":"List.js","module":"List","visibility":"public","extends":"UI5Element","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 а 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<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>)","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.15","type":"String","description":"Sets the accessible aria name of the component.","defaultValue":"\"\""},{"name":"accessibleNameRef","visibility":"public","since":"1.0.0-rc.15","type":"String","description":"Receives id(or many ids) of the elements that label the input","defaultValue":"\"\""},{"name":"accessibleRole","visibility":"public","since":"1.0.0-rc.15","type":"String","description":"Defines the accessible role of the component. <br><br>","defaultValue":"\"list\""},{"name":"busy","visibility":"public","since":"1.0.0-rc.6","type":"boolean","description":"Defines if the component would display a loading indicator over the list.","defaultValue":"false"},{"name":"footerText","visibility":"public","type":"string","description":"Defines the footer text.","defaultValue":"\"\""},{"name":"growing","visibility":"public","since":"1.0.0-rc.13","type":"ListGrowingMode","description":"Defines whether the <code>ui5-list</code> 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>Limitations:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, on IE the component will fallback to <code>growing=\"Button\"</code>.","defaultValue":"\"None\""},{"name":"headerText","visibility":"public","type":"string","description":"Defines the <code>ui5-list</code> header text. <br><br> <b>Note:</b> If <code>header</code> is set this property is ignored.","defaultValue":"\"\""},{"name":"inset","visibility":"public","type":"boolean","description":"Determines whether the list items are indented.","defaultValue":"false"},{"name":"mode","visibility":"public","type":"ListMode","description":"Defines the mode of the <code>ui5-list</code>. <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>.","defaultValue":"\"None\""},{"name":"noDataText","visibility":"public","type":"string","description":"Defines the text that is displayed when the <code>ui5-list</code> contains no items.","defaultValue":"\"\""},{"name":"separators","visibility":"public","type":"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>","defaultValue":"\"All\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-list</code>. <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":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-list</code> header. <br><br> <b>Note:</b> When <code>header</code> is set, the <code>headerText</code> property is ignored."}],"events":[{"name":"item-click","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the clicked item."}],"description":"Fired when an item is activated, unless the item's <code>type</code> property is set to <code>Inactive</code>."},{"name":"item-close","visibility":"public","since":"1.0.0-rc.8","parameters":[{"name":"item","type":"HTMLElement","description":"the item about to be closed."}],"description":"Fired when the <code>Close</code> button of any item is clicked <br><br> <b>Note:</b> This event is applicable to <code>ui5-li-notification</code> items only, not to be confused with <code>item-delete</code>."},{"name":"item-delete","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the deleted item."}],"description":"Fired when the Delete button of any item is pressed. <br><br> <b>Note:</b> A Delete button is displayed on each item, when the <code>ui5-list</code> <code>mode</code> property is set to <code>Delete</code>."},{"name":"item-toggle","visibility":"public","since":"1.0.0-rc.8","parameters":[{"name":"item","type":"HTMLElement","description":"the toggled item."}],"description":"Fired when the <code>Toggle</code> button of any item is clicked. <br><br> <b>Note:</b> This event is applicable to <code>ui5-li-notification-group</code> items only."},{"name":"load-more","visibility":"public","since":"1.0.0-rc.6","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."},{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedItems","type":"Array","description":"An array of the selected items."},{"name":"previouslySelectedItems","type":"Array","description":"An array of the previously selected items."}],"description":"Fired when selection is changed by user interaction in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes."}],"methods":[{"name":"focusItem","visibility":"protected","parameters":[{"name":"item","type":"undefined","optional":false}],"description":"Focuses a list item and sets its tabindex to \"0\" via the ItemNavigation"}]},{"kind":"class","name":"sap.ui.webcomponents.main.ListItem","basename":"ListItem","resource":"ListItem.js","module":"ListItem","visibility":"public","extends":"ListItemBase","description":"A class to serve as a base for the <code>StandardListItem</code> and <code>CustomListItem</code> classes.","constructor":{"visibility":"public"},"properties":[{"name":"type","visibility":"public","type":"ListItemType","description":"Defines the visual indication and behavior of the list items. 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 with type <code>Inactive</code> and <code>Detail</code> - will not.","defaultValue":"\"Active\""}],"slots":[],"events":[{"name":"detail-click","visibility":"public","description":"Fired when the user clicks on the detail button when type is <code>Detail</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ListItemBase","basename":"ListItemBase","resource":"ListItemBase.js","module":"ListItemBase","abstract":true,"static":true,"visibility":"public","extends":"UI5Element","description":"A class to serve as a foundation for the <code>ListItem</code> and <code>GroupHeaderListItem</code> classes.","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"protected","since":"1.0.0-rc.12","type":"boolean","description":"Defines whether <code>ui5-li</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-li</code> is noninteractive.","defaultValue":"false"},{"name":"selected","visibility":"public","type":"boolean","description":"Defines the selected state of the <code>ListItem</code>.","defaultValue":"false"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.MessageStrip","basename":"MessageStrip","tagname":"ui5-messagestrip","resource":"MessageStrip.js","module":"MessageStrip","visibility":"public","since":"0.9.0","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-messagestrip</code> component enables the embedding of app-related messages. It displays 4 types 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-messagestrip</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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MessageStrip\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"noCloseButton","visibility":"public","type":"boolean","description":"Defines whether the MessageStrip renders close icon.","defaultValue":"false"},{"name":"noIcon","visibility":"public","type":"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.","defaultValue":"false"},{"name":"type","visibility":"public","type":"MessageStripType","description":"Defines the <code>ui5-messagestrip</code> type. <br><br> <b>Note:</b> Available options are <code>\"Information\"</code>, <code>\"Positive\"</code>, <code>\"Negative\"</code>, and <code>\"Warning\"</code>.","defaultValue":"\"Information\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-messagestrip</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."},{"name":"icon","visibility":"public","type":"HTMLElement","description":"Defines the content to be displayed as graphical element within the <code>ui5-messagestrip</code>. <br><br> <b>Note:</b> If no icon is given, the default icon for the <code>ui5-messagestrip</code> 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://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."}],"events":[{"name":"close","visibility":"public","description":"Fired when the close button is pressed either with a click/tap or by using the Enter or Space key."}]},{"kind":"class","name":"sap.ui.webcomponents.main.MonthPicker","basename":"MonthPicker","tagname":"ui5-monthpicker","resource":"MonthPicker.js","module":"MonthPicker","static":true,"visibility":"public","extends":"CalendarPart","description":"Displays months which can be selected.","constructor":{"visibility":"public"},"properties":[{"name":"selectedDates","visibility":"public","type":"Array","description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the user selects a month (space/enter/click)."},{"name":"navigate","visibility":"public","since":"1.0.0-rc.9","description":"Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse."}],"methods":[{"name":"_hasNextPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_hasPreviousPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_showNextPage","visibility":"protected","description":"Called by Calendar.js User pressed the \">\" button in the calendar header (same as PageDown)"},{"name":"_showPreviousPage","visibility":"protected","description":"Called by Calendar.js User pressed the \"<\" button in the calendar header (same as PageUp)"}]},{"kind":"class","name":"sap.ui.webcomponents.main.MultiComboBox","basename":"MultiComboBox","tagname":"ui5-multi-combobox","appenddocs":"MultiComboBoxItem","resource":"MultiComboBox.js","module":"MultiComboBox","visibility":"public","since":"0.11.0","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-multi-combobox</code> component provides a list box with items and a text field allowing the user to either type a value directly into the control, or choose from the list of existing items.\n\nIt is a drop-down list for selecting and filtering values, commonly used to enable 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 of available options. The select 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> Input field - displays the selected option/s as token/s. Users can type to filter the list. <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\nIn the context of <code>ui5-multi-combobox</code>, you can provide a custom stable DOM ref for: <ul> <li>Every <code>ui5-mcb-item</code> that you provide. Example: <code><ui5-mcb-item stable-dom-ref=\"item1\"></ui5-mcb-item></code></li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiComboBox\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"allowCustomValues","visibility":"public","type":"boolean","description":"Defines if the user input will be prevented, if no matching item has been found","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-multi-combobox</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-multi-combobox</code> is completely noninteractive.","defaultValue":"false"},{"name":"filter","visibility":"public","type":"string","description":"Defines the filter type of the <code>ui5-multi-combobox</code>. Available options are: <code>StartsWithPerTerm</code>, <code>StartsWith</code>, <code>Contains</code> and <code>None</code>.","defaultValue":"\"StartsWithPerTerm\""},{"name":"open","visibility":"public","since":"1.0.0-rc.5","type":"boolean","description":"Indicates whether the dropdown is open. True if the dropdown is open, false otherwise.","defaultValue":"false"},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the <code>ui5-multi-combobox</code> has no value.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-multi-combobox</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-multi-combobox</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"required","visibility":"public","since":"1.0.0-rc.5","type":"boolean","description":"Defines whether the <code>ui5-multi-combobox</code> is required.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the <code>ui5-multi-combobox</code>. <br><br> <b>Note:</b> The property is updated upon typing.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-multi-combobox</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-multi-combobox</code> items. <br><br> Example: <br> &lt;ui5-multi-combobox><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br> &lt;/ui5-multi-combobox> <br> <br>"},{"name":"icon","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the icon to be displayed in the <code>ui5-multi-combobox</code>."},{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-multi-combobox</code>. <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-multi-combobox</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by pressing Enter or on focusout."},{"name":"input","visibility":"public","description":"Fired when the value of the <code>ui5-multi-combobox</code> changes at each keystroke."},{"name":"open-change","visibility":"public","since":"1.0.0-rc.5","description":"Fired when the dropdown is opened or closed."},{"name":"selection-change","visibility":"public","parameters":[{"name":"items","type":"Array","description":"an array of the selected items."}],"description":"Fired when selection is changed by user interaction in <code>SingleSelect</code> and <code>MultiSelect</code> modes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.MultiComboBoxItem","basename":"MultiComboBoxItem","tagname":"ui5-mcb-item","resource":"MultiComboBoxItem.js","module":"MultiComboBoxItem","static":true,"visibility":"public","extends":"ComboBoxItem","description":"The <code>ui5-mcb-item</code> represents the item for a <code>ui5-multi-combobox</code>.","constructor":{"visibility":"public"},"properties":[{"name":"selected","visibility":"public","type":"boolean","description":"Defines the selected state of the <code>ui5-mcb-item</code>.","defaultValue":"false"},{"name":"stableDomRef","visibility":"public","since":"1.0.0-rc.11","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.MultiInput","basename":"MultiInput","tagname":"ui5-multi-input","appenddocs":"Token","resource":"MultiInput.js","module":"MultiInput","visibility":"public","since":"1.0.0-rc.9","extends":"Input","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>Select a value from the suggestion list</li> (<code>suggestion-item-select</code> event is fired) </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/MultiInput\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"_placeholder","visibility":"protected","type":"undefined","description":"Returns the placeholder value when there are no tokens."},{"name":"showValueHelpIcon","visibility":"public","type":"boolean","description":"Determines whether a value help icon will be should in the end of the input. Pressing the icon will fire <code>value-help-trigger</code> event.","defaultValue":"false"}],"slots":[{"name":"tokens","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-multi-input</code> tokens. <br><br> Example: <br> &lt;ui5-multi-input><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-token slot=\"tokens\" text=\"Token 1\">&lt;/ui5-token><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-token slot=\"tokens\" text=\"Token 2\">&lt;/ui5-token><br> &lt;/ui5-multi-input> <br> <br>"}],"events":[{"name":"token-delete","visibility":"public","parameters":[{"name":"token","type":"HTMLElement","description":"deleted token."}],"description":"Fired when a token is about to be deleted."},{"name":"value-help-trigger","visibility":"public","description":"Fired when the value help icon is pressed and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Option","basename":"Option","tagname":"ui5-option","resource":"Option.js","module":"Option","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>.","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","since":"1.0.0-rc.12","type":"boolean","description":"Defines whether <code>ui5-option</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-option</code> is noninteractive.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous buil-in icons. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."},{"name":"selected","visibility":"public","type":"boolean","description":"Defines the selected state of the <code>ui5-option</code>.","defaultValue":"false"},{"name":"stableDomRef","visibility":"public","since":"1.0.0-rc.11","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the <code>ui5-select</code> inside an HTML Form element when this <code>ui5-option</code> is selected. For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Panel","basename":"Panel","tagname":"ui5-panel","resource":"Panel.js","module":"Panel","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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> A panel consists of a title bar with a header text or custom header. <br> The content area can contain an arbitrary set of controls. 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><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>content - Used to style the wrapper of the content</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Panel\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","type":"string","description":"Sets the accessible aria name of the <code>ui5-panel</code>.","defaultValue":"\"\""},{"name":"accessibleRole","visibility":"public","type":"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>.","defaultValue":"\"Form\""},{"name":"collapsed","visibility":"public","type":"boolean","description":"Indicates whether the <code>ui5-panel</code> is collapsed and only the header is displayed.","defaultValue":"false"},{"name":"fixed","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-panel</code> is in a fixed state that is not expandable/collapsible by user interaction.","defaultValue":"false"},{"name":"headerLevel","visibility":"public","type":"TitleLevel","description":"Defines the \"aria-level\" of <code>ui5-panel</code> heading, set by the <code>headerText</code>. <br><br> Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>.","defaultValue":"\"H2\""},{"name":"headerText","visibility":"public","type":"string","description":"This property is used to set the header text of the <code>ui5-panel</code>. 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.","defaultValue":"\"\""},{"name":"noAnimation","visibility":"public","since":"1.0.0-rc.16","type":"boolean","description":"Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Determines the content of the <code>ui5-panel</code>. The content is visible only when the <code>ui5-panel</code> is expanded."},{"name":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-panel</code> header area. <br><br> <b>Note:</b> When a header is provided, the <code>headerText</code> property is ignored."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Popover","basename":"Popover","tagname":"ui5-popover","resource":"Popover.js","module":"Popover","visibility":"public","since":"1.0.0-rc.6","extends":"Popup","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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Popover.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"allowTargetOverlap","visibility":"public","type":"boolean","description":"Determines if there is no enough space, the <code>ui5-popover</code> can be placed over the target.","defaultValue":"false"},{"name":"headerText","visibility":"public","type":"string","description":"Defines the header text. <br><br> <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.","defaultValue":"\"\""},{"name":"hideBackdrop","visibility":"public","since":"1.0.0-rc.10","type":"boolean","description":"Defines whether the block layer will be shown if modal property is set to true.","defaultValue":"false"},{"name":"horizontalAlign","visibility":"public","type":"PopoverHorizontalAlign","description":"Determines the horizontal alignment of the <code>ui5-popover</code>. <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>","defaultValue":"\"Center\""},{"name":"modal","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-popover</code> should close when clicking/tapping outside of the popover. If enabled, it blocks any interaction with the background.","defaultValue":"false"},{"name":"noArrow","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-popover</code> arrow is hidden.","defaultValue":"false"},{"name":"placementType","visibility":"public","type":"PopoverPlacementType","description":"Determines on which side the <code>ui5-popover</code> 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>","defaultValue":"\"Right\""},{"name":"verticalAlign","visibility":"public","type":"PopoverVerticalAlign","description":"Determines the vertical alignment of the <code>ui5-popover</code>. <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>","defaultValue":"\"Center\""}],"slots":[{"name":"footer","visibility":"public","type":"HTMLElement[]","description":"Defines the footer HTML Element."},{"name":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the header HTML Element."}],"methods":[{"name":"openBy","visibility":"public","parameters":[{"name":"opener","type":"HTMLElement","optional":false,"description":"the element that the popover is opened by"},{"name":"preventInitialFocus","type":"boolean","optional":false,"defaultValue":false,"description":"prevents applying the focus inside the popover"}],"description":"Opens the popover."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Popup","basename":"Popup","resource":"Popup.js","module":"Popup","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> Base class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components, it is highly recommended that you extend at least Popup in order to have consistency with other popups in terms of modal behavior and z-index management.\n\n1. The Popup class handles modality: - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not - Derivatives may call the \"blockBodyScrolling\" and \"unblockBodyScrolling\" static methods to temporarily remove scrollbars on the body - Derivatives may call the \"open\" and \"close\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n2. Provides blocking layer (relevant for modal popups only): - It is in the static area - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus: - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The Popup class automatically assigns \"z-index\" - Each time a popup is opened, it gets a higher than the previously opened popup z-index\n\n5. The template of this component exposes two inline partials you can override in derivatives: - beforeContent (upper part of the box, useful for header/title/close button) - afterContent (lower part, useful for footer/action buttons)","constructor":{"visibility":"public"},"properties":[{"name":"_ariaLabel","visibility":"protected","type":"undefined","description":"Ensures ariaLabel is never null or empty string"},{"name":"_ariaLabelledBy","visibility":"protected","type":"undefined","description":"Return the ID of an element in the shadow DOM that is going to label this popup"},{"name":"_ariaModal","visibility":"protected","type":"undefined","description":"Return the value for aria-modal for this popup"},{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.15","type":"String","description":"Sets the accessible aria name of the component.","defaultValue":"\"\""},{"name":"initialFocus","visibility":"public","type":"string","description":"Defines the ID of the HTML Element, which will get the initial focus.","defaultValue":"\"\""},{"name":"isModal","visibility":"protected","type":"undefined","description":"Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property)"},{"name":"preventFocusRestore","visibility":"public","since":"1.0.0-rc.8","type":"boolean","description":"Defines if the focus should be returned to the previously focused element, when the popup closes.","defaultValue":"false"},{"name":"shouldHideBackdrop","visibility":"protected","type":"undefined","description":"Implement this getter with relevant logic in order to hide the block layer (f.e. based on a public property)"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the content of the Popup."},{"name":"footer","module":"Dialog","visibility":"public","type":"HTMLElement[]","description":"Defines the footer HTML Element.","resource":"Dialog.js"},{"name":"header","module":"Dialog","visibility":"public","type":"HTMLElement[]","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.","resource":"Dialog.js"}],"events":[{"name":"after-close","visibility":"public","description":"Fired after the component is closed. This event does not bubble."},{"name":"after-open","visibility":"public","description":"Fired after the component is opened. This event does not bubble."},{"name":"before-close","visibility":"public","parameters":[{"name":"escPressed","type":"Boolean","description":"Indicates that <code>ESC</code> key has triggered the event."}],"description":"Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble."},{"name":"before-open","visibility":"public","description":"Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble."}],"methods":[{"name":"_addOpenedPopup","visibility":"protected","description":"Adds the popup to the \"opened popups registry\""},{"name":"_removeOpenedPopup","visibility":"protected","description":"Removes the popup from the \"opened popups registry\""},{"name":"applyFocus","visibility":"public","description":"Focuses the element denoted by <code>initialFocus</code>, if provided, or the first focusable element otherwise."},{"name":"applyInitialFocus","visibility":"protected","description":"Use this method to focus the element denoted by \"initialFocus\", if provided, or the first focusable element otherwise."},{"name":"blockBodyScrolling","visibility":"protected","static":true,"description":"Temporarily removes scrollbars from the body"},{"name":"close","visibility":"public","description":"Hides the block layer (for modal popups only)"},{"name":"hide","visibility":"protected","description":"Sets \"none\" display to the popup"},{"name":"isOpen","visibility":"public","returnValue":{"type":"boolean"},"description":"Override this method to provide custom logic for the popup's open/closed state. Maps to the \"opened\" property by default."},{"name":"open","visibility":"public","parameters":[{"name":"preventInitialFocus","type":"boolean","optional":false,"description":"prevents applying the focus inside the popup"}],"description":"Shows the block layer (for modal popups only) and sets the correct z-index for the purpose of popup stacking"},{"name":"resetFocus","visibility":"protected","description":"Returns the focus to the previously focused element"},{"name":"show","visibility":"protected","description":"Sets \"block\" display to the popup. The property can be overriden by derivatives of Popup."},{"name":"unblockBodyScrolling","visibility":"protected","static":true,"description":"Restores scrollbars on the body, if needed"}]},{"kind":"class","name":"sap.ui.webcomponents.main.ProgressIndicator","basename":"ProgressIndicator","tagname":"ui5-progress-indicator","resource":"ProgressIndicator.js","module":"ProgressIndicator","visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","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 <code>ui5-progress-indicator</code> is filled with a color.\n\n<h3>Responsive Behavior</h3> You can change the size of the Rating Indicator by changing its <code>width</code> or <code>height</code> CSS properties. <br> Example: <code>&lt;ui5-progress-indicator style=\"height: 2rem; width: 6rem;\">&lt;/ui5-progress-indicator></code>\n\nFor the <code>ui5-progress-indicator</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/ProgressIndicator.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-progress-indicator</code> is in disabled state.","defaultValue":"false"},{"name":"hideValue","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-progress-indicator</code> value is shown.","defaultValue":"false"},{"name":"value","visibility":"public","type":"Integer","description":"Specifies the numerical value in percent for the length of the <code>ui5-progress-indicator</code>.\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.","defaultValue":"0"},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-progress-indicator</code>. <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>","defaultValue":"\"None\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.RadioButton","basename":"RadioButton","tagname":"ui5-radiobutton","resource":"RadioButton.js","module":"RadioButton","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-radiobutton</code> component enables users to select a single option from a set of options. When a <code>ui5-radiobutton</code> is selected by the user, the <code>select</code> event is fired. When a <code>ui5-radiobutton</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-radiobutton</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-radiobutton</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>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-radiobutton</code> is disabled. <br><br> <b>Note:</b> A disabled <code>ui5-radiobutton</code> is completely noninteractive.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Defines the name of the <code>ui5-radiobutton</code>. 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 <code>ui5-radiobutton</code> so that it can be submitted as part of an HTML form.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-radiobutton</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-radiobutton</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"selected","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-radiobutton</code> is selected or not. <br><br> <b>Note:</b> The property value can be changed with user interaction, either by cliking/tapping on the <code>ui5-radiobutton</code>, or by using the Space or Enter key.","defaultValue":"false"},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-radiobutton</code>.","defaultValue":"\"\""},{"name":"value","visibility":"public","type":"string","description":"Defines the form value of the <code>ui5-radiobutton</code>. 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>","defaultValue":"\"\""},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-radiobutton</code>. <br><br> Available options are: <ul> <li><code>None</code></li> <li><code>Error</code></li> <li><code>Warning</code></li> </ul>","defaultValue":"\"None\""},{"name":"wrap","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-radiobutton</code> text wraps when there is not enough space. <br><br> <b>Note:</b> By default, the text truncates when there is not enough space.","defaultValue":"false"}],"slots":[],"events":[{"name":"select","visibility":"public","description":"Fired when the <code>ui5-radiobutton</code> selected state changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.RangeSlider","basename":"RangeSlider","tagname":"ui5-range-slider","resource":"RangeSlider.js","module":"RangeSlider","visibility":"public","since":"1.0.0-rc.11","extends":"SliderBase","description":"Represents a numerical interval and two handles (grips) to select a sub-range within it.\n\n<h3 class=\"comment-api-title\">Overview</h3> 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 usecase 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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/RangeSlider\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"endValue","visibility":"public","type":"Float","description":"Defines end point of a selection - position of a second handle on the slider. <br><br>","defaultValue":"100"},{"name":"startValue","visibility":"public","type":"Float","description":"Defines start point of a selection - position of a first handle on the slider. <br><br>","defaultValue":"0"}],"slots":[],"methods":[{"name":"focusInnerElement","visibility":"protected","description":"Manage the focus between the focusable inner elements within the component.\n\nOn initial focusin or if the whole range is affected by the user interaction set the focus on the progress selection, otherwise on one of the Range Slider handles based on the determined affected value by the user action.\n\nIf one of the handles came across the other one in result of a user action switch the focus between them to keep it visually consistent.\n\nNote: In some cases this function is going to get called twice on one user action.\n\n1. When the focus is initially set to an inner element it is done in the very beginning, of an interaction - on 'mousedown' and 'keydown' events. The focus of the host custom element is still not being received, causining an immediate focusout that we prevent by calling this function once again.\n\n2. When the focused is manually switched from one inner element to another. The focusout handler is one and the same for all focusable parts within the Range Slider and when is called it checks if it should keep the focus within the component and which part of it should get focused if that is the case."}]},{"kind":"class","name":"sap.ui.webcomponents.main.RatingIndicator","basename":"RatingIndicator","tagname":"ui5-rating-indicator","resource":"RatingIndicator.js","module":"RatingIndicator","visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","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 reccomended 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>Usage</h3>\n\nFor the <code>ui5-rating-indicator</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/RatingIndicator.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-rating-indicator</code> is disabled.\n\n<br><br> <b>Note:</b> A disabled <code>ui5-rating-indicator</code> is completely noninteractive.","defaultValue":"false"},{"name":"maxValue","visibility":"public","type":"Integer","description":"The number of displayed rating symbols","defaultValue":"5"},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-rating-indicator</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-rating-indicator</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"value","visibility":"public","type":"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>","defaultValue":"0"}],"slots":[],"events":[{"name":"change","visibility":"public","description":"The event is fired when the value changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ResponsivePopover","basename":"ResponsivePopover","tagname":"ui5-responsive-popover","resource":"ResponsivePopover.js","module":"ResponsivePopover","visibility":"public","since":"1.0.0-rc.6","extends":"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.","constructor":{"visibility":"public"},"methods":[{"name":"close","visibility":"public","description":"Closes the popover/dialog."},{"name":"open","visibility":"public","parameters":[{"name":"opener","type":"HTMLElement","optional":false,"description":"the element that the popover is opened by"},{"name":"preventInitialFocus","type":"boolean","optional":false,"defaultValue":false,"description":"prevents applying the focus inside the popup"}],"description":"Opens popover on desktop and dialog on mobile."}]},{"kind":"class","name":"sap.ui.webcomponents.main.SegmentedButton","basename":"SegmentedButton","tagname":"ui5-segmented-button","appenddocs":"SegmentedButtonItem","resource":"SegmentedButton.js","module":"SegmentedButton","visibility":"public","since":"1.0.0-rc.6","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"selectedItem","readonly":"true","visibility":"public","type":"ui5-segmented-button-item","description":"Currently selected item."}],"slots":[{"name":"default","visibility":"public","type":"sap.ui.webcomponents.main.IButton[]","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."}],"events":[{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedItem","type":"HTMLElement","description":"the pressed item."}],"description":"Fired when the selected item changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.SegmentedButtonItem","basename":"SegmentedButtonItem","tagname":"ui5-segmented-button-item","resource":"SegmentedButtonItem.js","module":"SegmentedButtonItem","static":true,"visibility":"public","extends":"ToggleButton","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>","constructor":{"visibility":"public"},"properties":[{"name":"design","visibility":"public","type":"undefined","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"name":"iconEnd","visibility":"public","type":"undefined","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"name":"iconSize","visibility":"public","type":"undefined","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."},{"name":"submits","visibility":"public","type":"undefined","description":"<b>Note:</b> The property is inherited and not supported. If set, it won't take any effect."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Select","basename":"Select","tagname":"ui5-select","appenddocs":"Option","resource":"Select.js","module":"Select","visibility":"public","since":"0.8.0","extends":"sap.ui.webcomponents.base.UI5Element","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. If the <code>ui5-select</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<h3>Stable DOM Refs</h3>\n\nIn the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for: <ul> <li>Every <code>ui5-option</code> that you provide. Example: <code><ui5-option stable-dom-ref=\"option1\"></ui5-option></code></li> </ul>\n\n<h3>ES6 Module Import</h3> <code>import \"@ui5/webcomponents/dist/Select\";</code> <br> <code>import \"@ui5/webcomponents/dist/Option\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether <code>ui5-select</code> is in disabled state. <br><br> <b>Note:</b> A disabled <code>ui5-select</code> is noninteractive.","defaultValue":"false"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-select</code> will be submitted in an HTML form. The value of the <code>ui5-select</code> 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.","defaultValue":"\"\""},{"name":"required","visibility":"public","since":"1.0.0-rc.9","type":"Boolean","description":"Defines whether the <code>ui5-select</code> is required.","defaultValue":"false"},{"name":"selectedOption","readonly":"true","visibility":"public","type":"ui5-option","description":"Currently selected option."},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-select</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-select</code> 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":"valueStateMessage","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-select</code>. <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-select</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","parameters":[{"name":"selectedOption","type":"HTMLElement","description":"the selected option."}],"description":"Fired when the selected option changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Slider","basename":"Slider","tagname":"ui5-slider","resource":"Slider.js","module":"Slider","visibility":"public","since":"1.0.0-rc.11","extends":"SliderBase","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</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 usecase 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 to the desired value</li> <li>Click/tap on the range bar to move the handle to that location</li> </ul>\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Slider\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"value","visibility":"public","type":"Float","description":"Current value of the slider","defaultValue":"0"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.SliderBase","basename":"SliderBase","tagname":"ui5-slider","resource":"SliderBase.js","module":"SliderBase","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the slider is in disabled state.","defaultValue":"false"},{"name":"labelInterval","visibility":"public","type":"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.","defaultValue":"0"},{"name":"max","visibility":"public","type":"Float","description":"Defines the maximum value of the slider","defaultValue":"100"},{"name":"min","visibility":"public","type":"Float","description":"Defines the minimum value of the slider","defaultValue":"0"},{"name":"showTickmarks","visibility":"public","type":"boolean","description":"Enables tick marks visualization for each step. <br><br> <b>Note:</b> The step must be a positive number.","defaultValue":"false"},{"name":"showTooltip","visibility":"public","type":"boolean","description":"Enables handle tooltip displaying the current value.","defaultValue":"false"},{"name":"step","visibility":"public","type":"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.","defaultValue":"1"}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the value changes and the user has finished interacting with the slider."},{"name":"input","visibility":"public","description":"Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging."}],"methods":[{"name":"clipValue","visibility":"protected","static":true,"description":"Locks the given value between min and max boundaries based on slider properties"},{"name":"computedValueFromPageX","visibility":"protected","static":true,"description":"Computes the new value (in %) from the pageX position of the cursor. Returns the value rounded to a precision of at most 2 digits after decimal point."},{"name":"focusInnerElement","visibility":"protected","description":"Manages the focus between the component's inner elements"},{"name":"getPageXValueFromEvent","visibility":"protected","static":true,"description":"Gets pageX value from event on user interaction with the Slider"},{"name":"getSteppedValue","visibility":"protected","static":true,"description":"\"Stepify\" the raw value - calculate the new value depending on the specified step property"},{"name":"getStoredPropertyState","visibility":"protected","description":"Returns the last stored value of a property"},{"name":"getValueFromInteraction","visibility":"protected","static":true,"description":"Sets the slider value from an event"},{"name":"handleDownBase","visibility":"protected","description":"Called when the user starts interacting with the slider. After a down event on the slider root, listen for move events on window, so the slider value is updated even if the user drags the pointer outside the slider root."},{"name":"handleUpBase","visibility":"protected","description":"Called when the user finish interacting with the slider Fires an <code>change</code> event indicating a final value change, after user interaction is finished."},{"name":"isCurrentStateOutdated","visibility":"protected","description":"In order to always keep the visual UI representation and the internal state in sync, the component has a 'state storage' that is updated when the current state is changed due to a user action.\n\nCheck if the previously saved state is outdated. That would mean a property has been changed programatically because the previous state is always updated in the interaction handlers.\n\nWill return true if any of the properties is not equal to its previously stored value."},{"name":"isPropertyUpdated","visibility":"protected","description":"Check if one or more properties have been updated compared to their last saved values in the state storage."},{"name":"storePropertyState","visibility":"protected","description":"Updates the previously saved in the _stateStorage values of one or more properties."},{"name":"syncUIAndState","visibility":"protected","description":"Normalize current properties, update the previously stored state."},{"name":"updateValue","visibility":"protected","description":"Updates value property of the component that has been changed due to a user action. Fires an <code>input</code> event indicating a value change via interaction that is not yet finished."}]},{"kind":"class","name":"sap.ui.webcomponents.main.StandardListItem","basename":"StandardListItem","tagname":"ui5-li","resource":"StandardListItem.js","module":"StandardListItem","static":true,"visibility":"public","extends":"ListItem","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>.","constructor":{"visibility":"public"},"properties":[{"name":"accessibleName","visibility":"public","since":"1.0.0-rc.15","type":"string","description":"Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present.","defaultValue":"\"\""},{"name":"description","visibility":"public","since":"0.8.0","type":"string","description":"Defines the description displayed right under the item text, if such is present."},{"name":"icon","visibility":"public","type":"string","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous buil-in icons. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."},{"name":"iconEnd","visibility":"public","type":"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>.","defaultValue":"false"},{"name":"image","visibility":"public","type":"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."},{"name":"info","visibility":"public","since":"0.13.0","type":"string","description":"Defines the <code>info</code>, displayed in the end of the list item."},{"name":"infoState","visibility":"public","since":"0.13.0","type":"ValueState","description":"Defines the state of the <code>info</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Erorr\"</code>.","defaultValue":"\"None\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-li</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.StepInput","basename":"StepInput","tagname":"ui5-step-input","resource":"StepInput.js","module":"StepInput","visibility":"public","since":"1.0.0-rc.12","extends":"UI5Element","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> <i>When to use</i> <ul> <li>To adjust amounts, quantities, or other values quickly.</li> <li>To adjust values for a specific step.</li> </ul>\n\n<i>When not to use</i> <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\nFor the <code>ui5-step-input</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/StepInput.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-step-input</code> is displayed as disabled.","defaultValue":"false"},{"name":"max","visibility":"public","type":"Float","description":"Defines a maximum value of the <code>ui5-step-input</code>."},{"name":"min","visibility":"public","type":"Float","description":"Defines a minimum value of the <code>ui5-step-input</code>."},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-step-input</code> 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 <code>ui5-step-input</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.","defaultValue":"\"\""},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint, intended to aid the user with data entry when the <code>ui5-step-input</code> 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 <code>ui5-step-input</code> appear empty - without placeholder or format pattern.","defaultValue":"undefined"},{"name":"readonly","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-step-input</code> is displayed as read-only.","defaultValue":"false"},{"name":"required","visibility":"public","type":"Boolean","description":"Defines whether the <code>ui5-step-input</code> is required.","defaultValue":"false"},{"name":"step","visibility":"public","type":"Float","description":"Defines a step of increasing/decreasing the value of the <code>ui5-step-input</code>.","defaultValue":"1"},{"name":"value","visibility":"public","type":"Float","description":"Defines a value of the <code>ui5-step-input</code>.","defaultValue":"0"},{"name":"valuePrecision","visibility":"public","type":"Integer","description":"Determines the number of digits after the decimal point of the <code>ui5-step-input</code>.","defaultValue":"0"},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-step-input</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"valueStateMessage","visibility":"public","type":"HTMLElement","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-step-input</code>. <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-step-input</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by pressing Enter or on focusout."}]},{"kind":"class","name":"sap.ui.webcomponents.main.SuggestionItem","basename":"SuggestionItem","tagname":"ui5-suggestion-item","resource":"SuggestionItem.js","module":"SuggestionItem","static":true,"visibility":"public","extends":"UI5Element","description":"The <code>ui5-suggestion-item</code> represents the suggestion item of the <code>ui5-input</code>.","constructor":{"visibility":"public"},"properties":[{"name":"description","visibility":"public","type":"string","description":"Defines the description displayed right under the item text, if such is present."},{"name":"group","visibility":"public","type":"boolean","description":"Defines the item to be displayed as a group item. <br><br> <b>Note:</b> When set, the other properties, such as <code>image</code>, <code>icon</code>, <code>description</code>, etc. will be omitted and only the <code>text</code> will be displayed.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous buil-in icons. To find all the available icons, see the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>."},{"name":"iconEnd","visibility":"public","type":"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>.","defaultValue":"false"},{"name":"image","visibility":"public","type":"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."},{"name":"info","visibility":"public","type":"string","description":"Defines the <code>info</code>, displayed in the end of the item."},{"name":"infoState","visibility":"public","type":"ValueState","description":"Defines the state of the <code>info</code>. <br><br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code> and <code>\"Erorr\"</code>.","defaultValue":"\"None\""},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-suggestion-item</code>.","defaultValue":"\"\""},{"name":"type","visibility":"public","since":"1.0.0-rc.8","type":"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.","defaultValue":"\"Active\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Switch","basename":"Switch","tagname":"ui5-switch","resource":"Switch.js","module":"Switch","visibility":"public","since":"0.8.0","extends":"sap.ui.webcomponents.base.UI5Element","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 (&lt;ui5-switch style=\"width: 200px\">), 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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Switch\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"checked","visibility":"public","type":"boolean","description":"Defines if the <code>ui5-switch</code> is checked. <br><br> <b>Note:</b> The property can be changed with user interaction, either by cliking/tapping on the <code>ui5-switch</code>, or by pressing the <code>Enter</code> or <code>Space</code> key.","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-switch</code> is disabled. <br><br> <b>Note:</b> A disabled <code>ui5-switch</code> is noninteractive.","defaultValue":"false"},{"name":"graphical","visibility":"public","type":"boolean","description":"Defines the <code>ui5-switch</code> type. <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>.","defaultValue":"false"},{"name":"textOff","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-switch</code> when switched off. <br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).","defaultValue":"\"\""},{"name":"textOn","visibility":"public","type":"string","description":"Defines the text of the <code>ui5-switch</code> when switched on.\n\n<br><br> <b>Note:</b> We recommend using short texts, up to 3 letters (larger texts would be cut off).","defaultValue":"\"\""}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the <code>ui5-switch</code> checked state changes."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Tab","basename":"Tab","tagname":"ui5-tab","resource":"Tab.js","module":"Tab","static":true,"visibility":"public","extends":"UI5Element","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.","constructor":{"visibility":"public"},"properties":[{"name":"additionalText","visibility":"public","type":"string","description":"Represents the \"additionalText\" text, which is displayed in the tab filter.","defaultValue":"\"\""},{"name":"disabled","visibility":"public","type":"boolean","description":"Enabled items can be selected.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"string","description":"Defines the icon source URI to be displayed as graphical element within the <code>ui5-tab</code>. The SAP-icons font provides numerous built-in icons. See all the available icons in the <ui5-link target=\"_blank\" href=\"https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\" class=\"api-table-content-cell-link\">Icon Explorer</ui5-link>.","defaultValue":"\"\""},{"name":"selected","visibility":"public","type":"boolean","description":"Specifies if the <code>ui5-tab</code> is selected.","defaultValue":"false"},{"name":"semanticColor","visibility":"public","type":"SemanticColor","description":"Defines the <code>ui5-tab</code> semantic color. <br><br> The color is applied to: <ul> <li>the <code>ui5-tab</code> icon</li> <li>the <code>text</code> when <code>ui5-tab</code> overflows</li> <li>the tab selection line</li> </ul>\n\n<br><br> Available semantic colors 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 color value depends on the current theme.","defaultValue":"\"Default\""},{"name":"stableDomRef","visibility":"public","since":"1.0.0-rc.8","type":"undefined","description":"Defines the stable selector that you can use via getStableDomRef method."},{"name":"text","visibility":"public","type":"string","description":"The text to be displayed for the item.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the tab content."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TabContainer","basename":"TabContainer","tagname":"ui5-tabcontainer","appenddocs":"Tab TabSeparator","resource":"TabContainer.js","module":"TabContainer","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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 vertical line</li> </ul>\n\n<h3>Stable DOM Refs</h3>\n\nIn the context of <code>ui5-tabcontainer</code>, you can provide a custom stable DOM refs for: <ul> <li>Each <code>ui5-tab</code> Example: <code><ui5-tab stable-dom-ref=\"in-stock\"></ui5-tab></code></li> </ul>\n\n<h3>ES6 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>)","constructor":{"visibility":"public"},"properties":[{"name":"collapsed","visibility":"public","type":"boolean","description":"Defines whether the tab content is collapsed.","defaultValue":"false"},{"name":"fixed","visibility":"public","type":"boolean","description":"Defines whether the tabs are in a fixed state that is not expandable/collapsible by user interaction.","defaultValue":"false"},{"name":"showOverflow","visibility":"public","type":"boolean","description":"Defines whether the overflow select list is displayed. <br><br> The overflow select list represents a list, where all tab filters are displayed so that it's easier for the user to select a specific tab filter.","defaultValue":"false"},{"name":"tabLayout","visibility":"public","type":"TabLayout","description":"Defines the alignment of the <code>main text</code> and the <code>additionalText</code> of a tab.\n\n<br><br> <b>Note:</b> The <code>main text</code> and the <code>additionalText</code> would be displayed vertically by defualt, 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>","defaultValue":"\"Standard\""},{"name":"tabsPlacement","visibility":"public","since":"1.0.0-rc.7","type":"TabContainerTabsPlacement","description":"Defines the placement of the tab strip (tab buttons area) relative to the actual tabs' content. <br><br> <b>Note:</b> By default the tab strip is displayed above the tabs' content area and this is the recommended layout for most scenarios. Set to <code>Bottom</code> only when the <code>ui5-tabcontainer</code> is at the bottom of the page and you want the tab strip to act as a menu.","defaultValue":"\"Top\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","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":"overflowButton","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","description":"Defines the button which will open the overflow menu. If nothing is provided to this slot, the default button will be used."}],"events":[{"name":"tab-select","visibility":"public","parameters":[{"name":"tab","type":"HTMLElement","description":"The selected <code>tab</code>."},{"name":"tabIndex","type":"Number","description":"The selected <code>tab</code> index."}],"description":"Fired when a tab is selected."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Table","basename":"Table","tagname":"ui5-table","appenddocs":"TableColumn TableRow TableCell","resource":"Table.js","module":"Table","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>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>)","constructor":{"visibility":"public"},"properties":[{"name":"busy","visibility":"public","since":"1.0.0-rc.12","type":"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.","defaultValue":"false"},{"name":"growing","visibility":"public","since":"1.0.0-rc.12","type":"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>Limitations:</b> <code>growing=\"Scroll\"</code> is not supported for Internet Explorer, and the component will fallback to <code>growing=\"Button\"</code>.","defaultValue":"\"None\""},{"name":"moreSubtext","visibility":"public","since":"1.0.0-rc.11","type":"string","description":"Defines the subtext that will be displayed under the <code>moreText</code>.\n\n<br><br> <b>Note:</b> This property takes effect if <code>growing</code> is set to <code>Button</code>.","defaultValue":"\"\""},{"name":"moreText","visibility":"public","since":"1.0.0-rc.11","type":"string","description":"Defines the text that will be displayed inside the <code>More</code> 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>.","defaultValue":"\"\""},{"name":"noDataText","visibility":"public","type":"string","description":"Defines the text that will be displayed when there is no data and <code>showNoData</code> is present.","defaultValue":"\"\""},{"name":"showNoData","visibility":"public","type":"boolean","description":"Defines if the value of <code>noDataText</code> will be diplayed when there is no rows present in the table.","defaultValue":"false"},{"name":"stickyColumnHeader","visibility":"public","type":"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>Limitations:</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>","defaultValue":"false"}],"slots":[{"name":"columns","visibility":"public","type":"HTMLElement[]","description":"Defines the configuration for the columns of the <code>ui5-table</code>. <br><br> <b>Note:</b> Use <code>ui5-table-column</code> for the intended design."},{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-table</code> rows. <br><br> <b>Note:</b> Use <code>ui5-table-row</code> for the intended design."}],"events":[{"name":"load-more","visibility":"public","since":"1.0.0-rc.11","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>."},{"name":"popin-change","visibility":"public","since":"1.0.0-rc.6","parameters":[{"name":"poppedColumns","type":"Array","description":"popped-in columns."}],"description":"Fired when the <code>ui5-table-column</code> is shown as a pop-in instead of hiding it."},{"name":"row-click","visibility":"public","parameters":[{"name":"row","type":"HTMLElement","description":"the clicked row."}],"description":"Fired when a row is clicked."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TableCell","basename":"TableCell","tagname":"ui5-table-cell","resource":"TableCell.js","module":"TableCell","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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.","constructor":{"visibility":"public"},"properties":[],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Specifies the content of the <code>ui5-table-cell</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TableColumn","basename":"TableColumn","tagname":"ui5-table-column","resource":"TableColumn.js","module":"TableColumn","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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.","constructor":{"visibility":"public"},"properties":[{"name":"demandPopin","visibility":"public","type":"boolean","description":"According to your <code>minWidth</code> settings, the <code>ui5-table-column</code> 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.","defaultValue":"false"},{"name":"minWidth","visibility":"public","type":"number","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>40em</code> shows this column on tablet (and desktop) but hides it on mobile. <br> For further responsive design options, see <code>demandPopin</code> property.","defaultValue":"Infinity"},{"name":"popinText","visibility":"public","type":"string","description":"The text for the column when it pops in.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the content of the column header."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TableRow","basename":"TableRow","tagname":"ui5-table-row","resource":"TableRow.js","module":"TableRow","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>.","constructor":{"visibility":"public"},"properties":[],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the cells of the <code>ui5-table-row</code>. <br><br> <b>Note:</b> Use <code>ui5-table-cell</code> for the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TabSeparator","basename":"TabSeparator","tagname":"ui5-tab-separator","resource":"TabSeparator.js","module":"TabSeparator","static":true,"visibility":"public","extends":"UI5Element","description":"The <code>ui5-tab-separator</code> represents a vertical line to separate tabs inside a <code>ui5-tabcontainer</code>.","constructor":{"visibility":"public"}},{"kind":"class","name":"sap.ui.webcomponents.main.TextArea","basename":"TextArea","tagname":"ui5-textarea","resource":"TextArea.js","module":"TextArea","visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-textarea</code> component provides large spaces for text entries in the form of multiple rows. It has the functionality of the <code>TextField</code> with the additional functionality for multiline texts. <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>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/TextArea\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"disabled","visibility":"public","type":"boolean","description":"Indicates whether the user can interact with the component or not. <br><br> <b>Note:</b> Disabled components cannot be focused and they are out of the tab chain.","defaultValue":"false"},{"name":"growing","visibility":"public","type":"boolean","description":"Enables the <code>ui5-textarea</code> to automatically grow and shrink dynamically with its content. <br><br> <b>Note:</b> If set to <code>true</code>, the CSS <code>height</code> property is ignored.","defaultValue":"false"},{"name":"growingMaxLines","visibility":"public","type":"number","description":"Defines the maximum number of lines that the Web Component can grow.","defaultValue":"0"},{"name":"maxlength","visibility":"public","type":"number","description":"Defines the maximum number of characters that the <code>value</code> can have.","defaultValue":"null"},{"name":"name","visibility":"public","type":"string","description":"Determines the name with which the <code>ui5-textarea</code> 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 <code>ui5-textarea</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.","defaultValue":"\"\""},{"name":"placeholder","visibility":"public","type":"string","description":"Defines a short hint intended to aid the user with data entry when the component has no value.","defaultValue":"\"\""},{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-textarea</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-textarea</code> is not editable, but still provides visual feedback upon user interaction.","defaultValue":"false"},{"name":"required","visibility":"public","since":"1.0.0-rc.3","type":"boolean","description":"Defines whether the <code>ui5-textarea</code> is required.","defaultValue":"false"},{"name":"rows","visibility":"public","type":"number","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>","defaultValue":"0"},{"name":"showExceededText","visibility":"public","type":"boolean","description":"Determines whether the characters exceeding the maximum allowed character count are visible in the <code>ui5-textarea</code>. <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 <code>ui5-textarea</code> displays their number.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines the value of the Web Component.","defaultValue":"\"\""},{"name":"valueState","visibility":"public","since":"1.0.0-rc.7","type":"ValueState","description":"Defines the value state of the <code>ui5-textarea</code>. <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.","defaultValue":"\"None\""}],"slots":[{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.7","type":"HTMLElement[]","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-textarea</code>.\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 <code>ui5-textarea</code> has <code>valueState</code> of type <code>Information</code>, <code>Warning</code> or <code>Error</code>."}],"events":[{"name":"change","visibility":"public","description":"Fired when the text has changed and the focus leaves the <code>ui5-textarea</code>."},{"name":"input","visibility":"public","since":"1.0.0-rc.5","description":"Fired when the value of the <code>ui5-textarea</code> changes at each keystroke or when something is pasted."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TimePicker","basename":"TimePicker","tagname":"ui5-time-picker","resource":"TimePicker.js","module":"TimePicker","static":true,"visibility":"public","since":"1.0.0-rc.6","extends":"TimePickerBase","description":"<h3 class=\"comment-api-title\">Overview</h3> The <code>ui5-time-picker</code> component provides an input field with assigned sliders which opens 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 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 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\" class=\"api-table-content-cell-link\">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>","constructor":{"visibility":"public"},"properties":[{"name":"dateValue","readonly":"true","visibility":"public","type":"Date","description":"Currently selected date represented as JavaScript Date instance"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.TimePickerBase","basename":"TimePickerBase","resource":"TimePickerBase.js","module":"TimePickerBase","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","constructor":{"visibility":"public"},"properties":[{"name":"_formatPattern","visibility":"protected","type":"undefined"},{"name":"_placeholder","visibility":"protected","type":"undefined"},{"name":"disabled","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-time-picker</code> is displayed as disabled.","defaultValue":"false"},{"name":"formatPattern","module":"TimePicker","visibility":"public","type":"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)","defaultValue":"\"\"","resource":"TimePicker.js"},{"name":"openIconName","visibility":"protected","type":"undefined"},{"name":"placeholder","module":"TimePicker","visibility":"public","type":"string","description":"Defines a short hint, intended to aid the user with data entry when the <code>ui5-time-picker</code> 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 <code>ui5-time-picker</code> appear empty - without placeholder or format pattern.","defaultValue":"undefined","resource":"TimePicker.js"},{"name":"readonly","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-time-picker</code> is displayed as readonly.","defaultValue":"false"},{"name":"value","visibility":"public","type":"string","description":"Defines a formatted time value.","defaultValue":"undefined"},{"name":"valueState","visibility":"public","type":"ValueState","description":"Defines the value state of the <code>ui5-time-picker</code>. <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>","defaultValue":"\"None\""}],"slots":[{"name":"valueStateMessage","visibility":"public","since":"1.0.0-rc.8","type":"HTMLElement","description":"Defines the value state message that will be displayed as pop up under the <code>ui5-time-picker</code>. <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-time-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state."}],"events":[{"name":"change","visibility":"public","description":"Fired when the input operation has finished by clicking the \"OK\" button or when the text in the input field has changed and the focus leaves the input field."},{"name":"input","visibility":"public","description":"Fired when the value of the <code>ui5-time-picker</code> is changed at each key stroke."}],"methods":[{"name":"closePicker","visibility":"public","description":"Closes the picker"},{"name":"formatValue","visibility":"public","parameters":[{"name":"oDate","type":"object","optional":false,"description":"A Java Script date object to be formatted as string"}],"description":"Formats a Java Script date object into a string representing a locale date and time according to the <code>formatPattern</code> property of the TimePicker instance"},{"name":"isOpen","visibility":"public","description":"Checks if a value is valid against the current date format of the TimePicker"},{"name":"isValid","visibility":"public","parameters":[{"name":"value","type":"string","optional":false,"description":"The value to be tested against the current date format"}],"description":"Checks if a value is valid against the current format patternt of the TimePicker.\n\n<br><br> <b>Note:</b> an empty string is considered as valid value."},{"name":"openPicker","visibility":"public","description":"Opens the picker."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Title","basename":"Title","tagname":"ui5-title","resource":"Title.js","module":"Title","static":true,"visibility":"public","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"level","visibility":"public","type":"TitleLevel","description":"Defines the <code>ui5-title</code> level. Available options are: <code>\"H6\"</code> to <code>\"H1\"</code>.","defaultValue":"\"H2\""},{"name":"wrap","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-title</code> would wrap.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-title</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Toast","basename":"Toast","tagname":"ui5-toast","resource":"Toast.js","module":"Toast","static":true,"visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"duration","visibility":"public","type":"Integer","description":"Defines the duration in milliseconds for which <code>ui5-toast</code> 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.","defaultValue":"3000"},{"name":"placement","visibility":"public","type":"ToastPlacement","description":"Defines the placement of the <code>ui5-toast</code> web 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>","defaultValue":"\"BottomCenter\""}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-toast</code> web component. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}],"methods":[{"name":"show","visibility":"public","description":"Shows the <code>ui5-toast</code>."}]},{"kind":"class","name":"sap.ui.webcomponents.main.ToggleButton","basename":"ToggleButton","tagname":"ui5-togglebutton","resource":"ToggleButton.js","module":"ToggleButton","static":true,"visibility":"public","extends":"Button","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\nThe <code>ui5-togglebutton</code> component is an enhanced <code>ui5-button</code> that can be toggled between pressed and normal states. Users can use the <code>ui5-togglebutton</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-togglebutton</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-togglebutton</code>.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/ToggleButton\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"pressed","visibility":"public","type":"boolean","description":"Determines whether the <code>ui5-togglebutton</code> is displayed as pressed.","defaultValue":"false"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.Token","basename":"Token","tagname":"ui5-token","resource":"Token.js","module":"Token","visibility":"public","since":"1.0.0-rc.9","extends":"sap.ui.webcomponents.base.UI5Element","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>","constructor":{"visibility":"public"},"properties":[{"name":"readonly","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-token</code> is read-only. <br><br> <b>Note:</b> A read-only <code>ui5-token</code> can not be deleted or selected, but still provides visual feedback upon user interaction."},{"name":"selected","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-token</code> is selected or not."},{"name":"text","visibility":"public","type":"string","description":"Defines the text of the token.","defaultValue":"\"\""}],"slots":[{"name":"closeIcon","visibility":"public","since":"1.0.0-rc.9","type":"HTMLElement[]","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>"}],"events":[{"name":"select","visibility":"public","description":"Fired when the a <code>ui5-token</code> is selected by user interaction with mouse or clicking space."}]},{"kind":"class","name":"sap.ui.webcomponents.main.Tree","basename":"Tree","tagname":"ui5-tree","appenddocs":"TreeItem","resource":"Tree.js","module":"Tree","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","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>Keyboard Handling</h3> <code>ui5-tree</code> provides advanced keyboard handling. You can use the up/down arrow keys to navigate to the previous/next item in the list, representing the tree, regardless of nesting, but also the left/right arrow keys to drill down and go up the tree. If you press the right arrow on a tree node, it will expand, if not expanded. If you press the right arrow key once more, the first child of this node will be selected. If you press the left arrow on a tree node, it will collapse, if expanded. If you press the left arrow key once more, the parent node of this tree node will be selected.\n\n<h3>ES6 Module Import</h3> <code>import @ui5/webcomponents/dist/Tree.js\";</code> <br> <code>import @ui5/webcomponents/dist/TreeItem.js\";</code> (for its respective item element)","constructor":{"visibility":"public"},"properties":[{"name":"_minimal","visibility":"protected","since":"1.0.0-rc.8","type":"undefined","description":"Represents the tree in a very minimal state - icons only with no text and no toggle buttons"},{"name":"_toggleButtonEnd","visibility":"protected","since":"1.0.0-rc.8","type":"undefined","description":"Shows the toggle button at the end, rather than at the beginning of the items"},{"name":"footerText","visibility":"public","type":"string","description":"Defines the <code>ui5-tree</code> footer text.","defaultValue":"\"\""},{"name":"headerText","visibility":"public","type":"string","description":"Defines the <code>ui5-tree</code> header text. <br><br> <b>Note:</b> If the <code>header</code> slot is set, this property is ignored.","defaultValue":"\"\""},{"name":"mode","visibility":"public","type":"ListMode","description":"Defines the mode of the <code>ui5-tree</code>. 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. <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>.","defaultValue":"\"None\""},{"name":"noDataText","visibility":"public","type":"string","description":"Defines the text that is displayed when the <code>ui5-tree</code> contains no items.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of the <code>ui5-tree</code>. 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":"header","visibility":"public","type":"HTMLElement[]","description":"Defines the <code>ui5-tree</code> header. <br><br> <b>Note:</b> When the <code>header</code> slot is set, the <code>headerText</code> property is ignored."}],"events":[{"name":"item-click","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the clicked item."}],"description":"Fired when a tree item is activated."},{"name":"item-delete","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the deleted item."}],"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 <code>ui5-tree</code> <code>mode</code> property is set to <code>Delete</code>."},{"name":"item-toggle","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the toggled item."}],"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."},{"name":"selection-change","visibility":"public","parameters":[{"name":"selectedItems","type":"Array","description":"An array of the selected items."},{"name":"previouslySelectedItems","type":"Array","description":"An array of the previously selected items."}],"description":"Fired when selection is changed by user interaction in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code> modes."}],"methods":[{"name":"_getListItemForTreeItem","visibility":"protected","parameters":[{"name":"item","type":"undefined","optional":false,"description":"The tree item"}],"description":"Returns the corresponding list item for a given tree item"},{"name":"walk","visibility":"public","parameters":[{"name":"callback","type":"function","optional":false,"description":"function to execute on each node of the tree with 2 arguments: the node and the level"}],"description":"Perform Depth-First-Search walk on the tree and run a callback on each node"}]},{"kind":"class","name":"sap.ui.webcomponents.main.TreeItem","basename":"TreeItem","tagname":"ui5-tree-item","resource":"TreeItem.js","module":"TreeItem","static":true,"visibility":"public","since":"1.0.0-rc.8","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3> 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>Usage</h3> <code>ui5-tree-item</code> is an abstract element, representing a node in a <code>ui5-tree</code>. The tree itself is rendered as a list, and each <code>ui5-tree-item</code> is represented by a list item(<code>ui5-li-tree</code>) in that list. Therefore, you should only use <code>ui5-tree-item</code> directly in your apps. The <code>ui5-li-tree</code> list item is internal for the list, and not intended for public use.\n\n<h3>ES6 Module Import</h3> <code>import @ui5/webcomponents/dist/TreeItem.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"expanded","visibility":"public","type":"boolean","description":"Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.","defaultValue":"false"},{"name":"hasChildren","visibility":"public","type":"boolean","description":"Defines whether the tree node has children, even if currently no other tree nodes are slotted inside. <br> <i>Note:</i> This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons. Set this to <code>true</code> for nodes you intend to load lazily, when the user clicks the expand button. It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"String","description":"If set, an icon will be displayed before the text, representing the tree item.","defaultValue":"\"\""},{"name":"info","visibility":"public","since":"1.0.0-rc.12","type":"string","description":"Defines the <code>info</code>, displayed in the end of the tree item."},{"name":"infoState","visibility":"public","since":"1.0.0-rc.12","type":"ValueState","description":"Defines the state of the <code>info</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Erorr\"</code>.","defaultValue":"\"None\""},{"name":"selected","visibility":"public","type":"boolean","description":"Defines whether the tree node is selected by the user. Only has effect if the <code>ui5-tree</code> is in one of the following modes: in <code>SingleSelect</code>, <code>SingleSelectBegin</code>, <code>SingleSelectEnd</code> and <code>MultiSelect</code>.","defaultValue":"false"},{"name":"text","visibility":"public","type":"String","description":"Defines the text of the tree item.","defaultValue":"\"\""}],"slots":[{"name":"default","visibility":"public","type":"HTMLElement[]","description":"Defines the items of this <code>ui5-tree-item</code>."}],"methods":[{"name":"toggle","visibility":"public","description":"Call this method to manually switch the <code>expanded</code> state of a tree item."}]},{"kind":"class","name":"sap.ui.webcomponents.main.TreeListItem","basename":"TreeListItem","tagname":"ui5-li-tree","resource":"TreeListItem.js","module":"TreeListItem","visibility":"public","since":"1.0.0-rc.8","extends":"ListItem","description":"The <code>ui5-li-tree</code> represents a node in a tree structure, shown as a <code>ui5-list</code>. <br> <i>Note:</i> Do not use <code>ui5-li-tree</code> directly in your apps. Use <code>ui5-tree-item</code> instead, as it can be nested inside a <code>ui5-tree</code>. On the other hand, <code>ui5-li-tree</code> can only be slotted inside a <code>ui5-list</code>, being a list item. It may be useful if you want to build a custom tree component, for example.","constructor":{"visibility":"public"},"properties":[{"name":"_minimal","visibility":"protected","since":"1.0.0-rc.8","type":"undefined","description":"Defines whether the item shows minimal details - only icon (no text or toggle button)"},{"name":"_toggleButtonEnd","visibility":"protected","since":"1.0.0-rc.8","type":"undefined","description":"Defines whether the toggle button is shown at the end, rather than at the beginning of the item"},{"name":"expanded","visibility":"public","type":"boolean","description":"Defines whether the tree list item will show a collapse or expand icon inside its toggle button.","defaultValue":"false"},{"name":"icon","visibility":"public","type":"String","description":"If set, an icon will be displayed before the text of the tree list item.","defaultValue":"\"\""},{"name":"info","visibility":"public","since":"1.0.0-rc.12","type":"string","description":"Defines the <code>info</code>, displayed in the end of the tree item."},{"name":"infoState","visibility":"public","since":"1.0.0-rc.12","type":"ValueState","description":"Defines the state of the <code>info</code>. <br> Available options are: <code>\"None\"</code> (by default), <code>\"Success\"</code>, <code>\"Warning\"</code>, <code>\"Information\"</code> and <code>\"Erorr\"</code>.","defaultValue":"\"None\""},{"name":"level","visibility":"public","type":"Integer","description":"Defines the indentation of the tree list item. Use level 1 for tree list items, representing top-level tree nodes.","defaultValue":"1"},{"name":"showToggleButton","visibility":"public","type":"boolean","description":"Defines whether the tree list item should display an expand/collapse button.","defaultValue":"false"}],"slots":[{"name":"default","visibility":"public","type":"Node[]","description":"Defines the text of the <code>ui5-li-tree</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."}],"events":[{"name":"step-in","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the item on which right arrow was pressed."}],"description":"Fired when the user drills down into the tree hierarchy by pressing the right arrow on the tree node."},{"name":"step-out","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the item on which left arrow was pressed."}],"description":"Fired when the user goes up the tree hierarchy by pressing the left arrow on the tree node."},{"name":"toggle","visibility":"public","parameters":[{"name":"item","type":"HTMLElement","description":"the toggled item."}],"description":"Fired when the user interacts with the expand/collapse button of the tree list item."}]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarBackgroundColor","basename":"AvatarBackgroundColor","resource":"types/AvatarBackgroundColor.js","module":"types/AvatarBackgroundColor","static":true,"visibility":"public","description":"Different types of AvatarBackgroundColor.","constructor":{"visibility":"public"},"properties":[{"name":"Accent1","visibility":"public","type":"Accent1"},{"name":"Accent10","visibility":"public","type":"Accent10"},{"name":"Accent2","visibility":"public","type":"Accent2"},{"name":"Accent3","visibility":"public","type":"Accent3"},{"name":"Accent4","visibility":"public","type":"Accent4"},{"name":"Accent5","visibility":"public","type":"Accent5"},{"name":"Accent6","visibility":"public","type":"Accent6"},{"name":"Accent7","visibility":"public","type":"Accent7"},{"name":"Accent8","visibility":"public","type":"Accent8"},{"name":"Accent9","visibility":"public","type":"Accent9"},{"name":"Placeholder","visibility":"public","type":"Placeholder"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarFitType","basename":"AvatarFitType","resource":"types/AvatarFitType.js","module":"types/AvatarFitType","static":true,"visibility":"public","description":"Different types of AvatarFitType.","constructor":{"visibility":"public"},"properties":[{"name":"Contain","visibility":"public","type":"Contain"},{"name":"Cover","visibility":"public","type":"Cover"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarGroupType","basename":"AvatarGroupType","resource":"types/AvatarGroupType.js","module":"types/AvatarGroupType","static":true,"visibility":"public","description":"Different types of AvatarGroupType.","constructor":{"visibility":"public"},"properties":[{"name":"Group","visibility":"public","type":"Group","description":"The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area."},{"name":"Individual","visibility":"public","type":"Individual","description":"The avatars are displayed side-by-side and each avatar has its own click/tap area."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarShape","basename":"AvatarShape","resource":"types/AvatarShape.js","module":"types/AvatarShape","static":true,"visibility":"public","description":"Different types of AvatarShape.","constructor":{"visibility":"public"},"properties":[{"name":"Circle","visibility":"public","type":"Circle","description":"Circular shape."},{"name":"Square","visibility":"public","type":"Square","description":"Square shape."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.AvatarSize","basename":"AvatarSize","resource":"types/AvatarSize.js","module":"types/AvatarSize","static":true,"visibility":"public","description":"Different types of AvatarSize.","constructor":{"visibility":"public"},"properties":[{"name":"L","visibility":"public","type":"L","description":"component size - 5rem font size - 2.5rem"},{"name":"M","visibility":"public","type":"M","description":"component size - 4rem font size - 2rem"},{"name":"S","visibility":"public","type":"S","description":"component size - 3rem font size - 1.5rem"},{"name":"XL","visibility":"public","type":"XL","description":"component size - 7rem font size - 3rem"},{"name":"XS","visibility":"public","type":"XS","description":"component size - 2rem font size - 1rem"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.BusyIndicatorSize","basename":"BusyIndicatorSize","resource":"types/BusyIndicatorSize.js","module":"types/BusyIndicatorSize","static":true,"visibility":"public","description":"Different types of BusyIndicator.","constructor":{"visibility":"public"},"properties":[{"name":"Large","visibility":"public","type":"Large","description":"large size"},{"name":"Medium","visibility":"public","type":"Medium","description":"medium size"},{"name":"Small","visibility":"public","type":"Small","description":"small size"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ButtonDesign","basename":"ButtonDesign","resource":"types/ButtonDesign.js","module":"types/ButtonDesign","static":true,"visibility":"public","description":"Different types of Button.","constructor":{"visibility":"public"},"properties":[{"name":"Default","visibility":"public","type":"Default","description":"default type (no special styling)"},{"name":"Emphasized","visibility":"public","type":"Emphasized","description":"emphasized type"},{"name":"Negative","visibility":"public","type":"Negative","description":"reject style (red button)"},{"name":"Positive","visibility":"public","type":"Positive","description":"accept type (green button)"},{"name":"Transparent","visibility":"public","type":"Transparent","description":"transparent type"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.CarouselArrowsPlacement","basename":"CarouselArrowsPlacement","resource":"types/CarouselArrowsPlacement.js","module":"types/CarouselArrowsPlacement","static":true,"visibility":"public","description":"Different types of Arrow Placement for <code>ui5-carousel</code>.","constructor":{"visibility":"public"},"properties":[{"name":"Content","visibility":"public","type":"Default","description":"Carousel arrows are placed on the sides of the current Carousel page."},{"name":"Navigation","visibility":"public","type":"Positive","description":"Carousel arrows are placed on the sides of the page indicator of the Carousel."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.GrowingMode","basename":"GrowingMode","resource":"types/GrowingMode.js","module":"types/GrowingMode","static":true,"visibility":"public","description":"Defines the growing mode of the component.","constructor":{"visibility":"public"},"properties":[{"name":"Button","visibility":"public","type":"Button","description":"Component's <code>load-more</code> is fired upon pressing a \"More\" button. at the bottom."},{"name":"None","visibility":"public","type":"None","description":"Component's growing is not enabled."},{"name":"Scroll","visibility":"public","type":"Scroll","description":"Component's <code>load-more</code> is fired upon scroll."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.InputType","basename":"InputType","resource":"types/InputType.js","module":"types/InputType","static":true,"visibility":"public","description":"Defines input types","constructor":{"visibility":"public"},"properties":[{"name":"Email","visibility":"public","type":"Email","description":"The <ui5-input type=\"email\"></ui5-input> is used for input fields that must contain an e-mail address."},{"name":"Number","visibility":"public","type":"Number","description":"The <ui5-input type=\"number\"></ui5-input> defines a numeric input field."},{"name":"Password","visibility":"public","type":"Password","description":"<ui5-input type=\"password\"></ui5-input> defines a password field."},{"name":"Tel","visibility":"public","type":"Tel","description":"The <ui5-input type=\"url\"></ui5-input> is used for input fields that should contain a telephone number."},{"name":"Text","visibility":"public","type":"Text","description":"<ui5-input type=\"text\"></ui5-input> defines a one-line text input field:"},{"name":"URL","visibility":"public","type":"URL","description":"The <i5-input type=\"url\"></ui5-input> is used for input fields that should contain a URL address."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.LinkDesign","basename":"LinkDesign","resource":"types/LinkDesign.js","module":"types/LinkDesign","static":true,"visibility":"public","description":"Different types of Button.","constructor":{"visibility":"public"},"properties":[{"name":"Default","visibility":"public","type":"Default","description":"default type (no special styling)"},{"name":"Emphasized","visibility":"public","type":"Emphasized","description":"emphasized type"},{"name":"Subtle","visibility":"public","type":"Subtle","description":"subtle type (appears as regular text, rather than a link)"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ListGrowingMode","basename":"ListGrowingMode","resource":"types/ListGrowingMode.js","module":"types/ListGrowingMode","static":true,"visibility":"public","description":"Defines the growing mode, used in the <code>ui5-List</code>.","constructor":{"visibility":"public"}},{"kind":"class","name":"sap.ui.webcomponents.main.types.ListItemType","basename":"ListItemType","resource":"types/ListItemType.js","module":"types/ListItemType","static":true,"visibility":"public","description":"Different types of ListItem.","constructor":{"visibility":"public"},"properties":[{"name":"Active","visibility":"public","type":"Active","description":"Indicates that the item is clickable via active feedback when item is pressed."},{"name":"Detail","visibility":"public","type":"Detail","description":"Enables detail button of the list item that fires detail-click event."},{"name":"Inactive","visibility":"public","type":"Inactive","description":"Indicates the list item does not have any active feedback when item is pressed."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ListMode","basename":"ListMode","resource":"types/ListMode.js","module":"types/ListMode","static":true,"visibility":"public","description":"Defines the type of <code>ui5-list</code>.","constructor":{"visibility":"public"},"properties":[{"name":"Delete","visibility":"public","type":"Delete","description":"Delete mode (only one list item can be deleted via provided delete button)"},{"name":"MultiSelect","visibility":"public","type":"MultiSelect","description":"Multi selection mode (more than one list item can be selected)."},{"name":"None","visibility":"public","type":"None","description":"Default mode (no selection)."},{"name":"SingleSelect","visibility":"public","type":"SingleSelect","description":"Right-positioned single selection mode (only one list item can be selected)."},{"name":"SingleSelectAuto","visibility":"public","type":"SingleSelectAuto","description":"Selected item is highlighted and selection is changed upon arrow navigation (only one list item can be selected - this is always the focused item)."},{"name":"SingleSelectBegin","visibility":"public","type":"SingleSelectBegin","description":"Left-positioned single selection mode (only one list item can be selected)."},{"name":"SingleSelectEnd","visibility":"public","type":"SingleSelectEnd","description":"Selected item is highlighted but no selection element is visible (only one list item can be selected)."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ListSeparators","basename":"ListSeparators","resource":"types/ListSeparators.js","module":"types/ListSeparators","static":true,"visibility":"public","description":"Defines which separator style will be applied for the list items.","constructor":{"visibility":"public"},"properties":[{"name":"All","visibility":"public","type":"All","description":"Separators between the items including the last and the first one."},{"name":"Inner","visibility":"public","type":"Inner","description":"Separators between the items. <b>Note:</b> This enumeration depends on the theme."},{"name":"None","visibility":"public","type":"None","description":"No item separators."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.MessageStripType","basename":"MessageStripType","resource":"types/MessageStripType.js","module":"types/MessageStripType","static":true,"visibility":"public","description":"Defines different types of MessageStrip.","constructor":{"visibility":"public"},"properties":[{"name":"Information","visibility":"public","type":"Information","description":"Message should be just an information"},{"name":"Negative","visibility":"public","type":"Negative","description":"Message is an error"},{"name":"Positive","visibility":"public","type":"Positive","description":"Message is a success message"},{"name":"Warning","visibility":"public","type":"Warning","description":"Message is a warning"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.PanelAccessibleRole","basename":"PanelAccessibleRole","resource":"types/PanelAccessibleRole.js","module":"types/PanelAccessibleRole","static":true,"visibility":"public","description":"Available Panel Accessible Landmark Roles.","constructor":{"visibility":"public"},"properties":[{"name":"Complementary","visibility":"public","type":"Complementary","description":"Represents the ARIA role <code>complementary</code>. A section of the page, designed to be complementary to the main content at a similar level in the DOM hierarchy."},{"name":"Form","visibility":"public","type":"Form","description":"Represents the ARIA role <code>Form</code>. A landmark region that contains a collection of items and objects that, as a whole, create a form."},{"name":"Region","visibility":"public","type":"Region","description":"Represents the ARIA role <code>Region</code>. A section of a page, that is important enough to be included in a page summary or table of contents."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.PopoverHorizontalAlign","basename":"PopoverHorizontalAlign","resource":"types/PopoverHorizontalAlign.js","module":"types/PopoverHorizontalAlign","static":true,"visibility":"public","description":"Defines the horizontal alignment of <code>ui5-popover</code>","constructor":{"visibility":"public"},"properties":[{"name":"Center","visibility":"public","type":"Center","description":"Popover is centered"},{"name":"Left","visibility":"public","type":"Left","description":"Popover opens on the left side of the target"},{"name":"Right","visibility":"public","type":"Right","description":"Popover opens on the right side of the target"},{"name":"Stretch","visibility":"public","type":"Stretch","description":"Popover is stretched"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.PopoverPlacementType","basename":"PopoverPlacementType","resource":"types/PopoverPlacementType.js","module":"types/PopoverPlacementType","static":true,"visibility":"public","description":"Types for the placement of Popover control.","constructor":{"visibility":"public"},"properties":[{"name":"Bottom","visibility":"public","type":"Bottom","description":"Popover will be placed at the bottom of the reference element."},{"name":"Left","visibility":"public","type":"Left","description":"Popover will be placed at the left side of the reference element."},{"name":"Right","visibility":"public","type":"Right","description":"Popover will be placed at the right side of the reference element."},{"name":"Top","visibility":"public","type":"Bottom","description":"Popover will be placed at the top of the reference element."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.PopoverVerticalAlign","basename":"PopoverVerticalAlign","resource":"types/PopoverVerticalAlign.js","module":"types/PopoverVerticalAlign","static":true,"visibility":"public","description":"Types for the placement of message Popover control.","constructor":{"visibility":"public"},"properties":[{"name":"Bottom","visibility":"public","type":"Bottom","description":"Popover will be placed at the bottom of the reference control."},{"name":"Center","visibility":"public","type":"Center"},{"name":"Stretch","visibility":"public","type":"Stretch","description":"Popover will be streched"},{"name":"Top","visibility":"public","type":"Top","description":"Popover will be placed at the top of the reference control."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.Priority","basename":"Priority","resource":"types/Priority.js","module":"types/Priority","static":true,"visibility":"public","description":"Different types of Priority.","constructor":{"visibility":"public"},"properties":[{"name":"High","visibility":"public","type":"High","description":"High priority."},{"name":"Low","visibility":"public","type":"Low","description":"Low priority."},{"name":"Medium","visibility":"public","type":"Medium","description":"Medium priority."},{"name":"None","visibility":"public","type":"None","description":"Default, none priority."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.SemanticColor","basename":"SemanticColor","resource":"types/SemanticColor.js","module":"types/SemanticColor","static":true,"visibility":"public","description":"Defines the semantic color","constructor":{"visibility":"public"},"properties":[{"name":"Critical","visibility":"public","type":"Critical","description":"Critical color"},{"name":"Default","visibility":"public","type":"Default","description":"Default color (brand color)"},{"name":"Negative","visibility":"public","type":"Negative","description":"Negative color"},{"name":"Neutral","visibility":"public","type":"Neutral","description":"Neutral color."},{"name":"Positive","visibility":"public","type":"Positive","description":"Positive color"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.TabContainerTabsPlacement","basename":"TabContainerTabsPlacement","resource":"types/TabContainerTabsPlacement.js","module":"types/TabContainerTabsPlacement","static":true,"visibility":"public","description":"Different options for the position of the tab strip relative to the tab content area.","constructor":{"visibility":"public"},"properties":[{"name":"Bottom","visibility":"public","type":"Bottom","description":"The tab strip is displayed below the tab content"},{"name":"Top","visibility":"public","type":"Top","description":"The tab strip is displayed above the tab content (Default)"}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.TabLayout","basename":"TabLayout","resource":"types/TabLayout.js","module":"types/TabLayout","static":true,"visibility":"public","description":"Different types of Tab layouts.","constructor":{"visibility":"public"},"properties":[{"name":"Inline","visibility":"public","type":"Inline","description":"Inline type, the tab <code>main text</code> and <code>additionalText</code> are displayed horizotally."},{"name":"Standard","visibility":"public","type":"Standard","description":"Standard type, the tab <code>main text</code> and <code>additionalText</code> are displayed vertically."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.TableGrowingMode","basename":"TableGrowingMode","resource":"types/TableGrowingMode.js","module":"types/TableGrowingMode","static":true,"visibility":"public","description":"Defines the growing mode, used in the <code>ui5-table</code>.","constructor":{"visibility":"public"}},{"kind":"class","name":"sap.ui.webcomponents.main.types.TitleLevel","basename":"TitleLevel","resource":"types/TitleLevel.js","module":"types/TitleLevel","static":true,"visibility":"public","description":"Defines the <code>ui5-title</code> level","constructor":{"visibility":"public"},"properties":[{"name":"H1","visibility":"public","type":"H1","description":"Renders <code>h1</code> tag."},{"name":"H2","visibility":"public","type":"H2","description":"Renders <code>h2</code> tag."},{"name":"H3","visibility":"public","type":"H3","description":"Renders <code>h3</code> tag."},{"name":"H4","visibility":"public","type":"H4","description":"Renders <code>h4</code> tag."},{"name":"H5","visibility":"public","type":"H5","description":"Renders <code>h5</code> tag."},{"name":"H6","visibility":"public","type":"H6","description":"Renders <code>h6</code> tag."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.types.ToastPlacement","basename":"ToastPlacement","resource":"types/ToastPlacement.js","module":"types/ToastPlacement","static":true,"visibility":"public","description":"Defines where the <code>ui5-toast</code> will be placed.","constructor":{"visibility":"public"},"properties":[{"name":"BottomCenter","visibility":"public","type":"BottomCenter","description":"<code>ui5-toast</code> is placed at the <code>BottomCenter</code> position of its container. Default placement (no selection)"},{"name":"BottomEnd","visibility":"public","type":"BottomEnd","description":"<code>ui5-toast</code> is placed at the <code>BottomEnd</code> position of its container."},{"name":"BottomStart","visibility":"public","type":"BottomStart","description":"<code>ui5-toast</code> is placed at the <code>BottomStart</code> position of its container."},{"name":"MiddleCenter","visibility":"public","type":"MiddleCenter","description":"<code>ui5-toast</code> is placed at the <code>MiddleCenter</code> position of its container."},{"name":"MiddleEnd","visibility":"public","type":"MiddleEnd","description":"<code>ui5-toast</code> is placed at the <code>MiddleEnd</code> position of its container."},{"name":"MiddleStart","visibility":"public","type":"MiddleStart","description":"<code>ui5-toast</code> is placed at the <code>MiddleStart</code> position of its container."},{"name":"TopCenter","visibility":"public","type":"TopCenter","description":"<code>ui5-toast</code> is placed at the <code>TopCenter</code> position of its container."},{"name":"TopEnd","visibility":"public","type":"TopEnd","description":"<code>ui5-toast</code> is placed at the <code>TopEnd</code> position of its container."},{"name":"TopStart","visibility":"public","type":"TopStart","description":"<code>ui5-toast</code> is placed at the <code>TopStart</code> position of its container."}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.WheelSlider","basename":"WheelSlider","tagname":"ui5-wheelslider","resource":"WheelSlider.js","module":"WheelSlider","visibility":"public","since":"1.0.0-rc.6","extends":"UI5Element","description":"<h3 class=\"comment-api-title\">Overview</h3>\n\n<h3>Usage</h3>\n\nFor the <code>ui5-wheelslider</code> <h3>ES6 Module Import</h3>\n\n<code>import @ui5/webcomponents/dist/WheelSlider.js\";</code>","constructor":{"visibility":"public"},"properties":[{"name":"cyclic","visibility":"public","type":"boolean","description":"Indicates if the wheelslider has a cyclic behaviour.","defaultValue":"false"},{"name":"disabled","visibility":"public","type":"boolean","description":"Defines whether the <code>ui5-wheelslider</code> is disabled (default is set to <code>false</code>). A disabled <code>ui5-wheelslider</code> can't be pressed or focused, and it is not in the tab chain.","defaultValue":"false"},{"name":"expanded","visibility":"public","type":"boolean","description":"Indicates if the wheelslider is expanded.","defaultValue":"false"},{"name":"label","visibility":"public","type":"string","description":"Defines the label of the wheelslider.","defaultValue":"\"\""},{"name":"value","visibility":"public","type":"string","description":"Defines the currently selected value","defaultValue":"\"\""}],"slots":[]},{"kind":"class","name":"sap.ui.webcomponents.main.YearPicker","basename":"YearPicker","tagname":"ui5-yearpicker","resource":"YearPicker.js","module":"YearPicker","static":true,"visibility":"public","extends":"CalendarPart","description":"Displays years which can be selected.","constructor":{"visibility":"public"},"properties":[{"name":"selectedDates","visibility":"public","type":"Array","description":"An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component."}],"slots":[],"events":[{"name":"change","visibility":"public","description":"Fired when the user selects a year (space/enter/click)."},{"name":"navigate","visibility":"public","since":"1.0.0-rc.9","description":"Fired when the timestamp changes - the user navigates with the keyboard or clicks with the mouse."}],"methods":[{"name":"_hasNextPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_hasPreviousPage","visibility":"protected","description":"Called from Calendar.js"},{"name":"_showNextPage","visibility":"protected","description":"Called by Calendar.js User pressed the \">\" button in the calendar header (same as PageDown)"},{"name":"_showPreviousPage","visibility":"protected","description":"Called by Calendar.js User pressed the \"<\" button in the calendar header (same as PageUp)"}]}]}