From 8f8e61fcba188b23ad2f27457cc5b56ccae991a0 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 7 Mar 2024 08:33:20 +0100 Subject: [PATCH 01/10] chore: update web component dependency to 1.23 --- package.json | 8 +-- packages/base/package.json | 2 +- packages/charts/package.json | 4 +- packages/main/package.json | 8 +-- yarn.lock | 134 +++++++++++++++++------------------ 5 files changed, 78 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index a4ffa706fd9..c9bffd2af5c 100644 --- a/package.json +++ b/package.json @@ -37,9 +37,9 @@ "@storybook/react": "7.6.17", "@storybook/react-vite": "7.6.17", "@storybook/theming": "7.6.17", - "@ui5/webcomponents": "1.22.0", - "@ui5/webcomponents-fiori": "1.22.0", - "@ui5/webcomponents-icons": "1.22.0", + "@ui5/webcomponents": "1.23.0", + "@ui5/webcomponents-fiori": "1.23.0", + "@ui5/webcomponents-icons": "1.23.0", "react": "18.2.0", "react-dom": "18.2.0", "remark-gfm": "^3.0.1", @@ -60,7 +60,7 @@ "@types/turndown": "^5.0.4", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", - "@ui5/webcomponents-tools": "1.22.0", + "@ui5/webcomponents-tools": "1.23.0", "@vitejs/plugin-react": "^4.2.0", "chromatic": "^11.0.0", "cssnano": "^6.0.1", diff --git a/packages/base/package.json b/packages/base/package.json index 160a4d4def0..f8fff62a9b5 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -30,7 +30,7 @@ }, "peerDependencies": { "@types/react": "*", - "@ui5/webcomponents-base": "~1.22.0", + "@ui5/webcomponents-base": "~1.23.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { diff --git a/packages/charts/package.json b/packages/charts/package.json index a4c223677ce..fd715f7b654 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -34,8 +34,8 @@ "recharts": "2.12.2" }, "peerDependencies": { - "@ui5/webcomponents-react": "~1.25.0", - "@ui5/webcomponents-react-base": "~1.25.0", + "@ui5/webcomponents-react": "~1.26.0", + "@ui5/webcomponents-react-base": "~1.26.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0", "react-jss": "^10.10.0" }, diff --git a/packages/main/package.json b/packages/main/package.json index 76ff5342298..b1e054d3f8e 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -63,10 +63,10 @@ "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "@ui5/webcomponents": "~1.22.0", - "@ui5/webcomponents-base": "~1.22.0", - "@ui5/webcomponents-fiori": "~1.22.0", - "@ui5/webcomponents-icons": "~1.22.0", + "@ui5/webcomponents": "~1.23.0", + "@ui5/webcomponents-base": "~1.23.0", + "@ui5/webcomponents-fiori": "~1.23.0", + "@ui5/webcomponents-icons": "~1.23.0", "react": "^16.14.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" }, diff --git a/yarn.lock b/yarn.lock index 83b159e9fc6..e4bafac3259 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4779,10 +4779,10 @@ __metadata: languageName: node linkType: hard -"@sap-theming/theming-base-content@npm:11.10.0": - version: 11.10.0 - resolution: "@sap-theming/theming-base-content@npm:11.10.0" - checksum: 10c0/ebbe92e6927661fd0c68f95af32dc85049a1aaabf0804d52d00b7741ce220fff942b3b51992bec9bafd8ee80e7c5e536c77c15c3ff3a0d44a2f4a762ca2aaa9d +"@sap-theming/theming-base-content@npm:11.12.0": + version: 11.12.0 + resolution: "@sap-theming/theming-base-content@npm:11.12.0" + checksum: 10c0/883343575b93e956f1511dfc78503003ec185c6376f67f07ce320cecc2a0422d326b23f7b9ff2cc2fb70b2cbb15b459959082a0b65917b3b221cd17b8ba29ea5 languageName: node linkType: hard @@ -6884,13 +6884,13 @@ __metadata: languageName: node linkType: hard -"@ui5/webcomponents-base@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents-base@npm:1.22.0" +"@ui5/webcomponents-base@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents-base@npm:1.23.0" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.1.2" lit-html: "npm:^2.0.1" - checksum: 10c0/6a88af40035dc2e79a776f711ef415e1f1559fcf1a856bd9903291e8e95cd010c87ff8dc56243d46522be2200fc878a9dce7f469d91bfd9a546c7a682ff63920 + checksum: 10c0/ada3dbd73bcb3cf081da03470c4af53c56cfc243c46c492460fd600a2073abff9561fb5e09092e5a90b4569a865af827d2990865a39de6fc001eadbb9079b73c languageName: node linkType: hard @@ -6902,53 +6902,53 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-fiori@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents-fiori@npm:1.22.0" +"@ui5/webcomponents-fiori@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents-fiori@npm:1.23.0" dependencies: - "@ui5/webcomponents": "npm:1.22.0" - "@ui5/webcomponents-base": "npm:1.22.0" - "@ui5/webcomponents-icons": "npm:1.22.0" - "@ui5/webcomponents-theming": "npm:1.22.0" + "@ui5/webcomponents": "npm:1.23.0" + "@ui5/webcomponents-base": "npm:1.23.0" + "@ui5/webcomponents-icons": "npm:1.23.0" + "@ui5/webcomponents-theming": "npm:1.23.0" "@zxing/library": "npm:^0.17.1" - checksum: 10c0/f46cb82d56b1779dcf0f98e7ca2e931fe5f3fa1466d0e87f0f9bd121531840bbd6fea459d173bf9151442a8e86b56337c9dba9d5786f3fbba8305bdf9e166cd1 + checksum: 10c0/db21ba873edb11fef94944fb546fb11569270fb551542062069b8c7603a86b8626fecf408f8ae353c4bbd36ac32468b09277f2c9efd3f48efd1fe97a14d410f9 languageName: node linkType: hard -"@ui5/webcomponents-icons-business-suite@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents-icons-business-suite@npm:1.22.0" +"@ui5/webcomponents-icons-business-suite@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents-icons-business-suite@npm:1.23.0" dependencies: - "@ui5/webcomponents-base": "npm:1.22.0" - checksum: 10c0/42137417628118d081c1cf1031247fc934bcc9111ae4db6703742bbd785a129f6695490cff0d1d43dac69937c2253bc3b27fbd388dcace44deadd2cc2a4f426e + "@ui5/webcomponents-base": "npm:1.23.0" + checksum: 10c0/feef8bd58d2023872c6bbf3f0a2afb25affb97d2a4eb773c1b0ad4a5afd18f43187f981f9cc1697417060e9447552e7d85324579fb8fb4623247d8163cfc37b4 languageName: node linkType: hard -"@ui5/webcomponents-icons-tnt@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents-icons-tnt@npm:1.22.0" +"@ui5/webcomponents-icons-tnt@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents-icons-tnt@npm:1.23.0" dependencies: - "@ui5/webcomponents-base": "npm:1.22.0" - checksum: 10c0/f03d4417401d5d1a527e79f9bd808922acea509c30cb9905cc8dc55be7c344ab1d046050ea1789e8a6b50264e6d31665ead2280b4e817ba91dde836a52881634 + "@ui5/webcomponents-base": "npm:1.23.0" + checksum: 10c0/1e6e7a97e5a86adb5ef36209c575cc65a7518ac2e2edde86a88e76782733f491ba6bd5508f720271128ab673ec7529671bbf15c7965d70d4625a31d61a5e8798 languageName: node linkType: hard -"@ui5/webcomponents-icons@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents-icons@npm:1.22.0" +"@ui5/webcomponents-icons@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents-icons@npm:1.23.0" dependencies: - "@ui5/webcomponents-base": "npm:1.22.0" - checksum: 10c0/8df3da54b61ad643da665663dbd033270795c0842845a60d709f00b2c45b2cbe2f074e0222dc82f4e6cdd0558d780bc9acf5878325e4fe6421df721fc2dba476 + "@ui5/webcomponents-base": "npm:1.23.0" + checksum: 10c0/c2d016d50edac35688d4adbb7fb15586a7fd13ba238a215681491dd24be36c0ca02011873118f448c4e0d5251c6c06c847fbb822f561c8c7add6a750b9407fec languageName: node linkType: hard -"@ui5/webcomponents-localization@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents-localization@npm:1.22.0" +"@ui5/webcomponents-localization@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents-localization@npm:1.23.0" dependencies: "@types/openui5": "npm:^1.113.0" - "@ui5/webcomponents-base": "npm:1.22.0" - checksum: 10c0/d436dd4f76030ccb3801c50ac147df3766a25545d19d8912814030cf4de042ac41935ef672fca5532c1cba7891dd8073d93cdf8a27defa5cfce8eabb2e5ae965 + "@ui5/webcomponents-base": "npm:1.23.0" + checksum: 10c0/e00e85006ea6e9667b37743973d4b553c605746e80a67cf5ad0591ba140ed282ffd391d3bb8997a266f267eb4a86b87ada20513c614d4bf0173429a3e587acc4 languageName: node linkType: hard @@ -6957,7 +6957,7 @@ __metadata: resolution: "@ui5/webcomponents-react-base@workspace:packages/base" peerDependencies: "@types/react": "*" - "@ui5/webcomponents-base": ~1.22.0 + "@ui5/webcomponents-base": ~1.23.0 react: ^16.14.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: "@types/react": @@ -6977,8 +6977,8 @@ __metadata: react-content-loader: "npm:6.2.1" recharts: "npm:2.12.2" peerDependencies: - "@ui5/webcomponents-react": ~1.25.0 - "@ui5/webcomponents-react-base": ~1.25.0 + "@ui5/webcomponents-react": ~1.26.0 + "@ui5/webcomponents-react-base": ~1.26.0 react: ^16.14.0 || ^17.0.0 || ^18.0.0 react-jss: ^10.10.0 languageName: unknown @@ -7007,10 +7007,10 @@ __metadata: peerDependencies: "@types/react": "*" "@types/react-dom": "*" - "@ui5/webcomponents": ~1.22.0 - "@ui5/webcomponents-base": ~1.22.0 - "@ui5/webcomponents-fiori": ~1.22.0 - "@ui5/webcomponents-icons": ~1.22.0 + "@ui5/webcomponents": ~1.23.0 + "@ui5/webcomponents-base": ~1.23.0 + "@ui5/webcomponents-fiori": ~1.23.0 + "@ui5/webcomponents-icons": ~1.23.0 react: ^16.14.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -7025,19 +7025,19 @@ __metadata: languageName: unknown linkType: soft -"@ui5/webcomponents-theming@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents-theming@npm:1.22.0" +"@ui5/webcomponents-theming@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents-theming@npm:1.23.0" dependencies: - "@sap-theming/theming-base-content": "npm:11.10.0" - "@ui5/webcomponents-base": "npm:1.22.0" - checksum: 10c0/45c5e5325d23bf302ce6dc4686dfbd218321515b373d280f485c616eccc842c7a3f62b432b2c736e3d41cc6dee4535e2733c89395638e6006dff9506c139f607 + "@sap-theming/theming-base-content": "npm:11.12.0" + "@ui5/webcomponents-base": "npm:1.23.0" + checksum: 10c0/579b7274bcb4046a03c6d42b9a1cc00106976cc435ed73356b0e7b880e7994b062dfedf4326968dbb46737efb1a272845fdce4d0f0782f2a53162a3ab5fc88f9 languageName: node linkType: hard -"@ui5/webcomponents-tools@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents-tools@npm:1.22.0" +"@ui5/webcomponents-tools@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents-tools@npm:1.23.0" dependencies: "@custom-elements-manifest/analyzer": "npm:^0.8.4" "@typescript-eslint/eslint-plugin": "npm:^6.9.0" @@ -7092,21 +7092,21 @@ __metadata: bin: wc-create-ui5-element: bin/create-ui5-element.js wc-dev: bin/dev.js - checksum: 10c0/6513708589a888614f94260ba01c938cf24483e314aaf6db4b34016ccf74ea1c513f8b284b44cb809e1a7053cceffb0a083fe5e4ac5b88478876420765347c29 + checksum: 10c0/b3b0f22d00bac3a20ce24f0b9a45bff4aa744eed3cbd16baa50c7c8d32e0a2ef09751c1a8220848d5896782b714992c9638466dc17b2b8fce18e351e063c5628 languageName: node linkType: hard -"@ui5/webcomponents@npm:1.22.0": - version: 1.22.0 - resolution: "@ui5/webcomponents@npm:1.22.0" +"@ui5/webcomponents@npm:1.23.0": + version: 1.23.0 + resolution: "@ui5/webcomponents@npm:1.23.0" dependencies: - "@ui5/webcomponents-base": "npm:1.22.0" - "@ui5/webcomponents-icons": "npm:1.22.0" - "@ui5/webcomponents-icons-business-suite": "npm:1.22.0" - "@ui5/webcomponents-icons-tnt": "npm:1.22.0" - "@ui5/webcomponents-localization": "npm:1.22.0" - "@ui5/webcomponents-theming": "npm:1.22.0" - checksum: 10c0/cff1ff29c461d2925b846b41625319bc0622fd513368c0e4f5f9af24368b8631679a657eb7461657b9fffa104830ca21f650a2a622c1d23087e5c1e440dd2f27 + "@ui5/webcomponents-base": "npm:1.23.0" + "@ui5/webcomponents-icons": "npm:1.23.0" + "@ui5/webcomponents-icons-business-suite": "npm:1.23.0" + "@ui5/webcomponents-icons-tnt": "npm:1.23.0" + "@ui5/webcomponents-localization": "npm:1.23.0" + "@ui5/webcomponents-theming": "npm:1.23.0" + checksum: 10c0/3fbbf824ee3f2505fb53a42214150be35488749bd5c51065d6e155481933c718724a6c7a99faefeb726169a5bea3e447bf36c86cd96ec50a9de2b4b072f95321 languageName: node linkType: hard @@ -22727,10 +22727,10 @@ __metadata: "@types/turndown": "npm:^5.0.4" "@typescript-eslint/eslint-plugin": "npm:^7.0.0" "@typescript-eslint/parser": "npm:^7.0.0" - "@ui5/webcomponents": "npm:1.22.0" - "@ui5/webcomponents-fiori": "npm:1.22.0" - "@ui5/webcomponents-icons": "npm:1.22.0" - "@ui5/webcomponents-tools": "npm:1.22.0" + "@ui5/webcomponents": "npm:1.23.0" + "@ui5/webcomponents-fiori": "npm:1.23.0" + "@ui5/webcomponents-icons": "npm:1.23.0" + "@ui5/webcomponents-tools": "npm:1.23.0" "@vitejs/plugin-react": "npm:^4.2.0" chromatic: "npm:^11.0.0" cssnano: "npm:^6.0.1" From 44d703aa2d12f5adb848ed9dbb6284d8b9859ec8 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 7 Mar 2024 08:33:46 +0100 Subject: [PATCH 02/10] Update version-info.json --- scripts/web-component-wrappers/version-info.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/scripts/web-component-wrappers/version-info.json b/scripts/web-component-wrappers/version-info.json index 0b4b8be9d34..a9656357fa6 100644 --- a/scripts/web-component-wrappers/version-info.json +++ b/scripts/web-component-wrappers/version-info.json @@ -40,5 +40,6 @@ "1.19.0": "1.22.0", "1.20.0": "1.23.0", "1.21.0": "1.24.0", - "1.22.0": "1.25.0" + "1.22.0": "1.25.0", + "1.23.0": "1.26.0" } From 7fd9648a17a01294b40d5f7f6ec2d5e740efc517 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Thu, 7 Mar 2024 08:35:58 +0100 Subject: [PATCH 03/10] update CEMs --- .../custom-element-manifests/fiori.json | 417 ++-- .storybook/custom-element-manifests/main.json | 2000 ++++++++++++----- 2 files changed, 1630 insertions(+), 787 deletions(-) diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json index a4af6f91219..abf37762778 100644 --- a/.storybook/custom-element-manifests/fiori.json +++ b/.storybook/custom-element-manifests/fiori.json @@ -200,7 +200,7 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Automatically decides the Illustration size (Base, Spot,\nDialog, or Scene) depending on the IllustratedMessage container width.\n\nNote: Auto is the only option where the illustration size is changed according to\nthe available container width. If any other IllustratedMessageSize is chosen, it remains\nuntil changed by the app developer.", + "description": "Automatically decides the Illustration size (Base, Dot, Spot,\nDialog, or Scene) depending on the IllustratedMessage container width.\n\n**Note:** `Auto` is the only option where the illustration size is changed according to\nthe available container width. If any other `IllustratedMessageSize` is chosen, it remains\nuntil changed by the app developer.", "default": "Auto", "name": "Auto", "readonly": true @@ -209,11 +209,20 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Base Illustration size (XS breakpoint). Suitable for cards (two columns).\n\nNote: When Base is in use, no illustration is displayed.", + "description": "Base `Illustration` size (XS breakpoint). Suitable for cards (two columns).\n\n**Note:** When `Base` is in use, no illustration is displayed.", "default": "Base", "name": "Base", "readonly": true }, + { + "kind": "field", + "static": true, + "privacy": "public", + "description": "Dot Illustration size (XS breakpoint). Suitable for table rows.", + "default": "Dot", + "name": "Dot", + "readonly": true + }, { "kind": "field", "static": true, @@ -227,7 +236,7 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Dialog Illustration size (M breakpoint). Suitable for dialogs.", + "description": "Dialog `Illustration` size (M breakpoint). Suitable for dialogs.", "default": "Dialog", "name": "Dialog", "readonly": true @@ -236,7 +245,7 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Scene Illustration size (L breakpoint). Suitable for a Page or a table.", + "description": "Scene `Illustration` size (L breakpoint). Suitable for a `Page` or a table.", "default": "Scene", "name": "Scene", "readonly": true @@ -1231,14 +1240,14 @@ { "kind": "enum", "name": "MediaGalleryItemLayout", - "description": "Defines the layout of the content displayed in the ui5-media-gallery-item.", + "description": "Defines the layout of the content displayed in the `ui5-media-gallery-item`.", "_ui5privacy": "public", "members": [ { "kind": "field", "static": true, "privacy": "public", - "description": "Recommended to use when the item contains an image.
\nWhen a thumbnail is selected, it makes the corresponding enlarged content appear in a square display area.", + "description": "Recommended to use when the item contains an image.\n\nWhen a thumbnail is selected, it makes the corresponding enlarged content appear in a square display area.", "default": "Square", "name": "Square", "readonly": true @@ -1247,7 +1256,7 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Recommended to use when the item contains video content.
\nWhen a thumbnail is selected, it makes the corresponding enlarged content appear in a wide display area\n(stretched to fill all of the available width) for optimal user experiance.", + "description": "Recommended to use when the item contains video content.\n\nWhen a thumbnail is selected, it makes the corresponding enlarged content appear in a wide display area\n(stretched to fill all of the available width) for optimal user experiance.", "default": "Wide", "name": "Wide", "readonly": true @@ -1273,7 +1282,7 @@ { "kind": "enum", "name": "MediaGalleryLayout", - "description": "Defines the layout type of the thumbnails list of the ui5-media-gallery component.", + "description": "Defines the layout type of the thumbnails list of the `ui5-media-gallery` component.", "_ui5privacy": "public", "members": [ { @@ -1324,7 +1333,7 @@ { "kind": "enum", "name": "MediaGalleryMenuHorizontalAlign", - "description": "Defines the horizontal alignment of the thumbnails menu of the ui5-media-gallery component.", + "description": "Defines the horizontal alignment of the thumbnails menu of the `ui5-media-gallery` component.", "_ui5privacy": "public", "members": [ { @@ -1366,7 +1375,7 @@ { "kind": "enum", "name": "MediaGalleryMenuVerticalAlign", - "description": "Types for the vertical alignment of the thumbnails menu of the ui5-media-gallery component.", + "description": "Types for the vertical alignment of the thumbnails menu of the `ui5-media-gallery` component.", "_ui5privacy": "public", "members": [ { @@ -1791,14 +1800,14 @@ { "kind": "enum", "name": "WizardContentLayout", - "description": "Enumeration for different content layouts of the ui5-wizard.", + "description": "Enumeration for different content layouts of the `ui5-wizard`.", "_ui5privacy": "public", "members": [ { "kind": "field", "static": true, "privacy": "public", - "description": "Display the content of the ui5-wizard as multiple steps in a scroll section.", + "description": "Display the content of the `ui5-wizard` as multiple steps in a scroll section.", "default": "MultipleSteps", "name": "MultipleSteps", "readonly": true @@ -1807,7 +1816,7 @@ "kind": "field", "static": true, "privacy": "public", - "description": "Display the content of the ui5-wizard as single step.", + "description": "Display the content of the `ui5-wizard` as single step.", "default": "SingleStep", "name": "SingleStep", "readonly": true @@ -1850,7 +1859,7 @@ "declarations": [ { "kind": "class", - "description": "

