Overview
\n\n\nUsage
\n\nFor theui5-filter-item-option\nES6 Module Import
\n\nimport @ui5/webcomponents-fiori/dist/FilterItemOption.js\";",
+ "description": "### Overview\n\n### Usage\n\nFor the `ui5-filter-item-option`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/FilterItemOption.js\";`",
"name": "FilterItemOption",
"members": [
{
@@ -2413,7 +2422,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheFlexibleColumnLayout 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 pressing the arrows, displayed between the columns.\n\nUsage
\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\nResponsive Behavior
\n\nTheFlexibleColumnLayout 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\n
Keyboard Handling
\n\nBasic Navigation
\n- \n
- [SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column). \n
- This component provides a build in fast navigation group which can be used via
F6 / Shift + F6orCtrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up.\nIn order to use this functionality, you need to import the following module:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n
Fast Navigation
\nThis component provides a build in fast navigation group which can be used viaF6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up.\nIn order to use this functionality, you need to import the following module:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n\n\n
ES6 Module Import
\n\nimport \"@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js\";",
+ "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 pressing the arrows, displayed between the columns.\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### Keyboard Handling\n\n#### Basic Navigation\n\n- [SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).\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`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` or ` Ctrl + Alt(Option) + Down / 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\";`",
"name": "FlexibleColumnLayout",
"slots": [
{
@@ -2455,7 +2464,7 @@
}
]
},
- "description": "Defines the columns layout and their proportion.\n\nNote: 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
\nFor example: layout=
TwoColumnsStartExpanded means the layout will display up to two columns\nin 67%/33% proportion.",
+ "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.",
"default": "\"OneColumn\"",
"privacy": "public",
"_ui5validator": "FCLLayout"
@@ -2485,7 +2494,7 @@
}
]
},
- "description": "An object of strings that defines several additional accessibility texts for even further customization.\n\nIt supports the following fields:\n - startColumnAccessibleName: the accessibility name for the startColumn region\n - midColumnAccessibleName: the accessibility name for the midColumn region\n - endColumnAccessibleName: the accessibility name for the endColumn region\n - startArrowLeftText: the text that the first arrow (between the begin and mid columns) will have when pointing to the left\n - startArrowRightText: the text that the first arrow (between the begin and mid columns) will have when pointing to the right\n - endArrowLeftText: the text that the second arrow (between the mid and end columns) will have when pointing to the left\n - endArrowRightText: the text that the second arrow (between the mid and end columns) will have when pointing to the right\n - startArrowContainerAccessibleName: the text that the first arrow container (between the begin and mid columns) will have as aria-label\n - endArrowContainerAccessibleName: the text that the second arrow container (between the mid and end columns) will have as aria-label",
+ "description": "An object of strings that defines several additional accessibility texts for even further customization.\n\nIt supports the following fields:\n - `startColumnAccessibleName`: the accessibility name for the `startColumn` region\n - `midColumnAccessibleName`: the accessibility name for the `midColumn` region\n - `endColumnAccessibleName`: the accessibility name for the `endColumn` region\n - `startArrowLeftText`: the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the left\n - `startArrowRightText`: the text that the first arrow (between the `begin` and `mid` columns) will have when pointing to the right\n - `endArrowLeftText`: the text that the second arrow (between the `mid` and `end` columns) will have when pointing to the left\n - `endArrowRightText`: the text that the second arrow (between the `mid` and `end` columns) will have when pointing to the right\n - `startArrowContainerAccessibleName`: the text that the first arrow container (between the `begin` and `mid` columns) will have as `aria-label`\n - `endArrowContainerAccessibleName`: the text that the second arrow container (between the `mid` and `end` columns) will have as `aria-label`",
"default": "{}",
"privacy": "public",
"_ui5since": "1.0.0-rc.11",
@@ -2504,7 +2513,7 @@
}
]
},
- "description": "An object of strings that defines additional accessibility roles for further customization.\n\nIt supports the following fields:\n - startColumnRole: the accessibility role for the startColumn\n - startArrowContainerRole: the accessibility role for the first arrow container (between the begin and mid columns)\n - midColumnRole: the accessibility role for the midColumn\n - endArrowContainerRole: the accessibility role for the second arrow container (between the mid and end columns)\n - endColumnRole: the accessibility role for the endColumn",
+ "description": "An object of strings that defines additional accessibility roles for further customization.\n\nIt supports the following fields:\n - `startColumnRole`: the accessibility role for the `startColumn`\n - `startArrowContainerRole`: the accessibility role for the first arrow container (between the `begin` and `mid` columns)\n - `midColumnRole`: the accessibility role for the `midColumn`\n - `endArrowContainerRole`: the accessibility role for the second arrow container (between the `mid` and `end` columns)\n - `endColumnRole`: the accessibility role for the `endColumn`",
"default": "{}",
"privacy": "public",
"_ui5since": "1.1.0",
@@ -2523,7 +2532,7 @@
}
]
},
- "description": "Returns the current column layout, based on both the layout property and the screen size.\n\nFor example: [\"67%\", \"33%\", 0], [\"100%\", 0, 0], [\"25%\", \"50%\", \"25%\"], etc,\nwhere the numbers represents the width of the start, middle and end columns.", + "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.", "default": "undefined", "privacy": "public", "readonly": true @@ -2534,7 +2543,7 @@ "type": { "text": "boolean" }, - "description": "Returns if the
start column is visible.",
+ "description": "Returns if the `start` column is visible.",
"default": "true",
"privacy": "public",
"readonly": true
@@ -2545,7 +2554,7 @@
"type": {
"text": "boolean"
},
- "description": "Returns if the middle column is visible.",
+ "description": "Returns if the `middle` column is visible.",
"default": "false",
"privacy": "public",
"readonly": true
@@ -2556,7 +2565,7 @@
"type": {
"text": "boolean"
},
- "description": "Returns if the end column is visible.",
+ "description": "Returns if the `end` column is visible.",
"default": "false",
"privacy": "public",
"readonly": true
@@ -2691,18 +2700,18 @@
"declarations": [
{
"kind": "class",
- "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\ntitleText and subtitleText properties.\n\nTo display the desired illustration, use the name property, where you can find the list of all available illustrations.\n\nNote: 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\nNote: 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\nStructure
\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n
- \n
- Illustration \n
- Title \n
- Subtitle \n
- Actions \n
Usage
\nui5-illustrated-message is meant to be used inside container component, for example a ui5-card,\na ui5-dialog or a ui5-page\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";",
+ "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\";`",
"name": "IllustratedMessage",
"cssParts": [
{
- "description": "Used to style the subtitle wrapper of the ui5-illustrated-message",
+ "description": "Used to style the subtitle wrapper of the `ui5-illustrated-message`",
"name": "subtitle"
}
],
"slots": [
{
"name": "title",
- "description": "Defines the title of the component.\n\nNote: Using this slot, the default title text of illustration and the value of
title property will be overwritten.",
+ "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.",
"_ui5since": "1.7.0",
"_ui5type": {
"text": "Array\nNote: Using this slot, the default subtitle text of illustration and the value of
subtitleText property will be overwritten.",
+ "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.",
"_ui5since": "1.0.0-rc.16",
"_ui5type": {
"text": "Array\nExample:\n
\n
name='BeforeSearch', name='UnableToUpload', etc..\n\n
\nNote: 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
\nNote: 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\n
\nFor TNT illustrations:\n
\n
import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/SessionExpired.js\";",
+ "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\";`",
"default": "\"BeforeSearch\"",
"privacy": "public",
"_ui5validator": "String"
@@ -2760,7 +2769,7 @@
}
]
},
- "description": "Determines which illustration breakpoint variant is used.\n\n\nAs
IllustratedMessage adapts itself around the Illustration, the other\nelements of the component are displayed differently on the different breakpoints/illustration sizes.",
+ "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 sizes.",
"default": "\"Auto\"",
"privacy": "public",
"_ui5since": "1.5.0",
@@ -2772,7 +2781,7 @@
"type": {
"text": "string"
},
- "description": "Defines the subtitle of the component.\n\nNote: Using this property, the default subtitle text of illustration will be overwritten.\n
\nNote: Using
subtitle slot, the default of this property will be overwritten.",
+ "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.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -2783,7 +2792,7 @@
"type": {
"text": "string"
},
- "description": "Defines the title of the component.\n\nNote: Using this property, the default title text of illustration will be overwritten.", + "description": "Defines the title of the component.\n\n**Note:** Using this property, the default title text of illustration will be overwritten.", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -2813,7 +2822,7 @@ } ] }, - "description": "Defines the semantic level of the title.\n\nNote: Used for accessibility purposes only.", + "description": "Defines the semantic level of the title.\n\n**Note:** Used for accessibility purposes only.\n\n**Note:** Doesn't take effect when `title` slot is being used.", "default": "\"H2\"", "privacy": "public", "_ui5since": "1.20.0", @@ -2857,17 +2866,17 @@ { "kind": "interface", "name": "IMediaGalleryItem", - "description": "Interface for components that can be slotted inside
ui5-media-gallery as items.",
+ "description": "Interface for components that can be slotted inside `ui5-media-gallery` as items.",
"_ui5privacy": "public"
},
{
"kind": "class",
- "description": "Overview
\n\nTheui5-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
\nTheui5-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\n
- \n
- [UP/DOWN] - Navigates up and down the items \n
- [HOME] - Navigates to first item \n
- [END] - Navigates to the last item \n
- [SPACE/ENTER] - Select an item \n
\n\n
ES6 Module Import
\nimport \"@ui5/webcomponents-fiori/dist/MediaGallery\";\n\n
import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem\";",
+ "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/DOWN] - Navigates up and down the items\n- [HOME] - Navigates to first item\n- [END] - Navigates to the last item\n- [SPACE/ENTER] - Select an item\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGallery.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";`",
"name": "MediaGallery",
"slots": [
{
"name": "default",
- "description": "Defines the component items.\n\n\nNote: Only one selected item is allowed.\n\n
\nNote: Use the
ui5-media-gallery-item component to define the desired items.",
+ "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.",
"_ui5propertyName": "items",
"_ui5type": {
"text": "Arraytrue, 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.",
+ "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.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -2900,7 +2909,7 @@
"type": {
"text": "boolean"
},
- "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.", + "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.", "default": "false", "privacy": "public", "_ui5validator": "Boolean" @@ -3000,7 +3009,7 @@ "type": { "text": "CustomEvent" }, - "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." + "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." } ], "superclass": { @@ -3039,7 +3048,7 @@ "declarations": [ { "kind": "class", - "description": "
Overview
\nTheui5-media-gallery-item web component represents the items displayed in the\nui5-media-gallery web component.\n\nNote:
ui5-media-gallery-item is not supported when used outside of ui5-media-gallery.\n\n\n
Keyboard Handling
\nTheui5-media-gallery provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n
- \n
- [SPACE/ENTER/RETURN] - Trigger
ui5-clickevent \n
ES6 Module Import
\nimport \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\"; (comes with ui5-media-gallery)",
+ "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/RETURN] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)",
"name": "MediaGalleryItem",
"slots": [
{
@@ -3096,7 +3105,7 @@
}
]
},
- "description": "Determines the layout of the item container.\n\nAvailable options are:\n
- \n
Square\nWide\n
ui5-notification-action represents an abstract action,\nused in the ui5-li-notification and the ui5-li-notification-group items.",
+ "description": "The `ui5-notification-action` represents an abstract action,\nused in the `ui5-li-notification` and the `ui5-li-notification-group` items.",
"name": "NotificationAction",
"members": [
{
@@ -3154,7 +3163,7 @@
"type": {
"text": "string"
},
- "description": "Defines the text of the ui5-notification-action.",
+ "description": "Defines the text of the `ui5-notification-action`.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -3165,7 +3174,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the action is disabled.\n\nNote: a disabled action can't be pressed or focused, and it is not in the tab chain.", + "description": "Defines if the action is disabled.\n\n**Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.", "default": "false", "privacy": "public", "_ui5validator": "Boolean" @@ -3194,7 +3203,7 @@ "type": { "text": "string" }, - "description": "Defines the
icon source URI.\n\nNote:\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n
Overview
\nTheui5-li-notification-group is a special type of list item,\nthat unlike others can group items within self, usually ui5-li-notification items.\n\n\nThe component consists of:\n
- \n
Togglebutton to expand and collapse the group \nPriorityicon to display the priority of the group \nTitleTextto entitle the group \n- Custom actions - with the use of
ui5-notification-action\n - Items of the group \n
Usage
\nThe component can be used in a standardui5-list.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/NotificationListGroupItem.js\";\n\n
import \"@ui5/webcomponents/dist/NotificationAction.js\"; (optional)",
+ "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- `Priority` icon to display the priority of the group\n- `TitleText` to entitle the group\n- Custom actions - with the use of `ui5-notification-action`\n- Items of the group\n\n### Usage\nThe component can be used in a standard `ui5-list`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/NotificationListGroupItem.js\";`\n\n`import \"@ui5/webcomponents/dist/NotificationAction.js\";` (optional)",
"name": "NotificationListGroupItem",
"slots": [
{
"name": "default",
- "description": "Defines the items of the ui5-li-notification-group,\nusually ui5-li-notification items.",
+ "description": "Defines the items of the `ui5-li-notification-group`,\nusually `ui5-li-notification` items.",
"_ui5propertyName": "items",
"_ui5type": {
"text": "Array\nNote: use the
ui5-notification-action component.",
+ "description": "Defines the actions, displayed in the top-right area.\n\n**Note:** use the `ui5-notification-action` component.",
"_ui5type": {
"text": "Arraycounter would be displayed.",
+ "description": "Defines if the items `counter` would be displayed.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -3317,7 +3326,7 @@
"type": {
"text": "string"
},
- "description": "Defines the titleText of the item.",
+ "description": "Defines the `titleText` of the item.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String",
@@ -3339,7 +3348,7 @@
}
]
},
- "description": "Defines the priority of the item.",
+ "description": "Defines the `priority` of the item.",
"default": "\"None\"",
"privacy": "public",
"_ui5validator": "Priority",
@@ -3354,7 +3363,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the close button would be displayed.",
+ "description": "Defines if the `close` button would be displayed.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean",
@@ -3369,7 +3378,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the notification is new or has been already read.\n\nNote: if set to
false the titleText has bold font,\nif set to true - it has a normal font.",
+ "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean",
@@ -3415,7 +3424,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines the selected state of the ListItem.",
+ "description": "Defines the selected state of the `ListItem`.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -3428,7 +3437,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the ui5-li-notification-group is expanded/collapsed by user interaction."
+ "description": "Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction."
},
{
"name": "close",
@@ -3443,7 +3452,7 @@
}
]
},
- "description": "Fired when the Close button is pressed.",
+ "description": "Fired when the `Close` button is pressed.",
"_ui5parameters": [
{
"type": {
@@ -3496,7 +3505,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\nTheui5-li-notification is a type of list item, meant to display notifications.\n\n\nThe component has a rich set of various properties that allows the user to set
avatar, titleText, descriptive content\nand footnotes to fully describe a notification.\n\n\nThe user can:\n
- \n
- display a
Closebutton \n - can control whether the
titleTextanddescriptionshould wrap or truncate\nand display aShowMorebutton to switch between less and more information \n - add custom actions by using the
ui5-notification-actioncomponent \n
Usage
\nThe component can be used in a standardui5-list.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/NotificationListItem.js\";\n\n
import \"@ui5/webcomponents/dist/NotificationAction.js\"; (optional)",
+ "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`, `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 custom actions by using the `ui5-notification-action` component\n\n### Usage\nThe component can be used in a standard `ui5-list`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/NotificationListItem.js\";`\n\n`import \"@ui5/webcomponents/dist/NotificationAction.js\";` (optional)",
"name": "NotificationListItem",
"cssParts": [
{
@@ -3507,7 +3516,7 @@
"slots": [
{
"name": "avatar",
- "description": "Defines the avatar, displayed in the ui5-li-notification.\n\n\nNote: Consider using the
ui5-avatar to display icons, initials or images.\n\nNote: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 - <ui5-avatar size=\"XS\"></ui5-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 - `ui5-li-notification,\nusually a description of the notification.\n\n\nNote: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "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.", "_ui5propertyName": "description", "_ui5type": { "text": "Array
\nNote: use the
ui5-notification-action component.",
+ "description": "Defines the actions, displayed in the top-right area.\n\n**Note:** use the `ui5-notification-action` component.",
"_ui5type": {
"text": "ArraytitleText and description should wrap,\nthey truncate by default.\n\n\nNote: by default the
titleText and description,\nand a ShowMore/Less button would be displayed.",
+ "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.",
"default": "\"None\"",
"privacy": "public",
"_ui5since": "1.0.0-rc.15",
@@ -3572,7 +3581,7 @@
"type": {
"text": "string"
},
- "description": "Defines the titleText of the item.",
+ "description": "Defines the `titleText` of the item.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String",
@@ -3594,7 +3603,7 @@
}
]
},
- "description": "Defines the priority of the item.",
+ "description": "Defines the `priority` of the item.",
"default": "\"None\"",
"privacy": "public",
"_ui5validator": "Priority",
@@ -3609,7 +3618,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the close button would be displayed.",
+ "description": "Defines if the `close` button would be displayed.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean",
@@ -3624,7 +3633,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the notification is new or has been already read.\n\nNote: if set to
false the titleText has bold font,\nif set to true - it has a normal font.",
+ "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean",
@@ -3670,7 +3679,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines the selected state of the ListItem.",
+ "description": "Defines the selected state of the `ListItem`.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -3699,7 +3708,7 @@
}
]
},
- "description": "Fired when the Close button is pressed.",
+ "description": "Fired when the `Close` button is pressed.",
"_ui5parameters": [
{
"type": {
@@ -3743,12 +3752,12 @@
"declarations": [
{
"kind": "class",
- "description": "The base class of the NotificationListItem and NotificationListGroupItem.",
+ "description": "The base class of the `NotificationListItem` and `NotificationListGroupItem`.",
"name": "NotificationListItemBase",
"slots": [
{
"name": "actions",
- "description": "Defines the actions, displayed in the top-right area.\n\nNote: use the
ui5-notification-action component.",
+ "description": "Defines the actions, displayed in the top-right area.\n\n**Note:** use the `ui5-notification-action` component.",
"_ui5type": {
"text": "ArraytitleText of the item.",
+ "description": "Defines the `titleText` of the item.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -3787,7 +3796,7 @@
}
]
},
- "description": "Defines the priority of the item.",
+ "description": "Defines the `priority` of the item.",
"default": "\"None\"",
"privacy": "public",
"_ui5validator": "Priority"
@@ -3798,7 +3807,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the close button would be displayed.",
+ "description": "Defines if the `close` button would be displayed.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -3809,7 +3818,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the notification is new or has been already read.\n\nNote: if set to
false the titleText has bold font,\nif set to true - it has a normal font.",
+ "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -3843,7 +3852,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines the selected state of the ListItem.",
+ "description": "Defines the selected state of the `ListItem`.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -3863,7 +3872,7 @@
}
]
},
- "description": "Fired when the Close button is pressed.",
+ "description": "Fired when the `Close` button is pressed.",
"_ui5parameters": [
{
"type": {
@@ -3903,7 +3912,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-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.\nStructure
\nHeader
\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\nContent
\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by settingenableScrolling to false.\nFooter
\nThe footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.\nThis is enabled with thefloatingFooter property.\n\nNote: 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.\nNote: In order for the ui5-page to be displayed, the parent element should have fixed height.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents-fiori/dist/Page.js\";",
+ "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 `enableScrolling` to `false`.\n#### Footer\nThe footer is optional and occupies the fixed bottom part of the page. Alternatively, the footer can be floating above the bottom part of the content.\nThis is enabled with the `floatingFooter` 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\";`",
"name": "Page",
"cssParts": [
{
@@ -3952,7 +3961,7 @@
}
]
},
- "description": "Defines the background color of the ui5-page.\n\nNote: When a ui5-list is placed inside the page, we recommend using “List” to ensure better color contrast.\n
", + "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.", "default": "\"Solid\"", "privacy": "public", "_ui5validator": "PageBackgroundDesign" @@ -3974,7 +3983,7 @@ "type": { "text": "boolean" }, - "description": "Defines if the footer should float over the content.\n
\nNote: When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.", + "description": "Defines if the footer should float over the content.\n\n**Note:** When set to true the footer floats over the content with a slight offset from the bottom, otherwise it is fixed at the very bottom of the page.", "default": "true", "privacy": "public", "_ui5validator": "Boolean" @@ -4028,17 +4037,17 @@ { "kind": "interface", "name": "IProductSwitchItem", - "description": "Interface for components that may be slotted inside
ui5-product-switch as items",
+ "description": "Interface for components that may be slotted inside `ui5-product-switch` as items",
"_ui5privacy": "public"
},
{
"kind": "class",
- "description": "Overview
\n\nTheui5-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\n
Keyboard Handling
\nTheui5-product-switch provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n
- \n
- [TAB] - Move focus to the next interactive element after the
ui5-product-switch\n - [UP/DOWN] - Navigates up and down the items \n
- [LEFT/RIGHT] - Navigates left and right the items \n
\n
\n\n
ES6 Module Import
\nimport \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";\n\n
import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\"; (for ui5-product-switch-item)",
+ "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/DOWN] - Navigates up and down the items\n- [LEFT/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`)",
"name": "ProductSwitch",
"slots": [
{
"name": "default",
- "description": "Defines the items of the ui5-product-switch.",
+ "description": "Defines the items of the `ui5-product-switch`.",
"_ui5propertyName": "items",
"_ui5type": {
"text": "ArrayOverview
\nTheui5-product-switch-item web component represents the items displayed in the\nui5-product-switch web component.\n\nNote:
ui5-product-switch-item is not supported when used outside of ui5-product-switch.\n\n\n
Keyboard Handling
\nTheui5-product-switch provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n
- \n
- [SPACE/ENTER/RETURN] - Trigger
ui5-clickevent \n
ES6 Module Import
\nimport \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";",
+ "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/RETURN] - Trigger `ui5-click` event\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";`",
"name": "ProductSwitchItem",
"members": [
{
@@ -4123,7 +4132,7 @@
"type": {
"text": "string"
},
- "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n
\n
ui5-product-switch-item icon=\"palette\"\n\nSee all the available icons in the
targetSrc content must be open.\n\nAvailable options are:\n
- \n
_self\n_top\n_blank\n_parent\n_search\n
ui5-product-switch-item is activated either with a\nclick/tap or by using the Enter or Space key."
+ "description": "Fired when the `ui5-product-switch-item` is activated either with a\nclick/tap or by using the Enter or Space key."
}
],
"superclass": {
@@ -4204,18 +4213,18 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-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\n
Stable DOM Refs
\n\nYou can use the following stable DOM refs for theui5-shellbar:\n- \n
- logo \n
- copilot \n
- notifications \n
- overflow \n
- profile \n
- product-switch \n
Keyboard Handling
\n\nFast Navigation
\nThis component provides a build in fast navigation group which can be used viaF6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up.\nIn order to use this functionality, you need to import the following module:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n\n\n
ES6 Module Import
\nimport \"@ui5/webcomponents-fiori/dist/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- copilot\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` or ` Ctrl + Alt(Option) + Down / 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\";`",
"name": "ShellBar",
"cssParts": [
{
- "description": "Used to style the outermost wrapper of the ui5-shellbar",
+ "description": "Used to style the outermost wrapper of the `ui5-shellbar`",
"name": "root"
}
],
"slots": [
{
"name": "default",
- "description": "Defines the ui5-shellbar aditional items.\n\nNote:\nYou can use the <ui5-shellbar-item></ui5-shellbar-item>.", + "description": "Defines the `ui5-shellbar` aditional items.\n\n**Note:**\nYou can use the `
ui5-avatar to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\nNote: 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.",
+ "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.",
"_ui5since": "1.0.0-rc.6",
"_ui5type": {
"text": "Arrayui5-shellbar.\nFor example, you can use ui5-avatar or img elements as logo.",
+ "description": "Defines the logo of the `ui5-shellbar`.\nFor example, you can use `ui5-avatar` or `img` elements as logo.",
"_ui5since": "1.0.0-rc.8",
"_ui5type": {
"text": "Array\nNote:\nYou can use the <ui5-li></ui5-li> and its ancestors.", + "description": "Defines the items displayed in menu after a click on the primary title.\n\n**Note:** You can use the `
ui5-input, that will be used as a search field.",
+ "description": "Defines the `ui5-input`, that will be used as a search field.",
"_ui5type": {
"text": "Array",
"references": [
@@ -4280,7 +4289,7 @@
},
{
"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 back or home button.\nIt gets overstyled to match ShellBar's styling.",
+ "description": "Defines a `ui5-button` in the bar that will be placed in the beginning.\nWe encourage this slot to be used for a back or home button.\nIt gets overstyled to match ShellBar's styling.",
"_ui5type": {
"text": "ArrayprimaryTitle.\n\nNote: The
primaryTitle would be hidden on S screen size (less than approx. 700px).",
+ "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -4312,7 +4321,7 @@
"type": {
"text": "string"
},
- "description": "Defines the secondaryTitle.\n\nNote: The
secondaryTitle would be hidden on S and M screen sizes (less than approx. 1300px).",
+ "description": "Defines the `secondaryTitle`.\n\n**Note:** The `secondaryTitle` would be hidden on S and M screen sizes (less than approx. 1300px).",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -4323,7 +4332,7 @@
"type": {
"text": "string"
},
- "description": "Defines the notificationsCount,\ndisplayed in the notification icon top-right corner.",
+ "description": "Defines the `notificationsCount`,\ndisplayed in the notification icon top-right corner.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -4356,7 +4365,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines, if the product CoPilot icon would be displayed.\nNote: By default the co-pilot is displayed as static SVG.\nIf you need an animated co-pilot, you can import the
\"@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js\" module as add-on feature.",
+ "description": "Defines, if the product CoPilot icon would be displayed.\n\n**Note:** By default the co-pilot is displayed as static SVG.\nIf you need an animated co-pilot, you can import the `\"@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js\"` module as add-on feature.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -4367,7 +4376,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines, if the Search Field would be displayed when there is a valid searchField slot.\nNote: By default the Search Field is not displayed.", + "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.", "default": "false", "privacy": "public", "_ui5validator": "Boolean" @@ -4385,7 +4394,7 @@ } ] }, - "description": "An object of strings that defines additional accessibility roles for further customization.\n\nIt supports the following fields:\n -
logoRole: the accessibility role for the logo",
+ "description": "An object of strings that defines additional accessibility roles for further customization.\n\nIt supports the following fields:\n - `logoRole`: the accessibility role for the `logo`",
"default": "{}",
"privacy": "public",
"_ui5since": "1.6.0",
@@ -4404,7 +4413,7 @@
}
]
},
- "description": "An object of strings that defines several additional accessibility texts\nfor even further customization.\n\nIt supports the following fields:\n- profileButtonTitle: defines the tooltip for the profile button\n- logoTitle: defines the tooltip for the logo",
+ "description": "An object of strings that defines several additional accessibility texts\nfor even further customization.\n\nIt supports the following fields:\n- `profileButtonTitle`: defines the tooltip for the profile button\n- `logoTitle`: defines the tooltip for the logo",
"default": "{}",
"privacy": "public",
"_ui5since": "1.1.0",
@@ -4423,7 +4432,7 @@
}
]
},
- "description": "An object of strings that defines several additional accessibility attribute values\nfor customization depending on the use case.\n\nIt supports the following fields:\n\n- \n\t\t
expanded: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n\t\t- \n\t\t\t
true\n\t\t\tfalse\n\t\t
\n\t\thasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values:\n\t\t\t- \n\t\t\t
Dialog\n\t\t\tGrid\n\t\t\tListBox\n\t\t\tMenu\n\t\t\tTree\n\t\t\t
\n
logo DOM ref.",
+ "description": "Returns the `logo` DOM ref.",
"privacy": "public",
"default": "null",
"readonly": true,
@@ -4458,7 +4467,7 @@
"type": {
"text": "HTMLElement | null"
},
- "description": "Returns the copilot DOM ref.",
+ "description": "Returns the `copilot` DOM ref.",
"privacy": "public",
"default": "null",
"readonly": true,
@@ -4470,7 +4479,7 @@
"type": {
"text": "HTMLElement | null"
},
- "description": "Returns the notifications icon DOM ref.",
+ "description": "Returns the `notifications` icon DOM ref.",
"privacy": "public",
"default": "null",
"readonly": true,
@@ -4482,7 +4491,7 @@
"type": {
"text": "HTMLElement | null"
},
- "description": "Returns the overflow icon DOM ref.",
+ "description": "Returns the `overflow` icon DOM ref.",
"privacy": "public",
"default": "null",
"readonly": true,
@@ -4494,7 +4503,7 @@
"type": {
"text": "HTMLElement | null"
},
- "description": "Returns the profile icon DOM ref.",
+ "description": "Returns the `profile` icon DOM ref.",
"privacy": "public",
"default": "null",
"readonly": true,
@@ -4506,7 +4515,7 @@
"type": {
"text": "HTMLElement | null"
},
- "description": "Returns the product-switch icon DOM ref.",
+ "description": "Returns the `product-switch` icon DOM ref.",
"privacy": "public",
"default": "null",
"readonly": true,
@@ -4578,7 +4587,7 @@
}
]
},
- "description": "Fired, when the product switch icon is activated.\nNote: You can prevent closing of overflow popover by calling event.preventDefault().",
+ "description": "Fired, when the product switch icon is activated.\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.",
"_ui5allowPreventDefault": true,
"_ui5parameters": [
{
@@ -4656,7 +4665,7 @@
}
]
},
- "description": "Fired, when a menu item is activated\nNote: You can prevent closing of overflow popover by calling event.preventDefault().",
+ "description": "Fired, when a menu item is activated\n\n**Note:** You can prevent closing of overflow popover by calling `event.preventDefault()`.",
"_ui5since": "0.10",
"_ui5parameters": [
{
@@ -4682,7 +4691,7 @@
}
]
},
- "description": "Fired, when the search button is activated.\nNote: You can prevent expanding/collapsing of the search field by calling event.preventDefault().",
+ "description": "Fired, when the search button is activated.\n\n**Note:** You can prevent expanding/collapsing of the search field by calling `event.preventDefault()`.",
"_ui5allowPreventDefault": true
}
],
@@ -4722,7 +4731,7 @@
"declarations": [
{
"kind": "class",
- "description": "The ui5-shellbar-item represents a custom item, that\nmight be added to the ui5-shellbar.\n\n
ES6 Module Import
\nimport \"@ui5/webcomponents-fiori/dist/ShellBarItem\";",
+ "description": "The `ui5-shellbar-item` represents a custom item, that\nmight be added to the `ui5-shellbar`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`",
"name": "ShellBarItem",
"members": [
{
@@ -4742,7 +4751,7 @@
"type": {
"text": "string"
},
- "description": "Defines the item text.\n \n Note: The text is only displayed inside the overflow popover list view.", + "description": "Defines the item text.\n \n **Note:** The text is only displayed inside the overflow popover list view.", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -4814,12 +4823,12 @@ "declarations": [ { "kind": "class", - "description": "
Overview
\n\nTheSideNavigation 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
Usage
\n\nUse the availableui5-side-navigation-item and 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\nKeyboard Handling
\n\nFast Navigation
\nThis component provides a build in fast navigation group which can be used viaF6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up.\nIn order to use this functionality, you need to import the following module:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n\n\n
ES6 Module Import
\n\nimport \"@ui5/webcomponents-fiori/dist/SideNavigation.js\";\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)",
+ "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-item` and `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\n### Keyboard Handling\n\n#### Fast Navigation\nThis 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`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\";`\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`)",
"name": "SideNavigation",
"slots": [
{
"name": "default",
- "description": "Defines the main items of the ui5-side-navigation. Use the ui5-side-navigation-item component\nfor the top-level items, and the ui5-side-navigation-sub-item component for second-level items, nested\ninside the items.",
+ "description": "Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested\ninside the items.",
"_ui5propertyName": "items",
"_ui5type": {
"text": "Arrayui5-side-navigation.\n\n\nNote: The header is displayed when the component is expanded - the property
collapsed is false;",
+ "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;",
"_ui5since": "1.0.0-rc.11",
"_ui5type": {
"text": "Arrayui5-side-navigation. Use the ui5-side-navigation-item component\nfor the fixed items, and optionally the ui5-side-navigation-sub-item component to provide second-level items inside them.\n\nNote: In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)",
+ "description": "Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component\nfor the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.\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)",
"_ui5type": {
"text": "Arrayui5-side-navigation is expanded or collapsed.",
+ "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.",
"privacy": "public",
"default": "false",
"_ui5validator": "Boolean"
@@ -4942,12 +4951,12 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-side-navigation-item is used within ui5-side-navigation only.\nVia the ui5-side-navigation-item you control the content of the SideNavigation.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";",
+ "description": "### Overview\n\nThe `ui5-side-navigation-item` is used within `ui5-side-navigation` only.\nVia the `ui5-side-navigation-item` you control the content of the `SideNavigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";`",
"name": "SideNavigationItem",
"slots": [
{
"name": "default",
- "description": "Defines nested items by passing ui5-side-navigation-sub-item to the default slot.",
+ "description": "Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot.",
"_ui5propertyName": "items",
"_ui5type": {
"text": "Arrayclick event.\nBy default, only clicking the arrow icon will toggle the sub items.",
+ "description": "Defines whether clicking the whole item or only pressing the icon will show/hide the sub items (if present).\nIf set to true, clicking the whole item will toggle the sub items, and it won't fire the `click` event.\nBy default, only clicking the arrow icon will toggle the sub items.",
"privacy": "public",
"default": "false",
"_ui5since": "1.0.0-rc.11",
@@ -5007,7 +5016,7 @@
"type": {
"text": "string"
},
- "description": "Defines the icon of the item.\n\n\nThe SAP-icons font provides numerous options.\n
\nSee all the available icons in the
click event should be registered.",
+ "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.",
"privacy": "public",
"default": "\"\"",
"_ui5since": "1.19.0",
@@ -5053,7 +5062,7 @@
"type": {
"text": "string"
},
- "description": "Defines the component target.\n\nNotes:\n\n
- \n
_self\n_top\n_blank\n_parent\n_search\n
href property is set.",
+ "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.**",
"privacy": "public",
"default": "\"\"",
"_ui5since": "1.19.0",
@@ -5131,7 +5140,7 @@
"declarations": [
{
"kind": "class",
- "description": "A class to serve as a foundation\nfor the SideNavigationItem and SideNavigationSubItem classes.",
+ "description": "A class to serve as a foundation\nfor the `SideNavigationItem` and `SideNavigationSubItem` classes.",
"name": "SideNavigationItemBase",
"members": [
{
@@ -5151,7 +5160,7 @@
"type": {
"text": "string"
},
- "description": "Defines the icon of the item.\n\n\nThe SAP-icons font provides numerous options.\n
\nSee all the available icons in the
click event should be registered.",
+ "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.",
"privacy": "public",
"default": "\"\"",
"_ui5since": "1.19.0",
@@ -5185,7 +5194,7 @@
"type": {
"text": "string"
},
- "description": "Defines the component target.\n\nNotes:\n\n
- \n
_self\n_top\n_blank\n_parent\n_search\n
href property is set.",
+ "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.**",
"privacy": "public",
"default": "\"\"",
"_ui5since": "1.19.0",
@@ -5242,7 +5251,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-side-navigation-sub-item is intended to be used inside a ui5-side-navigation-item only.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";",
+ "description": "### Overview\n\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\";`",
"name": "SideNavigationSubItem",
"superclass": {
"name": "SideNavigationItemBase",
@@ -5276,7 +5285,7 @@
"type": {
"text": "string"
},
- "description": "Defines the icon of the item.\n\n\nThe SAP-icons font provides numerous options.\n
\nSee all the available icons in the
click event should be registered.",
+ "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.",
"privacy": "public",
"default": "\"\"",
"_ui5since": "1.19.0",
@@ -5322,7 +5331,7 @@
"type": {
"text": "string"
},
- "description": "Defines the component target.\n\nNotes:\n\n
- \n
_self\n_top\n_blank\n_parent\n_search\n
href property is set.",
+ "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.**",
"privacy": "public",
"default": "\"\"",
"_ui5since": "1.19.0",
@@ -5390,7 +5399,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\n\nUsage
\n\nFor theui5-sort-item\nES6 Module Import
\n\nimport @ui5/webcomponents-fiori/dist/SortItem.js\";",
+ "description": "### Overview\n\n### Usage\n\nFor the `ui5-sort-item`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/SortItem.js\";`",
"name": "SortItem",
"members": [
{
@@ -5454,17 +5463,17 @@
{
"kind": "interface",
"name": "ITimelineItem",
- "description": "Interface for components that may be slotted inside ui5-timeline as items",
+ "description": "Interface for components that may be slotted inside `ui5-timeline` as items",
"_ui5privacy": "public"
},
{
"kind": "class",
- "description": "Overview
\n\nTheui5-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.",
+ "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.",
"name": "Timeline",
"slots": [
{
"name": "default",
- "description": "Determines the content of the ui5-timeline.",
+ "description": "Determines the content of the `ui5-timeline`.",
"_ui5propertyName": "items",
"_ui5type": {
"text": "Array\nNote:\nAvailable options are:\n
- \n
Vertical\nHorizontal\n
Overview
\n\nAn entry posted on the timeline.", + "description": "### Overview\n\nAn entry posted on the timeline.", "name": "TimelineItem", "slots": [ { - "description": "Determines the description of theui5-timeline-item.",
+ "description": "Determines the description of the `ui5-timeline-item`.",
"name": "default",
"_ui5privacy": "public",
"_ui5type": {
@@ -5567,7 +5576,7 @@
"type": {
"text": "string"
},
- "description": "Defines the icon to be displayed as graphical element within the ui5-timeline-item.\nSAP-icons font provides numerous options.\n\n\nSee all the available icons in the
title-text.",
+ "description": "Defines the name of the item, displayed before the `title-text`.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -5589,7 +5598,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the name is clickable.",
+ "description": "Defines if the `name` is clickable.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -5624,7 +5633,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\nNote: The event will not be fired if the
name-clickable\nattribute is not set."
+ "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."
}
],
"superclass": {
@@ -5670,17 +5679,17 @@
{
"kind": "interface",
"name": "IUploadCollectionItem",
- "description": "Interface for components that may be slotted inside ui5-upload-collection as items",
+ "description": "Interface for components that may be slotted inside `ui5-upload-collection` as items",
"_ui5privacy": "public"
},
{
"kind": "class",
- "description": "Overview
\nThis component allows you to represent files before uploading them to a server, with the help ofui5-upload-collection-item.\nIt also allows you to show already uploaded files.\n\nES6 Module Import
\nimport \"@ui5/webcomponents-fiori/dist/UploadCollection.js\";\n\n
import \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\"; (for ui5-upload-collection-item)",
+ "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`)",
"name": "UploadCollection",
"slots": [
{
"name": "default",
- "description": "Defines the items of the ui5-upload-collection.\nNote: Use
ui5-upload-collection-item for the intended design.",
+ "description": "Defines the items of the `ui5-upload-collection`.\n\n**Note:** Use `ui5-upload-collection-item` for the intended design.",
"_ui5propertyName": "items",
"_ui5type": {
"text": "Arrayui5-upload-collection header.\n\nNote: If
header slot is provided,\nthe labelling of the UploadCollection is a responsibility of the application developer.\naccessibleName should be used.",
+ "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.",
"_ui5type": {
"text": "Arrayui5-upload-collection.\n\nNote:\nMode \"Delete\" has no effect. The delete button is controlled by the
hideDeleteButton property of UploadCollectionItem",
+ "description": "Defines the mode of the `ui5-upload-collection`.\n\n**Note:**\nMode \"Delete\" has no effect. The delete button is controlled by the `hideDeleteButton` property of UploadCollectionItem",
"default": "\"None\"",
"privacy": "public",
"_ui5validator": "ListMode"
@@ -5750,7 +5759,7 @@
"type": {
"text": "boolean"
},
- "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\nNote: It is up to the application developer to add handler for
drop event and handle it.\nui5-upload-collection only displays an 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.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -5775,7 +5784,7 @@
"type": {
"text": "Event"
},
- "description": "Fired when an element is dropped inside the drag and drop overlay.\n\nNote: 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."
+ "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": "item-delete",
@@ -5798,7 +5807,7 @@
},
"name": "item",
"_ui5privacy": "public",
- "description": "The ui5-upload-collection-item which was deleted."
+ "description": "The `ui5-upload-collection-item` which was deleted."
}
]
},
@@ -5815,7 +5824,7 @@
}
]
},
- "description": "Fired when selection is changed by user interaction\nin SingleSelect and MultiSelect modes.",
+ "description": "Fired when selection is changed by user interaction\nin `SingleSelect` and `MultiSelect` modes.",
"_ui5parameters": [
{
"type": {
@@ -5864,11 +5873,11 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\nA component to be used within theui5-upload-collection.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents-fiori/dist/UploadCollectionItem.js\";",
+ "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\";`",
"name": "UploadCollectionItem",
"slots": [
{
- "description": "Hold the description of the ui5-upload-collection-item. Will be shown below the file name.",
+ "description": "Hold the description of the `ui5-upload-collection-item`. Will be shown below the file name.",
"name": "default",
"_ui5privacy": "public",
"_ui5type": {
@@ -5877,7 +5886,7 @@
},
{
"name": "thumbnail",
- "description": "A thumbnail, which will be shown in the beginning of the ui5-upload-collection-item.\n\nNote: Use
ui5-icon or img for the intended design.",
+ "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.",
"_ui5type": {
"text": "Arrayui5-button component.\nNote: When the slot is not present, a built-in delete button will be displayed.",
+ "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.",
"_ui5since": "1.9.0",
"_ui5type": {
"text": "ArrayFile associated with this item.",
+ "description": "Holds an instance of `File` associated with this item.",
"default": "null",
"privacy": "public",
"_ui5validator": "Object",
@@ -5930,7 +5939,7 @@
"type": {
"text": "boolean"
},
- "description": "If set to true the file name will be clickable and it will fire file-name-click event upon click.",
+ "description": "If set to `true` the file name will be clickable and it will fire `file-name-click` event upon click.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -5952,7 +5961,7 @@
"type": {
"text": "boolean"
},
- "description": "By default, the delete button will always be shown, regardless of the ui5-upload-collection's property mode.\nSetting this property to true will hide the delete button.",
+ "description": "By default, the delete button will always be shown, regardless of the `ui5-upload-collection`'s property `mode`.\nSetting this property to `true` will hide the delete button.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -5963,7 +5972,7 @@
"type": {
"text": "boolean"
},
- "description": "Hides the retry button when uploadState property is Error.",
+ "description": "Hides the retry button when `uploadState` property is `Error`.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -5974,7 +5983,7 @@
"type": {
"text": "boolean"
},
- "description": "Hides the terminate button when uploadState property is Uploading.",
+ "description": "Hides the terminate button when `uploadState` property is `Uploading`.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -5985,7 +5994,7 @@
"type": {
"text": "number"
},
- "description": "The upload progress in percentage.\n\nNote: Expected values are in the interval [0, 100].", + "description": "The upload progress in percentage.\n\n**Note:** Expected values are in the interval [0, 100].", "default": "0", "privacy": "public", "_ui5validator": "Integer" @@ -6003,7 +6012,7 @@ } ] }, - "description": "If set to
Uploading or Error, a progress indicator showing the progress is displayed.\nAlso if set to Error, a refresh button is shown. When this icon is pressed retry event is fired.\nIf set to Uploading, a terminate button is shown. When this icon is pressed terminate event is fired.",
+ "description": "If set to `Uploading` or `Error`, a progress indicator showing the `progress` is displayed.\nAlso if set to `Error`, a refresh button is shown. When this icon is pressed `retry` event is fired.\nIf set to `Uploading`, a terminate button is shown. When this icon is pressed `terminate` event is fired.",
"default": "\"Ready\"",
"privacy": "public",
"_ui5validator": "UploadState"
@@ -6021,7 +6030,7 @@
}
]
},
- "description": "Defines the visual indication and behavior of the list items.\nAvailable options are Active (by default), Inactive, Detail and Navigation.\n\nNote: When set to
Active or Navigation, the item will provide visual response upon press and hover,\nwhile with type Inactive and Detail - will not.",
+ "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.",
"default": "\"Active\"",
"privacy": "public",
"_ui5validator": "ListItemType"
@@ -6039,7 +6048,7 @@
}
]
},
- "description": "An object of strings that defines several additional accessibility attribute values\nfor customization depending on the use case.\n\n It supports the following fields:\n\n- \n\t\t
ariaSetsize: Defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM.\n\t\tThe value of eacharia-setsizeis an integer reflecting number of items in the complete set.\n\t\tNote: If the size of the entire set is unknown, setaria-setsize=\"-1\".\n\t\t \n\t\tariaPosinset: Defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM.\n\t\tThe value of eacharia-posinsetis an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.\n\t\t \n
true, a navigation indicator is displayed at the end of the list item.",
+ "description": "The navigated state of the list item.\nIf set to `true`, a navigation indicator is displayed at the end of the list item.",
"default": "false",
"privacy": "public",
"_ui5since": "1.10.0",
"_ui5validator": "Boolean"
},
+ {
+ "kind": "field",
+ "name": "tooltip",
+ "type": {
+ "text": "string"
+ },
+ "description": "Defines the text of the tooltip that would be displayed for the list item.",
+ "default": "\"\"",
+ "privacy": "public",
+ "_ui5since": "1.23.0",
+ "_ui5validator": "String"
+ },
{
"kind": "field",
"name": "selected",
"type": {
"text": "boolean"
},
- "description": "Defines the selected state of the ListItem.",
+ "description": "Defines the selected state of the `ListItem`.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean",
@@ -6080,7 +6101,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the file name is clicked.\n\nNote: This event is only available when
fileNameClickable property is true."
+ "description": "Fired when the file name is clicked.\n\n**Note:** This event is only available when `fileNameClickable` property is `true`."
},
{
"name": "rename",
@@ -6088,7 +6109,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the fileName property gets changed.\n\nNote: An edit button is displayed on each item,\nwhen the
ui5-upload-collection-item type property is set to Detail."
+ "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": "terminate",
@@ -6096,7 +6117,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the terminate button is pressed.\n\nNote: Terminate button is displayed when
uploadState property is set to Uploading."
+ "description": "Fired when the terminate button is pressed.\n\n**Note:** Terminate button is displayed when `uploadState` property is set to `Uploading`."
},
{
"name": "retry",
@@ -6104,7 +6125,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the retry button is pressed.\n\nNote: Retry button is displayed when
uploadState property is set to Error."
+ "description": "Fired when the retry button is pressed.\n\n**Note:** Retry button is displayed when `uploadState` property is set to `Error`."
},
{
"name": "detail-click",
@@ -6112,7 +6133,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the user clicks on the detail button when type is Detail."
+ "description": "Fired when the user clicks on the detail button when type is `Detail`."
}
],
"superclass": {
@@ -6158,12 +6179,12 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\nTheui5-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\nStructure
\nAui5-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\nResponsive Behavior
\nui5-view-settings-dialog stretches on full screen on phones.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog\";",
+ "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\";`",
"name": "ViewSettingsDialog",
"slots": [
{
"name": "sortItems",
- "description": "Defines the list of items against which the user could sort data.\nNote: If you want to use this slot, you need to import used item: import \"@ui5/webcomponents-fiori/dist/SortItem\";",
+ "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\";`",
"_ui5type": {
"text": "ArrayfilterItems list.\nNote: If you want to use this slot, you need to import used item: import \"@ui5/webcomponents-fiori/dist/FilterItem\";",
+ "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\";`",
"_ui5type": {
"text": "Arrayui5-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{\nsortOrder: \"Ascending\",\nsortBy: \"Name\",\nfilters: [\n\t{\"Filter 1\": [\"Some filter 1\", \"Some filter 2\"]},\n\t{\"Filter 2\": [\"Some filter 4\"]},\n]\n}\n",
+ "description": "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:",
"privacy": "public"
}
],
@@ -6274,7 +6295,7 @@
},
"name": "sortBy",
"_ui5privacy": "public",
- "description": "The currently selected ui5-sort-item text attribute."
+ "description": "The currently selected `ui5-sort-item` text attribute."
},
{
"type": {
@@ -6282,7 +6303,7 @@
},
"name": "sortByItem",
"_ui5privacy": "public",
- "description": "The currently selected ui5-sort-item."
+ "description": "The currently selected `ui5-sort-item`."
},
{
"type": {
@@ -6331,7 +6352,7 @@
},
"name": "sortBy",
"_ui5privacy": "public",
- "description": "The currently selected ui5-sort-item text attribute."
+ "description": "The currently selected `ui5-sort-item` text attribute."
},
{
"type": {
@@ -6339,7 +6360,7 @@
},
"name": "sortByItem",
"_ui5privacy": "public",
- "description": "The currently selected ui5-sort-item."
+ "description": "The currently selected `ui5-sort-item`."
},
{
"type": {
@@ -6365,7 +6386,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired before the component is opened. This event does not bubble."
+ "description": "Fired before the component is opened. **This event does not bubble.**"
}
],
"superclass": {
@@ -6404,22 +6425,22 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-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\nStructure
\nNavigation area
\nThe top most area of theui5-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-stepas slotted element within theui5-wizard. \n
\nNote: 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\n
Wizard Progress Navigation
\n- \n\t
- [LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors. \n\t
- [UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor. \n\t
- [SPACE] or [ENTER], [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
Fast Navigation
\nThis component provides a build in fast navigation group which can be used viaF6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up.\nIn order to use this functionality, you need to import the following module:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n\nContent
\nThe content occupies the main part of the page. It can hold any type of HTML elements.\nIt's defined by using theui5-wizard-step as slotted element within the ui5-wizard.\n\nScrolling
\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\nImportant: 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
\nFor example:\n
\n
<ui5-dialog style=\"height: 80%\">
\n <ui5-wizard></ui5-wizard>
\n</ui5-dialog>\n\nMoving to next step
\nTheui5-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\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\nUsage
\nWhen to use:
\nWhen the user has to accomplish a long or unfamiliar task.\n\nWhen not to use:
\nWhen the task has less than 3 steps.\n\nResponsive 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\nES6 Module Import
\nimport \"@ui5/webcomponents-fiori/dist/Wizard.js\"; (includes <ui5-wizard-step/>)",
+ "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], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.\n\t- [UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.\n\t- [SPACE] or [ENTER], [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` or ` Ctrl + Alt(Option) + Down / 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\nui5-wizard.",
+ "description": "Used to style the progress navigator of the `ui5-wizard`.",
"name": "navigator"
},
{
- "description": "Used to style a ui5-wizard-step container.",
+ "description": "Used to style a `ui5-wizard-step` container.",
"name": "step-content"
}
],
"slots": [
{
"name": "default",
- "description": "Defines the steps.\n\nNote: Use the available
ui5-wizard-step component.",
+ "description": "Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component.",
"_ui5propertyName": "steps",
"_ui5type": {
"text": "Arrayui5-wizard would be visualized.",
+ "description": "Defines how the content of the `ui5-wizard` would be visualized.",
"privacy": "public",
"default": "\"MultipleSteps\"",
"_ui5since": "1.14.0",
@@ -6548,7 +6569,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nA component that represents a logical step as part of theui5-wizard.\nIt is meant to aggregate arbitrary HTML elements that form the content of a single step.\n\nStructure
\n- \n
- Each wizard step has arbitrary content. \n
- Each wizard step might have texts - defined by the
titleTextandsubtitleTextproperties. \n - Each wizard step might have an icon - defined by the
iconproperty. \n - Each wizard step might display a number in place of the
icon, when it's missing. \n
Usage
\nTheui5-wizard-step component should be used only as slot of the ui5-wizard component\nand should not be used standalone.",
+ "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.",
"name": "WizardStep",
"slots": [
{
@@ -6567,7 +6588,7 @@
"type": {
"text": "string"
},
- "description": "Defines the titleText of the step.\n\n\nNote: The text is displayed in the
ui5-wizard navigation header.",
+ "description": "Defines the `titleText` of the step.\n\n**Note:** The text is displayed in the `ui5-wizard` navigation header.",
"default": "\"\"",
"privacy": "public",
"_ui5since": "1.0.0-rc.15",
@@ -6579,7 +6600,7 @@
"type": {
"text": "string"
},
- "description": "Defines the subtitleText of the step.\n\n\nNote: the text is displayed in the
ui5-wizard navigation header.",
+ "description": "Defines the `subtitleText` of the step.\n\n**Note:** the text is displayed in the `ui5-wizard` navigation header.",
"default": "\"\"",
"privacy": "public",
"_ui5since": "1.0.0-rc.15",
@@ -6591,7 +6612,7 @@
"type": {
"text": "string"
},
- "description": "Defines the icon of the step.\n\n\nNote: The icon is displayed in the
ui5-wizard navigation header.\n\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the
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\nNote: Step can't be
selected and disabled at the same time.\nIn this case the selected property would take precedence.",
+ "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.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -6613,7 +6634,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines the step's selected state - the step that is currently active.\n\n\nNote: Step can't be
selected and disabled at the same time.\nIn this case the selected property would take precedence.",
+ "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.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -6624,7 +6645,7 @@
"type": {
"text": "boolean"
},
- "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\nNote: 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.",
+ "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.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json
index c582d27e820..d2300dfa339 100644
--- a/.storybook/custom-element-manifests/main.json
+++ b/.storybook/custom-element-manifests/main.json
@@ -690,6 +690,49 @@
}
]
},
+ {
+ "kind": "javascript-module",
+ "path": "dist/types/ButtonAccessibleRole.js",
+ "declarations": [
+ {
+ "kind": "enum",
+ "name": "ButtonAccessibleRole",
+ "description": "Button accessible roles.",
+ "_ui5privacy": "public",
+ "_ui5since": "1.23",
+ "members": [
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents Default (button) ARIA role.",
+ "default": "Button",
+ "name": "Button",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the ARIA role \"link\".",
+ "default": "Link",
+ "name": "Link",
+ "readonly": true
+ }
+ ]
+ }
+ ],
+ "exports": [
+ {
+ "kind": "js",
+ "name": "default",
+ "declaration": {
+ "name": "ButtonAccessibleRole",
+ "module": "dist/types/ButtonAccessibleRole.js"
+ }
+ }
+ ]
+ },
{
"kind": "javascript-module",
"path": "dist/types/ButtonDesign.js",
@@ -819,6 +862,238 @@
}
]
},
+ {
+ "kind": "javascript-module",
+ "path": "dist/types/CalendarLegendItemType.js",
+ "declarations": [
+ {
+ "kind": "enum",
+ "name": "CalendarLegendItemType",
+ "description": "Enum for calendar legend items' types.",
+ "_ui5privacy": "public",
+ "_ui5since": "1.23.0",
+ "members": [
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Set when no type is set.",
+ "default": "None",
+ "name": "None",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Working\" item in the calendar legend.",
+ "default": "Working",
+ "name": "Working",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"NonWorking\" item in the calendar legend.",
+ "default": "NonWorking",
+ "name": "NonWorking",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type01\" item in the calendar legend.",
+ "default": "Type01",
+ "name": "Type01",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type02\" item in the calendar legend.",
+ "default": "Type02",
+ "name": "Type02",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type03\" item in the calendar legend.",
+ "default": "Type03",
+ "name": "Type03",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type04\" item in the calendar legend.",
+ "default": "Type04",
+ "name": "Type04",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type05\" item in the calendar legend.",
+ "default": "Type05",
+ "name": "Type05",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type06\" item in the calendar legend.",
+ "default": "Type06",
+ "name": "Type06",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type07\" item in the calendar legend.",
+ "default": "Type07",
+ "name": "Type07",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type08\" item in the calendar legend.",
+ "default": "Type08",
+ "name": "Type08",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type09\" item in the calendar legend.",
+ "default": "Type09",
+ "name": "Type09",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type10\" item in the calendar legend.",
+ "default": "Type10",
+ "name": "Type10",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type11\" item in the calendar legend.",
+ "default": "Type11",
+ "name": "Type11",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type12\" item in the calendar legend.",
+ "default": "Type12",
+ "name": "Type12",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type13\" item in the calendar legend.",
+ "default": "Type13",
+ "name": "Type13",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type14\" item in the calendar legend.",
+ "default": "Type14",
+ "name": "Type14",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type15\" item in the calendar legend.",
+ "default": "Type15",
+ "name": "Type15",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type16\" item in the calendar legend.",
+ "default": "Type16",
+ "name": "Type16",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type17\" item in the calendar legend.",
+ "default": "Type17",
+ "name": "Type17",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type18\" item in the calendar legend.",
+ "default": "Type18",
+ "name": "Type18",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type19\" item in the calendar legend.",
+ "default": "Type19",
+ "name": "Type19",
+ "readonly": true
+ },
+ {
+ "kind": "field",
+ "static": true,
+ "privacy": "public",
+ "description": "Represents the \"Type20\" item in the calendar legend.",
+ "default": "Type20",
+ "name": "Type20",
+ "readonly": true
+ }
+ ]
+ }
+ ],
+ "exports": [
+ {
+ "kind": "js",
+ "name": "default",
+ "declaration": {
+ "name": "CalendarLegendItemType",
+ "module": "dist/types/CalendarLegendItemType.js"
+ }
+ }
+ ]
+ },
{
"kind": "javascript-module",
"path": "dist/types/CalendarPickersMode.js",
@@ -2290,7 +2565,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Component load-more is fired\nupon pressing a \"More\" button at the bottom.",
+ "description": "Component `load-more` is fired\nupon pressing a \"More\" button at the bottom.",
"default": "Button",
"name": "Button",
"readonly": true
@@ -2299,7 +2574,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Component load-more is fired upon scroll.",
+ "description": "Component `load-more` is fired upon scroll.",
"default": "Scroll",
"name": "Scroll",
"readonly": true
@@ -2476,7 +2751,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Renders h1 tag.",
+ "description": "Renders `h1` tag.",
"default": "H1",
"name": "H1",
"readonly": true
@@ -2485,7 +2760,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Renders h2 tag.",
+ "description": "Renders `h2` tag.",
"default": "H2",
"name": "H2",
"readonly": true
@@ -2494,7 +2769,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Renders h3 tag.",
+ "description": "Renders `h3` tag.",
"default": "H3",
"name": "H3",
"readonly": true
@@ -2503,7 +2778,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Renders h4 tag.",
+ "description": "Renders `h4` tag.",
"default": "H4",
"name": "H4",
"readonly": true
@@ -2512,7 +2787,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Renders h5 tag.",
+ "description": "Renders `h5` tag.",
"default": "H5",
"name": "H5",
"readonly": true
@@ -2521,7 +2796,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Renders h6 tag.",
+ "description": "Renders `h6` tag.",
"default": "H6",
"name": "H6",
"readonly": true
@@ -2554,7 +2829,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the TopStart position of its container.",
+ "description": "Toast is placed at the `TopStart` position of its container.",
"default": "TopStart",
"name": "TopStart",
"readonly": true
@@ -2563,7 +2838,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the TopCenter position of its container.",
+ "description": "Toast is placed at the `TopCenter` position of its container.",
"default": "TopCenter",
"name": "TopCenter",
"readonly": true
@@ -2572,7 +2847,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the TopEnd position of its container.",
+ "description": "Toast is placed at the `TopEnd` position of its container.",
"default": "TopEnd",
"name": "TopEnd",
"readonly": true
@@ -2581,7 +2856,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the MiddleStart position of its container.",
+ "description": "Toast is placed at the `MiddleStart` position of its container.",
"default": "MiddleStart",
"name": "MiddleStart",
"readonly": true
@@ -2590,7 +2865,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the MiddleCenter position of its container.",
+ "description": "Toast is placed at the `MiddleCenter` position of its container.",
"default": "MiddleCenter",
"name": "MiddleCenter",
"readonly": true
@@ -2599,7 +2874,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the MiddleEnd position of its container.",
+ "description": "Toast is placed at the `MiddleEnd` position of its container.",
"default": "MiddleEnd",
"name": "MiddleEnd",
"readonly": true
@@ -2608,7 +2883,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the BottomStart position of its container.",
+ "description": "Toast is placed at the `BottomStart` position of its container.",
"default": "BottomStart",
"name": "BottomStart",
"readonly": true
@@ -2617,7 +2892,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the BottomCenter position of its container.\nDefault placement (no selection)",
+ "description": "Toast is placed at the `BottomCenter` position of its container.\nDefault placement (no selection)",
"default": "BottomCenter",
"name": "BottomCenter",
"readonly": true
@@ -2626,7 +2901,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toast is placed at the BottomEnd position of its container.",
+ "description": "Toast is placed at the `BottomEnd` position of its container.",
"default": "BottomEnd",
"name": "BottomEnd",
"readonly": true
@@ -2659,7 +2934,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toolbar items are situated at the start of the Toolbar",
+ "description": "Toolbar items are situated at the `start` of the Toolbar",
"default": "Start",
"name": "Start",
"readonly": true
@@ -2668,7 +2943,7 @@
"kind": "field",
"static": true,
"privacy": "public",
- "description": "Toolbar items are situated at the end of the Toolbar",
+ "description": "Toolbar items are situated at the `end` of the Toolbar",
"default": "End",
"name": "End",
"readonly": true
@@ -2798,12 +3073,12 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n\n
Keyboard Handling
\n\n- \n
- [SPACE, ENTER, RETURN] - Fires the
clickevent if theinteractiveproperty is set to true. \n - [SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event. \n
\n\n
ES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/Avatar.js\";",
+ "description": "### Overview\n\nAn image-like component that has different display options for representing images and icons\nin different shapes and sizes, depending on the use case.\n\nThe shape can be circular or square. There are several predefined sizes, as well as an option to\nset a custom size.\n\n### Keyboard Handling\n\n- [SPACE, ENTER, RETURN] - Fires the `click` event if the `interactive` property is set to true.\n- [SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Avatar.js\";`",
"name": "Avatar",
"slots": [
{
"name": "default",
- "description": "Receives the desired <img> tag\n\nNote: If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:\n\n
\n\tui5-avatar:not(:defined) {
\n\t\t visibility: hidden;
\n\t}
\n",
+ "description": "Receives the desired `ui5-badge with ui5-icon\nin the corresponding icon slot, without text nodes.\n\nExample:\n
\n<ui5-avatar>
\n <ui5-badge slot=\"badge\">
\n <ui5-icon slot=\"icon\" name=\"employee\"></ui5-icon>
\n </ui5-badge>
\n</ui5-avatar>\n
\n
disabled\nproperty is set to true.",
+ "description": "Defines if the avatar is interactive (focusable and pressable).\n\n**Note:** This property won't have effect if the `disabled`\nproperty is set to `true`.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -2850,7 +3125,7 @@
"type": {
"text": "string"
},
- "description": "Defines the name of the UI5 Icon, that will be displayed.\n\nNote: If
image slot is provided, the property will be ignored.\n\nNote: You should import the desired icon first, then use its name as \"icon\".\n
\nimport \"@ui5/webcomponents-icons/dist/{icon_name}.js\"\n
\n
<ui5-avatar icon=\"employee\">\n
\nNote: If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\nSee all the available icons in the
- \n\t
- If the initials are not valid (more than 3 letters, unsupported languages or empty initials). \n\t
- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes). \n\t
- If the image src is wrong. \n
\nNote: If not set, a default fallback icon \"employee\" is displayed.\n
\nNote: You should import the desired icon first, then use its name as \"fallback-icon\".\n
\nimport \"@ui5/webcomponents-icons/dist/{icon_name}.js\"\n
\n
<ui5-avatar fallback-icon=\"alert\">\n
\n\nSee all the available icons in the
\nUp to three Latin letters can be displayed as initials.", + "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -2988,17 +3263,17 @@ { "kind": "interface", "name": "IAvatarGroupItem", - "description": "Interface for components that represent an avatar and may be slotted in numerous higher-order components such as
ui5-avatar-group",
+ "description": "Interface for components that represent an avatar and may be slotted in numerous higher-order components such as `ui5-avatar-group`",
"_ui5privacy": "public"
},
{
"kind": "class",
- "description": "Overview
\n\nDisplays a group of avatars arranged horizontally. It is useful to visually\nshowcase a group of related avatars, such as, project team members or employees.\n\nThe component allows you to display the avatars in different sizes,\ndepending on your use case.\n\nTheAvatarGroup component has two group types:\n- \n
Grouptype: The avatars are displayed as partially overlapped on\ntop of each other and the entire group has one click/tap area. \nIndividualtype: The avatars are displayed side-by-side and each\navatar has its own click/tap area. \n
Responsive Behavior
\n\nWhen the available space is less than the width required to display all avatars,\nan overflow visualization appears as a button placed at the end with the same shape\nand size as the avatars. The visualization displays the number of avatars that have overflowed\nand are not currently visible.\n\nUsage
\n\nUse theAvatarGroup if:\n- \n
- You want to display a group of avatars. \n
- You want to display several avatars which have something in common. \n
AvatarGroup if:\n- \n
- You want to display a single avatar. \n
- You want to display a gallery for simple images. \n
- You want to use it for other visual content than avatars. \n
Keyboard Handling
\nThe component provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n\n
type Individual:\n\n
- \n
- [TAB] - Move focus to the overflow button \n
- [LEFT] - Navigate one avatar to the left \n
- [RIGHT] - Navigate one avatar to the right \n
- [HOME] - Navigate to the first avatar \n
- [END] - Navigate to the last avatar \n
- [SPACE],[ENTER],[RETURN] - Trigger
ui5-clickevent \n
\n
type Group:\n\n
- \n
- [TAB] - Move focus to the next interactive element after the component \n
- [SPACE],[ENTER],[RETURN] - Trigger
ui5-clickevent \n
", + "description": "### Overview\n\nDisplays a group of avatars arranged horizontally. It is useful to visually\nshowcase a group of related avatars, such as, project team members or employees.\n\nThe component allows you to display the avatars in different sizes,\ndepending on your use case.\n\nThe `AvatarGroup` component has two group types:\n\n- `Group` type: The avatars are displayed as partially overlapped on\ntop of each other and the entire group has one click/tap area.\n- `Individual` type: The avatars are displayed side-by-side and each\navatar has its own click/tap area.\n\n### Responsive Behavior\n\nWhen the available space is less than the width required to display all avatars,\nan overflow visualization appears as a button placed at the end with the same shape\nand size as the avatars. The visualization displays the number of avatars that have overflowed\nand are not currently visible.\n\n### Usage\n\nUse the `AvatarGroup` if:\n\n- You want to display a group of avatars.\n- You want to display several avatars which have something in common.\n\nDo not use the `AvatarGroup` if:\n\n- You want to display a single avatar.\n- You want to display a gallery for simple images.\n- You want to use it for other visual content than avatars.\n\n### Keyboard Handling\nThe component provides advanced keyboard handling.\nWhen focused, the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n`type` Individual:\n\n- [TAB] - Move focus to the overflow button\n- [LEFT] - Navigate one avatar to the left\n- [RIGHT] - Navigate one avatar to the right\n- [HOME] - Navigate to the first avatar\n- [END] - Navigate to the last avatar\n- [SPACE],[ENTER],[RETURN] - Trigger `ui5-click` event\n\n`type` Group:\n\n- [TAB] - Move focus to the next interactive element after the component\n- [SPACE],[ENTER],[RETURN] - Trigger `ui5-click` event", "name": "AvatarGroup", "slots": [ { "name": "default", - "description": "Defines the items of the component. Use the
ui5-avatar component as an item.\n\nNote: The UX guidelines recommends using avatars with \"Circle\" shape.\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.", + "description": "Defines the items of the component. Use the `ui5-avatar` component as an item.\n\n**Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\nMoreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\nas the built-in overflow action has \"Circle\" shape.", "_ui5propertyName": "items", "_ui5type": { "text": "Array
ui5-button component.\n\nNote: If this slot is not used, the component will\ndisplay the built-in overflow button.", + "description": "Defines the overflow button of the component.\n\n**Note:** We recommend using the `ui5-button` component.\n\n**Note:** If this slot is not used, the component will display the built-in overflow button.", "_ui5since": "1.0.0-rc.13", "_ui5type": { "text": "Array
AvatarGroup.",
+ "description": "Defines the mode of the `AvatarGroup`.",
"default": "\"Group\"",
"privacy": "public",
"_ui5validator": "AvatarGroupType"
@@ -3061,7 +3336,7 @@
}
]
},
- "description": "Returns an array containing the ui5-avatar instances that are currently not displayed due to lack of space.",
+ "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.",
"default": "[]",
"privacy": "public",
"readonly": true
@@ -3079,7 +3354,7 @@
}
]
},
- "description": "Returns an array containing the AvatarColorScheme values that correspond to the avatars in the component.",
+ "description": "Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.",
"default": "[]",
"privacy": "public",
"readonly": true
@@ -3126,7 +3401,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the count of visible ui5-avatar elements in the\ncomponent has changed",
+ "description": "Fired when the count of visible `ui5-avatar` elements in the\ncomponent has changed",
"_ui5since": "1.0.0-rc.13"
}
],
@@ -3166,12 +3441,12 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-badge is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\nUsage Guidelines
\n- \n
- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the
wrappingTypeproperty. \n - Colors can be semantic or not semantic. \n
ES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/Badge\";",
+ "description": "### Overview\n\nThe `ui5-badge` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Badge.js\";`",
"name": "Badge",
"slots": [
{
"name": "default",
- "description": "Defines the text of the component.\nNote: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "description": "Defines the text of the 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.", "_ui5propertyName": "text", "_ui5type": { "text": "Array
\"1\" to \"10\". The colorScheme \"1\" will be set by default.\n\nNote: Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.", + "description": "Defines the color scheme of the component.\nThere are 10 predefined schemes.\nTo use one you can set a number from `\"1\"` to `\"10\"`. The `colorScheme` `\"1\"` will be set by default.\n\n**Note:** Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.", "default": "\"1\"", "privacy": "public", "_ui5validator": "String" @@ -3234,7 +3509,7 @@ "description": "Defines if the default state icon is shown.", "default": "false", "privacy": "public", - "_ui5since": "1.20", + "_ui5since": "1.22.0", "_ui5validator": "Boolean" }, { @@ -3243,10 +3518,10 @@ "type": { "text": "boolean" }, - "description": "Defines if the component is interactive (focusable and pressable).\n
Note: The badge cannot be
interactive\nwhen design property is BadgeDesign.Set3",
+ "description": "Defines if the component is interactive (focusable and pressable).\n\n**Note:** The badge cannot be `interactive`\nwhen `design` property is `BadgeDesign.Set3`",
"default": "false",
"privacy": "public",
- "_ui5since": "1.20",
+ "_ui5since": "1.22.0",
"_ui5validator": "Boolean"
},
{
@@ -3262,10 +3537,10 @@
}
]
},
- "description": "Defines how the text of a component will be displayed when there is not enough space.\nNote: For option \"Normal\" the text will wrap and the\nwords will not be broken based on hyphenation.", + "description": "Defines how the text of a component will be displayed when there is not enough space.\n\n**Note:** For option \"Normal\" the text will wrap and the\nwords will not be broken based on hyphenation.", "default": "\"None\"", "privacy": "public", - "_ui5since": "1.20", + "_ui5since": "1.22.0", "_ui5validator": "WrappingType" } ], @@ -3276,8 +3551,8 @@ "type": { "text": "CustomEvent" }, - "description": "Fired when the user clicks on an interactive badge.\nNote: The event will be fired if the
interactive property is true",
- "_ui5since": "1.20"
+ "description": "Fired when the user clicks on an interactive badge.\n\n**Note:** The event will be fired if the `interactive` property is `true`",
+ "_ui5since": "1.22.0"
}
],
"superclass": {
@@ -3316,12 +3591,12 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\nEnables users to navigate between items by providing a list of links to previous steps in the user's navigation path.\nIt helps the user to be aware of their location within the application and allows faster navigation.\n\nThe last three steps can be accessed as links directly, while the remaining links prior to them are available\nin a drop-down menu.\n
\nYou can choose the type of separator to be used from a number of predefined options.\n\n
Keyboard Handling
\nTheui5-breadcrumbs provides advanced keyboard handling.\n\n
- \n
- [F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - If the dropdown arrow is focused - opens/closes the drop-down. \n
- [SPACE, ENTER] - Activates the focused item and triggers the
item-clickevent. \n - [ESC] - Closes the drop-down. \n
- [LEFT] - If the drop-down is closed - navigates one item to the left. \n
- [RIGHT] - If the drop-down is closed - navigates one item to the right. \n
- [UP] - If the drop-down is open - moves focus to the next item. \n
- [DOWN] - If the drop-down is open - moves focus to the previous item. \n
- [HOME] - Navigates to the first item. \n
- [END] - Navigates to the last item. \n
", + "description": "### Overview\nEnables users to navigate between items by providing a list of links to previous steps in the user's navigation path.\nIt helps the user to be aware of their location within the application and allows faster navigation.\n\nThe last three steps can be accessed as links directly, while the remaining links prior to them are available\nin a drop-down menu.\n\nYou can choose the type of separator to be used from a number of predefined options.\n\n### Keyboard Handling\nThe `ui5-breadcrumbs` provides advanced keyboard handling.\n\n- [F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - If the dropdown arrow is focused - opens/closes the drop-down.\n- [SPACE, ENTER] - Activates the focused item and triggers the `item-click` event.\n- [ESC] - Closes the drop-down.\n- [LEFT] - If the drop-down is closed - navigates one item to the left.\n- [RIGHT] - If the drop-down is closed - navigates one item to the right.\n- [UP] - If the drop-down is open - moves focus to the next item.\n- [DOWN] - If the drop-down is open - moves focus to the previous item.\n- [HOME] - Navigates to the first item.\n- [END] - Navigates to the last item.", "name": "Breadcrumbs", "slots": [ { "name": "default", - "description": "Defines the component items.\n\n
\nNote: Use the
ui5-breadcrumbs-item component to define the desired items.",
+ "description": "Defines the component items.\n\n**Note:** Use the `ui5-breadcrumbs-item` component to define the desired items.",
"_ui5propertyName": "items",
"_ui5type": {
"text": "Array\nNote: The
Standard breadcrumbs show the current page as the last item in the trail.\nThe last item contains only plain text and is not a link.",
+ "description": "Defines the visual indication and behavior of the breadcrumbs.\n\n**Note:** The `Standard` breadcrumbs show the current page as the last item in the trail.\nThe last item contains only plain text and is not a link.",
"default": "\"Standard\"",
"privacy": "public",
"_ui5validator": "BreadcrumbsDesign"
@@ -3388,7 +3663,7 @@
}
]
},
- "description": "Fires when a BreadcrumbsItem is clicked.\nNote: You can prevent browser location change by calling event.preventDefault().",
+ "description": "Fires when a `BreadcrumbsItem` is clicked.\n\n**Note:** You can prevent browser location change by calling `event.preventDefault()`.",
"_ui5allowPreventDefault": true,
"_ui5parameters": [
{
@@ -3470,12 +3745,12 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-breadcrumbs-item component defines the content of an item in ui5-breadcrumbs.",
+ "description": "### Overview\n\nThe `ui5-breadcrumbs-item` component defines the content of an item in `ui5-breadcrumbs`.",
"name": "BreadcrumbsItem",
"slots": [
{
"name": "default",
- "description": "Defines the text of the component.\n\nNote: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "description": "Defines the text of the 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.", "_ui5propertyName": "text", "_ui5type": { "text": "Array
\nNote: Standard hyperlink behavior is supported.", + "description": "Defines the link href.\n\n**Note:** Standard hyperlink behavior is supported.", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -3501,7 +3776,7 @@ "type": { "text": "string | undefined" }, - "description": "Defines the link target.\n
\nAvailable options are:\n
- \n
_self\n_top\n_blank\n_parent\n_search\n
\nNote: This property must only be used when the
href property is set.",
+ "description": "Defines the link target.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`\n\n**Note:** This property must only be used when the `href` property is set.",
"default": "undefined",
"privacy": "public",
"_ui5validator": "String"
@@ -3555,7 +3830,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-busy-indicator signals that some operation is going on and that the\nuser must wait. It does not block the current UI screen so other operations could be triggered in parallel.\nIt displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.\n\nUsage
\nFor theui5-busy-indicator you can define the size, the text and whether it is shown or hidden.\nIn order to hide it, use the \"active\" property.\n\nIn order to show busy state over an HTML element, simply nest the HTML element in a
ui5-busy-indicator instance.\n\nNote: Since
ui5-busy-indicator has display: inline-block; by default and no width of its own,\nwhenever you need to wrap a block-level element, you should set display: block to the busy indicator as well.\n\nWhen to use:
\n- \n
- The user needs to be able to cancel the operation. \n
- Only part of the application or a particular component is affected. \n
When not to use:
\n- \n
- The operation takes less than one second. \n
- You need to block the screen and prevent the user from starting another activity. \n
- Do not show multiple busy indicators at once. \n
ES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/BusyIndicator\";",
+ "description": "### Overview\n\nThe `ui5-busy-indicator` signals that some operation is going on and that the\nuser must wait. It does not block the current UI screen so other operations could be triggered in parallel.\nIt displays 3 dots and each dot expands and shrinks at a different rate, resulting in a cascading flow of animation.\n\n### Usage\nFor the `ui5-busy-indicator` you can define the size, the text and whether it is shown or hidden.\nIn order to hide it, use the \"active\" property.\n\nIn order to show busy state over an HTML element, simply nest the HTML element in a `ui5-busy-indicator` instance.\n\n**Note:** Since `ui5-busy-indicator` has `display: inline-block;` by default and no width of its own,\nwhenever you need to wrap a block-level element, you should set `display: block` to the busy indicator as well.\n\n#### When to use:\n\n- The user needs to be able to cancel the operation.\n- Only part of the application or a particular component is affected.\n\n#### When not to use:\n\n- The operation takes less than one second.\n- You need to block the screen and prevent the user from starting another activity.\n- Do not show multiple busy indicators at once.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/BusyIndicator.js\";`",
"name": "BusyIndicator",
"slots": [
{
@@ -3663,7 +3938,7 @@
},
{
"kind": "class",
- "description": "Overview
\n\nTheui5-button component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the ui5-button, or by pressing\ncertain keyboard keys, such as Enter.\n\n\nUsage
\n\nFor theui5-button UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n
\nYou can set the
ui5-button as enabled or disabled. An enabled\nui5-button can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled ui5-button appears inactive and cannot be pressed.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/Button\";",
+ "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.js\";`",
"name": "Button",
"cssParts": [
{
@@ -3674,7 +3949,7 @@
"slots": [
{
"name": "default",
- "description": "Defines the text of the component.\n\nNote: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.", + "description": "Defines the text of the 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.", "_ui5propertyName": "text", "_ui5type": { "text": "Array
\nExample:\n\nSee all the available icons within the
true, the component will\nautomatically submit the nearest HTML form element on press.\n\nNote: For the
submits property to have effect, you must add the following import to your project:\nimport \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";",
+ "description": "When set to `true`, the component will\nautomatically submit the nearest HTML form element on `press`.\n\n**Note:** For the `submits` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`",
"default": "false",
"privacy": "public",
"deprecated": "Set the \"type\" property to \"Submit\" to achieve the same result. The \"submits\" property is ignored if \"type\" is set to any value other than \"Button\".",
@@ -3752,7 +4027,7 @@
"type": {
"text": "string"
},
- "description": "Defines the tooltip of the component.\n\nNote: A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", + "description": "Defines the tooltip of the component.\n\n**Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.", "default": "\"\"", "privacy": "public", "_ui5since": "1.2.0", @@ -3795,7 +4070,7 @@ } ] }, - "description": "An object of strings that defines several additional accessibility attribute values\nfor customization depending on the use case.\n\nIt supports the following fields:\n\n
- \n\t\t
expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n\t\t- \n\t\t\t
true\n\t\t\tfalse\n\t\t
\n\t\thasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:\n\t\t\t- \n\t\t\t
Dialog\n\t\t\tGrid\n\t\t\tListbox\n\t\t\tMenu\n\t\t\tTree\n\t\t\t
\n\t\tcontrols: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value. \n
\nNote: For the
type property to have effect, you must add the following import to your project:\nimport \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";",
+ "description": "Defines whether the button has special form-related functionality.\n\n**Note:** For the `type` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`",
"default": "\"Button\"",
"privacy": "public",
"_ui5since": "1.15.0",
"_ui5validator": "ButtonType"
+ },
+ {
+ "kind": "field",
+ "name": "accessibleRole",
+ "type": {
+ "text": "ButtonAccessibleRole",
+ "references": [
+ {
+ "name": "ButtonAccessibleRole",
+ "package": "@ui5/webcomponents",
+ "module": "dist/types/ButtonAccessibleRole.js"
+ }
+ ]
+ },
+ "description": "Describes the accessibility role of the button.\n\n**Note:** Use link role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
+ "default": "\"Button\"",
+ "privacy": "public",
+ "_ui5since": "1.23",
+ "_ui5validator": "ButtonAccessibleRole"
}
],
"events": [
@@ -3828,7 +4122,7 @@
"type": {
"text": "Event"
},
- "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\nNote: The event will not be fired if the
disabled\nproperty is set to true."
+ "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`."
}
],
"superclass": {
@@ -3873,12 +4167,28 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-calendar component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of
ui5-date as\nchildren of the ui5-calendar. The value property of each ui5-date must be a\ndate string, correctly formatted according to the ui5-calendar's formatPattern property.\nWhenever the user changes the date selection, ui5-calendar will automatically create/remove instances\nof ui5-date in itself, unless you prevent this behavior by calling preventDefault() for the\nselected-dates-change event. This is useful if you want to control the selected dates externally.\n\n\n
Usage
\n\nThe user can navigate to a particular date by:\n\n
- \n
- Pressing over a month inside the months view \n
- Pressing over an year inside the years view \n
\nThe user can confirm a date selection by pressing over a date inside the days view.\n
\n\n
Keyboard Handling
\nTheui5-calendar provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:
\n
- \n
- [F4] - Shows month picker \n
- [SHIFT] + [F4] - Shows year picker \n
- [PAGEUP] - Navigate to the previous month \n
- [PAGEDOWN] - Navigate to the next month \n
- [SHIFT] + [PAGEUP] - Navigate to the previous year \n
- [SHIFT] + [PAGEDOWN] - Navigate to the next year \n
- [CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards \n
- [CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards \n
- [HOME] - Navigate to the first day of the week \n
- [END] - Navigate to the last day of the week \n
- [CTRL] + [HOME] - Navigate to the first day of the month \n
- [CTRL] + [END] - Navigate to the last day of the month \n
\n- Month picker:
\n
- \n
- [PAGEUP] - Navigate to the previous year \n
- [PAGEDOWN] - Navigate to the next year \n
- [HOME] - Navigate to the first month of the current row \n
- [END] - Navigate to the last month of the current row \n
- [CTRL] + [HOME] - Navigate to the first month of the current year \n
- [CTRL] + [END] - Navigate to the last month of the year \n
\n- Year picker:
\n
- \n
- [PAGEUP] - Navigate to the previous year range \n
- [PAGEDOWN] - Navigate the next year range \n
- [HOME] - Navigate to the first year of the current row \n
- [END] - Navigate to the last year of the current row \n
- [CTRL] + [HOME] - Navigate to the first year of the current year range \n
- [CTRL] + [END] - Navigate to the last year of the current year range \n
\n\n
Fast Navigation
\nThis component provides a build in fast navigation group which can be used viaF6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up.\nIn order to use this functionality, you need to import the following module:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n\n\n
Calendar types
\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set theprimaryCalendarType property and import one or more of the following modules:\n\n\n
import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";\n\n
import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";\n\n
import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";\n\n
import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";\n\n\nOr, you can use the global configuration and set the
calendarType key:\n\n
\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n{\n\"calendarType\": \"Japanese\"\n}\n</script>\n\n\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/Calendar\";",
+ "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selected-dates-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [SHIFT] + [F4] - Shows year picker\n- [PAGEUP] - Navigate to the previous month\n- [PAGEDOWN] - Navigate to the next month\n- [SHIFT] + [PAGEUP] - Navigate to the previous year\n- [SHIFT] + [PAGEDOWN] - Navigate to the next year\n- [CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards\n- [CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards\n- [HOME] - Navigate to the first day of the week\n- [END] - Navigate to the last day of the week\n- [CTRL] + [HOME] - Navigate to the first day of the month\n- [CTRL] + [END] - Navigate to the last day of the month\n\n- Month picker:\n\n- [PAGEUP] - Navigate to the previous year\n- [PAGEDOWN] - Navigate to the next year\n- [HOME] - Navigate to the first month of the current row\n- [END] - Navigate to the last month of the current row\n- [CTRL] + [HOME] - Navigate to the first month of the current year\n- [CTRL] + [END] - Navigate to the last month of the year\n\n- Year picker:\n\n- [PAGEUP] - Navigate to the previous year range\n- [PAGEDOWN] - Navigate the next year range\n- [HOME] - Navigate to the first year of the current row\n- [END] - Navigate to the last year of the current row\n- [CTRL] + [HOME] - Navigate to the first year of the current year range\n- [CTRL] + [END] - Navigate to the last year of the current year range\n\n#### Fast Navigation\nThis 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`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`",
"name": "Calendar",
"slots": [
+ {
+ "name": "calendarLegend",
+ "description": "Defines the calendar legend of the component.",
+ "_ui5since": "1.23.0",
+ "_ui5type": {
+ "text": "ArrayselectionMode property)\nfor this calendar as instances of ui5-date.",
+ "description": "Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date`.",
"_ui5propertyName": "dates",
"_ui5type": {
"text": "Array\n
- \n
CalendarSelectionMode.Single- enables a single date selection.(default value) \nCalendarSelectionMode.Range- enables selection of a date range. \nCalendarSelectionMode.Multiple- enables selection of multiple dates. \n
\n\nNote: For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", + "description": "Defines the visibility of the week numbers column.\n\n**Note:** For calendars other than Gregorian,\nthe week numbers are not displayed regardless of what is set.", "default": "false", "privacy": "public", "_ui5validator": "Boolean" @@ -3989,7 +4315,7 @@ "type": { "text": "string" }, - "description": "Determines the minimum date available for selection.\n\nNote: If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).", "default": "\"\"", "privacy": "public", "_ui5since": "1.0.0-rc.6", @@ -4005,7 +4331,7 @@ "type": { "text": "string" }, - "description": "Determines the maximum date available for selection.\n\nNote: If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", + "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).", "default": "\"\"", "privacy": "public", "_ui5since": "1.0.0-rc.6", @@ -4030,7 +4356,7 @@ } ] }, - "description": "Fired when the selected dates change.\nNote: If you call
preventDefault() for this event, the component will not\ncreate instances of ui5-date for the newly selected dates. In that case you should do this manually.",
+ "description": "Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.",
"_ui5allowPreventDefault": true,
"_ui5parameters": [
{
@@ -4088,7 +4414,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-date component defines a calendar date to be used inside ui5-calendar",
+ "description": "### Overview\n\nThe `ui5-date` component defines a calendar date to be used inside `ui5-calendar`",
"name": "CalendarDate",
"members": [
{
@@ -4097,7 +4423,7 @@
"type": {
"text": "string"
},
- "description": "The date formatted according to the formatPattern property\nof the ui5-calendar that hosts the component.",
+ "description": "The date formatted according to the `formatPattern` property\nof the `ui5-calendar` that hosts the component.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -4148,6 +4474,177 @@
}
]
},
+ {
+ "kind": "javascript-module",
+ "path": "dist/CalendarLegend.js",
+ "declarations": [
+ {
+ "kind": "class",
+ "description": "### Overview\n\nThe `ui5-calendar-legend` component is designed for use within the `ui5-calendar` to display a legend.\nEach `ui5-calendar-legend-item` represents a unique date type, specifying its visual style\nand a corresponding textual label.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CalendarLegend.js\";`",
+ "name": "CalendarLegend",
+ "slots": [
+ {
+ "name": "default",
+ "description": "Defines the items of the component.",
+ "_ui5propertyName": "items",
+ "_ui5type": {
+ "text": "Arrayui5-card as header",
+ "description": "Interface for components that may be slotted inside `ui5-card` as header",
"_ui5privacy": "public"
},
{
"kind": "class",
- "description": "Overview
\n\nTheui5-card is a component that represents information in the form of a\ntile with separate header and content areas.\nThe content area of a ui5-card can be arbitrary HTML content.\nThe header can be used through slot header. For which there is a ui5-card-header component to achieve the card look and feel.\n\nNote: We recommend the usage of ui5-card-header for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/Card\";\n\n
import \"@ui5/webcomponents/dist/CardHeader.js\"; (for ui5-card-header)",
+ "description": "### Overview\n\nThe `ui5-card` is a component that represents information in the form of a\ntile with separate header and content areas.\nThe content area of a `ui5-card` can be arbitrary HTML content.\nThe header can be used through slot `header`. For which there is a `ui5-card-header` component to achieve the card look and feel.\n\nNote: We recommend the usage of `ui5-card-header` for the header slot, so advantage can be taken for keyboard handling, styling and accessibility.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Card\";`\n\n`import \"@ui5/webcomponents/dist/CardHeader.js\";` (for `ui5-card-header`)",
"name": "Card",
"cssParts": [
{
@@ -4306,7 +4803,7 @@
},
{
"name": "header",
- "description": "Defines the header of the component.\n\nNote: Use
ui5-card-header for the intended design.",
+ "description": "Defines the header of the component.\n\n**Note:** Use `ui5-card-header` for the intended design.",
"_ui5since": "1.0.0-rc.15",
"_ui5type": {
"text": "ArrayaccessibleName should be always set, unless accessibleNameRef is set.",
+ "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\n\n**Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set.",
"default": "\"\"",
"privacy": "public",
"_ui5since": "1.0.0-rc.16",
@@ -4382,7 +4879,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-card-header is a component, meant to be used as a header of the ui5-card component.\nIt displays valuable information, that can be defined with several properties, such as: titleText, subtitleText, status\nand two slots: avatar and action.\n\nKeyboard handling
\nIn case you enableinteractive property, you can press the ui5-card-header by Space and Enter keys.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/CardHeader\";",
+ "description": "### Overview\n\nThe `ui5-card-header` is a component, meant to be used as a header of the `ui5-card` component.\nIt displays valuable information, that can be defined with several properties, such as: `titleText`, `subtitleText`, `status`\nand two slots: `avatar` and `action`.\n\n### Keyboard handling\nIn case you enable `interactive` property, you can press the `ui5-card-header` by Space and Enter keys.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CardHeader\";`",
"name": "CardHeader",
"cssParts": [
{
@@ -4460,7 +4957,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines if the component would be interactive,\ne.g gets hover effect, gets focus outline and click event is fired, when pressed.",
+ "description": "Defines if the component would be interactive,\ne.g gets hover effect, gets focus outline and `click` event is fired, when pressed.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -4473,7 +4970,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n\nNote: The event would be fired only if the
interactive property is set to true."
+ "description": "Fired when the component is activated by mouse/tap or by using the Enter or Space key.\n\n**Note:** The event would be fired only if the `interactive` property is set to true."
}
],
"superclass": {
@@ -4519,7 +5016,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n
- \n
- on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts. \n
- on mobile - the user can use swipe gestures. \n
Usage
\n\nWhen to use:
\n\n- \n
- The items you want to display are very different from each other. \n
- You want to display the items one after the other. \n
When not to use:
\n\n- \n
- The items you want to display need to be visible at the same time. \n
- The items you want to display are uniform and very similar. \n
Keyboard Handling
\n\nBasic Navigation
\nWhen theui5-carousel is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n
- \n
- [UP/DOWN] - Navigates to previous and next item \n
- [LEFT/RIGHT] - Navigates to previous and next item \n
Fast Navigation
\nThis component provides a build in fast navigation group which can be used viaF6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up.\nIn order to use this functionality, you need to import the following module:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n\n\n
ES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/Carousel.js\";",
+ "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.\n- on mobile - the user can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [UP/DOWN] - Navigates to previous and next item\n- [LEFT/RIGHT] - Navigates to previous and next item\n\n### Fast Navigation\nThis 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/dist/Carousel.js\";`",
"name": "Carousel",
"cssParts": [
{
@@ -4589,7 +5086,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\nNote: The navigation arrows are never displayed on touch devices.\nIn this case, the user can swipe to navigate through the items.", + "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are never displayed on touch devices.\nIn this case, the user can swipe to navigate through the items.", "default": "false", "privacy": "public", "_ui5since": "1.0.0-rc.15", @@ -4620,7 +5117,7 @@ } ] }, - "description": "Defines the style of the page indicator.\nAvailable options are:\n
- \n
Default- The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y) \nNumeric- The page indicator will display the current page and the total number of pages. (e.g. X of Y) \n
\nAvailable options are:\n
- \n
Content- the arrows are placed on the sides of the current page. \nNavigation- the arrows are placed on the sides of the page indicator. \n
items-per-page-l, items-per-page-m and items-per-page-s properties.",
+ "description": "Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page-l`, `items-per-page-m` and `items-per-page-s` properties.",
"_ui5since": "1.0.0-rc.7",
"_ui5parameters": [
{
@@ -4807,15 +5304,15 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nAllows the user to set a binary value, such as true/false or yes/no for an item.\n\nThe
ui5-checkbox component consists of a box and a label that describes its purpose.\nIf it's checked, an indicator is displayed inside the box.\nTo check/uncheck the ui5-checkbox, the user has to click or tap the square\nbox or its label.\n\nThe
ui5-checkbox component only has 2 states - checked and unchecked.\nClicking or tapping toggles the ui5-checkbox between checked and unchecked state.\n\nUsage
\n\nYou can define the checkbox text with via thetext property. If the text exceeds the available width, it is truncated by default.\nIn case you prefer text to wrap, set the wrappingType property to \"Normal\".\nThe touchable area for toggling the ui5-checkbox ends where the text ends.\n\nYou can disable the
ui5-checkbox by setting the disabled property to\ntrue,\nor use the ui5-checkbox in read-only mode by setting the readonly\nproperty to true.\n\n\n\n
Keyboard Handling
\n\nThe user can use the following keyboard shortcuts to toggle the checked state of theui5-checkbox.\n- \n
- [SPACE, ENTER] - Toggles between different states: checked, not checked. \n
\n\n
ES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/CheckBox\";",
+ "description": "### Overview\n\nAllows the user to set a binary value, such as true/false or yes/no for an item.\n\nThe `ui5-checkbox` component consists of a box and a label that describes its purpose.\nIf it's checked, an indicator is displayed inside the box.\nTo check/uncheck the `ui5-checkbox`, the user has to click or tap the square\nbox or its label.\n\nThe `ui5-checkbox` component only has 2 states - checked and unchecked.\nClicking or tapping toggles the `ui5-checkbox` between checked and unchecked state.\n\n### Usage\n\nYou can define the checkbox text with via the `text` property. If the text exceeds the available width, it is truncated by default.\nIn case you prefer text to wrap, set the `wrappingType` property to \"Normal\".\nThe touchable area for toggling the `ui5-checkbox` ends where the text ends.\n\nYou can disable the `ui5-checkbox` by setting the `disabled` property to\n`true`,\nor use the `ui5-checkbox` in read-only mode by setting the `readonly`\nproperty to `true`.\n\n### Keyboard Handling\n\nThe user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.\n\n- [SPACE, ENTER] - Toggles between different states: checked, not checked.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CheckBox.js\";`",
"name": "CheckBox",
"cssParts": [
{
- "description": "Used to style the outermost wrapper of the ui5-checkbox",
+ "description": "Used to style the outermost wrapper of the `ui5-checkbox`",
"name": "root"
},
{
- "description": "Used to style the label of the ui5-checkbox",
+ "description": "Used to style the label of the `ui5-checkbox`",
"name": "label"
}
],
@@ -4850,7 +5347,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines whether the component is disabled.\n\nNote: A disabled component is completely noninteractive.", + "description": "Defines whether the component is disabled.\n\n**Note:** A disabled component is completely noninteractive.", "default": "false", "privacy": "public", "_ui5validator": "Boolean" @@ -4861,7 +5358,7 @@ "type": { "text": "boolean" }, - "description": "Defines whether the component is read-only.\n
\nNote: A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", "default": "false", "privacy": "public", "_ui5validator": "Boolean" @@ -4872,7 +5369,7 @@ "type": { "text": "boolean" }, - "description": "Determines whether the
ui5-checkbox is in display only state.\n\nWhen set to true, the ui5-checkbox is not interactive, not editable, not focusable\nand not in the tab chain. This setting is used for forms in review mode.\n\ndisabled is set to true this property has no effect.",
+ "description": "Determines whether the `ui5-checkbox` is in display only state.\n\nWhen set to `true`, the `ui5-checkbox` is not interactive, not editable, not focusable\nand not in the tab chain. This setting is used for forms in review mode.\n\n**Note:** When the property `disabled` is set to `true` this property has no effect.",
"privacy": "public",
"default": "false",
"_ui5since": "1.22.0",
@@ -4896,7 +5393,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines whether the component is displayed as partially checked.\n\nNote: The indeterminate state can be set only programmatically and can’t be achieved by user\ninteraction and the resulting visual state depends on the values of the
indeterminate\nand checked properties:\n- \n
- If the component is checked and indeterminate, it will be displayed as partially checked\n
- If the component is checked and it is not indeterminate, it will be displayed as checked\n
- If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute\n
\nNote: The property can be changed with user interaction,\neither by cliking/tapping on the component, or by\npressing the Enter or Space key.", + "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking/tapping on the component, or by\npressing the Enter or Space key.", "default": "false", "privacy": "public", "_ui5validator": "Boolean", @@ -4957,7 +5454,7 @@ } ] }, - "description": "Defines whether the component text wraps when there is not enough space.\n
Note: for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", + "description": "Defines whether the component text wraps when there is not enough space.\n\n**Note:** for option \"Normal\" the text will wrap and the words will not be broken based on hyphenation.", "default": "\"None\"", "privacy": "public", "_ui5validator": "WrappingType" @@ -4968,7 +5465,7 @@ "type": { "text": "string" }, - "description": "Determines the name with which the component will be submitted in an HTML form.\n\n
\nImportant: For the
name property to have effect, you must add the following import to your project:\nimport \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";\n\n\nNote: When set, a native
input HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
+ "description": "Determines the name with which the component will be submitted in an HTML form.\n\n**Important:** For the `name` property to have effect, you must add the following import to your project:\n`import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\n**Note:** When set, a native `input` HTML element\nwill be created inside the component so that it can be submitted as\npart of an HTML form. Do not use this property unless you need to submit a form.",
"default": "\"\"",
"privacy": "public",
"_ui5validator": "String"
@@ -5021,17 +5518,17 @@
{
"kind": "interface",
"name": "IColorPaletteItem",
- "description": "Interface for components that may be used inside a ui5-color-palette or ui5-color-palette-popover",
+ "description": "Interface for components that may be used inside a `ui5-color-palette` or `ui5-color-palette-popover`",
"_ui5privacy": "public"
},
{
"kind": "class",
- "description": "Overview
\nTheui5-color-palette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n\nUsage
\n\nTheui5-color-palette is meant for users that need to select a color from a predefined set.\nTo define the colors, use the ui5-color-palette-item component inside the default slot of the ui5-color-palette.\n\nES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/ColorPalette.js\";",
+ "description": "### Overview\nThe `ui5-color-palette` provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n\n### Usage\n\nThe `ui5-color-palette` is meant for users that need to select a color from a predefined set.\nTo define the colors, use the `ui5-color-palette-item` component inside the default slot of the `ui5-color-palette`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ColorPalette.js\";`",
"name": "ColorPalette",
"slots": [
{
"name": "default",
- "description": "Defines the ui5-color-palette-item elements.",
+ "description": "Defines the `ui5-color-palette-item` elements.",
"_ui5propertyName": "colors",
"_ui5type": {
"text": "ArrayOverview
\n\nTheui5-color-palette-item component represents a color in the the ui5-color-palette.",
+ "description": "### Overview\n\nThe `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.",
"name": "ColorPaletteItem",
"members": [
{
@@ -5120,7 +5617,7 @@
"type": {
"text": "string | undefined"
},
- "description": "Defines the colour of the component.\n\nNote: The value should be a valid CSS color.", + "description": "Defines the colour of the component.\n\n**Note:** The value should be a valid CSS color.", "default": "undefined", "privacy": "public", "_ui5validator": "CSSColor" @@ -5169,7 +5666,7 @@ "declarations": [ { "kind": "class", - "description": "
Overview
\nRepresents a predefined range of colors for easier selection.\n\nOverview\nThe ColorPalettePopover provides the users with a slot to predefine colors.\n\nYou can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly.\nYou can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n\nUsage
\n\nThe palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n\nFor theui5-color-palette-popover\nES6 Module Import
\n\nimport @ui5/webcomponents/dist/ColorPalettePopover.js\";",
+ "description": "### Overview\nRepresents a predefined range of colors for easier selection.\n\nOverview\nThe ColorPalettePopover provides the users with a slot to predefine colors.\n\nYou can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly.\nYou can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n\n### Usage\n\nThe palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n\nFor the `ui5-color-palette-popover`\n### ES6 Module Import\n\n`import @ui5/webcomponents/dist/ColorPalettePopover.js\";`",
"name": "ColorPalettePopover",
"slots": [
{
@@ -5207,7 +5704,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines whether the user can choose a custom color from a component.\nNote: In order to use this property you need to import the following module: \"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"",
+ "description": "Defines whether the user can choose a custom color from a component.\n\n**Note:** In order to use this property you need to import the following module: `\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"`",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean"
@@ -5229,7 +5726,7 @@
"type": {
"text": "string | undefined"
},
- "description": "Defines the default color of the component.\nNote: The default color should be a part of the ColorPalette colors",
+ "description": "Defines the default color of the component.\n\n**Note:** The default color should be a part of the ColorPalette colors`",
"default": "undefined",
"privacy": "public",
"_ui5validator": "CSSColor"
@@ -5278,7 +5775,7 @@
],
"description": "Shows the ColorPalettePopover.",
"privacy": "public",
- "deprecated": "The method is deprecated in favour of open and opener properties.",
+ "deprecated": "The method is deprecated in favour of `open` and `opener` properties.",
"_ui5since": "1.1.1"
},
{
@@ -5301,7 +5798,7 @@
],
"description": "Shows the ColorPalettePopover.",
"privacy": "public",
- "deprecated": "The method is deprecated in favour of open and opener properties.",
+ "deprecated": "The method is deprecated in favour of `open` and `opener` properties.",
"_ui5since": "1.0.0-rc.16"
}
],
@@ -5337,7 +5834,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the ui5-color-palette-popover is closed due to user interaction.",
+ "description": "Fired when the `ui5-color-palette-popover` is closed due to user interaction.",
"_ui5since": "1.21.0"
}
],
@@ -5377,7 +5874,7 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\nTheui5-color-picker allows users to choose any color and provides different input options for selecting colors.\n\nUsage
\n\nWhen to use:\n
When not to use:
\n- \n
- Users need to select one color from a predefined set of colors. Use the ColorPalette component instead. \n
ES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/ColorPicker.js\";",
+ "description": "### Overview\nThe `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.\n\n### Usage\n\n#### When to use\nUse the color picker if:\n\n- users need to select any color freely.\n\n#### When not to use\n\n- Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ColorPicker.js\";`",
"name": "ColorPicker",
"members": [
{
@@ -5386,7 +5883,7 @@
"type": {
"text": "string"
},
- "description": "Defines the currently selected color of the component.\n\nNote: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.", + "description": "Defines the currently selected color of the component.\n\n**Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.", "default": "\"rgba(255, 255, 255, 1)\"", "privacy": "public", "_ui5validator": "CSSColor" @@ -5439,12 +5936,12 @@ { "kind": "interface", "name": "IComboBoxItem", - "description": "Interface for components that may be slotted inside a
ui5-combobox",
+ "description": "Interface for components that may be slotted inside a `ui5-combobox`",
"_ui5privacy": "public"
},
{
"kind": "class",
- "description": "Overview
\n\nTheui5-combobox component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\nStructure
\nTheui5-combobox consists of the following elements:\n\n- \n
- Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value. \n
- Drop-down arrow - expands\\collapses the option list. \n
- Option list - the list of available options. \n
Keyboard Handling
\n\nTheui5-combobox provides advanced keyboard handling.\n\n\n
- \n
- [F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker. \n
- [ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value. \n
- [ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it. \n
- [DOWN] - Selects the next matching item in the picker. \n
- [UP] - Selects the previous matching item in the picker. \n
- [PAGEDOWN] - Moves selection down by page size (10 items by default). \n
- [PAGEUP] - Moves selection up by page size (10 items by default). \n
- [HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item. \n
- [END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item. \n
ES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/ComboBox\";",
+ "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n- Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n- Drop-down arrow - expands\\collapses the option list.\n- Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.\n- [ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.\n- [DOWN] - Selects the next matching item in the picker.\n- [UP] - Selects the previous matching item in the picker.\n- [PAGEDOWN] - Moves selection down by page size (10 items by default).\n- [PAGEUP] - Moves selection up by page size (10 items by default).\n- [HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`",
"name": "ComboBox",
"slots": [
{
@@ -5465,7 +5962,7 @@
},
{
"name": "valueStateMessage",
- "description": "Defines the value state message that will be displayed as pop up under the component.\n\n\nNote: If not specified, a default text (in the respective language) will be displayed.\n
\nNote: The
valueStateMessage would be displayed,\nwhen the ui5-combobox is in Information, Warning or Error value state.",
+ "description": "Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Warning` or `Error` value state.",
"_ui5since": "1.0.0-rc.9",
"_ui5type": {
"text": "Array\nNote: A disabled component is completely noninteractive.", + "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is completely noninteractive.", "default": "false", "privacy": "public", "_ui5validator": "Boolean" @@ -5561,7 +6058,7 @@ "type": { "text": "boolean" }, - "description": "Defines whether the component is read-only.\n
\nNote: A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", + "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.", "default": "false", "privacy": "public", "_ui5validator": "Boolean" @@ -5658,7 +6155,7 @@ "type": { "text": "CustomEvent" }, - "description": "Fired when typing in input or clear icon is pressed.\n
\nNote: filterValue property is updated, input is changed." + "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed." }, { "name": "selection-change", @@ -5729,7 +6226,7 @@ "declarations": [ { "kind": "class", - "description": "The
ui5-cb-group-item is type of suggestion item,\nthat can be used to split the ui5-combobox suggestions into groups.",
+ "description": "The `ui5-cb-group-item` is type of suggestion item,\nthat can be used to split the `ui5-combobox` suggestions into groups.",
"name": "ComboBoxGroupItem",
"members": [
{
@@ -5788,7 +6285,7 @@
"declarations": [
{
"kind": "class",
- "description": "The ui5-cb-item represents the item for a ui5-combobox.",
+ "description": "The `ui5-cb-item` represents the item for a `ui5-combobox`.",
"name": "ComboBoxItem",
"members": [
{
@@ -5858,7 +6355,7 @@
"declarations": [
{
"kind": "class",
- "description": "A component to be used as custom list item within the ui5-list\nthe same way as the standard ui5-li.\n\nThe component accepts arbitrary HTML content to allow full customization.",
+ "description": "A component to be used as custom list item within the `ui5-list`\nthe same way as the standard `ui5-li`.\n\nThe component accepts arbitrary HTML content to allow full customization.",
"name": "CustomListItem",
"cssParts": [
{
@@ -5897,7 +6394,7 @@
},
{
"name": "deleteButton",
- "description": "Defines the delete button, displayed in \"Delete\" mode.\nNote: While the slot allows custom buttons, to match\ndesign guidelines, please use the ui5-button component.\nNote: When the slot is not present, a built-in delete button will be displayed.",
+ "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.",
"_ui5since": "1.9.0",
"_ui5type": {
"text": "ArrayActive (by default), Inactive, Detail and Navigation.\n\nNote: When set to
Active or Navigation, the item will provide visual response upon press and hover,\nwhile with type Inactive and Detail - will not.",
+ "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.",
"default": "\"Active\"",
"privacy": "public",
"_ui5validator": "ListItemType",
@@ -5960,7 +6457,7 @@
}
]
},
- "description": "An object of strings that defines several additional accessibility attribute values\nfor customization depending on the use case.\n\n It supports the following fields:\n\n- \n\t\t
ariaSetsize: Defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM.\n\t\tThe value of eacharia-setsizeis an integer reflecting number of items in the complete set.\n\t\tNote: If the size of the entire set is unknown, setaria-setsize=\"-1\".\n\t\t \n\t\tariaPosinset: Defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM.\n\t\tThe value of eacharia-posinsetis an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.\n\t\t \n
true, a navigation indicator is displayed at the end of the list item.",
- "default": "false",
+ "description": "Defines the text of the tooltip that would be displayed for the list item.",
+ "default": "\"\"",
"privacy": "public",
- "_ui5since": "1.10.0",
- "_ui5validator": "Boolean",
+ "_ui5since": "1.23.0",
+ "_ui5validator": "String",
"inheritedFrom": {
"name": "ListItem",
"module": "dist/ListItem.js"
@@ -5992,7 +6505,7 @@
"type": {
"text": "boolean"
},
- "description": "Defines the selected state of the ListItem.",
+ "description": "Defines the selected state of the `ListItem`.",
"default": "false",
"privacy": "public",
"_ui5validator": "Boolean",
@@ -6017,7 +6530,7 @@
"type": {
"text": "CustomEvent"
},
- "description": "Fired when the user clicks on the detail button when type is Detail.",
+ "description": "Fired when the user clicks on the detail button when type is `Detail`.",
"inheritedFrom": {
"name": "ListItem",
"module": "dist/ListItem.js"
@@ -6108,7 +6621,7 @@
"type": {
"text": "string"
},
- "description": "Determines the minimum date available for selection.\n\nNote: If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
+ "description": "Determines the minimum date available for selection.\n\n**Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).",
"default": "\"\"",
"privacy": "public",
"_ui5since": "1.0.0-rc.6",
@@ -6120,7 +6633,7 @@
"type": {
"text": "string"
},
- "description": "Determines the maximum date available for selection.\n\nNote: If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
+ "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
"default": "\"\"",
"privacy": "public",
"_ui5since": "1.0.0-rc.6",
@@ -6154,12 +6667,12 @@
"declarations": [
{
"kind": "class",
- "description": "Overview
\n\nTheui5-date-picker component provides an input field with assigned calendar which opens on user action.\nThe ui5-date-picker allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\nUsage
\n\nThe user can enter a date by:\n- \n
- Using the calendar that opens in a popup \n
- Typing it in directly in the input field \n
\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n
Formatting
\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see
\nFor example, if the
format-pattern is \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\nKeyboard Handling
\nTheui5-date-picker provides advanced keyboard handling.\nIf the ui5-date-picker is focused,\nyou can open or close the drop-down by pressing F4, ALT+UP or ALT+DOWN keys.\nOnce the drop-down is opened, you can use the UP, DOWN, LEFT, RIGHT arrow keys\nto navigate through the dates and select one by pressing the Space or Enter keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\n\nIf the
ui5-date-picker input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by dateValue property\nby using the following shortcuts:\n\n
- \n
- [PAGEDOWN] - Decrements the corresponding day of the month by one \n
- [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one \n
- [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one \n
- [PAGEUP] - Increments the corresponding day of the month by one \n
- [SHIFT] + [PAGEUP] - Increments the corresponding month by one \n
- [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one \n
Calendar types
\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set theprimaryCalendarType property and import one or more of the following modules:\n\n\n
import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";\n\n
import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";\n\n
import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";\n\n
import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";\n\n\nOr, you can use the global configuration and set the
calendarType key:\n\n
<script data-id=\"sap-ui-config\" type=\"application/json\">\n{\n\"calendarType\": \"Japanese\"\n}\n</script>ES6 Module Import
\n\nimport \"@ui5/webcomponents/dist/DatePicker\";",
+ "description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"yyyy-MM-dd\",\na valid value string is \"2015-07-30\" and the same is displayed in the input.\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing `F4`, `ALT+UP` or `ALT+DOWN` keys.\nOnce the drop-down is opened, you can use the `UP`, `DOWN`, `LEFT`, `RIGHT` arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [PAGEDOWN] - Decrements the corresponding day of the month by one\n- [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one\n- [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one\n- [PAGEUP] - Increments the corresponding day of the month by one\n- [SHIFT] + [PAGEUP] - Increments the corresponding month by one\n- [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n`
+ *
+ * ```html
+ *
+ * ```
+ *
+ *
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/playground/)
*/
@@ -150,7 +200,7 @@ const Calendar = withWebComponentopener properties.
+ * @deprecated The method is deprecated in favour of `open` and `opener` properties.
* @param {HTMLElement | EventTarget} opener - the element that the popover is shown at
* @returns {void}
*/
@@ -62,7 +66,7 @@ interface ColorPalettePopoverDomRef extends Omitopener properties.
+ * @deprecated The method is deprecated in favour of `open` and `opener` properties.
* @param {HTMLElement | EventTarget} opener - the element that the popover is shown at
* @returns {void}
*/
@@ -88,11 +92,20 @@ interface ColorPalettePopoverPropTypes
}
/**
- * Represents a predefined range of colors for easier selection. Overview The ColorPalettePopover provides the users with a slot to predefine colors. You can customize them with the use of the colors property. You can specify a defaultColor and display a "Default color" button for the user to choose directly. You can display a "More colors..." button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.
+ * Represents a predefined range of colors for easier selection.
+ *
+ * Overview
+ * The ColorPalettePopover provides the users with a slot to predefine colors.
+ *
+ * You can customize them with the use of the colors property. You can specify a defaultColor and display a "Default color" button for the user to choose directly.
+ * You can display a "More colors..." button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.
*
* ### Usage
*
- * The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker. For the `ColorPalettePopover`
+ * The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.
+ *
+ * For the `ColorPalettePopover`
+ *
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/playground/)
*/
diff --git a/packages/main/src/webComponents/ColorPicker/index.tsx b/packages/main/src/webComponents/ColorPicker/index.tsx
index 2f0865b3bd6..66aab99dcde 100644
--- a/packages/main/src/webComponents/ColorPicker/index.tsx
+++ b/packages/main/src/webComponents/ColorPicker/index.tsx
@@ -31,13 +31,16 @@ interface ColorPickerPropTypes
*
* ### Usage
*
- * #### When to use:
+ * #### When to use
+ * Use the color picker if:
*
- * * users need to select any color freely.
+ * - users need to select any color freely.
+ *
+ * #### When not to use
+ *
+ * - Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.
*
- * #### When not to use:
*
- * * Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/playground/)
*/
diff --git a/packages/main/src/webComponents/ComboBox/index.tsx b/packages/main/src/webComponents/ComboBox/index.tsx
index ee10d57bf30..dbd00942899 100644
--- a/packages/main/src/webComponents/ComboBox/index.tsx
+++ b/packages/main/src/webComponents/ComboBox/index.tsx
@@ -46,14 +46,16 @@ interface ComboBoxAttributes {
noTypeahead?: boolean;
/**
- * Defines a short hint intended to aid the user with data entry when the component has no value.
+ * Defines a short hint intended to aid the user with data entry when the
+ * component has no value.
*/
placeholder?: string;
/**
* Defines whether the component is read-only.
*
- * **Note:** A read-only component is not editable, but still provides visual feedback upon user interaction.
+ * **Note:** A read-only component is not editable,
+ * but still provides visual feedback upon user interaction.
* @default false
*/
readonly?: boolean;
@@ -116,7 +118,9 @@ interface ComboBoxPropTypes
* Defines the value state message that will be displayed as pop up under the component.
*
* **Note:** If not specified, a default text (in the respective language) will be displayed.
- * **Note:** The `valueStateMessage` would be displayed, when the `ComboBox` is in `Information`, `Warning` or `Error` value state.
+ *
+ * **Note:** The `valueStateMessage` would be displayed,
+ * when the `ComboBox` is in `Information`, `Warning` or `Error` value state.
*
* __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="valueStateMessage"`).
* Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
@@ -144,29 +148,32 @@ interface ComboBoxPropTypes
}
/**
- * The `ComboBox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options. It is commonly used to enable users to select an option from a predefined list.
+ * The `ComboBox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.
*
- * ### Structure
+ * It is commonly used to enable users to select an option from a predefined list.
*
+ * ### Structure
* The `ComboBox` consists of the following elements:
*
- * * Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.
- * * Drop-down arrow - expands\\collapses the option list.
- * * Option list - the list of available options.
+ * - Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.
+ * - Drop-down arrow - expands\collapses the option list.
+ * - Option list - the list of available options.
*
* ### Keyboard Handling
*
* The `ComboBox` provides advanced keyboard handling.
*
- * * \[F4\], \[ALT\]+\[UP\], or \[ALT\]+\[DOWN\] - Toggles the picker.
- * * \[ESC\] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.
- * * \[ENTER\] or \[RETURN\] - If picker is open, takes over the currently selected item and closes it.
- * * \[DOWN\] - Selects the next matching item in the picker.
- * * \[UP\] - Selects the previous matching item in the picker.
- * * \[PAGEDOWN\] - Moves selection down by page size (10 items by default).
- * * \[PAGEUP\] - Moves selection up by page size (10 items by default).
- * * \[HOME\] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
- * * \[END\] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
+ * - [F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.
+ * - [ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.
+ * - [ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.
+ * - [DOWN] - Selects the next matching item in the picker.
+ * - [UP] - Selects the previous matching item in the picker.
+ * - [PAGEDOWN] - Moves selection down by page size (10 items by default).
+ * - [PAGEUP] - Moves selection up by page size (10 items by default).
+ * - [HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
+ * - [END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
+ *
+ *
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/playground/)
*/
diff --git a/packages/main/src/webComponents/ComboBoxGroupItem/index.tsx b/packages/main/src/webComponents/ComboBoxGroupItem/index.tsx
index 626c04dc805..70b81a7faa3 100644
--- a/packages/main/src/webComponents/ComboBoxGroupItem/index.tsx
+++ b/packages/main/src/webComponents/ComboBoxGroupItem/index.tsx
@@ -18,7 +18,8 @@ interface ComboBoxGroupItemPropTypes
Omit