{
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
"name": "@ui5/webcomponents-fiori",
"version": "2.21.1",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "ui5-barcode-scanner-dialog",
"description": "### Overview\n\nThe `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n\nA `scanSuccess` event fires whenever a barcode is identified\nand a `scanError` event fires when the scan failed (for example, due to missing permisions).\n\nInternally, the component uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.\n---\n\n\n### **Events:**\n - **close** - Fired when the user closes the component.\n- **scan-error** - Fires when the scan fails with error.\n- **scan-success** - Fires when the scan is completed successfuuly.\n\n### **Slots:**\n - **footer** - Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.",
"doc-url": "",
"attributes": [
{
"name": "open",
"description": "Indicates whether the dialog is open.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "footer",
"description": "Defines the footer HTML Element.\n\n**Note:** When you provide custom content for the `footer` slot, the default close button is not rendered.\nThis means you need to include your own mechanism within the custom `footer` to close the dialog,\nsuch as a button with an event listener that closes the dialog.\n\n**Note:** If the `footer` slot is not provided, a default footer with a close button is rendered automatically,\nallowing users to close the dialog without any additional implementation."
},
{
"name": "header",
"description": "Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used."
}
],
"events": [
{
"name": "close",
"description": "Fired when the user closes the component."
},
{
"name": "scan-error",
"description": "Fires when the scan fails with error."
},
{
"name": "scan-success",
"description": "Fires when the scan is completed successfuuly."
}
],
"js": {
"properties": [
{
"name": "open",
"description": "Indicates whether the dialog is open.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "close",
"description": "Fired when the user closes the component."
},
{
"name": "scan-error",
"description": "Fires when the scan fails with error."
},
{
"name": "scan-success",
"description": "Fires when the scan is completed successfuuly."
}
]
}
},
{
"name": "ui5-dynamic-page",
"description": "### Overview\n\nA layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n\nThe component consist of several components:\n\n- `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n- `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n- `Content area` - a generic container, which can have a single UI5 layout.\n- `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n\n### Usage\n\nUse the `DynamicPage` if you need to have a title, that is always visible\nand a header, that has configurable Expanding/Snapping functionality.\nIf you don't need the Expanding/Snapping functionality it is better to use the\n`ui5-page` as a lighter component.\n\nThe app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\nor content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\nscroll through the content.\n\n## Notes:\n\n- Snapping of the `DynamicPageTitle` is not supported in the following case:\n - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n\n### Responsive Behavior\n\nDynamic page web component implements the responsive paddings design.\n\n### Keyboard Handling\n\n\n### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\nIf focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\nIf focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n\n### Fast Navigation\n- This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.\nIn order to use this functionality, you need to import the following module:\n\n- `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n---\n\n\n### **Events:**\n - **pin-button-toggle** - Fired when the pin header button is toggled.\n- **title-toggle** - Fired when the expand/collapse area of the title is toggled.\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page.\n- **footerArea** - Defines the footer HTML Element.\n- **headerArea** - Defines the header HTML Element.\n- **titleArea** - Defines the title HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **fit-content** - Used to style the fit content container of the component.\n- **footer** - Used to style the footer of the component",
"doc-url": "",
"attributes": [
{
"name": "header-pinned",
"description": "Defines if the header is pinned.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "header-snapped",
"description": "Defines if the header is snapped.",
"value": { "type": "any", "default": "false" }
},
{
"name": "hide-pin-button",
"description": "Defines if the pin button is hidden.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-footer",
"description": "Defines if the footer is shown.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the content of the Dynamic Page."
},
{
"name": "footerArea",
"description": "Defines the footer HTML Element."
},
{
"name": "headerArea",
"description": "Defines the header HTML Element."
},
{
"name": "titleArea",
"description": "Defines the title HTML Element."
}
],
"events": [
{
"name": "pin-button-toggle",
"description": "Fired when the pin header button is toggled."
},
{
"name": "title-toggle",
"description": "Fired when the expand/collapse area of the title is toggled."
}
],
"js": {
"properties": [
{
"name": "header-pinned",
"description": "Defines if the header is pinned.",
"value": { "type": "boolean" }
},
{
"name": "header-snapped",
"description": "Defines if the header is snapped.",
"value": { "type": "any" }
},
{
"name": "hide-pin-button",
"description": "Defines if the pin button is hidden.",
"value": { "type": "boolean" }
},
{
"name": "show-footer",
"description": "Defines if the footer is shown.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "pin-button-toggle",
"description": "Fired when the pin header button is toggled."
},
{
"name": "title-toggle",
"description": "Fired when the expand/collapse area of the title is toggled."
}
]
}
},
{
"name": "ui5-dynamic-page-header",
"description": "Header of the DynamicPage.\n\n### Overview\n\nThe DynamicPageHeader `ui5-dynamic-page-header` is part of the DynamicPage family\nand is used to serve as header of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageHeader` can hold any layout control and has two states - expanded\nand collapsed (snapped). The switching between these states happens when:\n- the user scrolls below its bottom margin\n- the user clicks on the `DynamicPageTitle`\n- through the `DynamicPage` property `headerSnapped`\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageHeader` depends on the behavior of the\ncontent that is displayed.\n\n### Accessibility\n\nThe `DynamicPageHeader` provides an accessible label for the header region.\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the Dynamic Page Header.",
"doc-url": "",
"attributes": [],
"slots": [
{
"name": "default",
"description": "Defines the content of the Dynamic Page Header."
}
],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-dynamic-page-header-actions",
"description": "### Overview\n\nThe `DynamicPageHeaderActions` component is part of the `DynamicPage`\nfamily and is holding the action buttons behind the `DynamicPageTitle` and the `DynamicPageHeader`.\n\nThe \"pin\" action is used to attach the header to a certain state (expanded/collapsed).\nThe expand/collapse action is used to switch between the two states of `DynamicPageHeader`.\n---\n",
"doc-url": "",
"attributes": [],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-dynamic-page-title",
"description": "### Overview\n\nTitle of the `DynamicPage`.\n\nThe `DynamicPageTitle` component is part of the `DynamicPage`\nfamily and is used to serve as title of the `DynamicPage`.\n\n### Usage\n\nThe `DynamicPageTitle` can hold any component and displays the most important\ninformation regarding the object that will always remain visible while scrolling.\n\n**Note:** The `actions` slot accepts any UI5 web component, but it's\nrecommended to use `ui5-toolbar`.\n\nThe user can switch between the expanded/collapsed states of the\n`DynamicPage` by clicking on the `DynamicPageTitle`\nor by using the expand/collapse visual indicators, positioned at the bottom of the\n`DynamicPageTitle` and the `DynamicPageHeader` inside `ui5-dynamic-page-header-actions`.\n\n### Responsive Behavior\n\nThe responsive behavior of the `DynamicPageTitle` depends on the behavior of the\ncontent that is displayed.\n---\n\n\n### **Slots:**\n - **actionsBar** - Defines the bar with actions in the Dynamic page title.\n- **breadcrumbs** - Defines the content of the breadcrumbs inside Dynamic Page Title.\n- **default** - Defines the content of the Dynamic page title.\n- **heading** - Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`\n- **navigationBar** - Defines the bar with navigation actions in the Dynamic page title.\n- **snappedHeading** - Defines the heading that is shown only when the header is snapped.\n- **snappedSubheading** - Defines the content of the title that is shown only when the header is snapped.\n- **snappedTitleOnMobile** - Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component.\n- **subheading** - Defines the content of the title that is shown only when the header is not snapped.",
"doc-url": "",
"attributes": [],
"slots": [
{
"name": "actionsBar",
"description": "Defines the bar with actions in the Dynamic page title."
},
{
"name": "breadcrumbs",
"description": "Defines the content of the breadcrumbs inside Dynamic Page Title."
},
{
"name": "default",
"description": "Defines the content of the Dynamic page title."
},
{
"name": "heading",
"description": "Defines the content of the Heading of the Dynamic Page.\n\nThe font size of the title within the `heading` slot can be adjusted to the recommended values using the following CSS variables:\n\n**Expanded:** `var(--sapObjectHeader_Title_FontSize)`\n\n**Collapsed:** `var(--sapObjectHeader_Title_SnappedFontSize)`"
},
{
"name": "navigationBar",
"description": "Defines the bar with navigation actions in the Dynamic page title."
},
{
"name": "snappedHeading",
"description": "Defines the heading that is shown only when the header is snapped."
},
{
"name": "snappedSubheading",
"description": "Defines the content of the title that is shown only when the header is snapped."
},
{
"name": "snappedTitleOnMobile",
"description": "Defines the content of the snapped title on mobile devices.\n\nThis slot is displayed only when the `DynamicPageTitle` is in the snapped state on mobile devices.\nIt should be used to provide a simplified, single-line title that takes up less space on smaller screens.\n\n**Note:**\n- The content set in this slot **overrides** all other content set in the `DynamicPageTitle` slots when displayed.\n- The slot is intended for a single `ui5-title` component."
},
{
"name": "subheading",
"description": "Defines the content of the title that is shown only when the header is not snapped."
}
],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-dynamic-side-content",
"description": "### Overview\n\nThe DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\nto be displayed in a way that flexibly adapts to different screen sizes. The side\ncontent appears in a container next to or directly below the main content\n(it doesn't overlay). When the side content is triggered, the main content becomes\nnarrower (if appearing side-by-side). The side content contains a separate scrollbar\nwhen appearing next to the main content.\n\n### Usage\n\n*When to use?*\n\nUse this component if you want to display relevant information that is not critical\nfor users to complete a task. Users should have access to all the key functions and\ncritical information in the app even if they do not see the side content. This is\nimportant because on smaller screen sizes it may be difficult to display the side\ncontent in a way that is easily accessible for the user.\n\n*When not to use?*\n\nDon't use it if you want to display navigation or critical information that prevents\nusers from completing a task when they have no access to the side content.\n\n### Responsive Behavior\n\nScreen width \\> 1440px\n\n- Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\neach).\n- If the application defines a trigger, the side content can be hidden.\n\nScreen width \\<\\= 1440px and \\> 1024px\n\n- Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n320px each). If the side content width falls below 320 px, it automatically slides\nunder the main content, unless the app development team specifies that it should\ndisappear.\n\nScreen width \\<\\= 1024px and \\> 720px\n\n- The side content ratio is fixed to 340px, and the main content takes the rest\nof the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\nand screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n\nScreen width \\<\\= 720px (for example on a mobile device)\n\n- In this case, the side content automatically disappears from the screen (unless\nspecified to stay under the content by setting of `sideContentVisibility`\nproperty to `AlwaysShow`) and can be triggered from a pre-set trigger\n(specified within the app). When the side content is triggered, it replaces the main\ncontent. We recommend that you always place the trigger for the side content in the\nsame location, such as in the app footer.\n\nA special case allows switching the comparison mode between the main and side content.\nIn this case, the screen is split into 50:50 percent for main vs. side content. The\nresponsive behavior of the equal split is the same as in the standard view - the\nside content disappears on screen widths of less than 720 px and can only be\nviewed by triggering it.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`\n---\n\n\n### **Events:**\n - **layout-change** - Fires when the current breakpoint has been changed.\n\n### **Methods:**\n - **toggleContents(): _void_** - Toggles visibility of main and side contents on S screen size (mobile device).\n\n### **Slots:**\n - **default** - Defines the main content.\n- **sideContent** - Defines the side content.",
"doc-url": "",
"attributes": [
{
"name": "accessibility-attributes",
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
"value": {
"type": "DynamicSideContentAccessibilityAttributes",
"default": "{}"
}
},
{
"name": "equal-split",
"description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-main-content",
"description": "Defines the visibility of the main content.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-side-content",
"description": "Defines the visibility of the side content.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "side-content-fall-down",
"description": "Defines on which breakpoints the side content falls down below the main content.",
"value": {
"type": "\"BelowXL\" | \"BelowL\" | \"BelowM\" | \"OnMinimumWidth\"",
"default": "\"OnMinimumWidth\""
}
},
{
"name": "side-content-position",
"description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).",
"value": { "type": "\"End\" | \"Start\"", "default": "\"End\"" }
},
{
"name": "side-content-visibility",
"description": "Defines on which breakpoints the side content is visible.",
"value": {
"type": "\"AlwaysShow\" | \"ShowAboveL\" | \"ShowAboveM\" | \"ShowAboveS\" | \"NeverShow\"",
"default": "\"ShowAboveS\""
}
}
],
"slots": [
{ "name": "default", "description": "Defines the main content." },
{
"name": "sideContent",
"description": "Defines the side content."
}
],
"events": [
{
"name": "layout-change",
"description": "Fires when the current breakpoint has been changed."
}
],
"js": {
"properties": [
{
"name": "accessibility-attributes",
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
"value": { "type": "DynamicSideContentAccessibilityAttributes" }
},
{
"name": "equal-split",
"description": "Defines whether the component is in equal split mode. In this mode, the side and\nthe main content take 50:50 percent of the container on all screen sizes\nexcept for phone, where the main and side contents are switching visibility\nusing the toggle method.",
"value": { "type": "boolean" }
},
{
"name": "hide-main-content",
"description": "Defines the visibility of the main content.",
"value": { "type": "boolean" }
},
{
"name": "hide-side-content",
"description": "Defines the visibility of the side content.",
"value": { "type": "boolean" }
},
{
"name": "side-content-fall-down",
"description": "Defines on which breakpoints the side content falls down below the main content.",
"value": {
"type": "\"BelowXL\" | \"BelowL\" | \"BelowM\" | \"OnMinimumWidth\""
}
},
{
"name": "side-content-position",
"description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).",
"value": { "type": "\"End\" | \"Start\"" }
},
{
"name": "side-content-visibility",
"description": "Defines on which breakpoints the side content is visible.",
"value": {
"type": "\"AlwaysShow\" | \"ShowAboveL\" | \"ShowAboveM\" | \"ShowAboveS\" | \"NeverShow\""
}
}
],
"events": [
{
"name": "layout-change",
"description": "Fires when the current breakpoint has been changed."
}
]
}
},
{
"name": "ui5-filter-item",
"description": "### Overview\n\nThe `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`.\nIt represents a single filter category that contains multiple filter options that users can select.\n\n### Usage\n\nThe `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n---\n\n\n### **Slots:**\n - **values** - Defines the filter options available for this filter category.",
"doc-url": "",
"attributes": [
{
"name": "additional-text",
"description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "text",
"description": "Defines the text of the filter item.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "values",
"description": "Defines the filter options available for this filter category."
}
],
"events": [],
"js": {
"properties": [
{
"name": "additional-text",
"description": "Defines the additional text of the filter item.\nThis text is typically used to show the number of selected filter options within this category.",
"value": { "type": "string | undefined" }
},
{
"name": "text",
"description": "Defines the text of the filter item.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-filter-item-option",
"description": "### Overview\n\nThe `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`.\nIt represents a single selectable option that users can choose to filter data.\n\n### Usage\n\nThe `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context\nof `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FilterItemOption.js\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "selected",
"description": "Defines if the filter option is selected.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the text of the filter option.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "selected",
"description": "Defines if the filter option is selected.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the text of the filter option.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-flexible-column-layout",
"description": "### Overview\n\nThe `FlexibleColumnLayout` implements the list-detail-detail paradigm by displaying up to three pages in separate columns.\nThere are several possible layouts that can be changed either with the component API, or by dragging the column separators.\n\n### Usage\n\nUse this component for applications that need to display several logical levels of related information side by side (e.g. list of items, item, sub-item, etc.).\nThe Component is flexible in a sense that the application can focus the user's attention on one particular column.\n\n### Responsive Behavior\n\nThe `FlexibleColumnLayout` automatically displays the maximum possible number of columns based on `layout` property and the window size.\nThe component would display 1 column for window size smaller than 599px, up to two columns between 599px and 1023px,\nand 3 columns for sizes bigger than 1023px.\n\n**Note:** When the component displays more than one column, the minimal width of each column is 248px. Consequently, when the user drags a column separator to resize the columns, the minimal allowed width of any resized column is 248px.\n\n### Keyboard Handling\n\n#### Basic Navigation\n\nWhen a column separator is focused, the following keyboard\nshortcuts allow the user to resize the columns and change the layout:\n\n- [Shift] + [Left] or [Shift] + [Right] - Moves the separator to the left or right, which resizes the columns accordingly.\n- [Left] or [Right] - Moves the separator to the left or right with a bigger step, which resizes the columns accordingly.\n- [Home] - Moves the separator to the start position.\n- [End] - Moves the separator to the end position.\n- This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";`\n---\n\n\n### **Events:**\n - **layout-change** - Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing.\n- **layout-configuration-change** - Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n**Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change.\n\n### **Slots:**\n - **endColumn** - Defines the content in the end column.\n- **midColumn** - Defines the content in the middle column.\n- **startColumn** - Defines the content in the start column.",
"doc-url": "",
"attributes": [
{
"name": "accessibility-attributes",
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
"value": { "type": "FCLAccessibilityAttributes", "default": "{}" }
},
{
"name": "column-layout",
"description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.",
"value": { "type": "any", "default": "undefined" }
},
{
"name": "disable-resizing",
"description": "Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "end-column-visible",
"description": "Returns if the `end` column is visible.",
"value": { "type": "any", "default": "false" }
},
{
"name": "layout",
"description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.",
"value": {
"type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS...",
"default": "\"OneColumn\""
}
},
{
"name": "layouts-configuration",
"description": "Allows to customize the column proportions per screen size and layout.\nIf no custom proportion provided for a specific layout, the default will be used.\n\n**Notes:**\n\n- The proportions should be given in percentages. For example [\"30%\", \"40%\", \"30%\"], [\"70%\", \"30%\", 0], etc.\n- The proportions should add up to 100%.\n- Hidden columns are marked as \"0px\", e.g. [\"0px\", \"70%\", \"30%\"]. Specifying 0 or \"0%\" for hidden columns is also valid.\n- If the proportions do not match the layout (e.g. if provided proportions [\"70%\", \"30%\", \"0px\"] for \"OneColumn\" layout), then the default proportions will be used instead.\n- Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).\n- No custom configuration available for the phone screen size, as the default of 100% column width is always used there.",
"value": { "type": "LayoutConfiguration", "default": "{}" }
},
{
"name": "mid-column-visible",
"description": "Returns if the `middle` column is visible.",
"value": { "type": "any", "default": "false" }
},
{
"name": "start-column-visible",
"description": "Returns if the `start` column is visible.",
"value": { "type": "any", "default": "true" }
},
{
"name": "visible-columns",
"description": "Returns the number of currently visible columns.",
"value": { "type": "any", "default": "1" }
}
],
"slots": [
{
"name": "endColumn",
"description": "Defines the content in the end column."
},
{
"name": "midColumn",
"description": "Defines the content in the middle column."
},
{
"name": "startColumn",
"description": "Defines the content in the start column."
}
],
"events": [
{
"name": "layout-change",
"description": "Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing."
},
{
"name": "layout-configuration-change",
"description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n**Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change."
}
],
"js": {
"properties": [
{
"name": "accessibility-attributes",
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n - **startColumn**: `startColumn.role` and `startColumn.name`.\n - **midColumn**: `midColumn.role` and `midColumn.name`.\n - **endColumn**: `endColumn.role` and `endColumn.name`.\n - **startSeparator**: `startSeparator.role` and `startSeparator.name`.\n - **endSeparator**: `endSeparator.role` and `endSeparator.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA landmark role of the area.\nAccepts the following values: `none`, `complementary`, `contentinfo`, `main` or `region`.\n\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
"value": { "type": "FCLAccessibilityAttributes" }
},
{
"name": "column-layout",
"description": "Returns the current column layout, based on both the `layout` property and the screen size.\n\n**For example:** [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.",
"value": { "type": "any" }
},
{
"name": "disable-resizing",
"description": "Specifies if the user is allowed to change the columns layout by dragging the separator between the columns.",
"value": { "type": "boolean" }
},
{
"name": "end-column-visible",
"description": "Returns if the `end` column is visible.",
"value": { "type": "any" }
},
{
"name": "layout",
"description": "Defines the columns layout and their proportion.\n\n**Note:** The layout also depends on the screen size - one column for screens smaller than 599px,\ntwo columns between 599px and 1023px and three columns for sizes bigger than 1023px.\n\n**For example:** layout=`TwoColumnsStartExpanded` means the layout will display up to two columns\nin 67%/33% proportion.",
"value": {
"type": "\"OneColumn\" | \"TwoColumnsStartExpanded\" | \"TwoColumnsMidExpanded\" | \"ThreeColumnsMidExpanded\" | \"ThreeColumnsEndExpanded\" | \"ThreeColumnsStartExpandedEndHidden\" | \"ThreeColumnsMidExpandedEndHidden\" | \"ThreeColumnsStartHiddenMidExpanded\" | \"ThreeColumnsStartHiddenEndExpanded\" | \"MidColumnFullScreen\" | \"EndColumnFullS..."
}
},
{
"name": "layouts-configuration",
"description": "Allows to customize the column proportions per screen size and layout.\nIf no custom proportion provided for a specific layout, the default will be used.\n\n**Notes:**\n\n- The proportions should be given in percentages. For example [\"30%\", \"40%\", \"30%\"], [\"70%\", \"30%\", 0], etc.\n- The proportions should add up to 100%.\n- Hidden columns are marked as \"0px\", e.g. [\"0px\", \"70%\", \"30%\"]. Specifying 0 or \"0%\" for hidden columns is also valid.\n- If the proportions do not match the layout (e.g. if provided proportions [\"70%\", \"30%\", \"0px\"] for \"OneColumn\" layout), then the default proportions will be used instead.\n- Whenever the user drags the columns separator to resize the columns, the `layoutsConfiguration` object will be updated with the user-specified proportions for the given layout (and the `layout-configuration-change` event will be fired).\n- No custom configuration available for the phone screen size, as the default of 100% column width is always used there.",
"value": { "type": "LayoutConfiguration" }
},
{
"name": "mid-column-visible",
"description": "Returns if the `middle` column is visible.",
"value": { "type": "any" }
},
{
"name": "start-column-visible",
"description": "Returns if the `start` column is visible.",
"value": { "type": "any" }
},
{
"name": "visible-columns",
"description": "Returns the number of currently visible columns.",
"value": { "type": "any" }
}
],
"events": [
{
"name": "layout-change",
"description": "Fired when the layout changes via user interaction by dragging the separators\nor by changing the component size due to resizing."
},
{
"name": "layout-configuration-change",
"description": "Fired when the `layoutsConfiguration` changes via user interaction by dragging the separators.\n\n**Note:** The `layout-configuration-change` event is in an experimental state and is a subject to change."
}
]
}
},
{
"name": "ui5-group-item",
"description": "### Overview\n\nThe `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`.\nIt represents a single group option that users can select to organize data into logical groups.\n\n### Usage\n\nThe `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options.\nEach group item represents a column or field by which data can be grouped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "selected",
"description": "Defines if the group item is selected.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the text of the group item.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "selected",
"description": "Defines if the group item is selected.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the text of the group item.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-illustrated-message",
"description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.\n- **subtitle** - Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.\n- **title** - Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.\n\n### **CSS Parts:**\n - **subtitle** - Used to style the subtitle wrapper of the `ui5-illustrated-message`",
"doc-url": "",
"attributes": [
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "decorative",
"description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "design",
"description": "Determines which illustration breakpoint variant is used.\n\nAs `IllustratedMessage` adapts itself around the `Illustration`, the other\nelements of the component are displayed differently on the different breakpoints/illustration designs.",
"value": {
"type": "\"Auto\" | \"Base\" | \"Dot\" | \"Spot\" | \"Dialog\" | \"Scene\" | \"ExtraSmall\" | \"Small\" | \"Medium\" | \"Large\"",
"default": "\"Auto\""
}
},
{
"name": "name",
"description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`",
"value": { "type": "string", "default": "\"BeforeSearch\"" }
},
{
"name": "subtitle-text",
"description": "Defines the subtitle of the component.\n\n**Note:** Using this property, the default subtitle text of illustration will be overwritten.\n\n**Note:** Using `subtitle` slot, the default of this property will be overwritten.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "title-text",
"description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`."
},
{
"name": "subtitle",
"description": "Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten."
},
{
"name": "title",
"description": "Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten."
}
],
"events": [],
"js": {
"properties": [
{
"name": "accessible-name-ref",
"description": "Receives id(or many ids) of the elements that label the component.",
"value": { "type": "string | undefined" }
},
{
"name": "decorative",
"description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.",
"value": { "type": "boolean" }
},
{
"name": "design",
"description": "Determines which illustration breakpoint variant is used.\n\nAs `IllustratedMessage` adapts itself around the `Illustration`, the other\nelements of the component are displayed differently on the different breakpoints/illustration designs.",
"value": {
"type": "\"Auto\" | \"Base\" | \"Dot\" | \"Spot\" | \"Dialog\" | \"Scene\" | \"ExtraSmall\" | \"Small\" | \"Medium\" | \"Large\""
}
},
{
"name": "name",
"description": "Defines the illustration name that will be displayed in the component.\n\nExample:\n\n`name='BeforeSearch'`, `name='UnableToUpload'`, etc..\n\n**Note:** To use the TNT illustrations,\nyou need to set the `tnt` or `Tnt` prefix in front of the icon's name.\n\nExample:\n\n`name='tnt/Avatar'` or `name='TntAvatar'`.\n\n**Note:** By default the `BeforeSearch` illustration is loaded.\nWhen using an illustration type, other than the default, it should be loaded in addition:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";`\n\nFor TNT illustrations:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";`",
"value": { "type": "string" }
},
{
"name": "subtitle-text",
"description": "Defines the subtitle of the component.\n\n**Note:** Using this property, the default subtitle text of illustration will be overwritten.\n\n**Note:** Using `subtitle` slot, the default of this property will be overwritten.",
"value": { "type": "string | undefined" }
},
{
"name": "title-text",
"description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-media-gallery",
"description": "### Overview\n\nThe `ui5-media-gallery` component allows the user to browse through multimedia items. Currently,\nthe supported items are images and videos. The items should be defined using the `ui5-media-gallery-item`\ncomponent.\n\nThe items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item\nis displayed in larger size.\n\nThe component is responsive by default and adjusts the position of the menu with respect to viewport size,\nbut the application is able to further customize the layout via the provided API.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\n\nWhen the thumbnails menu is focused the following keyboard\nshortcuts allow the user to navigate through the thumbnail items:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n- [Space], [Enter] - Selects an item\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`\n---\n\n\n### **Events:**\n - **display-area-click** - Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.\n- **overflow-click** - Fired when the thumbnails overflow button is clicked.\n- **selection-change** - Fired when selection is changed by user interaction.\n\n### **Slots:**\n - **default** - Defines the component items.\n\n**Note:** Only one selected item is allowed.\n\n**Note:** Use the `ui5-media-gallery-item` component to define the desired items.",
"doc-url": "",
"attributes": [
{
"name": "interactive-display-area",
"description": "If enabled, a `display-area-click` event is fired\nwhen the user clicks or taps on the display area.\n\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "layout",
"description": "Determines the layout of the component.",
"value": {
"type": "\"Auto\" | \"Vertical\" | \"Horizontal\"",
"default": "\"Auto\""
}
},
{
"name": "menu-horizontal-align",
"description": "Determines the horizontal alignment of the thumbnails menu\nvs. the central display area.",
"value": { "type": "\"Left\" | \"Right\"", "default": "\"Left\"" }
},
{
"name": "menu-vertical-align",
"description": "Determines the vertical alignment of the thumbnails menu\nvs. the central display area.",
"value": {
"type": "\"Top\" | \"Bottom\"",
"default": "\"Bottom\""
}
},
{
"name": "show-all-thumbnails",
"description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the component items.\n\n**Note:** Only one selected item is allowed.\n\n**Note:** Use the `ui5-media-gallery-item` component to define the desired items."
}
],
"events": [
{
"name": "display-area-click",
"description": "Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item."
},
{
"name": "overflow-click",
"description": "Fired when the thumbnails overflow button is clicked."
},
{
"name": "selection-change",
"description": "Fired when selection is changed by user interaction."
}
],
"js": {
"properties": [
{
"name": "interactive-display-area",
"description": "If enabled, a `display-area-click` event is fired\nwhen the user clicks or taps on the display area.\n\nThe display area is the central area that contains\nthe enlarged content of the currently selected item.",
"value": { "type": "boolean" }
},
{
"name": "layout",
"description": "Determines the layout of the component.",
"value": { "type": "\"Auto\" | \"Vertical\" | \"Horizontal\"" }
},
{
"name": "menu-horizontal-align",
"description": "Determines the horizontal alignment of the thumbnails menu\nvs. the central display area.",
"value": { "type": "\"Left\" | \"Right\"" }
},
{
"name": "menu-vertical-align",
"description": "Determines the vertical alignment of the thumbnails menu\nvs. the central display area.",
"value": { "type": "\"Top\" | \"Bottom\"" }
},
{
"name": "show-all-thumbnails",
"description": "If set to `true`, all thumbnails are rendered in a scrollable container.\nIf `false`, only up to five thumbnails are rendered, followed by\nan overflow button that shows the count of the remaining thumbnails.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "display-area-click",
"description": "Fired when the display area is clicked.\nThe display area is the central area that contains\nthe enlarged content of the currently selected item."
},
{
"name": "overflow-click",
"description": "Fired when the thumbnails overflow button is clicked."
},
{
"name": "selection-change",
"description": "Fired when selection is changed by user interaction."
}
]
}
},
{
"name": "ui5-media-gallery-item",
"description": "### Overview\nThe `ui5-media-gallery-item` web component represents the items displayed in the\n`ui5-media-gallery` web component.\n\n**Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.\n\n### Keyboard Handling\nThe `ui5-media-gallery` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the component.\n- **thumbnail** - Defines the content of the thumbnail.",
"doc-url": "",
"attributes": [
{
"name": "disabled",
"description": "Defines whether the component is in disabled state.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "layout",
"description": "Determines the layout of the item container.",
"value": {
"type": "\"Square\" | \"Wide\"",
"default": "\"Square\""
}
},
{
"name": "selected",
"description": "Defines the selected state of the component.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the content of the component."
},
{
"name": "thumbnail",
"description": "Defines the content of the thumbnail."
}
],
"events": [],
"js": {
"properties": [
{
"name": "disabled",
"description": "Defines whether the component is in disabled state.",
"value": { "type": "boolean" }
},
{
"name": "layout",
"description": "Determines the layout of the item container.",
"value": { "type": "\"Square\" | \"Wide\"" }
},
{
"name": "selected",
"description": "Defines the selected state of the component.",
"value": { "type": "boolean" }
}
],
"events": []
}
},
{
"name": "ui5-navigation-layout",
"description": "### Overview\n\nThe `ui5-navigation-layout` is a container component that can be used to\ncreate a layout with a header, a side navigation and a content area.\n\n### Usage\n\nUse the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n\n### Responsive Behavior\n\nOn larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible\nby default and can be expanded or collapsed using the `mode` property.\nOn mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by\ndefault and can be displayed using the `mode` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`\n---\n\n\n### **Methods:**\n - **isSideCollapsed(): _boolean_** - Gets whether the side navigation is collapsed.\n\n### **Slots:**\n - **default** - Defines the content.\n- **header** - Defines the header.\n- **sideContent** - Defines the side content.",
"doc-url": "",
"attributes": [
{
"name": "mode",
"description": "Specifies the navigation layout mode.",
"value": {
"type": "\"Auto\" | \"Collapsed\" | \"Expanded\"",
"default": "\"Auto\""
}
}
],
"slots": [
{ "name": "default", "description": "Defines the content." },
{ "name": "header", "description": "Defines the header." },
{
"name": "sideContent",
"description": "Defines the side content."
}
],
"events": [],
"js": {
"properties": [
{
"name": "mode",
"description": "Specifies the navigation layout mode.",
"value": { "type": "\"Auto\" | \"Collapsed\" | \"Expanded\"" }
}
],
"events": []
}
},
{
"name": "ui5-navigation-menu",
"description": "### Overview\n\n`ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.\n\n### Usage\n\n`ui5-navigation-menu` contains `ui5-navigation-menu-item` components.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenu.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-navigation-menu-item` for the intended design.",
"doc-url": "",
"attributes": [],
"slots": [
{
"name": "default",
"description": "Defines the items of this component.\n\n**Note:** Use `ui5-navigation-menu-item` for the intended design."
}
],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-navigation-menu-item",
"description": "### Overview\n\n`ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n\n### Usage\n\n`ui5-navigation-menu-item` represents a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,\nand each `ui5-navigation-menu-item` is represented by a list item in that list. Therefore, you should only use\n`ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NavigationMenuItem.js\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "href",
"description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "target",
"description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "href",
"description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
"value": { "type": "string | undefined" }
},
{
"name": "target",
"description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-notification-list",
"description": "### Overview\nThe `ui5-notification-list` web component represents\na container for `ui5-li-notification-group` and `ui5-li-notification`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-notification-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Left] - Navigates up the items\n- [Down] or [Right] - Navigates down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationList.js\";``\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **item-close** - Fired when the `Close` button of any item is clicked.\n- **item-toggle** - Fired when an item is toggled.\n\n### **Slots:**\n - **default** - Defines the items of the component.",
"doc-url": "",
"attributes": [
{
"name": "no-data-text",
"description": "Defines the text that is displayed when the component contains no items.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the items of the component."
}
],
"events": [
{
"name": "item-click",
"description": "Fired when an item is clicked."
},
{
"name": "item-close",
"description": "Fired when the `Close` button of any item is clicked."
},
{
"name": "item-toggle",
"description": "Fired when an item is toggled."
}
],
"js": {
"properties": [
{
"name": "no-data-text",
"description": "Defines the text that is displayed when the component contains no items.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "item-click",
"description": "Fired when an item is clicked."
},
{
"name": "item-close",
"description": "Fired when the `Close` button of any item is clicked."
},
{
"name": "item-toggle",
"description": "Fired when an item is toggled."
}
]
}
},
{
"name": "ui5-li-notification-group",
"description": "### Overview\nThe `ui5-li-notification-group` is a special type of list item,\nthat unlike others can group items within self, usually `ui5-li-notification` items.\n\nThe component consists of:\n\n- `Toggle` button to expand and collapse the group\n- `TitleText` to entitle the group\n- Items of the group\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\nThe `ui5-li-notification-group` provides advanced keyboard handling.\nThis component provides fast navigation when the header is focused using the following keyboard shortcuts:\n\n- [Space] - toggles expand / collapse of the group\n- [Plus] - expands the group\n- [Minus] - collapses the group\n- [Right] - expands the group\n- [Left] - collapses the group\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`\n---\n\n\n### **Events:**\n - **load-more** - Fired when additional items are requested.\n- **toggle** - Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.\n\n### **Slots:**\n - **default** - Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.",
"doc-url": "",
"attributes": [
{
"name": "collapsed",
"description": "Defines if the group is collapsed or expanded.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "growing",
"description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.",
"value": {
"type": "\"Button\" | \"None\"",
"default": "\"None\""
}
}
],
"slots": [
{
"name": "default",
"description": "Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items."
}
],
"events": [
{
"name": "load-more",
"description": "Fired when additional items are requested."
},
{
"name": "toggle",
"description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction."
}
],
"js": {
"properties": [
{
"name": "collapsed",
"description": "Defines if the group is collapsed or expanded.",
"value": { "type": "boolean" }
},
{
"name": "growing",
"description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.",
"value": { "type": "\"Button\" | \"None\"" }
}
],
"events": [
{
"name": "load-more",
"description": "Fired when additional items are requested."
},
{
"name": "toggle",
"description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction."
}
]
}
},
{
"name": "ui5-notification-group-list",
"description": "Internal `ui5-li-notification-group-list` component,\nthat is used to support keyboard navigation of the notification group internal list.\n---\n",
"doc-url": "",
"attributes": [],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-notification-list-internal",
"description": "Internal `ui5-li-notification-list-list` component,\nthat is used to support keyboard navigation of the notification list internal list.\n---\n",
"doc-url": "",
"attributes": [],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-li-notification",
"description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the `Close` button is pressed.\n\n### **Slots:**\n - **avatar** - Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - ``.\n- **default** - Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **footnotes** - Defines the elements, displayed in the footer of the of the component.\n- **menu** - Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n\n### **CSS Parts:**\n - **title-text** - Used to style the titleText of the notification list item",
"doc-url": "",
"attributes": [
{
"name": "importance",
"description": "Defines the `Important` label of the item.",
"value": {
"type": "\"Standard\" | \"Important\"",
"default": "\"Standard\""
}
},
{
"name": "show-close",
"description": "Defines if the `Close` button would be displayed.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "state",
"description": "Defines the status indicator of the item.",
"value": {
"type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
"default": "\"None\""
}
},
{
"name": "wrapping-type",
"description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
"value": {
"type": "\"None\" | \"Normal\"",
"default": "\"None\""
}
}
],
"slots": [
{
"name": "avatar",
"description": "Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - ``."
},
{
"name": "default",
"description": "Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
},
{
"name": "footnotes",
"description": "Defines the elements, displayed in the footer of the of the component."
},
{
"name": "menu",
"description": "Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0."
}
],
"events": [
{
"name": "close",
"description": "Fired when the `Close` button is pressed."
}
],
"js": {
"properties": [
{
"name": "importance",
"description": "Defines the `Important` label of the item.",
"value": { "type": "\"Standard\" | \"Important\"" }
},
{
"name": "show-close",
"description": "Defines if the `Close` button would be displayed.",
"value": { "type": "boolean" }
},
{
"name": "state",
"description": "Defines the status indicator of the item.",
"value": {
"type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
}
},
{
"name": "wrapping-type",
"description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
"value": { "type": "\"None\" | \"Normal\"" }
}
],
"events": [
{
"name": "close",
"description": "Fired when the `Close` button is pressed."
}
]
}
},
{
"name": "ui5-page",
"description": "### Overview\n\nThe `ui5-page` is a container component that holds one whole screen of an application.\nThe page has three distinct areas that can hold content - a header, content area and a footer.\n### Structure\n#### Header\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n#### Content\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by setting `noScrolling` to `true`.\n#### Footer\nThe footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n\n**Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\nthat there is enough space for the `ui5-page` to be rendered.\n**Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Page.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the content HTML Element.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content section of the component",
"doc-url": "",
"attributes": [
{
"name": "background-design",
"description": "Defines the background color of the `ui5-page`.\n\n**Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.",
"value": {
"type": "\"List\" | \"Solid\" | \"Transparent\"",
"default": "\"Solid\""
}
},
{
"name": "fixed-footer",
"description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-footer",
"description": "Defines the footer visibility.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "no-scrolling",
"description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the content HTML Element."
},
{
"name": "footer",
"description": "Defines the footer HTML Element."
},
{
"name": "header",
"description": "Defines the header HTML Element."
}
],
"events": [],
"js": {
"properties": [
{
"name": "background-design",
"description": "Defines the background color of the `ui5-page`.\n\n**Note:** When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.",
"value": { "type": "\"List\" | \"Solid\" | \"Transparent\"" }
},
{
"name": "fixed-footer",
"description": "Defines if the footer is fixed at the very bottom of the page.\n\n**Note:** When set to true the footer is fixed at the very bottom of the page, otherwise it floats over the content with a slight offset from the bottom.",
"value": { "type": "boolean" }
},
{
"name": "hide-footer",
"description": "Defines the footer visibility.",
"value": { "type": "boolean" }
},
{
"name": "no-scrolling",
"description": "Disables vertical scrolling of page content.\nIf set to true, there will be no vertical scrolling at all.",
"value": { "type": "boolean" }
}
],
"events": []
}
},
{
"name": "ui5-product-switch",
"description": "### Overview\n\nThe `ui5-product-switch` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily switch between products.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Tab] - Move focus to the next interactive element after the `ui5-product-switch`\n- [Up] or [Down] - Navigates up and down the items\n- [Left] or [Right] - Navigates left and right the items\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";` (for `ui5-product-switch-item`)\n---\n\n\n### **Slots:**\n - **default** - Defines the items of the `ui5-product-switch`.",
"doc-url": "",
"attributes": [],
"slots": [
{
"name": "default",
"description": "Defines the items of the `ui5-product-switch`."
}
],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-product-switch-item",
"description": "### Overview\nThe `ui5-product-switch-item` web component represents the items displayed in the\n`ui5-product-switch` web component.\n\n**Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.\n\n### Keyboard Handling\nThe `ui5-product-switch` provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key.\n\n### **Slots:**\n - **image** - Defines an image to be displayed instead of the standard icon.\n\n**Note:** The image slot takes precedence over the icon property.\n**Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.",
"doc-url": "",
"attributes": [
{
"name": "icon",
"description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n``\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "subtitle-text",
"description": "Defines the subtitle of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "target",
"description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "target-src",
"description": "Defines the component target URI. Supports standard hyperlink behavior.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "title-text",
"description": "Defines the title of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "image",
"description": "Defines an image to be displayed instead of the standard icon.\n\n**Note:** The image slot takes precedence over the icon property.\n**Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment."
}
],
"events": [
{
"name": "click",
"description": "Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key."
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n``\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined" }
},
{
"name": "subtitle-text",
"description": "Defines the subtitle of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "target",
"description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** By default target will be open in the same frame as it was clicked.",
"value": { "type": "string | undefined" }
},
{
"name": "target-src",
"description": "Defines the component target URI. Supports standard hyperlink behavior.",
"value": { "type": "string | undefined" }
},
{
"name": "title-text",
"description": "Defines the title of the component.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "click",
"description": "Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key."
}
]
}
},
{
"name": "ui5-search",
"description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the popup is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n- **open** - Fired when the popup is opened.\n- **scope-change** - Fired when the scope has changed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.\n\n### **Slots:**\n - **action** - Defines the popup footer action button.\n- **default** - Defines the Search suggestion items.\n- **filterButton** - Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.\n- **illustration** - Defines the illustrated message to be shown in the popup.\n- **messageArea** - Defines the illustrated message to be shown in the popup.\n- **scopes** - Defines the component scope options.",
"doc-url": "",
"attributes": [
{
"name": "accessible-description",
"description": "Defines the accessible ARIA description of the field.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "field-loading",
"description": "Indicates whether a loading indicator should be shown in the input field.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "loading",
"description": "Indicates whether a loading indicator should be shown in the popup.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "no-typeahead",
"description": "Defines whether the value will be autcompleted to match an item.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "open",
"description": "Indicates whether the items picker is open.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "placeholder",
"description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "scope-value",
"description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
"value": { "type": "string | undefined", "default": "\"\"" }
},
{
"name": "show-clear-icon",
"description": "Defines whether the clear icon of the search will be shown.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "value",
"description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
"value": { "type": "string", "default": "\"\"" }
}
],
"slots": [
{
"name": "action",
"description": "Defines the popup footer action button."
},
{
"name": "default",
"description": "Defines the Search suggestion items."
},
{
"name": "filterButton",
"description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive."
},
{
"name": "illustration",
"description": "Defines the illustrated message to be shown in the popup."
},
{
"name": "messageArea",
"description": "Defines the illustrated message to be shown in the popup."
},
{
"name": "scopes",
"description": "Defines the component scope options."
}
],
"events": [
{
"name": "close",
"description": "Fired when the popup is closed."
},
{
"name": "input",
"description": "Fired when typing in input or clear icon is pressed."
},
{
"name": "open",
"description": "Fired when the popup is opened."
},
{
"name": "scope-change",
"description": "Fired when the scope has changed."
},
{
"name": "search",
"description": "Fired when the user has triggered search with Enter key or Search Button press."
}
],
"js": {
"properties": [
{
"name": "accessible-description",
"description": "Defines the accessible ARIA description of the field.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "field-loading",
"description": "Indicates whether a loading indicator should be shown in the input field.",
"value": { "type": "boolean" }
},
{
"name": "loading",
"description": "Indicates whether a loading indicator should be shown in the popup.",
"value": { "type": "boolean" }
},
{
"name": "no-typeahead",
"description": "Defines whether the value will be autcompleted to match an item.",
"value": { "type": "boolean" }
},
{
"name": "open",
"description": "Indicates whether the items picker is open.",
"value": { "type": "boolean" }
},
{
"name": "placeholder",
"description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
"value": { "type": "string | undefined" }
},
{
"name": "scope-value",
"description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
"value": { "type": "string | undefined" }
},
{
"name": "show-clear-icon",
"description": "Defines whether the clear icon of the search will be shown.",
"value": { "type": "boolean" }
},
{
"name": "value",
"description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
"value": { "type": "string" }
}
],
"events": [
{
"name": "close",
"description": "Fired when the popup is closed."
},
{
"name": "input",
"description": "Fired when typing in input or clear icon is pressed."
},
{
"name": "open",
"description": "Fired when the popup is opened."
},
{
"name": "scope-change",
"description": "Fired when the scope has changed."
},
{
"name": "search",
"description": "Fired when the user has triggered search with Enter key or Search Button press."
}
]
}
},
{
"name": "ui5-search-field",
"description": "### Overview\n\nA `ui5-search-field` is an input field, used for user search.\n\nThe `ui5-search-field` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchField.js\";`\n---\n\n\n### **Events:**\n - **input** - Fired when typing in input or clear icon is pressed.\n- **scope-change** - Fired when the scope has changed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.\n\n### **Slots:**\n - **filterButton** - Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive.\n- **scopes** - Defines the component scope options.",
"doc-url": "",
"attributes": [
{
"name": "accessible-description",
"description": "Defines the accessible ARIA description of the field.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "field-loading",
"description": "Indicates whether a loading indicator should be shown in the input field.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "placeholder",
"description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "scope-value",
"description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
"value": { "type": "string | undefined", "default": "\"\"" }
},
{
"name": "show-clear-icon",
"description": "Defines whether the clear icon of the search will be shown.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "value",
"description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
"value": { "type": "string", "default": "\"\"" }
}
],
"slots": [
{
"name": "filterButton",
"description": "Defines the filter button slot, used to display an additional filtering button.\nThis slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\n**Note:** Scope button and Filter button are mutually exclusive."
},
{
"name": "scopes",
"description": "Defines the component scope options."
}
],
"events": [
{
"name": "input",
"description": "Fired when typing in input or clear icon is pressed."
},
{
"name": "scope-change",
"description": "Fired when the scope has changed."
},
{
"name": "search",
"description": "Fired when the user has triggered search with Enter key or Search Button press."
}
],
"js": {
"properties": [
{
"name": "accessible-description",
"description": "Defines the accessible ARIA description of the field.",
"value": { "type": "string | undefined" }
},
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "field-loading",
"description": "Indicates whether a loading indicator should be shown in the input field.",
"value": { "type": "boolean" }
},
{
"name": "placeholder",
"description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
"value": { "type": "string | undefined" }
},
{
"name": "scope-value",
"description": "Defines the value of the component:\n\nApplications are responsible for setting the correct scope value.\n\n**Note:** If the given value does not match any existing scopes,\nno scope will be selected and the SearchField scope component will be displayed as empty.",
"value": { "type": "string | undefined" }
},
{
"name": "show-clear-icon",
"description": "Defines whether the clear icon of the search will be shown.",
"value": { "type": "boolean" }
},
{
"name": "value",
"description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
"value": { "type": "string" }
}
],
"events": [
{
"name": "input",
"description": "Fired when typing in input or clear icon is pressed."
},
{
"name": "scope-change",
"description": "Fired when the scope has changed."
},
{
"name": "search",
"description": "Fired when the user has triggered search with Enter key or Search Button press."
}
]
}
},
{
"name": "ui5-search-item",
"description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n---\n\n\n### **Events:**\n - **delete** - Fired when delete button is pressed.\n\n### **Slots:**\n - **actions** - Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.\n- **image** - **Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS.",
"doc-url": "",
"attributes": [
{
"name": "deletable",
"description": "Defines whether the search item is deletable.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "description",
"description": "Defines the description that appears right under the item text, if available.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "icon",
"description": "Defines the icon name of the search item.\n**Note:** If provided, the image slot will be ignored.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "scope-name",
"description": "Defines the scope of the search item",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "selected",
"description": "Defines whether the search item is selected.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the heading text of the search item.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "actions",
"description": "Defines the actionable elements.\nThis slot allows placing additional interactive elements (such as buttons, icons, or tags)\nnext to the delete button, providing flexible customization for various user actions.\n\n**Note:** While the slot is flexible, for consistency with design guidelines,\nit's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements."
},
{
"name": "image",
"description": "**Note:** While the slot allows the option of setting a custom avatar, to comply with the\ndesign guidelines, use the `ui5-avatar` with size - XS."
}
],
"events": [
{
"name": "delete",
"description": "Fired when delete button is pressed."
}
],
"js": {
"properties": [
{
"name": "deletable",
"description": "Defines whether the search item is deletable.",
"value": { "type": "boolean" }
},
{
"name": "description",
"description": "Defines the description that appears right under the item text, if available.",
"value": { "type": "string | undefined" }
},
{
"name": "icon",
"description": "Defines the icon name of the search item.\n**Note:** If provided, the image slot will be ignored.",
"value": { "type": "string | undefined" }
},
{
"name": "scope-name",
"description": "Defines the scope of the search item",
"value": { "type": "string | undefined" }
},
{
"name": "selected",
"description": "Defines whether the search item is selected.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the heading text of the search item.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "delete",
"description": "Fired when delete button is pressed."
}
]
}
},
{
"name": "ui5-search-item-group",
"description": "The `ui5-search-item-group` is type of suggestion item,\nthat can be used to split the `ui5-search-item` suggestions into groups.\n---\n",
"doc-url": "",
"attributes": [],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-search-item-show-more",
"description": "### Overview\n\nA `ui5-search-item-show-more` is a special type of ui5-li that acts as a button to progressively reveal additional (overflow) items within a group.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItemShowMore.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated, either with a mouse/tap\nor by pressing the Enter or Space keys.",
"doc-url": "",
"attributes": [
{
"name": "items-to-show-count",
"description": "Specifies the number of additional items available to show.\nIf no value is defined, the control shows \"Show more\" (without any counter).\nIf a number is provided, it displays \"Show more (N)\", where N is that number.",
"value": { "type": "number | undefined", "default": "undefined" }
},
{
"name": "selected",
"description": "Defines whether the show more item is selected.",
"value": { "type": "boolean", "default": "false" }
}
],
"events": [
{
"name": "click",
"description": "Fired when the component is activated, either with a mouse/tap\nor by pressing the Enter or Space keys."
}
],
"js": {
"properties": [
{
"name": "items-to-show-count",
"description": "Specifies the number of additional items available to show.\nIf no value is defined, the control shows \"Show more\" (without any counter).\nIf a number is provided, it displays \"Show more (N)\", where N is that number.",
"value": { "type": "number | undefined" }
},
{
"name": "selected",
"description": "Defines whether the show more item is selected.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "click",
"description": "Fired when the component is activated, either with a mouse/tap\nor by pressing the Enter or Space keys."
}
]
}
},
{
"name": "ui5-search-message-area",
"description": "`import \"@ui5/webcomponents-fiori/dist/SearchMessageArea.js\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "description",
"description": "Defines the description text to be displayed.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "text",
"description": "Defines the text to be displayed.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "description",
"description": "Defines the description text to be displayed.",
"value": { "type": "string | undefined" }
},
{
"name": "text",
"description": "Defines the text to be displayed.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-search-scope",
"description": "The `ui5-search-scope` represents the options for the scope in `ui5-search`.\n---\n",
"doc-url": "",
"attributes": [
{
"name": "text",
"description": "Defines the text of the component.",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "value",
"description": "Defines the value of the `ui5-search-scope`.\nUsed for selection in Search scopes.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "text",
"description": "Defines the text of the component.",
"value": { "type": "string" }
},
{
"name": "value",
"description": "Defines the value of the `ui5-search-scope`.\nUsed for selection in Search scopes.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-shellbar",
"description": "### Overview\n\nThe `ui5-shellbar` is meant to serve as an application header\nand includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.\n\n### Stable DOM Refs\n\nYou can use the following stable DOM refs for the `ui5-shellbar`:\n\n- logo\n- notifications\n- overflow\n- profile\n- product-switch\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBar.js\";`\n---\n\n\n### **Events:**\n - **content-item-visibility-change** - Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change.\n- **logo-click** - Fired, when the logo is activated.\n- **menu-item-click** - Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **notifications-click** - Fired, when the notification icon is activated.\n- **product-switch-click** - Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.\n- **profile-click** - Fired, when the profile slot is present.\n- **search-button-click** - Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.\n- **search-field-clear** - Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change.\n- **search-field-toggle** - Fired, when the search field is expanded or collapsed.\n\n### **Methods:**\n - **closeOverflow(): _void_** - Closes the overflow popover.\n- **getSearchButtonDomRef(): _Promise_** - Returns the search button DOM reference.\n\n### **Slots:**\n - **assistant** - Defines the assistant slot.\n- **branding** - Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change.\n- **content** - Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change.\n- **default** - Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the ``.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.\n- **menuItems** - Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the `` and its ancestors.\n- **profile** - You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile.\n- **searchField** - Defines the `ui5-input`, that will be used as a search field.\n- **startButton** - Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-shellbar`",
"doc-url": "",
"attributes": [
{
"name": "accessibility-attributes",
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
"value": {
"type": "ShellBarAccessibilityAttributes",
"default": "{}"
}
},
{
"name": "disable-search-collapse",
"description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-search-button",
"description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "logo-dom-ref",
"description": "Returns the `logo` DOM ref.",
"value": { "type": "any", "default": "null" }
},
{
"name": "notifications-count",
"description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "notifications-dom-ref",
"description": "Returns the `notifications` icon DOM ref.",
"value": { "type": "any", "default": "null" }
},
{
"name": "overflow-dom-ref",
"description": "Returns the `overflow` icon DOM ref.",
"value": { "type": "any", "default": "null" }
},
{
"name": "primary-title",
"description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "product-switch-dom-ref",
"description": "Returns the `product-switch` icon DOM ref.",
"value": { "type": "any", "default": "null" }
},
{
"name": "profile-dom-ref",
"description": "Returns the `profile` icon DOM ref.",
"value": { "type": "any", "default": "null" }
},
{
"name": "secondary-title",
"description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "show-notifications",
"description": "Defines, if the notification icon would be displayed.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-product-switch",
"description": "Defines, if the product switch icon would be displayed.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-search-field",
"description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "assistant",
"description": "Defines the assistant slot."
},
{
"name": "branding",
"description": "Defines the branding slot.\nThe `ui5-shellbar-branding` component is intended to be placed inside this slot.\nContent placed here takes precedence over the `primaryTitle` property and the `logo` content slot.\n\n**Note:** The `branding` slot is in an experimental state and is a subject to change."
},
{
"name": "content",
"description": "Define the items displayed in the content area.\n\nUse the `data-hide-order` attribute with numeric value to specify the order of the items to be hidden when the space is not enough.\nLower values will be hidden first.\n\n**Note:** The `content` slot is in an experimental state and is a subject to change."
},
{
"name": "default",
"description": "Defines the `ui5-shellbar` additional items.\n\n**Note:**\nYou can use the ``."
},
{
"name": "logo",
"description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo."
},
{
"name": "menuItems",
"description": "Defines the items displayed in menu after a click on a start button.\n\n**Note:** You can use the `` and its ancestors."
},
{
"name": "profile",
"description": "You can pass `ui5-avatar` to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\n**Note:** We recommend not using the `size` attribute of `ui5-avatar` because\nit should have specific size by design in the context of `ui5-shellbar` profile."
},
{
"name": "searchField",
"description": "Defines the `ui5-input`, that will be used as a search field."
},
{
"name": "startButton",
"description": "Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a menu button.\nIt gets overstyled to match ShellBar's styling."
}
],
"events": [
{
"name": "content-item-visibility-change",
"description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change."
},
{
"name": "logo-click",
"description": "Fired, when the logo is activated."
},
{
"name": "menu-item-click",
"description": "Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
},
{
"name": "notifications-click",
"description": "Fired, when the notification icon is activated."
},
{
"name": "product-switch-click",
"description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
},
{
"name": "profile-click",
"description": "Fired, when the profile slot is present."
},
{
"name": "search-button-click",
"description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`."
},
{
"name": "search-field-clear",
"description": "Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change."
},
{
"name": "search-field-toggle",
"description": "Fired, when the search field is expanded or collapsed."
}
],
"js": {
"properties": [
{
"name": "accessibility-attributes",
"description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
"value": { "type": "ShellBarAccessibilityAttributes" }
},
{
"name": "disable-search-collapse",
"description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.",
"value": { "type": "boolean" }
},
{
"name": "hide-search-button",
"description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
"value": { "type": "boolean" }
},
{
"name": "logo-dom-ref",
"description": "Returns the `logo` DOM ref.",
"value": { "type": "any" }
},
{
"name": "notifications-count",
"description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.",
"value": { "type": "string | undefined" }
},
{
"name": "notifications-dom-ref",
"description": "Returns the `notifications` icon DOM ref.",
"value": { "type": "any" }
},
{
"name": "overflow-dom-ref",
"description": "Returns the `overflow` icon DOM ref.",
"value": { "type": "any" }
},
{
"name": "primary-title",
"description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
"value": { "type": "string | undefined" }
},
{
"name": "product-switch-dom-ref",
"description": "Returns the `product-switch` icon DOM ref.",
"value": { "type": "any" }
},
{
"name": "profile-dom-ref",
"description": "Returns the `profile` icon DOM ref.",
"value": { "type": "any" }
},
{
"name": "secondary-title",
"description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
"value": { "type": "string | undefined" }
},
{
"name": "show-notifications",
"description": "Defines, if the notification icon would be displayed.",
"value": { "type": "boolean" }
},
{
"name": "show-product-switch",
"description": "Defines, if the product switch icon would be displayed.",
"value": { "type": "boolean" }
},
{
"name": "show-search-field",
"description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "content-item-visibility-change",
"description": "Fired, when an item from the content slot is hidden or shown.\n**Note:** The `content-item-visibility-change` event is in an experimental state and is a subject to change."
},
{
"name": "logo-click",
"description": "Fired, when the logo is activated."
},
{
"name": "menu-item-click",
"description": "Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
},
{
"name": "notifications-click",
"description": "Fired, when the notification icon is activated."
},
{
"name": "product-switch-click",
"description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`."
},
{
"name": "profile-click",
"description": "Fired, when the profile slot is present."
},
{
"name": "search-button-click",
"description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`."
},
{
"name": "search-field-clear",
"description": "Fired, when the search cancel button is activated.\n\n**Note:** You can prevent the default behavior (clearing the search field value) by calling `event.preventDefault()`. The search will still be closed.\n**Note:** The `search-field-clear` event is in an experimental state and is a subject to change."
},
{
"name": "search-field-toggle",
"description": "Fired, when the search field is expanded or collapsed."
}
]
}
},
{
"name": "ui5-shellbar-branding",
"description": "### Overview\nThe `ui5-shellbar-branding` component is intended to be placed inside the branding slot of the\n`ui5-shellbar` component. Its content has higher priority than the `primaryTitle` property\nand the `logo` slot of `ui5-shellbar`.\n---\n\n\n### **Events:**\n - **click** - Fired, when the logo is activated.\n\n### **Slots:**\n - **default** - Defines the title for the ui5-shellbar-branding component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **logo** - Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "href",
"description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "target",
"description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the title for the ui5-shellbar-branding component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
},
{
"name": "logo",
"description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo."
}
],
"events": [
{
"name": "click",
"description": "Fired, when the logo is activated."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the text alternative of the component.\nIf not provided a default text alternative will be set, if present.",
"value": { "type": "string | undefined" }
},
{
"name": "href",
"description": "Defines the component href.\n\n**Note:** Standard hyperlink behavior is supported.",
"value": { "type": "string | undefined" }
},
{
"name": "target",
"description": "Defines the component target.\n\n**Notes:**\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**This property must only be used when the `href` property is set.**",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "click",
"description": "Fired, when the logo is activated."
}
]
}
},
{
"name": "ui5-shellbar-item",
"description": "The `ui5-shellbar-item` represents a custom item for `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the item is clicked.",
"doc-url": "",
"attributes": [
{
"name": "accessibility-attributes",
"description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.",
"value": {
"type": "ShellBarItemAccessibilityAttributes",
"default": "{}"
}
},
{
"name": "count",
"description": "Defines the count displayed in badge.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "icon",
"description": "Defines the item's icon.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "text",
"description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"events": [
{
"name": "click",
"description": "Fired when the item is clicked."
}
],
"js": {
"properties": [
{
"name": "accessibility-attributes",
"description": "Defines additional accessibility attributes on Shellbar Items.\n\nThe accessibility attributes support the following values:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\n- **controls**: Identifies the element (or elements) whose contents\nor presence are controlled by the component.\nAccepts a lowercase string value, referencing the ID of the element it controls.",
"value": { "type": "ShellBarItemAccessibilityAttributes" }
},
{
"name": "count",
"description": "Defines the count displayed in badge.",
"value": { "type": "string | undefined" }
},
{
"name": "icon",
"description": "Defines the item's icon.",
"value": { "type": "string | undefined" }
},
{
"name": "text",
"description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "click",
"description": "Fired when the item is clicked."
}
]
}
},
{
"name": "ui5-shellbar-search",
"description": "Search field for the ShellBar component.\n---\n",
"doc-url": "",
"attributes": [
{
"name": "auto-open",
"description": "Indicates whether the suggestions popover should be opened on focus.",
"value": { "type": "boolean", "default": "false" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "auto-open",
"description": "Indicates whether the suggestions popover should be opened on focus.",
"value": { "type": "boolean" }
}
],
"events": []
}
},
{
"name": "ui5-shellbar-spacer",
"description": "### Overview\nThe `ui5-shellbar-spacer` is an element, used for visual separation between the two content parts of the `ui5-shellbar`.\n**Note:** The `ui5-shellbar-spacer` component is in an experimental state and is a subject to change.\n---\n",
"doc-url": "",
"attributes": [],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-side-navigation",
"description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **selection-change** - Fired when the selection has changed via user interaction.\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "collapsed",
"description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the main items of the component."
},
{
"name": "fixedItems",
"description": "Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)"
},
{
"name": "header",
"description": "Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;"
}
],
"events": [
{
"name": "item-click",
"description": "Fired when an item is clicked."
},
{
"name": "selection-change",
"description": "Fired when the selection has changed via user interaction."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "collapsed",
"description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "item-click",
"description": "Fired when an item is clicked."
},
{
"name": "selection-change",
"description": "Fired when the selection has changed via user interaction."
}
]
}
},
{
"name": "ui5-side-navigation-group",
"description": "### Overview\n\nRepresents a group of navigation actions within `ui5-side-navigation`.\nThe `ui5-side-navigation-group` can only be used inside a `ui5-side-navigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines nested items by passing `ui5-side-navigation-item` to the default slot.",
"doc-url": "",
"attributes": [
{
"name": "disabled",
"description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "expanded",
"description": "Defines if the item is expanded",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the text of the item.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "default",
"description": "Defines nested items by passing `ui5-side-navigation-item` to the default slot."
}
],
"events": [],
"js": {
"properties": [
{
"name": "disabled",
"description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
"value": { "type": "boolean" }
},
{
"name": "expanded",
"description": "Defines if the item is expanded",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the text of the item.",
"value": { "type": "string | undefined" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-side-navigation-item",
"description": "### Overview\n\nRepresents a navigation action. It can provide sub items.\nThe `ui5-side-navigation-item` is used within `ui5-side-navigation` or `ui5-side-navigation-group` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.\n\n### **Slots:**\n - **default** - Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot.",
"doc-url": "",
"attributes": [
{
"name": "accessibility-attributes",
"description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
"value": {
"type": "SideNavigationItemAccessibilityAttributes",
"default": "{}"
}
},
{
"name": "design",
"description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
"value": {
"type": "\"Default\" | \"Action\"",
"default": "\"Default\""
}
},
{
"name": "disabled",
"description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "expanded",
"description": "Defines if the item is expanded",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "href",
"description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "icon",
"description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "selected",
"description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "target",
"description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "text",
"description": "Defines the text of the item.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "unselectable",
"description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot."
}
],
"events": [
{
"name": "click",
"description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys."
}
],
"js": {
"properties": [
{
"name": "accessibility-attributes",
"description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
"value": { "type": "SideNavigationItemAccessibilityAttributes" }
},
{
"name": "design",
"description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
"value": { "type": "\"Default\" | \"Action\"" }
},
{
"name": "disabled",
"description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
"value": { "type": "boolean" }
},
{
"name": "expanded",
"description": "Defines if the item is expanded",
"value": { "type": "boolean" }
},
{
"name": "href",
"description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
"value": { "type": "string | undefined" }
},
{
"name": "icon",
"description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined" }
},
{
"name": "selected",
"description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
"value": { "type": "boolean" }
},
{
"name": "target",
"description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
"value": { "type": "string | undefined" }
},
{
"name": "text",
"description": "Defines the text of the item.",
"value": { "type": "string | undefined" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
"value": { "type": "string | undefined" }
},
{
"name": "unselectable",
"description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "click",
"description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys."
}
]
}
},
{
"name": "ui5-side-navigation-sub-item",
"description": "### Overview\nRepresents a single navigation action within `ui5-side-navigation-item`.\nThe `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.",
"doc-url": "",
"attributes": [
{
"name": "accessibility-attributes",
"description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
"value": {
"type": "SideNavigationItemAccessibilityAttributes",
"default": "{}"
}
},
{
"name": "design",
"description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
"value": {
"type": "\"Default\" | \"Action\"",
"default": "\"Default\""
}
},
{
"name": "disabled",
"description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "href",
"description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "icon",
"description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "selected",
"description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "target",
"description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "text",
"description": "Defines the text of the item.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "unselectable",
"description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
"value": { "type": "boolean", "default": "false" }
}
],
"events": [
{
"name": "click",
"description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys."
}
],
"js": {
"properties": [
{
"name": "accessibility-attributes",
"description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n**Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.",
"value": { "type": "SideNavigationItemAccessibilityAttributes" }
},
{
"name": "design",
"description": "Item design.\n\n**Note:** Items with \"Action\" design must not have sub-items.",
"value": { "type": "\"Default\" | \"Action\"" }
},
{
"name": "disabled",
"description": "Defines whether the component is disabled.\nA disabled component can't be pressed or\nfocused, and it is not in the tab chain.",
"value": { "type": "boolean" }
},
{
"name": "href",
"description": "Defines the link target URI. Supports standard hyperlink behavior.\nIf a JavaScript action should be triggered,\nthis should not be set, but instead an event handler\nfor the `click` event should be registered.",
"value": { "type": "string | undefined" }
},
{
"name": "icon",
"description": "Defines the icon of the item.\n\n**Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined" }
},
{
"name": "selected",
"description": "Defines whether the item is selected.\n\n**Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.",
"value": { "type": "boolean" }
},
{
"name": "target",
"description": "Defines the component target.\n\nPossible values:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `framename`\n\n**Note:** Items that have a defined `href` and `target`\nattribute set to `_blank` should not be selectable.",
"value": { "type": "string | undefined" }
},
{
"name": "text",
"description": "Defines the text of the item.",
"value": { "type": "string | undefined" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
"value": { "type": "string | undefined" }
},
{
"name": "unselectable",
"description": "Indicates whether the navigation item is selectable. By default, all items are selectable unless specifically marked as unselectable.\n\nWhen a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\nTo improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\n\n**Guidelines**:\n- Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n- Items that trigger actions (with design \"Action\") should be marked as unselectable.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "click",
"description": "Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys."
}
]
}
},
{
"name": "ui5-sort-item",
"description": "### Overview\n\nThe `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\nIt represents a single sort option that users can select to organize data in ascending or descending order.\n\n### Usage\n\nThe `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\nEach sort item represents a column or field by which data can be sorted.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "selected",
"description": "Defines if the sort item is selected.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the text of the sort item.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "selected",
"description": "Defines if the sort item is selected.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the text of the sort item.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-timeline",
"description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n---\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "growing",
"description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.",
"value": {
"type": "\"Button\" | \"None\" | \"Scroll\"",
"default": "\"None\""
}
},
{
"name": "layout",
"description": "Defines the items orientation.",
"value": {
"type": "\"Vertical\" | \"Horizontal\"",
"default": "\"Vertical\""
}
},
{
"name": "loading",
"description": "Defines if the component should display a loading indicator over the Timeline.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "loading-delay",
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
"value": { "type": "number", "default": "1000" }
}
],
"slots": [
{
"name": "default",
"description": "Determines the content of the `ui5-timeline`."
}
],
"events": [
{
"name": "load-more",
"description": "Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "growing",
"description": "Defines whether the Timeline will have growing capability either by pressing a \"More\" button,\nor via user scroll. In both cases a `load-more` event is fired.\n\nAvailable options:\n\n`Button` - Displays a button at the end of the Timeline, which when pressed triggers the `load-more` event.\n\n`Scroll` -Triggers the `load-more` event when the user scrolls to the end of the Timeline.\n\n`None` (default) - The growing functionality is off.",
"value": { "type": "\"Button\" | \"None\" | \"Scroll\"" }
},
{
"name": "layout",
"description": "Defines the items orientation.",
"value": { "type": "\"Vertical\" | \"Horizontal\"" }
},
{
"name": "loading",
"description": "Defines if the component should display a loading indicator over the Timeline.",
"value": { "type": "boolean" }
},
{
"name": "loading-delay",
"description": "Defines the delay in milliseconds, after which the loading indicator will show up for this component.",
"value": { "type": "number" }
}
],
"events": [
{
"name": "load-more",
"description": "Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`."
}
]
}
},
{
"name": "ui5-timeline-group-item",
"description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of ``s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.\n---\n\n\n### **Events:**\n - **toggle** - Fired when the group item is expanded or collapsed.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline-group-item`.",
"doc-url": "",
"attributes": [
{
"name": "collapsed",
"description": "Determines if the group is collapsed or expanded.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "group-name",
"description": "Defines the text of the button that expands and collapses the group.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "default",
"description": "Determines the content of the `ui5-timeline-group-item`."
}
],
"events": [
{
"name": "toggle",
"description": "Fired when the group item is expanded or collapsed."
}
],
"js": {
"properties": [
{
"name": "collapsed",
"description": "Determines if the group is collapsed or expanded.",
"value": { "type": "boolean" }
},
{
"name": "group-name",
"description": "Defines the text of the button that expands and collapses the group.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "toggle",
"description": "Fired when the group item is expanded or collapsed."
}
]
}
},
{
"name": "ui5-timeline-item",
"description": "### Overview\n\nAn entry posted on the timeline.\n---\n\n\n### **Events:**\n - **name-click** - Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.\n\n### **Slots:**\n - **default** - Defines the content of the `ui5-timeline-item`.",
"doc-url": "",
"attributes": [
{
"name": "icon",
"description": "Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\nSAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "name",
"description": "Defines the name of the item, displayed before the `title-text`.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "name-clickable",
"description": "Defines if the `name` is clickable.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "state",
"description": "Defines the state of the icon displayed in the `ui5-timeline-item`.",
"value": {
"type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
"default": "\"None\""
}
},
{
"name": "subtitle-text",
"description": "Defines the subtitle text of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "title-text",
"description": "Defines the title text of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the content of the `ui5-timeline-item`."
}
],
"events": [
{
"name": "name-click",
"description": "Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set."
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\nSAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined" }
},
{
"name": "name",
"description": "Defines the name of the item, displayed before the `title-text`.",
"value": { "type": "string | undefined" }
},
{
"name": "name-clickable",
"description": "Defines if the `name` is clickable.",
"value": { "type": "boolean" }
},
{
"name": "state",
"description": "Defines the state of the icon displayed in the `ui5-timeline-item`.",
"value": {
"type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
}
},
{
"name": "subtitle-text",
"description": "Defines the subtitle text of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "title-text",
"description": "Defines the title text of the component.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "name-click",
"description": "Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set."
}
]
}
},
{
"name": "ui5-upload-collection",
"description": "### Overview\nThis component allows you to represent files before uploading them to a server, with the help of `ui5-upload-collection-item`.\nIt also allows you to show already uploaded files.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UploadCollection.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";` (for `ui5-upload-collection-item`)\n---\n\n\n### **Events:**\n - **item-delete** - Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single` and `Multiple` modes.\n\n### **Slots:**\n - **default** - Defines the items of the `ui5-upload-collection`.\n\n**Note:** Use `ui5-upload-collection-item` for the intended design.\n- **header** - Defines the `ui5-upload-collection` header.\n\n**Note:** If `header` slot is provided,\nthe labelling of the `UploadCollection` is a responsibility of the application developer.\n`accessibleName` should be used.",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "hide-drag-overlay",
"description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "no-data-description",
"description": "Allows you to set your own text for the 'No data' description.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "no-data-header-level",
"description": "Defines the header level of the 'No data' text.",
"value": {
"type": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\"",
"default": "\"H2\""
}
},
{
"name": "no-data-text",
"description": "Allows you to set your own text for the 'No data' text.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "selection-mode",
"description": "Defines the selection mode of the `ui5-upload-collection`.",
"value": {
"type": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\"",
"default": "\"None\""
}
}
],
"slots": [
{
"name": "default",
"description": "Defines the items of the `ui5-upload-collection`.\n\n**Note:** Use `ui5-upload-collection-item` for the intended design."
},
{
"name": "header",
"description": "Defines the `ui5-upload-collection` header.\n\n**Note:** If `header` slot is provided,\nthe labelling of the `UploadCollection` is a responsibility of the application developer.\n`accessibleName` should be used."
}
],
"events": [
{
"name": "item-delete",
"description": "Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`."
},
{
"name": "selection-change",
"description": "Fired when selection is changed by user interaction\nin `Single` and `Multiple` modes."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "hide-drag-overlay",
"description": "By default there will be drag and drop overlay shown over the `ui5-upload-collection` when files\nare dragged. If you don't intend to use drag and drop, set this property.\n\n**Note:** It is up to the application developer to add handler for `drop` event and handle it.\n`ui5-upload-collection` only displays an overlay.",
"value": { "type": "boolean" }
},
{
"name": "no-data-description",
"description": "Allows you to set your own text for the 'No data' description.",
"value": { "type": "string | undefined" }
},
{
"name": "no-data-header-level",
"description": "Defines the header level of the 'No data' text.",
"value": {
"type": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\""
}
},
{
"name": "no-data-text",
"description": "Allows you to set your own text for the 'No data' text.",
"value": { "type": "string | undefined" }
},
{
"name": "selection-mode",
"description": "Defines the selection mode of the `ui5-upload-collection`.",
"value": {
"type": "\"None\" | \"Single\" | \"SingleStart\" | \"SingleEnd\" | \"SingleAuto\" | \"Multiple\""
}
}
],
"events": [
{
"name": "item-delete",
"description": "Fired when an element is dropped inside the drag and drop overlay.\n\n**Note:** The `drop` event is fired only when elements are dropped within the drag and drop overlay and ignored for the other parts of the `ui5-upload-collection`."
},
{
"name": "selection-change",
"description": "Fired when selection is changed by user interaction\nin `Single` and `Multiple` modes."
}
]
}
},
{
"name": "ui5-upload-collection-item",
"description": "### Overview\nA component to be used within the `ui5-upload-collection`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";`\n---\n\n\n### **Events:**\n - **file-name-click** - Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`.\n- **rename** - Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`.\n- **retry** - Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`.\n- **terminate** - Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`.\n\n### **Slots:**\n - **default** - Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name.\n- **thumbnail** - A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.\n\n**Note:** Use `ui5-icon` or `img` for the intended design.",
"doc-url": "",
"attributes": [
{
"name": "disable-delete-button",
"description": "Disables the delete button.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "file",
"description": "Holds an instance of `File` associated with this item.",
"value": { "type": "File | null", "default": "null" }
},
{
"name": "file-name",
"description": "The name of the file.",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "file-name-clickable",
"description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-delete-button",
"description": "Hides the delete button.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-retry-button",
"description": "Hides the retry button when `uploadState` property is `Error`.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "hide-terminate-button",
"description": "Hides the terminate button when `uploadState` property is `Uploading`.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "progress",
"description": "The upload progress in percentage.\n\n**Note:** Expected values are in the interval [0, 100].",
"value": { "type": "number", "default": "0" }
},
{
"name": "upload-state",
"description": "Upload state.\n\nDepending on this property, the item displays the following:\n\n- `Ready` - progress indicator is displayed.\n- `Uploading` - progress indicator and terminate button are displayed. When the terminate button is pressed, `terminate` event is fired.\n- `Error` - progress indicator and retry button are displayed. When the retry button is pressed, `retry` event is fired.\n- `Complete` - progress indicator is not displayed.",
"value": {
"type": "\"Complete\" | \"Error\" | \"Ready\" | \"Uploading\"",
"default": "\"Ready\""
}
}
],
"slots": [
{
"name": "default",
"description": "Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name."
},
{
"name": "thumbnail",
"description": "A thumbnail, which will be shown in the beginning of the `ui5-upload-collection-item`.\n\n**Note:** Use `ui5-icon` or `img` for the intended design."
}
],
"events": [
{
"name": "file-name-click",
"description": "Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`."
},
{
"name": "rename",
"description": "Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`."
},
{
"name": "retry",
"description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`."
},
{
"name": "terminate",
"description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`."
}
],
"js": {
"properties": [
{
"name": "disable-delete-button",
"description": "Disables the delete button.",
"value": { "type": "boolean" }
},
{
"name": "file",
"description": "Holds an instance of `File` associated with this item.",
"value": { "type": "File | null" }
},
{
"name": "file-name",
"description": "The name of the file.",
"value": { "type": "string" }
},
{
"name": "file-name-clickable",
"description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.",
"value": { "type": "boolean" }
},
{
"name": "hide-delete-button",
"description": "Hides the delete button.",
"value": { "type": "boolean" }
},
{
"name": "hide-retry-button",
"description": "Hides the retry button when `uploadState` property is `Error`.",
"value": { "type": "boolean" }
},
{
"name": "hide-terminate-button",
"description": "Hides the terminate button when `uploadState` property is `Uploading`.",
"value": { "type": "boolean" }
},
{
"name": "progress",
"description": "The upload progress in percentage.\n\n**Note:** Expected values are in the interval [0, 100].",
"value": { "type": "number" }
},
{
"name": "upload-state",
"description": "Upload state.\n\nDepending on this property, the item displays the following:\n\n- `Ready` - progress indicator is displayed.\n- `Uploading` - progress indicator and terminate button are displayed. When the terminate button is pressed, `terminate` event is fired.\n- `Error` - progress indicator and retry button are displayed. When the retry button is pressed, `retry` event is fired.\n- `Complete` - progress indicator is not displayed.",
"value": {
"type": "\"Complete\" | \"Error\" | \"Ready\" | \"Uploading\""
}
}
],
"events": [
{
"name": "file-name-click",
"description": "Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`."
},
{
"name": "rename",
"description": "Fired when the `fileName` property gets changed.\n\n**Note:** An edit button is displayed on each item,\nwhen the `ui5-upload-collection-item` `type` property is set to `Detail`."
},
{
"name": "retry",
"description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`."
},
{
"name": "terminate",
"description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`."
}
]
}
},
{
"name": "ui5-user-menu",
"description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n---\n\n\n### **Events:**\n - **avatar-click** - Fired when the account avatar is selected.\n- **change-account** - Fired when the account is switched to a different one.\n- **close** - Fired when a user menu is close.\n- **edit-accounts-click** - Fired when the \"Edit Accounts\" button is selected.\n- **item-click** - Fired when a menu item is selected.\n- **manage-account-click** - Fired when the \"Manage Account\" button is selected.\n- **open** - Fired when a user menu is open.\n- **sign-out-click** - Fired when the \"Sign Out\" button is selected.\n\n### **Slots:**\n - **accounts** - Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.\n- **default** - Defines the menu items.\n- **footer** - Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely.",
"doc-url": "",
"attributes": [
{
"name": "open",
"description": "Defines if the User Menu is opened.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "opener",
"description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
"value": {
"type": "string | HTMLElement | null | undefined",
"default": "undefined"
}
},
{
"name": "show-edit-accounts",
"description": "Defines if the User Menu shows the Edit Accounts option.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-edit-button",
"description": "Defines if the User menu shows edit button.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-manage-account",
"description": "Defines if the User Menu shows the Manage Account option.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-other-accounts",
"description": "Defines if the User Menu shows the Other Accounts option.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "accounts",
"description": "Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`."
},
{ "name": "default", "description": "Defines the menu items." },
{
"name": "footer",
"description": "Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely."
}
],
"events": [
{
"name": "avatar-click",
"description": "Fired when the account avatar is selected."
},
{
"name": "change-account",
"description": "Fired when the account is switched to a different one."
},
{
"name": "close",
"description": "Fired when a user menu is close."
},
{
"name": "edit-accounts-click",
"description": "Fired when the \"Edit Accounts\" button is selected."
},
{
"name": "item-click",
"description": "Fired when a menu item is selected."
},
{
"name": "manage-account-click",
"description": "Fired when the \"Manage Account\" button is selected."
},
{
"name": "open",
"description": "Fired when a user menu is open."
},
{
"name": "sign-out-click",
"description": "Fired when the \"Sign Out\" button is selected."
}
],
"js": {
"properties": [
{
"name": "open",
"description": "Defines if the User Menu is opened.",
"value": { "type": "boolean" }
},
{
"name": "opener",
"description": "Defines the ID or DOM Reference of the element at which the user menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
"value": { "type": "string | HTMLElement | null | undefined" }
},
{
"name": "show-edit-accounts",
"description": "Defines if the User Menu shows the Edit Accounts option.",
"value": { "type": "boolean" }
},
{
"name": "show-edit-button",
"description": "Defines if the User menu shows edit button.",
"value": { "type": "boolean" }
},
{
"name": "show-manage-account",
"description": "Defines if the User Menu shows the Manage Account option.",
"value": { "type": "boolean" }
},
{
"name": "show-other-accounts",
"description": "Defines if the User Menu shows the Other Accounts option.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "avatar-click",
"description": "Fired when the account avatar is selected."
},
{
"name": "change-account",
"description": "Fired when the account is switched to a different one."
},
{
"name": "close",
"description": "Fired when a user menu is close."
},
{
"name": "edit-accounts-click",
"description": "Fired when the \"Edit Accounts\" button is selected."
},
{
"name": "item-click",
"description": "Fired when a menu item is selected."
},
{
"name": "manage-account-click",
"description": "Fired when the \"Manage Account\" button is selected."
},
{
"name": "open",
"description": "Fired when a user menu is open."
},
{
"name": "sign-out-click",
"description": "Fired when the \"Sign Out\" button is selected."
}
]
}
},
{
"name": "ui5-user-menu-account",
"description": "### Overview\n\nThe `ui5-user-menu-account` represents an account in the `ui5-user-menu`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenuAccount.js\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "additional-info",
"description": "Defines additional information for the user.",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "avatar-color-scheme",
"description": "Defines the background color of the desired image.\nIf `avatarColorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.",
"value": {
"type": "\"Auto\" | \"Transparent\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\"",
"default": "\"Auto\""
}
},
{
"name": "avatar-initials",
"description": "Defines the avatar initials of the user.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "avatar-src",
"description": "Defines the avatar image url of the user.",
"value": { "type": "string | undefined", "default": "\"\"" }
},
{
"name": "description",
"description": "Defines description of the user.",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "loading",
"description": "Indicates whether a loading indicator should be shown.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "selected",
"description": "Defines if the user is selected.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "subtitle-text",
"description": "Defines additional text of the user.",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "title-text",
"description": "Defines the title text of the user.",
"value": { "type": "string", "default": "\"\"" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "additional-info",
"description": "Defines additional information for the user.",
"value": { "type": "string" }
},
{
"name": "avatar-color-scheme",
"description": "Defines the background color of the desired image.\nIf `avatarColorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.",
"value": {
"type": "\"Auto\" | \"Transparent\" | \"Accent1\" | \"Accent2\" | \"Accent3\" | \"Accent4\" | \"Accent5\" | \"Accent6\" | \"Accent7\" | \"Accent8\" | \"Accent9\" | \"Accent10\" | \"Placeholder\""
}
},
{
"name": "avatar-initials",
"description": "Defines the avatar initials of the user.",
"value": { "type": "string | undefined" }
},
{
"name": "avatar-src",
"description": "Defines the avatar image url of the user.",
"value": { "type": "string | undefined" }
},
{
"name": "description",
"description": "Defines description of the user.",
"value": { "type": "string" }
},
{
"name": "loading",
"description": "Indicates whether a loading indicator should be shown.",
"value": { "type": "boolean" }
},
{
"name": "selected",
"description": "Defines if the user is selected.",
"value": { "type": "boolean" }
},
{
"name": "subtitle-text",
"description": "Defines additional text of the user.",
"value": { "type": "string" }
},
{
"name": "title-text",
"description": "Defines the title text of the user.",
"value": { "type": "string" }
}
],
"events": []
}
},
{
"name": "ui5-user-menu-item",
"description": "### Overview\n\n`ui5-user-menu-item` is the item to use inside a `ui5-user-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use\n`ui5-user-menu-item` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design.",
"doc-url": "",
"attributes": [],
"slots": [
{
"name": "default",
"description": "Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design."
}
],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-user-menu-item-group",
"description": "### Overview\n\nThe `ui5-user-menu-item-group` component represents a group of items designed for use inside a `ui5-user-menu`.\nItems belonging to the same group should be wrapped by a `ui5-user-menu-item-group`.\nEach group can have an `itemCheckMode` property, which defines the check mode for the items within the group.\nThe possible values for `itemCheckMode` are:\n- 'None' (default) - no items can be checked\n- 'Single' - Only one item can be checked at a time\n- 'Multiple' - Multiple items can be checked simultaneously\n\n**Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time.\nIf multiple items are marked as checked, the last checked item will take precedence.\n\n### Usage\n\n`ui5-user-menu-item-group` represents a collection of `ui5-user-menu-item` components that can have the same check mode.\nThe items are addeed to the group's `items` slot.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/UserMenuItemGroup.js\";`\n---\n",
"doc-url": "",
"attributes": [],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-user-settings-account-view",
"description": "### Overview\n\nThe `ui5-user-settings-account-view` represents a view displayed in the `ui5-user-settings-item`.\n---\n\n\n### **Events:**\n - **edit-accounts-click** - Fired when the `Edit Accounts` button is selected.\n- **manage-account-click** - Fired when the `Manage Account` button is selected.\n\n### **Slots:**\n - **account** - Defines the user account.\n- **default** - Defines the content of the view.",
"doc-url": "",
"attributes": [
{
"name": "secondary",
"description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "selected",
"description": "Defines whether the view is selected. There can be just one selected view at a time.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-manage-account",
"description": "Defines if the User Menu shows the `Manage Account` option.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the title text of the user settings view.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{ "name": "account", "description": "Defines the user account." },
{
"name": "default",
"description": "Defines the content of the view."
}
],
"events": [
{
"name": "edit-accounts-click",
"description": "Fired when the `Edit Accounts` button is selected."
},
{
"name": "manage-account-click",
"description": "Fired when the `Manage Account` button is selected."
}
],
"js": {
"properties": [
{
"name": "secondary",
"description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
"value": { "type": "boolean" }
},
{
"name": "selected",
"description": "Defines whether the view is selected. There can be just one selected view at a time.",
"value": { "type": "boolean" }
},
{
"name": "show-manage-account",
"description": "Defines if the User Menu shows the `Manage Account` option.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the title text of the user settings view.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "edit-accounts-click",
"description": "Fired when the `Edit Accounts` button is selected."
},
{
"name": "manage-account-click",
"description": "Fired when the `Manage Account` button is selected."
}
]
}
},
{
"name": "ui5-user-settings-appearance-view",
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view` represents a view displayed in the `ui5-user-settings-item`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when an item is selected.\n\n### **Slots:**\n - **additionalContent** - Defines additional content displayed below the items list.\n- **default** - Defines the items of the component.",
"doc-url": "",
"attributes": [
{
"name": "secondary",
"description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "selected",
"description": "Defines whether the view is selected. There can be just one selected view at a time.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the title text of the user settings view.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "additionalContent",
"description": "Defines additional content displayed below the items list."
},
{
"name": "default",
"description": "Defines the items of the component."
}
],
"events": [
{
"name": "selection-change",
"description": "Fired when an item is selected."
}
],
"js": {
"properties": [
{
"name": "secondary",
"description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
"value": { "type": "boolean" }
},
{
"name": "selected",
"description": "Defines whether the view is selected. There can be just one selected view at a time.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the title text of the user settings view.",
"value": { "type": "string | undefined" }
}
],
"events": [
{
"name": "selection-change",
"description": "Fired when an item is selected."
}
]
}
},
{
"name": "ui5-user-settings-appearance-view-group",
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view-group` is a special list item group used to group appearance view items.\n\nThis is the item to use inside a `ui5-user-settings-appearance-view`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of the ui5-user-settings-appearance-view-group.",
"doc-url": "",
"attributes": [],
"slots": [
{
"name": "default",
"description": "Defines the items of the ui5-user-settings-appearance-view-group."
}
],
"events": [],
"js": { "properties": [], "events": [] }
},
{
"name": "ui5-user-settings-appearance-view-item",
"description": "### Overview\n\nThe `ui5-user-settings-appearance-view-item` represents a theme/appearance option item\nwithin the `ui5-user-settings-appearance-view`.\n\nIt displays a theme with an avatar icon, text label, and can be selected.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js\";`\n---\n",
"doc-url": "",
"attributes": [
{
"name": "color-scheme",
"description": "Defines the color scheme of the avatar.",
"value": { "type": "string", "default": "\"Accent7\"" }
},
{
"name": "icon",
"description": "Defines the icon of the appearance item.",
"value": { "type": "string", "default": "\"product\"" }
},
{
"name": "item-key",
"description": "Defines the unique identifier of the item.",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "text",
"description": "Defines the text label displayed for the appearance item.",
"value": { "type": "string", "default": "\"\"" }
}
],
"events": [],
"js": {
"properties": [
{
"name": "color-scheme",
"description": "Defines the color scheme of the avatar.",
"value": { "type": "string" }
},
{
"name": "icon",
"description": "Defines the icon of the appearance item.",
"value": { "type": "string" }
},
{
"name": "item-key",
"description": "Defines the unique identifier of the item.",
"value": { "type": "string" }
},
{
"name": "text",
"description": "Defines the text label displayed for the appearance item.",
"value": { "type": "string" }
}
],
"events": []
}
},
{
"name": "ui5-user-settings-dialog",
"description": "### Overview\n\nThe `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\nIt allows the user to easily view information and settings for an account.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the settings dialog is closed.\n- **close** - Fired when a settings dialog is closed.\n- **open** - Fired when a settings dialog is open.\n- **selection-change** - Fired when an item is selected.\n\n### **Slots:**\n - **default** - Defines the user settings items.\n\n**Note:** If no setting item is set as `selected`, the first one will be selected.\n- **fixedItems** - Defines the fixed user settings items.",
"doc-url": "",
"attributes": [
{
"name": "header-text",
"description": "Defines the headerText of the item.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "open",
"description": "Defines, if the User Settings Dialog is opened.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "show-search-field",
"description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the user settings items.\n\n**Note:** If no setting item is set as `selected`, the first one will be selected."
},
{
"name": "fixedItems",
"description": "Defines the fixed user settings items."
}
],
"events": [
{
"name": "before-close",
"description": "Fired before the settings dialog is closed."
},
{
"name": "close",
"description": "Fired when a settings dialog is closed."
},
{
"name": "open",
"description": "Fired when a settings dialog is open."
},
{
"name": "selection-change",
"description": "Fired when an item is selected."
}
],
"js": {
"properties": [
{
"name": "header-text",
"description": "Defines the headerText of the item.",
"value": { "type": "string | undefined" }
},
{
"name": "open",
"description": "Defines, if the User Settings Dialog is opened.",
"value": { "type": "boolean" }
},
{
"name": "show-search-field",
"description": "Defines if the Search Field would be displayed.\n\n**Note:** By default the Search Field is not displayed.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "before-close",
"description": "Fired before the settings dialog is closed."
},
{
"name": "close",
"description": "Fired when a settings dialog is closed."
},
{
"name": "open",
"description": "Fired when a settings dialog is open."
},
{
"name": "selection-change",
"description": "Fired when an item is selected."
}
]
}
},
{
"name": "ui5-user-settings-item",
"description": "### Overview\n\nThe `ui5-user-settings-item` represents an item in the `ui5-user-settings-dialog`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserSettingsItem.js\";`\n\nYou can disable the UserSettingsItem by setting the enabled property to false,\nor use the UserSettingsItem in read-only mode by setting the editable property to false.\n\nNote: Disabled and read-only states shouldn't be used together.\n---\n\n\n### **Events:**\n - **selection-change** - Fired when a selected view changed.\n\n### **Slots:**\n - **default** - Defines the page views of the user settings item.\n\nIf there are no tab views, the first page view will be shown unless there is selected one. If there is selected page\nview it will be shown no matter if there are tab views.\n\nThe page views are displayed by default if there is no selected tab view.\n- **tabs** - Defines the tab views of the user settings item.",
"doc-url": "",
"attributes": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "disabled",
"description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "header-text",
"description": "Defines the headerText of the item.",
"value": { "type": "string | undefined", "default": "\"\"" }
},
{
"name": "icon",
"description": "Defines the icon of the component.",
"value": { "type": "string", "default": "\"globe\"" }
},
{
"name": "loading",
"description": "Indicates whether a loading indicator should be shown.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "loading-reason",
"description": "Indicates why the control is in loading state.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "selected",
"description": "Shows item tab.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the text of the user settings item.",
"value": { "type": "string", "default": "\"\"" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.",
"value": { "type": "string", "default": "\"\"" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the page views of the user settings item.\n\nIf there are no tab views, the first page view will be shown unless there is selected one. If there is selected page\nview it will be shown no matter if there are tab views.\n\nThe page views are displayed by default if there is no selected tab view."
},
{
"name": "tabs",
"description": "Defines the tab views of the user settings item."
}
],
"events": [
{
"name": "selection-change",
"description": "Fired when a selected view changed."
}
],
"js": {
"properties": [
{
"name": "accessible-name",
"description": "Defines the accessible ARIA name of the component.",
"value": { "type": "string | undefined" }
},
{
"name": "disabled",
"description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.",
"value": { "type": "boolean" }
},
{
"name": "header-text",
"description": "Defines the headerText of the item.",
"value": { "type": "string | undefined" }
},
{
"name": "icon",
"description": "Defines the icon of the component.",
"value": { "type": "string" }
},
{
"name": "loading",
"description": "Indicates whether a loading indicator should be shown.",
"value": { "type": "boolean" }
},
{
"name": "loading-reason",
"description": "Indicates why the control is in loading state.",
"value": { "type": "string | undefined" }
},
{
"name": "selected",
"description": "Shows item tab.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the text of the user settings item.",
"value": { "type": "string" }
},
{
"name": "tooltip",
"description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided to represent the meaning or function when the component is collapsed and only the icon is visible.",
"value": { "type": "string" }
}
],
"events": [
{
"name": "selection-change",
"description": "Fired when a selected view changed."
}
]
}
},
{
"name": "ui5-user-settings-view",
"description": "### Overview\n\nThe `ui5-user-settings-view` represents a view displayed in the `ui5-user-settings-item`.\n---\n\n\n### **Slots:**\n - **default** - Defines the content of the view.",
"doc-url": "",
"attributes": [
{
"name": "secondary",
"description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "selected",
"description": "Defines whether the view is selected. There can be just one selected view at a time.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "text",
"description": "Defines the title text of the user settings view.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{
"name": "default",
"description": "Defines the content of the view."
}
],
"events": [],
"js": {
"properties": [
{
"name": "secondary",
"description": "Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `ui5-user-settings-item`\nand controls the visibility of the back button.",
"value": { "type": "boolean" }
},
{
"name": "selected",
"description": "Defines whether the view is selected. There can be just one selected view at a time.",
"value": { "type": "boolean" }
},
{
"name": "text",
"description": "Defines the title text of the user settings view.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-view-settings-dialog",
"description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
"doc-url": "",
"attributes": [
{
"name": "group-descending",
"description": "Defines the initial group order.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "open",
"description": "Indicates if the dialog is open.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "sort-descending",
"description": "Defines the initial sort order.",
"value": { "type": "boolean", "default": "false" }
}
],
"slots": [
{
"name": "filterItems",
"description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`"
},
{
"name": "groupItems",
"description": "Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`"
},
{
"name": "sortItems",
"description": "Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`"
}
],
"events": [
{
"name": "before-open",
"description": "Fired before the component is opened."
},
{
"name": "cancel",
"description": "Fired when cancel button is activated."
},
{
"name": "close",
"description": "Fired after the dialog is closed."
},
{
"name": "confirm",
"description": "Fired when confirmation button is activated."
},
{
"name": "open",
"description": "Fired after the dialog is opened."
}
],
"js": {
"properties": [
{
"name": "group-descending",
"description": "Defines the initial group order.",
"value": { "type": "boolean" }
},
{
"name": "open",
"description": "Indicates if the dialog is open.",
"value": { "type": "boolean" }
},
{
"name": "sort-descending",
"description": "Defines the initial sort order.",
"value": { "type": "boolean" }
}
],
"events": [
{
"name": "before-open",
"description": "Fired before the component is opened."
},
{
"name": "cancel",
"description": "Fired when cancel button is activated."
},
{
"name": "close",
"description": "Fired after the dialog is closed."
},
{
"name": "confirm",
"description": "Fired when confirmation button is activated."
},
{
"name": "open",
"description": "Fired after the dialog is opened."
}
]
}
},
{
"name": "ui5-wizard",
"description": "### Overview\n\nThe `ui5-wizard` helps users to complete a complex task by dividing it into sections and guiding them through it.\nIt has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n### Structure\n#### Navigation area\nThe top most area of the `ui5-wizard` is occupied by the navigation area.\nIt shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.\n\n- Steps can have different visual representations - numbers or icons.\n- Steps might have labels for better readability - titleText and subTitleText.\n- Steps are defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n**Note:** If no selected step is defined, the first step will be auto selected.\n\n**Note:** If multiple selected steps are defined, the last step will be selected.\n\n### Keyboard Handling\nThe user can navigate using the following keyboard shortcuts:\n\n#### Wizard Progress Navigation\n\n\t- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.\n\t- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.\n\t- [Space] / [Enter] or [Return] - Selects an active step\n\t- [Home] or [PAGE UP] - Focus goes to the first step\n\t- [End] or [PAGE DOWN] - Focus goes to the last step\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Content\nThe content occupies the main part of the page. It can hold any type of HTML elements.\nIt's defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n### Scrolling\nThe component handles user scrolling by selecting the closest step, based on the current scroll position\nand scrolls to particular place, when the user clicks on the step within the navigation area.\n\n**Important:** In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height.\nThe component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.\n\n**For example:**\n\n```html\n\n\t\n\n```\n\n#### Moving to next step\nThe `ui5-wizard-step` provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its `selected` property (and remove the `disabled` one if set) to `true`.\nThe `ui5-wizard` will automatically scroll to the content of the newly selected step.\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the `ui5-wizard-step`,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n### Usage\n#### When to use:\nWhen the user has to accomplish a long or unfamiliar task.\n\n#### When not to use:\nWhen the task has less than 3 steps.\n\n### Responsive Behavior\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/Wizard.js\";` (includes )\n---\n\n\n### **Events:**\n - **step-change** - Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header.\n\n### **Slots:**\n - **default** - Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component.\n\n### **CSS Parts:**\n - **navigator** - Used to style the progress navigator of the `ui5-wizard`.\n- **step-content** - Used to style a `ui5-wizard-step` container.",
"doc-url": "",
"attributes": [
{
"name": "content-layout",
"description": "Defines how the content of the `ui5-wizard` would be visualized.",
"value": {
"type": "\"MultipleSteps\" | \"SingleStep\"",
"default": "\"MultipleSteps\""
}
}
],
"slots": [
{
"name": "default",
"description": "Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component."
}
],
"events": [
{
"name": "step-change",
"description": "Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header."
}
],
"js": {
"properties": [
{
"name": "content-layout",
"description": "Defines how the content of the `ui5-wizard` would be visualized.",
"value": { "type": "\"MultipleSteps\" | \"SingleStep\"" }
}
],
"events": [
{
"name": "step-change",
"description": "Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header."
}
]
}
},
{
"name": "ui5-wizard-step",
"description": "### Overview\n\nA component that represents a logical step as part of the `ui5-wizard`.\nIt is meant to aggregate arbitrary HTML elements that form the content of a single step.\n\n### Structure\n\n- Each wizard step has arbitrary content.\n- Each wizard step might have texts - defined by the `titleText` and `subtitleText` properties.\n- Each wizard step might have an icon - defined by the `icon` property.\n- Each wizard step might display a number in place of the `icon`, when it's missing.\n\n### Usage\nThe `ui5-wizard-step` component should be used only as slot of the `ui5-wizard` component\nand should not be used standalone.\n---\n\n\n### **Slots:**\n - **default** - Defines the step content.",
"doc-url": "",
"attributes": [
{
"name": "branching",
"description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "disabled",
"description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "icon",
"description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "selected",
"description": "Defines the step's `selected` state - the step that is currently active.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
"value": { "type": "boolean", "default": "false" }
},
{
"name": "subtitle-text",
"description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.",
"value": { "type": "string | undefined", "default": "undefined" }
},
{
"name": "title-text",
"description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.",
"value": { "type": "string | undefined", "default": "undefined" }
}
],
"slots": [
{ "name": "default", "description": "Defines the step content." }
],
"events": [],
"js": {
"properties": [
{
"name": "branching",
"description": "When `branching` is enabled a dashed line would be displayed after the step,\nmeant to indicate that the next step is not yet known and depends on user choice in the current step.\n\n**Note:** It is recommended to use `branching` on the last known step\nand later add new steps when it becomes clear how the wizard flow should continue.",
"value": { "type": "boolean" }
},
{
"name": "disabled",
"description": "Defines if the step is `disabled`. When disabled the step is displayed,\nbut the user can't select the step by clicking or navigate to it with scrolling.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
"value": { "type": "boolean" }
},
{
"name": "icon",
"description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
"value": { "type": "string | undefined" }
},
{
"name": "selected",
"description": "Defines the step's `selected` state - the step that is currently active.\n\n**Note:** Step can't be `selected` and `disabled` at the same time.\nIn this case the `selected` property would take precedence.",
"value": { "type": "boolean" }
},
{
"name": "subtitle-text",
"description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.",
"value": { "type": "string | undefined" }
},
{
"name": "title-text",
"description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.",
"value": { "type": "string | undefined" }
}
],
"events": []
}
},
{
"name": "ui5-wizard-tab",
"description": "### Overview\nPrivate component, used internally by the `ui5-wizard`\nto represent a \"step\" in the navigation header of the `ui5-wizard`.\n\n### Usage\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/WizardTab.js\";` (imported with )\n---\n",
"doc-url": "",
"attributes": [],
"events": [],
"js": { "properties": [], "events": [] }
}
]
},
"css": {
"properties": [],
"pseudo-elements": [
{
"name": "part(content)",
"description": "Used to style the content of the component"
},
{
"name": "part(fit-content)",
"description": "Used to style the fit content container of the component."
},
{
"name": "part(footer)",
"description": "Used to style the footer of the component"
},
{
"name": "part(subtitle)",
"description": "Used to style the subtitle wrapper of the `ui5-illustrated-message`"
},
{
"name": "part(title-text)",
"description": "Used to style the titleText of the notification list item"
},
{
"name": "part(content)",
"description": "Used to style the content section of the component"
},
{
"name": "part(root)",
"description": "Used to style the outermost wrapper of the `ui5-shellbar`"
},
{ "name": "part(header)", "description": "Used to style the header." },
{
"name": "part(navigator)",
"description": "Used to style the progress navigator of the `ui5-wizard`."
},
{
"name": "part(step-content)",
"description": "Used to style a `ui5-wizard-step` container."
}
]
}
}
}