Overview

\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n

Usage

\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n
\nNote: Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n

Responsive Behavior

\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\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:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n

\n\n

ES6 Module Import

\n\nimport \"@ui5/webcomponents-fiori/dist/Bar.js\";", + "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\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/Bar.js\";`", "name": "Bar", "cssParts": [ { @@ -1941,7 +1950,7 @@ "declarations": [ { "kind": "class", - "description": "

Overview

\n\nThe BarcodeScannerDialog component provides barcode scanning functionality for all devices that support the MediaDevices.getUserMedia() native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n
\n
\nA scanSuccess event fires whenever a barcode is identified\nand a scanError event fires when the scan failed (for example, due to missing permisions).\n
\n
\nInternally, the component uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the zxing-js/library documentation.", + "description": "### Overview\n\nThe `BarcodeScannerDialog` component provides barcode scanning functionality for all devices that support the `MediaDevices.getUserMedia()` native API.\nOpening the dialog launches the device camera and scans for known barcode formats.\n\nA `scanSuccess` event fires whenever a barcode is identified\nand a `scanError` event fires when the scan failed (for example, due to missing permisions).\n\nInternally, the component uses the zxing-js/library third party OSS.\n\nFor a list of supported barcode formats, see the [zxing-js/library](https://github.com/zxing-js/library) documentation.", "name": "BarcodeScannerDialog", "members": [ { @@ -2063,7 +2072,7 @@ "declarations": [ { "kind": "class", - "description": "

Overview

\n\nThe DynamicSideContent (ui5-dynamic-side-content) is a layout component that allows additional content\nto be displayed in a way that flexibly adapts to different screen sizes. The side\ncontent appears in a container next to or directly below the main content\n(it doesn't overlay). When the side content is triggered, the main content becomes\nnarrower (if appearing side-by-side). The side content contains a separate scrollbar\nwhen appearing next to the main content.\n\n\n

Usage

\n\nWhen to use?\n\nUse this component if you want to display relevant information that is not critical\nfor users to complete a task. Users should have access to all the key functions and\ncritical information in the app even if they do not see the side content. This is\nimportant because on smaller screen sizes it may be difficult to display the side\ncontent in a way that is easily accessible for the user.\n\nWhen not to use?\n\nDon't use it if you want to display navigation or critical information that prevents\nusers from completing a task when they have no access to the side content.\n\n\n

Responsive Behavior

\n\nScreen width > 1440px\n\n
  • Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\neach).
    • \n
  • If the application defines a trigger, the side content can be hidden.
\n\nScreen width <= 1440px and > 1024px\n\n
  • Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n320px each). If the side content width falls below 320 px, it automatically slides\nunder the main content, unless the app development team specifies that it should\ndisappear.
\n\nScreen width <= 1024px and > 720px\n\n
  • The side content ratio is fixed to 340px, and the main content takes the rest\nof the width. Only if the sideContentFallDown is set to OnMinimumWidth\nand screen width is <= 960px and > 720px the side content falls below the main content.
\n\nScreen width <= 720px (for example on a mobile device)\n\n
  • In this case, the side content automatically disappears from the screen (unless\nspecified to stay under the content by setting of sideContentVisibility\nproperty to AlwaysShow) and can be triggered from a pre-set trigger\n(specified within the app). When the side content is triggered, it replaces the main\ncontent. We recommend that you always place the trigger for the side content in the\nsame location, such as in the app footer.
\n\nA special case allows switching the comparison mode between the main and side content.\nIn this case, the screen is split into 50:50 percent for main vs. side content. The\nresponsive behavior of the equal split is the same as in the standard view - the\nside content disappears on screen widths of less than 720 px and can only be\nviewed by triggering it.\n\n

ES6 Module Import

\n\nimport \"@ui5/webcomponents-fiori/dist/DynamicSideContent\";", + "description": "### Overview\n\nThe DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\nto be displayed in a way that flexibly adapts to different screen sizes. The side\ncontent appears in a container next to or directly below the main content\n(it doesn't overlay). When the side content is triggered, the main content becomes\nnarrower (if appearing side-by-side). The side content contains a separate scrollbar\nwhen appearing next to the main content.\n\n### Usage\n\n*When to use?*\n\nUse this component if you want to display relevant information that is not critical\nfor users to complete a task. Users should have access to all the key functions and\ncritical information in the app even if they do not see the side content. This is\nimportant because on smaller screen sizes it may be difficult to display the side\ncontent in a way that is easily accessible for the user.\n\n*When not to use?*\n\nDon't use it if you want to display navigation or critical information that prevents\nusers from completing a task when they have no access to the side content.\n\n### Responsive Behavior\n\nScreen width \\> 1440px\n\n- Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\neach).\n- If the application defines a trigger, the side content can be hidden.\n\nScreen width \\<\\= 1440px and \\> 1024px\n\n- Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n320px each). If the side content width falls below 320 px, it automatically slides\nunder the main content, unless the app development team specifies that it should\ndisappear.\n\nScreen width \\<\\= 1024px and \\> 720px\n\n- The side content ratio is fixed to 340px, and the main content takes the rest\nof the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\nand screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n\nScreen width \\<\\= 720px (for example on a mobile device)\n\n- In this case, the side content automatically disappears from the screen (unless\nspecified to stay under the content by setting of `sideContentVisibility`\nproperty to `AlwaysShow`) and can be triggered from a pre-set trigger\n(specified within the app). When the side content is triggered, it replaces the main\ncontent. We recommend that you always place the trigger for the side content in the\nsame location, such as in the app footer.\n\nA special case allows switching the comparison mode between the main and side content.\nIn this case, the screen is split into 50:50 percent for main vs. side content. The\nresponsive behavior of the equal split is the same as in the standard view - the\nside content disappears on screen widths of less than 720 px and can only be\nviewed by triggering it.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`", "name": "DynamicSideContent", "slots": [ { @@ -2119,7 +2128,7 @@ } ] }, - "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).\n\n

\nThe available values are:\n\n
    \n
  • Start
    • \n
  • End
    • \n
", + "description": "Defines whether the side content is positioned before the main content (left side\nin LTR mode), or after the the main content (right side in LTR mode).", "default": "\"End\"", "privacy": "public", "_ui5validator": "SideContentPosition" @@ -2137,7 +2146,7 @@ } ] }, - "description": "Defines on which breakpoints the side content is visible.\n\n

\nThe available values are:\n\n
    \n
  • AlwaysShow
    • \n
  • ShowAboveL
    • \n
  • ShowAboveM
    • \n
  • ShowAboveS
    • \n
  • NeverShow
    • \n
", + "description": "Defines on which breakpoints the side content is visible.", "default": "\"ShowAboveS\"", "privacy": "public", "_ui5validator": "SideContentVisibility" @@ -2155,7 +2164,7 @@ } ] }, - "description": "Defines on which breakpoints the side content falls down below the main content.\n\n

\nThe available values are:\n\n
    \n
  • BelowXL
    • \n
  • BelowL
    • \n
  • BelowM
    • \n
  • OnMinimumWidth
    • \n
", + "description": "Defines on which breakpoints the side content falls down below the main content.", "default": "\"OnMinimumWidth\"", "privacy": "public", "_ui5validator": "SideContentFallDown" @@ -2270,12 +2279,12 @@ "declarations": [ { "kind": "class", - "description": "

Overview

\n\n

Usage

\n\nFor the ui5-filter-item\n

ES6 Module Import

\n\nimport @ui5/webcomponents-fiori/dist/FilterItem.js\";", + "description": "### Overview\n\n### Usage\n\nFor the `ui5-filter-item`\n### ES6 Module Import\n\n`import @ui5/webcomponents-fiori/dist/FilterItem.js\";`", "name": "FilterItem", "slots": [ { "name": "values", - "description": "Defines the values list.", + "description": "Defines the `values` list.", "_ui5type": { "text": "Array", "references": [ @@ -2350,7 +2359,7 @@ "declarations": [ { "kind": "class", - "description": "

Overview

\n\n\n

Usage

\n\nFor the ui5-filter-item-option\n

ES6 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\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

\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:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"
    • \n
\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:\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
\nimport \"@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
\nimport \"@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
    \n
  • Illustration
    • \n
  • Title
    • \n
  • Subtitle
    • \n
  • Actions
    • \n
\n\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\n

ES6 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 & string" @@ -2711,7 +2720,7 @@ }, { "name": "subtitle", - "description": "Defines the subtitle of the component.\n

\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" @@ -2742,7 +2751,7 @@ "type": { "text": "string" }, - "description": "Defines the illustration name that will be displayed in the component.\n
\nExample:\n
\nname='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
\nname='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
\nimport \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\";\n
\n
\nFor TNT illustrations:\n
\nimport \"@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\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\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\n

ES6 Module Import

\nimport \"@ui5/webcomponents-fiori/dist/MediaGallery\";\n
\nimport \"@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": "Array", @@ -2889,7 +2898,7 @@ "type": { "text": "boolean" }, - "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.", + "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

\nThe ui5-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

\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
    \n
  • [SPACE/ENTER/RETURN] - Trigger ui5-click event
    • \n
\n\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
    • \n
  • Wide
    • \n
", + "description": "Determines the layout of the item container.", "default": "\"Square\"", "privacy": "public", "_ui5validator": "MediaGalleryItemLayout" @@ -3145,7 +3154,7 @@ "declarations": [ { "kind": "class", - "description": "The 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\nIcon Explorer.", + "description": "Defines the `icon` source URI.\n\n**Note:**\nSAP-icons font provides numerous built-in icons. To find all the available icons, see the\n[Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -3253,12 +3262,12 @@ "declarations": [ { "kind": "class", - "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
\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\n

Usage

\nThe component can be used in a standard ui5-list.\n\n

ES6 Module Import

\n\nimport \"@ui5/webcomponents/dist/NotificationListGroupItem.js\";\n
\nimport \"@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", @@ -3274,7 +3283,7 @@ }, { "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": "Array", "references": [ @@ -3306,7 +3315,7 @@ "type": { "text": "boolean" }, - "description": "Defines if the items counter 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

\nThe ui5-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 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\n

Usage

\nThe component can be used in a standard ui5-list.\n\n

ES6 Module Import

\n\nimport \"@ui5/webcomponents/dist/NotificationListItem.js\";\n
\nimport \"@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 - ``.", "_ui5type": { "text": "Array" }, @@ -3523,7 +3532,7 @@ }, { "name": "default", - "description": "Defines the content of the 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" @@ -3532,7 +3541,7 @@ }, { "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": "Array", "references": [ @@ -3560,7 +3569,7 @@ } ] }, - "description": "Defines if the titleText 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": "Array", "references": [ @@ -3769,7 +3778,7 @@ "type": { "text": "string" }, - "description": "Defines the titleText 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\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\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\n

ES6 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\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\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
    \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\n

ES6 Module Import

\nimport \"@ui5/webcomponents-fiori/dist/ProductSwitch.js\";\n
\nimport \"@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": "Array", @@ -4090,7 +4099,7 @@ "declarations": [ { "kind": "class", - "description": "

Overview

\nThe ui5-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

\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
    \n
  • [SPACE/ENTER/RETURN] - Trigger ui5-click event
    • \n
\n\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 Icon Explorer.", + "description": "Defines the icon to be displayed as a graphical element within the component.\n\nExample:\n\n``\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -4134,7 +4143,7 @@ "type": { "text": "string" }, - "description": "Defines a target where the targetSrc content must be open.\n

\nAvailable options are:\n
    \n
  • _self
    • \n
  • _top
    • \n
  • _blank
    • \n
  • _parent
    • \n
  • _search
    • \n
", + "description": "Defines a target where the `targetSrc` content must be open.\n\nAvailable options are:\n\n- `_self`\n- `_top`\n- `_blank`\n- `_parent`\n- `_search`", "default": "\"_self\"", "privacy": "public", "_ui5validator": "String" @@ -4158,7 +4167,7 @@ "type": { "text": "CustomEvent" }, - "description": "Fired when the 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\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\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\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:\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 ``.", "_ui5propertyName": "items", "_ui5type": { "text": "Array", @@ -4231,7 +4240,7 @@ }, { "name": "profile", - "description": "You can pass ui5-avatar to set the profile image/icon.\nIf no profile slot is set - profile will be excluded from actions.\n\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": "Array" @@ -4240,7 +4249,7 @@ }, { "name": "logo", - "description": "Defines the logo of the ui5-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" @@ -4249,7 +4258,7 @@ }, { "name": "menuItems", - "description": "Defines the items displayed in menu after a click on the primary title.\n

\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 `` and its ancestors.", "_ui5since": "0.10", "_ui5type": { "text": "Array", @@ -4265,7 +4274,7 @@ }, { "name": "searchField", - "description": "Defines 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": "Array", "references": [ @@ -4301,7 +4310,7 @@ "type": { "text": "string" }, - "description": "Defines the primaryTitle.\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.\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.", + "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.\n
Note: 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\t
    • false
      • \n\t\t
    \n\t\t
    • \n\t\t
  • hasPopup: 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\t
    • Grid
      • \n\t\t\t
    • ListBox
      • \n\t\t\t
    • Menu
      • \n\t\t\t
    • Tree
      • \n\t\t\t
    \n\t\t
    • \n
", + "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- `expanded`: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n\n- `true`\n- `false`\n\n- `hasPopup`: 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- `Dialog`\n- `Grid`\n- `ListBox`\n- `Menu`\n- `Tree`", "default": "{}", "privacy": "public", "_ui5since": "1.10.0", @@ -4446,7 +4455,7 @@ "type": { "text": "HTMLElement | null" }, - "description": "Returns the 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\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\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:\nimport \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"\n

\n\n

ES6 Module Import

\n\nimport \"@ui5/webcomponents-fiori/dist/SideNavigation.js\";\n
\nimport \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\"; (for ui5-side-navigation-item)\n
\nimport \"@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": "Array", @@ -4835,7 +4844,7 @@ }, { "name": "header", - "description": "Defines the header of the ui5-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": "Array" @@ -4844,7 +4853,7 @@ }, { "name": "fixedItems", - "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\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": "Array", "references": [ @@ -4865,7 +4874,7 @@ "type": { "text": "boolean" }, - "description": "Defines whether the ui5-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\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\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": "Array", @@ -4980,7 +4989,7 @@ "type": { "text": "boolean" }, - "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.", + "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 Icon Explorer.", + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "\"\"", "_ui5validator": "String", @@ -5037,7 +5046,7 @@ "type": { "text": "string" }, - "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.", + "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
\n\nThis property must only be used when the 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 Icon Explorer.", + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "\"\"", "_ui5validator": "String" @@ -5173,7 +5182,7 @@ "type": { "text": "string" }, - "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.", + "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
\n\nThis property must only be used when the 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\nThe ui5-side-navigation-sub-item is intended to be used inside a ui5-side-navigation-item only.\n\n

ES6 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 Icon Explorer.", + "description": "Defines the icon of the item.\n\nThe SAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "privacy": "public", "default": "\"\"", "_ui5validator": "String", @@ -5306,7 +5315,7 @@ "type": { "text": "string" }, - "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.", + "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
\n\nThis property must only be used when the 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\n

Usage

\n\nFor the ui5-sort-item\n

ES6 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\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.", + "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", @@ -5493,7 +5502,7 @@ } ] }, - "description": "Defines the items orientation.\n\n

\nNote:\nAvailable options are:\n
    \n
  • Vertical
    • \n
  • Horizontal
    • \n
", + "description": "Defines the items orientation.", "default": "\"Vertical\"", "privacy": "public", "_ui5since": "1.0.0-rc.15", @@ -5548,11 +5557,11 @@ "declarations": [ { "kind": "class", - "description": "

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 the ui5-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 Icon Explorer.", + "description": "Defines the icon to be displayed as graphical element within the `ui5-timeline-item`.\nSAP-icons font provides numerous options.\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -5578,7 +5587,7 @@ "type": { "text": "string" }, - "description": "Defines the name of the item, displayed before 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 of ui5-upload-collection-item.\nIt also allows you to show already uploaded files.\n\n

ES6 Module Import

\nimport \"@ui5/webcomponents-fiori/dist/UploadCollection.js\";\n
\nimport \"@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.\n
Note: 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": "Array", @@ -5696,7 +5705,7 @@ }, { "name": "header", - "description": "Defines the ui5-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": "Array" }, @@ -5717,7 +5726,7 @@ } ] }, - "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", + "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 the ui5-upload-collection.\n\n

ES6 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": "Array" }, @@ -5885,7 +5894,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": "Array", @@ -5907,7 +5916,7 @@ "type": { "text": "File | null | undefined" }, - "description": "Holds an instance of File 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 each aria-setsize is an integer reflecting number of items in the complete set.\n\t\tNote: If the size of the entire set is unknown, set aria-setsize=\"-1\".\n\t\t
    • \n\t\t
  • ariaPosinset: 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 each aria-posinset is 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
", + "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- `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\tThe value of each `aria-setsize` is an integer reflecting number of items in the complete set.\n\n\t**Note:** If the size of the entire set is unknown, set `aria-setsize=\"-1\"`.\n\t- `ariaPosinset`: 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\tThe value of each `aria-posinset` is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", "default": "{}", "privacy": "public", "_ui5since": "1.15.0", @@ -6051,19 +6060,31 @@ "type": { "text": "boolean" }, - "description": "The navigated state of the list item.\nIf set to 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

\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

\nui5-view-settings-dialog stretches on full screen on phones.\n\n

ES6 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": "Array", "references": [ @@ -6178,7 +6199,7 @@ }, { "name": "filterItems", - "description": "Defines the filterItems 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": "Array", "references": [ @@ -6240,7 +6261,7 @@ "_ui5privacy": "public" } ], - "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:
\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\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\nNote: If no selected step is defined, the first step will be auto selected.\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
\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:\nimport \"@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\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\n

Moving to next step

\nThe ui5-wizard-step provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its selected property (and remove the disabled one if set) to true.\nThe ui5-wizard will automatically scroll to the content of the newly selected step.\n

\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the ui5-wizard-step,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n

Usage

\n

When to use:

\nWhen the user has to accomplish a long or unfamiliar task.\n\n

When not to use:

\nWhen the task has less than 3 steps.\n\n

Responsive Behavior

\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n

ES6 Module Import

\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\n\n\t\n\n```\n\n#### Moving to next step\nThe `ui5-wizard-step` provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its `selected` property (and remove the `disabled` one if set) to `true`.\nThe `ui5-wizard` will automatically scroll to the content of the newly selected step.\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the `ui5-wizard-step`,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n### Usage\n#### When to use:\nWhen the user has to accomplish a long or unfamiliar task.\n\n#### When not to use:\nWhen the task has less than 3 steps.\n\n### Responsive Behavior\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/Wizard.js\";` (includes )", "name": "Wizard", "cssParts": [ { - "description": "Used to style the progress navigator of the ui5-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": "Array", @@ -6448,7 +6469,7 @@ } ] }, - "description": "Defines how the content of the ui5-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 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\n

Usage

\nThe ui5-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 Icon Explorer.", + "description": "Defines the `icon` of the step.\n\n**Note:** The icon is displayed in the `ui5-wizard` navigation header.\n\nThe SAP-icons font provides numerous options.\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -6602,7 +6623,7 @@ "type": { "text": "boolean" }, - "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\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 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

\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 `` tag\n\n**Note:** If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:", "_ui5since": "1.0.0-rc.15", "_ui5propertyName": "image", "_ui5type": { @@ -2813,7 +3088,7 @@ }, { "name": "badge", - "description": "Defines the optional badge that will be used for visual affordance.\nNote: While the slot allows for custom badges, to achieve\nthe Fiori design, please use 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\n\n\n\n", + "description": "Defines the optional badge that will be used for visual affordance.\n\n**Note:** While the slot allows for custom badges, to achieve\nthe Fiori design, please use `ui5-badge` with `ui5-icon`\nin the corresponding `icon` slot, without text nodes.", "_ui5since": "1.7.0", "_ui5type": { "text": "Array" @@ -2839,7 +3114,7 @@ "type": { "text": "boolean" }, - "description": "Defines if the avatar is interactive (focusable and pressable).\nNote: This property won't have effect if the 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 Icon Explorer.", + "description": "Defines the name of the UI5 Icon, that will be displayed.\n\n**Note:** If `image` slot is provided, the property will be ignored.\n\n**Note:** You should import the desired icon first, then use its name as \"icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n``\n\n**Note:** 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 [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -2861,7 +3136,7 @@ "type": { "text": "string" }, - "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n
    \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
\n\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 Icon Explorer.", + "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\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\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n``\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -2872,7 +3147,7 @@ "type": { "text": "string" }, - "description": "Defines the displayed initials.\n
\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\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\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
\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\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
\ntype 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-click event
    • \n
\n
\ntype Group:\n
\n
    \n
  • [TAB] - Move focus to the next interactive element after the component
    • \n
  • [SPACE],[ENTER],[RETURN] - Trigger ui5-click event
    • \n
\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", @@ -3014,7 +3289,7 @@ }, { "name": "overflowButton", - "description": "Defines the overflow button of the component.\nNote: We recommend using the 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", @@ -3043,7 +3318,7 @@ } ] }, - "description": "Defines the mode of the 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\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\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.\n
Note: 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" @@ -3211,7 +3486,7 @@ "description": "Defines the design type of the component.", "default": "\"Set3\"", "privacy": "public", - "_ui5since": "1.20", + "_ui5since": "1.22.0", "_ui5validator": "String" }, { @@ -3220,7 +3495,7 @@ "type": { "text": "string" }, - "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

\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.\n
Note: 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

\nThe ui5-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-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.
    • \n
\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", @@ -3350,7 +3625,7 @@ } ] }, - "description": "Defines the visual indication and behavior of the breadcrumbs.\n

\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\nThe ui5-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" @@ -3490,7 +3765,7 @@ "type": { "text": "string" }, - "description": "Defines the link href.\n

\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
\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\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
\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\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\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\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\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\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\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\n

ES6 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" @@ -3718,7 +3993,7 @@ "type": { "text": "string" }, - "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n

\nExample:\n\nSee all the available icons within the Icon Explorer.", + "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).", "default": "\"\"", "privacy": "public", "_ui5validator": "String" @@ -3740,7 +4015,7 @@ "type": { "text": "boolean" }, - "description": "When set to 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\t
    • false
      • \n\t\t
    \n\t\t
    • \n\t\t
  • hasPopup: 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\t
    • Grid
      • \n\t\t\t
    • Listbox
      • \n\t\t\t
    • Menu
      • \n\t\t\t
    • Tree
      • \n\t\t\t
    \n\t\t
    • \n\t\t
  • controls: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.
    • \n
", + "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- `expanded`: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n- `true`\n- `false`\n\n- `hasPopup`: 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- `Dialog`\n- `Grid`\n- `ListBox`\n- `Menu`\n- `Tree`\n\n- `controls`: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.", "privacy": "public", "default": "{}", "_ui5since": "1.2.0", @@ -3814,11 +4089,30 @@ } ] }, - "description": "Defines whether the button has special form-related functionality.\n\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\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\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
\n
\nThe user can confirm a date selection by pressing over a date inside the days view.\n

\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
\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
\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\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:\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 the primaryCalendarType property and import one or more of the following modules:\n

\n\nimport \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";\n
\nimport \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";\n
\nimport \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";\n
\nimport \"@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\n

ES6 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": "Array", + "references": [ + { + "name": "CalendarLegend", + "package": "@ui5/webcomponents", + "module": "dist/CalendarLegend.js" + } + ] + }, + "_ui5privacy": "public" + }, { "name": "default", - "description": "Defines the selected date or dates (depending on the selectionMode 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", @@ -3891,6 +4201,22 @@ ] }, "_ui5privacy": "public" + }, + { + "name": "specialDates", + "description": "Defines the special dates, visually emphasized in the calendar.", + "_ui5since": "1.23.0", + "_ui5type": { + "text": "Array", + "references": [ + { + "name": "SpecialCalendarDate", + "package": "@ui5/webcomponents", + "module": "dist/SpecialCalendarDate.js" + } + ] + }, + "_ui5privacy": "public" } ], "members": [ @@ -3907,7 +4233,7 @@ } ] }, - "description": "Defines the type of selection used in the calendar component.\nAccepted property values are:
\n
    \n
  • CalendarSelectionMode.Single - enables a single date selection.(default value)
    • \n
  • CalendarSelectionMode.Range - enables selection of a date range.
    • \n
  • CalendarSelectionMode.Multiple - enables selection of multiple dates.
    • \n
", + "description": "Defines the type of selection used in the calendar component.\nAccepted property values are:\n\n- `CalendarSelectionMode.Single` - enables a single date selection.(default value)\n- `CalendarSelectionMode.Range` - enables selection of a date range.\n- `CalendarSelectionMode.Multiple` - enables selection of multiple dates.", "default": "\"Single\"", "privacy": "public", "_ui5validator": "CalendarSelectionMode" @@ -3918,7 +4244,7 @@ "type": { "text": "boolean" }, - "description": "Defines the visibility of the week numbers column.\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\nThe ui5-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": "Array", + "references": [ + { + "name": "CalendarLegendItem", + "package": "@ui5/webcomponents", + "module": "dist/CalendarLegendItem.js" + } + ] + }, + "_ui5privacy": "public" + } + ], + "members": [ + { + "kind": "field", + "name": "hideToday", + "type": { + "text": "boolean" + }, + "description": "Hides the Today item in the legend.", + "default": "false", + "privacy": "public", + "_ui5validator": "Boolean" + }, + { + "kind": "field", + "name": "hideSelectedDay", + "type": { + "text": "boolean" + }, + "description": "Hides the Selected day item in the legend.", + "default": "false", + "privacy": "public", + "_ui5validator": "Boolean" + }, + { + "kind": "field", + "name": "hideNonWorkingDay", + "type": { + "text": "boolean" + }, + "description": "Hides the Non-Working day item in the legend.", + "default": "false", + "privacy": "public", + "_ui5validator": "Boolean" + }, + { + "kind": "field", + "name": "hideWorkingDay", + "type": { + "text": "boolean" + }, + "description": "Hides the Working day item in the legend.", + "default": "false", + "privacy": "public", + "_ui5validator": "Boolean" + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-calendar-legend", + "customElement": true, + "_ui5since": "1.23.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "CalendarLegend", + "module": "dist/CalendarLegend.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-calendar-legend", + "declaration": { + "name": "CalendarLegend", + "module": "dist/CalendarLegend.js" + } + } + ] + }, + { + "kind": "javascript-module", + "path": "dist/CalendarLegendItem.js", + "declarations": [ + { + "kind": "class", + "description": "### Overview\n\nEach `ui5-calendar-legend-item` represents a legend item, displaying a color with a label.\nThe color is determined by the `type` property and the label by the `text` property.\nIf a `ui5-special-date` is used within the `ui5-calendar` and a type is set, clicking on a `ui5-calendar-legend-item`\nwith the same type will emphasize the respective date(s) in the calendar.\n\n### Usage\nThe `ui5-calendar-legend-item` is intended to be used within the `ui5-calendar-legend` component.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/CalendarLegendItem.js\";`", + "name": "CalendarLegendItem", + "members": [ + { + "kind": "field", + "name": "text", + "type": { + "text": "string" + }, + "description": "Defines the text content of the Calendar Legend Item.", + "default": "\"\"", + "privacy": "public", + "_ui5validator": "String" + }, + { + "kind": "field", + "name": "type", + "type": { + "text": "CalendarLegendItemType", + "references": [ + { + "name": "CalendarLegendItemType", + "package": "@ui5/webcomponents", + "module": "dist/types/CalendarLegendItemType.js" + } + ] + }, + "description": "Defines the type of the Calendar Legend Item.", + "default": "\"None\"", + "privacy": "public", + "_ui5validator": "CalendarLegendItemType" + } + ], + "superclass": { + "name": "UI5Element", + "package": "@ui5/webcomponents-base", + "module": "dist/UI5Element.js" + }, + "tagName": "ui5-calendar-legend-item", + "customElement": true, + "_ui5since": "1.23.0", + "_ui5privacy": "public" + } + ], + "exports": [ + { + "kind": "js", + "name": "default", + "declaration": { + "name": "CalendarLegendItem", + "module": "dist/CalendarLegendItem.js" + } + }, + { + "kind": "custom-element-definition", + "name": "ui5-calendar-legend-item", + "declaration": { + "name": "CalendarLegendItem", + "module": "dist/CalendarLegendItem.js" + } + } + ] + }, { "kind": "javascript-module", "path": "dist/CalendarPart.js", @@ -4230,7 +4727,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", @@ -4246,7 +4743,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", @@ -4277,12 +4774,12 @@ { "kind": "interface", "name": "ICardHeader", - "description": "Interface for components that may be slotted inside ui5-card as header", + "description": "Interface for components that may be slotted inside `ui5-card` as header", "_ui5privacy": "public" }, { "kind": "class", - "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\nimport \"@ui5/webcomponents/dist/Card\";\n
\nimport \"@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": "Array", @@ -4328,7 +4825,7 @@ "type": { "text": "string" }, - "description": "Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.\nNote: accessibleName 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\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\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
\n\n

Usage

\n\n

When 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
\n\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
\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
    \n
  • [UP/DOWN] - Navigates to previous and next item
    • \n
  • [LEFT/RIGHT] - Navigates to previous and next item
    • \n
\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:\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)
    • \n
  • Numeric - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
    • \n
", + "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)\n- `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)", "default": "\"Default\"", "privacy": "public", "_ui5since": "1.10", @@ -4696,7 +5193,7 @@ } ] }, - "description": "Defines the position of arrows.\n

\nAvailable options are:\n
    \n
  • Content - the arrows are placed on the sides of the current page.
    • \n
  • Navigation - the arrows are placed on the sides of the page indicator.
    • \n
", + "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.", "default": "\"Content\"", "privacy": "public", "_ui5validator": "CarouselArrowsPlacement" @@ -4750,7 +5247,7 @@ } ] }, - "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.", + "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\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\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 the ui5-checkbox.\n
    \n
  • [SPACE, ENTER] - Toggles between different states: checked, not checked.
    • \n
\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\n When the property disabled 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
", + "description": "Defines whether the component is displayed as partially checked.\n\n**Note:** 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", "default": "false", "privacy": "public", "_ui5since": "1.0.0-rc.15", @@ -4908,7 +5405,7 @@ "type": { "text": "boolean" }, - "description": "Defines if the component is checked.\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

\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\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": "Array", @@ -5111,7 +5608,7 @@ "declarations": [ { "kind": "class", - "description": "

Overview

\n\nThe ui5-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\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\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

\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:\n
  • users need to select any color freely.
    • \n\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\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\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
      \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\n

    Keyboard Handling

    \n\nThe ui5-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
    \n\n\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" @@ -5532,7 +6029,7 @@ "type": { "text": "boolean" }, - "description": "Defines whether the component is in disabled state.\n

    \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": "Array", @@ -5919,7 +6416,7 @@ "type": { "text": "string" }, - "description": "Defines the text alternative of the component.\nNote: If not provided a default text alternative will be set, if present.", + "description": "Defines the text alternative of the component.\n\n**Note**: If not provided a default text alternative will be set, if present.", "default": "\"\"", "privacy": "public", "_ui5since": "1.0.0-rc.15", @@ -5938,7 +6435,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", @@ -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 each aria-setsize is an integer reflecting number of items in the complete set.\n\t\tNote: If the size of the entire set is unknown, set aria-setsize=\"-1\".\n\t\t
      • \n\t\t
    • ariaPosinset: 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 each aria-posinset is 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
    ", + "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- `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\tThe value of each `aria-setsize` is an integer reflecting number of items in the complete set.\n\n\t**Note:** If the size of the entire set is unknown, set `aria-setsize=\"-1\"`.\n\t- `ariaPosinset`: 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\tThe value of each `aria-posinset` is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.", "default": "{}", "privacy": "public", "_ui5since": "1.15.0", @@ -5974,13 +6471,29 @@ "kind": "field", "name": "navigated", "type": { - "text": "boolean" + "text": "boolean" + }, + "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", + "inheritedFrom": { + "name": "ListItem", + "module": "dist/ListItem.js" + } + }, + { + "kind": "field", + "name": "tooltip", + "type": { + "text": "string" }, - "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", + "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\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
    \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.\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
    \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
    \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\nimport \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";\n
    \nimport \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";\n
    \nimport \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";\n
    \nimport \"@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>
    \n\n

    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 = withWebComponent( 'ui5-calendar', ['formatPattern', 'maxDate', 'minDate', 'primaryCalendarType', 'secondaryCalendarType', 'selectionMode'], ['hideWeekNumbers'], - [], + ['calendarLegend', 'specialDates'], ['selected-dates-change'], () => import('@ui5/webcomponents/dist/Calendar.js') ); diff --git a/packages/main/src/webComponents/CalendarDate/index.tsx b/packages/main/src/webComponents/CalendarDate/index.tsx index 5af242d8834..b5e0ab70e55 100644 --- a/packages/main/src/webComponents/CalendarDate/index.tsx +++ b/packages/main/src/webComponents/CalendarDate/index.tsx @@ -6,7 +6,8 @@ import type { CommonProps, Ui5DomRef } from '../../types/index.js'; interface CalendarDateAttributes { /** - * The date formatted according to the `formatPattern` property of the `Calendar` that hosts the component. + * The date formatted according to the `formatPattern` property + * of the `Calendar` that hosts the component. */ value?: string; } diff --git a/packages/main/src/webComponents/Card/index.tsx b/packages/main/src/webComponents/Card/index.tsx index a524e11befa..bab44676aca 100644 --- a/packages/main/src/webComponents/Card/index.tsx +++ b/packages/main/src/webComponents/Card/index.tsx @@ -7,7 +7,9 @@ import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '../../types/index.j interface CardAttributes { /** - * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. **Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set. + * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card. + * + * **Note:** `accessibleName` should be always set, unless `accessibleNameRef` is set. */ accessibleName?: string; @@ -40,7 +42,15 @@ interface CardPropTypes extends CardAttributes, Omit( diff --git a/packages/main/src/webComponents/Carousel/index.tsx b/packages/main/src/webComponents/Carousel/index.tsx index 573a403018d..d328ea57c10 100644 --- a/packages/main/src/webComponents/Carousel/index.tsx +++ b/packages/main/src/webComponents/Carousel/index.tsx @@ -16,8 +16,8 @@ interface CarouselAttributes { * * Available options are: * - * * `Content` - the arrows are placed on the sides of the current page. - * * `Navigation` - the arrows are placed on the sides of the page indicator. + * - `Content` - the arrows are placed on the sides of the current page. + * - `Navigation` - the arrows are placed on the sides of the page indicator. * @default "Content" */ arrowsPlacement?: CarouselArrowsPlacement | keyof typeof CarouselArrowsPlacement; @@ -35,15 +35,18 @@ interface CarouselAttributes { cyclic?: boolean; /** - * Defines the visibility of the navigation arrows. If set to true the navigation arrows will be hidden. + * Defines the visibility of the navigation arrows. + * If set to true the navigation arrows will be hidden. * - * **Note:** The navigation arrows are never displayed on touch devices. In this case, the user can swipe to navigate through the items. + * **Note:** The navigation arrows are never displayed on touch devices. + * In this case, the user can swipe to navigate through the items. * @default false */ hideNavigationArrows?: boolean; /** - * Defines the visibility of the page indicator. If set to true the page indicator will be hidden. + * Defines the visibility of the page indicator. + * If set to true the page indicator will be hidden. * @default false */ hidePageIndicator?: boolean; @@ -79,10 +82,11 @@ interface CarouselAttributes { pageIndicatorBorderDesign?: BorderDesign | keyof typeof BorderDesign; /** - * Defines the style of the page indicator. Available options are: + * Defines the style of the page indicator. + * Available options are: * - * * `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) - * * `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y) + * - `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) + * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y) * @default "Default" */ pageIndicatorStyle?: CarouselPageIndicatorStyle | keyof typeof CarouselPageIndicatorStyle; @@ -110,42 +114,50 @@ interface CarouselPropTypes */ children?: ReactNode | ReactNode[]; /** - * Fired whenever the page changes due to user interaction, when the user clicks on the navigation arrows or while resizing, based on the `items-per-page-l`, `items-per-page-m` and `items-per-page-s` properties. + * Fired whenever the page changes due to user interaction, + * when the user clicks on the navigation arrows or while resizing, + * based on the `items-per-page-l`, `items-per-page-m` and `items-per-page-s` properties. */ onNavigate?: (event: Ui5CustomEvent) => void; } /** - * The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of images, but can hold any other HTML element. + * The Carousel allows the user to browse through a set of items. + * The component is mostly used for showing a gallery of images, but can hold any other HTML element. + * * There are several ways to perform navigation: * - * * on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts. - * * on mobile - the user can use swipe gestures. + * - on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts. + * - on mobile - the user can use swipe gestures. * * ### Usage * * #### When to use: * - * * The items you want to display are very different from each other. - * * You want to display the items one after the other. + * - The items you want to display are very different from each other. + * - You want to display the items one after the other. * * #### When not to use: * - * * The items you want to display need to be visible at the same time. - * * The items you want to display are uniform and very similar. + * - The items you want to display need to be visible at the same time. + * - The items you want to display are uniform and very similar. * * ### Keyboard Handling * * #### Basic Navigation + * When the `Carousel` is focused the user can navigate between the items + * with the following keyboard shortcuts: * - * When the `Carousel` is focused the user can navigate between the items with the following keyboard shortcuts: - * - * * \[UP/DOWN\] - Navigates to previous and next item - * * \[LEFT/RIGHT\] - Navigates to previous and next item + * - [UP/DOWN] - Navigates to previous and next item + * - [LEFT/RIGHT] - Navigates to previous and next item * * ### Fast Navigation + * 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`. + * In order to use this functionality, you need to import the following module: + * + * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"` + * * - * 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`. In order to use this functionality, you need to import the following module: `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"` * * __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/CheckBox/index.tsx b/packages/main/src/webComponents/CheckBox/index.tsx index 43ab0b42463..e2a2b954582 100644 --- a/packages/main/src/webComponents/CheckBox/index.tsx +++ b/packages/main/src/webComponents/CheckBox/index.tsx @@ -20,7 +20,9 @@ interface CheckBoxAttributes { /** * Defines if the component is checked. * - * **Note:** The property can be changed with user interaction, either by cliking/tapping on the component, or by pressing the Enter or Space key. + * **Note:** The property can be changed with user interaction, + * either by cliking/tapping on the component, or by + * pressing the Enter or Space key. * @default false */ checked?: boolean; @@ -34,7 +36,12 @@ interface CheckBoxAttributes { disabled?: boolean; /** - * Determines whether the `CheckBox` is in display only state. When set to `true`, the `CheckBox` is not interactive, not editable, not focusable and not in the tab chain. This setting is used for forms in review mode. When the property `disabled` is set to `true` this property has no effect. + * Determines whether the `CheckBox` is in display only state. + * + * When set to `true`, the `CheckBox` is not interactive, not editable, not focusable + * and not in the tab chain. This setting is used for forms in review mode. + * + * **Note:** When the property `disabled` is set to `true` this property has no effect. * @default false */ displayOnly?: boolean; @@ -42,11 +49,13 @@ interface CheckBoxAttributes { /** * Defines whether the component is displayed as partially checked. * - * **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user interaction and the resulting visual state depends on the values of the `indeterminate` and `checked` properties: + * **Note:** The indeterminate state can be set only programmatically and can’t be achieved by user + * interaction and the resulting visual state depends on the values of the `indeterminate` + * and `checked` properties: * - * * If the component is checked and indeterminate, it will be displayed as partially checked - * * If the component is checked and it is not indeterminate, it will be displayed as checked - * * If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute + * - If the component is checked and indeterminate, it will be displayed as partially checked + * - If the component is checked and it is not indeterminate, it will be displayed as checked + * - If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute * @default false */ indeterminate?: boolean; @@ -54,16 +63,20 @@ interface CheckBoxAttributes { /** * Determines the name with which the component will be submitted in an HTML form. * - * **Important:** For the `name` property to have effect, you must add the following import to your project: `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";` + * **Important:** For the `name` property to have effect, you must add the following import to your project: + * `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";` * - * **Note:** When set, a native `input` HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form. + * **Note:** When set, a native `input` HTML element + * will be created inside the component so that it can be submitted as + * part of an HTML form. Do not use this property unless you need to submit a form. */ name?: 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; @@ -87,6 +100,7 @@ interface CheckBoxAttributes { /** * Defines whether the component text wraps when there is not enough space. + * * **Note:** for option "Normal" the text will wrap and the words will not be broken based on hyphenation. * @default "None" */ @@ -105,22 +119,32 @@ interface CheckBoxPropTypes extends CheckBoxAttributes, Omitopen and opener 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 Omitopen and opener 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 {} /** - * The `ComboBoxGroupItem` is type of suggestion item, that can be used to split the `ComboBox` suggestions into groups. + * The `ComboBoxGroupItem` is type of suggestion item, + * that can be used to split the `ComboBox` suggestions into groups. * * @abstract * __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/CustomListItem/index.tsx b/packages/main/src/webComponents/CustomListItem/index.tsx index 1dbeb57373d..dff51b3fdec 100644 --- a/packages/main/src/webComponents/CustomListItem/index.tsx +++ b/packages/main/src/webComponents/CustomListItem/index.tsx @@ -9,12 +9,15 @@ import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '../ interface CustomListItemAttributes { /** - * Defines the text alternative of the component. Note: If not provided a default text alternative will be set, if present. + * Defines the text alternative of the component. + * + * **Note**: If not provided a default text alternative will be set, if present. */ accessibleName?: string; /** - * The navigated state of the list item. If set to `true`, a navigation indicator is displayed at the end of the list item. + * The navigated state of the list item. + * If set to `true`, a navigation indicator is displayed at the end of the list item. * @default false */ navigated?: boolean; @@ -26,9 +29,16 @@ interface CustomListItemAttributes { selected?: boolean; /** - * Defines the visual indication and behavior of the list items. Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`. + * Defines the text of the tooltip that would be displayed for the list item. + */ + tooltip?: string; + + /** + * Defines the visual indication and behavior of the list items. + * Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`. * - * **Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover, while with type `Inactive` and `Detail` - will not. + * **Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover, + * while with type `Inactive` and `Detail` - will not. * @default "Active" */ type?: ListItemType | keyof typeof ListItemType; @@ -36,10 +46,17 @@ interface CustomListItemAttributes { interface CustomListItemDomRef extends Required, Ui5DomRef { /** - * An object of strings that defines several additional accessibility attribute values for customization depending on the use case. It supports the following fields: + * An object of strings that defines several additional accessibility attribute values + * for customization depending on the use case. * - * * `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. The value of each `aria-setsize` is an integer reflecting number of items in the complete set. **Note:** If the size of the entire set is unknown, set `aria-setsize="-1"`. - * * `ariaPosinset`: Defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM. The value of each `aria-posinset` is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. + * It supports the following fields: + * + * - `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. + * The value of each `aria-setsize` is an integer reflecting number of items in the complete set. + * + * **Note:** If the size of the entire set is unknown, set `aria-setsize="-1"`. + * - `ariaPosinset`: Defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM. + * The value of each `aria-posinset` is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known. */ accessibilityAttributes: AccessibilityAttributes; } @@ -53,7 +70,10 @@ interface CustomListItemPropTypes children?: ReactNode | ReactNode[]; /** - * Defines the delete button, displayed in "Delete" mode. **Note:** While the slot allows custom buttons, to match design guidelines, please use the `Button` component. **Note:** When the slot is not present, a built-in delete button will be displayed. + * Defines the delete button, displayed in "Delete" mode. + * **Note:** While the slot allows custom buttons, to match + * design guidelines, please use the `Button` component. + * **Note:** When the slot is not present, a built-in delete button will be displayed. * * __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="deleteButton"`). * 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. @@ -69,13 +89,16 @@ interface CustomListItemPropTypes } /** - * A component to be used as custom list item within the `List` the same way as the standard `StandardListItem`. The component accepts arbitrary HTML content to allow full customization. + * A component to be used as custom list item within the `List` + * the same way as the standard `StandardListItem`. + * + * The component accepts arbitrary HTML content to allow full customization. * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/playground/) */ const CustomListItem = withWebComponent( 'ui5-li-custom', - ['accessibleName', 'type'], + ['accessibleName', 'tooltip', 'type'], ['navigated', 'selected'], ['deleteButton'], ['detail-click'], diff --git a/packages/main/src/webComponents/DatePicker/index.tsx b/packages/main/src/webComponents/DatePicker/index.tsx index 2ccc3da8079..285f51d9610 100644 --- a/packages/main/src/webComponents/DatePicker/index.tsx +++ b/packages/main/src/webComponents/DatePicker/index.tsx @@ -36,40 +36,51 @@ interface DatePickerAttributes { /** * Defines the visibility of the week numbers column. * - * **Note:** For calendars other than Gregorian, the week numbers are not displayed regardless of what is set. + * **Note:** For calendars other than Gregorian, + * the week numbers are not displayed regardless of what is set. * @default false */ hideWeekNumbers?: boolean; /** - * Determines the maximum date available for selection. **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd). + * Determines the maximum date available for selection. + * + * **Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd). */ maxDate?: string; /** - * Determines the minimum date available for selection. **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd). + * Determines the minimum date available for selection. + * + * **Note:** If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd). */ minDate?: string; /** * Determines the name with which the component will be submitted in an HTML form. * - * **Important:** For the `name` property to have effect, you must add the following import to your project: `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";` + * **Important:** For the `name` property to have effect, you must add the following import to your project: + * `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";` * - * **Note:** When set, a native `input` HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form. + * **Note:** When set, a native `input` HTML element + * will be created inside the component so that it can be submitted as + * part of an HTML form. Do not use this property unless you need to submit a form. */ name?: string; /** - * 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. * - * **Note:** When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern. + * **Note:** When no placeholder is set, the format pattern is displayed as a placeholder. + * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern. * @default undefined */ placeholder?: string | undefined; /** - * Sets a calendar type used for display. If not set, the calendar type of the global configuration is used. + * Sets a calendar type used for display. + * If not set, the calendar type of the global configuration is used. * @default undefined */ primaryCalendarType?: CalendarType | undefined | keyof typeof CalendarType; @@ -87,7 +98,8 @@ interface DatePickerAttributes { required?: boolean; /** - * Defines the secondary calendar type. If not set, the calendar will only show the primary calendar type. + * Defines the secondary calendar type. + * If not set, the calendar will only show the primary calendar type. * @default undefined */ secondaryCalendarType?: CalendarType | undefined | keyof typeof CalendarType; @@ -117,7 +129,8 @@ interface DatePickerDomRef extends Required, Ui5DomRef { readonly dateValue: Date | null; /** - * Formats a Java Script date object into a string representing a locale date according to the `formatPattern` property of the DatePicker instance + * Formats a Java Script date object into a string representing a locale date + * according to the `formatPattern` property of the DatePicker instance * @param {Date} date - A Java Script date object to be formatted as string * @returns {string} - The date as string */ @@ -160,7 +173,9 @@ interface DatePickerPropTypes * 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 component is in `Information`, `Warning` or `Error` value state. + * + * **Note:** The `valueStateMessage` would be displayed, + * when the component 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. @@ -180,64 +195,84 @@ interface DatePickerPropTypes onInput?: (event: Ui5CustomEvent) => void; /** - * Fired before the value state of the component is updated internally. The event is preventable, meaning that if it's default action is prevented, the component will not update the value state. + * Fired before the value state of the component is updated internally. + * The event is preventable, meaning that if it's default action is + * prevented, the component will not update the value state. */ onValueStateChange?: (event: Ui5CustomEvent) => void; } /** - * The `DatePicker` component provides an input field with assigned calendar which opens on user action. The `DatePicker` allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date input field and the date picker. + * The `DatePicker` component provides an input field with assigned calendar which opens on user action. + * The `DatePicker` allows users to select a localized date using touch, + * mouse, or keyboard input. It consists of two parts: the date input field and the + * date picker. * * ### Usage * * The user can enter a date by: * - * * Using the calendar that opens in a popup - * * Typing it in directly in the input field + * - Using the calendar that opens in a popup + * - Typing it in directly in the input field * - * - * - * When the user makes an entry and presses the enter key, the calendar shows the corresponding date. When the user directly triggers the calendar display, the actual date is displayed. + * When the user makes an entry and presses the enter key, the calendar shows the corresponding date. + * When the user directly triggers the calendar display, the actual date is displayed. * * ### Formatting * - * If a date is entered by typing it into the input field, it must fit to the used date format. + * If a date is entered by typing it into + * the input field, it must fit to the used date format. * - * Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see [UTS #35: Unicode Locale Data Markup Language](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table). + * Supported format options are pattern-based on Unicode LDML Date Format notation. + * For more information, see [UTS #35: Unicode Locale Data Markup Language](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table). * - * For example, if the `format-pattern` is "yyyy-MM-dd", a valid value string is "2015-07-30" and the same is displayed in the input. + * For example, if the `format-pattern` is "yyyy-MM-dd", + * a valid value string is "2015-07-30" and the same is displayed in the input. * * ### Keyboard Handling + * The `DatePicker` provides advanced keyboard handling. + * If the `DatePicker` is focused, + * you can open or close the drop-down by pressing `F4`, `ALT+UP` or `ALT+DOWN` keys. + * Once the drop-down is opened, you can use the `UP`, `DOWN`, `LEFT`, `RIGHT` arrow keys + * to navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can + * use TAB to reach the buttons for changing month and year. * - * The `DatePicker` provides advanced keyboard handling. If the `DatePicker` is focused, you can open or close the drop-down by pressing `F4`, `ALT+UP` or `ALT+DOWN` keys. Once the drop-down is opened, you can use the `UP`, `DOWN`, `LEFT`, `RIGHT` arrow keys to navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can use TAB to reach the buttons for changing month and year. - * If the `DatePicker` input field is focused and its corresponding picker dialog is not opened, then users can increment or decrement the date referenced by `dateValue` property by using the following shortcuts: + * If the `DatePicker` input field is focused and its corresponding picker dialog is not opened, + * then users can increment or decrement the date referenced by `dateValue` property + * by using the following shortcuts: * - * * \[PAGEDOWN\] - Decrements the corresponding day of the month by one - * * \[SHIFT\] + \[PAGEDOWN\] - Decrements the corresponding month by one - * * \[SHIFT\] + \[CTRL\] + \[PAGEDOWN\] - Decrements the corresponding year by one - * * \[PAGEUP\] - Increments the corresponding day of the month by one - * * \[SHIFT\] + \[PAGEUP\] - Increments the corresponding month by one - * * \[SHIFT\] + \[CTRL\] + \[PAGEUP\] - Increments the corresponding year by one + * - [PAGEDOWN] - Decrements the corresponding day of the month by one + * - [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one + * - [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one + * - [PAGEUP] - Increments the corresponding day of the month by one + * - [SHIFT] + [PAGEUP] - Increments the corresponding month by one + * - [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one * * ### Calendar types - * - * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the `primaryCalendarType` property and import one or more of the following modules: + * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. + * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, + * you need to set the `primaryCalendarType` property and import one or more of the following modules: * * `import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";` + * * `import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";` + * * `import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";` + * * `import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";` * * Or, you can use the global configuration and set the `calendarType` key: * - * ``` + * ```html * + * { + * "calendarType": "Japanese" + * } + *